Merge pull request #301 from newfold-labs/feature/introduce-grid-comp…

…onent Grid Component
newfold-labs · Sep 18, 2023 · de93652 · de93652
2 parents 195456c + a8d9935
commit de93652
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 50 deletions.
diff --git a/src/OnboardingSPA/components/Grid/index.js b/src/OnboardingSPA/components/Grid/index.js
@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+
+/**
+ * Grid Component
+ * Shows the components in a grid view
+ *
+ * @param {Object} root0
+ * @param {string} root0.className
+ * @param {number} root0.size
+ * @param {number} root0.colGap
+ * @param {Object} root0.children
+ * @return {WPComponent} NFDOnboarding Grid
+ */
+const Grid = ( { className = '', size, colGap = 0, children } ) => {
+	return (
+		<div
+			className={ classNames( 'nfd-onboarding-grid', className ) }
+			style={ {
+				gridTemplateColumns: `repeat(${ size }, 1fr)`,
+				gridColumnGap: `${ colGap }px`,
+			} }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default Grid;
diff --git a/src/OnboardingSPA/components/Grid/stylesheet.scss b/src/OnboardingSPA/components/Grid/stylesheet.scss
@@ -0,0 +1,13 @@
+.nfd-onboarding-grid {
+	width: 100%;
+	display: grid;
+	justify-content: center;
+
+	@media (max-width: #{ ($break-huge) }) {
+		grid-template-columns: repeat(2, 1fr) !important;
+	}
+
+	@media (max-width: #{ ($break-small) }) {
+		grid-template-columns: 1fr !important;
+	}
+}
diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js
@@ -24,6 +24,7 @@ import {
 } from '../../../utils/analytics/hiive';
 import getContents from './contents';
 import { ACTION_HOMEPAGE_LAYOUT_SELECTED } from '../../../utils/analytics/hiive/constants';
+import Grid from '../../../components/Grid';
 
 const StepDesignHomepageMenu = () => {
 	const location = useLocation();
@@ -144,16 +145,19 @@ const StepDesignHomepageMenu = () => {
 							subtitle={ content.subheading }
 						/>
 						<div className="homepage_preview__list">
-							<LivePreviewSkeleton
-								watch={ homepagePattern }
-								count={
-									themeVariations[ currentStep?.patternId ]
-										?.previewCount
-								}
-								callback={ buildHomepagePreviews }
-								className={ 'homepage_preview__list__item' }
-								viewportWidth={ 1200 }
-							/>
+							<Grid size={ 3 } colGap={ 50 }>
+								<LivePreviewSkeleton
+									watch={ homepagePattern }
+									count={
+										themeVariations[
+											currentStep?.patternId
+										]?.previewCount
+									}
+									callback={ buildHomepagePreviews }
+									className={ 'homepage_preview__list__item' }
+									viewportWidth={ 1200 }
+								/>
+							</Grid>
 						</div>
 					</div>
 				</CommonLayout>

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js
@@ -27,6 +27,7 @@ import {
 	trackOnboardingEvent,
 } from '../../../../utils/analytics/hiive';
 import { ACTION_THEME_STYLE_SELECTED } from '../../../../utils/analytics/hiive/constants';
+import Grid from '../../../../components/Grid';
 
 const StepDesignThemeStylesMenu = () => {
 	const content = getContents();
@@ -162,17 +163,19 @@ const StepDesignThemeStylesMenu = () => {
 							</button>
 						</h3>
 					</HeadingWithSubHeading>
-					<div className="theme-styles-menu__list grid-col-3">
-						<LivePreviewSkeleton
-							className={ 'theme-styles-menu__list__item' }
-							count={
-								themeVariations[ currentStep?.patternId ]
-									?.previewCount
-							}
-							watch={ pattern && globalStyles }
-							callback={ buildPreviews }
-							viewportWidth={ 900 }
-						/>
+					<div className="theme-styles-menu__list">
+						<Grid size={ 3 }>
+							<LivePreviewSkeleton
+								className={ 'theme-styles-menu__list__item' }
+								count={
+									themeVariations[ currentStep?.patternId ]
+										?.previewCount
+								}
+								watch={ pattern && globalStyles }
+								callback={ buildPreviews }
+								viewportWidth={ 900 }
+							/>
+						</Grid>
 					</div>
 				</div>
 			</CommonLayout>

diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/stylesheet.scss
@@ -7,7 +7,7 @@
 	justify-content: center;
 
 	&__list {
-		width: 70vw;
+		width: 65vw;
 		height: 100%;
 
 		@media (max-width: #{ ($break-xlarge) }) {

diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js
@@ -19,6 +19,7 @@ import {
 } from '../../../components/LivePreview';
 import LivePreviewSkeleton from '../../../components/LivePreview/LivePreviewSkeleton';
 import getContents from './contents';
+import Grid from '../../../components/Grid';
 
 const StepSitePages = () => {
 	const location = useLocation();
@@ -160,17 +161,20 @@ const StepSitePages = () => {
 							subtitle={ content.subheading }
 						/>
 						<div className="site-pages__list">
-							<LivePreviewSkeleton
-								className={ 'site-pages__list__item' }
-								count={
-									themeVariations[ currentStep?.patternId ]
-										?.previewCount
-								}
-								watch={ sitePages }
-								isWithCard={ true }
-								callback={ buildPreviews }
-								viewportWidth={ 1200 }
-							/>
+							<Grid size={ 2 }>
+								<LivePreviewSkeleton
+									className={ 'site-pages__list__item' }
+									count={
+										themeVariations[
+											currentStep?.patternId
+										]?.previewCount
+									}
+									watch={ sitePages }
+									isWithCard={ true }
+									callback={ buildPreviews }
+									viewportWidth={ 1200 }
+								/>
+							</Grid>
 						</div>
 					</div>
 				</CommonLayout>

diff --git a/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss b/src/OnboardingSPA/pages/Steps/SitePages/stylesheet.scss
@@ -16,23 +16,18 @@
 	&__list {
 		width: 50vw;
 		height: 100%;
-		column-count: 2;
-		vertical-align: auto;
 
 		@media (max-width: #{ ($break-xlarge) }) {
 			width: 95vw;
-			column-count: 2;
 		}
 
 		@media (max-width: #{ ($break-small) }) {
 			width: 95vw;
-			column-count: 1;
 		}
 
 		&__item {
 			position: relative;
 			flex: 1;
-			width: 100%;
 			margin: 24px;
 			display: inline-block;
 			border: 1px solid #e3dfdf;

diff --git a/src/OnboardingSPA/styles/_utilities.scss b/src/OnboardingSPA/styles/_utilities.scss
@@ -24,15 +24,3 @@ input::placeholder {
 	font-size: 0.75rem;
 	color: var(--nfd-onboarding-light-gray-4);
 }
-
-.grid-col-3 {
-	display: grid;
-	justify-content: center;
-	grid-template-columns: repeat(auto-fit, clamp(18rem, 20vw, 60rem));
-}
-
-.grid-col-4 {
-	display: grid;
-	justify-content: center;
-	grid-template-columns: repeat(auto-fit, clamp(15rem, 17vw, 40rem));
-}
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
@@ -40,6 +40,7 @@
 @import "../components/Sidebar/components/LearnMore/Skeleton/stylesheet";
 @import "../components/Animate/stylesheet";
 @import "../components/NewfoldInterfaceSkeleton/style";
+@import "../components/Grid/stylesheet";
 
 // CSS for Pages
 @import "../pages/Steps/BasicInfo/stylesheet";