feat(SW-439): add support for one column grid

components/Blocks/CardsGrid.tsx

@@ -5,15 +5,31 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
-import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
+import type {
+  CardsGridProps,
+  Columns,
+} from "@/types/components/blocks/cardsGrid"
 import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
 
 export default function CardsGrid({
   cards_grid,
   firstItem = false,
 }: CardsGridProps) {
-  const columns =
+  let columns: Columns
-    cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
+
+  switch (cards_grid.layout) {
+    case CardsGridLayoutEnum.ONE_COLUMN:
+      columns = 1
+      break
+    case CardsGridLayoutEnum.TWO_COLUMNS:
+      columns = 2
+      break
+    case CardsGridLayoutEnum.THREE_COLUMNS:
+      columns = 3
+      break
+    default:
+      columns = 3
+  }
 
   return (
     <SectionContainer>

components/TempDesignSystem/Grids/Stackable/stackable.module.css

@@ -16,4 +16,8 @@
   .twoColumns {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .oneColumn {
+    grid-template-columns: 1fr;
+  }
 }

components/TempDesignSystem/Grids/Stackable/stackable.ts

@@ -2,8 +2,10 @@ import { stackableGridVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
+import { Columns } from "@/types/components/blocks/cardsGrid"
+
 export interface StackableGridProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof stackableGridVariants> {
-  columns?: 2 | 3
+  columns?: Columns
 }

components/TempDesignSystem/Grids/Stackable/variants.ts

@@ -5,6 +5,7 @@ import styles from "./stackable.module.css"
 export const stackableGridVariants = cva(styles.container, {
   variants: {
     columns: {
+      1: styles.oneColumn,
       2: styles.twoColumns,
       3: styles.threeColumns,
     },

types/components/blocks/cardsGrid.ts

@@ -3,3 +3,5 @@ import { CardsGrid } from "@/types/trpc/routers/contentstack/blocks"
 export interface CardsGridProps extends Pick<CardsGrid, "cards_grid"> {
   firstItem?: boolean
 }
+
+export type Columns = 1 | 2 | 3

types/enums/cardsGrid.ts

@@ -7,6 +7,7 @@ export namespace CardsGridEnum {
 }
 
 export enum CardsGridLayoutEnum {
+  ONE_COLUMN = "oneColumnGrid",
   TWO_COLUMNS = "twoColumnGrid",
   THREE_COLUMNS = "threeColumnGrid",
   TWO_PLUS_ONE = "twoPlusOne", // Not sure if this is used?