woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 12:25:15 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ Restructure Styling component files

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 19:29:16 +01:00
parent 0673e5d813
commit 2112769de9
No known key found for this signature in database
14 changed files with 171 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

21
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js Normal file
View file

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

21
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js Normal file
View file

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

25
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js Normal file
View file

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

21
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js Normal file
View file

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

13
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js
View file

@ -1,9 +1,8 @@
import { __, sprintf } from '@wordpress/i18n';
import { StylingHooks } from '../../../../../data';
import { Description } from '../../../../ReusableComponents/SettingsBlocks';
import StylingSection from './StylingSection';
import StylingSectionWithSelect from './StylingSectionWithSelect';
import { StylingHooks } from '../../../../../../data';
import { Description } from '../../../../../ReusableComponents/SettingsBlocks';
import { SelectStylingSection, StylingSection } from '../Layout';
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>
</>
);
};

21
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js Normal file
View file

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

25
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js Normal file
View file

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

7
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js Normal file
View file

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

4
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSection.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
View file

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

4
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js
View file

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

2
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js
View file

@ -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 = ( {

0
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js → modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js
View file

4
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js Normal file
View file

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

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

@ -1,10 +1,13 @@
import { __ } from '@wordpress/i18n';
import { StylingHooks } from '../../../../../data';
import LocationSelector from './LocationSelector';
import StylingSectionWithSelect from './StylingSectionWithSelect';
import StylingSectionWithCheckboxes from './StylingSectionWithCheckboxes';
import StylingSectionWithRadiobuttons from './StylingSectionWithRadiobuttons';
import {
LocationSelector,
PaymentMethods,
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 } />
<SectionButtonLayout location={ location } />
<SectionButtonShape location={ location } />
<SectionButtonLabel location={ location } />
<SectionButtonColor location={ location } />
<SectionButtonTagline location={ location } />
<PaymentMethods location={ location } />
<ButtonLayout location={ location } />
<ButtonShape location={ location } />
<ButtonLabel location={ location } />
<ButtonColor 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 }
/>
);
};