Merge branch 'trunk' into PRESS-2-571-Colors-Step-Enhance

newfold-labs · Feb 15, 2023 · 3197bfa · 3197bfa
2 parents 9a92b12 + d97de02
commit 3197bfa
Show file tree

Hide file tree

Showing 13 changed files with 429 additions and 367 deletions.
diff --git a/src/OnboardingSPA/components/CardHeader/index.js b/src/OnboardingSPA/components/CardHeader/index.js
@@ -6,21 +6,32 @@
  * @return CardHeader
  */
 
-import React from 'react';
-
-const CardHeader = ({ heading, subHeading, question }) => {
+import { memo } from '@wordpress/element';
 
+const CardHeader = ( { heading, subHeading, question } ) => {
 	return (
 		<div>
-			{heading && <h2 className="nfd-step-card-heading">{heading}</h2>}
+			{ heading && (
+				<h2 className="nfd-step-card-heading">{ heading }</h2>
+			) }
 
-			{subHeading && (
-				<h3 className={ question ? "nfd-step-card-subheading-other" : "nfd-step-card-subheading" }>{subHeading}</h3>
-			)}
+			{ subHeading && (
+				<h3
+					className={
+						question
+							? 'nfd-step-card-subheading-other'
+							: 'nfd-step-card-subheading'
+					}
+				>
+					{ subHeading }
+				</h3>
+			) }
 
-			{question && <h3 className="nfd-step-card-question">{question}</h3>}
+			{ question && (
+				<h3 className="nfd-step-card-question">{ question }</h3>
+			) }
 		</div>
 	);
 };
 
-export default CardHeader;
+export default memo( CardHeader );
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -364,15 +364,15 @@ const DesignColors = () => {
 	function buildCustomPalette() {
 		const defaultColor = '#fff';
 		const primaryColorTemp =
-			customColors && customColors?.primary != ''
+			customColors && customColors?.primary !== ''
 				? customColors?.primary
 				: selectedColorsLocal?.primary ?? defaultColor;
 		const secondaryColorTemp =
-			customColors && customColors?.secondary != ''
+			customColors && customColors?.secondary !== ''
 				? customColors?.secondary
 				: selectedColorsLocal?.secondary ?? defaultColor;
 		const tertiaryColorTemp =
-			customColors && customColors?.tertiary != ''
+			customColors && customColors?.tertiary !== ''
 				? customColors?.tertiary
 				: selectedColorsLocal?.tertiary ?? defaultColor;
 
@@ -513,13 +513,11 @@ const DesignColors = () => {
 	}
 
 	return (
-		<GlobalStylesProvider>
-			<div className="theme-colors--drawer">
-				<h2>{ __( 'Color Palettes', 'wp-module-onboarding' ) }</h2>
-				{ colorPalettes && buildPalettes() }
-				{ colorPalettes && buildCustomPalette() }
-			</div>
-		</GlobalStylesProvider>
+		<div className="theme-colors--drawer">
+			<h2>{ __( 'Color Palettes', 'wp-module-onboarding' ) }</h2>
+			{ colorPalettes && buildPalettes() }
+			{ colorPalettes && buildCustomPalette() }
+		</div>
 	);
 };
 

diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
@@ -3,13 +3,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { GlobalStylesProvider } from '../../../components/LivePreview';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import {
-	THEME_STATUS_ACTIVE,
-	THEME_STATUS_INIT,
-} from '../../../../constants';
+import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants';
 
 const DesignTypography = () => {
 	const drawerFontOptions = useRef();
@@ -146,7 +142,7 @@ const DesignTypography = () => {
 		const paletteRenderedList = [];
 		for ( const fontStyle in fontPalettes ) {
 			const splitLabel = fontPalettes[ fontStyle ]?.label.split( '&', 2 );
-			if ( splitLabel.length == 0 ) continue;
+			if ( splitLabel.length === 0 ) continue;
 			paletteRenderedList.push(
 				<div
 					className={ `font-palette drawer-palette--button ${
@@ -219,19 +215,17 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<GlobalStylesProvider>
-			<div ref={ drawerFontOptions } className="theme-fonts--drawer">
-				<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
-				{ /* { selectedFont && 
-				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
-					<div>Reset Button</div>
-				</div>
-			} */ }
-				{ fontPalettes && buildPalettes() }
-				{ /* { fontPalettes && buildCustomPalette() } */ }
-				<div className="custom-font-palette--hidden">{ rerender }</div>
+		<div ref={ drawerFontOptions } className="theme-fonts--drawer">
+			<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
+			{ /* { selectedFont && 
+			<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
+				<div>Reset Button</div>
 			</div>
-		</GlobalStylesProvider>
+		} */ }
+			{ fontPalettes && buildPalettes() }
+			{ /* { fontPalettes && buildCustomPalette() } */ }
+			<div className="custom-font-palette--hidden">{ rerender }</div>
+		</div>
 	);
 };
 export default DesignTypography;
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/index.js
@@ -34,7 +34,7 @@ import classNames from 'classnames';
 import { store as nfdOnboardingStore } from '../../../store';
 import WithDesignBack from './WithDesignBack';
 
-const DrawerPanel = ( { isOpen } ) => {
+const DrawerPanel = () => {
 	const [ isNavView, setIsNavView ] = useState( true ); // menu-primary is default view
 	const { isDrawerOpen, drawerView } = useSelect( ( select ) => {
 		const { isDrawerOpened, getDrawerView } = select( nfdOnboardingStore );
@@ -121,7 +121,7 @@ const DrawerPanel = ( { isOpen } ) => {
 							<WithDesignBack>
 								<DesignHomepageMenu />
 							</WithDesignBack>
-						)}
+						) }
 					</div>
 				</div>
 			</div>

diff --git a/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js b/src/OnboardingSPA/components/Drawer/DrawerToggle/index.js
@@ -1,59 +1,57 @@
-import {
-	Button,
-	Icon,
-	__unstableMotion as motion,
-} from '@wordpress/components';
+import { Button, __unstableMotion as motion } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
 import classNames from 'classnames';
 import { store as nfdOnboardingStore } from '../../../store';
 
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { wordpress } from '@wordpress/icons';
-
-const DrawerToggle = ({ isOpen }) => {
-	const { isDrawerOpen, isDrawerSuppressed } = useSelect((select) => {
+const DrawerToggle = ( { isOpen } ) => {
+	const { isDrawerOpen, isDrawerSuppressed } = useSelect( ( select ) => {
 		return {
-			isDrawerOpen: select(nfdOnboardingStore).isDrawerOpened(),
-			isDrawerSuppressed: select(nfdOnboardingStore).isDrawerSuppressed(),
+			isDrawerOpen: select( nfdOnboardingStore ).isDrawerOpened(),
+			isDrawerSuppressed:
+				select( nfdOnboardingStore ).isDrawerSuppressed(),
 		};
-	}, []);
+	}, [] );
 
-	const { setIsDrawerOpened } = useDispatch(nfdOnboardingStore);
+	const { setIsDrawerOpened } = useDispatch( nfdOnboardingStore );
 
 	const drawerToggleRef = useRef();
 
-	useEffect(() => {
-		if (!isDrawerOpen) {
+	useEffect( () => {
+		if ( ! isDrawerOpen ) {
 			drawerToggleRef.current.focus();
 		}
-	}, [isDrawerOpen]);
+	}, [ isDrawerOpen ] );
 
 	const toggleDrawer = () => {
-		isDrawerSuppressed || setIsDrawerOpened(!isDrawerOpen);
-	}
+		isDrawerSuppressed || setIsDrawerOpened( ! isDrawerOpen );
+	};
 
 	return (
 		<motion.div
-			className={classNames('nfd-onboarding-drawer__toggle', {
+			className={ classNames( 'nfd-onboarding-drawer__toggle', {
 				'is-open': isDrawerOpen,
-			})}
+			} ) }
 			whileHover="expand"
 		>
 			<Button
-				className={`nfd-onboarding-drawer__toggle-button has-icon ${!isDrawerSuppressed || 'is-suppressed'}`}
-				label={__('Toggle Navigation', 'wp-module-onboarding')}
-				ref={drawerToggleRef}
-				aria-pressed={isOpen}
-				onClick={toggleDrawer}
+				className={ `nfd-onboarding-drawer__toggle-button has-icon ${
+					! isDrawerSuppressed || 'is-suppressed'
+				}` }
+				label={ __( 'Toggle Navigation', 'wp-module-onboarding' ) }
+				ref={ drawerToggleRef }
+				aria-pressed={ isOpen }
+				onClick={ toggleDrawer }
 			>
 				<div
-					style={{
+					style={ {
 						width: '36px',
 						height: '36px',
 						backgroundImage: 'var(--nfd-onboarding-icon)',
 						backgroundSize: 'contain',
-					}}
+					} }
 				/>
 			</Button>
 		</motion.div>

diff --git a/src/OnboardingSPA/components/Drawer/index.js b/src/OnboardingSPA/components/Drawer/index.js
@@ -1,23 +1,24 @@
-import { Fragment, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { Fragment, useEffect, memo } from '@wordpress/element';
 
 import DrawerPanel from './DrawerPanel';
 import DrawerToggle from './DrawerToggle';
 import { store as nfdOnboardingStore } from '../../store';
-import { useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Off-canvas drawer to left of viewport.
+ *
  * @param {*} param0
- * @returns
+ * @return
  */
-const Drawer = ({ isDefaultOpen = false }) => {
-	const isDesktopViewport = useViewportMatch('medium');
-	const { setIsDrawerOpened } = useDispatch(nfdOnboardingStore);
+const Drawer = ( { isDefaultOpen = false } ) => {
+	const isDesktopViewport = useViewportMatch( 'medium' );
+	const { setIsDrawerOpened } = useDispatch( nfdOnboardingStore );
 
-	useEffect(() => {
-		setIsDrawerOpened(isDefaultOpen && isDesktopViewport);
-	}, [isDefaultOpen, isDesktopViewport, setIsDrawerOpened]);
+	useEffect( () => {
+		setIsDrawerOpened( isDefaultOpen && isDesktopViewport );
+	}, [ isDefaultOpen, isDesktopViewport, setIsDrawerOpened ] );
 
 	return (
 		<Fragment>
@@ -27,4 +28,4 @@ const Drawer = ({ isDefaultOpen = false }) => {
 	);
 };
 
-export default Drawer;
+export default memo( Drawer );
diff --git a/src/OnboardingSPA/components/Header/index.js b/src/OnboardingSPA/components/Header/index.js
@@ -1,10 +1,11 @@
-import { useLocation } from 'react-router-dom';
 import { __ } from '@wordpress/i18n';
+import { useLocation } from 'react-router-dom';
+import { memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
-import { store as nfdOnboardingStore } from '../../store';
-import ExitToWordPress from '../ExitToWordPress';
 import HeaderEnd from './components/HeaderEnd';
+import ExitToWordPress from '../ExitToWordPress';
+import { store as nfdOnboardingStore } from '../../store';
 
 /**
  * Interface header rendered into header render prop in <InterfaceSkeleton />.
@@ -19,15 +20,7 @@ const Header = () => {
 			firstStep: select( nfdOnboardingStore ).getFirstStep(),
 		};
 	}, [] );
-	const { previousStep, nextStep } = useSelect(
-		( select ) => {
-			return {
-				previousStep: select( nfdOnboardingStore ).getPreviousStep(),
-				nextStep: select( nfdOnboardingStore ).getNextStep(),
-			};
-		},
-		[ location.path ]
-	);
+
 	const isGettingStarted = firstStep?.path === location?.pathname;
 	return (
 		<div className="nfd-onboarding-header">
@@ -46,4 +39,4 @@ const Header = () => {
 	);
 };
 
-export default Header;
+export default memo( Header );