✨ Add new Accordion Section for advanced options

modules/ppcp-settings/resources/css/components/reusable-components/_accordion-section.scss

@@ -0,0 +1,25 @@
+.ppcp-r-accordion {
+
+	&--title {
+		@include font(14, 32, 450);
+		color: $color-gray-900;
+
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		margin: 24px auto;
+		border: 0;
+		background: transparent;
+		cursor: pointer;
+	}
+
+	&--content {
+		margin: 24px 0 0;
+	}
+
+	&.open {
+		.ppcp-r-accordion--icon {
+			transform: rotate(180deg);
+		}
+	}
+}

modules/ppcp-settings/resources/css/style.scss

@@ -15,7 +15,8 @@
 	@import './components/reusable-components/navigation';
 	@import './components/reusable-components/fields';
 	@import './components/reusable-components/title-badge';
-	@import './components/reusable-components/_badge-box.scss';
+	@import './components/reusable-components/accordion-section';
+	@import './components/reusable-components/badge-box';
 	@import './components/screens/onboarding';
 	@import './components/screens/dashboard/tab-dashboard';
 }

modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import data from '../../utils/data';
+
+const Accordion = ( { title, initiallyOpen, children } ) => {
+	const [ isOpen, setIsOpen ] = useState( initiallyOpen );
+
+	const toggleOpen = ( ev ) => {
+		setIsOpen( ! isOpen );
+		ev?.preventDefault();
+		return false;
+	};
+
+	const iconChevron = data().getImage(
+		'icon-arrow-down.svg',
+		'ppcp-r-accordion--icon'
+	);
+
+	return (
+		<div className={ `ppcp-r-accordion ${ isOpen ? 'open' : '' }` }>
+			<button
+				onClick={ toggleOpen }
+				className="ppcp-r-accordion--title"
+				type="button"
+			>
+				{ title }
+				{ iconChevron }
+			</button>
+			{ isOpen && (
+				<div className="ppcp-r-accordion--content">{ children }</div>
+			) }
+		</div>
+	);
+};
+
+export default Accordion;

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -8,6 +8,7 @@ import BadgeBox, {
 	BADGE_BOX_TITLE_BIG,
 } from '../../ReusableComponents/BadgeBox';
 import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
+import AccordionSection from '../../ReusableComponents/AccordionSection';
 
 const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 	return (
@@ -44,7 +45,16 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 			</div>
 			<Separator className="ppcp-r-page-welcome-mode-separator" />
 			<WelcomeDocs />
-			<AdvancedOptionsForm setCompleted={ setCompleted } />
+			<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
+			<AccordionSection
+				title={ __(
+					'See advanced options',
+					'woocommerce-paypal-payments'
+				) }
+				initiallyOpen={ false }
+			>
+				<AdvancedOptionsForm setCompleted={ setCompleted } />
+			</AccordionSection>
 		</div>
 	);
 };