Press2 1233 new modern layout component

src/OnboardingSPA/chapters/demographic.js

@@ -6,6 +6,7 @@ import { stepExperience } from '../steps/GetStarted/GetStartedExperience/step';
 import { stepPrimarySetup } from '../steps/GetStarted/SiteTypeSetup/PrimarySite/step';
 import { stepSecondarySetup } from '../steps/GetStarted/SiteTypeSetup/SecondarySite/step';
 import { stepTopPriority } from '../steps/TopPriority/step';
+import { stepSiteGenGetStarted } from '../steps/SiteGenGetStarted/step';
 import { Chapter } from '../data/models/Chapter';
 import { Step } from '../data/models/Step';
 import ChapterInterstitialLoader from '../components/Loaders/Chapter/Interstitial';
@@ -22,6 +23,7 @@ const steps = [
 	stepSecondarySetup,
 	stepBasicInfo,
 	stepTopPriority,
+	stepSiteGenGetStarted,
 ];
 
 export const demographic = new Chapter( {

src/OnboardingSPA/components/AdminBarSiteGen/index.js

@@ -0,0 +1,21 @@
+import { __ } from '@wordpress/i18n';
+import { Icon, wordpress } from '@wordpress/icons';
+
+const AdminBarSiteGen = () => {
+	return (
+		<div className="nfd-sitegen-admin-bar">
+			<div className="nfd-admin-bar-wplogo">
+				<Icon icon={ wordpress } />
+				<span>{ __( 'WordPress', 'wp-module-onboarding' ) }</span>
+			</div>
+			<div className="nfd-sitegen-admin-bar-profile">
+				<span className="nfd-admin-bar-greeting">
+					Howdy, Maya Jiménez
+				</span>
+				<div className="nfd-admin-bar-avatar"></div>
+			</div>
+		</div>
+	);
+};
+
+export default AdminBarSiteGen;

src/OnboardingSPA/components/AdminBarSiteGen/stylesheet.scss

@@ -0,0 +1,47 @@
+$light-grey : #a0a5aa;
+
+.nfd-interface-interface-skeleton__adminbar {
+
+	.nfd-sitegen-admin-bar {
+		padding: 5px;
+		background-color: #23282d; // Dark grayish background
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.nfd-admin-bar-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;
+			}
+		}
+
+		.nfd-sitegen-admin-bar-profile {
+			display: flex;
+			align-items: center;
+
+			.nfd-admin-bar-greeting {
+				color: $light-grey;
+				font-size: 16px;
+				margin-right: 5px;
+			}
+
+			.nfd-admin-bar-avatar {
+				height: 20px;
+				width: 20px;
+				display: inline-block;
+				background-image: var(--adminbar-avatar-img);
+				background-size: contain;
+			}
+		}
+	}
+}

src/OnboardingSPA/components/AppSiteGen/index.js

@@ -0,0 +1,48 @@
+import Content from '../Content';
+import HeaderSiteGen from '../HeaderSiteGen';
+import ToggleDarkMode from '../ToggleDarkMode';
+import AdminBarSiteGen from '../AdminBarSiteGen';
+import ProgressBarSiteGen from '../ProgressBarSiteGen';
+import classNames from 'classnames';
+import { useLocation } from 'react-router-dom';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { kebabCase } from 'lodash';
+import { useViewportMatch } from '@wordpress/compose';
+import { SlotFillProvider } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
+import { FullscreenMode } from '@wordpress/interface';
+import SiteGenInterfaceSkeleton from '../SiteGenInterfaceSkeleton';
+
+const AppSiteGen = () => {
+	const location = useLocation();
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const pathname = kebabCase( location.pathname );
+
+	return (
+		<Fragment>
+			<FullscreenMode isActive={ true } />
+			<SlotFillProvider>
+				<SiteGenInterfaceSkeleton
+					className={ classNames(
+						'nfd-onboarding-skeleton',
+						'nfd-sitegen-skeleton',
+						`brand-sitegen`,
+						`path-${ pathname }`,
+						{ 'is-large-viewport': isLargeViewport },
+						{ 'is-small-viewport': ! isLargeViewport }
+					) }
+					adminbar={ <AdminBarSiteGen /> }
+					progressbar={
+						<ProgressBarSiteGen current={ 20 } total={ 100 } />
+					}
+					header={ <HeaderSiteGen /> }
+					content={ <Content /> }
+					darkModeToggle={ <ToggleDarkMode /> }
+				/>
+			</SlotFillProvider>
+		</Fragment>
+	);
+};
+
+export default AppSiteGen;

src/OnboardingSPA/components/HeaderSiteGen/index.js

@@ -0,0 +1,22 @@
+import { memo } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { Icon, chevronLeft } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+const HeaderSiteGen = () => {
+	return (
+		<div className="nfd-sitegen-header">
+			<div className="nfd-sitegen-header__step-navigation">
+				<Button
+					className="navigation-buttons navigation-buttons_back"
+					variant="secondary"
+				>
+					<Icon icon={ chevronLeft } />
+					{ __( 'Back', 'wp-module-onboarding' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default memo( HeaderSiteGen );

src/OnboardingSPA/components/HeaderSiteGen/stylesheet.scss

@@ -0,0 +1,81 @@
+.nfd-sitegen-header {
+	align-items: center;
+	background-color: var(--nfd-onboarding-header-base);
+	color: var(--nfd-onboarding-header-contrast);
+
+	h2,
+	h3,
+	h4 {
+		color: var(--nfd-onboarding-header-contrast);
+	}
+	display: flex;
+	height: 60px;
+	box-sizing: border-box;
+	width: 100%;
+	justify-content: space-between;
+
+	padding-right: $grid-unit-20;
+
+	body.is-fullscreen-mode & {
+		padding-left: 25px;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+
+		@include reduce-motion("transition");
+	}
+
+	&__start,
+	&__end {
+		display: flex;
+	}
+
+	&__start {
+		align-items: center;
+		margin-left: $grid-unit-20;
+	}
+
+	&__center {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		flex-grow: 1;
+		justify-content: center;
+		min-width: 5px;
+		font-weight: 600;
+		font-size: 20px;
+		line-height: $grid-unit-30;
+
+		svg {
+			margin-right: $grid-unit-10;
+		}
+	}
+
+	&__end {
+		justify-content: flex-end;
+	}
+
+	&__step-navigation {
+		display: flex;
+		column-gap: $grid-unit-10;
+	}
+}
+
+.navigation-buttons {
+	font-size: 14px;
+	line-height: 40px;
+	align-items: center;
+	letter-spacing: 0.8px;
+	display: flex !important;
+	justify-content: space-evenly;
+	border-radius: 2px !important;
+	padding: 20px 14px !important;
+
+	&_back {
+		padding-right: 22px !important;
+	}
+
+	@media screen and (max-width: #{ ($break-medium) }) {
+		font-size: 13px;
+		padding: 15px 10px !important;
+	}
+}

src/OnboardingSPA/components/ProgressBarSiteGen/index.js

@@ -0,0 +1,15 @@
+const ProgressBarSiteGen = ( { current, total } ) => {
+	const percentage = ( current / total ) * 100;
+	return (
+		<div className="nfd-progress-bar-site-gen">
+			<div className="nfd-progress-bar-container">
+				<div
+					className="nfd-progress-bar-fill"
+					style={ { width: `${ percentage }%` } }
+				></div>
+			</div>
+		</div>
+	);
+};
+
+export default ProgressBarSiteGen;

src/OnboardingSPA/components/ProgressBarSiteGen/stylesheet.scss

@@ -0,0 +1,19 @@
+$sitegen-progress-blue: #3620f8;
+$sitegen-progress-grey: #32373e;
+
+.nfd-progress-bar-site-gen {
+	width: 100%;
+
+	.nfd-progress-bar-container {
+		background-color: $sitegen-progress-grey;
+		height: 15px;
+		width: 100%;
+		border-radius: 0;
+		overflow: hidden;
+	}
+
+	.nfd-progress-bar-fill {
+		background-color: $sitegen-progress-blue;
+		height: 100%;
+	}
+}