Bug Fixes

src/OnboardingSPA/components/CardWithOptions/index.js

@@ -1,74 +1,26 @@
 import { memo } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import OptionWithHeadingSubHeading from '../OptionWithHeadingSubHeading';
 
-const CardWithOptions = ( { title, options, skip, callback } ) => {
-	const buildOptions = () => {
+const CardWithOptions = ( { title, options, selection, callback } ) => {
+	const buildCardOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
-				<div
+				<OptionWithHeadingSubHeading
 					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={ 'nfd-sg-card__data__option__wrapper' }>
-						<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>
+					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
-				role="button"
-				tabIndex={ 0 }
-				className={ 'nfd-sg-card__skip' }
-				onClick={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-				onKeyDown={ () => {
-					if ( callback && typeof callback === 'function' ) {
-						callback( -1 );
-					}
-				} }
-			>
-				{ skip }
-			</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildCardOptions() }</div>
 		</div>
 	);
 };

src/OnboardingSPA/components/CardWithOptions/stylesheet.scss

@@ -28,64 +28,5 @@ $background-color: var(--nfd-onboarding-card-background);
 
 	&__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;
-
-				&:hover {
-					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;
-
-		&:hover {
-			color: var(--nfd-onboarding-primary);
-		}
 	}
 }

src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js

@@ -27,6 +27,9 @@ const NavPrimary = () => {
 			<div className="nfd-onboarding-drawer__panel-menu">
 				<ul className="nfd-onboarding-drawer__panel-routes">
 					{ topSteps.map( ( step ) => {
+						if ( false === step.drawerNavigation ) {
+							return false;
+						}
 						return (
 							<Tooltip
 								key={ step.path }

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;
+					}
 				}
 			}
 

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 = ( { customNavPercentage, watcher = null } ) => {
 	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 ( nextStep && autoNavigate ) {
+		if ( percentage === customNavPercentage ) {
+			if ( nextStep ) {
+				if ( watcher !== null && watcher === false ) {
+					return;
+				}
 				navigate( nextStep.path );
 			}
 		}
-	}, [ percentage ] );
+	}, [ percentage, watcher ] );
 
 	return (
 		<div className={ 'nfd-sg-loader' }>

src/OnboardingSPA/components/OptionWithHeadingSubHeading/index.js

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { memo } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const OptionWithHeadingSubHeading = ( {
+	idx,
+	title,
+	desc,
+	isSelected,
+	callback,
+} ) => {
+	return (
+		<div
+			key={ idx }
+			role="button"
+			tabIndex={ 0 }
+			className={ 'nfd__option_heading_subheading' }
+			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+			onKeyDown={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback( idx + 1 );
+				}
+			} }
+		>
+			<div
+				className={ classNames(
+					'nfd__option_heading_subheading__wrapper',
+					isSelected &&
+						'nfd__option_heading_subheading__wrapper--selected'
+				) }
+			>
+				<div className={ 'nfd__option_heading_subheading__left' }>
+					<div
+						className={ 'nfd__option_heading_subheading__left_top' }
+					>
+						{ title }
+					</div>
+					<div
+						className={
+							'nfd__option_heading_subheading__left_bottom'
+						}
+					>
+						{ desc }
+					</div>
+				</div>
+				<Icon
+					className={ 'nfd__option_heading_subheading__right' }
+					icon={ chevronRight }
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default memo( OptionWithHeadingSubHeading );

src/OnboardingSPA/components/OptionWithHeadingSubHeading/stylesheet.scss

@@ -0,0 +1,47 @@
+$background-color: var(--nfd-onboarding-card-background);
+
+.nfd__option_heading_subheading {
+
+	&__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);
+		}
+	}
+}

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;
 	}
 }

src/OnboardingSPA/steps/SiteGen/Building/index.js

@@ -38,7 +38,7 @@ const SiteGenBuilding = () => {
 					</div>
 				</div>
 				<div className="site-gen__building_loader__overlay">
-					<SiteGenLoader autoNavigate={ true } />
+					<SiteGenLoader customNavPercentage={ 100 } />
 				</div>
 			</CommonLayout>
 		</SitegenAiStateHandler>

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 ) => {

src/OnboardingSPA/steps/SiteGen/Experience/contents.js

@@ -8,28 +8,27 @@ const getContents = () => {
 		),
 		options: [
 			{
+				key: 1,
 				title: __( 'Beginner', 'wp-module-onboarding' ),
 				desc: __(
-					'First time here, where am I?',
+					'First time building a website using WordPress',
 					'wp-module-onboarding'
 				),
 			},
 			{
-				title: __( 'Used it some', 'wp-module-onboarding' ),
+				key: 2,
+				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' ),
 	};
 };