From 2112769de9a7a0bfcc20549d4b0400fd6d9ae71f Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 16 Jan 2025 19:29:16 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Restructure=20Styling=20co?= =?UTF-8?q?mponent=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Styling/Content/ButtonColor.js | 21 +++ .../Components/Styling/Content/ButtonLabel.js | 21 +++ .../Styling/Content/ButtonLayout.js | 25 ++++ .../Components/Styling/Content/ButtonShape.js | 21 +++ .../Styling/{ => Content}/LocationSelector.js | 13 +- .../Styling/Content/PaymentMethods.js | 21 +++ .../Components/Styling/Content/TagLine.js | 25 ++++ .../Components/Styling/Content/index.js | 7 + .../Styling/{ => Layout}/StylingSection.js | 4 +- .../StylingSectionWithCheckboxes.js | 4 +- .../StylingSectionWithRadiobuttons.js | 2 +- .../{ => Layout}/StylingSectionWithSelect.js | 0 .../Components/Styling/Layout/index.js | 4 + .../Components/Styling/SettingsPanel.js | 127 +++--------------- 14 files changed, 171 insertions(+), 124 deletions(-) create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/{ => Content}/LocationSelector.js (72%) create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/{ => Layout}/StylingSection.js (76%) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/{ => Layout}/StylingSectionWithCheckboxes.js (83%) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/{ => Layout}/StylingSectionWithRadiobuttons.js (92%) rename modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/{ => Layout}/StylingSectionWithSelect.js (100%) create mode 100644 modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonColor.js new file mode 100644 index 000000000..acadc3943 --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionButtonColor; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLabel.js new file mode 100644 index 000000000..a0763a049 --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionButtonLabel; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonLayout.js new file mode 100644 index 000000000..0b6407ef1 --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionButtonLayout; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/ButtonShape.js new file mode 100644 index 000000000..68eaef1dc --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionButtonShape; 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/Content/LocationSelector.js similarity index 72% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/LocationSelector.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/LocationSelector.js index 35c3a6efd..2fd21caa0 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/Content/LocationSelector.js @@ -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' ) } > - { { locationDescription } - + ); }; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/PaymentMethods.js new file mode 100644 index 000000000..e379f876b --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionPaymentMethods; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/TagLine.js new file mode 100644 index 000000000..66fa4cd1f --- /dev/null +++ b/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 ( + + ); +}; + +export default SectionTagline; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Content/index.js new file mode 100644 index 000000000..27a4e3d56 --- /dev/null +++ b/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'; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSection.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js similarity index 76% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSection.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js index 51290831a..e528361dc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSection.js +++ b/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, 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/Layout/StylingSectionWithCheckboxes.js similarity index 83% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithCheckboxes.js index cc0b259d6..d3ca92db4 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithCheckboxes.js +++ b/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 HStack from '../../../../ReusableComponents/HStack'; +import { CheckboxGroup } from '../../../../../ReusableComponents/Fields'; +import HStack from '../../../../../ReusableComponents/HStack'; import StylingSection from './StylingSection'; const 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/Layout/StylingSectionWithRadiobuttons.js similarity index 92% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithRadiobuttons.js index 4bc33326f..337e2b30f 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithRadiobuttons.js +++ b/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 = ( { 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/Layout/StylingSectionWithSelect.js similarity index 100% rename from modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/StylingSectionWithSelect.js rename to modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSectionWithSelect.js diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/index.js new file mode 100644 index 000000000..ea856552d --- /dev/null +++ b/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'; 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 4826632a9..ad65185cf 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,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 } /> - - - - - - + + + + + + ); }; export default SettingsPanel; - -// ----- - -const SectionPaymentMethods = ( { location } ) => { - const { paymentMethods, setPaymentMethods, paymentMethodChoices } = - StylingHooks.useStylingProps( location ); - - return ( - - ); -}; - -const SectionButtonLayout = ( { location } ) => { - const { supportsLayout, layout, setLayout, layoutChoices } = - StylingHooks.useStylingProps( location ); - - if ( ! supportsLayout ) { - return null; - } - - return ( - - ); -}; - -const SectionButtonShape = ( { location } ) => { - const { shape, setShape, shapeChoices } = - StylingHooks.useStylingProps( location ); - - return ( - - ); -}; - -const SectionButtonLabel = ( { location } ) => { - const { label, setLabel, labelChoices } = - StylingHooks.useStylingProps( location ); - - return ( - - ); -}; - -const SectionButtonColor = ( { location } ) => { - const { color, setColor, colorChoices } = - StylingHooks.useStylingProps( location ); - - return ( - - ); -}; - -const SectionButtonTagline = ( { location } ) => { - const { supportsTagline, tagline, setTagline, taglineChoices } = - StylingHooks.useStylingProps( location ); - - if ( ! supportsTagline ) { - return null; - } - - return ( - - ); -};