diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js index f14794ec6..83be6a68a 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Sidebar.js @@ -15,6 +15,7 @@ import { SIDEBAR_LEARN_MORE, SIDEBAR_SLOTFILL_PREFIX, } from '../../../../../constants'; +import SidebarSkeleton from './Skeleton/SidebarSkeleton'; const LearnMoreSidebar = () => { const { currentStep } = useSelect( ( select ) => { @@ -30,41 +31,45 @@ const LearnMoreSidebar = () => { }; return ( - - - - - -
-
- { currentStep?.Icon && } -
-
-

- { currentStep?.heading && { currentStep.heading } } -

-

- { currentStep?.description } -

-
-
- - - { currentStep?.SidebarComponents?.LearnMore && ( - - }> - { currentStep.SidebarComponents.LearnMore.map( + + }> + +
+ +
+ + + +
+
+ { currentStep?.Icon && } +
+
+

+ { currentStep?.heading && { currentStep.heading } } +

+

+ { currentStep?.description } +

+
+
+ + + {currentStep?.SidebarComponents?.LearnMore && ( + currentStep.SidebarComponents.LearnMore.map( ( SidebarComponent, index ) => { return ( + ); } - ) } + ) + )} - ) } ); }; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js new file mode 100644 index 000000000..ed201d339 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/SidebarSkeleton.js @@ -0,0 +1,38 @@ +/** Skeleton Structure for the SideBar */ +const SidebarSkeleton = () => { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ ); +}; + +export default SidebarSkeleton; diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss new file mode 100644 index 000000000..9f91be7ed --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/Skeleton/stylesheet.scss @@ -0,0 +1,161 @@ +$grey-color: #f6f7f8; +$main-color: var(--wp-admin-theme-color--rgb); +$main-color-grey: var(--nfd-onboarding-light-gray); +$main-color-light-rgb: var(--nfd-onboarding-white-rgb); + +.sidebar-skeleton { + width: 100%; + + &-divider { + width: 100%; + margin: 20px 0px; + border-top: 1px solid #bbb; + } + + &-header { + width: 95%; + padding: 16px; + + &-top { + width: 80%; + margin: 8px; + display: flex; + align-items: center; + + &-profile { + width: 25px; + height: 25px; + margin-right: 15px; + } + + &-header { + width: 40%; + height: 15px; + } + } + + &-below { + width: 100%; + margin: 8px; + margin-left: 45px; + + &-subheading-1 { + width: 70%; + margin: 4px; + height: 15px; + } + + &-subheading-2 { + margin: 4px; + width: 50%; + height: 15px; + } + } + } + + &-body { + width: 90%; + height: 250px; + display: flex; + padding: 16px; + margin-top: 20px; + margin-bottom: 20px; + align-items: center; + justify-content: center; + + &-image{ + width: 95%; + height: 100% + } + } + + &-footer { + width: 85%; + margin: 8px; + padding: 16px; + + &-line-1 { + width: 45%; + height: 15px; + margin-bottom: 15px + } + + &-line-2 { + width: 70%; + height: 15px; + margin-bottom: 5px + } + + &-line-3 { + width: 90%; + height: 15px; + margin-bottom: 5px + } + + &-line-4 { + width: 80%; + height: 15px; + margin-bottom: 5px + } + + &-line-5 { + width: 30%; + height: 15px; + margin-bottom: 5px + } + + &-buttons { + width: 100%; + display: flex; + margin-top: 50px; + align-items: center; + flex-direction: column; + justify-content: center; + + &-button-1 { + width: 100%; + margin: 8px; + height: 40px; + display: flex; + align-items: center; + margin-bottom: 20px; + justify-content: center; + border: 1px solid rgba($main-color, 0.4) !important; + } + + &-button-2 { + width: 70%; + height: 15px; + background-color: rgba($main-color, 0.4) !important; + } + + &-button-3 { + width: 30%; + height: 15px; + background-color: rgba($main-color, 0.4) !important; + } + } + } +} + +.shimmer { + background: $grey-color; + background-repeat: no-repeat; + animation: shine-placeholder 1.5s linear infinite; + background-image: linear-gradient(to right, + $grey-color 0%, + $main-color-grey 20%, + $grey-color 40%, + $grey-color 100%); +} + +.shimmer-1 { + background: rgba($main-color, 0.4); + background-repeat: no-repeat; + animation: shine-placeholder 1.5s linear infinite; + background-image: linear-gradient(to right, + rgba($main-color, 0.4) 0%, + rgba($main-color, 0.6) 20%, + rgba($main-color, 0.4) 40%, + rgba($main-color, 0.4) 100%); +} \ No newline at end of file diff --git a/src/OnboardingSPA/components/Sidebar/components/LearnMore/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/LearnMore/stylesheet.scss index 7c76de149..9d4615ba4 100644 --- a/src/OnboardingSPA/components/Sidebar/components/LearnMore/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/LearnMore/stylesheet.scss @@ -3,6 +3,21 @@ box-shadow: none; } +.nfd-onboarding-sidebar-learn-more { + padding: 0px !important; +} + +.nfd-onboarding-sidebar-learn-more__header { + + &--icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + } +} + .nfd-onboarding-sidebar-learn-more__container { display: flex; } @@ -21,6 +36,6 @@ } .nfd-onboarding-sidebar-learn-more__menu-button { - margin: 0px 5px; - min-height: 40px; + margin: 0px 5px; + min-height: 40px; } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SidebarComponents/LearnMore/Help.js b/src/OnboardingSPA/pages/Steps/GetStarted/SidebarComponents/LearnMore/Help.js index 83312192f..e762beed7 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SidebarComponents/LearnMore/Help.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SidebarComponents/LearnMore/Help.js @@ -3,7 +3,9 @@ import { Fragment } from '@wordpress/element'; const Help = () => { return ( -

Help text content.

+

+ Help text content. +

); }; diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss index 249e03045..bb949ba17 100644 --- a/src/OnboardingSPA/styles/_utilities.scss +++ b/src/OnboardingSPA/styles/_utilities.scss @@ -15,6 +15,16 @@ } } +@keyframes shine-placeholder { + 0% { + background-position: -468px 0; + } + + 100% { + background-position: 468px 0; + } +} + .is-centered { display: flex; place-content: center; diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 90d5a770d..b6400a856 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -34,6 +34,7 @@ @import "../components/Button/NavCardButton/stylesheet"; @import "../pages/Steps/Ecommerce/stylesheet"; @import "../components/ErrorState/stylesheet"; +@import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet"; // CSS for Pages @import "../pages/Steps/BasicInfo/stylesheet.scss";