From f570391387a7b2facd44a7746a8239ff65a8214e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 15:51:26 +0100 Subject: [PATCH 01/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20step-decision?= =?UTF-8?q?=20logic=20to=20helper=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Onboarding/Onboarding.js | 22 +++++-------------- .../Screens/Onboarding/availableSteps.js | 13 ++++++++++- 2 files changed, 18 insertions(+), 17 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js index 30cd52ffe..ad6ca4677 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js @@ -1,24 +1,14 @@ import Container from '../../ReusableComponents/Container'; import { OnboardingHooks } from '../../../data'; -import { getSteps } from './availableSteps'; + +import { getSteps, getCurrentStep } from './availableSteps'; import Navigation from './Components/Navigation'; -const getCurrentStep = ( requestedStep, steps ) => { - const isValidStep = ( step ) => - typeof step === 'number' && - Number.isInteger( step ) && - step >= 0 && - step < steps.length; - - const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0; - return steps[ safeCurrentStep ]; -}; - const Onboarding = () => { const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps(); - const steps = getSteps( flags ); - const CurrentStepComponent = getCurrentStep( step, steps ); + const Steps = getSteps( flags ); + const CurrentStepComponent = getCurrentStep( step, Steps ); return ( <> @@ -26,7 +16,7 @@ const Onboarding = () => { setStep={ setStep } currentStep={ step } setCompleted={ setCompleted } - stepperOrder={ steps } + stepperOrder={ Steps } />
@@ -34,7 +24,7 @@ const Onboarding = () => { setStep={ setStep } currentStep={ step } setCompleted={ setCompleted } - stepperOrder={ steps } + stepperOrder={ Steps } />
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js index 7e8ea1556..15b0766d7 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js @@ -9,7 +9,7 @@ export const getSteps = ( flags ) => { StepWelcome, StepBusiness, StepProducts, - StepPaymentMethods, + StepPaymentMethods, StepCompleteSetup, ]; @@ -19,3 +19,14 @@ export const getSteps = ( flags ) => { return allSteps; }; + +export const getCurrentStep = ( requestedStep, steps ) => { + const isValidStep = ( step ) => + typeof step === 'number' && + Number.isInteger( step ) && + step >= 0 && + step < steps.length; + + const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0; + return steps[ safeCurrentStep ]; +}; From d08fe0dc333d225432948fe3e50bd0e0622789c8 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 16:40:51 +0100 Subject: [PATCH 02/12] =?UTF-8?q?=F0=9F=90=9B=20Add=20missing=20`break`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Components/Screens/Onboarding/Components/Navigation.js | 1 + .../resources/js/Components/Screens/Onboarding/StepBusiness.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 5a1da25cb..e4c5ec3bc 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -48,6 +48,7 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { 'Choose checkout options', 'woocommerce-paypal-payments' ); + break; case 4: navigationTitle = __( 'Connect your PayPal account', diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js index a223686ff..dd9a1dcd5 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepBusiness.js @@ -10,9 +10,8 @@ const BUSINESS_RADIO_GROUP_NAME = 'business'; const StepBusiness = ( {} ) => { const { isCasualSeller, setIsCasualSeller } = OnboardingHooks.useBusiness(); - const handleSellerTypeChange = ( value ) => { + const handleSellerTypeChange = ( value ) => setIsCasualSeller( BUSINESS_TYPES.CASUAL_SELLER === value ); - }; const getCurrentValue = () => { if ( isCasualSeller === null ) { From cc782ad6b91f7046dcefa0ac3a2b346d4eae147f Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 17:02:08 +0100 Subject: [PATCH 03/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Consolidate=20naviga?= =?UTF-8?q?tion=20logic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Onboarding/Components/Navigation.js | 38 +++--------- .../Screens/Onboarding/Onboarding.js | 5 +- .../Screens/Onboarding/availableSteps.js | 59 +++++++++++++++---- 3 files changed, 61 insertions(+), 41 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index e4c5ec3bc..54fc5a0f9 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -4,7 +4,13 @@ import { __ } from '@wordpress/i18n'; import { OnboardingHooks } from '../../../../data'; import data from '../../../../utils/data'; -const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { +const Navigation = ( { + setStep, + setCompleted, + currentStep, + stepperOrder, + title, +} ) => { const isLastStep = () => currentStep + 1 === stepperOrder.length; const isFistStep = () => currentStep === 0; const navigateBy = ( stepDirection ) => { @@ -25,41 +31,15 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { const { products } = OnboardingHooks.useProducts(); const { isCasualSeller } = OnboardingHooks.useBusiness(); - let navigationTitle = ''; let disabled = false; switch ( currentStep ) { case 1: - navigationTitle = __( - 'Set up store type', - 'woocommerce-paypal-payments' - ); disabled = isCasualSeller === null; break; case 2: - navigationTitle = __( - 'Select product types', - 'woocommerce-paypal-payments' - ); disabled = products.length < 1; break; - case 3: - navigationTitle = __( - 'Choose checkout options', - 'woocommerce-paypal-payments' - ); - break; - case 4: - navigationTitle = __( - 'Connect your PayPal account', - 'woocommerce-paypal-payments' - ); - break; - default: - navigationTitle = __( - 'PayPal Payments', - 'woocommerce-paypal-payments' - ); } return ( @@ -72,7 +52,7 @@ const Navigation = ( { setStep, setCompleted, currentStep, stepperOrder } ) => { variant="tertiary" onClick={ () => navigateBy( -1 ) } > - { navigationTitle } + { title } ) : ( { 'woocommerce-paypal-payments' ) } > - { navigationTitle } + { title } ) } diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js index ad6ca4677..eb6676b13 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js @@ -8,7 +8,7 @@ const Onboarding = () => { const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps(); const Steps = getSteps( flags ); - const CurrentStepComponent = getCurrentStep( step, Steps ); + const { StepComponent, title } = getCurrentStep( step, Steps ); return ( <> @@ -17,10 +17,11 @@ const Onboarding = () => { currentStep={ step } setCompleted={ setCompleted } stepperOrder={ Steps } + title={ title } />
- { - const allSteps = [ - StepWelcome, - StepBusiness, - StepProducts, - StepPaymentMethods, - StepCompleteSetup, - ]; +/** + * List of all onboarding screens that are available. + * + * The screens are displayed in the order in which they appear in this array + * + * @type {[{id, StepComponent, title}]} + */ +const ALL_STEPS = [ + { + id: 'welcome', + title: __( 'PayPal Payments', 'woocommerce-paypal-payments' ), + StepComponent: StepWelcome, + }, + { + id: 'business', + title: __( 'Set up store type', 'woocommerce-paypal-payments' ), + StepComponent: StepBusiness, + }, + { + id: 'products', + title: __( 'Select product types', 'woocommerce-paypal-payments' ), + StepComponent: StepProducts, + }, + { + id: 'methods', + title: __( 'Choose checkout options', 'woocommerce-paypal-payments' ), + StepComponent: StepPaymentMethods, + }, + { + id: 'complete', + title: __( + 'Connect your PayPal account', + 'woocommerce-paypal-payments' + ), + StepComponent: StepCompleteSetup, + }, +]; +export const getSteps = ( flags ) => { if ( ! flags.canUseCasualSelling ) { - return allSteps.filter( ( step ) => step !== StepBusiness ); + return ALL_STEPS.filter( ( step ) => 'business' !== step.id ); } - return allSteps; + return ALL_STEPS; }; +/** + * Returns the screen-details of the current step, based on the numeric step-index. + * + * @param {number} requestedStep Index of the screen to display. + * @param {[]} steps List of all available steps (see `getSteps()`) + * @return {{id, StepComponent, title}} The requested screen details, or the first welcome screen. + */ export const getCurrentStep = ( requestedStep, steps ) => { const isValidStep = ( step ) => typeof step === 'number' && From 14e3b1077afd7676e90d8d5a3c745eb605a3a9ff Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 17:43:30 +0100 Subject: [PATCH 04/12] =?UTF-8?q?=F0=9F=8E=A8=20Minor=20cleanup=20of=20scs?= =?UTF-8?q?s=20rules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/reusable-components/_navigation.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 09be265c1..5c7c6804f 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -22,12 +22,15 @@ @include font(16, 24, 600); color: $color-gray-900; &:hover{ - background-color:none; - background:none; + background-color: transparent; + background: none; } } &--left { + align-items: center; + display: inline-flex; + &__link { @include font(20, 28, 400); color: $color-gray-900; @@ -44,15 +47,17 @@ &--progress-bar { position: absolute; - bottom: 0px; + bottom: 0; left: 0; background-color: $color-blueberry; height: 4px; + transition: width 0.3s; } } @media screen and (max-width: 480px) { padding: 24px 35px; + .ppcp-r-navigation { flex-wrap: wrap; row-gap: 8px; From aef5119ecd6a026c170bd916cedfabb20d23a1ce Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 17:44:11 +0100 Subject: [PATCH 05/12] =?UTF-8?q?=E2=9C=A8=20Consolidate=20navigation=20lo?= =?UTF-8?q?gic=20further?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Screens/Onboarding/availableSteps.js | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js index 9797a686e..e14e66231 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/availableSteps.js @@ -18,21 +18,25 @@ const ALL_STEPS = [ id: 'welcome', title: __( 'PayPal Payments', 'woocommerce-paypal-payments' ), StepComponent: StepWelcome, + canProceed: () => true, }, { id: 'business', title: __( 'Set up store type', 'woocommerce-paypal-payments' ), StepComponent: StepBusiness, + canProceed: ( { business } ) => business.isCasualSeller !== null, }, { id: 'products', title: __( 'Select product types', 'woocommerce-paypal-payments' ), StepComponent: StepProducts, + canProceed: ( { products } ) => products.products.length > 0, }, { id: 'methods', title: __( 'Choose checkout options', 'woocommerce-paypal-payments' ), StepComponent: StepPaymentMethods, + canProceed: () => true, }, { id: 'complete', @@ -41,15 +45,26 @@ const ALL_STEPS = [ 'woocommerce-paypal-payments' ), StepComponent: StepCompleteSetup, + canProceed: () => true, }, ]; export const getSteps = ( flags ) => { - if ( ! flags.canUseCasualSelling ) { - return ALL_STEPS.filter( ( step ) => 'business' !== step.id ); - } + const steps = flags.canUseCasualSelling + ? ALL_STEPS + : ALL_STEPS.filter( ( step ) => step.id !== 'business' ); - return ALL_STEPS; + const totalStepsCount = steps.length; + + return steps.map( ( step, index ) => ( { + ...step, + isFirst: index === 0, + isLast: index === totalStepsCount - 1, + showNext: index < totalStepsCount - 1, + percentage: 100 * ( index / ( totalStepsCount - 1 ) ), + nextStep: index < totalStepsCount - 1 ? index + 1 : index, + prevStep: index > 0 ? index - 1 : 0, + } ) ); }; /** From 2b878373451ccf061b383a7a3ef28e908e4e6af6 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 17:45:36 +0100 Subject: [PATCH 06/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Use=20real=20icon=20?= =?UTF-8?q?instead=20of=20data().getImage()?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Screens/Onboarding/Components/Navigation.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 54fc5a0f9..2d63d6f06 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -1,8 +1,8 @@ -import { Button } from '@wordpress/components'; +import { Button, Icon } from '@wordpress/components'; +import { chevronLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { OnboardingHooks } from '../../../../data'; -import data from '../../../../utils/data'; const Navigation = ( { setStep, @@ -46,7 +46,7 @@ const Navigation = ( {
- { data().getImage( 'icon-arrow-left.svg' ) } + { ! isFistStep() ? ( - ) : ( - - { title } - - ) } +
- { ! isFistStep() && ( -
- - { __( - 'Save and exit', - 'woocommerce-paypal-payments' - ) } - - { ! isLastStep() && ( - - ) } -
- ) } -
+ { ! isFirst && + NextButton( { showNext, isDisabled, onNext, onExit } ) } +
); }; +const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => { + return ( +
+ + { showNext && ( + + ) } +
+ ); +}; + +const ProgressBar = ( { percent } ) => { + percent = Math.min( Math.max( percent, 0 ), 100 ); + + return ( +
+ ); +}; + export default Navigation; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js index eb6676b13..e59bcdeeb 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js @@ -8,20 +8,26 @@ const Onboarding = () => { const { step, setStep, setCompleted, flags } = OnboardingHooks.useSteps(); const Steps = getSteps( flags ); - const { StepComponent, title } = getCurrentStep( step, Steps ); + const currentStep = getCurrentStep( step, Steps ); + + const handleNext = () => setStep( currentStep.nextStep ); + const handlePrev = () => setStep( currentStep.prevStep ); + const handleExit = () => { + window.location.href = window.ppcpSettings.wcPaymentsTabUrl; + }; return ( <> +
- { return { flags, isReady, step, setStep, completed, setCompleted }; }; + +export const useNavigationState = () => { + const products = useProducts(); + const business = useBusiness(); + + return { + products, + business, + }; +}; From 36b51d2b2a0582e8e58c6465202a4f3028e1affe Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 18:25:15 +0100 Subject: [PATCH 08/12] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20SCSS=20for=20hea?= =?UTF-8?q?der=20navigation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_navigation.scss | 65 +++++++++++-------- .../Onboarding/Components/Navigation.js | 11 ++-- 2 files changed, 45 insertions(+), 31 deletions(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 5c7c6804f..5dd1e21b9 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -4,52 +4,63 @@ border-bottom: 1px solid $color-gray-300; position: relative; + --color-accent: #{$color-blueberry}; + --color-text: #{$color-gray-900}; + --color-disabled: #CCC; + .ppcp-r-navigation { display: flex; justify-content: space-between; align-items: center; + height: 40px; - button.is-primary { - padding: 10px 18px; - justify-content: center; - margin: 0 0 0 12px; - &:not(:disabled) { - background-color: $color-blueberry; + .components-button { + @include font(13, 20, 400); + + &.is-primary { + background-color: var(--color-accent); + padding: 10px 18px; + justify-content: center; + margin: 0 0 0 12px; + + &:disabled { + background-color: var(--color-disabled); + } } - } - button.is-tertiary { - @include font(16, 24, 600); - color: $color-gray-900; - &:hover{ - background-color: transparent; - background: none; + &.is-link { + color: var(--color-accent); + text-decoration: none; + + &:disabled { + color: var(--color-disabled); + } + } + + &.is-title { + @include font(16, 24, 600); + color: var(--color-text); + + .title { + margin-left: 18px; + } + + .big { + @include font(20, 28, 400); + } } } &--left { align-items: center; display: inline-flex; - - &__link { - @include font(20, 28, 400); - color: $color-gray-900; - text-decoration: none; - padding: 0 0 0 18px; - } - } - - &--right a{ - @include font(13, 20, 400); - color: $color-blueberry; - text-decoration: none; } &--progress-bar { position: absolute; bottom: 0; left: 0; - background-color: $color-blueberry; + background-color: var(--color-accent); height: 4px; transition: width 0.3s; } diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index 74dd4bc46..b31dca26a 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -14,12 +14,15 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => {
-
{ ! isFirst && @@ -33,7 +36,7 @@ const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => { const NextButton = ( { showNext, isDisabled, onNext, onExit } ) => { return (
- { showNext && ( From aabb551e6e489277beab565b6782da68e6475772 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 18:38:43 +0100 Subject: [PATCH 09/12] =?UTF-8?q?=F0=9F=92=84=20Sticky=20nav=20bar,=20cons?= =?UTF-8?q?olidate=20repeat=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/css/_variables.scss | 4 ++++ .../reusable-components/_navigation.scss | 21 ++++++++++++------- .../css/components/screens/_fullscreen.scss | 17 +++++++++++++++ .../screens/_onboarding-global.scss | 8 ------- .../components/screens/_settings-global.scss | 7 ------- .../ppcp-settings/resources/css/style.scss | 3 +-- 6 files changed, 35 insertions(+), 25 deletions(-) create mode 100644 modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss delete mode 100644 modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss delete mode 100644 modules/ppcp-settings/resources/css/components/screens/_settings-global.scss diff --git a/modules/ppcp-settings/resources/css/_variables.scss b/modules/ppcp-settings/resources/css/_variables.scss index 613403b67..71b4cae6e 100644 --- a/modules/ppcp-settings/resources/css/_variables.scss +++ b/modules/ppcp-settings/resources/css/_variables.scss @@ -24,6 +24,10 @@ $max-width-onboarding: 1024px; $max-width-onboarding-content: 500px; $max-width-settings: 938px; +:root { + --ppcp-color-app-bg: #{$color-white}; +} + #ppcp-settings-container { --max-width-settings: #{$max-width-settings}; --max-width-onboarding: #{$max-width-onboarding}; diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 5dd1e21b9..38df93594 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -1,10 +1,15 @@ .ppcp-r-navigation-container { - padding: 24px 48px; - margin: 0 -20px 48px -20px; - border-bottom: 1px solid $color-gray-300; - position: relative; + position: sticky; + top: var(--wp-admin--admin-bar--height); + z-index: 10; - --color-accent: #{$color-blueberry}; + padding: 10px 48px; + margin: 0 -20px 48px -20px; + + box-shadow: 0 -1px 0 0 $color-gray-300 inset; + background: var(--ppcp-color-app-bg); + + --wp-components-color-accent: #{$color-blueberry}; --color-text: #{$color-gray-900}; --color-disabled: #CCC; @@ -18,7 +23,7 @@ @include font(13, 20, 400); &.is-primary { - background-color: var(--color-accent); + background-color: var(--wp-components-color-accent); padding: 10px 18px; justify-content: center; margin: 0 0 0 12px; @@ -29,7 +34,7 @@ } &.is-link { - color: var(--color-accent); + color: var(--wp-components-color-accent); text-decoration: none; &:disabled { @@ -60,7 +65,7 @@ position: absolute; bottom: 0; left: 0; - background-color: var(--color-accent); + background-color: var(--wp-components-color-accent); height: 4px; transition: width 0.3s; } diff --git a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss new file mode 100644 index 000000000..41568fbc2 --- /dev/null +++ b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss @@ -0,0 +1,17 @@ +body:has(.ppcp-r-container--settings), +body:has(.ppcp-r-container--onboarding) { + background-color: var(--ppcp-color-app-bg) !important; + + .woocommerce-layout { + padding: 0 !important; + } + + .notice, + .nav-tab-wrapper.woo-nav-tab-wrapper, + .woocommerce-layout__header, + .wrap.woocommerce form > h2, + #screen-meta-links { + display: none !important; + visibility: hidden; + } +} diff --git a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss b/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss deleted file mode 100644 index 7878ef729..000000000 --- a/modules/ppcp-settings/resources/css/components/screens/_onboarding-global.scss +++ /dev/null @@ -1,8 +0,0 @@ -body:has(.ppcp-r-container--onboarding) { - background-color: #fff !important; - - .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout__header, .wrap.woocommerce form > h2, #screen-meta-links { - display: none !important; - visibility: hidden; - } -} diff --git a/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss b/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss deleted file mode 100644 index 629d89d76..000000000 --- a/modules/ppcp-settings/resources/css/components/screens/_settings-global.scss +++ /dev/null @@ -1,7 +0,0 @@ -body:has(.ppcp-r-container--settings) { - background-color: #fff !important; - - .notice, .nav-tab-wrapper.woo-nav-tab-wrapper, .woocommerce-layout, .wrap.woocommerce form > h2, #screen-meta-links { - display: none !important; - } -} diff --git a/modules/ppcp-settings/resources/css/style.scss b/modules/ppcp-settings/resources/css/style.scss index a1f5b390b..8bf0cca40 100644 --- a/modules/ppcp-settings/resources/css/style.scss +++ b/modules/ppcp-settings/resources/css/style.scss @@ -28,5 +28,4 @@ } @import './components/reusable-components/payment-method-modal'; -@import './components/screens/onboarding-global'; -@import './components/screens/settings-global'; +@import './components/screens/fullscreen'; From 0f992dbe3b4b6b56c38b7c8914891610710b549c Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 2 Dec 2024 18:44:49 +0100 Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=92=84=20Adjust=20paddings=20and=20?= =?UTF-8?q?border=20radius?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/reusable-components/_navigation.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 38df93594..311c22e7d 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -24,9 +24,10 @@ &.is-primary { background-color: var(--wp-components-color-accent); - padding: 10px 18px; + padding: 10px 16px; justify-content: center; margin: 0 0 0 12px; + border-radius: 2px; &:disabled { background-color: var(--color-disabled); @@ -61,6 +62,12 @@ display: inline-flex; } + &--right { + .is-link { + padding: 10px 16px; + } + } + &--progress-bar { position: absolute; bottom: 0; From 841a98e0090f06632f1e58b4609d149cd2166cf0 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Tue, 3 Dec 2024 15:18:08 +0100 Subject: [PATCH 11/12] =?UTF-8?q?=E2=9C=A8=20Add=20scroll-effect=20(shadow?= =?UTF-8?q?)=20to=20header=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reusable-components/_navigation.scss | 5 +++ .../Onboarding/Components/Navigation.js | 9 +++- .../resources/js/hooks/useIsScrolled.js | 44 +++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 modules/ppcp-settings/resources/js/hooks/useIsScrolled.js diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss index 311c22e7d..e149026cf 100644 --- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss +++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss @@ -8,6 +8,7 @@ box-shadow: 0 -1px 0 0 $color-gray-300 inset; background: var(--ppcp-color-app-bg); + transition: box-shadow 0.3s; --wp-components-color-accent: #{$color-blueberry}; --color-text: #{$color-gray-900}; @@ -78,6 +79,10 @@ } } + &.is-scrolled { + box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85,93,102,.3); + } + @media screen and (max-width: 480px) { padding: 24px 35px; diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js index b31dca26a..82bfdb656 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/Navigation.js @@ -2,16 +2,23 @@ import { Button, Icon } from '@wordpress/components'; import { chevronLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import classNames from 'classnames'; + import { OnboardingHooks } from '../../../../data'; +import useIsScrolled from '../../../../hooks/useIsScrolled'; const Navigation = ( { stepDetails, onNext, onPrev, onExit } ) => { const { title, isFirst, percentage, showNext, canProceed } = stepDetails; + const { isScrolled } = useIsScrolled(); const state = OnboardingHooks.useNavigationState(); const isDisabled = ! canProceed( state ); + const className = classNames( 'ppcp-r-navigation-container', { + 'is-scrolled': isScrolled, + } ); return ( -
+