♻️ Restructure Styling component files

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { SelectStylingSection } from '../Layout';
+
+const SectionButtonColor = ( { location } ) => {
+	const { color, setColor, colorChoices } =
+		StylingHooks.useStylingProps( location );
+
+	return (
+		<SelectStylingSection
+			title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
+			className="button-color"
+			options={ colorChoices }
+			value={ color }
+			onChange={ setColor }
+		/>
+	);
+};
+
+export default SectionButtonColor;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { SelectStylingSection } from '../Layout';
+
+const SectionButtonLabel = ( { location } ) => {
+	const { label, setLabel, labelChoices } =
+		StylingHooks.useStylingProps( location );
+
+	return (
+		<SelectStylingSection
+			title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
+			className="button-label"
+			options={ labelChoices }
+			value={ label }
+			onChange={ setLabel }
+		/>
+	);
+};
+
+export default SectionButtonLabel;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js

@@ -0,0 +1,25 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { RadiobuttonStylingSection } from '../Layout';
+
+const SectionButtonLayout = ( { location } ) => {
+	const { supportsLayout, layout, setLayout, layoutChoices } =
+		StylingHooks.useStylingProps( location );
+
+	if ( ! supportsLayout ) {
+		return null;
+	}
+
+	return (
+		<RadiobuttonStylingSection
+			className="button-layout"
+			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
+			options={ layoutChoices }
+			selected={ layout }
+			onChange={ setLayout }
+		/>
+	);
+};
+
+export default SectionButtonLayout;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { RadiobuttonStylingSection } from '../Layout';
+
+const SectionButtonShape = ( { location } ) => {
+	const { shape, setShape, shapeChoices } =
+		StylingHooks.useStylingProps( location );
+
+	return (
+		<RadiobuttonStylingSection
+			title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
+			className="button-shape"
+			options={ shapeChoices }
+			selected={ shape }
+			onChange={ setShape }
+		/>
+	);
+};
+
+export default SectionButtonShape;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js

@@ -1,9 +1,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 
-import { StylingHooks } from '../../../../../data';
+import { StylingHooks } from '../../../../../../data';
-import { Description } from '../../../../ReusableComponents/SettingsBlocks';
+import { Description } from '../../../../../ReusableComponents/SettingsBlocks';
-import StylingSection from './StylingSection';
+import { SelectStylingSection, StylingSection } from '../Layout';
-import StylingSectionWithSelect from './StylingSectionWithSelect';
 
 const LocationSelector = ( { location, setLocation } ) => {
 	const { locationChoices, locationDetails } =
@@ -22,9 +21,9 @@ const LocationSelector = ( { location, setLocation } ) => {
 					'woocommerce-paypal-payments'
 				) }
 			></StylingSection>
-			<StylingSectionWithSelect
+			<SelectStylingSection
 				className="location-selector"
-				title={ __( 'Locations', 'woocommerce-paypal-payments' ) }
+				title={ __( 'Location', 'woocommerce-paypal-payments' ) }
 				separatorAndGap={ false }
 				options={ locationChoices }
 				value={ location }
@@ -33,7 +32,7 @@ const LocationSelector = ( { location, setLocation } ) => {
 				<Description asHtml={ true }>
 					{ locationDescription }
 				</Description>
-			</StylingSectionWithSelect>
+			</SelectStylingSection>
 		</>
 	);
 };

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { CheckboxStylingSection } from '../Layout';
+
+const SectionPaymentMethods = ( { location } ) => {
+	const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
+		StylingHooks.useStylingProps( location );
+
+	return (
+		<CheckboxStylingSection
+			title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
+			className="payment-methods"
+			options={ paymentMethodChoices }
+			value={ paymentMethods }
+			onChange={ setPaymentMethods }
+		/>
+	);
+};
+
+export default SectionPaymentMethods;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js

@@ -0,0 +1,25 @@
+import { __ } from '@wordpress/i18n';
+
+import { StylingHooks } from '../../../../../../data';
+import { CheckboxStylingSection } from '../Layout';
+
+const SectionTagline = ( { location } ) => {
+	const { supportsTagline, tagline, setTagline, taglineChoices } =
+		StylingHooks.useStylingProps( location );
+
+	if ( ! supportsTagline ) {
+		return null;
+	}
+
+	return (
+		<CheckboxStylingSection
+			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
+			className="tagline"
+			options={ taglineChoices }
+			value={ tagline }
+			onChange={ setTagline }
+		/>
+	);
+};
+
+export default SectionTagline;

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js

@@ -0,0 +1,7 @@
+export { default as LocationSelector } from './LocationSelector';
+export { default as ButtonColor } from './ButtonColor';
+export { default as ButtonLabel } from './ButtonLabel';
+export { default as ButtonLayout } from './ButtonLayout';
+export { default as ButtonShape } from './ButtonShape';
+export { default as PaymentMethods } from './PaymentMethods';
+export { default as TagLine } from './TagLine';

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js

@@ -1,9 +1,9 @@
-import SettingsBlock from '../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
 import {
 	Description,
 	Header,
 	Title,
-} from '../../../../ReusableComponents/SettingsBlocks';
+} from '../../../../../ReusableComponents/SettingsBlocks';
 
 const StylingSection = ( {
 	title,

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
-import { CheckboxGroup } from '../../../../ReusableComponents/Fields';
+import { CheckboxGroup } from '../../../../../ReusableComponents/Fields';
-import HStack from '../../../../ReusableComponents/HStack';
+import HStack from '../../../../../ReusableComponents/HStack';
 import StylingSection from './StylingSection';
 
 const StylingSectionWithCheckboxes = ( {

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js

@@ -1,7 +1,7 @@
 import { RadioControl } from '@wordpress/components';
 import classNames from 'classnames';
 
-import HStack from '../../../../ReusableComponents/HStack';
+import HStack from '../../../../../ReusableComponents/HStack';
 import StylingSection from './StylingSection';
 
 const StylingSectionWithRadiobuttons = ( {

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js

@@ -0,0 +1,4 @@
+export { default as StylingSection } from './StylingSection';
+export { default as CheckboxStylingSection } from './StylingSectionWithCheckboxes';
+export { default as RadiobuttonStylingSection } from './StylingSectionWithRadiobuttons';
+export { default as SelectStylingSection } from './StylingSectionWithSelect';

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js

@@ -1,10 +1,13 @@
-import { __ } from '@wordpress/i18n';
-
 import { StylingHooks } from '../../../../../data';
-import LocationSelector from './LocationSelector';
+import {
-import StylingSectionWithSelect from './StylingSectionWithSelect';
+	LocationSelector,
-import StylingSectionWithCheckboxes from './StylingSectionWithCheckboxes';
+	PaymentMethods,
-import StylingSectionWithRadiobuttons from './StylingSectionWithRadiobuttons';
+	ButtonLayout,
+	ButtonShape,
+	ButtonLabel,
+	ButtonColor,
+	TagLine,
+} from './Content';
 
 const SettingsPanel = () => {
 	const { location, setLocation } = StylingHooks.useStylingLocation();
@@ -15,114 +18,14 @@ const SettingsPanel = () => {
 				location={ location }
 				setLocation={ setLocation }
 			/>
-			<SectionPaymentMethods location={ location } />
+			<PaymentMethods location={ location } />
-			<SectionButtonLayout location={ location } />
+			<ButtonLayout location={ location } />
-			<SectionButtonShape location={ location } />
+			<ButtonShape location={ location } />
-			<SectionButtonLabel location={ location } />
+			<ButtonLabel location={ location } />
-			<SectionButtonColor location={ location } />
+			<ButtonColor location={ location } />
-			<SectionButtonTagline location={ location } />
+			<TagLine location={ location } />
 		</div>
 	);
 };
 
 export default SettingsPanel;
-
-// -----
-
-const SectionPaymentMethods = ( { location } ) => {
-	const { paymentMethods, setPaymentMethods, paymentMethodChoices } =
-		StylingHooks.useStylingProps( location );
-
-	return (
-		<StylingSectionWithCheckboxes
-			title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
-			className="payment-methods"
-			options={ paymentMethodChoices }
-			value={ paymentMethods }
-			onChange={ setPaymentMethods }
-		/>
-	);
-};
-
-const SectionButtonLayout = ( { location } ) => {
-	const { supportsLayout, layout, setLayout, layoutChoices } =
-		StylingHooks.useStylingProps( location );
-
-	if ( ! supportsLayout ) {
-		return null;
-	}
-
-	return (
-		<StylingSectionWithRadiobuttons
-			className="button-layout"
-			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
-			options={ layoutChoices }
-			selected={ layout }
-			onChange={ setLayout }
-		/>
-	);
-};
-
-const SectionButtonShape = ( { location } ) => {
-	const { shape, setShape, shapeChoices } =
-		StylingHooks.useStylingProps( location );
-
-	return (
-		<StylingSectionWithRadiobuttons
-			title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
-			className="button-shape"
-			options={ shapeChoices }
-			selected={ shape }
-			onChange={ setShape }
-		/>
-	);
-};
-
-const SectionButtonLabel = ( { location } ) => {
-	const { label, setLabel, labelChoices } =
-		StylingHooks.useStylingProps( location );
-
-	return (
-		<StylingSectionWithSelect
-			title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
-			className="button-label"
-			options={ labelChoices }
-			value={ label }
-			onChange={ setLabel }
-		/>
-	);
-};
-
-const SectionButtonColor = ( { location } ) => {
-	const { color, setColor, colorChoices } =
-		StylingHooks.useStylingProps( location );
-
-	return (
-		<StylingSectionWithSelect
-			title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
-			className="button-color"
-			options={ colorChoices }
-			value={ color }
-			onChange={ setColor }
-		/>
-	);
-};
-
-const SectionButtonTagline = ( { location } ) => {
-	const { supportsTagline, tagline, setTagline, taglineChoices } =
-		StylingHooks.useStylingProps( location );
-
-	if ( ! supportsTagline ) {
-		return null;
-	}
-
-	return (
-		<StylingSectionWithCheckboxes
-			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
-			className="tagline"
-			options={ taglineChoices }
-			value={ tagline }
-			onChange={ setTagline }
-		/>
-	);
-};