woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Extract common Styling components to own files

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 14:39:55 +01:00
parent e5eb1a4435
commit 11e6624dfc
No known key found for this signature in database
5 changed files with 169 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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>
</>
);
};

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

@ -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 }
/>
);
};

39
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js Normal file
View file

@ -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;

39
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js Normal file
View file

@ -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;

36
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js Normal file
View file

@ -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;