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,39 @@
 		syncStoreToDB();
 		handlePreviousStepTracking();
 		handleConditionalDesignStepsRoutes();
 	}, [ location.pathname, onboardingFlow ] );
+
+	// wrapping the NewfoldInterfaceSkeleton with the HOC to make 'theme' available
+	const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
+		NewfoldInterfaceSkeleton,
+		'nfd-onboarding-sitegen-dark',
+		'nfd-onboarding-sitegen-light'
+	);
+
 	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,
+		<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':
+							currentStep === stepTheFork,
+					}
+				) }
+				header={ <Header /> }
+				drawer={ <Drawer /> }
+				content={ <Content /> }
+				sidebar={ <Sidebar /> }
+				footer={
+					currentStep === stepTheFork ? <ToggleDarkMode /> : null
 				}
-			) }
-			header={ <Header /> }
-			drawer={ <Drawer /> }
-			content={ <Content /> }
-			sidebar={ <Sidebar /> }
-		/>
+			/>
+		</ThemeProvider>
 	);
 };
 

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

@@ -2,19 +2,29 @@ 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';
+
+// 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={ classNames( '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,18 @@
+import { useContext } from '@wordpress/element';
+import { ThemeContext } from '../ThemeContextProvider';
+import classNames from 'classnames';
+
+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 <WrappedComponent { ...props } className={ className } />;
+	};
+};
+
+export default themeToggleHOC;

src/OnboardingSPA/components/ThemeContextProvider/index.js

@@ -0,0 +1,21 @@
+import { useState, createContext } from '@wordpress/element';
+
+const ThemeContext = createContext();
+
+const ThemeProvider = ( { children } ) => {
+	const [ theme, setTheme ] = useState( 'dark' );
+
+	const toggleTheme = () => {
+		setTheme( ( prevTheme ) =>
+			prevTheme === 'dark' ? 'light' : '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,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 onChange = () => {
+		toggleTheme();
+	};
+
+	return (
+		<div className="nfd-onboarding-toggle__darkmode">
+			<ToggleControl
+				label={ content.label }
+				checked={ isChecked }
+				onChange={ onChange }
+			/>
+		</div>
+	);
+};
+
+export default ToggleDarkMode;

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

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/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";