Press2 1233 merge components aionboarding

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 (
 		<div className="nfd-onboarding-header__admin-bar">
-			Admin Bar Goes Here
+			<div className="nfd-onboarding-header__admin-bar__wplogo">
+				<Icon icon={ wordpress } />
+				<span>{ __( 'WordPress', 'wp-module-onboarding' ) }</span>
+			</div>
+			<div className="nfd-onboarding-header__admin-bar__profile">
+				<span className="nfd-onboarding-header__admin-bar__profile__greeting">
+					<span>
+						{ __( 'Howdy! ', 'wp-module-onboarding' ) }
+						{ currentUserInfo.displayName }
+					</span>
+				</span>
+				<div className="nfd-onboarding-header__admin-bar__profile__avatar">
+					<img
+						src={ currentUserInfo.avatarUrl }
+						alt={ currentUserInfo.displayName }
+					/>
+				</div>
+			</div>
 		</div>
 	);
 };

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;
+				}
+			}
+		}
 	}
 }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js

@@ -2,6 +2,7 @@
 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';
@@ -52,6 +53,8 @@
 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';
 
 const SiteBuild = () => {
 	const location = useLocation();
@@ -98,7 +101,7 @@
 					select( nfdOnboardingStore ).getPluginInstallHash(),
 			};
 		},
 		[ location.pathname ]
 	);
 
 	const [ isRequestPlaced, setIsRequestPlaced ] = useState( false );
@@ -361,7 +364,7 @@
 
 	useEffect( () => {
 		trackChapters();
 	}, [ currentStep ] );
 
 	const prioritizeFlow = () => {
 		const currentFlow = window.nfdOnboarding.currentFlow;
@@ -402,13 +405,13 @@
 			initializeSettings();
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		if ( false !== brandConfig?.prioritization ) {
 			return prioritizeFlow();
 		}
 	}, [ experienceLevel, topPriority ] );
 
 	useEffect( () => {
 		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
@@ -418,29 +421,40 @@
 		syncStoreToDB();
 		handlePreviousStepTracking();
 		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',
+		shouldApplyTheme
+	);
+
 	return (
-		<NewfoldInterfaceSkeleton
-			className={ classNames(
-				'nfd-onboarding-skeleton',
-				`brand-${ newfoldBrand }`,
-				`path-${ pathname }`,
-				{ 'is-drawer-open': isDrawerOpen },
-				{ 'is-large-viewport': isLargeViewport },
-				{ 'is-small-viewport': ! isLargeViewport },
-				{
-					'nfd-onboarding-skeleton--sitegen':
-						currentStep === stepTheFork,
-				},
-				{
-					'nfd-onboarding-sitegen-dark': currentStep === stepTheFork,
-				}
-			) }
-			header={ <Header /> }
-			drawer={ <Drawer /> }
-			content={ <Content /> }
-			sidebar={ <Sidebar /> }
-		/>
+		<ThemeProvider>
+			<ThemedNewfoldInterfaceSkeleton
+				className={ classNames(
+					'nfd-onboarding-skeleton',
+					`brand-${ newfoldBrand }`,
+					`path-${ pathname }`,
+					{ 'is-drawer-open': isDrawerOpen },
+					{ 'is-large-viewport': isLargeViewport },
+					{ 'is-small-viewport': ! isLargeViewport },
+					{
+						'nfd-onboarding-skeleton--sitegen': shouldApplyTheme,
+					}
+				) }
+				header={ <Header /> }
+				drawer={ <Drawer /> }
+				content={ <Content /> }
+				sidebar={ <Sidebar /> }
+				footer={ shouldApplyTheme ? <ToggleDarkMode /> : null }
+			/>
+		</ThemeProvider>
 	);
 };
 

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js

@@ -2,19 +2,28 @@ import NewfoldInterfaceSkeleton from '../index';
 import Header from '../../Header';
 import Content from '../../Content';
 import Sidebar from '../../Sidebar';
-import classNames from 'classnames';
+import ToggleDarkMode from '../../ToggleDarkMode';
+import { ThemeProvider } from '../../ThemeContextProvider';
+import themeToggleHOC from '../themeToggleHOC';
+
+// 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 (
-		<NewfoldInterfaceSkeleton
-			className={ classNames(
-				'nfd-onboarding-skeleton--sitegen',
-				'nfd-onboarding-sitegen-dark'
-			) }
-			header={ <Header /> }
-			content={ <Content /> }
-			sidebar={ <Sidebar /> }
-		/>
+		<ThemeProvider>
+			<ThemedNewfoldInterfaceSkeleton
+				className={ 'nfd-onboarding-skeleton--sitegen' }
+				header={ <Header /> }
+				content={ <Content /> }
+				sidebar={ <Sidebar /> }
+				footer={ <ToggleDarkMode /> }
+			/>
+		</ThemeProvider>
 	);
 };
 

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;
+		}
 	}
 }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/themeToggleHOC.js

@@ -0,0 +1,26 @@
+import { useContext } from '@wordpress/element';
+import { ThemeContext } from '../ThemeContextProvider';
+import classNames from 'classnames';
+import { THEME_DARK } from '../../../constants';
+
+const themeToggleHOC = (
+	WrappedComponent,
+	darkClass,
+	lightClass,
+	shouldApplyTheme = true
+) => {
+	return ( props ) => {
+		const { theme } = useContext( ThemeContext );
+		const isDarkMode = theme === THEME_DARK;
+		const shouldApply =
+			shouldApplyTheme !== undefined ? shouldApplyTheme : true;
+		const className = classNames( props.className, {
+			[ darkClass ]: isDarkMode && shouldApply,
+			[ lightClass ]: ! isDarkMode && shouldApply,
+		} );
+
+		return <WrappedComponent { ...props } className={ className } />;
+	};
+};
+
+export default themeToggleHOC;

src/OnboardingSPA/components/ThemeContextProvider/index.js

@@ -0,0 +1,22 @@
+import { useState, createContext } from '@wordpress/element';
+import { THEME_DARK, THEME_LIGHT } from '../../../constants';
+
+const ThemeContext = createContext();
+
+const ThemeProvider = ( { children } ) => {
+	const [ theme, setTheme ] = useState( 'dark' );
+
+	const toggleTheme = () => {
+		setTheme( ( prevTheme ) =>
+			prevTheme === THEME_DARK ? THEME_LIGHT : THEME_DARK
+		);
+	};
+
+	return (
+		<ThemeContext.Provider value={ { theme, toggleTheme } }>
+			{ children }
+		</ThemeContext.Provider>
+	);
+};
+
+export { ThemeContext, ThemeProvider };

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;

src/OnboardingSPA/components/ToggleDarkMode/index.js

@@ -0,0 +1,38 @@
+import { useContext } from '@wordpress/element';
+import { ThemeContext } from '../ThemeContextProvider';
+import classNames from 'classnames';
+import { THEME_DARK } from '../../../constants';
+
+const ToggleDarkMode = () => {
+	const { theme, toggleTheme } = useContext( ThemeContext );
+	const isDarkMode = theme === THEME_DARK;
+	const onChange = () => {
+		toggleTheme();
+	};
+
+	return (
+		<div className="nfd-onboarding-toggle__theme">
+			<div
+				className={ classNames(
+					'nfd-onboarding-toggle__theme__button',
+					{
+						'nfd-onboarding-toggle__theme__button__light':
+							! isDarkMode,
+						'nfd-onboarding-toggle__theme__button__dark':
+							isDarkMode,
+					}
+				) }
+				onClick={ () => onChange() }
+				role="button"
+				onKeyDown={ ( event ) => {
+					if ( event.key === 'Enter' ) {
+						onChange();
+					}
+				} }
+				tabIndex="0"
+			></div>
+		</div>
+	);
+};
+
+export default ToggleDarkMode;

src/OnboardingSPA/components/ToggleDarkMode/stylesheet.scss

@@ -0,0 +1,21 @@
+.nfd-onboarding-toggle__theme {
+	position: absolute;
+	bottom: 25px;
+	left: 25px;
+	z-index: 1;
+
+	&__button {
+		width: 60px;
+		height: 60px;
+		cursor: pointer;
+
+		&__light {
+			animation: fadeIn 600ms ease-in-out;
+			background: var(--sitegen-toggle-theme-icon-light);
+		}
+
+		&__dark {
+			background: var(--sitegen-toggle-theme-icon-dark);
+		}
+	}
+}

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;
+}

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;
+	}
 }

src/OnboardingSPA/styles/_icons.scss

@@ -38,4 +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-dark: url(../static/icons/toggle-dark-mode.svg);
+	--sitegen-toggle-theme-icon-light: url(../static/icons/toggle-light-mode.png);
 }