From 1d4145ef1d2b64655014d77be9609382187909a9 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Mon, 26 Sep 2022 16:10:53 +0530 Subject: [PATCH 01/18] Added Basic Animation --- .../LivePreview/SelectableCard/index.js | 21 ++++++++++++++++--- .../SelectableCard/stylesheet.scss | 16 ++++++++++++++ src/OnboardingSPA/styles/_interface.scss | 1 + src/OnboardingSPA/styles/_utilities.scss | 8 +++++++ 4 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 6b272ceec..e2fff4e68 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -1,4 +1,5 @@ import { check, search, Icon } from '@wordpress/icons'; +import { useState, useEffect } from '@wordpress/element'; import { LivePreview } from '..'; @@ -11,7 +12,18 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, + animationDuration = 2500, } ) => { + + const [isShown, setIsShown] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { + setIsShown(true); + }, animationDuration); + return () => clearTimeout(timer); + }, [animationDuration]); + return (
- + /> : +
+
+ } { overlay && (
Date: Mon, 26 Sep 2022 16:54:33 +0530 Subject: [PATCH 02/18] Refactored Animation to be more robust --- .../LivePreview/SelectableCard/index.js | 35 +++++++++---------- .../SelectableCard/stylesheet.scss | 14 +++++--- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index e2fff4e68..2f0709bc7 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -24,6 +24,7 @@ const SelectableCard = ( { return () => clearTimeout(timer); }, [animationDuration]); + console.log(isShown); return (
-
- -
+ { isShown ? +
+ +
: <> }
- { isShown ? } + : -
-
- } + /> { overlay && (
Date: Mon, 26 Sep 2022 17:17:32 +0530 Subject: [PATCH 03/18] Fixed Selected Style --- .../components/Drawer/stylesheet.scss | 2 +- .../LivePreview/SelectableCard/index.js | 28 +++++++++---------- .../SelectableCard/stylesheet.scss | 5 ++-- .../DesignThemeStyles/Menu/stylesheet.scss | 2 +- 4 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index bebb0e03f..006cbf8d1 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -273,7 +273,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 1; + z-index: 2; width: 40px; height: 40px; display: flex; diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 2f0709bc7..aad651d51 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 2500, + animationDuration = 3000, } ) => { const [isShown, setIsShown] = useState(false); @@ -24,7 +24,6 @@ const SelectableCard = ( { return () => clearTimeout(timer); }, [animationDuration]); - console.log(isShown); return (
- { isShown ? -
- -
: <> } +
+ +
{ isShown ? null :
} diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss index 135726bfa..b5f76b90c 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss @@ -41,6 +41,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { + z-index: 2; width: 40px; height: 40px; display: flex; @@ -113,8 +114,6 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } .is-skeleton { - top: 0; - left: 0; z-index: 1; width: 100%; height: 100%; @@ -127,5 +126,5 @@ $main-border-main: var(--nfd-onboarding-primary-alt); background-position: 0 0; background-repeat: repeat-y; background-size: 50px 500px; - animation: shine 1s infinite; + animation: shine 0.8s linear infinite; } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss index 4b6a6dc09..068e22bf4 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss @@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 1; + z-index: 2; width: 40px; height: 40px; display: flex; From 0a6ae5a66b595da27ad67d3835e655ca195a0520 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 27 Sep 2022 11:29:29 +0530 Subject: [PATCH 04/18] Optimised Animations --- .../components/Drawer/stylesheet.scss | 1 + .../LivePreview/SelectableCard/index.js | 15 ++++++----- .../SelectableCard/stylesheet.scss | 27 +++++++++++-------- .../DesignThemeStyles/Menu/stylesheet.scss | 1 + src/OnboardingSPA/styles/_utilities.scss | 12 ++++----- 5 files changed, 33 insertions(+), 23 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 006cbf8d1..97e7fd3af 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -298,6 +298,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__live-preview-container { position: relative; width: 90%; + overflow: hidden; align-items: center; border: 1px solid #B7B7B7; diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index aad651d51..701f67522 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 3000, + animationDuration = 2500, } ) => { const [isShown, setIsShown] = useState(false); @@ -55,12 +55,15 @@ const SelectableCard = ( {
- { isShown ? null :
} + {isShown ? null : +
+
+
} { overlay && (
Date: Tue, 27 Sep 2022 11:33:42 +0530 Subject: [PATCH 05/18] Changed colors to have more shine --- .../components/LivePreview/SelectableCard/index.js | 2 +- .../components/LivePreview/SelectableCard/stylesheet.scss | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 701f67522..a5d78cde6 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 2500, + animationDuration = 2000, } ) => { const [isShown, setIsShown] = useState(false); diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss index 4609b3150..4fa80dc40 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss @@ -118,7 +118,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); height: 100%; z-index: 1; position: absolute; - background-color: $main-color-light; + background-color: $main-color-grey; &--shimmer { z-index: 2; @@ -127,9 +127,9 @@ $main-border-main: var(--nfd-onboarding-primary-alt); position: absolute; background-image: linear-gradient(90deg, rgba($main-color-light-rgb, 0) 0, - rgba($main-color-light-rgb, 0.2) 20%, - rgba($main-color-light-rgb, 0.5) 60%, + rgba($main-color-light-rgb, 0.4) 20%, + rgba($main-color-light-rgb, 0.7) 60%, $main-color-grey); - animation: shine 0.8s linear infinite; + animation: shine 0.5s linear infinite; } } From 18cf797d006df9c6391a48efc81e4287307e2fdc Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 27 Sep 2022 12:29:05 +0530 Subject: [PATCH 06/18] Added Skeleton --- .../LivePreview/SelectableCard/index.js | 8 ++++++-- .../LivePreview/SelectableCard/stylesheet.scss | 17 +++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index a5d78cde6..1bcb97f2a 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 2000, + animationDuration = 200000, } ) => { const [isShown, setIsShown] = useState(false); @@ -57,7 +57,11 @@ const SelectableCard = ( {
{isShown ? null :
-
+
+
+
+
+
} Date: Tue, 27 Sep 2022 13:00:55 +0530 Subject: [PATCH 07/18] Added Placeholder for Skimmer --- ...pages_Steps_DesignHomepageMenu_index_js.js | 392 ++++++++++++++++++ ...s_Steps_DesignHomepageMenu_index_js.js.map | 1 + .../LivePreview/SelectableCard/index.js | 3 +- .../SelectableCard/stylesheet.scss | 14 +- .../Steps/DesignHomepageMenu/stylesheet.scss | 3 +- 5 files changed, 405 insertions(+), 8 deletions(-) create mode 100644 build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js create mode 100644 build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map diff --git a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js new file mode 100644 index 000000000..25785374f --- /dev/null +++ b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js @@ -0,0 +1,392 @@ +"use strict"; +(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js"],{ + +/***/ "./src/OnboardingSPA/components/HeadingWithSubHeading/index.js": +/*!*********************************************************************!*\ + !*** ./src/OnboardingSPA/components/HeadingWithSubHeading/index.js ***! + \*********************************************************************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); +/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__); + + +/** + * Interface Cards with standard design. + * + * @returns + */ + +const HeadingWithSubHeading = _ref => { + let { + title, + subtitle + } = _ref; + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + className: "nfd-main-heading" + }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", { + className: "nfd-main-heading__title" + }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)(title, "wp-module-onboarding")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", { + className: "nfd-main-heading__subtitle" + }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)(subtitle, "wp-module-onboarding"))); +}; + +/* harmony default export */ __webpack_exports__["default"] = (HeadingWithSubHeading); + +/***/ }), + +/***/ "./src/OnboardingSPA/components/Layouts/Base.js": +/*!******************************************************!*\ + !*** ./src/OnboardingSPA/components/Layouts/Base.js ***! + \******************************************************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); +/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/a11y */ "@wordpress/a11y"); +/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/index.js"); +/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../constants */ "./src/constants.js"); +/* harmony import */ var _utils_api_events__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/api/events */ "./src/OnboardingSPA/utils/api/events.js"); + + + + + + + +/** + * The Base Layout has no prescribed styles, only shared functionality like focus-management and analytics. + * + * @param {object} props + * @returns + */ + +const BaseLayout = _ref => { + let { + className = 'nfd-onboarding-layout__base', + children + } = _ref; + const location = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_5__.useLocation)(); + const mainContainer = document.querySelector('.nfd-onboard-content'); + + const speakRouteTitle = function (location) { + let title = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Showing new Onboarding Page'; + // [TODO]: Determine if some routes should not speak the title + (0,_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__.speak)(title, 'assertive'); + }; + + (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { + mainContainer === null || mainContainer === void 0 ? void 0 : mainContainer.focus({ + preventScroll: true + }); + speakRouteTitle(location, 'Override'); + new _utils_api_events__WEBPACK_IMPORTED_MODULE_4__["default"](`${_constants__WEBPACK_IMPORTED_MODULE_3__.NFD_ONBOARDING_EVENT_PREFIX}-pageview`, { + stepID: location.pathname, + previousStepID: window.nfdOnboarding.previousStepID + }).send(); + window.nfdOnboarding.previousStepID = location.pathname; + }, [location.pathname]); + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('nfd-onboarding-layout', className) + }, children); +}; + +/* harmony default export */ __webpack_exports__["default"] = (BaseLayout); + +/***/ }), + +/***/ "./src/OnboardingSPA/components/Layouts/Common.js": +/*!********************************************************!*\ + !*** ./src/OnboardingSPA/components/Layouts/Common.js ***! + \********************************************************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); +/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _Base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Base */ "./src/OnboardingSPA/components/Layouts/Base.js"); +/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); +/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__); + + + + + +/** + * + * @param {*} param0 + * @returns + */ + +const InnerContainer = _ref => { + let { + children + } = _ref; + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { + className: "is-contained" + }, children); +}; +/** + * The Common Layout extends the Base Layout and applies structural styles and animations. + * + * @param {object} props + * @returns + */ + + +const CommonLayout = _ref2 => { + let { + className = '', + children, + isBgPrimary = false, + isCentered = false, + isVerticallyCentered = false, + isContained = false, + isPadded = false, + isFadeIn = true + } = _ref2; + const Container = isContained ? InnerContainer : _wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment; + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Base__WEBPACK_IMPORTED_MODULE_2__["default"], { + className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('nfd-onboarding-layout__common', className, { + 'is-layout-fade-in': isFadeIn + }, { + 'is-bg-primary': isBgPrimary + }, { + 'is-centered': isCentered + }, { + 'is-vertically-centered': isVerticallyCentered + }, { + 'is-padded': isPadded + }) + }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Container, null, children)); +}; + +/* harmony default export */ __webpack_exports__["default"] = (CommonLayout); + +/***/ }), + +/***/ "./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js": +/*!*******************************************************************!*\ + !*** ./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js ***! + \*******************************************************************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); +/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose"); +/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/index.js"); +/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data"); +/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _utils_api_patterns__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/api/patterns */ "./src/OnboardingSPA/utils/api/patterns.js"); +/* harmony import */ var _utils_api_themes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/api/themes */ "./src/OnboardingSPA/utils/api/themes.js"); +/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../store */ "./src/OnboardingSPA/store/index.js"); +/* harmony import */ var _components_Layouts_Common__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../components/Layouts/Common */ "./src/OnboardingSPA/components/Layouts/Common.js"); +/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../constants */ "./src/constants.js"); +/* harmony import */ var _components_LivePreview__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../components/LivePreview */ "./src/OnboardingSPA/components/LivePreview/index.js"); +/* harmony import */ var _components_HeadingWithSubHeading__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../components/HeadingWithSubHeading */ "./src/OnboardingSPA/components/HeadingWithSubHeading/index.js"); +/* harmony import */ var _utils_global_styles_use_global_styles_output__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../utils/global-styles/use-global-styles-output */ "./src/OnboardingSPA/utils/global-styles/use-global-styles-output.js"); + + + + + + + + + + + + + + +const StepDesignHomepageMenu = () => { + const homepagePatternList = ['homepage-1', 'homepage-2', 'homepage-3']; + const homepagesList = { + 'homepage-1': ['site-header-left-logo-navigation-inline', 'homepage-1', 'site-footer'], + 'homepage-2': ['site-header-left-logo-navigation-inline', 'homepage-2', 'site-footer'], + 'homepage-3': ['site-header-left-logo-navigation-inline', 'homepage-3', 'site-footer'] + }; + const location = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_11__.useLocation)(); + const [isLoaded, setisLoaded] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false); + const [globalStyle, setGlobalStyle] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(); + const [homepagePattern, setHomepagePattern] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(); + const [selectedHomepage, setSelectedHomepage] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(0); + const isLargeViewport = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__.useViewportMatch)('medium'); + const { + currentStep, + currentData, + storedPreviewSettings + } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => { + return { + currentStep: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getStepFromPath(location.pathname), + currentData: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getCurrentOnboardingData(), + storedPreviewSettings: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getPreviewSettings() + }; + }, []); + const { + setDrawerActiveView, + setIsDrawerOpened, + setIsSidebarOpened, + updatePreviewSettings, + setIsDrawerSuppressed, + setCurrentOnboardingData + } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useDispatch)(_store__WEBPACK_IMPORTED_MODULE_5__.store); + (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { + if (isLargeViewport) { + setIsDrawerOpened(true); + } + + setIsSidebarOpened(false); + setIsDrawerSuppressed(false); + setDrawerActiveView(_constants__WEBPACK_IMPORTED_MODULE_7__.VIEW_DESIGN_HOMEPAGE_MENU); + }, []); + + function refactorPatterns(homepagePatternData) { + const makeHomepagePattern = []; + + for (const key in homepagesList) { + const homepagePatterns = homepagesList[key]; + let patternData = ''; + homepagePatterns.forEach(patternName => { + homepagePatternData === null || homepagePatternData === void 0 ? void 0 : homepagePatternData.body.forEach(homepagePatternData => { + if (homepagePatternData.slug === patternName) { + patternData += homepagePatternData.content; + } + }); + }); + makeHomepagePattern.push(patternData); + } + + return makeHomepagePattern; + } + + async function getHomepagePatternsData() { + const homepagePatternData = await (0,_utils_api_patterns__WEBPACK_IMPORTED_MODULE_3__.getPatterns)(currentStep.patternId); + const globalStyles = await (0,_utils_api_themes__WEBPACK_IMPORTED_MODULE_4__.getGlobalStyles)(); + let selectedGlobalStyle; + + if (currentData.data.theme.variation) { + selectedGlobalStyle = globalStyles.body.filter(globalStyle => globalStyle.title === currentData.data.theme.variation)[0]; + } else { + selectedGlobalStyle = globalStyles.body[0]; + } + + updatePreviewSettings((0,_utils_global_styles_use_global_styles_output__WEBPACK_IMPORTED_MODULE_10__.useGlobalStylesOutput)(selectedGlobalStyle, storedPreviewSettings)); + + if (selectedGlobalStyle) { + setGlobalStyle(selectedGlobalStyle); + } + + setHomepagePattern(refactorPatterns(homepagePatternData)); + + if ((currentData === null || currentData === void 0 ? void 0 : currentData.data.sitePages.length) !== 0) { + setSelectedHomepage(homepagePatternList === null || homepagePatternList === void 0 ? void 0 : homepagePatternList.indexOf(currentData === null || currentData === void 0 ? void 0 : currentData.data.sitePages.homepage)); + } else { + currentData.data.sitePages = { ...currentData.data.sitePages, + homepage: homepagePatternList[0] + }; + setCurrentOnboardingData(currentData); + } + + setisLoaded(true); + } + + function saveDataForHomepage(idx) { + setSelectedHomepage(idx); + currentData.data.sitePages = { ...currentData.data.sitePages, + homepage: homepagePatternList[idx] + }; + setCurrentOnboardingData(currentData); + } + + (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { + if (!isLoaded) { + getHomepagePatternsData(); + } + }, [isLoaded]); + + function buildHomepagePreviews() { + return homepagePattern === null || homepagePattern === void 0 ? void 0 : homepagePattern.map((homepage, idx) => { + if (homepage) { + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + className: "homepage_preview__list" + }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_LivePreview__WEBPACK_IMPORTED_MODULE_8__.LivePreviewSelectableCard, { + className: 'homepage_preview__list__item', + selected: idx === selectedHomepage, + blockGrammer: homepage, + viewportWidth: 1200, + styling: 'custom', + previewSettings: globalStyle, + overlay: false, + onClick: () => saveDataForHomepage(idx) + })); + } + }); + } + + return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Layouts_Common__WEBPACK_IMPORTED_MODULE_6__["default"], null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + className: "homepage_preview" + }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_HeadingWithSubHeading__WEBPACK_IMPORTED_MODULE_9__["default"], { + title: currentStep === null || currentStep === void 0 ? void 0 : currentStep.heading, + subtitle: currentStep === null || currentStep === void 0 ? void 0 : currentStep.subheading + }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { + className: "theme-styles-menu__list" + }, globalStyle && buildHomepagePreviews()))); +}; + +/* harmony default export */ __webpack_exports__["default"] = (StepDesignHomepageMenu); + +/***/ }), + +/***/ "./src/OnboardingSPA/utils/api/events.js": +/*!***********************************************!*\ + !*** ./src/OnboardingSPA/utils/api/events.js ***! + \***********************************************/ +/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { + +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/api-fetch */ "@wordpress/api-fetch"); +/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./src/OnboardingSPA/utils/api/common.js"); + + + +class Event { + constructor(eventSlug) { + let eventData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + this.eventSlug = eventSlug; + this.eventData = eventData; + } + + send() { + _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0___default()({ + url: (0,_common__WEBPACK_IMPORTED_MODULE_1__.onboardingRestURL)('events'), + method: 'POST', + data: { + slug: this.eventSlug, + data: this.eventData + } + }).catch(error => { + console.error(error); + }); + } + +} + +/* harmony default export */ __webpack_exports__["default"] = (Event); + +/***/ }) + +}]); +//# sourceMappingURL=src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map \ No newline at end of file diff --git a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map new file mode 100644 index 000000000..137c55758 --- /dev/null +++ b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map @@ -0,0 +1 @@ +{"version":3,"file":"src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js","mappings":"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","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/HeadingWithSubHeading/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Layouts/Base.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Layouts/Common.js","webpack://newfold.Onboarding/./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/utils/api/events.js"],"sourcesContent":["import { __ } from '@wordpress/i18n';\n\n/**\n * Interface Cards with standard design.\n *\n * @returns\n */\nconst HeadingWithSubHeading = ({ title, subtitle }) => {\n\n\treturn (\n\t\t
\n\t\t\t

{__(\n\t\t\t\ttitle,\n\t\t\t\t\"wp-module-onboarding\"\n\t\t\t)}

\n\t\t\t

{__(\n\t\t\t\tsubtitle,\n\t\t\t\t\"wp-module-onboarding\"\n\t\t\t)}

\n\t\t
\n\t);\n};\n\nexport default HeadingWithSubHeading;\n","import classNames from 'classnames';\nimport { speak } from '@wordpress/a11y';\nimport { useEffect } from '@wordpress/element';\nimport { useLocation } from 'react-router-dom';\n\nimport { NFD_ONBOARDING_EVENT_PREFIX } from '../../../constants';\nimport Event from '../../utils/api/events';\n\n/**\n * The Base Layout has no prescribed styles, only shared functionality like focus-management and analytics.\n *\n * @param {object} props\n * @returns\n */\nconst BaseLayout = ({\n\tclassName = 'nfd-onboarding-layout__base',\n\tchildren,\n}) => {\n\tconst location = useLocation();\n\tconst mainContainer = document.querySelector('.nfd-onboard-content');\n\n\tconst speakRouteTitle = (\n\t\tlocation,\n\t\ttitle = 'Showing new Onboarding Page'\n\t) => {\n\t\t// [TODO]: Determine if some routes should not speak the title\n\t\tspeak(title, 'assertive');\n\t};\n\n\tuseEffect(() => {\n\t\tmainContainer?.focus({ preventScroll: true });\n\t\tspeakRouteTitle(location, 'Override');\n new Event(`${NFD_ONBOARDING_EVENT_PREFIX}-pageview`, {\n stepID: location.pathname,\n previousStepID: window.nfdOnboarding.previousStepID\n }).send();\n window.nfdOnboarding.previousStepID = location.pathname\n\t}, [location.pathname]);\n\n\treturn (\n\t\t
\n\t\t\t{children}\n\t\t
\n\t);\n};\n\nexport default BaseLayout;\n","import { Animate } from '@wordpress/components';\nimport BaseLayout from './Base';\nimport { Fragment } from '@wordpress/element';\nimport classNames from 'classnames';\n\n/**\n *\n * @param {*} param0\n * @returns\n */\nconst InnerContainer = ({ children }) => {\n\treturn
{children}
;\n};\n\n/**\n * The Common Layout extends the Base Layout and applies structural styles and animations.\n *\n * @param {object} props\n * @returns\n */\nconst CommonLayout = ({\n\tclassName = '',\n\tchildren,\n\tisBgPrimary = false,\n\tisCentered = false,\n\tisVerticallyCentered = false,\n\tisContained = false,\n\tisPadded = false,\n\tisFadeIn = true,\n}) => {\n\tconst Container = isContained ? InnerContainer : Fragment;\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport default CommonLayout;\n","import { useViewportMatch } from '@wordpress/compose';\nimport { useLocation } from 'react-router-dom';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nimport { getPatterns } from '../../../utils/api/patterns';\nimport { getGlobalStyles } from '../../../utils/api/themes';\nimport { store as nfdOnboardingStore } from '../../../store';\nimport CommonLayout from '../../../components/Layouts/Common';\nimport { VIEW_DESIGN_HOMEPAGE_MENU } from '../../../../constants';\nimport { LivePreviewSelectableCard } from '../../../components/LivePreview';\nimport HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';\nimport { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';\n\nconst StepDesignHomepageMenu = () => {\n\tconst homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];\n\n\tconst homepagesList = {\n\t\t'homepage-1': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-1',\n\t\t\t'site-footer',\n\t\t],\n\t\t'homepage-2': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-2',\n\t\t\t'site-footer',\n\t\t],\n\t\t'homepage-3': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-3',\n\t\t\t'site-footer',\n\t\t],\n\t};\n\n\tconst location = useLocation();\n\tconst [ isLoaded, setisLoaded ] = useState( false );\n\tconst [ globalStyle, setGlobalStyle ] = useState();\n\tconst [ homepagePattern, setHomepagePattern ] = useState();\n\tconst [ selectedHomepage, setSelectedHomepage ] = useState( 0 );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst { currentStep, currentData, storedPreviewSettings } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tcurrentStep: select( nfdOnboardingStore ).getStepFromPath(\n\t\t\t\t\tlocation.pathname\n\t\t\t\t),\n\t\t\t\tcurrentData:\n\t\t\t\t\tselect( nfdOnboardingStore ).getCurrentOnboardingData(),\n\t\t\t\tstoredPreviewSettings:\n\t\t\t\t\tselect( nfdOnboardingStore ).getPreviewSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst {\n\t\tsetDrawerActiveView,\n\t\tsetIsDrawerOpened,\n\t\tsetIsSidebarOpened,\n\t\tupdatePreviewSettings,\n\t\tsetIsDrawerSuppressed,\n\t\tsetCurrentOnboardingData,\n\t} = useDispatch( nfdOnboardingStore );\n\n\tuseEffect( () => {\n\t\tif ( isLargeViewport ) {\n\t\t\tsetIsDrawerOpened( true );\n\t\t}\n\t\tsetIsSidebarOpened( false );\n\t\tsetIsDrawerSuppressed( false );\n\t\tsetDrawerActiveView( VIEW_DESIGN_HOMEPAGE_MENU );\n\t}, [] );\n\n\tfunction refactorPatterns( homepagePatternData ) {\n\t\tconst makeHomepagePattern = [];\n\n\t\tfor ( const key in homepagesList ) {\n\t\t\tconst homepagePatterns = homepagesList[ key ];\n\t\t\tlet patternData = '';\n\t\t\thomepagePatterns.forEach( ( patternName ) => {\n\t\t\t\thomepagePatternData?.body.forEach( ( homepagePatternData ) => {\n\t\t\t\t\tif ( homepagePatternData.slug === patternName ) {\n\t\t\t\t\t\tpatternData += homepagePatternData.content;\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} );\n\t\t\tmakeHomepagePattern.push( patternData );\n\t\t}\n\n\t\treturn makeHomepagePattern;\n\t}\n\n\tasync function getHomepagePatternsData() {\n\t\tconst homepagePatternData = await getPatterns( currentStep.patternId );\n\t\tconst globalStyles = await getGlobalStyles();\n\t\tlet selectedGlobalStyle;\n\t\tif ( currentData.data.theme.variation ) {\n\t\t\tselectedGlobalStyle = globalStyles.body.filter(\n\t\t\t\t( globalStyle ) =>\n\t\t\t\t\tglobalStyle.title === currentData.data.theme.variation\n\t\t\t)[ 0 ];\n\t\t} else {\n\t\t\tselectedGlobalStyle = globalStyles.body[ 0 ];\n\t\t}\n\t\tupdatePreviewSettings(\n\t\t\tuseGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )\n\t\t);\n\t\tif ( selectedGlobalStyle ) {\n\t\t\tsetGlobalStyle( selectedGlobalStyle );\n\t\t}\n\n\t\tsetHomepagePattern( refactorPatterns( homepagePatternData ) );\n\n\t\tif ( currentData?.data.sitePages.length !== 0 ) {\n\t\t\tsetSelectedHomepage(\n\t\t\t\thomepagePatternList?.indexOf(\n\t\t\t\t\tcurrentData?.data.sitePages.homepage\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\tcurrentData.data.sitePages = {\n\t\t\t\t...currentData.data.sitePages,\n\t\t\t\thomepage: homepagePatternList[ 0 ],\n\t\t\t};\n\t\t\tsetCurrentOnboardingData( currentData );\n\t\t}\n\t\tsetisLoaded( true );\n\t}\n\n\tfunction saveDataForHomepage( idx ) {\n\t\tsetSelectedHomepage( idx );\n\t\tcurrentData.data.sitePages = {\n\t\t\t...currentData.data.sitePages,\n\t\t\thomepage: homepagePatternList[ idx ],\n\t\t};\n\t\tsetCurrentOnboardingData( currentData );\n\t}\n\n\tuseEffect( () => {\n\t\tif ( ! isLoaded ) {\n\t\t\tgetHomepagePatternsData();\n\t\t}\n\t}, [ isLoaded ] );\n\n\tfunction buildHomepagePreviews() {\n\t\treturn homepagePattern?.map( ( homepage, idx ) => {\n\t\t\tif ( homepage ) {\n\t\t\t\treturn (\n\t\t\t\t\t
\n\t\t\t\t\t\t saveDataForHomepage( idx ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t{ globalStyle && buildHomepagePreviews() }\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t);\n};\n\nexport default StepDesignHomepageMenu;\n","import apiFetch from '@wordpress/api-fetch';\n\nimport { onboardingRestURL } from './common';\n\nclass Event {\n\tconstructor( eventSlug, eventData = {} ) {\n\t\tthis.eventSlug = eventSlug;\n\t\tthis.eventData = eventData;\n\t}\n\n\tsend() {\n\t\tapiFetch( {\n\t\t\turl: onboardingRestURL( 'events' ),\n\t\t\tmethod: 'POST',\n\t\t\tdata: {\n\t\t\t\tslug: this.eventSlug,\n\t\t\t\tdata: this.eventData,\n\t\t\t},\n\t\t} ).catch( ( error ) => {\n\t\t\tconsole.error( error );\n\t\t} );\n\t}\n}\n\nexport default Event;\n"],"names":["__","HeadingWithSubHeading","title","subtitle","classNames","speak","useEffect","useLocation","NFD_ONBOARDING_EVENT_PREFIX","Event","BaseLayout","className","children","location","mainContainer","document","querySelector","speakRouteTitle","focus","preventScroll","stepID","pathname","previousStepID","window","nfdOnboarding","send","Animate","Fragment","InnerContainer","CommonLayout","isBgPrimary","isCentered","isVerticallyCentered","isContained","isPadded","isFadeIn","Container","useViewportMatch","useState","useSelect","useDispatch","getPatterns","getGlobalStyles","store","nfdOnboardingStore","VIEW_DESIGN_HOMEPAGE_MENU","LivePreviewSelectableCard","useGlobalStylesOutput","StepDesignHomepageMenu","homepagePatternList","homepagesList","isLoaded","setisLoaded","globalStyle","setGlobalStyle","homepagePattern","setHomepagePattern","selectedHomepage","setSelectedHomepage","isLargeViewport","currentStep","currentData","storedPreviewSettings","select","getStepFromPath","getCurrentOnboardingData","getPreviewSettings","setDrawerActiveView","setIsDrawerOpened","setIsSidebarOpened","updatePreviewSettings","setIsDrawerSuppressed","setCurrentOnboardingData","refactorPatterns","homepagePatternData","makeHomepagePattern","key","homepagePatterns","patternData","forEach","patternName","body","slug","content","push","getHomepagePatternsData","patternId","globalStyles","selectedGlobalStyle","data","theme","variation","filter","sitePages","length","indexOf","homepage","saveDataForHomepage","idx","buildHomepagePreviews","map","heading","subheading","apiFetch","onboardingRestURL","constructor","eventSlug","eventData","url","method","catch","error","console"],"sourceRoot":""} \ No newline at end of file diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 1bcb97f2a..c76de0769 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -60,7 +60,8 @@ const SelectableCard = ( {
-
+
+
} Date: Tue, 27 Sep 2022 16:55:10 +0530 Subject: [PATCH 08/18] Added Common changes --- src/OnboardingSPA/components/Drawer/stylesheet.scss | 3 +-- .../components/LivePreview/SelectableCard/index.js | 6 +++--- .../LivePreview/SelectableCard/stylesheet.scss | 10 ++++++++++ .../pages/Steps/DesignHomepageMenu/stylesheet.scss | 3 +-- .../pages/Steps/DesignThemeStyles/Menu/stylesheet.scss | 3 +-- 5 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index 97e7fd3af..bebb0e03f 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -273,7 +273,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 2; + z-index: 1; width: 40px; height: 40px; display: flex; @@ -298,7 +298,6 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__live-preview-container { position: relative; width: 90%; - overflow: hidden; align-items: center; border: 1px solid #B7B7B7; diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index c76de0769..2a852b04e 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 200000, + animationDuration = 3500, } ) => { const [isShown, setIsShown] = useState(false); @@ -43,7 +43,7 @@ const SelectableCard = ( {
@@ -54,7 +54,7 @@ const SelectableCard = ( { />
-
+
{isShown ? null :
diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss index 6f6724513..cdbffaeb6 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/stylesheet.scss @@ -113,6 +113,16 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } } +.live-preview { + &-selected-check { + z-index: 2 !important; + } + + &-container { + overflow: hidden; + } +} + .is-skeleton { width: 100%; height: 100%; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss index 49bc66799..8ff866edf 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss @@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 2; + z-index: 1; width: 40px; height: 40px; display: flex; @@ -82,7 +82,6 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__live-preview-container { position: relative; width: 90%; - overflow: hidden; align-items: center; border: 1px solid #e3dfdf; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss index 8b89a9423..4b6a6dc09 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss @@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 2; + z-index: 1; width: 40px; height: 40px; display: flex; @@ -83,7 +83,6 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__live-preview-container { position: relative; width: 90%; - overflow: hidden; align-items: center; border: 1px solid #e3dfdf; From f9bed93b0ffe846141df9dab64eaf155109f2174 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 27 Sep 2022 16:57:30 +0530 Subject: [PATCH 09/18] Reduced default animation time --- .../components/LivePreview/SelectableCard/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 2a852b04e..5c95b4854 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -12,7 +12,7 @@ const SelectableCard = ( { previewSettings, overlay = false, onClick = false, - animationDuration = 3500, + animationDuration = 2500, } ) => { const [isShown, setIsShown] = useState(false); @@ -43,7 +43,7 @@ const SelectableCard = ( {
From 5d8f482883b891e1baaa1f42ae2090aa94b164ca Mon Sep 17 00:00:00 2001 From: Allen Benny <48691514+officiallygod@users.noreply.github.com> Date: Tue, 27 Sep 2022 16:58:00 +0530 Subject: [PATCH 10/18] Delete build/0.2.1 directory --- ...pages_Steps_DesignHomepageMenu_index_js.js | 392 ------------------ ...s_Steps_DesignHomepageMenu_index_js.js.map | 1 - 2 files changed, 393 deletions(-) delete mode 100644 build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js delete mode 100644 build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map diff --git a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js deleted file mode 100644 index 25785374f..000000000 --- a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js +++ /dev/null @@ -1,392 +0,0 @@ -"use strict"; -(self["webpackChunknewfold_Onboarding"] = self["webpackChunknewfold_Onboarding"] || []).push([["src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js"],{ - -/***/ "./src/OnboardingSPA/components/HeadingWithSubHeading/index.js": -/*!*********************************************************************!*\ - !*** ./src/OnboardingSPA/components/HeadingWithSubHeading/index.js ***! - \*********************************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n"); -/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__); - - -/** - * Interface Cards with standard design. - * - * @returns - */ - -const HeadingWithSubHeading = _ref => { - let { - title, - subtitle - } = _ref; - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { - className: "nfd-main-heading" - }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h2", { - className: "nfd-main-heading__title" - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)(title, "wp-module-onboarding")), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("h3", { - className: "nfd-main-heading__subtitle" - }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)(subtitle, "wp-module-onboarding"))); -}; - -/* harmony default export */ __webpack_exports__["default"] = (HeadingWithSubHeading); - -/***/ }), - -/***/ "./src/OnboardingSPA/components/Layouts/Base.js": -/*!******************************************************!*\ - !*** ./src/OnboardingSPA/components/Layouts/Base.js ***! - \******************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); -/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/a11y */ "@wordpress/a11y"); -/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/index.js"); -/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../constants */ "./src/constants.js"); -/* harmony import */ var _utils_api_events__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/api/events */ "./src/OnboardingSPA/utils/api/events.js"); - - - - - - - -/** - * The Base Layout has no prescribed styles, only shared functionality like focus-management and analytics. - * - * @param {object} props - * @returns - */ - -const BaseLayout = _ref => { - let { - className = 'nfd-onboarding-layout__base', - children - } = _ref; - const location = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_5__.useLocation)(); - const mainContainer = document.querySelector('.nfd-onboard-content'); - - const speakRouteTitle = function (location) { - let title = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Showing new Onboarding Page'; - // [TODO]: Determine if some routes should not speak the title - (0,_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__.speak)(title, 'assertive'); - }; - - (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { - mainContainer === null || mainContainer === void 0 ? void 0 : mainContainer.focus({ - preventScroll: true - }); - speakRouteTitle(location, 'Override'); - new _utils_api_events__WEBPACK_IMPORTED_MODULE_4__["default"](`${_constants__WEBPACK_IMPORTED_MODULE_3__.NFD_ONBOARDING_EVENT_PREFIX}-pageview`, { - stepID: location.pathname, - previousStepID: window.nfdOnboarding.previousStepID - }).send(); - window.nfdOnboarding.previousStepID = location.pathname; - }, [location.pathname]); - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { - className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('nfd-onboarding-layout', className) - }, children); -}; - -/* harmony default export */ __webpack_exports__["default"] = (BaseLayout); - -/***/ }), - -/***/ "./src/OnboardingSPA/components/Layouts/Common.js": -/*!********************************************************!*\ - !*** ./src/OnboardingSPA/components/Layouts/Common.js ***! - \********************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components"); -/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _Base__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Base */ "./src/OnboardingSPA/components/Layouts/Base.js"); -/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js"); -/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__); - - - - - -/** - * - * @param {*} param0 - * @returns - */ - -const InnerContainer = _ref => { - let { - children - } = _ref; - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("section", { - className: "is-contained" - }, children); -}; -/** - * The Common Layout extends the Base Layout and applies structural styles and animations. - * - * @param {object} props - * @returns - */ - - -const CommonLayout = _ref2 => { - let { - className = '', - children, - isBgPrimary = false, - isCentered = false, - isVerticallyCentered = false, - isContained = false, - isPadded = false, - isFadeIn = true - } = _ref2; - const Container = isContained ? InnerContainer : _wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment; - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_Base__WEBPACK_IMPORTED_MODULE_2__["default"], { - className: classnames__WEBPACK_IMPORTED_MODULE_3___default()('nfd-onboarding-layout__common', className, { - 'is-layout-fade-in': isFadeIn - }, { - 'is-bg-primary': isBgPrimary - }, { - 'is-centered': isCentered - }, { - 'is-vertically-centered': isVerticallyCentered - }, { - 'is-padded': isPadded - }) - }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Container, null, children)); -}; - -/* harmony default export */ __webpack_exports__["default"] = (CommonLayout); - -/***/ }), - -/***/ "./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js": -/*!*******************************************************************!*\ - !*** ./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js ***! - \*******************************************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element"); -/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose"); -/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router/index.js"); -/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data"); -/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var _utils_api_patterns__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../utils/api/patterns */ "./src/OnboardingSPA/utils/api/patterns.js"); -/* harmony import */ var _utils_api_themes__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../utils/api/themes */ "./src/OnboardingSPA/utils/api/themes.js"); -/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../store */ "./src/OnboardingSPA/store/index.js"); -/* harmony import */ var _components_Layouts_Common__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../components/Layouts/Common */ "./src/OnboardingSPA/components/Layouts/Common.js"); -/* harmony import */ var _constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../constants */ "./src/constants.js"); -/* harmony import */ var _components_LivePreview__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../components/LivePreview */ "./src/OnboardingSPA/components/LivePreview/index.js"); -/* harmony import */ var _components_HeadingWithSubHeading__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../components/HeadingWithSubHeading */ "./src/OnboardingSPA/components/HeadingWithSubHeading/index.js"); -/* harmony import */ var _utils_global_styles_use_global_styles_output__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../utils/global-styles/use-global-styles-output */ "./src/OnboardingSPA/utils/global-styles/use-global-styles-output.js"); - - - - - - - - - - - - - - -const StepDesignHomepageMenu = () => { - const homepagePatternList = ['homepage-1', 'homepage-2', 'homepage-3']; - const homepagesList = { - 'homepage-1': ['site-header-left-logo-navigation-inline', 'homepage-1', 'site-footer'], - 'homepage-2': ['site-header-left-logo-navigation-inline', 'homepage-2', 'site-footer'], - 'homepage-3': ['site-header-left-logo-navigation-inline', 'homepage-3', 'site-footer'] - }; - const location = (0,react_router_dom__WEBPACK_IMPORTED_MODULE_11__.useLocation)(); - const [isLoaded, setisLoaded] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false); - const [globalStyle, setGlobalStyle] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(); - const [homepagePattern, setHomepagePattern] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(); - const [selectedHomepage, setSelectedHomepage] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(0); - const isLargeViewport = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__.useViewportMatch)('medium'); - const { - currentStep, - currentData, - storedPreviewSettings - } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useSelect)(select => { - return { - currentStep: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getStepFromPath(location.pathname), - currentData: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getCurrentOnboardingData(), - storedPreviewSettings: select(_store__WEBPACK_IMPORTED_MODULE_5__.store).getPreviewSettings() - }; - }, []); - const { - setDrawerActiveView, - setIsDrawerOpened, - setIsSidebarOpened, - updatePreviewSettings, - setIsDrawerSuppressed, - setCurrentOnboardingData - } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__.useDispatch)(_store__WEBPACK_IMPORTED_MODULE_5__.store); - (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); - } - - setIsSidebarOpened(false); - setIsDrawerSuppressed(false); - setDrawerActiveView(_constants__WEBPACK_IMPORTED_MODULE_7__.VIEW_DESIGN_HOMEPAGE_MENU); - }, []); - - function refactorPatterns(homepagePatternData) { - const makeHomepagePattern = []; - - for (const key in homepagesList) { - const homepagePatterns = homepagesList[key]; - let patternData = ''; - homepagePatterns.forEach(patternName => { - homepagePatternData === null || homepagePatternData === void 0 ? void 0 : homepagePatternData.body.forEach(homepagePatternData => { - if (homepagePatternData.slug === patternName) { - patternData += homepagePatternData.content; - } - }); - }); - makeHomepagePattern.push(patternData); - } - - return makeHomepagePattern; - } - - async function getHomepagePatternsData() { - const homepagePatternData = await (0,_utils_api_patterns__WEBPACK_IMPORTED_MODULE_3__.getPatterns)(currentStep.patternId); - const globalStyles = await (0,_utils_api_themes__WEBPACK_IMPORTED_MODULE_4__.getGlobalStyles)(); - let selectedGlobalStyle; - - if (currentData.data.theme.variation) { - selectedGlobalStyle = globalStyles.body.filter(globalStyle => globalStyle.title === currentData.data.theme.variation)[0]; - } else { - selectedGlobalStyle = globalStyles.body[0]; - } - - updatePreviewSettings((0,_utils_global_styles_use_global_styles_output__WEBPACK_IMPORTED_MODULE_10__.useGlobalStylesOutput)(selectedGlobalStyle, storedPreviewSettings)); - - if (selectedGlobalStyle) { - setGlobalStyle(selectedGlobalStyle); - } - - setHomepagePattern(refactorPatterns(homepagePatternData)); - - if ((currentData === null || currentData === void 0 ? void 0 : currentData.data.sitePages.length) !== 0) { - setSelectedHomepage(homepagePatternList === null || homepagePatternList === void 0 ? void 0 : homepagePatternList.indexOf(currentData === null || currentData === void 0 ? void 0 : currentData.data.sitePages.homepage)); - } else { - currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[0] - }; - setCurrentOnboardingData(currentData); - } - - setisLoaded(true); - } - - function saveDataForHomepage(idx) { - setSelectedHomepage(idx); - currentData.data.sitePages = { ...currentData.data.sitePages, - homepage: homepagePatternList[idx] - }; - setCurrentOnboardingData(currentData); - } - - (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => { - if (!isLoaded) { - getHomepagePatternsData(); - } - }, [isLoaded]); - - function buildHomepagePreviews() { - return homepagePattern === null || homepagePattern === void 0 ? void 0 : homepagePattern.map((homepage, idx) => { - if (homepage) { - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { - className: "homepage_preview__list" - }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_LivePreview__WEBPACK_IMPORTED_MODULE_8__.LivePreviewSelectableCard, { - className: 'homepage_preview__list__item', - selected: idx === selectedHomepage, - blockGrammer: homepage, - viewportWidth: 1200, - styling: 'custom', - previewSettings: globalStyle, - overlay: false, - onClick: () => saveDataForHomepage(idx) - })); - } - }); - } - - return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_Layouts_Common__WEBPACK_IMPORTED_MODULE_6__["default"], null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { - className: "homepage_preview" - }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_components_HeadingWithSubHeading__WEBPACK_IMPORTED_MODULE_9__["default"], { - title: currentStep === null || currentStep === void 0 ? void 0 : currentStep.heading, - subtitle: currentStep === null || currentStep === void 0 ? void 0 : currentStep.subheading - }), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", { - className: "theme-styles-menu__list" - }, globalStyle && buildHomepagePreviews()))); -}; - -/* harmony default export */ __webpack_exports__["default"] = (StepDesignHomepageMenu); - -/***/ }), - -/***/ "./src/OnboardingSPA/utils/api/events.js": -/*!***********************************************!*\ - !*** ./src/OnboardingSPA/utils/api/events.js ***! - \***********************************************/ -/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { - -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/api-fetch */ "@wordpress/api-fetch"); -/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./src/OnboardingSPA/utils/api/common.js"); - - - -class Event { - constructor(eventSlug) { - let eventData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - this.eventSlug = eventSlug; - this.eventData = eventData; - } - - send() { - _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_0___default()({ - url: (0,_common__WEBPACK_IMPORTED_MODULE_1__.onboardingRestURL)('events'), - method: 'POST', - data: { - slug: this.eventSlug, - data: this.eventData - } - }).catch(error => { - console.error(error); - }); - } - -} - -/* harmony default export */ __webpack_exports__["default"] = (Event); - -/***/ }) - -}]); -//# sourceMappingURL=src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map \ No newline at end of file diff --git a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map b/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map deleted file mode 100644 index 137c55758..000000000 --- a/build/0.2.1/src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"src_OnboardingSPA_pages_Steps_DesignHomepageMenu_index_js.js","mappings":";;;;;;;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,qBAAqB,GAAG,QAAyB;AAAA,MAAxB;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAwB;AAEtD,SACC;AAAK,aAAS,EAAC;AAAf,KACC;AAAI,aAAS,EAAC;AAAd,KAAyCH,mDAAE,CAC1CE,KAD0C,EAE1C,sBAF0C,CAA3C,CADD,EAKC;AAAI,aAAS,EAAC;AAAd,KAA4CF,mDAAE,CAC7CG,QAD6C,EAE7C,sBAF6C,CAA9C,CALD,CADD;AAYA,CAdD;;AAgBA,+DAAeF,qBAAf;;;;;;;;;;;;;;;;;;;;;ACvBA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMS,UAAU,GAAG,QAGb;AAAA,MAHc;AACnBC,IAAAA,SAAS,GAAG,6BADO;AAEnBC,IAAAA;AAFmB,GAGd;AACL,QAAMC,QAAQ,GAAGN,6DAAW,EAA5B;AACA,QAAMO,aAAa,GAAGC,QAAQ,CAACC,aAAT,CAAuB,sBAAvB,CAAtB;;AAEA,QAAMC,eAAe,GAAG,UACvBJ,QADuB,EAGnB;AAAA,QADJX,KACI,uEADI,6BACJ;AACJ;AACAG,IAAAA,sDAAK,CAACH,KAAD,EAAQ,WAAR,CAAL;AACA,GAND;;AAQAI,EAAAA,6DAAS,CAAC,MAAM;AACfQ,IAAAA,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEI,KAAf,CAAqB;AAAEC,MAAAA,aAAa,EAAE;AAAjB,KAArB;AACAF,IAAAA,eAAe,CAACJ,QAAD,EAAW,UAAX,CAAf;AACQ,QAAIJ,yDAAJ,CAAW,GAAED,mEAA4B,WAAzC,EAAqD;AAChDY,MAAAA,MAAM,EAAEP,QAAQ,CAACQ,QAD+B;AAEhDC,MAAAA,cAAc,EAAEC,MAAM,CAACC,aAAP,CAAqBF;AAFW,KAArD,EAGGG,IAHH;AAIAF,IAAAA,MAAM,CAACC,aAAP,CAAqBF,cAArB,GAAsCT,QAAQ,CAACQ,QAA/C;AACR,GARQ,EAQN,CAACR,QAAQ,CAACQ,QAAV,CARM,CAAT;AAUA,SACC;AAAK,aAAS,EAAEjB,iDAAU,CAAC,uBAAD,EAA0BO,SAA1B;AAA1B,KACEC,QADF,CADD;AAKA,CA9BD;;AAgCA,+DAAeF,UAAf;;;;;;;;;;;;;;;;;;;AC9CA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMkB,cAAc,GAAG,QAAkB;AAAA,MAAjB;AAAEhB,IAAAA;AAAF,GAAiB;AACxC,SAAO;AAAS,aAAS,EAAC;AAAnB,KAAmCA,QAAnC,CAAP;AACA,CAFD;AAIA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMiB,YAAY,GAAG,SASf;AAAA,MATgB;AACrBlB,IAAAA,SAAS,GAAG,EADS;AAErBC,IAAAA,QAFqB;AAGrBkB,IAAAA,WAAW,GAAG,KAHO;AAIrBC,IAAAA,UAAU,GAAG,KAJQ;AAKrBC,IAAAA,oBAAoB,GAAG,KALF;AAMrBC,IAAAA,WAAW,GAAG,KANO;AAOrBC,IAAAA,QAAQ,GAAG,KAPU;AAQrBC,IAAAA,QAAQ,GAAG;AARU,GAShB;AACL,QAAMC,SAAS,GAAGH,WAAW,GAAGL,cAAH,GAAoBD,wDAAjD;AACA,SACC,kEAAC,6CAAD;AACC,aAAS,EAAEvB,iDAAU,CACpB,+BADoB,EAEpBO,SAFoB,EAGpB;AAAE,2BAAqBwB;AAAvB,KAHoB,EAIpB;AAAE,uBAAiBL;AAAnB,KAJoB,EAKpB;AAAE,qBAAeC;AAAjB,KALoB,EAMpB;AAAE,gCAA0BC;AAA5B,KANoB,EAOpB;AAAE,mBAAaE;AAAf,KAPoB;AADtB,KAWC,kEAAC,SAAD,QAAYtB,QAAZ,CAXD,CADD;AAeA,CA1BD;;AA4BA,+DAAeiB,YAAf;;;;;;;;;;;;;;;;;;;;;;;;;;;AChDA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMmB,sBAAsB,GAAG,MAAM;AACpC,QAAMC,mBAAmB,GAAG,CAAE,YAAF,EAAgB,YAAhB,EAA8B,YAA9B,CAA5B;AAEA,QAAMC,aAAa,GAAG;AACrB,kBAAc,CACb,yCADa,EAEb,YAFa,EAGb,aAHa,CADO;AAMrB,kBAAc,CACb,yCADa,EAEb,YAFa,EAGb,aAHa,CANO;AAWrB,kBAAc,CACb,yCADa,EAEb,YAFa,EAGb,aAHa;AAXO,GAAtB;AAkBA,QAAMrC,QAAQ,GAAGN,8DAAW,EAA5B;AACA,QAAM,CAAE4C,QAAF,EAAYC,WAAZ,IAA4Bd,4DAAQ,CAAE,KAAF,CAA1C;AACA,QAAM,CAAEe,WAAF,EAAeC,cAAf,IAAkChB,4DAAQ,EAAhD;AACA,QAAM,CAAEiB,eAAF,EAAmBC,kBAAnB,IAA0ClB,4DAAQ,EAAxD;AACA,QAAM,CAAEmB,gBAAF,EAAoBC,mBAApB,IAA4CpB,4DAAQ,CAAE,CAAF,CAA1D;AAEA,QAAMqB,eAAe,GAAGtB,oEAAgB,CAAE,QAAF,CAAxC;AAEA,QAAM;AAAEuB,IAAAA,WAAF;AAAeC,IAAAA,WAAf;AAA4BC,IAAAA;AAA5B,MAAsDvB,0DAAS,CAClEwB,MAAF,IAAc;AACb,WAAO;AACNH,MAAAA,WAAW,EAAEG,MAAM,CAAEnB,yCAAF,CAAN,CAA6BoB,eAA7B,CACZnD,QAAQ,CAACQ,QADG,CADP;AAINwC,MAAAA,WAAW,EACVE,MAAM,CAAEnB,yCAAF,CAAN,CAA6BqB,wBAA7B,EALK;AAMNH,MAAAA,qBAAqB,EACpBC,MAAM,CAAEnB,yCAAF,CAAN,CAA6BsB,kBAA7B;AAPK,KAAP;AASA,GAXmE,EAYpE,EAZoE,CAArE;AAeA,QAAM;AACLC,IAAAA,mBADK;AAELC,IAAAA,iBAFK;AAGLC,IAAAA,kBAHK;AAILC,IAAAA,qBAJK;AAKLC,IAAAA,qBALK;AAMLC,IAAAA;AANK,MAOFhC,4DAAW,CAAEI,yCAAF,CAPf;AASAtC,EAAAA,6DAAS,CAAE,MAAM;AAChB,QAAKqD,eAAL,EAAuB;AACtBS,MAAAA,iBAAiB,CAAE,IAAF,CAAjB;AACA;;AACDC,IAAAA,kBAAkB,CAAE,KAAF,CAAlB;AACAE,IAAAA,qBAAqB,CAAE,KAAF,CAArB;AACAJ,IAAAA,mBAAmB,CAAEtB,iEAAF,CAAnB;AACA,GAPQ,EAON,EAPM,CAAT;;AASA,WAAS4B,gBAAT,CAA2BC,mBAA3B,EAAiD;AAChD,UAAMC,mBAAmB,GAAG,EAA5B;;AAEA,SAAM,MAAMC,GAAZ,IAAmB1B,aAAnB,EAAmC;AAClC,YAAM2B,gBAAgB,GAAG3B,aAAa,CAAE0B,GAAF,CAAtC;AACA,UAAIE,WAAW,GAAG,EAAlB;AACAD,MAAAA,gBAAgB,CAACE,OAAjB,CAA4BC,WAAF,IAAmB;AAC5CN,QAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEO,IAArB,CAA0BF,OAA1B,CAAqCL,mBAAF,IAA2B;AAC7D,cAAKA,mBAAmB,CAACQ,IAApB,KAA6BF,WAAlC,EAAgD;AAC/CF,YAAAA,WAAW,IAAIJ,mBAAmB,CAACS,OAAnC;AACA;AACD,SAJD;AAKA,OAND;AAOAR,MAAAA,mBAAmB,CAACS,IAApB,CAA0BN,WAA1B;AACA;;AAED,WAAOH,mBAAP;AACA;;AAED,iBAAeU,uBAAf,GAAyC;AACxC,UAAMX,mBAAmB,GAAG,MAAMjC,gEAAW,CAAEmB,WAAW,CAAC0B,SAAd,CAA7C;AACA,UAAMC,YAAY,GAAG,MAAM7C,kEAAe,EAA1C;AACA,QAAI8C,mBAAJ;;AACA,QAAK3B,WAAW,CAAC4B,IAAZ,CAAiBC,KAAjB,CAAuBC,SAA5B,EAAwC;AACvCH,MAAAA,mBAAmB,GAAGD,YAAY,CAACN,IAAb,CAAkBW,MAAlB,CACnBvC,WAAF,IACCA,WAAW,CAACnD,KAAZ,KAAsB2D,WAAW,CAAC4B,IAAZ,CAAiBC,KAAjB,CAAuBC,SAFzB,EAGnB,CAHmB,CAAtB;AAIA,KALD,MAKO;AACNH,MAAAA,mBAAmB,GAAGD,YAAY,CAACN,IAAb,CAAmB,CAAnB,CAAtB;AACA;;AACDX,IAAAA,qBAAqB,CACpBvB,qGAAqB,CAAEyC,mBAAF,EAAuB1B,qBAAvB,CADD,CAArB;;AAGA,QAAK0B,mBAAL,EAA2B;AAC1BlC,MAAAA,cAAc,CAAEkC,mBAAF,CAAd;AACA;;AAEDhC,IAAAA,kBAAkB,CAAEiB,gBAAgB,CAAEC,mBAAF,CAAlB,CAAlB;;AAEA,QAAK,CAAAb,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAE4B,IAAb,CAAkBI,SAAlB,CAA4BC,MAA5B,MAAuC,CAA5C,EAAgD;AAC/CpC,MAAAA,mBAAmB,CAClBT,mBADkB,aAClBA,mBADkB,uBAClBA,mBAAmB,CAAE8C,OAArB,CACClC,WADD,aACCA,WADD,uBACCA,WAAW,CAAE4B,IAAb,CAAkBI,SAAlB,CAA4BG,QAD7B,CADkB,CAAnB;AAKA,KAND,MAMO;AACNnC,MAAAA,WAAW,CAAC4B,IAAZ,CAAiBI,SAAjB,GAA6B,EAC5B,GAAGhC,WAAW,CAAC4B,IAAZ,CAAiBI,SADQ;AAE5BG,QAAAA,QAAQ,EAAE/C,mBAAmB,CAAE,CAAF;AAFD,OAA7B;AAIAuB,MAAAA,wBAAwB,CAAEX,WAAF,CAAxB;AACA;;AACDT,IAAAA,WAAW,CAAE,IAAF,CAAX;AACA;;AAED,WAAS6C,mBAAT,CAA8BC,GAA9B,EAAoC;AACnCxC,IAAAA,mBAAmB,CAAEwC,GAAF,CAAnB;AACArC,IAAAA,WAAW,CAAC4B,IAAZ,CAAiBI,SAAjB,GAA6B,EAC5B,GAAGhC,WAAW,CAAC4B,IAAZ,CAAiBI,SADQ;AAE5BG,MAAAA,QAAQ,EAAE/C,mBAAmB,CAAEiD,GAAF;AAFD,KAA7B;AAIA1B,IAAAA,wBAAwB,CAAEX,WAAF,CAAxB;AACA;;AAEDvD,EAAAA,6DAAS,CAAE,MAAM;AAChB,QAAK,CAAE6C,QAAP,EAAkB;AACjBkC,MAAAA,uBAAuB;AACvB;AACD,GAJQ,EAIN,CAAElC,QAAF,CAJM,CAAT;;AAMA,WAASgD,qBAAT,GAAiC;AAChC,WAAO5C,eAAP,aAAOA,eAAP,uBAAOA,eAAe,CAAE6C,GAAjB,CAAsB,CAAEJ,QAAF,EAAYE,GAAZ,KAAqB;AACjD,UAAKF,QAAL,EAAgB;AACf,eACC;AAAK,mBAAS,EAAC;AAAf,WACC,kEAAC,8EAAD;AACC,mBAAS,EAAG,8BADb;AAEC,kBAAQ,EAAGE,GAAG,KAAKzC,gBAFpB;AAGC,sBAAY,EAAGuC,QAHhB;AAIC,uBAAa,EAAG,IAJjB;AAKC,iBAAO,EAAG,QALX;AAMC,yBAAe,EAAG3C,WANnB;AAOC,iBAAO,EAAG,KAPX;AAQC,iBAAO,EAAG,MAAM4C,mBAAmB,CAAEC,GAAF;AARpC,UADD,CADD;AAcA;AACD,KAjBM,CAAP;AAkBA;;AAED,SACC,kEAAC,kEAAD,QACC;AAAK,aAAS,EAAC;AAAf,KACC,kEAAC,yEAAD;AACC,SAAK,EAAGtC,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEyC,OADtB;AAEC,YAAQ,EAAGzC,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAE0C;AAFzB,IADD,EAKC;AAAK,aAAS,EAAC;AAAf,KACGjD,WAAW,IAAI8C,qBAAqB,EADvC,CALD,CADD,CADD;AAaA,CAvKD;;AAyKA,+DAAenD,sBAAf;;;;;;;;;;;;;;ACvLA;AAEA;;AAEA,MAAMvC,KAAN,CAAY;AACXgG,EAAAA,WAAW,CAAEC,SAAF,EAA8B;AAAA,QAAjBC,SAAiB,uEAAL,EAAK;AACxC,SAAKD,SAAL,GAAiBA,SAAjB;AACA,SAAKC,SAAL,GAAiBA,SAAjB;AACA;;AAEDlF,EAAAA,IAAI,GAAG;AACN8E,IAAAA,2DAAQ,CAAE;AACTK,MAAAA,GAAG,EAAEJ,0DAAiB,CAAE,QAAF,CADb;AAETK,MAAAA,MAAM,EAAE,MAFC;AAGTpB,MAAAA,IAAI,EAAE;AACLP,QAAAA,IAAI,EAAE,KAAKwB,SADN;AAELjB,QAAAA,IAAI,EAAE,KAAKkB;AAFN;AAHG,KAAF,CAAR,CAOIG,KAPJ,CAOaC,KAAF,IAAa;AACvBC,MAAAA,OAAO,CAACD,KAAR,CAAeA,KAAf;AACA,KATD;AAUA;;AAjBU;;AAoBZ,+DAAetG,KAAf","sources":["webpack://newfold.Onboarding/./src/OnboardingSPA/components/HeadingWithSubHeading/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Layouts/Base.js","webpack://newfold.Onboarding/./src/OnboardingSPA/components/Layouts/Common.js","webpack://newfold.Onboarding/./src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js","webpack://newfold.Onboarding/./src/OnboardingSPA/utils/api/events.js"],"sourcesContent":["import { __ } from '@wordpress/i18n';\n\n/**\n * Interface Cards with standard design.\n *\n * @returns\n */\nconst HeadingWithSubHeading = ({ title, subtitle }) => {\n\n\treturn (\n\t\t
\n\t\t\t

{__(\n\t\t\t\ttitle,\n\t\t\t\t\"wp-module-onboarding\"\n\t\t\t)}

\n\t\t\t

{__(\n\t\t\t\tsubtitle,\n\t\t\t\t\"wp-module-onboarding\"\n\t\t\t)}

\n\t\t
\n\t);\n};\n\nexport default HeadingWithSubHeading;\n","import classNames from 'classnames';\nimport { speak } from '@wordpress/a11y';\nimport { useEffect } from '@wordpress/element';\nimport { useLocation } from 'react-router-dom';\n\nimport { NFD_ONBOARDING_EVENT_PREFIX } from '../../../constants';\nimport Event from '../../utils/api/events';\n\n/**\n * The Base Layout has no prescribed styles, only shared functionality like focus-management and analytics.\n *\n * @param {object} props\n * @returns\n */\nconst BaseLayout = ({\n\tclassName = 'nfd-onboarding-layout__base',\n\tchildren,\n}) => {\n\tconst location = useLocation();\n\tconst mainContainer = document.querySelector('.nfd-onboard-content');\n\n\tconst speakRouteTitle = (\n\t\tlocation,\n\t\ttitle = 'Showing new Onboarding Page'\n\t) => {\n\t\t// [TODO]: Determine if some routes should not speak the title\n\t\tspeak(title, 'assertive');\n\t};\n\n\tuseEffect(() => {\n\t\tmainContainer?.focus({ preventScroll: true });\n\t\tspeakRouteTitle(location, 'Override');\n new Event(`${NFD_ONBOARDING_EVENT_PREFIX}-pageview`, {\n stepID: location.pathname,\n previousStepID: window.nfdOnboarding.previousStepID\n }).send();\n window.nfdOnboarding.previousStepID = location.pathname\n\t}, [location.pathname]);\n\n\treturn (\n\t\t
\n\t\t\t{children}\n\t\t
\n\t);\n};\n\nexport default BaseLayout;\n","import { Animate } from '@wordpress/components';\nimport BaseLayout from './Base';\nimport { Fragment } from '@wordpress/element';\nimport classNames from 'classnames';\n\n/**\n *\n * @param {*} param0\n * @returns\n */\nconst InnerContainer = ({ children }) => {\n\treturn
{children}
;\n};\n\n/**\n * The Common Layout extends the Base Layout and applies structural styles and animations.\n *\n * @param {object} props\n * @returns\n */\nconst CommonLayout = ({\n\tclassName = '',\n\tchildren,\n\tisBgPrimary = false,\n\tisCentered = false,\n\tisVerticallyCentered = false,\n\tisContained = false,\n\tisPadded = false,\n\tisFadeIn = true,\n}) => {\n\tconst Container = isContained ? InnerContainer : Fragment;\n\treturn (\n\t\t\n\t\t\t{children}\n\t\t\n\t);\n};\n\nexport default CommonLayout;\n","import { useViewportMatch } from '@wordpress/compose';\nimport { useLocation } from 'react-router-dom';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\nimport { getPatterns } from '../../../utils/api/patterns';\nimport { getGlobalStyles } from '../../../utils/api/themes';\nimport { store as nfdOnboardingStore } from '../../../store';\nimport CommonLayout from '../../../components/Layouts/Common';\nimport { VIEW_DESIGN_HOMEPAGE_MENU } from '../../../../constants';\nimport { LivePreviewSelectableCard } from '../../../components/LivePreview';\nimport HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';\nimport { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';\n\nconst StepDesignHomepageMenu = () => {\n\tconst homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ];\n\n\tconst homepagesList = {\n\t\t'homepage-1': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-1',\n\t\t\t'site-footer',\n\t\t],\n\t\t'homepage-2': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-2',\n\t\t\t'site-footer',\n\t\t],\n\t\t'homepage-3': [\n\t\t\t'site-header-left-logo-navigation-inline',\n\t\t\t'homepage-3',\n\t\t\t'site-footer',\n\t\t],\n\t};\n\n\tconst location = useLocation();\n\tconst [ isLoaded, setisLoaded ] = useState( false );\n\tconst [ globalStyle, setGlobalStyle ] = useState();\n\tconst [ homepagePattern, setHomepagePattern ] = useState();\n\tconst [ selectedHomepage, setSelectedHomepage ] = useState( 0 );\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst { currentStep, currentData, storedPreviewSettings } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tcurrentStep: select( nfdOnboardingStore ).getStepFromPath(\n\t\t\t\t\tlocation.pathname\n\t\t\t\t),\n\t\t\t\tcurrentData:\n\t\t\t\t\tselect( nfdOnboardingStore ).getCurrentOnboardingData(),\n\t\t\t\tstoredPreviewSettings:\n\t\t\t\t\tselect( nfdOnboardingStore ).getPreviewSettings(),\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\n\tconst {\n\t\tsetDrawerActiveView,\n\t\tsetIsDrawerOpened,\n\t\tsetIsSidebarOpened,\n\t\tupdatePreviewSettings,\n\t\tsetIsDrawerSuppressed,\n\t\tsetCurrentOnboardingData,\n\t} = useDispatch( nfdOnboardingStore );\n\n\tuseEffect( () => {\n\t\tif ( isLargeViewport ) {\n\t\t\tsetIsDrawerOpened( true );\n\t\t}\n\t\tsetIsSidebarOpened( false );\n\t\tsetIsDrawerSuppressed( false );\n\t\tsetDrawerActiveView( VIEW_DESIGN_HOMEPAGE_MENU );\n\t}, [] );\n\n\tfunction refactorPatterns( homepagePatternData ) {\n\t\tconst makeHomepagePattern = [];\n\n\t\tfor ( const key in homepagesList ) {\n\t\t\tconst homepagePatterns = homepagesList[ key ];\n\t\t\tlet patternData = '';\n\t\t\thomepagePatterns.forEach( ( patternName ) => {\n\t\t\t\thomepagePatternData?.body.forEach( ( homepagePatternData ) => {\n\t\t\t\t\tif ( homepagePatternData.slug === patternName ) {\n\t\t\t\t\t\tpatternData += homepagePatternData.content;\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} );\n\t\t\tmakeHomepagePattern.push( patternData );\n\t\t}\n\n\t\treturn makeHomepagePattern;\n\t}\n\n\tasync function getHomepagePatternsData() {\n\t\tconst homepagePatternData = await getPatterns( currentStep.patternId );\n\t\tconst globalStyles = await getGlobalStyles();\n\t\tlet selectedGlobalStyle;\n\t\tif ( currentData.data.theme.variation ) {\n\t\t\tselectedGlobalStyle = globalStyles.body.filter(\n\t\t\t\t( globalStyle ) =>\n\t\t\t\t\tglobalStyle.title === currentData.data.theme.variation\n\t\t\t)[ 0 ];\n\t\t} else {\n\t\t\tselectedGlobalStyle = globalStyles.body[ 0 ];\n\t\t}\n\t\tupdatePreviewSettings(\n\t\t\tuseGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )\n\t\t);\n\t\tif ( selectedGlobalStyle ) {\n\t\t\tsetGlobalStyle( selectedGlobalStyle );\n\t\t}\n\n\t\tsetHomepagePattern( refactorPatterns( homepagePatternData ) );\n\n\t\tif ( currentData?.data.sitePages.length !== 0 ) {\n\t\t\tsetSelectedHomepage(\n\t\t\t\thomepagePatternList?.indexOf(\n\t\t\t\t\tcurrentData?.data.sitePages.homepage\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\tcurrentData.data.sitePages = {\n\t\t\t\t...currentData.data.sitePages,\n\t\t\t\thomepage: homepagePatternList[ 0 ],\n\t\t\t};\n\t\t\tsetCurrentOnboardingData( currentData );\n\t\t}\n\t\tsetisLoaded( true );\n\t}\n\n\tfunction saveDataForHomepage( idx ) {\n\t\tsetSelectedHomepage( idx );\n\t\tcurrentData.data.sitePages = {\n\t\t\t...currentData.data.sitePages,\n\t\t\thomepage: homepagePatternList[ idx ],\n\t\t};\n\t\tsetCurrentOnboardingData( currentData );\n\t}\n\n\tuseEffect( () => {\n\t\tif ( ! isLoaded ) {\n\t\t\tgetHomepagePatternsData();\n\t\t}\n\t}, [ isLoaded ] );\n\n\tfunction buildHomepagePreviews() {\n\t\treturn homepagePattern?.map( ( homepage, idx ) => {\n\t\t\tif ( homepage ) {\n\t\t\t\treturn (\n\t\t\t\t\t
\n\t\t\t\t\t\t saveDataForHomepage( idx ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t
\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t{ globalStyle && buildHomepagePreviews() }\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t);\n};\n\nexport default StepDesignHomepageMenu;\n","import apiFetch from '@wordpress/api-fetch';\n\nimport { onboardingRestURL } from './common';\n\nclass Event {\n\tconstructor( eventSlug, eventData = {} ) {\n\t\tthis.eventSlug = eventSlug;\n\t\tthis.eventData = eventData;\n\t}\n\n\tsend() {\n\t\tapiFetch( {\n\t\t\turl: onboardingRestURL( 'events' ),\n\t\t\tmethod: 'POST',\n\t\t\tdata: {\n\t\t\t\tslug: this.eventSlug,\n\t\t\t\tdata: this.eventData,\n\t\t\t},\n\t\t} ).catch( ( error ) => {\n\t\t\tconsole.error( error );\n\t\t} );\n\t}\n}\n\nexport default Event;\n"],"names":["__","HeadingWithSubHeading","title","subtitle","classNames","speak","useEffect","useLocation","NFD_ONBOARDING_EVENT_PREFIX","Event","BaseLayout","className","children","location","mainContainer","document","querySelector","speakRouteTitle","focus","preventScroll","stepID","pathname","previousStepID","window","nfdOnboarding","send","Animate","Fragment","InnerContainer","CommonLayout","isBgPrimary","isCentered","isVerticallyCentered","isContained","isPadded","isFadeIn","Container","useViewportMatch","useState","useSelect","useDispatch","getPatterns","getGlobalStyles","store","nfdOnboardingStore","VIEW_DESIGN_HOMEPAGE_MENU","LivePreviewSelectableCard","useGlobalStylesOutput","StepDesignHomepageMenu","homepagePatternList","homepagesList","isLoaded","setisLoaded","globalStyle","setGlobalStyle","homepagePattern","setHomepagePattern","selectedHomepage","setSelectedHomepage","isLargeViewport","currentStep","currentData","storedPreviewSettings","select","getStepFromPath","getCurrentOnboardingData","getPreviewSettings","setDrawerActiveView","setIsDrawerOpened","setIsSidebarOpened","updatePreviewSettings","setIsDrawerSuppressed","setCurrentOnboardingData","refactorPatterns","homepagePatternData","makeHomepagePattern","key","homepagePatterns","patternData","forEach","patternName","body","slug","content","push","getHomepagePatternsData","patternId","globalStyles","selectedGlobalStyle","data","theme","variation","filter","sitePages","length","indexOf","homepage","saveDataForHomepage","idx","buildHomepagePreviews","map","heading","subheading","apiFetch","onboardingRestURL","constructor","eventSlug","eventData","url","method","catch","error","console"],"sourceRoot":""} \ No newline at end of file From 233c4163066a9601bbe7cd3ac523332980991a30 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 27 Sep 2022 17:07:32 +0530 Subject: [PATCH 11/18] Update index.js --- .../components/LivePreview/SelectableCard/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 5c95b4854..8ca696c71 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -43,7 +43,7 @@ const SelectableCard = ( {
From cc7773740fe989ebf2b48e76fea987b9e32eb480 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 27 Sep 2022 19:06:55 +0530 Subject: [PATCH 12/18] Changed the Skeleton to be shown on BlockPreview --- .../LivePreview/BlockPreview/index.js | 20 +++++++- .../LivePreview/BlockPreview/stylesheet.scss | 51 +++++++++++++++++++ .../LivePreview/SelectableCard/index.js | 19 +------ .../SelectableCard/stylesheet.scss | 41 --------------- .../Steps/DesignThemeStyles/Preview/index.js | 2 +- .../DesignThemeStyles/Preview/stylesheet.scss | 3 +- 6 files changed, 74 insertions(+), 62 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 97d2739e7..12e6e5df5 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -25,9 +25,18 @@ const BlockPreview = ( { viewportWidth = 1300, styling = 'large', previewSettings = false, + animationDuration = 2500, } ) => { const [ blocks, setBlocks ] = useState(); const [ settings, setSettings ] = useState(); + const [ isShown, setIsShown ] = useState(false); + + useEffect(() => { + const timer = setTimeout(() => { + setIsShown(true); + }, animationDuration); + return () => clearTimeout(timer); + }, [animationDuration]); const storedPreviewSettings = useSelect( ( select ) => select( nfdOnboardingStore ).getPreviewSettings(), @@ -53,7 +62,16 @@ const BlockPreview = ( { }, [ storedPreviewSettings ] ); return ( -
+
+ {isShown ? null : +
+
+
+
+
+
+
+
} { settings && ( { - const [isShown, setIsShown] = useState(false); - - useEffect(() => { - const timer = setTimeout(() => { - setIsShown(true); - }, animationDuration); - return () => clearTimeout(timer); - }, [animationDuration]); - return (
- {isShown ? null : -
-
-
-
-
-
-
-
} { overlay && (
{
-
+
{ pattern && ( Date: Tue, 27 Sep 2022 19:09:17 +0530 Subject: [PATCH 13/18] Update stylesheet.scss --- .../components/LivePreview/BlockPreview/stylesheet.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index 0c4a89c54..270360926 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -1,4 +1,5 @@ $main-color-grey: var(--nfd-onboarding-light-gray); +$main-color-grey-other: #e2e2e2; $main-color-light-rgb: var(--nfd-onboarding-white-rgb); .live-preview { @@ -34,7 +35,7 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); &--box { width: 90%; margin: 12px; - background: #e2e2e2; + background: $main-color-grey-other; &-header { height: 10%; From 59c0a6caaa4e56fc435691ffa00c5561c8f01a70 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Fri, 30 Sep 2022 15:11:15 +0530 Subject: [PATCH 14/18] Fixed Code Review comments --- .../LivePreview/BlockPreview/index.js | 26 +++--- .../LivePreview/BlockPreview/stylesheet.scss | 82 +++++++++---------- .../LivePreview/SelectableCard/index.js | 4 +- 3 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 12e6e5df5..588c6f24b 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -25,18 +25,18 @@ const BlockPreview = ( { viewportWidth = 1300, styling = 'large', previewSettings = false, - animationDuration = 2500, + skeletonLoadingTime = 2500, } ) => { const [ blocks, setBlocks ] = useState(); const [ settings, setSettings ] = useState(); - const [ isShown, setIsShown ] = useState(false); + const [ loading, setIsLoading ] = useState(true); useEffect(() => { const timer = setTimeout(() => { - setIsShown(true); - }, animationDuration); + setIsLoading(false); + }, skeletonLoadingTime); return () => clearTimeout(timer); - }, [animationDuration]); + }, [skeletonLoadingTime]); const storedPreviewSettings = useSelect( ( select ) => select( nfdOnboardingStore ).getPreviewSettings(), @@ -62,15 +62,15 @@ const BlockPreview = ( { }, [ storedPreviewSettings ] ); return ( -
- {isShown ? null : -
-
-
+
+ { loading && +
+
+
-
-
-
+
+
+
} { settings && ( { return ( @@ -51,7 +51,7 @@ const SelectableCard = ( { blockGrammer={blockGrammer} viewportWidth={viewportWidth} previewSettings={previewSettings} - animationDuration={animationDuration} + skeletonLoadingTime={skeletonLoadingTime} /> { overlay && (
Date: Mon, 3 Oct 2022 14:05:41 +0530 Subject: [PATCH 15/18] Removed Global CSS --- src/OnboardingSPA/components/Drawer/stylesheet.scss | 3 ++- .../components/LivePreview/BlockPreview/index.js | 2 +- .../components/LivePreview/BlockPreview/stylesheet.scss | 4 +++- .../components/LivePreview/SelectableCard/index.js | 2 +- .../LivePreview/SelectableCard/stylesheet.scss | 9 --------- .../pages/Steps/DesignThemeStyles/Menu/stylesheet.scss | 3 ++- .../pages/Steps/DesignThemeStyles/Preview/index.js | 2 +- .../Steps/DesignThemeStyles/Preview/stylesheet.scss | 1 + 8 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss index bebb0e03f..97e7fd3af 100644 --- a/src/OnboardingSPA/components/Drawer/stylesheet.scss +++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss @@ -273,7 +273,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 1; + z-index: 2; width: 40px; height: 40px; display: flex; @@ -298,6 +298,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); &__live-preview-container { position: relative; width: 90%; + overflow: hidden; align-items: center; border: 1px solid #B7B7B7; diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 588c6f24b..8dc667359 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -62,7 +62,7 @@ const BlockPreview = ( { }, [ storedPreviewSettings ] ); return ( -
+
{ loading &&
diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss index 2502ca986..cbc048510 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/stylesheet.scss @@ -9,13 +9,15 @@ $main-color-light-rgb: var(--nfd-onboarding-white-rgb); &-small { width: 70%; height: 70%; + overflow: hidden; max-width: 320px; max-height: 320px; } - + &-large { width: 70%; height: 70%; + overflow: hidden; max-width: 925px; max-height: 925px; } diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index 442d95ad3..cd1ad6b16 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -45,7 +45,7 @@ const SelectableCard = ( { />
-
+
{
-
+
{ pattern && ( Date: Tue, 4 Oct 2022 11:24:07 +0530 Subject: [PATCH 16/18] Disabled Selection while Loading 1. Disabled Selecting the Preview while rendering 2. Option to disable Skeleton --- .../components/LivePreview/BlockPreview/index.js | 15 ++++++++++++--- .../LivePreview/SelectableCard/index.js | 8 +++++++- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 8dc667359..84e6cc613 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -24,6 +24,7 @@ const BlockPreview = ( { blockGrammer, viewportWidth = 1300, styling = 'large', + setIsLoadingParent = false, previewSettings = false, skeletonLoadingTime = 2500, } ) => { @@ -32,10 +33,18 @@ const BlockPreview = ( { const [ loading, setIsLoading ] = useState(true); useEffect(() => { - const timer = setTimeout(() => { + if(skeletonLoadingTime){ + const timer = setTimeout(() => { + setIsLoading(false); + if (setIsLoadingParent) + setIsLoadingParent(false); + }, skeletonLoadingTime); + return () => clearTimeout(timer); + }else{ setIsLoading(false); - }, skeletonLoadingTime); - return () => clearTimeout(timer); + if (setIsLoadingParent) + setIsLoadingParent(false); + } }, [skeletonLoadingTime]); const storedPreviewSettings = useSelect( diff --git a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js index cd1ad6b16..05dba7783 100644 --- a/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SelectableCard/index.js @@ -15,10 +15,15 @@ const SelectableCard = ( { skeletonLoadingTime = 2500, } ) => { + const [loadingParent, setIsLoadingParent] = useState(true); + return (
onClick() ) } + onClick={ typeof onClick === 'function' && ( () => { + if (!loadingParent) + onClick(); + } ) } >
@@ -51,6 +56,7 @@ const SelectableCard = ( { blockGrammer={blockGrammer} viewportWidth={viewportWidth} previewSettings={previewSettings} + setIsLoadingParent={setIsLoadingParent} skeletonLoadingTime={skeletonLoadingTime} /> { overlay && ( From cdc95e61ca048a87435839013ce65ce5e73ba1b9 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 4 Oct 2022 11:25:57 +0530 Subject: [PATCH 17/18] Linting of JS Files --- .../LivePreview/BlockPreview/index.js | 51 ++++++++++--------- .../LivePreview/SelectableCard/index.js | 36 ++++++------- 2 files changed, 45 insertions(+), 42 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 84e6cc613..5300244dd 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -16,9 +16,11 @@ import { store as nfdOnboardingStore } from '../../../store'; * @param root0.viewportWidth * @param root0.styling * @param root0.previewSettings - * @property {string} blockGrammer WordPress block grammer. - * @property {number} viewportWidth Set viewport width for the AutoHeightBlockPreview component. - * @property {string} styling The type of styling to be applied (small, large, custom). + * @param root0.setIsLoadingParent + * @param root0.skeletonLoadingTime + * @property {string} blockGrammer WordPress block grammer. + * @property {number} viewportWidth Set viewport width for the AutoHeightBlockPreview component. + * @property {string} styling The type of styling to be applied (small, large, custom). */ const BlockPreview = ( { blockGrammer, @@ -30,22 +32,23 @@ const BlockPreview = ( { } ) => { const [ blocks, setBlocks ] = useState(); const [ settings, setSettings ] = useState(); - const [ loading, setIsLoading ] = useState(true); + const [ loading, setIsLoading ] = useState( true ); - useEffect(() => { - if(skeletonLoadingTime){ - const timer = setTimeout(() => { - setIsLoading(false); - if (setIsLoadingParent) - setIsLoadingParent(false); - }, skeletonLoadingTime); - return () => clearTimeout(timer); - }else{ - setIsLoading(false); - if (setIsLoadingParent) - setIsLoadingParent(false); + useEffect( () => { + if ( skeletonLoadingTime ) { + const timer = setTimeout( () => { + setIsLoading( false ); + if ( setIsLoadingParent ) { + setIsLoadingParent( false ); + } + }, skeletonLoadingTime ); + return () => clearTimeout( timer ); + } + setIsLoading( false ); + if ( setIsLoadingParent ) { + setIsLoadingParent( false ); } - }, [skeletonLoadingTime]); + }, [ skeletonLoadingTime ] ); const storedPreviewSettings = useSelect( ( select ) => select( nfdOnboardingStore ).getPreviewSettings(), @@ -71,15 +74,15 @@ const BlockPreview = ( { }, [ storedPreviewSettings ] ); return ( -
+
{ loading && -
-
-
+
+
+
-
-
-
+
+
+
} { settings && ( { + const [ loadingParent, setIsLoadingParent ] = useState( true ); - const [loadingParent, setIsLoadingParent] = useState(true); - return (
{ - if (!loadingParent) + if ( ! loadingParent ) { onClick(); + } } ) } >
@@ -38,27 +38,27 @@ const SelectableCard = ( { >
-
+
+ styling={ styling } + blockGrammer={ blockGrammer } + viewportWidth={ viewportWidth } + previewSettings={ previewSettings } + setIsLoadingParent={ setIsLoadingParent } + skeletonLoadingTime={ skeletonLoadingTime } + /> { overlay && (
Date: Thu, 6 Oct 2022 12:10:24 +0530 Subject: [PATCH 18/18] Added a Fix --- .../pages/Steps/DesignHomepageMenu/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss index 8ff866edf..c00966908 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/stylesheet.scss @@ -58,7 +58,7 @@ $main-border-main: var(--nfd-onboarding-primary-alt); } &--selected { - z-index: 1; + z-index: 2; width: 40px; height: 40px; display: flex;