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

@@ -7,7 +7,8 @@ import { trigger as cronTrigger } from './utils/api/cronTrigger';
 import { initialize as initializeSettings } from './utils/api/settings';
 import { DESIGN_STEPS_THEME } from '../constants';
 
-import App from './components/App';
+// import App from './components/App';
+import AppSiteGen from '../SiteGenSPA/components/AppSiteGen';
 import { HashRouter } from 'react-router-dom';
 import { dispatch } from '@wordpress/data';
 import { render } from '@wordpress/element';
@@ -21,7 +22,7 @@ import { stateToStore } from './chapters/utils';
  */
 const NFDOnboarding = () => (
 	<HashRouter>
-		<App />
+		<AppSiteGen />
 	</HashRouter>
 );
 

src/SiteGenSPA/components/AdminBarSiteGen/index.js

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

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

@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+
+/**
+ * @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,
+	children,
+	className = '',
+	duration = false,
+	timingFunction = false,
+} ) => {
+	const prefix = 'animate';
+
+	/**
+	 * Returns the appropriate className
+	 *
+	 * @return {string | void} ClassName that applies the animations
+	 */
+	function getAnimateClassName() {
+		if ( type ) {
+			let classname = '';
+			switch ( type ) {
+				// Add animation types and appropriate CSS
+				case 'fade-in':
+					classname = prefix.concat( '__fade-in' );
+					break;
+				case 'fade-in-disabled':
+					classname = prefix.concat( '__fade-in--disabled' );
+					break;
+				case 'fade-in-right':
+					classname = prefix.concat( '__fade-in--right' );
+					break;
+				case 'fade-in-left':
+					classname = prefix.concat( '__fade-in--left' );
+					break;
+				case 'fade-in-up':
+					classname = prefix.concat( '__fade-in--up' );
+					break;
+				case 'shine':
+					classname = prefix.concat( '__shine' );
+					break;
+				case 'shine-placeholder':
+					classname = prefix.concat( '__shine--placeholder' );
+					break;
+				case 'dropdown':
+					classname = prefix.concat( '__dropdown' );
+					break;
+				case 'load':
+					classname = prefix.concat( '__load' );
+					break;
+			}
+			return classname;
+		}
+	}
+
+	return ! after ? (
+		<div className={ `${ prefix }__blank` }>{ children }</div>
+	) : (
+		<div
+			className={ classNames( getAnimateClassName(), className ) }
+			style={ {
+				animationDuration: duration,
+				animationTimingFunction: timingFunction,
+			} }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default Animate;

src/SiteGenSPA/components/Animate/stylesheet.scss

@@ -0,0 +1,170 @@
+@keyframes fadeIn {
+
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+
+@keyframes fadeInRight {
+
+	from {
+		opacity: 0;
+		transform: translate3d(33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInLeft {
+
+	from {
+		opacity: 0;
+		transform: translate3d(-33%, 0, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInUp {
+
+	from {
+		opacity: 0;
+		transform: translate3d(0, 33%, 0);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes fadeInWithDisabledClicks {
+
+	from {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes shine {
+
+	0% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes shine-placeholder {
+
+	0% {
+		background-position: -468px 0;
+	}
+
+	100% {
+		background-position: 468px 0;
+	}
+}
+
+@keyframes dropdown {
+
+	0% {
+		transform: rotateX(-90deg);
+	}
+
+	70% {
+		transform: rotateX(20deg);
+	}
+
+	100% {
+		transform: rotateX(0deg);
+	}
+}
+
+@keyframes load {
+
+	0% {
+		left: -100%;
+	}
+
+	100% {
+		left: 100%;
+	}
+}
+
+.animate {
+
+	&__blank {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&__shine {
+		animation: shine 1.5s linear infinite;
+
+		&--placeholder {
+			animation: shine-placeholder 1.5s linear infinite;
+		}
+	}
+
+	&__dropdown {
+		animation: dropdown 400ms ease-in-out forwards;
+	}
+
+	&__fade-in {
+
+		animation: fadeIn 100ms ease-in-out;
+
+		&--disabled {
+			animation: fadeInWithDisabledClicks 500ms ease-in;
+		}
+
+		&--right {
+			animation: fadeInRight 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translate: none !important;
+			}
+		}
+
+		&--left {
+			animation: fadeInLeft 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translate: none !important;
+			}
+		}
+
+		&--up {
+			animation: fadeInUp 360ms ease-out;
+
+			@media (prefers-reduced-motion) {
+				animation: none !important;
+				translate: none !important;
+			}
+		}
+	}
+
+	&__load {
+		animation: load 3s linear infinite;
+	}
+}