From 11e6624dfc280bf1a829133e58c42cd879bf954d Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 16 Jan 2025 14:39:55 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20common=20Styling?=
 =?UTF-8?q?=20components=20to=20own=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Styling/LocationSelector.js    | 36 ++++---
 .../Components/Styling/SettingsPanel.js       | 93 +++++++------------
 .../Styling/StylingSectionWithCheckboxes.js   | 39 ++++++++
 .../Styling/StylingSectionWithRadiobuttons.js | 39 ++++++++
 .../Styling/StylingSectionWithSelect.js       | 36 +++++++
 5 files changed, 169 insertions(+), 74 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js
index c05b68727..01745fbdc 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js
+++ b/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"
-			title={ __( 'Button Styling', 'wooocommerce-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"
-				label={ __( 'Locations', 'woocommerce-paypal-payments' ) }
+		<>
+			<StylingSection
+				className="header-section"
+				bigTitle={ true }
+				title={ __( 'Button Styling', 'wooocommerce-paypal-payments' ) }
+				description={ __(
+					'Customize the appearance of the PayPal smart buttons on your website and choose which payment buttons to display.',
+					'woocommerce-paypal-payments'
+				) }
+			></StylingSection>
+			<StylingSectionWithSelect
+				className="location-selector"
+				title={ __( 'Locations', 'woocommerce-paypal-payments' ) }
+				separatorAndGap={ false }
 				options={ locationChoices }
 				value={ location }
 				onChange={ setLocation }
-			/>
-			<p dangerouslySetInnerHTML={ { __html: locationDescription } } />
-		</StylingSection>
+			>
+				<Description asHtml={ true }>
+					{ locationDescription }
+				</Description>
+			</StylingSectionWithSelect>
+		</>
 	);
 };
 
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
index f357bb287..40d418276 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/SettingsPanel.js
+++ b/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"
-		>
-			<HStack spacing={ 6 }>
-				<CheckboxGroup
-					options={ paymentMethodChoices }
-					value={ paymentMethods }
-					onChange={ setPaymentMethods }
-				/>
-			</HStack>
-		</StylingSection>
+			options={ paymentMethodChoices }
+			value={ paymentMethods }
+			onChange={ setPaymentMethods }
+		/>
 	);
 };
 
@@ -61,18 +55,13 @@ const SectionButtonLayout = ( { location } ) => {
 	}
 
 	return (
-		<StylingSection
+		<StylingSectionWithRadiobuttons
 			className="button-layout"
 			title={ __( 'Button Layout', 'woocommerce-paypal-payments' ) }
-		>
-			<HStack>
-				<RadioControl
-					options={ layoutChoices }
-					selected={ layout }
-					onChange={ setLayout }
-				/>
-			</HStack>
-		</StylingSection>
+			options={ layoutChoices }
+			selected={ layout }
+			onChange={ setLayout }
+		/>
 	);
 };
 
@@ -80,18 +69,13 @@ const SectionButtonShape = ( { location } ) => {
 	const { shape, setShape, shapeChoices } = useStylingProps( location );
 
 	return (
-		<StylingSection
+		<StylingSectionWithRadiobuttons
 			title={ __( 'Shape', 'woocommerce-paypal-payments' ) }
 			className="button-shape"
-		>
-			<HStack>
-				<RadioControl
-					options={ shapeChoices }
-					selected={ shape }
-					onChange={ setShape }
-				/>
-			</HStack>
-		</StylingSection>
+			options={ shapeChoices }
+			selected={ shape }
+			onChange={ setShape }
+		/>
 	);
 };
 
@@ -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"
-		>
-			<SelectControl
-				options={ labelChoices }
-				value={ label }
-				onChange={ setLabel }
-			/>
-		</StylingSection>
+			options={ labelChoices }
+			value={ label }
+			onChange={ setLabel }
+		/>
 	);
 };
 
@@ -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"
-		>
-			<SelectControl
-				options={ colorChoices }
-				value={ color }
-				onChange={ setColor }
-			/>
-		</StylingSection>
+			options={ colorChoices }
+			value={ color }
+			onChange={ setColor }
+		/>
 	);
 };
 
@@ -138,17 +116,12 @@ const SectionButtonTagline = ( { location } ) => {
 	}
 
 	return (
-		<StylingSection
+		<StylingSectionWithCheckboxes
 			title={ __( 'Tagline', 'woocommerce-paypal-payments' ) }
 			className="tagline"
-		>
-			<HStack>
-				<CheckboxGroup
-					options={ taglineChoices }
-					value={ tagline }
-					onChange={ setTagline }
-				/>
-			</HStack>
-		</StylingSection>
+			options={ taglineChoices }
+			value={ tagline }
+			onChange={ setTagline }
+		/>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js
new file mode 100644
index 000000000..cc0b259d6
--- /dev/null
+++ b/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;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js
new file mode 100644
index 000000000..4bc33326f
--- /dev/null
+++ b/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;
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js
new file mode 100644
index 000000000..c4164d6b8
--- /dev/null
+++ b/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;