Merge branch 'trunk' into enhance/add-site-title-and-tagline

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/Header/components/SiteGenHeader/step-navigation.js

@@ -16,9 +16,19 @@ import { stepSiteGenSiteLogo } from '../../../../steps/SiteGen/SiteLogo/step';
  * @return {WPComponent} Back Component
  */
 const Back = ( { path, showErrorDialog } ) => {
-	const { setNavErrorContinuePath } = useDispatch( nfdOnboardingStore );
+	const { setNavErrorContinuePath, updateSiteGenErrorStatus } =
+		useDispatch( nfdOnboardingStore );
+	const { siteGenErrorStatus } = useSelect( ( select ) => {
+		return {
+			siteGenErrorStatus:
+				select( nfdOnboardingStore ).getSiteGenErrorStatus(),
+		};
+	} );
 	const navigate = useNavigate();
 	const navigateBack = () => {
+		if ( siteGenErrorStatus === true ) {
+			updateSiteGenErrorStatus( false );
+		}
 		if ( showErrorDialog !== false ) {
 			setNavErrorContinuePath( path );
 		} else {

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

@@ -52,18 +52,25 @@ const SiteGen = () => {
 	}, [ newfoldBrand ] );
 	const location = useLocation();
 
-	const { currentData, initialize, pluginInstallHash, siteGenErrorStatus } =
-		useSelect( ( select ) => {
-			return {
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-				initialize: select( nfdOnboardingStore ).getInitialize(),
-				pluginInstallHash:
-					select( nfdOnboardingStore ).getPluginInstallHash(),
-				siteGenErrorStatus:
-					select( nfdOnboardingStore ).getSiteGenErrorStatus(),
-			};
-		} );
+	const {
+		currentData,
+		initialize,
+		pluginInstallHash,
+		siteGenErrorStatus,
+		interactionDisabled,
+	} = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			initialize: select( nfdOnboardingStore ).getInitialize(),
+			pluginInstallHash:
+				select( nfdOnboardingStore ).getPluginInstallHash(),
+			siteGenErrorStatus:
+				select( nfdOnboardingStore ).getSiteGenErrorStatus(),
+			interactionDisabled:
+				select( nfdOnboardingStore ).getInteractionDisabled(),
+		};
+	} );
 
 	const { setCurrentOnboardingData, updateSiteGenErrorStatus } =
 		useDispatch( nfdOnboardingStore );
@@ -119,15 +126,14 @@ const SiteGen = () => {
 			}
 		} catch ( err ) {
 			if ( retryCount < MAX_RETRIES_SITE_GEN ) {
-				performSiteGenMetaGeneration(
+				return performSiteGenMetaGeneration(
 					siteInfo,
 					identifier,
 					skipCache,
 					retryCount + 1
 				);
-			} else {
-				updateSiteGenErrorStatus( true );
 			}
+			updateSiteGenErrorStatus( true );
 		}
 	}
 
@@ -223,6 +229,7 @@ const SiteGen = () => {
 				content={ <Content /> }
 				sidebar={ <Sidebar /> }
 				footer={ <Footer /> }
+				interactionDisabled={ interactionDisabled }
 			/>
 		</ThemeProvider>
 	);

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js

@@ -60,6 +60,7 @@ function NewfoldInterfaceSkeleton(
 		labels,
 		className,
 		shortcuts,
+		interactionDisabled,
 	},
 	ref
 ) {
@@ -182,6 +183,9 @@ function NewfoldInterfaceSkeleton(
 					{ footer }
 				</div>
 			) }
+			{ interactionDisabled && (
+				<div className="nfd-interface-interface-skeleton__overlay--disabled"></div>
+			) }
 		</div>
 	);
 }

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -38,13 +38,28 @@ html.nfd-interface-interface-skeleton__html-container {
 			top: 0;
 		}
 	}
+
+	&__overlay {
+		// z-index: to display over sidebar.
+		&--disabled {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(var(--nfd-onboarding-secondary-rgb), 0.3);
+			cursor: not-allowed;
+			z-index: 1000001;
+		}
+	}
 }
 
 .nfd-interface-interface-skeleton__editor {
 	display: flex;
 	flex-direction: column;
 	flex: 0 1 100%;
 	overflow: hidden;
+	position: relative;
 }
 
 @include editor-left(".nfd-interface-interface-skeleton");
@@ -197,4 +212,3 @@ html.nfd-interface-interface-skeleton__html-container {
 		}
 	}
 }
-