From 8273c153fdfae528745afd4af5897118bb2885dd Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Thu, 9 Nov 2023 21:17:02 +0530 Subject: [PATCH 1/9] PRESS2-1233 | added admin bar changes --- .../components/AdminBar/index.js | 35 +++++++++++++- .../components/AdminBar/stylesheet.scss | 48 ++++++++++++++++++- src/OnboardingSPA/store/selectors.js | 11 +++++ 3 files changed, 91 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/AdminBar/index.js b/src/OnboardingSPA/components/AdminBar/index.js index efa6c8b4c..ea87238c2 100644 --- a/src/OnboardingSPA/components/AdminBar/index.js +++ b/src/OnboardingSPA/components/AdminBar/index.js @@ -1,7 +1,40 @@ +import { __ } from '@wordpress/i18n'; +import { Icon, wordpress } from '@wordpress/icons'; +import { useSelect } from '@wordpress/data'; +import { store as nfdOnboardingStore } from '../../../OnboardingSPA/store'; + const AdminBar = () => { + const { currentUserInfo } = useSelect( ( select ) => { + return { + currentUserInfo: + select( nfdOnboardingStore ).getCurrentUserDetails(), + }; + }, [] ); + + if ( ! currentUserInfo ) { + return null; + } + return (
- Admin Bar Goes Here +
+ + {__('WordPress', 'wp-module-onboarding')} +
+
+ + + { __( 'Howdy!', 'wp-module-onboarding' ) },{ ' ' } + { currentUserInfo.displayName } + + +
+ { +
+
); }; diff --git a/src/OnboardingSPA/components/AdminBar/stylesheet.scss b/src/OnboardingSPA/components/AdminBar/stylesheet.scss index c87ab6c6c..4768b72e5 100644 --- a/src/OnboardingSPA/components/AdminBar/stylesheet.scss +++ b/src/OnboardingSPA/components/AdminBar/stylesheet.scss @@ -1,3 +1,5 @@ +$light-grey : #a0a5aa; + .nfd-onboarding-header { &__admin-bar { @@ -6,7 +8,49 @@ width: 100%; color: var(--nfd-onboarding-admin-bar-color); margin: 0; - padding-left: 10px; - padding-top: 7px; + padding: 5px; + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + + &__wplogo { + color: var(--nfd-onboarding-white); + font-size: 16px; + display: flex; + align-items: center; + + svg { + color: $light-grey; + fill: $light-grey; + } + + span { + margin-left: 15px; + } + } + + &__profile { + display: flex; + align-items: center; + + &__greeting { + color: $light-grey; + font-size: 16px; + margin-right: 5px; + } + + &__avatar { + height: 20px; + width: 20px; + display: inline-block; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } + } } } diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js index f74172be4..f0f64886b 100644 --- a/src/OnboardingSPA/store/selectors.js +++ b/src/OnboardingSPA/store/selectors.js @@ -403,3 +403,14 @@ export function getExperienceLevel( state ) { export function getTopPriority( state ) { return state.data.flowData.data.topPriority.priority1; } + +/** + * Gets Current User Details like Display name and avatar URL + * + * @param {*} state + * @return {string} currentUserInfo + */ +export function getCurrentUserDetails( state ) { + const currentUserInfo = state.runtime.currentUserDetails; + return currentUserInfo; +} From f749febf2140cf6ec3dba5722179cf1d407f430b Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 10 Nov 2023 15:32:58 +0530 Subject: [PATCH 2/9] PRESS2-1233 | added adminbar and theme toggle changes --- .../SiteBuild/index.js | 75 +++++++++++++------ .../NewfoldInterfaceSkeleton/SiteGen/index.js | 30 +++++--- .../NewfoldInterfaceSkeleton/index.js | 3 + .../NewfoldInterfaceSkeleton/style.scss | 4 + .../themeToggleHOC.js | 24 ++++++ .../components/ThemeContextProvider/index.js | 24 ++++++ .../components/ToggleDarkMode/contents.js | 9 +++ .../components/ToggleDarkMode/index.js | 26 +++++++ .../components/ToggleDarkMode/stylesheet.scss | 24 ++++++ src/OnboardingSPA/styles/_branding.scss | 10 +++ src/OnboardingSPA/styles/app.scss | 1 + 11 files changed, 199 insertions(+), 31 deletions(-) create mode 100644 src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js create mode 100644 src/OnboardingSPA/components/ThemeContextProvider/index.js create mode 100644 src/OnboardingSPA/components/ToggleDarkMode/contents.js create mode 100644 src/OnboardingSPA/components/ToggleDarkMode/index.js create mode 100644 src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js index 6384313b7..74632c9d7 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js @@ -2,6 +2,7 @@ import Header from '../../Header'; import Content from '../../Content'; import Drawer from '../../Drawer'; import Sidebar from '../../Sidebar'; +import ToggleDarkMode from '../../ToggleDarkMode'; import classNames from 'classnames'; import { useLocation } from 'react-router-dom'; import { setFlow } from '../../../utils/api/flow'; @@ -14,7 +15,7 @@ import { import { isEmpty, updateWPSettings } from '../../../utils/api/ecommerce'; import { store as nfdOnboardingStore } from '../../../store'; import { getQueryParam } from '../../../utils'; -import { useEffect, useState } from '@wordpress/element'; +import { useEffect, useState, useContext } from '@wordpress/element'; // eslint-disable-next-line import/no-extraneous-dependencies import { kebabCase } from 'lodash'; @@ -52,6 +53,28 @@ import { init as initializePlugins } from '../../../utils/api/plugins'; import { init as initializeThemes } from '../../../utils/api/themes'; import { trigger as cronTrigger } from '../../../utils/api/cronTrigger'; import { stepTheFork } from '../../../steps/TheFork/step'; +import { ThemeProvider } from '../../ThemeContextProvider'; +import themeToggleHOC from '../themeToggleHOC'; + +/* // Higher-Order Component for theme toggling +const withThemeToggler = (WrappedComponent, darkClass, lightClass) => { + // This HOC accepts a component and two class names for dark and light themes + return (props) => { + const { theme } = useContext(ThemeContext); + const isDarkMode = theme === 'dark'; // Determine if it's dark mode + // Construct the className with the appropriate theme class + const className = classNames( + props.className, // Preserves any class names already provided + { + [darkClass]: isDarkMode, + [lightClass]: !isDarkMode + } + ); + + // Pass the new className and any other props to the wrapped component + return ; + }; +}; */ const SiteBuild = () => { const location = useLocation(); @@ -419,28 +442,36 @@ const SiteBuild = () => { handlePreviousStepTracking(); handleConditionalDesignStepsRoutes(); }, [ location.pathname, onboardingFlow ] ); + + // Now wrap the NewfoldInterfaceSkeleton with the HOC + // Adjust the darkClass and lightClass as needed + const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( + NewfoldInterfaceSkeleton, + 'nfd-onboarding-sitegen-dark', + 'nfd-onboarding-sitegen-light' + ); + return ( - } - drawer={ } - content={ } - sidebar={ } - /> + + } + drawer={ } + content={ } + sidebar={ } + footer={ currentStep === stepTheFork ? : null } + /> + ); }; diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 87e29e351..ed9f50fdc 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -2,19 +2,31 @@ import NewfoldInterfaceSkeleton from '../index'; import Header from '../../Header'; import Content from '../../Content'; import Sidebar from '../../Sidebar'; +import ToggleDarkMode from '../../ToggleDarkMode'; +import { ThemeProvider } from '../../ThemeContextProvider'; import classNames from 'classnames'; +import themeToggleHOC from '../themeToggleHOC'; + +// Wrap NewfoldInterfaceSkeleton with the HOC +const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( + NewfoldInterfaceSkeleton, + 'nfd-onboarding-sitegen-dark', + 'nfd-onboarding-sitegen-light' + ); const SiteGen = () => { return ( - } - content={ } - sidebar={ } - /> + + } + content={ } + sidebar={ } + footer={ } + /> + ); }; diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js index 76eb1f59f..8b392c062 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js @@ -66,6 +66,9 @@ function NewfoldInterfaceSkeleton( footer: __( 'Footer', 'wp-module-onboarding' ), }; + console.log("footer", footer); + console.log("Drawer", drawer); + const mergedLabels = { ...defaultLabels, ...labels }; return ( diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss index 7d47de994..9819832f9 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss @@ -189,5 +189,9 @@ html.nfd-interface-interface-skeleton__html-container { &--sitegen { background-image: var(--sitegen-background); + + .nfd-interface-interface-skeleton__footer { + display: flex; + } } } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js new file mode 100644 index 000000000..302613939 --- /dev/null +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js @@ -0,0 +1,24 @@ +// withThemeToggler.js +import { useContext } from '@wordpress/element'; +import { ThemeContext } from '../ThemeContextProvider'; // Adjust the import path as needed +import classNames from 'classnames'; + +const themeToggleHOC = (WrappedComponent, darkClass, lightClass) => { + return (props) => { + const { theme } = useContext(ThemeContext); + const isDarkMode = theme === 'dark'; // Determine if it's dark mode + // Construct the className with the appropriate theme class + const className = classNames( + props.className, // Preserves any class names already provided + { + [darkClass]: isDarkMode, + [lightClass]: !isDarkMode + } + ); + + // Pass the new className and any other props to the wrapped component + return ; + }; +}; + +export default themeToggleHOC; diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js new file mode 100644 index 000000000..ca05480b8 --- /dev/null +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -0,0 +1,24 @@ +import { useState, createContext } from '@wordpress/element'; + +// Create the context directly in the same file +const ThemeContext = createContext(); + +const ThemeProvider = ( { children } ) => { + const [ theme, setTheme ] = useState( 'dark' ); // Default theme is light + + const toggleTheme = () => { + setTheme( ( prevTheme ) => + prevTheme === 'dark' + ? 'light' + : 'dark' + ); + }; + + return ( + + { children } + + ); +}; + +export { ThemeContext, ThemeProvider }; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/contents.js b/src/OnboardingSPA/components/ToggleDarkMode/contents.js new file mode 100644 index 000000000..7049e53c2 --- /dev/null +++ b/src/OnboardingSPA/components/ToggleDarkMode/contents.js @@ -0,0 +1,9 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + label: __( 'Dark Mode', 'wp-module-onboarding' ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/index.js b/src/OnboardingSPA/components/ToggleDarkMode/index.js new file mode 100644 index 000000000..8981a4d11 --- /dev/null +++ b/src/OnboardingSPA/components/ToggleDarkMode/index.js @@ -0,0 +1,26 @@ +import { ToggleControl } from '@wordpress/components'; +import { useContext } from '@wordpress/element'; +import { ThemeContext } from '../ThemeContextProvider'; +import getContents from './contents'; + +const ToggleDarkMode = () => { + const { theme, toggleTheme } = useContext( ThemeContext ); + const isChecked = theme === 'dark'; + const content = getContents(); + const onChange = () => { + console.log("theme", theme); + toggleTheme(); + }; + + return ( +
+ +
+ ); +}; + +export default ToggleDarkMode; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss new file mode 100644 index 000000000..a78c725e1 --- /dev/null +++ b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss @@ -0,0 +1,24 @@ +.nfd-onboarding-toggle__darkmode { + position: absolute; + bottom: 15px; + left: 50%; + transform: translateX(-50%); + z-index: 999; + color: #fff; + + .components-toggle-control { + + .components-form-toggle { + + &.is-checked { + + .components-form-toggle__track { + background-color: transparent; + outline: 2px solid #fff; + outline-offset: 0; + } + } + + } + } +} diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 3f3ff7a55..bd3c59080 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -304,4 +304,14 @@ body { --nfd-onboarding-progress-bar-background: #353a40; --nfd-onboarding-progress-bar-fill: #0060f0; } + + .nfd-onboarding-sitegen-light { + --nfd-onboarding-admin-bar-background: #1d2327; + --nfd-onboarding-admin-bar-color: #c3c4c7; + --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); + --nfd-onboarding-primary: #000; + --nfd-onboarding-secondary: #fff; + --nfd-onboarding-progress-bar-background: #353a40; + --nfd-onboarding-progress-bar-fill: #0060f0; + } } diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 992bea2af..0fe1ced6a 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -47,6 +47,7 @@ @import "../components/ProgressBar/stylesheet"; @import "../components/Button/ButtonDark/stylesheet"; @import "../components//SiteGenPlaceholder/stylesheet.scss"; +@import "../components/ToggleDarkMode/stylesheet"; // CSS for Pages @import "../steps/BasicInfo/stylesheet"; From 3df53fef9137fad430e8521ee3073e60e476528f Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 10 Nov 2023 16:44:12 +0530 Subject: [PATCH 3/9] PRESS2-1233 | fixed linting issues --- .../SiteBuild/index.js | 40 +++++-------------- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 14 +++---- .../NewfoldInterfaceSkeleton/index.js | 3 -- .../themeToggleHOC.js | 30 ++++++-------- .../components/ThemeContextProvider/index.js | 7 +--- .../components/ToggleDarkMode/index.js | 1 - 6 files changed, 31 insertions(+), 64 deletions(-) diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js index 74632c9d7..3407360a8 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js @@ -15,7 +15,7 @@ import { import { isEmpty, updateWPSettings } from '../../../utils/api/ecommerce'; import { store as nfdOnboardingStore } from '../../../store'; import { getQueryParam } from '../../../utils'; -import { useEffect, useState, useContext } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; // eslint-disable-next-line import/no-extraneous-dependencies import { kebabCase } from 'lodash'; @@ -56,26 +56,6 @@ import { stepTheFork } from '../../../steps/TheFork/step'; import { ThemeProvider } from '../../ThemeContextProvider'; import themeToggleHOC from '../themeToggleHOC'; -/* // Higher-Order Component for theme toggling -const withThemeToggler = (WrappedComponent, darkClass, lightClass) => { - // This HOC accepts a component and two class names for dark and light themes - return (props) => { - const { theme } = useContext(ThemeContext); - const isDarkMode = theme === 'dark'; // Determine if it's dark mode - // Construct the className with the appropriate theme class - const className = classNames( - props.className, // Preserves any class names already provided - { - [darkClass]: isDarkMode, - [lightClass]: !isDarkMode - } - ); - - // Pass the new className and any other props to the wrapped component - return ; - }; -}; */ - const SiteBuild = () => { const location = useLocation(); const isLargeViewport = useViewportMatch( 'medium' ); @@ -443,16 +423,15 @@ const SiteBuild = () => { handleConditionalDesignStepsRoutes(); }, [ location.pathname, onboardingFlow ] ); - // Now wrap the NewfoldInterfaceSkeleton with the HOC - // Adjust the darkClass and lightClass as needed + // wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( - NewfoldInterfaceSkeleton, - 'nfd-onboarding-sitegen-dark', + NewfoldInterfaceSkeleton, + 'nfd-onboarding-sitegen-dark', 'nfd-onboarding-sitegen-light' ); return ( - + { { 'is-large-viewport': isLargeViewport }, { 'is-small-viewport': ! isLargeViewport }, { - 'nfd-onboarding-skeleton--sitegen': currentStep === stepTheFork, - }, + 'nfd-onboarding-skeleton--sitegen': + currentStep === stepTheFork, + } ) } header={
} drawer={ } content={ } sidebar={ } - footer={ currentStep === stepTheFork ? : null } + footer={ + currentStep === stepTheFork ? : null + } /> ); diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index ed9f50fdc..9f647d680 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -7,26 +7,24 @@ import { ThemeProvider } from '../../ThemeContextProvider'; import classNames from 'classnames'; import themeToggleHOC from '../themeToggleHOC'; -// Wrap NewfoldInterfaceSkeleton with the HOC +// Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( NewfoldInterfaceSkeleton, 'nfd-onboarding-sitegen-dark', 'nfd-onboarding-sitegen-light' - ); +); const SiteGen = () => { return ( - - + } content={ } sidebar={ } footer={ } /> - + ); }; diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js index 8b392c062..76eb1f59f 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js @@ -66,9 +66,6 @@ function NewfoldInterfaceSkeleton( footer: __( 'Footer', 'wp-module-onboarding' ), }; - console.log("footer", footer); - console.log("Drawer", drawer); - const mergedLabels = { ...defaultLabels, ...labels }; return ( diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js index 302613939..496549ceb 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js @@ -1,24 +1,18 @@ -// withThemeToggler.js import { useContext } from '@wordpress/element'; -import { ThemeContext } from '../ThemeContextProvider'; // Adjust the import path as needed +import { ThemeContext } from '../ThemeContextProvider'; import classNames from 'classnames'; -const themeToggleHOC = (WrappedComponent, darkClass, lightClass) => { - return (props) => { - const { theme } = useContext(ThemeContext); - const isDarkMode = theme === 'dark'; // Determine if it's dark mode - // Construct the className with the appropriate theme class - const className = classNames( - props.className, // Preserves any class names already provided - { - [darkClass]: isDarkMode, - [lightClass]: !isDarkMode - } - ); - - // Pass the new className and any other props to the wrapped component - return ; - }; +const themeToggleHOC = ( WrappedComponent, darkClass, lightClass ) => { + return ( props ) => { + const { theme } = useContext( ThemeContext ); + const isDarkMode = theme === 'dark'; + const className = classNames( props.className, { + [ darkClass ]: isDarkMode, + [ lightClass ]: ! isDarkMode, + } ); + + return ; + }; }; export default themeToggleHOC; diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index ca05480b8..b2ebb0f9e 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -1,16 +1,13 @@ import { useState, createContext } from '@wordpress/element'; -// Create the context directly in the same file const ThemeContext = createContext(); const ThemeProvider = ( { children } ) => { - const [ theme, setTheme ] = useState( 'dark' ); // Default theme is light + const [ theme, setTheme ] = useState( 'dark' ); const toggleTheme = () => { setTheme( ( prevTheme ) => - prevTheme === 'dark' - ? 'light' - : 'dark' + prevTheme === 'dark' ? 'light' : 'dark' ); }; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/index.js b/src/OnboardingSPA/components/ToggleDarkMode/index.js index 8981a4d11..4920f8c19 100644 --- a/src/OnboardingSPA/components/ToggleDarkMode/index.js +++ b/src/OnboardingSPA/components/ToggleDarkMode/index.js @@ -8,7 +8,6 @@ const ToggleDarkMode = () => { const isChecked = theme === 'dark'; const content = getContents(); const onChange = () => { - console.log("theme", theme); toggleTheme(); }; From 3a4e5f46b800beb4c0c2182db3f33e8b1c71164b Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 10 Nov 2023 16:48:25 +0530 Subject: [PATCH 4/9] PRESS2-1233 | fixed linting issues --- src/OnboardingSPA/components/AdminBar/index.js | 4 ++-- .../components/NewfoldInterfaceSkeleton/SiteBuild/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/AdminBar/index.js b/src/OnboardingSPA/components/AdminBar/index.js index ea87238c2..f5aca1bd7 100644 --- a/src/OnboardingSPA/components/AdminBar/index.js +++ b/src/OnboardingSPA/components/AdminBar/index.js @@ -18,8 +18,8 @@ const AdminBar = () => { return (
- - {__('WordPress', 'wp-module-onboarding')} + + { __( 'WordPress', 'wp-module-onboarding' ) }
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js index 3407360a8..04f7129e6 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js @@ -423,7 +423,7 @@ const SiteBuild = () => { handleConditionalDesignStepsRoutes(); }, [ location.pathname, onboardingFlow ] ); - // wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available + // wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( NewfoldInterfaceSkeleton, 'nfd-onboarding-sitegen-dark', From 6b1dfe343b2371a2a6dfaed296a4b5b603e3f6c6 Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 17 Nov 2023 09:25:48 +0530 Subject: [PATCH 5/9] PRESS-1233 | fixes --- .../NewfoldInterfaceSkeleton/SiteBuild/index.js | 13 +++++++------ .../NewfoldInterfaceSkeleton/themeToggleHOC.js | 13 ++++++++++--- .../static/icons/toggleDarkModeIcon.svg | 11 +++++++++++ 3 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js index 04f7129e6..9681c3f9b 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js @@ -423,11 +423,15 @@ const SiteBuild = () => { handleConditionalDesignStepsRoutes(); }, [ location.pathname, onboardingFlow ] ); + const shouldApplyTheme = + currentStep === stepTheFork || + window.nfdOnboarding.currentFlow === 'sitegen'; // wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( NewfoldInterfaceSkeleton, 'nfd-onboarding-sitegen-dark', - 'nfd-onboarding-sitegen-light' + 'nfd-onboarding-sitegen-light', + shouldApplyTheme ); return ( @@ -441,17 +445,14 @@ const SiteBuild = () => { { 'is-large-viewport': isLargeViewport }, { 'is-small-viewport': ! isLargeViewport }, { - 'nfd-onboarding-skeleton--sitegen': - currentStep === stepTheFork, + 'nfd-onboarding-skeleton--sitegen': shouldApplyTheme, } ) } header={
} drawer={ } content={ } sidebar={ } - footer={ - currentStep === stepTheFork ? : null - } + footer={ shouldApplyTheme ? : null } /> ); diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js index 496549ceb..cd1166fa9 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js @@ -2,13 +2,20 @@ import { useContext } from '@wordpress/element'; import { ThemeContext } from '../ThemeContextProvider'; import classNames from 'classnames'; -const themeToggleHOC = ( WrappedComponent, darkClass, lightClass ) => { +const themeToggleHOC = ( + WrappedComponent, + darkClass, + lightClass, + shouldApplyTheme = true +) => { return ( props ) => { const { theme } = useContext( ThemeContext ); const isDarkMode = theme === 'dark'; + const shouldApply = + shouldApplyTheme !== undefined ? shouldApplyTheme : true; const className = classNames( props.className, { - [ darkClass ]: isDarkMode, - [ lightClass ]: ! isDarkMode, + [ darkClass ]: isDarkMode && shouldApply, + [ lightClass ]: ! isDarkMode && shouldApply, } ); return ; diff --git a/src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg b/src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg new file mode 100644 index 000000000..647bc05db --- /dev/null +++ b/src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 6d5c4d6e01bd3ae41f1fef78f487bc9cdfcbf6cc Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 17 Nov 2023 12:35:40 +0530 Subject: [PATCH 6/9] PRESS-1233 | added to constants --- .../components/AdminBar/index.js | 2 +- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 3 +-- .../themeToggleHOC.js | 3 ++- .../components/ThemeContextProvider/index.js | 3 ++- .../components/ToggleDarkMode/index.js | 22 ++++++++-------- .../components/ToggleDarkMode/stylesheet.scss | 25 ++++++------------- src/OnboardingSPA/styles/_icons.scss | 1 + src/constants.js | 2 ++ 8 files changed, 28 insertions(+), 33 deletions(-) diff --git a/src/OnboardingSPA/components/AdminBar/index.js b/src/OnboardingSPA/components/AdminBar/index.js index f5aca1bd7..2d10e2804 100644 --- a/src/OnboardingSPA/components/AdminBar/index.js +++ b/src/OnboardingSPA/components/AdminBar/index.js @@ -24,7 +24,7 @@ const AdminBar = () => {
- { __( 'Howdy!', 'wp-module-onboarding' ) },{ ' ' } + { __( 'Howdy! ', 'wp-module-onboarding' ) } { currentUserInfo.displayName } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 9f647d680..ac1433532 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -4,7 +4,6 @@ import Content from '../../Content'; import Sidebar from '../../Sidebar'; import ToggleDarkMode from '../../ToggleDarkMode'; import { ThemeProvider } from '../../ThemeContextProvider'; -import classNames from 'classnames'; import themeToggleHOC from '../themeToggleHOC'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available @@ -18,7 +17,7 @@ const SiteGen = () => { return ( } content={ } sidebar={ } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js index cd1166fa9..1289c09b4 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js @@ -1,6 +1,7 @@ import { useContext } from '@wordpress/element'; import { ThemeContext } from '../ThemeContextProvider'; import classNames from 'classnames'; +import { THEME_DARK } from '../../../constants'; const themeToggleHOC = ( WrappedComponent, @@ -10,7 +11,7 @@ const themeToggleHOC = ( ) => { return ( props ) => { const { theme } = useContext( ThemeContext ); - const isDarkMode = theme === 'dark'; + const isDarkMode = theme === THEME_DARK; const shouldApply = shouldApplyTheme !== undefined ? shouldApplyTheme : true; const className = classNames( props.className, { diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js index b2ebb0f9e..bf563887d 100644 --- a/src/OnboardingSPA/components/ThemeContextProvider/index.js +++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js @@ -1,4 +1,5 @@ import { useState, createContext } from '@wordpress/element'; +import { THEME_DARK, THEME_LIGHT } from '../../../constants'; const ThemeContext = createContext(); @@ -7,7 +8,7 @@ const ThemeProvider = ( { children } ) => { const toggleTheme = () => { setTheme( ( prevTheme ) => - prevTheme === 'dark' ? 'light' : 'dark' + prevTheme === THEME_DARK ? THEME_LIGHT : THEME_DARK ); }; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/index.js b/src/OnboardingSPA/components/ToggleDarkMode/index.js index 4920f8c19..96040a5f1 100644 --- a/src/OnboardingSPA/components/ToggleDarkMode/index.js +++ b/src/OnboardingSPA/components/ToggleDarkMode/index.js @@ -1,23 +1,25 @@ -import { ToggleControl } from '@wordpress/components'; import { useContext } from '@wordpress/element'; import { ThemeContext } from '../ThemeContextProvider'; -import getContents from './contents'; const ToggleDarkMode = () => { - const { theme, toggleTheme } = useContext( ThemeContext ); - const isChecked = theme === 'dark'; - const content = getContents(); + const { toggleTheme } = useContext( ThemeContext ); const onChange = () => { toggleTheme(); }; return (
- +
onChange() } + role="button" + onKeyDown={ ( event ) => { + if ( event.key === 'Enter' ) { + onChange(); + } + } } + tabIndex="0" + >
); }; diff --git a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss index a78c725e1..1730aad18 100644 --- a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss +++ b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss @@ -1,24 +1,13 @@ .nfd-onboarding-toggle__darkmode { position: absolute; - bottom: 15px; - left: 50%; - transform: translateX(-50%); + bottom: 25px; + left: 25px; z-index: 999; - color: #fff; - .components-toggle-control { - - .components-form-toggle { - - &.is-checked { - - .components-form-toggle__track { - background-color: transparent; - outline: 2px solid #fff; - outline-offset: 0; - } - } - - } + &__button { + background-image: var(--sitegen-toggle-theme-icon); + width: 60px; + height: 60px; + cursor: pointer; } } diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 8e66fd4b8..256431a43 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -38,4 +38,5 @@ body { --site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg); --sitegen-background: url(../static/images/sitegen-bg.png); + --sitegen-toggle-theme-icon: url(../static/icons/toggleDarkModeIcon.svg); } diff --git a/src/constants.js b/src/constants.js index 238d3911b..de747c40e 100644 --- a/src/constants.js +++ b/src/constants.js @@ -65,6 +65,8 @@ export const CHAPTER_DESIGN = 'design'; export const CHAPTER_LAYOUT_AND_CONTENT = 'layout_and_content'; export const CHAPTER_FEATURES = 'features'; export const CHAPTER_SITEGEN = 'sitegen'; +export const THEME_DARK = 'dark'; +export const THEME_LIGHT = 'light'; /** * All views for the component. From 7244d45b22864f16e8a23cc7f162fc81df80b597 Mon Sep 17 00:00:00 2001 From: Ajay Yadav Date: Fri, 17 Nov 2023 19:27:42 +0530 Subject: [PATCH 7/9] PRESS-1233 | light mode --- .../components/ToggleDarkMode/index.js | 17 +++++++++++--- .../components/ToggleDarkMode/stylesheet.scss | 11 ++++++++-- ...eDarkModeIcon.svg => toggle-dark-mode.svg} | 0 .../static/icons/toggle-light-mode.svg | 22 +++++++++++++++++++ src/OnboardingSPA/styles/_icons.scss | 3 ++- 5 files changed, 47 insertions(+), 6 deletions(-) rename src/OnboardingSPA/static/icons/{toggleDarkModeIcon.svg => toggle-dark-mode.svg} (100%) create mode 100644 src/OnboardingSPA/static/icons/toggle-light-mode.svg diff --git a/src/OnboardingSPA/components/ToggleDarkMode/index.js b/src/OnboardingSPA/components/ToggleDarkMode/index.js index 96040a5f1..c24b16b92 100644 --- a/src/OnboardingSPA/components/ToggleDarkMode/index.js +++ b/src/OnboardingSPA/components/ToggleDarkMode/index.js @@ -1,16 +1,27 @@ import { useContext } from '@wordpress/element'; import { ThemeContext } from '../ThemeContextProvider'; +import classNames from 'classnames'; +import { THEME_DARK } from '../../../constants'; const ToggleDarkMode = () => { - const { toggleTheme } = useContext( ThemeContext ); + const { theme, toggleTheme } = useContext( ThemeContext ); + const isDarkMode = theme === THEME_DARK; const onChange = () => { toggleTheme(); }; return ( -
+
onChange() } role="button" onKeyDown={ ( event ) => { diff --git a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss index 1730aad18..297b2cd2b 100644 --- a/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss +++ b/src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss @@ -1,13 +1,20 @@ -.nfd-onboarding-toggle__darkmode { +.nfd-onboarding-toggle__theme { position: absolute; bottom: 25px; left: 25px; z-index: 999; &__button { - background-image: var(--sitegen-toggle-theme-icon); width: 60px; height: 60px; cursor: pointer; + + &__light { + background: var(--sitegen-toggle-theme-icon-light); + } + + &__dark { + background: var(--sitegen-toggle-theme-icon-dark); + } } } diff --git a/src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg b/src/OnboardingSPA/static/icons/toggle-dark-mode.svg similarity index 100% rename from src/OnboardingSPA/static/icons/toggleDarkModeIcon.svg rename to src/OnboardingSPA/static/icons/toggle-dark-mode.svg diff --git a/src/OnboardingSPA/static/icons/toggle-light-mode.svg b/src/OnboardingSPA/static/icons/toggle-light-mode.svg new file mode 100644 index 000000000..84a25c8bd --- /dev/null +++ b/src/OnboardingSPA/static/icons/toggle-light-mode.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 256431a43..b98e9f315 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -38,5 +38,6 @@ body { --site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg); --sitegen-background: url(../static/images/sitegen-bg.png); - --sitegen-toggle-theme-icon: url(../static/icons/toggleDarkModeIcon.svg); + --sitegen-toggle-theme-icon-dark: url(../static/icons/toggle-dark-mode.svg); + --sitegen-toggle-theme-icon-light: url(../static/icons/toggle-light-mode.svg); } From 190a943817011dd2ba2dbe3c3c8791bbc46b628e Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Sat, 18 Nov 2023 13:04:44 +0530 Subject: [PATCH 8/9] Fix Light Mode Image --- .../images/toggle-light-mode.8d7afd07.png | Bin 0 -> 7532 bytes .../components/ToggleDarkMode/stylesheet.scss | 3 ++- .../static/icons/toggle-light-mode.png | Bin 0 -> 7532 bytes .../static/icons/toggle-light-mode.svg | 22 ------------------ src/OnboardingSPA/styles/_icons.scss | 2 +- 5 files changed, 3 insertions(+), 24 deletions(-) create mode 100644 build/1.11.8/images/toggle-light-mode.8d7afd07.png create mode 100644 src/OnboardingSPA/static/icons/toggle-light-mode.png delete mode 100644 src/OnboardingSPA/static/icons/toggle-light-mode.svg diff --git a/build/1.11.8/images/toggle-light-mode.8d7afd07.png b/build/1.11.8/images/toggle-light-mode.8d7afd07.png new file mode 100644 index 0000000000000000000000000000000000000000..1ea6d7b09145487c01f7ae8bae9b18300efd3386 GIT binary patch literal 7532 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 - - - - - - - - - - - - - - - - - - - - - diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index b98e9f315..b56268ec1 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -39,5 +39,5 @@ body { --sitegen-background: url(../static/images/sitegen-bg.png); --sitegen-toggle-theme-icon-dark: url(../static/icons/toggle-dark-mode.svg); - --sitegen-toggle-theme-icon-light: url(../static/icons/toggle-light-mode.svg); + --sitegen-toggle-theme-icon-light: url(../static/icons/toggle-light-mode.png); } From 19660e9b47e67b56412e501794b68c0c3714df22 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Sat, 18 Nov 2023 13:16:53 +0530 Subject: [PATCH 9/9] Add a fix cause why not? --- .../components/Header/components/SiteGenHeader/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js index 2f0027111..db3390a10 100644 --- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js +++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js @@ -34,7 +34,7 @@ const SiteGenHeader = () => { ); const currentStepIndex = findIndex( allSteps, { - path: currentStep.path, + path: currentStep?.path, } ); const progress = ( currentStepIndex / allSteps.length ) * 100;