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

Feat/card grid ui

Approved-by: Simon.Emanuelsson

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) {
-  return <section className={styles.container}>{children}</section>
+export default function Stackable({
+  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 {
-    grid-template-columns: repeat(2, minmax(370px, 1fr));
-  }
-}
-
-@media (min-width: 1367px) {
-  .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;
+  .threeColumns {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .twoColumns {
+    grid-template-columns: repeat(2, 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,
+  },
+})