Merge branch 'enhance/ai-onboarding' of https://github.com/newfold-la…

…bs/wp-module-onboarding into enhance/preview-step

src/OnboardingSPA/components/Button/ButtonNext/stylesheet.scss

@@ -5,7 +5,7 @@
 		color: var(--nfd-onboarding-secondary);
 		width: 80px;
 		height: 50px;
-		font-size: 15px;
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 		border-radius: 8px;
 		padding: 16px;
 
@@ -17,5 +17,6 @@
 				color: var(--nfd-onboarding-secondary);
 			}
 		}
+
 	}
 }

src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss

@@ -1,11 +1,10 @@
 .nfd-onboarding-button {
 
 	&--site-gen-next {
-		width: 164px;
 		height: 50px;
 		display: flex;
 		cursor: pointer;
-		margin-top: 24px;
+		padding: 0 16px;
 		text-align: center;
 		border-radius: 8px;
 		align-items: center;
@@ -15,18 +14,16 @@
 		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 
 		@media (min-width: 2600px ) {
-			width: 250px;
 			height: 76px;
 		}
 
 		@media (max-width: #{ ($break-small) }) {
-			width: 100px;
-			height: 30px;
 			margin-top: 10px;
+			font-size: 16px;
 		}
 
 		&--disabled {
-			background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.4);
+			background-color: rgba(var(--nfd-onboarding-primary-rgb), 0.6) !important;
 
 			&:hover {
 				cursor: not-allowed;

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -4,12 +4,17 @@ $background-color: var(--nfd-onboarding-card-background);
 
 	margin: 8px;
 	max-width: 90vw;
-	padding: 24px 12px;
+	padding: 24px 16px;
 	border-radius: 12px;
 	background-color: $background-color;
 	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
 	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);
 
+	@media (max-width: #{ ($break-large) }) {
+		margin: 12px;
+		padding: 12px 6px;
+	}
+
 	&__title {
 		color: var(--nfd-onboarding-primary);
 		margin: 16px;

src/OnboardingSPA/components/Footer/components/SiteGenFooter/index.js

@@ -1,13 +1,39 @@
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { Fill } from '@wordpress/components';
-import { FOOTER_SITEGEN, FOOTER_START } from '../../../../../constants';
+import { useViewportMatch } from '@wordpress/compose';
+
 import ToggleDarkMode from '../../../ToggleDarkMode';
+import { store as nfdOnboardingStore } from '../../../../store';
+import {
+	FOOTER_SITEGEN,
+	FOOTER_START,
+	FOOTER_END,
+} from '../../../../../constants';
+import NextButtonSiteGen from '../../../Button/NextButtonSiteGen';
 
 const SiteGenFooter = () => {
+	const isLargeViewport = useViewportMatch( 'small' );
+	const { footerNavEnabled } = useSelect( ( select ) => {
+		return {
+			footerNavEnabled:
+				select( nfdOnboardingStore ).getFooterNavEnabled(),
+		};
+	} );
+
 	return (
 		<>
 			<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_START }` }>
 				<ToggleDarkMode />
 			</Fill>
+			{ ! isLargeViewport && (
+				<Fill name={ `${ FOOTER_SITEGEN }/${ FOOTER_END }` }>
+					<NextButtonSiteGen
+						text={ __( 'Next', 'wp-module-onboarding' ) }
+						disabled={ ! footerNavEnabled }
+					/>
+				</Fill>
+			) }
 		</>
 	);
 };

src/OnboardingSPA/components/Footer/stylesheet.scss

@@ -14,9 +14,24 @@
 	&__end {
 		position: absolute;
 		right: 25px;
+		bottom: 25px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		@media (max-width: #{ ($break-small) }) {
+			right: 16px;
+			bottom: 20px;
+		}
 	}
 
 	&--background {
 		background-color: rgba(var(--nfd-onboarding-secondary-rgb), 0.75);
 	}
+
+	@media (max-width: #{ ($break-small) }) {
+		backdrop-filter: blur(2px);
+		background: rgba(var(--nfd-onboarding-secondary-rgb), 0.5);
+		border-top: 1px solid rgba(var(--nfd-onboarding-primary-rgb), 0.25);
+	}
 }

src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss

@@ -1,5 +1,6 @@
 .ai-heading {
 
+	width: 100%;
 	display: flex;
 	margin-bottom: 20px;
 	align-items: center;
@@ -18,7 +19,7 @@
 		margin: 10px;
 		line-height: 1.5;
 		font-weight: 500;
-		font-size: 1.2rem;
 		color: var(--nfd-onboarding-primary);
+		font-size: clamp(1.2rem, 1.1rem + 0.273vw, 2.5rem);
 	}
 }

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

@@ -0,0 +1,23 @@
+/**
+ * Interface Cards with standard design.
+ *
+ * @param {Object} root0
+ * @param {string} root0.title
+ * @param {string} root0.subtitle
+ */
+
+const HeadingWithSubHeading = ( { title, subtitle } ) => {
+	return (
+		<div className="nfd-onboarding-step__heading">
+			<h2 className="nfd-onboarding-step__heading__title">{ title }</h2>
+			{ subtitle && (
+				<div className="nfd-onboarding-step__heading__subtitle">
+					{ subtitle }
+					<div className="nfd-onboarding-step__heading__icon"></div>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default HeadingWithSubHeading;

src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss

@@ -0,0 +1,34 @@
+.nfd-onboarding-step {
+
+	&__heading {
+		color: var(--nfd-onboarding-primary);
+		width: 96%;
+		margin: 50px 0 50px;
+		line-height: 1;
+
+		&__title {
+			font-weight: 300;
+			text-align: center;
+			color: var(--nfd-onboarding-primary);
+			margin: 35px !important;
+			font-size: 30px;
+		}
+
+		&__subtitle {
+			color: var(--nfd-onboarding-primary) !important;
+			font-weight: 300;
+			text-align: center;
+			font-size: 20px;
+		}
+
+		&__icon {
+			display: inline-flex;
+			width: 100px;
+			height: 17px;
+			background-image: var(--nfd-onboarding-logo-name);
+			background-size: contain;
+			background-repeat: no-repeat;
+			filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(200%) contrast(200%);
+		}
+	}
+}

src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss

@@ -1,10 +1,15 @@
 .nfd-onboarding-image-uploader {
 
 	&--with-text {
-		width: 600px;
+		width: 40vw;
 		margin: 16px;
 		border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
 
+		@media (max-width: #{ ($break-large) }) {
+			width: 80vw;
+			margin: 24px;
+		}
+
 		&--not-dashed {
 			border: 1.25px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
 			align-items: stretch;
@@ -92,7 +97,7 @@
 					width: 130px;
 					height: 100px;
 					object-fit: cover;
-					border-radius: 8px;
+					border-radius: 4px;
 				}
 
 				&__details {
@@ -105,7 +110,7 @@
 					&__filename {
 						margin: 0;
 						margin-bottom: 8px;
-						width: 300px;
+						width: 28vw;
 						font-size: clamp(0.75rem, 0.6591rem + 0.4545vw, 1.75rem);
 					}
 
@@ -125,7 +130,6 @@
 						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
 						font-style: normal;
 						font-weight: 510;
-						margin-right: 24px;
 						color: var(--nfd-onboarding-primary);
 						background-color: transparent;
 						border: none;

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

@@ -9,6 +9,7 @@ import themeToggleHOC from '../themeToggleHOC';
 import NewfoldInterfaceSkeleton from '../index';
 import { ThemeProvider } from '../../ThemeContextProvider';
 import { store as nfdOnboardingStore } from '../../../store';
+import classNames from 'classnames';
 import { setFlow } from '../../../utils/api/flow';
 import {
 	generateSiteGenMeta,
@@ -24,6 +25,15 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC(
 );
 
 const SiteGen = () => {
+	const { newfoldBrand } = useSelect( ( select ) => {
+		return {
+			newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(),
+		};
+	}, [] );
+
+	useEffect( () => {
+		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
+	}, [ newfoldBrand ] );
 	const location = useLocation();
 
 	const { currentData } = useSelect( ( select ) => {
@@ -117,7 +127,10 @@ const SiteGen = () => {
 		<ThemeProvider>
 			<ThemedNewfoldInterfaceSkeleton
 				id={ 'nfd-onboarding-skeleton--sitegen' }
-				className={ 'nfd-onboarding-skeleton--sitegen' }
+				className={ classNames(
+					'nfd-onboarding-skeleton--sitegen',
+					`brand-${ newfoldBrand }`
+				) }
 				header={ <Header /> }
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js

@@ -14,9 +14,19 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+// import bgAiImg from '../../static/images/ai_bg.png';
 
 function useHTMLClass( className ) {
 	useEffect( () => {
+		// eslint-disable-next-line no-undef
+		// const mainImage = new Image();
+		// mainImage.src = bgAiImg;
+		// mainImage.onload = () => {
+		// 	document.querySelector(
+		// 		'.nfd-onboarding-skeleton--sitegen'
+		// 	).style.backgroundImage = `url('${ bgAiImg }')`;
+		// };
+
 		const element =
 			document && document.querySelector( `html:not(.${ className })` );
 		if ( ! element ) {

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -181,7 +181,7 @@ html.nfd-interface-interface-skeleton__html-container {
 .nfd-onboarding-skeleton {
 
 	&--sitegen {
-		background-image: var(--sitegen-background);
+		background: var(--sitegen-background);
 		background-repeat: no-repeat;
 		background-size: cover;
 
@@ -190,3 +190,4 @@ html.nfd-interface-interface-skeleton__html-container {
 		}
 	}
 }
+