💄 Enhance AccordionSection UI and flexibility

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

@@ -1,4 +1,6 @@
 .ppcp-r-accordion {
+	margin-left: auto;
+	margin-right: auto;
 
 	&--title {
 		@include font(14, 32, 450);

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -37,6 +37,10 @@
 		color: $color-white;
 		border: none;
 	}
+
+	.onboarding-advanced-options {
+		max-width: 800px;
+	}
 }
 
 .ppcp-r-welcome-features {

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

@@ -1,7 +1,12 @@
 import React, { useState } from 'react';
 import data from '../../utils/data';
 
-const Accordion = ( { title, initiallyOpen, children } ) => {
+const Accordion = ( {
+	title,
+	initiallyOpen = false,
+	className = '',
+	children,
+} ) => {
 	const [ isOpen, setIsOpen ] = useState( initiallyOpen );
 
 	const toggleOpen = ( ev ) => {
@@ -15,8 +20,16 @@ const Accordion = ( { title, initiallyOpen, children } ) => {
 		'ppcp-r-accordion--icon'
 	);
 
+	const wrapperClasses = [ 'ppcp-r-accordion' ];
+	if ( className ) {
+		wrapperClasses.push( className );
+	}
+	if ( isOpen ) {
+		wrapperClasses.push( 'open' );
+	}
+
 	return (
-		<div className={ `ppcp-r-accordion ${ isOpen ? 'open' : '' }` }>
+		<div className={ wrapperClasses.join( ' ' ) }>
 			<button
 				onClick={ toggleOpen }
 				className="ppcp-r-accordion--title"

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

@@ -51,6 +51,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 					'See advanced options',
 					'woocommerce-paypal-payments'
 				) }
+				className="onboarding-advanced-options"
 				initiallyOpen={ false }
 			>
 				<AdvancedOptionsForm setCompleted={ setCompleted } />