From 60e8dd08ec76a1a45830aa893ba727c54593aed0 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 13 Feb 2024 11:29:59 +0530
Subject: [PATCH 01/13] Bug Fixes :bug:

Fixes The Fork step showing up in Drawer.
Facebook step mobile view 'next' issue.
Fixes regenerate overflowing in Preview Step.
---
 src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js | 4 ++++
 .../LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss  | 4 ++++
 src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js             | 1 +
 src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js          | 2 ++
 4 files changed, 11 insertions(+)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
index 250061aa2..aa24ec944 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -7,6 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
 import ExitToWordPress from '../../ExitToWordPress';
 import Animate from '../../Animate';
+import { stepTheFork } from '../../../steps/TheFork/step';
 
 const NavPrimary = () => {
 	const location = useLocation();
@@ -27,6 +28,9 @@ const NavPrimary = () => {
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
 					{ topSteps.map( ( step ) => {
+						if ( step === stepTheFork ) {
+							return false;
+						}
 						return (
 							<Tooltip
 								key={ step.path }
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
index 135f8b1f4..23641f5d1 100644
--- a/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenPreviewSelectableCard/stylesheet.scss
@@ -99,6 +99,10 @@
 					text-overflow: ellipsis;
 					text-wrap: nowrap;
 					overflow: hidden;
+
+					@media (max-width: #{ ($break-mobile) }) {
+						width: 150px;
+					}
 				}
 			}
 
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
index db0365abc..d2136efa2 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
@@ -60,6 +60,7 @@ const SiteGenSiteLogo = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 		if ( currentData.data.siteLogo?.id !== 0 ) {
+			setIsFooterNavAllowed( true );
 			return setSiteLogo( currentData.data.siteLogo );
 		}
 		setIsFooterNavAllowed( false );
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
index 3c8633f65..4889439c6 100644
--- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js
@@ -24,6 +24,7 @@ const SiteGenSiteSocialMedia = () => {
 		setSidebarActiveView,
 		setHeaderActiveView,
 		setDrawerActiveView,
+		setIsFooterNavAllowed,
 		updateSiteGenErrorStatus,
 	} = useDispatch( nfdOnboardingStore );
 
@@ -49,6 +50,7 @@ const SiteGenSiteSocialMedia = () => {
 	};
 
 	useEffect( () => {
+		setIsFooterNavAllowed( connected );
 		if ( interacted && connected ) {
 			navigate( nextStep.path );
 		}

From ee24fa474c330b4ea1cf892cab92d477584ed4df Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 13 Feb 2024 11:48:41 +0530
Subject: [PATCH 02/13] Disable Navigation on Experience Selection

---
 .../components/Loaders/SiteGenLoader/index.js    |  9 ++++++---
 .../steps/SiteGen/Experience/index.js            | 16 ++++++----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 94cd18a97..33535c319 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { memo, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const SiteGenLoader = ( { autoNavigate = false } ) => {
+const SiteGenLoader = ( { watcher = null, autoNavigate = false } ) => {
 	let statusIdx = 0;
 	const content = getContents();
 	const navigate = useNavigate();
@@ -41,12 +41,15 @@ const SiteGenLoader = ( { autoNavigate = false } ) => {
 	}, [ currentData?.sitegen?.siteGenMetaStatus?.currentStatus ] );
 
 	useEffect( () => {
-		if ( percentage === 100 ) {
+		if ( percentage === 50 || percentage === 100 ) {
 			if ( nextStep && autoNavigate ) {
+				if ( watcher !== null && watcher === false ) {
+					return;
+				}
 				navigate( nextStep.path );
 			}
 		}
-	}, [ percentage ] );
+	}, [ percentage, watcher ] );
 
 	return (
 		<div className={ 'nfd-sg-loader' }>
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 0e340ee47..1245a0550 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
@@ -11,17 +10,14 @@ import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
 const SiteGenExperience = () => {
-	const navigate = useNavigate();
 	const content = getContents();
 	// Index of the selection user makes
-	/* eslint-disable no-unused-vars */
-	const [ selection, setSelection ] = useState();
+	const [ selection, setSelection ] = useState( 0 );
 
-	const { currentData, nextStep } = useSelect( ( select ) => {
+	const { currentData } = useSelect( ( select ) => {
 		return {
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-			nextStep: select( nfdOnboardingStore ).getNextStep(),
 		};
 	} );
 
@@ -53,16 +49,16 @@ const SiteGenExperience = () => {
 		setSelection( idx );
 		currentData.sitegen.experience.level = idx;
 		setCurrentOnboardingData( currentData );
-		if ( nextStep ) {
-			navigate( nextStep.path );
-		}
 	};
 
 	return (
 		<SitegenAiStateHandler>
 			<CommonLayout isCentered>
 				<div className={ 'nfd-sg-experience-level' }>
-					<SiteGenLoader />
+					<SiteGenLoader
+						watcher={ selection !== 0 ? true : false }
+						autoNavigate={ true }
+					/>
 					<CardWithOptions
 						title={ content.heading }
 						options={ content.options }

From e9bcec76dbe09915180edf9598883ddb662da923 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 13 Feb 2024 11:59:28 +0530
Subject: [PATCH 03/13] Add Styling to make it aesthetic :eyes:

---
 .../components/CardWithOptions/index.js          | 16 +++++++++++++---
 .../components/CardWithOptions/stylesheet.scss   |  4 ++--
 .../steps/SiteGen/Experience/contents.js         |  3 +++
 .../steps/SiteGen/Experience/index.js            |  3 ++-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
index 14e54db71..ca15e5980 100644
--- a/src/OnboardingSPA/components/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -1,7 +1,8 @@
+import classNames from 'classnames';
 import { memo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const CardWithOptions = ( { title, options, skip, callback } ) => {
+const CardWithOptions = ( { title, options, skip, selection, callback } ) => {
 	const buildOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
@@ -21,7 +22,13 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
 						}
 					} }
 				>
-					<div className={ 'nfd-sg-card__data__option__wrapper' }>
+					<div
+						className={ classNames(
+							'nfd-sg-card__data__option__wrapper',
+							data.key === selection &&
+								'nfd-sg-card__data__option__wrapper--selected'
+						) }
+					>
 						<div className={ 'nfd-sg-card__data__option__left' }>
 							<div
 								className={
@@ -55,7 +62,10 @@ const CardWithOptions = ( { title, options, skip, callback } ) => {
 			<div
 				role="button"
 				tabIndex={ 0 }
-				className={ 'nfd-sg-card__skip' }
+				className={ classNames(
+					'nfd-sg-card__skip',
+					-1 === selection && 'nfd-sg-card__skip--selected'
+				) }
 				onClick={ () => {
 					if ( callback && typeof callback === 'function' ) {
 						callback( -1 );
diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index b12d46074..03f406007 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -41,7 +41,7 @@ $background-color: var(--nfd-onboarding-card-background);
 				justify-content: space-between;
 				transition: background-color 400ms ease-in-out;
 
-				&:hover {
+				&--selected {
 					background-color: var(--nfd-onboarding-hover);
 				}
 			}
@@ -84,7 +84,7 @@ $background-color: var(--nfd-onboarding-card-background);
 		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
 		font-weight: 500;
 
-		&:hover {
+		&--selected {
 			color: var(--nfd-onboarding-primary);
 		}
 	}
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
index 246dbb06e..ec7ce2a5a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
@@ -8,6 +8,7 @@ const getContents = () => {
 		),
 		options: [
 			{
+				key: 1,
 				title: __( 'Beginner', 'wp-module-onboarding' ),
 				desc: __(
 					'First time here, where am I?',
@@ -15,6 +16,7 @@ const getContents = () => {
 				),
 			},
 			{
+				key: 2,
 				title: __( 'Used it some', 'wp-module-onboarding' ),
 				desc: __(
 					"I'll ask for help when I need it",
@@ -22,6 +24,7 @@ const getContents = () => {
 				),
 			},
 			{
+				key: 3,
 				title: __( 'Expert', 'wp-module-onboarding' ),
 				desc: __(
 					"Stay out of my way, I know what I'm doing",
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 1245a0550..b16118902 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -44,7 +44,7 @@ const SiteGenExperience = () => {
 
 	const checkAndNavigate = ( idx ) => {
 		// 0 - Not Selected
-		// 1-2 Options
+		// 1-3 Options
 		// -1 Skip
 		setSelection( idx );
 		currentData.sitegen.experience.level = idx;
@@ -63,6 +63,7 @@ const SiteGenExperience = () => {
 						title={ content.heading }
 						options={ content.options }
 						skip={ content.skip }
+						selection={ selection }
 						callback={ checkAndNavigate }
 					/>
 				</div>

From d106a77efd4f1f1a44f9a28b1cba8669b0b0ec00 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 13 Feb 2024 12:05:47 +0530
Subject: [PATCH 04/13] Fix Flash Navigation Issue

---
 src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js | 4 ++--
 src/OnboardingSPA/steps/SiteGen/Building/index.js           | 5 ++++-
 src/OnboardingSPA/steps/SiteGen/Experience/index.js         | 1 +
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 33535c319..8f1c1930e 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { memo, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const SiteGenLoader = ( { watcher = null, autoNavigate = false } ) => {
+const SiteGenLoader = ( { customNavPercentage, watcher = null, autoNavigate = false } ) => {
 	let statusIdx = 0;
 	const content = getContents();
 	const navigate = useNavigate();
@@ -41,7 +41,7 @@ const SiteGenLoader = ( { watcher = null, autoNavigate = false } ) => {
 	}, [ currentData?.sitegen?.siteGenMetaStatus?.currentStatus ] );
 
 	useEffect( () => {
-		if ( percentage === 50 || percentage === 100 ) {
+		if ( percentage === customNavPercentage ) {
 			if ( nextStep && autoNavigate ) {
 				if ( watcher !== null && watcher === false ) {
 					return;
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 87bb72cad..951297198 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -38,7 +38,10 @@ const SiteGenBuilding = () => {
 					</div>
 				</div>
 				<div className="site-gen__building_loader__overlay">
-					<SiteGenLoader autoNavigate={ true } />
+					<SiteGenLoader
+						customNavPercentage={ 100 }
+						autoNavigate={ true }
+					/>
 				</div>
 			</CommonLayout>
 		</SitegenAiStateHandler>
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index b16118902..ed7239fd1 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -57,6 +57,7 @@ const SiteGenExperience = () => {
 				<div className={ 'nfd-sg-experience-level' }>
 					<SiteGenLoader
 						watcher={ selection !== 0 ? true : false }
+						customNavPercentage={ 50 }
 						autoNavigate={ true }
 					/>
 					<CardWithOptions

From a20830ac1151c551a6e9feded09639850780f782 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 14 Feb 2024 13:14:38 +0530
Subject: [PATCH 05/13] Better Structure

---
 src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js | 3 +--
 src/OnboardingSPA/data/models/Step.js                         | 2 ++
 src/OnboardingSPA/steps/TheFork/step.js                       | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
index aa24ec944..3e9a0b827 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
@@ -7,7 +7,6 @@ import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
 import ExitToWordPress from '../../ExitToWordPress';
 import Animate from '../../Animate';
-import { stepTheFork } from '../../../steps/TheFork/step';
 
 const NavPrimary = () => {
 	const location = useLocation();
@@ -28,7 +27,7 @@ const NavPrimary = () => {
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
 					{ topSteps.map( ( step ) => {
-						if ( step === stepTheFork ) {
+						if ( false === step.drawerNavigation ) {
 							return false;
 						}
 						return (
diff --git a/src/OnboardingSPA/data/models/Step.js b/src/OnboardingSPA/data/models/Step.js
index e532f6002..cebaac1bf 100644
--- a/src/OnboardingSPA/data/models/Step.js
+++ b/src/OnboardingSPA/data/models/Step.js
@@ -8,6 +8,7 @@ export class Step {
 		sidebars,
 		header,
 		data,
+		drawerNavigation,
 	} ) {
 		this.path = path;
 		this.title = title;
@@ -17,5 +18,6 @@ export class Step {
 		this.sidebars = sidebars;
 		this.data = data;
 		this.header = header;
+		this.drawerNavigation = drawerNavigation ?? true;
 	}
 }
diff --git a/src/OnboardingSPA/steps/TheFork/step.js b/src/OnboardingSPA/steps/TheFork/step.js
index 143f79615..d2f833d37 100644
--- a/src/OnboardingSPA/steps/TheFork/step.js
+++ b/src/OnboardingSPA/steps/TheFork/step.js
@@ -7,9 +7,10 @@ const StepTheFork = lazy( () => import( './index' ) );
 
 export const stepTheFork = new Step( {
 	path: '/wp-setup/step/fork',
-	title: __( 'Page Layouts', 'wp-module-onboarding' ),
+	title: __( 'The Fork', 'wp-module-onboarding' ),
 	Component: StepTheFork,
 	icon: copy,
+	drawerNavigation: false,
 	sidebars: {
 		LearnMore: {
 			SidebarComponents: [],

From e6e20c149cbd1a6f1a75c2992829630c6b478189 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 14 Feb 2024 13:20:48 +0530
Subject: [PATCH 06/13] Remove autoNavigate

---
 src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js | 4 ++--
 src/OnboardingSPA/steps/SiteGen/Building/index.js           | 5 +----
 src/OnboardingSPA/steps/SiteGen/Experience/index.js         | 1 -
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 8f1c1930e..90027c7a6 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { memo, useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const SiteGenLoader = ( { customNavPercentage, watcher = null, autoNavigate = false } ) => {
+const SiteGenLoader = ( { customNavPercentage, watcher = null } ) => {
 	let statusIdx = 0;
 	const content = getContents();
 	const navigate = useNavigate();
@@ -42,7 +42,7 @@ const SiteGenLoader = ( { customNavPercentage, watcher = null, autoNavigate = fa
 
 	useEffect( () => {
 		if ( percentage === customNavPercentage ) {
-			if ( nextStep && autoNavigate ) {
+			if ( nextStep ) {
 				if ( watcher !== null && watcher === false ) {
 					return;
 				}
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 951297198..170bf96e8 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -38,10 +38,7 @@ const SiteGenBuilding = () => {
 					</div>
 				</div>
 				<div className="site-gen__building_loader__overlay">
-					<SiteGenLoader
-						customNavPercentage={ 100 }
-						autoNavigate={ true }
-					/>
+					<SiteGenLoader customNavPercentage={ 100 } />
 				</div>
 			</CommonLayout>
 		</SitegenAiStateHandler>
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index ed7239fd1..44cc10b4a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -58,7 +58,6 @@ const SiteGenExperience = () => {
 					<SiteGenLoader
 						watcher={ selection !== 0 ? true : false }
 						customNavPercentage={ 50 }
-						autoNavigate={ true }
 					/>
 					<CardWithOptions
 						title={ content.heading }

From 7b61c4026ab142bc0a7f92478f9549bde16c9549 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 15 Feb 2024 13:28:16 +0530
Subject: [PATCH 07/13] Update center.js

---
 src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
index c6fe6106e..f9b5d663d 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/center.js
@@ -116,6 +116,7 @@ const TitleContent = memo(
 							onChange={ handleOnChange }
 						/>
 						<Icon
+							className="nfd-onboarding-header__center-dropdown_icon"
 							icon={ chevronDown }
 							onClick={ onToggle }
 							onKeyDown={ ( event ) => {

From 37f5bb3c97c51596a9423985dd82d74ed744a143 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Mon, 19 Feb 2024 14:52:14 +0530
Subject: [PATCH 08/13] Better Component Design

---
 .../components/CardWithOptions/index.js       | 86 ------------------
 .../CardWithOptions/stylesheet.scss           | 91 -------------------
 .../CardWithOptions/index.js                  | 28 ++++++
 .../CardWithOptions/stylesheet.scss           | 32 +++++++
 .../OptionItem/index.js                       | 46 ++++++++++
 .../OptionItem/stylesheet.scss                | 47 ++++++++++
 .../CardWithOptionsTemplate/index.js          |  2 +
 .../steps/SiteGen/Experience/contents.js      | 12 +--
 .../steps/SiteGen/Experience/index.js         |  3 +-
 src/OnboardingSPA/styles/app.scss             |  3 +-
 10 files changed, 162 insertions(+), 188 deletions(-)
 delete mode 100644 src/OnboardingSPA/components/CardWithOptions/index.js
 delete mode 100644 src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
 create mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
 create mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss
 create mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
 create mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
 create mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/index.js

diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
deleted file mode 100644
index ca15e5980..000000000
--- a/src/OnboardingSPA/components/CardWithOptions/index.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import classNames from 'classnames';
-import { memo } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
-
-const CardWithOptions = ( { title, options, skip, selection, callback } ) => {
-	const buildOptions = () => {
-		return options.map( ( data, idx ) => {
-			return (
-				<div
-					key={ idx }
-					role="button"
-					tabIndex={ 0 }
-					className={ 'nfd-sg-card__data__option' }
-					onClick={ () => {
-						if ( callback && typeof callback === 'function' ) {
-							callback( idx + 1 );
-						}
-					} }
-					onKeyDown={ () => {
-						if ( callback && typeof callback === 'function' ) {
-							callback( idx + 1 );
-						}
-					} }
-				>
-					<div
-						className={ classNames(
-							'nfd-sg-card__data__option__wrapper',
-							data.key === selection &&
-								'nfd-sg-card__data__option__wrapper--selected'
-						) }
-					>
-						<div className={ 'nfd-sg-card__data__option__left' }>
-							<div
-								className={
-									'nfd-sg-card__data__option__left_top'
-								}
-							>
-								{ data.title }
-							</div>
-							<div
-								className={
-									'nfd-sg-card__data__option__left_bottom'
-								}
-							>
-								{ data.desc }
-							</div>
-						</div>
-						<Icon
-							className={ 'nfd-sg-card__data__option__right' }
-							icon={ chevronRight }
-						/>
-					</div>
-				</div>
-			);
-		} );
-	};
-
-	return (
-		<div className={ 'nfd-sg-card' }>
-			<div className={ 'nfd-sg-card__title' }>{ title }</div>
-			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
-			<div
-				role="button"
-				tabIndex={ 0 }
-				className={ classNames(
-					'nfd-sg-card__skip',
-					-1 === selection && 'nfd-sg-card__skip--selected'
-				) }
-				onClick={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-				onKeyDown={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-			>
-				{ skip }
-			</div>
-		</div>
-	);
-};
-
-export default memo( CardWithOptions );
diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
deleted file mode 100644
index 03f406007..000000000
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-$background-color: var(--nfd-onboarding-card-background);
-
-.nfd-sg-card {
-
-	margin: 8px;
-	max-width: 90vw;
-	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;
-		line-height: 1.5;
-		font-size: 18px;
-		text-align: center;
-		margin-bottom: 30px;
-		font-weight: 400;
-		letter-spacing: 1.5;
-	}
-
-	&__data {
-		margin: 12px;
-
-		&__option {
-
-			&__wrapper {
-				display: flex;
-				cursor: pointer;
-				margin: 16px 4px;
-				align-items: center;
-				border-radius: 8px;
-				padding: 16px 12px 16px 12px;
-				justify-content: space-between;
-				transition: background-color 400ms ease-in-out;
-
-				&--selected {
-					background-color: var(--nfd-onboarding-hover);
-				}
-			}
-
-			&:not(:last-child) {
-				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
-			}
-
-			&__left_top {
-				color: var(--nfd-onboarding-primary);
-				font-size: 15px;
-				font-weight: 500;
-				margin-bottom: 7px;
-				line-height: 24px;
-			}
-
-			&__left_bottom {
-				color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
-
-				font-size: 14px;
-				font-weight: 300;
-			}
-
-			&__right {
-				fill: var(--nfd-onboarding-primary);
-				transition: all 200ms ease-in-out;
-
-				&:hover {
-					transform: scale(1.1);
-				}
-			}
-		}
-	}
-
-	&__skip {
-		cursor: pointer;
-		text-align: end;
-		margin: 0 20px 6px 20px;
-		transition: color 200ms ease-in-out;
-		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
-		font-weight: 500;
-
-		&--selected {
-			color: var(--nfd-onboarding-primary);
-		}
-	}
-}
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
new file mode 100644
index 000000000..75e748fbc
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
@@ -0,0 +1,28 @@
+import { OptionItem } from '../';
+import { memo } from '@wordpress/element';
+
+const CardWithOptions = ( { title, options, selection, callback } ) => {
+	const buildOptions = () => {
+		return options.map( ( data, idx ) => {
+			return (
+				<OptionItem
+					key={ idx }
+					idx={ idx }
+					title={ data.title }
+					desc={ data.desc }
+					isSelected={ data.key === selection }
+					callback={ callback }
+				/>
+			);
+		} );
+	};
+
+	return (
+		<div className={ 'nfd-sg-card' }>
+			<div className={ 'nfd-sg-card__title' }>{ title }</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
+		</div>
+	);
+};
+
+export default memo( CardWithOptions );
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss
new file mode 100644
index 000000000..92d32f151
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss
@@ -0,0 +1,32 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd-sg-card {
+
+	margin: 8px;
+	max-width: 90vw;
+	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;
+		line-height: 1.5;
+		font-size: 18px;
+		text-align: center;
+		margin-bottom: 30px;
+		font-weight: 400;
+		letter-spacing: 1.5;
+	}
+
+	&__data {
+		margin: 12px;
+	}
+}
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
new file mode 100644
index 000000000..ae4bc765f
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import { memo } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
+	return (
+		<div
+			key={ idx }
+			role="button"
+			tabIndex={ 0 }
+			className={ 'nfd-sg-card__data__option' }
+			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+			onKeyDown={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+		>
+			<div
+				className={ classNames(
+					'nfd-sg-card__data__option__wrapper',
+					isSelected && 'nfd-sg-card__data__option__wrapper--selected'
+				) }
+			>
+				<div className={ 'nfd-sg-card__data__option__left' }>
+					<div className={ 'nfd-sg-card__data__option__left_top' }>
+						{ title }
+					</div>
+					<div className={ 'nfd-sg-card__data__option__left_bottom' }>
+						{ desc }
+					</div>
+				</div>
+				<Icon
+					className={ 'nfd-sg-card__data__option__right' }
+					icon={ chevronRight }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( OptionItem );
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
new file mode 100644
index 000000000..617a06774
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
@@ -0,0 +1,47 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd-sg-card__data__option {
+
+	&__wrapper {
+		display: flex;
+		cursor: pointer;
+		margin: 16px 4px;
+		align-items: center;
+		border-radius: 8px;
+		padding: 16px 12px 16px 12px;
+		justify-content: space-between;
+		transition: background-color 400ms ease-in-out;
+
+		&--selected {
+			background-color: var(--nfd-onboarding-hover);
+		}
+	}
+
+	&:not(:last-child) {
+		border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
+	}
+
+	&__left_top {
+		color: var(--nfd-onboarding-primary);
+		font-size: 15px;
+		font-weight: 500;
+		margin-bottom: 7px;
+		line-height: 24px;
+	}
+
+	&__left_bottom {
+		color: rgba(var(--nfd-onboarding-primary-rgb), 0.7);
+
+		font-size: 14px;
+		font-weight: 300;
+	}
+
+	&__right {
+		fill: var(--nfd-onboarding-primary);
+		transition: all 200ms ease-in-out;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+	}
+}
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
new file mode 100644
index 000000000..96e017c1a
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
@@ -0,0 +1,2 @@
+export { default as OptionItem } from './OptionItem';
+export { default as CardWithOptions } from './CardWithOptions';
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
index ec7ce2a5a..5d0f92a0a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
@@ -11,28 +11,24 @@ const getContents = () => {
 				key: 1,
 				title: __( 'Beginner', 'wp-module-onboarding' ),
 				desc: __(
-					'First time here, where am I?',
+					'First time building a website using WordPress',
 					'wp-module-onboarding'
 				),
 			},
 			{
 				key: 2,
-				title: __( 'Used it some', 'wp-module-onboarding' ),
+				title: __( 'Intermediate', 'wp-module-onboarding' ),
 				desc: __(
-					"I'll ask for help when I need it",
+					'I’ve built a few sites for myself or others',
 					'wp-module-onboarding'
 				),
 			},
 			{
 				key: 3,
 				title: __( 'Expert', 'wp-module-onboarding' ),
-				desc: __(
-					"Stay out of my way, I know what I'm doing",
-					'wp-module-onboarding'
-				),
+				desc: __( 'I do this frequently', 'wp-module-onboarding' ),
 			},
 		],
-		skip: __( 'Skip', 'wp-module-onboarding' ),
 	};
 };
 
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 44cc10b4a..c4c1a9c68 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -5,7 +5,7 @@ import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import CardWithOptions from '../../../components/CardWithOptions';
+import { CardWithOptions } from '../../../components/CardWithOptionsTemplate';
 import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
@@ -62,7 +62,6 @@ const SiteGenExperience = () => {
 					<CardWithOptions
 						title={ content.heading }
 						options={ content.options }
-						skip={ content.skip }
 						selection={ selection }
 						callback={ checkAndNavigate }
 					/>
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 4b00aa040..a5cacf512 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,7 +56,8 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
-@import "../components/CardWithOptions/stylesheet";
+@import "../components/CardWithOptionsTemplate/OptionItem/stylesheet";
+@import "../components/CardWithOptionsTemplate/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";
 @import "../components/LivePreview/SiteGenCard/stylesheet";

From 87c268ef9ade7802b13ce0a0e8a087fbacf73599 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 20 Feb 2024 13:13:06 +0530
Subject: [PATCH 09/13] Disassemble the card code into components.

---
 .../CardWithOptions/index.js                  |  4 +--
 .../CardWithOptions/stylesheet.scss           |  0
 .../CardWithOptionsTemplate/index.js          |  2 --
 .../index.js                                  | 31 +++++++++++++------
 .../stylesheet.scss                           |  2 +-
 .../steps/SiteGen/Experience/index.js         |  2 +-
 src/OnboardingSPA/styles/app.scss             |  4 +--
 7 files changed, 28 insertions(+), 17 deletions(-)
 rename src/OnboardingSPA/components/{CardWithOptionsTemplate => }/CardWithOptions/index.js (85%)
 rename src/OnboardingSPA/components/{CardWithOptionsTemplate => }/CardWithOptions/stylesheet.scss (100%)
 delete mode 100644 src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
 rename src/OnboardingSPA/components/{CardWithOptionsTemplate/OptionItem => OptionWithHeadingSubHeading}/index.js (50%)
 rename src/OnboardingSPA/components/{CardWithOptionsTemplate/OptionItem => OptionWithHeadingSubHeading}/stylesheet.scss (96%)

diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
similarity index 85%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
rename to src/OnboardingSPA/components/CardWithOptions/index.js
index 75e748fbc..e60e4e847 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -1,11 +1,11 @@
-import { OptionItem } from '../';
 import { memo } from '@wordpress/element';
+import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
 const CardWithOptions = ( { title, options, selection, callback } ) => {
 	const buildOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
-				<OptionItem
+				<OptionWithHeadingSubHeading
 					key={ idx }
 					idx={ idx }
 					title={ data.title }
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/CardWithOptions/stylesheet.scss
rename to src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js b/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
deleted file mode 100644
index 96e017c1a..000000000
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as OptionItem } from './OptionItem';
-export { default as CardWithOptions } from './CardWithOptions';
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
similarity index 50%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
rename to src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
index ae4bc765f..cc3ac3bc6 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/index.js
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js
@@ -2,13 +2,19 @@ import classNames from 'classnames';
 import { memo } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
+const OptionWithHeadingSubHeading = ( {
+	idx,
+	title,
+	desc,
+	isSelected,
+	callback,
+} ) => {
 	return (
 		<div
 			key={ idx }
 			role="button"
 			tabIndex={ 0 }
-			className={ 'nfd-sg-card__data__option' }
+			className={ 'nfd__option_heading_subheading' }
 			onClick={ () => {
 				if ( callback && typeof callback === 'function' ) {
 					callback( idx + 1 );
@@ -22,20 +28,27 @@ const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
 		>
 			<div
 				className={ classNames(
-					'nfd-sg-card__data__option__wrapper',
-					isSelected && 'nfd-sg-card__data__option__wrapper--selected'
+					'nfd__option_heading_subheading__wrapper',
+					isSelected &&
+						'nfd__option_heading_subheading__wrapper--selected'
 				) }
 			>
-				<div className={ 'nfd-sg-card__data__option__left' }>
-					<div className={ 'nfd-sg-card__data__option__left_top' }>
+				<div className={ 'nfd__option_heading_subheading__left' }>
+					<div
+						className={ 'nfd__option_heading_subheading__left_top' }
+					>
 						{ title }
 					</div>
-					<div className={ 'nfd-sg-card__data__option__left_bottom' }>
+					<div
+						className={
+							'nfd__option_heading_subheading__left_bottom'
+						}
+					>
 						{ desc }
 					</div>
 				</div>
 				<Icon
-					className={ 'nfd-sg-card__data__option__right' }
+					className={ 'nfd__option_heading_subheading__right' }
 					icon={ chevronRight }
 				/>
 			</div>
@@ -43,4 +56,4 @@ const OptionItem = ( { idx, title, desc, isSelected, callback } ) => {
 	);
 };
 
-export default memo( OptionItem );
+export default memo( OptionWithHeadingSubHeading );
diff --git a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
similarity index 96%
rename from src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
rename to src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
index 617a06774..5e5d6a8d6 100644
--- a/src/OnboardingSPA/components/CardWithOptionsTemplate/OptionItem/stylesheet.scss
+++ b/src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss
@@ -1,6 +1,6 @@
 $background-color: var(--nfd-onboarding-card-background);
 
-.nfd-sg-card__data__option {
+.nfd__option_heading_subheading {
 
 	&__wrapper {
 		display: flex;
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index c4c1a9c68..198b7e60a 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -5,7 +5,7 @@ import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import { CardWithOptions } from '../../../components/CardWithOptionsTemplate';
+import CardWithOptions from '../../../components/CardWithOptions';
 import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
 
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index a5cacf512..2921e45f8 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -56,8 +56,8 @@
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/ToggleDarkMode/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
-@import "../components/CardWithOptionsTemplate/OptionItem/stylesheet";
-@import "../components/CardWithOptionsTemplate/CardWithOptions/stylesheet";
+@import "../components/OptionWithHeadingSubHeading/stylesheet";
+@import "../components/CardWithOptions/stylesheet";
 @import "../components/Loaders/SiteGenLoader/stylesheet";
 @import "../components/Footer/stylesheet";
 @import "../components/LivePreview/SiteGenCard/stylesheet";

From 0b748425dd67094f9cfda6d5e7011cdb75c825de Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 20 Feb 2024 16:04:12 +0530
Subject: [PATCH 10/13] Update lint-check-spa.yml

---
 .github/workflows/lint-check-spa.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/lint-check-spa.yml b/.github/workflows/lint-check-spa.yml
index 56075d054..42910592a 100644
--- a/.github/workflows/lint-check-spa.yml
+++ b/.github/workflows/lint-check-spa.yml
@@ -45,7 +45,7 @@ jobs:
 
       # Installs @wordpress/scripts for lint checks if it does not exist in the cache.
       - name: Install dependencies
-        run: npm i @wordpress/scripts@26.10.0 @newfold-labs/js-utility-ui-analytics --legacy-peer-deps
+        run: npm i @wordpress/scripts@26.19.0 @newfold-labs/js-utility-ui-analytics --legacy-peer-deps
         if: steps.cache.outputs.cache-hit != 'true'
 
       # Gets the files changed wrt to trunk and filters out the js files.

From 42e75f37bc1c38ec2c952525d614073858a27df7 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 20 Feb 2024 16:05:21 +0530
Subject: [PATCH 11/13] Update index.js

---
 src/OnboardingSPA/components/CardWithOptions/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
index e60e4e847..0c5ef008b 100644
--- a/src/OnboardingSPA/components/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -2,7 +2,7 @@ import { memo } from '@wordpress/element';
 import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
 const CardWithOptions = ( { title, options, selection, callback } ) => {
-	const buildOptions = () => {
+	const buildCardOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
 				<OptionWithHeadingSubHeading
@@ -20,7 +20,7 @@ const CardWithOptions = ( { title, options, selection, callback } ) => {
 	return (
 		<div className={ 'nfd-sg-card' }>
 			<div className={ 'nfd-sg-card__title' }>{ title }</div>
-			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildCardOptions() }</div>
 		</div>
 	);
 };

From 077ccdc076a0e7c4a199f882654a81a34e90d2ae Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 20 Feb 2024 16:10:50 +0530
Subject: [PATCH 12/13] Revert "Update lint-check-spa.yml"

This reverts commit 0b748425dd67094f9cfda6d5e7011cdb75c825de.
---
 .github/workflows/lint-check-spa.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/lint-check-spa.yml b/.github/workflows/lint-check-spa.yml
index 42910592a..56075d054 100644
--- a/.github/workflows/lint-check-spa.yml
+++ b/.github/workflows/lint-check-spa.yml
@@ -45,7 +45,7 @@ jobs:
 
       # Installs @wordpress/scripts for lint checks if it does not exist in the cache.
       - name: Install dependencies
-        run: npm i @wordpress/scripts@26.19.0 @newfold-labs/js-utility-ui-analytics --legacy-peer-deps
+        run: npm i @wordpress/scripts@26.10.0 @newfold-labs/js-utility-ui-analytics --legacy-peer-deps
         if: steps.cache.outputs.cache-hit != 'true'
 
       # Gets the files changed wrt to trunk and filters out the js files.

From 56dad6cee2940ebee63350f9e541f57fb33f7792 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 20 Feb 2024 17:17:37 +0530
Subject: [PATCH 13/13] Added a Loading to Preview step

---
 .../steps/SiteGen/Preview/index.js            | 25 +++++++++++--------
 .../steps/SiteGen/Preview/stylesheet.scss     |  1 +
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
index 030a782ec..ffd487950 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -14,6 +14,7 @@ import RegeneratingSiteCard from './regeneratingCard';
 import { getHomepages, regenerateHomepage } from '../../../utils/api/siteGen';
 import { getGlobalStyles } from '../../../utils/api/themes';
 import SitegenAiStateHandler from '../../../components/StateHandlers/SitegenAi';
+import Animate from '../../../components/Animate';
 
 const SiteGenPreview = () => {
 	const navigate = useNavigate();
@@ -225,16 +226,20 @@ const SiteGenPreview = () => {
 		<SitegenAiStateHandler>
 			<CommonLayout className="nfd-onboarding-step--site-gen__preview">
 				<div className="nfd-onboarding-step--site-gen__preview__container">
-					<div className="nfd-onboarding-step--site-gen__preview__container__heading">
-						<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
-							{ content.heading }
-						</p>
-					</div>
-					<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
-						<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
-							{ content.subheading }
-						</p>
-					</div>
+					{ ! isPreviewLoading && (
+						<Animate type={ 'fade-in' }>
+							<div className="nfd-onboarding-step--site-gen__preview__container__heading">
+								<p className="nfd-onboarding-step--site-gen__preview__container__heading__text">
+									{ content.heading }
+								</p>
+							</div>
+							<div className="nfd-onboarding-step--site-gen__preview__container__sub-heading">
+								<p className="nfd-onboarding-step--site-gen__preview__container__sub-heading__text">
+									{ content.subheading }
+								</p>
+							</div>
+						</Animate>
+					) }
 				</div>
 				<div className="nfd-onboarding-step--site-gen__preview__options">
 					{ buildPreviews() }
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
index 70fc27b7e..bb5d970f2 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
@@ -9,6 +9,7 @@
 		flex-wrap: wrap;
 		max-width: 500px;
 		padding-top: 32px;
+		min-height: 160px;
 		margin-bottom: 15px;
 
 		&__heading {