Refactor editorial category card grid

Copilot-Session: bb1440ac-bb8e-4dd5-a1b5-8d6998a2a8c9

Author: danielguillan

packages/react/src/recipes/Editorial/Category/Category.module.css

@@ -10,23 +10,12 @@
   padding: var(--base-size-48) var(--base-size-32) var(--base-size-32);
 }
 
-.sectionHeaderColumn,
-.cardGridFooterColumn {
-  min-width: 0;
-}
-
 .sortLabel {
   flex-shrink: 0;
 }
 
 .cardGrid {
-  --editorial-cardGrid-border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-
-  border-inline: var(--editorial-cardGrid-border);
-}
-
-.cardGridColumn {
-  display: flex;
+  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
 }
 
 .cardGridItem {
@@ -38,16 +27,12 @@
   transition: background var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
 }
 
-.cardGridColumnMiddleMobileRow .cardGridItem {
-  border-block: var(--editorial-cardGrid-border);
-}
-
-.cardGridColumnArrowHover .cardGridItem:is(:hover, :focus-within) {
+.cardGridItem:is(:hover, :focus-within) {
   background: linear-gradient(to top, var(--editorial-cardGrid-hover-overlay) 0%, transparent 100%),
     var(--brand-color-canvas-default);
 }
 
-[data-color-mode='dark'] .cardGridColumnArrowHover .cardGridItem:is(:hover, :focus-within) {
+[data-color-mode='dark'] .cardGridItem:is(:hover, :focus-within) {
   --editorial-cardGrid-hover-overlay: color-mix(in srgb, var(--base-color-scale-gray-0) 10%, transparent);
 }
 
@@ -62,39 +47,3 @@
 .paginationFrame {
   padding-inline: var(--base-size-32);
 }
-
-@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
-  .cardGridColumnMiddleMobileRow .cardGridItem {
-    border-block: 0;
-  }
-
-  .cardGridColumnTabletDivider .cardGridItem {
-    border-inline-start: var(--editorial-cardGrid-border);
-  }
-
-  .cardGridColumnTabletEndDivider .cardGridItem {
-    border-inline-end: var(--editorial-cardGrid-border);
-  }
-
-  .cardGridColumnTabletLastCompleteRow .cardGridItem {
-    border-block-end: var(--editorial-cardGrid-border);
-  }
-
-  .cardGridColumnMiddleTabletRow .cardGridItem {
-    border-block: var(--editorial-cardGrid-border);
-  }
-}
-
-@media screen and (min-width: 63.25rem) {
-  .cardGridColumnMiddleMobileRow .cardGridItem {
-    border-block: 0;
-  }
-
-  .cardGridColumnDesktopStartDivider .cardGridItem {
-    border-inline-start: var(--editorial-cardGrid-border);
-  }
-
-  .cardGridColumnMiddleDesktopRow .cardGridItem {
-    border-block: var(--editorial-cardGrid-border);
-  }
-}

packages/react/src/recipes/Editorial/Category/Category.module.css.d.ts

@@ -1,22 +1,11 @@
 declare const styles: {
   readonly cardGrid: string
-  readonly cardGridColumn: string
-  readonly cardGridColumnArrowHover: string
-  readonly cardGridColumnDesktopStartDivider: string
-  readonly cardGridColumnMiddleDesktopRow: string
-  readonly cardGridColumnMiddleMobileRow: string
-  readonly cardGridColumnMiddleTabletRow: string
-  readonly cardGridColumnTabletDivider: string
-  readonly cardGridColumnTabletEndDivider: string
-  readonly cardGridColumnTabletLastCompleteRow: string
-  readonly cardGridFooterColumn: string
   readonly cardGridItem: string
   readonly hero: string
   readonly heroSection: string
   readonly paginationFrame: string
   readonly resourceCard: string
   readonly sectionHeader: string
-  readonly sectionHeaderColumn: string
   readonly sortLabel: string
 }
 export = styles

packages/react/src/recipes/Editorial/Category/Category.stories.tsx

@@ -2,7 +2,7 @@ import {INITIAL_VIEWPORTS} from 'storybook/viewport'
 import type {Meta, StoryObj} from '@storybook/react'
 import {useTranslation} from 'react-i18next'
 
-import {getLocalizedEditorialCategoryContent} from './Category.content'
+import {defaultEditorialCategoryContent, getLocalizedEditorialCategoryContent} from './Category.content'
 import {Category as CategoryComponent, CategoryTemplate} from './Category'
 
 const meta = {
@@ -28,3 +28,30 @@ export const Category: Story = {
     return <CategoryTemplate content={getLocalizedEditorialCategoryContent(t)} />
   },
 }
+
+const incompleteCategoryContent = {
+  ...defaultEditorialCategoryContent,
+  featured: {
+    ...defaultEditorialCategoryContent.featured,
+    cards: defaultEditorialCategoryContent.resources.cards.slice(0, 5),
+  },
+  resources: {
+    ...defaultEditorialCategoryContent.resources,
+    cards: defaultEditorialCategoryContent.resources.cards.slice(0, 5),
+  },
+}
+
+export const CardGridIncomplete: Story = {
+  name: 'Card grid incomplete',
+  render: () => <CategoryTemplate content={incompleteCategoryContent} />,
+}
+
+export const CardGridTablet: Story = {
+  name: 'Card grid Tablet',
+  render: () => <CategoryTemplate content={incompleteCategoryContent} />,
+}
+
+export const CardGridNarrow: Story = {
+  name: 'Card grid Narrow',
+  render: () => <CategoryTemplate content={incompleteCategoryContent} />,
+}

packages/react/src/recipes/Editorial/Category/Category.tsx

@@ -1,10 +1,8 @@
-import {clsx} from 'clsx'
 import React, {useCallback, useState} from 'react'
 
 import {
   Box,
   Card,
-  Grid,
   Heading,
   Hero,
   MinimalFooter,
@@ -18,6 +16,7 @@ import {
 import {RedlineBackground} from '../../../component-helpers'
 
 import {defaultEditorialCategoryContent, type EditorialCategoryContent} from './Category.content'
+import {EditorialCardGrid} from '../EditorialCardGrid'
 import editorialStyles from '../Editorial.module.css'
 import styles from './Category.module.css'
 
@@ -132,50 +131,28 @@ type CardGridProps = {
 }
 
 function CardGrid({cards, heading, sortLabel, footer}: CardGridProps) {
-  const lastTabletRowStartIndex = cards.length - (cards.length % 2 || 2)
-  const lastDesktopRowStartIndex = cards.length - (cards.length % 3 || 3)
-
   return (
-    <Grid columnGap="none" rowGap="none" enableGutters={false} className={styles.cardGrid}>
-      <Grid.Column span={12} className={styles.sectionHeaderColumn}>
-        <Stack
-          className={styles.sectionHeader}
-          direction={{narrow: 'vertical', regular: 'horizontal'}}
-          gap={24}
-          alignItems={{narrow: 'flex-start', regular: 'flex-end'}}
-          justifyContent="space-between"
-          padding="none"
-        >
-          <Heading as="h2" size="5" weight="normal">
-            {heading}
-          </Heading>
-          {sortLabel ? (
-            <Text size="100" variant="muted" className={styles.sortLabel}>
-              {sortLabel}
-            </Text>
-          ) : null}
-        </Stack>
-      </Grid.Column>
-      {cards.map((card, index) => (
-        <Grid.Column
-          key={card.heading}
-          span={{xsmall: 12, medium: 6, large: 4}}
-          className={clsx(
-            styles.cardGridColumn,
-            styles.cardGridColumnArrowHover,
-            index % 2 === 1 && styles.cardGridColumnTabletDivider,
-            cards.length % 2 === 1 && index === cards.length - 1 && styles.cardGridColumnTabletEndDivider,
-            cards.length % 2 === 1 &&
-              index >= lastTabletRowStartIndex - 2 &&
-              index < lastTabletRowStartIndex &&
-              styles.cardGridColumnTabletLastCompleteRow,
-            index % 3 !== 0 && styles.cardGridColumnDesktopStartDivider,
-            index > 0 && index < cards.length - 1 && styles.cardGridColumnMiddleMobileRow,
-            index >= 2 && index < lastTabletRowStartIndex && styles.cardGridColumnMiddleTabletRow,
-            index >= 3 && index < lastDesktopRowStartIndex && styles.cardGridColumnMiddleDesktopRow,
-          )}
-        >
-          <Box className={styles.cardGridItem}>
+    <div className={styles.cardGrid}>
+      <Stack
+        className={styles.sectionHeader}
+        direction={{narrow: 'vertical', regular: 'horizontal'}}
+        gap={24}
+        alignItems={{narrow: 'flex-start', regular: 'flex-end'}}
+        justifyContent="space-between"
+        padding="none"
+      >
+        <Heading as="h2" size="5" weight="normal">
+          {heading}
+        </Heading>
+        {sortLabel ? (
+          <Text size="100" variant="muted" className={styles.sortLabel}>
+            {sortLabel}
+          </Text>
+        ) : null}
+      </Stack>
+      <EditorialCardGrid layout="responsive">
+        {cards.map(card => (
+          <Box key={card.heading} className={styles.cardGridItem}>
             <Card href={card.href} fullWidth ctaVariant="none" className={styles.resourceCard} backgroundColor="none">
               <Card.Tokens>
                 {card.tokens.map((token, tokenIndex) => (
@@ -186,13 +163,9 @@ function CardGrid({cards, heading, sortLabel, footer}: CardGridProps) {
               <Card.Description>{card.description}</Card.Description>
             </Card>
           </Box>
-        </Grid.Column>
-      ))}
-      {footer ? (
-        <Grid.Column span={12} className={styles.cardGridFooterColumn}>
-          {footer}
-        </Grid.Column>
-      ) : null}
-    </Grid>
+        ))}
+      </EditorialCardGrid>
+      {footer}
+    </div>
   )
 }

packages/react/src/recipes/Editorial/Category/Category.visual.spec.ts

@@ -13,7 +13,48 @@ test.describe('Visual Comparison: Category', () => {
     })
     await page.locator('body.sb-show-main').waitFor({state: 'visible'})
 
-    await page.waitForTimeout(4000)
+    await page.waitForTimeout(500)
     await expect(page).toHaveScreenshot({fullPage: true})
   })
+
+  test('Category / Card grid incomplete', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=recipes-editorial-category--card-grid-incomplete&viewMode=story',
+      {waitUntil: 'networkidle'},
+    )
+    await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+    await page.waitForTimeout(500)
+    await expect(page).toHaveScreenshot({fullPage: true})
+  })
+
+  // eslint-disable-next-line i18n-text/no-en
+  test.describe('Tablet viewport test for Card grid Tablet', () => {
+    test.use({viewport: {width: 834, height: 1112}})
+    test('Category / Card grid Tablet', async ({page}) => {
+      await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=recipes-editorial-category--card-grid-tablet&viewMode=story',
+        {waitUntil: 'networkidle'},
+      )
+      await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+      await page.waitForTimeout(500)
+      await expect(page).toHaveScreenshot({fullPage: true})
+    })
+  })
+
+  // eslint-disable-next-line i18n-text/no-en
+  test.describe('Mobile viewport test for Card grid Narrow', () => {
+    test.use({viewport: {width: 360, height: 800}})
+    test('Category / Card grid Narrow', async ({page}) => {
+      await page.goto(
+        'http://localhost:6006/iframe.html?args=&id=recipes-editorial-category--card-grid-narrow&viewMode=story',
+        {waitUntil: 'networkidle'},
+      )
+      await page.locator('body.sb-show-main').waitFor({state: 'visible'})
+
+      await page.waitForTimeout(500)
+      await expect(page).toHaveScreenshot({fullPage: true})
+    })
+  })
 })

packages/react/src/recipes/Editorial/Category/Category.visual.spec.ts-snapshots/Visual-Comparison-Category-Category-Card-grid-incomplete-1-darwin.png

@@ -26,6 +26,62 @@
   margin-top: calc(var(--base-size-48) - var(--brand-borderWidth-thin));
 }
 
+.cardGridCells {
+  --editorial-cardGrid-border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.cardGridCell {
+  display: flex;
+  min-width: 0;
+}
+
+.cardGridCell:not(:first-child) {
+  border-block-start: var(--editorial-cardGrid-border);
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .cardGridCells--responsive .cardGridCell {
+    border-block-start: 0;
+  }
+
+  .cardGridCells--responsive .cardGridCell:nth-child(even) {
+    border-inline-start: var(--editorial-cardGrid-border);
+  }
+
+  .cardGridCells--responsive .cardGridCell:nth-child(n + 3) {
+    border-block-start: var(--editorial-cardGrid-border);
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .cardGridCells--threeColumn .cardGridCell {
+    border-block-start: 0;
+  }
+
+  .cardGridCells--threeColumn .cardGridCell:not(:nth-child(3n + 1)) {
+    border-inline-start: var(--editorial-cardGrid-border);
+  }
+
+  .cardGridCells--threeColumn .cardGridCell:nth-child(n + 4) {
+    border-block-start: var(--editorial-cardGrid-border);
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .cardGridCells--responsive .cardGridCell {
+    border-block-start: 0;
+    border-inline-start: 0;
+  }
+
+  .cardGridCells--responsive .cardGridCell:not(:nth-child(3n + 1)) {
+    border-inline-start: var(--editorial-cardGrid-border);
+  }
+
+  .cardGridCells--responsive .cardGridCell:nth-child(n + 4) {
+    border-block-start: var(--editorial-cardGrid-border);
+  }
+}
+
 .redlineBackground {
   display: flex;
   flex-direction: column;