PRESS2-1233 | merged changes

src/OnboardingSPA/components/CheckboxTemplate/CheckboxItem/index.js

@@ -2,7 +2,7 @@ import { useState } from '@wordpress/element';
 import { Icon, help } from '@wordpress/icons';
 
 import { CheckboxControl } from '@wordpress/components';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 /**
  * Checkbox Item Component

src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js

@@ -1,4 +1,4 @@
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 /**
  * Checkbox List Skeleton Component

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

@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, ColorPicker } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import {
 	OnboardingEvent,
 	trackOnboardingEvent,

src/OnboardingSPA/components/Drawer/DrawerPanel/Ecommerce/NavStoreInfo.js

@@ -6,7 +6,7 @@ import { NavLink } from 'react-router-dom';
 import { VIEW_NAV_PRIMARY } from '../../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../../store';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../Animate';
 import { commerce as commerceChapter } from '../../../../chapters/commerce';
 
 const NavStoreInfo = () => {

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

@@ -7,7 +7,7 @@ import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavDesign = () => {
 	const { designRoutes } = useSelect( ( select ) => {

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

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import { demographic as demographicChapter } from '../../../chapters/demographic';
 
 const NavGetStarted = () => {

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

@@ -5,7 +5,7 @@ import { VIEW_NAV_PRIMARY } from '../../../../constants';
 import { __ } from '@wordpress/i18n';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useDispatch } from '@wordpress/data';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavPage = () => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );

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

@@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import classNames from 'classnames';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const NavPrimary = () => {
 	const location = useLocation();

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

@@ -5,7 +5,7 @@ import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { VIEW_NAV_DESIGN } from '../../../../constants';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const WithDesignBack = ( { children } ) => {
 	const { setDrawerActiveView } = useDispatch( nfdOnboardingStore );

src/OnboardingSPA/components/ErrorState/Step/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import HeadingWithSubHeading from '../../HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 

src/Shared/Layouts/Base.js → src/OnboardingSPA/components/Layouts/Base.js

@@ -6,8 +6,8 @@ import { useLocation } from 'react-router-dom';
 import {
 	OnboardingEvent,
 	sendOnboardingEvent,
-} from '../../OnboardingSPA/utils/analytics/hiive';
-import { ACTION_PAGEVIEW } from '../../OnboardingSPA/utils/analytics/hiive/constants';
+} from '../../utils/analytics/hiive';
+import { ACTION_PAGEVIEW } from '../../utils/analytics/hiive/constants';
 
 const BaseLayout = ( {
 	className = 'nfd-onboarding-layout__base',

src/Shared/Layouts/Common.js → src/OnboardingSPA/components/Layouts/Common.js

@@ -6,7 +6,7 @@ import Animate from '../Animate';
 /**
  *
  * @param {*} param0
- * @return {ReturnType} Returns the inner contianer
+ * @return
  */
 const InnerContainer = ( { children } ) => {
 	return <section className="is-contained">{ children }</section>;
@@ -15,16 +15,16 @@ const InnerContainer = ( { children } ) => {
 /**
  * The Common Layout extends the Base Layout and applies structural styles and animations.
  *
- * @param {Object}  props
- * @param {string}  props.className
- * @param {Object}  props.children
- * @param {boolean} props.isBgPrimary
- * @param {boolean} props.isCentered
- * @param {boolean} props.isVerticallyCentered
- * @param {boolean} props.isContained
- * @param {boolean} props.isPadded
- * @param {boolean} props.isFadeIn
- * @return {ReturnType} Returns the common layout
+ * @param {Object} props
+ * @param          props.className
+ * @param          props.children
+ * @param          props.isBgPrimary
+ * @param          props.isCentered
+ * @param          props.isVerticallyCentered
+ * @param          props.isContained
+ * @param          props.isPadded
+ * @param          props.isFadeIn
+ * @return
  */
 const CommonLayout = ( {
 	className = '',

src/OnboardingSPA/components/Layouts/stylesheet.scss

@@ -0,0 +1,17 @@
+.nfd-onboarding-layout__common {
+    min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$admin-bar-height-big});
+    @include break-medium {
+        min-height: calc(100vh - #{$header-height} - #{$border-width});
+    }
+    &.is-padded {
+        min-height: calc(100vw - #{$header-height} - #{$border-width} - #{$grid-unit * 18} - #{$admin-bar-height-big});
+        @include break-medium {
+            min-height: calc(100vh - #{$header-height} - #{$border-width} - #{$grid-unit * 18});
+        }
+        padding: #{$grid-unit * 9};
+    }
+    > .is-contained {
+        width: 100%;
+        max-width: $break-huge;
+    }
+}

src/OnboardingSPA/components/LivePreview/BlockPreview/index.js

@@ -6,7 +6,7 @@ import { useEffect, useState, memo } from '@wordpress/element';
 import AutoHeightBlockPreview from './auto';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { store as nfdOnboardingStore } from '../../../store';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const BlockPreview = ( {
 	blockGrammer,

src/OnboardingSPA/components/LivePreview/SelectableCardWithInfo/index.js

@@ -3,7 +3,7 @@ import { Icon, help } from '@wordpress/icons';
 import { CheckboxControl } from '@wordpress/components';
 
 import { LivePreview } from '..';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const SelectableCardWithInfo = ( {
 	className = 'live-preview--selectable-card--title-description',

src/OnboardingSPA/components/Loaders/Chapter/Interstitial/index.js

@@ -5,7 +5,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
 
 import { store as nfdOnboardingStore } from '../../../../store';
 import CardHeader from '../../../CardHeader';
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../Layouts/Common';
 import NewfoldLargeCard from '../../../NewfoldLargeCard';
 import getContents from './contents';
 import ButtonWithBackground from '../../../Button/ButtonWithBackground';

src/OnboardingSPA/components/Loaders/ImageUpload/index.js

@@ -1,4 +1,4 @@
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 
 const ImageUploadLoader = () => {
 	return (

src/OnboardingSPA/components/Loaders/Step/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import HeadingWithSubHeading from '../../HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 

src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js

@@ -1,7 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { Fragment } from '@wordpress/element';
 
-import Animate from '../../../../../../Shared/Animate';
+import Animate from '../../../../Animate';
 import { store as nfdOnboardingStore } from '../../../../../store';
 
 /** Skeleton Structure for the SideBar */

src/OnboardingSPA/components/Tab/index.js

@@ -4,7 +4,7 @@
  * @return Tab
  */
 
-import Animate from '../../../Shared/Animate';
+import Animate from '../Animate';
 
 const Tab = ( { title, text, imgType, className, animationName } ) => {
 	return (

src/OnboardingSPA/pages/ErrorPage/index.js

@@ -1,7 +1,7 @@
 import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PAGE } from '../../../constants';
 import { store as nfdOnboardingStore } from '../../store';

src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js

@@ -5,7 +5,7 @@ import getContents from './contents';
 import TextInput from '../../components/TextInput';
 import SkipButton from '../../components/SkipButton';
 import MiniPreview from '../../components/MiniPreview';
-import Animate from '../../../Shared/Animate';
+import Animate from '../../components/Animate';
 import { getSettings } from '../../utils/api/settings';
 import { store as nfdOnboardingStore } from '../../store';
 import ImageUploader from '../../components/ImageUploader';

src/OnboardingSPA/steps/BasicInfo/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import BasicInfoForm from './basicInfoForm';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';

src/OnboardingSPA/steps/DesignColors/index.js

@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { DesignStateHandler } from '../../components/StateHandlers';
 import {
 	LivePreview,

src/OnboardingSPA/steps/DesignFonts/index.js

@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import {
 	SIDEBAR_LEARN_MORE,
 	THEME_STATUS_INIT,

src/OnboardingSPA/steps/DesignHeaderMenu/index.js

@@ -1,7 +1,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useLayoutEffect } from '@wordpress/element';
 
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { DesignStateHandler } from '../../components/StateHandlers';
 import {
 	LivePreview,

src/OnboardingSPA/steps/DesignHomepageMenu/index.js

@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 
 import { getPatterns } from '../../utils/api/patterns';
 import { store as nfdOnboardingStore } from '../../store';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import {
 	VIEW_NAV_DESIGN,
 	THEME_STATUS_ACTIVE,

src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js

@@ -4,7 +4,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 
 import getContents from '../contents';
 import { store as nfdOnboardingStore } from '../../../store';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { getPatterns } from '../../../utils/api/patterns';

src/OnboardingSPA/steps/DesignThemeStyles/Preview/index.js

@@ -8,7 +8,7 @@ import {
 	GlobalStylesProvider,
 } from '../../../components/LivePreview';
 import getContents from '../contents';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import {
 	VIEW_DESIGN_THEME_STYLES_PREVIEW,
 	THEME_STATUS_ACTIVE,

src/OnboardingSPA/steps/Ecommerce/StepAddress/index.js

@@ -6,14 +6,14 @@ import {
 	VIEW_NAV_ECOMMERCE_STORE_INFO,
 } from '../../../../constants';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
 import countries from '../countries.json';
 import currencies from '../currencies.json';
 import { useWPSettings as getWPSettings } from '../useWPSettings';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../../components/Animate';
 import getContents from './contents';
 import NavCardButton from '../../../components/Button/NavCardButton';
 

src/OnboardingSPA/steps/Ecommerce/StepProducts/index.js

@@ -7,7 +7,7 @@ import {
 } from '../../../../constants';
 import NavCardButton from '../../../components/Button/NavCardButton';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';

src/OnboardingSPA/steps/Ecommerce/StepTax/index.js

@@ -7,12 +7,12 @@ import {
 	VIEW_NAV_ECOMMERCE_STORE_INFO,
 } from '../../../../constants';
 import CardHeader from '../../../components/CardHeader';
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../Layouts/Common';
 import NeedHelpTag from '../../../components/NeedHelpTag';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../store';
 import { useWPSettings as getWPSettings } from '../useWPSettings';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../Animate';
 import getContents from './contents';
 
 function createReverseLookup( state ) {

src/OnboardingSPA/steps/GetStarted/GetStartedExperience/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import CardHeader from '../../../components/CardHeader';
 import NavCardButton from '../../../components/Button/NavCardButton';
@@ -11,7 +11,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { RadioControl } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import Animate from '../../../../Shared/Animate';
+import Animate from '../../../components/Animate';
 import getContents from './contents';
 import {
 	OnboardingEvent,

src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../components/NewfoldLargeCard';
 import {
 	SIDEBAR_LEARN_MORE,
@@ -11,7 +11,7 @@ import { useState, useEffect } from '@wordpress/element';
 import CardHeader from '../../../../components/CardHeader';
 import NavCardButton from '../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../components/NeedHelpTag';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../../components/Animate';
 import { getSiteClassification } from '../../../../utils/api/siteClassification';
 import {
 	OnboardingEvent,

src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/index.js

@@ -1,4 +1,4 @@
-import CommonLayout from '../../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../../components/NewfoldLargeCard';
 import {
 	SIDEBAR_LEARN_MORE,
@@ -11,7 +11,7 @@ import { useEffect, useState } from '@wordpress/element';
 import CardHeader from '../../../../components/CardHeader';
 import NavCardButton from '../../../../components/Button/NavCardButton';
 import NeedHelpTag from '../../../../components/NeedHelpTag';
-import Animate from '../../../../../Shared/Animate';
+import Animate from '../../../../components/Animate';
 import { getSiteClassification } from '../../../../utils/api/siteClassification';
 import {
 	OnboardingEvent,

src/OnboardingSPA/steps/GetStarted/Welcome/index.js

@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { chevronRight, external } from '@wordpress/icons';
 
-import CommonLayout from '../../../../Shared/Layouts/Common';
+import CommonLayout from '../../../components/Layouts/Common';
 import NewfoldLargeCard from '../../../components/NewfoldLargeCard';
 import CardHeader from '../../../components/CardHeader';
 import NavCardButton from '../../../components/Button/NavCardButton';

src/OnboardingSPA/steps/GetStarted/index.js

@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { useDispatch } from '@wordpress/data';
 
 import { store as nfdOnboardingStore } from '../../store';
-// import CommonLayout from '../../../Shared/Layouts/Common';
-import CommonLayout from '../../../Shared/Layouts/Common';
+// import CommonLayout from '../../components/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import NewfoldLargeCard from '../../components/NewfoldLargeCard';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_GET_STARTED } from '../../../constants';
 

src/OnboardingSPA/steps/SiteFeatures/index.js

@@ -6,7 +6,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../store';
 
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';
-import CommonLayout from '../../../Shared/Layouts/Common';
+import CommonLayout from '../../components/Layouts/Common';
 import { getSiteFeatures } from '../../utils/api/plugins';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
 import CheckboxList from '../../components/CheckboxTemplate/CheckboxList';