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 '../../SiteGenSPA/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/Animate/index.js

@@ -1,12 +1,15 @@
 import classNames from 'classnames';
 
 /**
- * A Animator to show animation
- *
- * @param {string}             type  The name of Animation to be shown.
- * @param { object | boolean } after The variable to look after for before showing the animation, by default true to show the children right away.
- *
+ * @param {Object}           props                The properties passed to the Animate function.
+ * @param {string}           props.type           The name of Animation to be shown.
+ * @param {object | boolean} props.after          The variable to look after for before showing the animation, by default true to show the children right away.
+ * @param {Object}           props.children       The children of the component.
+ * @param {string}           props.className      The optional class name for the animation.
+ * @param {boolean}          props.duration       The duration for the animation.
+ * @param {boolean}          props.timingFunction The timing function for the animation.
  */
+
 const Animate = ( {
 	type,
 	after = true,

src/OnboardingSPA/components/Animate/stylesheet.scss

@@ -141,7 +141,7 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
+				translate: none !important;
 			}
 		}
 
@@ -150,7 +150,7 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
+				translate: none !important;
 			}
 		}
 
@@ -159,7 +159,7 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
+				translate: none !important;
 			}
 		}
 	}

src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js

@@ -4,10 +4,12 @@ import Animate from '../../Animate';
  * Checkbox List Skeleton Component
  * This returns a List of Checkbox Items Skeletons to imitate loading
  *
- * @param  customItemsList.count
- * @param  customItemsList.count.count
- * @return CheckboxList
+ * @param {Object} customItemsList             - Object containing the count properties.
+ * @param {number} customItemsList.count       - Some description for this count.
+ * @param {number} customItemsList.count.count - Some description for this nested count.
+ * @return {Object} CheckboxList - A React component.
  */
+
 const CheckboxListSkeleton = ( { count } ) => {
 	const buildCheckboxSkeletonItems = () => {
 		const customItems = [];

src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss

@@ -27,6 +27,17 @@ $main-color-grey-other: #e2e2e2;
 			}
 		}
 
+		&-full {
+			width: 100%;
+			min-height: 90vh;
+			overflow: hidden;
+			position: relative;
+			align-items: center;
+			border: 1px solid #e3dfdf;
+			border-top: 0;
+			margin-bottom: 30px;
+		}
+
 		&--is-skeleton {
 			z-index: 1;
 			width: 100%;

src/OnboardingSPA/data/flows/default.js

@@ -12,6 +12,7 @@ import { PseudoStep } from '../models/PseudoStep';
 import { indexPage } from '../../pages/IndexPage/page';
 import { brush } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { stepDesignStudioPreview } from '../../../SiteGenSPA/steps/DesignStudio/step';
 import { stepTheFork } from '../../steps/TheFork/step';
 
 export const pages = [ indexPage, errorPage ];
@@ -22,6 +23,7 @@ export const getSteps = ( chapters = initialChapters ) => {
 	let steps = [];
 	steps.push( stepTheFork );
 	steps.push( stepWelcome );
+	steps.push( stepDesignStudioPreview );
 	chapters.forEach( ( chapter ) => {
 		steps = steps.concat( [
 			...chapter.steps,
@@ -36,6 +38,7 @@ export const getRoutes = ( chapters = initialChapters ) => {
 	let routes = [ ...pages ];
 	routes.push( stepTheFork );
 	routes.push( stepWelcome );
+	routes.push( stepDesignStudioPreview );
 	chapters.forEach( ( chapter ) => {
 		routes = routes.concat( [
 			...chapter.steps,

src/OnboardingSPA/index.js

@@ -3,7 +3,8 @@ import { store as nfdOnboardingStore } from './store'; /* must import prior to A
 import { getFlow } from './utils/api/flow';
 import { DESIGN_STEPS_THEME } from '../constants';
 
-import App from './components/App';
+//import App from './components/App';
+import App from '../SiteGenSPA/components/App';
 import { HashRouter } from 'react-router-dom';
 import { dispatch } from '@wordpress/data';
 import { render } from '@wordpress/element';

src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js

@@ -99,7 +99,7 @@
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_NAV_ECOMMERCE_STORE_INFO );
 		setWPSettings();
 	}, [] );
 
 	const { currentData, newfoldBrand } = useSelect( ( select ) => {
 		return {
@@ -159,7 +159,7 @@
 				} );
 			}
 		}
 	}, [ settings, currentData.storeDetails, newfoldBrand ] );
 
 	const { address } = currentData.storeDetails;
 	const fieldProps = {
@@ -301,43 +301,43 @@
 										/>
 									</div>
 									{ states.length === 0 ||
-										address === undefined ? null : (
-											<div data-name="state">
-												<label
-													aria-required
-													htmlFor="state"
-												>
-													{ content.stateInputLabel }
-												</label>
-												<select
-													id="state"
-													type="text"
-													name="state"
-													required
-													defaultValue={
-														selectedCountry ===
-														defaultCountry
-															? defaultState
-															: ''
-													}
-													{ ...fieldProps }
-												>
+									address === undefined ? null : (
+										<div data-name="state">
+											<label
+												aria-required
+												htmlFor="state"
+											>
+												{ content.stateInputLabel }
+											</label>
+											<select
+												id="state"
+												type="text"
+												name="state"
+												required
+												defaultValue={
+													selectedCountry ===
+													defaultCountry
+														? defaultState
+														: ''
+												}
+												{ ...fieldProps }
+											>
+												<option
+													key={ '' }
+													value={ '' }
+													selected
+												/>
+												{ states.map( ( state ) => (
 													<option
-														key={ '' }
-														value={ '' }
-														selected
-													/>
-													{ states.map( ( state ) => (
-														<option
-															key={ state.code }
-															value={ state.code }
-														>
-															{ state.name }
-														</option>
-													) ) }
-												</select>
-											</div>
-										) }
+														key={ state.code }
+														value={ state.code }
+													>
+														{ state.name }
+													</option>
+												) ) }
+											</select>
+										</div>
+									) }
 									<div data-name="woocommerce_store_postcode">
 										<label
 											aria-required

src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js

@@ -27,7 +27,7 @@
 	useEffect( () => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_NAV_ECOMMERCE_STORE_INFO );
 	}, [] );
 
 	const handleCheckbox = ( value, checked ) =>
 		setCurrentOnboardingData( {
@@ -39,8 +39,8 @@
 					product_types: checked
 						? [ ...productInfo?.product_types, value ]
 						: productInfo?.product_types.filter(
-							( product ) => product !== value
-						),
+								( product ) => product !== value
+						  ),
 				},
 			},
 		} );

src/OnboardingSPA/steps/Ecommerce/StepTax/index.js

@@ -7,12 +7,12 @@
 	VIEW_NAV_ECOMMERCE_STORE_INFO,
 } from '../../../../constants';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../components/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useWPSettings as getWPSettings } from '../useWPSettings';
-import Animate from '../../../components/Animate';
+import Animate from '../../Animate';
 import getContents from './contents';
 
 function createReverseLookup( state ) {
@@ -44,7 +44,7 @@
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_NAV_ECOMMERCE_STORE_INFO );
 		setWPSettings();
 	}, [] );
 
 	const content = getContents();
 
@@ -72,7 +72,7 @@
 				},
 			} );
 		}
 	}, [ settings, currentData.storeDetails ] );
 
 	const { tax } = currentData.storeDetails;
 	const handleButtonClick = () => {

src/OnboardingSPA/steps/GetStarted/index.js

@@ -3,6 +3,7 @@
 import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../store';
+// import CommonLayout from '../../components/Layouts/Common';
 import CommonLayout from '../../components/Layouts/Common';
 import NewfoldLargeCard from '../../components/NewfoldLargeCard';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED } from '../../../constants';
@@ -14,7 +15,7 @@
 
 	useEffect( () => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 	}, [] );
 
 	useEffect( () => {}, [ location ] );
 
@@ -24,7 +25,7 @@
 	useEffect( () => {
 		setIsDrawerOpened( false );
 		setDrawerActiveView( VIEW_NAV_GET_STARTED );
 	}, [] );
 
 	return (
 		<CommonLayout isBgPrimary isCentered>

src/OnboardingSPA/styles/app.scss

@@ -46,7 +46,7 @@
 @import "../components/AdminBar/stylesheet";
 @import "../components/ProgressBar/stylesheet";
 @import "../components/Button/ButtonDark/stylesheet";
-@import "../components//SiteGenPlaceholder/stylesheet.scss";
+@import "../components/SiteGenPlaceholder/stylesheet.scss";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";

src/SiteGenSPA/components/AdminBar/index.js

@@ -0,0 +1,23 @@
+import { __ } from '@wordpress/i18n';
+import { Icon, wordpress } from '@wordpress/icons';
+
+const AdminBar = () => {
+	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">
+					<span>
+						{ __( 'Howdy!', 'wp-module-onboarding' ) }, Maya Jiménez
+					</span>
+				</span>
+				<div className="nfd-admin-bar-avatar"></div>
+			</div>
+		</div>
+	);
+};
+
+export default AdminBar;

src/SiteGenSPA/components/AdminBar/stylesheet.scss

@@ -0,0 +1,47 @@
+$light-grey : #a0a5aa;
+
+.nfd-sg-interface-skeleton__adminbar {
+
+	.nfd-sitegen-admin-bar {
+		padding: 5px;
+		background-color: #23282d;
+		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/SiteGenSPA/components/App/index.js

@@ -0,0 +1,50 @@
+import classNames from 'classnames';
+import { useLocation } from 'react-router-dom';
+import AdminBar from '../AdminBar';
+import ProgressBar from '../ProgressBar';
+import Header from '../Header';
+import Content from '../../../OnboardingSPA/components/Content';
+import ToggleDarkMode from '../ToggleDarkMode';
+
+// 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';
+import { ThemeProvider } from '../ThemeContextProvider';
+
+const App = () => {
+	const location = useLocation();
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const pathname = kebabCase( location.pathname );
+
+	return (
+		<Fragment>
+			<ThemeProvider>
+				<FullscreenMode isActive={ true } />
+				<SlotFillProvider>
+					<SiteGenInterfaceSkeleton
+						className={ classNames(
+							'nfd-sitegen-skeleton',
+							`brand-sitegen`,
+							`path-${ pathname }`,
+							{ 'is-large-viewport': isLargeViewport },
+							{ 'is-small-viewport': ! isLargeViewport }
+						) }
+						adminbar={ <AdminBar /> }
+						progressbar={
+							<ProgressBar current={ 20 } total={ 100 } />
+						}
+						header={ <Header /> }
+						content={ <Content /> }
+						footer={ <ToggleDarkMode /> }
+					/>
+				</SlotFillProvider>
+			</ThemeProvider>
+		</Fragment>
+	);
+};
+
+export default App;

src/SiteGenSPA/components/Header/ActionButton/index.js

@@ -0,0 +1,16 @@
+import { Icon } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+
+const ActionButton = ( { icon, title } ) => {
+	return (
+		<Button
+        className="navigation-buttons navigation-buttons_back"
+		variant="secondary"
+		>
+		    <Icon icon={ icon } />
+            { title }
+		</Button>
+	);
+};
+
+export default ActionButton;