changes for design studio

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';
 
 export const pages = [ indexPage, errorPage ];
 
@@ -20,6 +21,7 @@ export const initialChapters = [ demographic, design, layoutContent, features ];
 export const getSteps = ( chapters = initialChapters ) => {
 	let steps = [];
 	steps.push( stepWelcome );
+	steps.push( stepDesignStudioPreview );
 	chapters.forEach( ( chapter ) => {
 		steps = steps.concat( [
 			...chapter.steps,
@@ -31,8 +33,9 @@ export const getSteps = ( chapters = initialChapters ) => {
 };
 
 export const getRoutes = ( chapters = initialChapters ) => {
-	let routes = [ ...pages ];
+	let routes = [ ...pages ];	
 	routes.push( stepWelcome );
+	routes.push( stepDesignStudioPreview );
 	chapters.forEach( ( chapter ) => {
 		routes = routes.concat( [
 			...chapter.steps,

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;

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

@@ -0,0 +1,44 @@
+import { memo } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { Icon, chevronLeft, chevronRight, reusableBlock, settings } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import ActionButton from './ActionButton';
+
+const Header = () => {
+	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>
+				<Button
+					className="navigation-buttons navigation-buttons_back"
+					variant="secondary"
+				>
+					<Icon icon={ reusableBlock } />
+					{ __( 'Regenerate', 'wp-module-onboarding' ) }
+				</Button>
+				<Button
+					className="navigation-buttons navigation-buttons_back"
+					variant="secondary"
+				>
+					<Icon icon={ settings } />
+					{ __( 'Customize', 'wp-module-onboarding' ) }
+				</Button>
+				<Button
+					className="navigation-buttons navigation-buttons_back"
+					variant="secondary"
+				>
+					<Icon icon={ chevronRight } />
+					{ __( 'Save & Continue', 'wp-module-onboarding' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default memo( Header );

src/SiteGenSPA/components/Header/index.js

@@ -1,22 +1,26 @@
 import { memo } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { Icon, chevronLeft } from '@wordpress/icons';
+import { chevronLeft, chevronRight, reusableBlock, settings,lock } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import ActionButton from './ActionButton';
 
 const Header = () => {
 	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 className="navigation-section-left">
+					<ActionButton icon = { chevronLeft } title = 'Back' />
+					<ActionButton icon = { reusableBlock } title = 'Regenerate' />
+				</div>
+				<div className="navigation-section-center">
+					<ActionButton icon = { lock } title = 'Back' />
+				</div>
+				<div className="navigation-section-right">
+					<ActionButton icon = { settings } title = 'Customize' />
+					<ActionButton icon = { chevronRight } title = 'Save & Continue' />
+				</div>
 			</div>
 		</div>
 	);
 };
 
-export default memo( Header );
+export default memo( Header );

src/SiteGenSPA/components/Header/stylesheet.scss

@@ -26,6 +26,9 @@
 
 	&__step-navigation {
 		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
 		column-gap: $grid-unit-10;
 	}
 }
@@ -36,8 +39,7 @@
 	align-items: center;
 	letter-spacing: 0.8px;
 	display: flex !important;
-	justify-content: space-evenly;
-	border-radius: 2px !important;
+	border-radius: 8px !important;
 	padding: 20px 14px !important;
 
 	&_back {
@@ -49,3 +51,23 @@
 		padding: 15px 10px !important;
 	}
 }
+
+.navigation-section {
+	align-items: center;
+	display: flex !important;
+
+	&-left {
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	&-center {
+		display: flex;
+		justify-content: center;
+	}
+
+	&-right {
+		display: flex;
+		justify-content: flex-end;
+	}
+}

src/SiteGenSPA/steps/DesignStudio/step.js

@@ -0,0 +1,16 @@
+import { home } from '@wordpress/icons';
+import { lazy } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Step } from '../../../OnboardingSPA/data/models/Step';
+import { VIEW_NAV_GET_STARTED } from '../../../constants';
+
+const DesignStudioPreview = lazy( () => import( './index' ) );
+
+export const stepDesignStudioPreview = new Step( {
+	path: '/wp-setup/step/get-started/site-gen',
+	title: __( 'WordPress Site Gen', 'wp-module-onboarding' ),
+	Component: DesignStudioPreview,
+	icon: home,
+	drawerView: VIEW_NAV_GET_STARTED,
+	sidebars: {},
+} );