Merged in feat/card-grid-ui (pull request #332)

Feat/card grid ui

Approved-by: Simon.Emanuelsson

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -45,7 +45,7 @@ export default async function CurrentBenefitsBlock({
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} subtitle={subtitle} />
-      <Grids.Scrollable>
+      <Grids.Stackable>
         {currentLevel.benefits.map((benefit, idx) => (
           <article className={styles.card} key={`${currentLevel}-${idx}`}>
             <Title
@@ -58,7 +58,7 @@ export default async function CurrentBenefitsBlock({
             </Title>
           </article>
         ))}
-      </Grids.Scrollable>
+      </Grids.Stackable>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

components/MyPages/Blocks/Benefits/NextLevel/index.tsx

@@ -42,7 +42,7 @@ export default async function NextLevelBenefitsBlock({
   return (
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      <Grids.Stackable>
+      <Grids.Stackable columns={2}>
         {nextLevel.benefits.map((benefit) => (
           <article key={benefit.title} className={styles.card}>
             <Chip>

components/TempDesignSystem/Grids/Scrollable/index.tsx

@@ -1,5 +0,0 @@
-import styles from "./scrollableGrid.module.css"
-
-export default function Scrollable({ children }: React.PropsWithChildren) {
-  return <section className={styles.carousel}>{children}</section>
-}

components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css

@@ -1,38 +0,0 @@
-.carousel {
-  display: grid;
-  grid-auto-columns: 350px;
-  grid-auto-flow: column;
-  gap: var(--Spacing-x2);
-  margin-left: calc(0 - var(--Spacing-x2));
-  margin-right: calc(0 - var(--Spacing-x2));
-  overflow-x: scroll;
-  scroll-padding-left: var(--Spacing-x2);
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  /* Hide scrollbar IE and Edge */
-  -ms-overflow-style: none;
-  /* Hide Scrollbar Firefox */
-}
-
-.carousel > * {
-  scroll-snap-align: start;
-}
-
-/* Hide Scrollbar Chrome, Safari and Opera */
-.carousel::-webkit-scrollbar {
-  display: none;
-}
-
-/* 3 cols + 2 gaps (+ padding) before falling back to scroll */
-@media screen and (min-width: 964px) {
-  .carousel {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  }
-}
-
-@media screen and (min-width: 1367px) {
-  .carousel {
-    margin: 0;
-    padding: 0;
-  }
-}

components/TempDesignSystem/Grids/Stackable/index.tsx

@@ -1,5 +1,11 @@
-import styles from "./stackable.module.css"
+import { StackableGridProps } from "./stackable"
+import { stackableGridVariants } from "./variants"
 
-export default function Stackable({ children }: React.PropsWithChildren) {
+export default function Stackable({
-  return <section className={styles.container}>{children}</section>
+  children,
+  className,
+  columns,
+}: React.PropsWithChildren<StackableGridProps>) {
+  const classNames = stackableGridVariants({ className, columns })
+  return <section className={classNames}>{children}</section>
 }

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

@@ -1,7 +1,6 @@
 .container {
   display: grid;
   gap: var(--Spacing-x2);
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 }
 
 /* Hide Scrollbar Chrome, Safari and Opera */
@@ -10,33 +9,11 @@
 }
 
 @media (min-width: 768px) {
-  .container {
+  .threeColumns {
-    grid-template-columns: repeat(2, minmax(370px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
-  }
+  }
-}
+
-
+  .twoColumns {
-@media (min-width: 1367px) {
+    grid-template-columns: repeat(2, 1fr);
-  .container:has(> :nth-child(2)) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .container:has(> :nth-child(3)) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .container:has(> :nth-child(4), > :nth-child(5)) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .container:has(> :nth-child(6)) {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-
-  .container:has(> :nth-child(7), > :nth-child(8)) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .container:has(> :nth-child(9)) {
-    grid-template-columns: 1fr 1fr 1fr;
   }
 }

components/TempDesignSystem/Grids/Stackable/stackable.ts

@@ -0,0 +1,9 @@
+import { stackableGridVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface StackableGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof stackableGridVariants> {
+  columns?: 2 | 3
+}

components/TempDesignSystem/Grids/Stackable/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./stackable.module.css"
+
+export const stackableGridVariants = cva(styles.container, {
+  variants: {
+    columns: {
+      2: styles.twoColumns,
+      3: styles.threeColumns,
+    },
+  },
+  defaultVariants: {
+    columns: 3,
+  },
+})

components/TempDesignSystem/Grids/index.tsx

@@ -1,5 +1,4 @@
 import Dynamic from "./Dynamic"
-import Scrollable from "./Scrollable"
 import Stackable from "./Stackable"
 
 export default function Grids() {
@@ -7,5 +6,4 @@ export default function Grids() {
 }
 
 Grids.Dynamic = Dynamic
-Grids.Scrollable = Scrollable
 Grids.Stackable = Stackable

components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css

@@ -3,7 +3,7 @@
   display: grid;
   border-radius: var(--Corner-radius-xLarge);
   gap: var(--Spacing-x2);
-  height: 480px;
+  min-height: 480px;
   justify-content: space-between;
   margin-right: var(--Spacing-x2);
   padding: var(--Spacing-x4) var(--Spacing-x3);