show design nav for theme menu and homepage steps

newfold-labs · Dec 9, 2022 · 6eef64b · 6eef64b
1 parent 8d0c8ab
commit 6eef64b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js
@@ -22,7 +22,6 @@ import {
 	VIEW_DESIGN_COLORS,
 	VIEW_DESIGN_HEADER_MENU,
 	VIEW_DESIGN_HOMEPAGE_MENU,
-	VIEW_DESIGN_THEMES,
 	VIEW_DESIGN_THEME_STYLES_MENU,
 	VIEW_DESIGN_THEME_STYLES_PREVIEW,
 	VIEW_DESIGN_TYPOGRAPHY,
@@ -401,7 +400,7 @@ export const steps = [
 		Component: StepDesignThemeStylesMenu,
 		Icon: styles,
 		priority: 160,
-		VIEW: VIEW_DESIGN_THEME_STYLES_MENU,
+		VIEW: VIEW_NAV_DESIGN,
 		patternId: 'theme-styles',
 		sidebars: {
 			LearnMore: {
@@ -483,7 +482,7 @@ export const steps = [
 		Component: StepDesignHomepageMenu,
 		Icon: header,
 		priority: 240,
-		VIEW: VIEW_DESIGN_HOMEPAGE_MENU,
+		VIEW: VIEW_NAV_DESIGN,
 		patternId: 'homepage-styles',
 		sidebars: {
 			LearnMore: {

diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -7,7 +7,7 @@ import { getPatterns } from '../../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
 import {
-	VIEW_DESIGN_HOMEPAGE_MENU,
+	VIEW_NAV_DESIGN,
 	THEME_STATUS_ACTIVE,
 	THEME_STATUS_NOT_ACTIVE,
 } from '../../../../constants';
@@ -87,7 +87,7 @@ const StepDesignHomepageMenu = () => {
 		}
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( false );
-		setDrawerActiveView( VIEW_DESIGN_HOMEPAGE_MENU );
+		setDrawerActiveView( VIEW_NAV_DESIGN );
 		setIsHeaderNavigationEnabled( true );
 	}, [] );
 

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -10,7 +10,7 @@ import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-globa
 import { getPatterns } from '../../../../utils/api/patterns';
 import { getGlobalStyles } from '../../../../utils/api/themes';
 import {
-	VIEW_DESIGN_THEME_STYLES_MENU,
+	VIEW_NAV_DESIGN,
 	THEME_STATUS_ACTIVE,
 	THEME_STATUS_NOT_ACTIVE,
 } from '../../../../../constants';
@@ -21,8 +21,6 @@ import {
 } from '../../../../components/LivePreview';
 
 const StepDesignThemeStylesMenu = () => {
-	const MAX_PREVIEWS_PER_ROW = 3;
-
 	const location = useLocation();
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ pattern, setPattern ] = useState();
@@ -49,7 +47,7 @@ const StepDesignThemeStylesMenu = () => {
 			storedPreviewSettings:
 				select( nfdOnboardingStore ).getPreviewSettings(),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
-			themeVariations: select(nfdOnboardingStore).getStepPreviewData(),
+			themeVariations: select( nfdOnboardingStore ).getStepPreviewData(),
 		};
 	}, [] );
 
@@ -61,7 +59,7 @@ const StepDesignThemeStylesMenu = () => {
 		updatePreviewSettings,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		setIsHeaderNavigationEnabled
+		setIsHeaderNavigationEnabled,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -70,7 +68,7 @@ const StepDesignThemeStylesMenu = () => {
 		}
 		setIsSidebarOpened( false );
 		setIsDrawerSuppressed( false );
-		setDrawerActiveView( VIEW_DESIGN_THEME_STYLES_MENU );
+		setDrawerActiveView( VIEW_NAV_DESIGN );
 		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
@@ -137,7 +135,10 @@ const StepDesignThemeStylesMenu = () => {
 					<div className="theme-styles-menu__list">
 						<LivePreviewSkeleton
 							className={ 'theme-styles-menu__list__item' }
-							count={ themeVariations[currentStep?.patternId]?.previewCount }
+							count={
+								themeVariations[ currentStep?.patternId ]
+									?.previewCount
+							}
 							watch={ pattern && globalStyles }
 							callback={ buildPreviews }
 							viewportWidth={ 900 }