Merge pull request #2407 from graphcommerce-org/feature/GCOM-1459

feat(GCOM-1459) Container sizing
graphcommerce-org · Dec 9, 2024 · b50107b · b50107b
2 parents 7a1b3e4 + 452e06d
commit b50107b
Show file tree

Hide file tree

Showing 57 changed files with 664 additions and 322 deletions.
diff --git a/.changeset/polite-plums-breathe.md b/.changeset/polite-plums-breathe.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-graphcms': patch
+---
+
+Add maxWidth to ProductListLayouts
diff --git a/docs/framework/config.md b/docs/framework/config.md
@@ -157,6 +157,14 @@ When a user selects a variant, it will switch the values on the configurable pag
 
 Enabling options here will allow switching of those variants.
 
+#### containerSizingContent: BREAKPOINT | FULL_WIDTH = `FULL_WIDTH`
+
+Configures the max width of the content (main content area)
+
+#### containerSizingShell: BREAKPOINT | FULL_WIDTH = `FULL_WIDTH`
+
+Configures the max width of the shell (header, footer, overlays, etc.)
+
 #### crossSellsHideCartItems: boolean = `false`
 
 Determines if cross sell items should be shown when the user already has the product in their cart. This will result in a product will popping off the screen when you add it to the cart.

diff --git a/examples/magento-graphcms/components/GraphCMS/RowLinks/variant/ImageLabelSwiper.tsx b/examples/magento-graphcms/components/GraphCMS/RowLinks/variant/ImageLabelSwiper.tsx
@@ -28,13 +28,14 @@ export function ImageLabelSwiper(props: RowLinksFragment) {
             <Asset
               asset={pageLink.asset}
               sx={{
-                width: responsiveVal(120, 200),
-                maxWidth: responsiveVal(120, 200),
+                width: responsiveVal(260, 400),
+                maxWidth: responsiveVal(260, 400),
+                borderRadius: 3,
               }}
               sizes={responsiveVal(260, 400)}
             />
           )}
-          <Box sx={{ maxWidth: responsiveVal(120, 200) }}>
+          <Box sx={{ maxWidth: responsiveVal(260, 400) }}>
             <Typography variant='h6' component='h3'>
               {pageLink.title}
             </Typography>

diff --git a/examples/magento-graphcms/components/GraphCMS/RowLinks/variant/Inline.tsx b/examples/magento-graphcms/components/GraphCMS/RowLinks/variant/Inline.tsx
@@ -7,7 +7,7 @@ export function Inline(props: RowLinksFragment) {
   const { title, pageLinks } = props
 
   return (
-    <VariantInline title={title} maxWidth={false} sx={(theme) => ({ my: theme.spacings.md })}>
+    <VariantInline title={title} maxWidth={false}>
       {pageLinks.map((pageLink) => (
         <Link href={pageLink.url} key={pageLink.id} color='inherit' underline='hover'>
           {pageLink.title}

diff --git a/examples/magento-graphcms/components/GraphCMS/RowProduct/variant/Feature.tsx b/examples/magento-graphcms/components/GraphCMS/RowProduct/variant/Feature.tsx
@@ -1,6 +1,6 @@
 import { RichText } from '@graphcommerce/hygraph-ui'
 import { Image } from '@graphcommerce/image'
-import { ImageText } from '@graphcommerce/next-ui'
+import { ImageText, useContainerSpacing } from '@graphcommerce/next-ui'
 import { Typography, useTheme } from '@mui/material'
 import { RowProductFragment } from '../RowProduct.gql'
 import { ProductFeatureMediaFragment } from './ProductFeatureMedia.gql'
@@ -11,6 +11,7 @@ export function Feature(props: FeatureProps) {
   const { productCopy, title, media_gallery } = props
   const theme = useTheme()
   const item = media_gallery?.[2] ?? media_gallery?.[0]
+  const { size, breakpoint } = useContainerSpacing({ sizing: 'content' })
 
   if (!item) return null
 
@@ -24,10 +25,12 @@ export function Feature(props: FeatureProps) {
             width={1532}
             height={1678}
             src={item.url}
-            layout='fill'
             sizes={{
               0: '100vw',
               [theme.breakpoints.values.md]: '50vw',
+              ...(breakpoint && {
+                [theme.breakpoints.values[breakpoint]]: `calc(${size} / 2)` as const,
+              }),
             }}
           />
         )

diff --git a/examples/magento-graphcms/components/GraphCMS/RowSpecialBanner/RowSpecialBanner.tsx b/examples/magento-graphcms/components/GraphCMS/RowSpecialBanner/RowSpecialBanner.tsx
@@ -24,7 +24,7 @@ export function RowSpecialBanner(props: RowSpecialBannerProps) {
           'heading-two': (theme) => ({
             textTransform: 'uppercase' as const,
             color: 'text.primary',
-            ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
+            ...breakpointVal('fontSize', 36, 65, theme.breakpoints.values),
             marginBottom: 0,
             '& strong': {
               // https://github.com/rsms/inter/issues/292#issuecomment-674993644

diff --git a/examples/magento-graphcms/components/ProductListItems/productListRenderer.tsx b/examples/magento-graphcms/components/ProductListItems/productListRenderer.tsx
@@ -1,8 +1,5 @@
-import {
-  AddProductsToCartFab,
-  ProductListItem,
-  ProductListItemRenderer,
-} from '@graphcommerce/magento-product'
+import type { ProductListItemRenderer } from '@graphcommerce/magento-product'
+import { AddProductsToCartFab, ProductListItem } from '@graphcommerce/magento-product'
 import { ProductListItemBundle } from '@graphcommerce/magento-product-bundle'
 import { ProductListItemConfigurable } from '@graphcommerce/magento-product-configurable'
 import { ProductListItemDownloadable } from '@graphcommerce/magento-product-downloadable'

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx
@@ -11,8 +11,7 @@ import {
   ProductListCount,
   ProductListPagination,
 } from '@graphcommerce/magento-product'
-import { LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcommerce/next-ui'
-import { Container } from '@mui/material'
+import { LayoutTitle, memoDeep, StickyBelowHeader, Container } from '@graphcommerce/next-ui'
 import { ProductListItems } from '../ProductListItems'
 import { ProductListLayoutProps } from './types'
 
@@ -25,10 +24,12 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps)
   return (
     <>
       {import.meta.graphCommerce.breadcrumbs && category && (
-        <CategoryBreadcrumbs
-          category={category}
-          sx={(theme) => ({ mx: theme.page.horizontal, mb: theme.spacings.md })}
-        />
+        <Container maxWidth={false}>
+          <CategoryBreadcrumbs
+            category={category}
+            sx={(theme) => ({ mx: theme.page.horizontal, mb: theme.spacings.md })}
+          />
+        </Container>
       )}
 
       {category ? (

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -1,34 +1,36 @@
 import {
   CategoryBreadcrumbs,
-  CategoryDescription,
   CategoryChildren,
+  CategoryDescription,
 } from '@graphcommerce/magento-category'
 import {
   ProductFiltersPro,
-  ProductListFiltersContainer,
   ProductFiltersProAggregations,
+  ProductFiltersProAllFiltersChip,
   productFiltersProChipRenderer,
-  ProductFiltersProSortChip,
   ProductFiltersProLimitChip,
-  ProductFiltersProAllFiltersChip,
-  ProductListCount,
   ProductFiltersProNoResults,
+  ProductFiltersProSortChip,
+  ProductListCount,
+  ProductListFiltersContainer,
   ProductListPagination,
   ProductListSuggestions,
 } from '@graphcommerce/magento-product'
 import { ProductFiltersProSearchTerm } from '@graphcommerce/magento-search'
-import { LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcommerce/next-ui'
+import { Container, LayoutTitle, memoDeep, StickyBelowHeader } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Container, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
 import { ProductListItems } from '../ProductListItems'
-import { ProductListLayoutProps } from './types'
+import { ProductListLayoutProps, useLayoutConfiguration } from './types'
 
 export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps) => {
   const { id, filters, filterTypes, params, products, title, category, handleSubmit } = props
 
   if (!(params && products?.items && filterTypes)) return null
   const { total_count, sort_fields, page_info } = products
 
+  const configuration = useLayoutConfiguration(false)
+
   return (
     <ProductFiltersPro
       key={id}
@@ -38,18 +40,6 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
       filterTypes={filterTypes}
       handleSubmit={handleSubmit}
     >
-      {import.meta.graphCommerce.breadcrumbs && category && (
-        <CategoryBreadcrumbs
-          category={category}
-          sx={(theme) => ({
-            height: 0,
-            mx: theme.page.horizontal,
-            [theme.breakpoints.down('md')]: {
-              '& .MuiBreadcrumbs-ol': { justifyContent: 'center' },
-            },
-          })}
-        />
-      )}
       <Container
         maxWidth={false}
         sx={(theme) => ({
@@ -60,6 +50,18 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
           justifyItems: { xs: 'left', md: 'center' },
         })}
       >
+        {import.meta.graphCommerce.breadcrumbs && category && (
+          <CategoryBreadcrumbs
+            category={category}
+            sx={(theme) => ({
+              height: 0,
+              [theme.breakpoints.down('md')]: {
+                '& .MuiBreadcrumbs-ol': { justifyContent: 'center' },
+              },
+            })}
+          />
+        )}
+
         {category ? (
           <>
             <LayoutTitle
@@ -130,7 +132,7 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
             {...products}
             loadingEager={6}
             title={(params.search ? `Search ${params.search}` : title) ?? ''}
-            columns={{ xs: { count: 2 }, md: { count: 3 }, lg: { count: 4 }, xl: { count: 5 } }}
+            columns={configuration.columns}
           />
         )}
         <ProductListPagination page_info={page_info} params={params} />

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutSidebar.tsx
@@ -1,38 +1,39 @@
-import { CategoryDescription, CategoryBreadcrumbs } from '@graphcommerce/magento-category'
+import { CategoryBreadcrumbs, CategoryDescription } from '@graphcommerce/magento-category'
 import {
   ProductFiltersPro,
-  ProductListSuggestions,
-  ProductListCount,
-  ProductFiltersProNoResults,
-  ProductListPagination,
-  ProductListFiltersContainer,
   ProductFiltersProAggregations,
-  productFiltersProChipRenderer,
-  ProductFiltersProSortChip,
-  ProductFiltersProLimitChip,
   ProductFiltersProAllFiltersChip,
-  ProductFiltersProClearAll,
   ProductFiltersProCategorySection,
-  ProductFiltersProSortSection,
+  productFiltersProChipRenderer,
+  ProductFiltersProClearAll,
+  ProductFiltersProLimitChip,
   ProductFiltersProLimitSection,
+  ProductFiltersProNoResults,
   productFiltersProSectionRenderer,
+  ProductFiltersProSortChip,
+  ProductFiltersProSortSection,
+  ProductListCount,
+  ProductListFiltersContainer,
+  ProductListPagination,
+  ProductListSuggestions,
 } from '@graphcommerce/magento-product'
 import {
-  ProductFiltersProSearchTerm,
   ProductFiltersProCategorySectionSearch,
+  ProductFiltersProSearchTerm,
 } from '@graphcommerce/magento-search'
-import { MediaQuery, memoDeep, responsiveVal, StickyBelowHeader } from '@graphcommerce/next-ui'
+import { MediaQuery, memoDeep, Container, StickyBelowHeader } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, Container, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { ProductListItems } from '../ProductListItems'
-import { ProductListLayoutProps } from './types'
+import { ProductListLayoutProps, useLayoutConfiguration } from './types'
 
 export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps) => {
   const { filters, filterTypes, params, products, handleSubmit, category, title, menu } = props
 
   if (!params || !products?.items || !filterTypes) return null
   const { total_count, sort_fields, page_info } = products
-  const sidebarWidth = responsiveVal(200, 350, 960, 1920)
+
+  const configuration = useLayoutConfiguration(true)
 
   return (
     <ProductFiltersPro
@@ -44,16 +45,17 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
       handleSubmit={handleSubmit}
     >
       {import.meta.graphCommerce.breadcrumbs && category && (
-        <CategoryBreadcrumbs
-          category={category}
-          sx={(theme) => ({
-            mb: theme.spacings.sm,
-            mx: theme.page.horizontal,
-            [theme.breakpoints.down('md')]: {
-              '& .MuiBreadcrumbs-ol': { justifyContent: 'center' },
-            },
-          })}
-        />
+        <Container maxWidth={false}>
+          <CategoryBreadcrumbs
+            category={category}
+            sx={(theme) => ({
+              mb: theme.spacings.sm,
+              [theme.breakpoints.down('md')]: {
+                '& .MuiBreadcrumbs-ol': { justifyContent: 'center' },
+              },
+            })}
+          />
+        </Container>
       )}
 
       <Container
@@ -62,7 +64,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
           display: 'grid',
           alignItems: 'start',
           rowGap: theme.spacings.md,
-          columnGap: { xs: theme.spacings.md, xl: theme.spacings.xxl },
+          columnGap: configuration.columnGap,
           mb: theme.spacings.xl,
           gridTemplate: {
             xs: '"title" "horizontalFilters" "count" "items" "pagination"',
@@ -71,7 +73,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
               "sidebar count"      auto
               "sidebar items"      auto
               "sidebar pagination" 1fr
-              /${sidebarWidth}   auto
+              /${configuration.sidebarWidth}   auto
             `,
           },
         })}
@@ -111,7 +113,6 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
           total_count={total_count}
           sx={{ gridArea: 'count', width: '100%', my: 0, height: '1em' }}
         />
-
         <Box sx={{ gridArea: 'items' }}>
           {products.items.length <= 0 ? (
             <ProductFiltersProNoResults search={params.search} />
@@ -120,15 +121,7 @@ export const ProductListLayoutSidebar = memoDeep((props: ProductListLayoutProps)
               {...products}
               loadingEager={6}
               title={(params.search ? `Search ${params.search}` : title) ?? ''}
-              columns={(theme) => {
-                const totalWidth = (spacing: string) =>
-                  `calc(100vw - (${theme.page.horizontal} * 2 + ${sidebarWidth} + ${theme.spacings[spacing]}))`
-                return {
-                  xs: { count: 2 },
-                  md: { totalWidth: totalWidth('md'), count: 3 },
-                  lg: { totalWidth: totalWidth('md'), count: 4 },
-                }
-              }}
+              columns={configuration.columns}
             />
           )}
         </Box>