♻️ Extract common Styling components to own files

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

@@ -4,7 +4,9 @@ import { __, sprintf } from '@wordpress/i18n';
 // Dummy hook.
 import { useStylingProps } from '../../Tabs/TabStyling';
 
+import { Description } from '../../../../ReusableComponents/SettingsBlocks';
 import StylingSection from './StylingSection';
+import StylingSectionWithSelect from './StylingSectionWithSelect';
 
 const LocationSelector = ( { location, setLocation } ) => {
 	const { locationChoices, locationDetails } = useStylingProps( location );
@@ -12,23 +14,29 @@ const LocationSelector = ( { location, setLocation } ) => {
 	const locationDescription = sprintf( description, link );
 
 	return (
-		<StylingSection
+		<>
-			className="header-section"
+			<StylingSection
-			title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
+				className="header-section"
-			description={ __(
+				bigTitle={ true }
-				'Customize the appearance of the PayPal smart buttons on your website and choose which payment buttons to display.',
+				title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
-				'woocommerce-paypal-payments'
+				description={ __(
-			) }
+					'Customize the appearance of the PayPal smart buttons on your website and choose which payment buttons to display.',
-		>
+					'woocommerce-paypal-payments'
-			<SelectControl
+				) }
-				className="ppcp-r-styling__select"
+			></StylingSection>
-				label={ __( 'Locations', 'woocommerce-paypal-payments' ) }
+			<StylingSectionWithSelect
+				className="location-selector"
+				title={ __( 'Locations', 'woocommerce-paypal-payments' ) }
+				separatorAndGap={ false }
 				options={ locationChoices }
 				value={ location }
 				onChange={ setLocation }
-			/>
+			>
-			<p dangerouslySetInnerHTML={ { __html: locationDescription } } />
+				<Description asHtml={ true }>
-		</StylingSection>
+					{ locationDescription }
+				</Description>
+			</StylingSectionWithSelect>
+		</>
 	);
 };
 

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

@@ -1,13 +1,12 @@
 import { __ } from '@wordpress/i18n';
-import { RadioControl, SelectControl } from '@wordpress/components';
 
 // Dummy hook.
 import { useStylingLocation, useStylingProps } from '../../Tabs/TabStyling';
 
-import { CheckboxGroup } from '../../../../ReusableComponents/Fields';
-import HStack from '../../../../ReusableComponents/HStack';
 import LocationSelector from './LocationSelector';
-import StylingSection from './StylingSection';
+import StylingSectionWithSelect from './StylingSectionWithSelect';
+import StylingSectionWithCheckboxes from './StylingSectionWithCheckboxes';
+import StylingSectionWithRadiobuttons from './StylingSectionWithRadiobuttons';
 
 const SettingsPanel = () => {
 	const { location, setLocation } = useStylingLocation();
@@ -37,18 +36,13 @@ const SectionPaymentMethods = ( { location } ) => {
 		useStylingProps( location );
 
 	return (
-		<StylingSection
+		<StylingSectionWithCheckboxes
 			title={ __( 'Payment Methods', 'woocommerce-paypal-payments' ) }
 			className="payment-methods"
-		>
+			options={ paymentMethodChoices }
-			<HStack spacing={ 6 }>
+			value={ paymentMethods }
-				<CheckboxGroup
+			onChange={ setPaymentMethods }
-					options={ paymentMethodChoices }
+		/>
-					value={ paymentMethods }
-					onChange={ setPaymentMethods }
-				/>
-			</HStack>
-		</StylingSection>
 	);
 };
 
@@ -61,18 +55,13 @@ const SectionButtonLayout = ( { location } ) => {
 	}
 
 	return (
-		<StylingSection
+		<StylingSectionWithRadiobuttons
 			className="button-layout"
 			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
-		>
+			options={ layoutChoices }
-			<HStack>
+			selected={ layout }
-				<RadioControl
+			onChange={ setLayout }
-					options={ layoutChoices }
+		/>
-					selected={ layout }
-					onChange={ setLayout }
-				/>
-			</HStack>
-		</StylingSection>
 	);
 };
 
@@ -80,18 +69,13 @@ const SectionButtonShape = ( { location } ) => {
 	const { shape, setShape, shapeChoices } = useStylingProps( location );
 
 	return (
-		<StylingSection
+		<StylingSectionWithRadiobuttons
 			title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
 			className="button-shape"
-		>
+			options={ shapeChoices }
-			<HStack>
+			selected={ shape }
-				<RadioControl
+			onChange={ setShape }
-					options={ shapeChoices }
+		/>
-					selected={ shape }
-					onChange={ setShape }
-				/>
-			</HStack>
-		</StylingSection>
 	);
 };
 
@@ -99,16 +83,13 @@ const SectionButtonLabel = ( { location } ) => {
 	const { label, setLabel, labelChoices } = useStylingProps( location );
 
 	return (
-		<StylingSection
+		<StylingSectionWithSelect
 			title={ __( 'Button Label', 'woocommerce-paypal-payments' ) }
 			className="button-label"
-		>
+			options={ labelChoices }
-			<SelectControl
+			value={ label }
-				options={ labelChoices }
+			onChange={ setLabel }
-				value={ label }
+		/>
-				onChange={ setLabel }
-			/>
-		</StylingSection>
 	);
 };
 
@@ -116,16 +97,13 @@ const SectionButtonColor = ( { location } ) => {
 	const { color, setColor, colorChoices } = useStylingProps( location );
 
 	return (
-		<StylingSection
+		<StylingSectionWithSelect
 			title={ __( 'Button Color', 'woocommerce-paypal-payments' ) }
 			className="button-color"
-		>
+			options={ colorChoices }
-			<SelectControl
+			value={ color }
-				options={ colorChoices }
+			onChange={ setColor }
-				value={ color }
+		/>
-				onChange={ setColor }
-			/>
-		</StylingSection>
 	);
 };
 
@@ -138,17 +116,12 @@ const SectionButtonTagline = ( { location } ) => {
 	}
 
 	return (
-		<StylingSection
+		<StylingSectionWithCheckboxes
 			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
 			className="tagline"
-		>
+			options={ taglineChoices }
-			<HStack>
+			value={ tagline }
-				<CheckboxGroup
+			onChange={ setTagline }
-					options={ taglineChoices }
+		/>
-					value={ tagline }
-					onChange={ setTagline }
-				/>
-			</HStack>
-		</StylingSection>
 	);
 };

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

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+
+import { CheckboxGroup } from '../../../../ReusableComponents/Fields';
+import HStack from '../../../../ReusableComponents/HStack';
+import StylingSection from './StylingSection';
+
+const StylingSectionWithCheckboxes = ( {
+	title,
+	className = '',
+	description = '',
+	separatorAndGap = true,
+	options,
+	value,
+	onChange,
+	children,
+} ) => {
+	className = classNames( 'has-checkboxes', className );
+
+	return (
+		<StylingSection
+			title={ title }
+			className={ className }
+			description={ description }
+			separatorAndGap={ separatorAndGap }
+		>
+			<HStack spacing={ 6 }>
+				<CheckboxGroup
+					options={ options }
+					value={ value }
+					onChange={ onChange }
+				/>
+			</HStack>
+
+			{ children }
+		</StylingSection>
+	);
+};
+
+export default StylingSectionWithCheckboxes;

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

@@ -0,0 +1,39 @@
+import { RadioControl } from '@wordpress/components';
+import classNames from 'classnames';
+
+import HStack from '../../../../ReusableComponents/HStack';
+import StylingSection from './StylingSection';
+
+const StylingSectionWithRadiobuttons = ( {
+	title,
+	className = '',
+	description = '',
+	separatorAndGap = true,
+	options,
+	selected,
+	onChange,
+	children,
+} ) => {
+	className = classNames( 'has-radio-buttons', className );
+
+	return (
+		<StylingSection
+			title={ title }
+			className={ className }
+			description={ description }
+			separatorAndGap={ separatorAndGap }
+		>
+			<HStack>
+				<RadioControl
+					options={ options }
+					selected={ selected }
+					onChange={ onChange }
+				/>
+			</HStack>
+
+			{ children }
+		</StylingSection>
+	);
+};
+
+export default StylingSectionWithRadiobuttons;

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

@@ -0,0 +1,36 @@
+import { SelectControl } from '@wordpress/components';
+import classNames from 'classnames';
+
+import StylingSection from './StylingSection';
+
+const StylingSectionWithSelect = ( {
+	title,
+	className = '',
+	description = '',
+	separatorAndGap = true,
+	options,
+	value,
+	onChange,
+	children,
+} ) => {
+	className = classNames( 'has-select', className );
+
+	return (
+		<StylingSection
+			title={ title }
+			className={ className }
+			description={ description }
+			separatorAndGap={ separatorAndGap }
+		>
+			<SelectControl
+				options={ options }
+				value={ value }
+				onChange={ onChange }
+			/>
+
+			{ children }
+		</StylingSection>
+	);
+};
+
+export default StylingSectionWithSelect;