feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Grids/Dynamic/Item/index.tsx

@@ -0,0 +1,14 @@
+import { Slot } from "@radix-ui/react-slot"
+
+import { itemVariants } from "./variants"
+
+import type { ItemProps } from "./item"
+
+export default function Item({ columns, order, rows, ...props }: ItemProps) {
+  const classNames = itemVariants({
+    columns,
+    order,
+    rows,
+  })
+  return <Slot {...props} className={classNames} />
+}

components/TempDesignSystem/Grids/Dynamic/Item/item.module.css

@@ -0,0 +1,372 @@
+.item {
+  margin: 0;
+  padding: 0;
+}
+
+.c2r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c2r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c3r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c4r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c6r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r1 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r2 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r3 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.c8r6 {
+  grid-column: span 4;
+  grid-row: span 1;
+}
+
+.order1 {
+  order: 1;
+}
+
+.order2 {
+  order: 4;
+}
+
+.order3 {
+  order: 7;
+}
+
+.order4 {
+  order: 2;
+}
+
+.order5 {
+  order: 5;
+}
+
+.order6 {
+  order: 8;
+}
+
+.order7 {
+  order: 3;
+}
+
+.order8 {
+  order: 6;
+}
+
+.order9 {
+  order: 9;
+}
+
+@media screen and (min-width: 768px) {
+  .c2r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c2r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c3r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r2 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r3 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r6 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c6r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r2 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r3 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c6r6 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r2 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r3 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r6 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .c2r1 {
+    grid-column: span 2;
+    grid-row: span 1;
+  }
+
+  .c2r2 {
+    grid-column: span 2;
+    grid-row: span 2;
+  }
+
+  .c2r3 {
+    grid-column: span 2;
+    grid-row: span 3;
+  }
+
+  .c2r6 {
+    grid-column: span 2;
+    grid-row: span 6;
+  }
+
+  .c3r1 {
+    grid-column: span 3;
+    grid-row: span 1;
+  }
+
+  .c3r2 {
+    grid-column: span 3;
+    grid-row: span 2;
+  }
+
+  .c3r3 {
+    grid-column: span 3;
+    grid-row: span 3;
+  }
+
+  .c3r6 {
+    grid-column: span 3;
+    grid-row: span 6;
+  }
+
+  .c4r1 {
+    grid-column: span 4;
+    grid-row: span 1;
+  }
+
+  .c4r2 {
+    grid-column: span 4;
+    grid-row: span 2;
+  }
+
+  .c4r3 {
+    grid-column: span 4;
+    grid-row: span 3;
+  }
+
+  .c4r6 {
+    grid-column: span 4;
+    grid-row: span 6;
+  }
+
+  .c6r1 {
+    grid-column: span 6;
+    grid-row: span 1;
+  }
+
+  .c6r2 {
+    grid-column: span 6;
+    grid-row: span 2;
+  }
+
+  .c6r3 {
+    grid-column: span 6;
+    grid-row: span 3;
+  }
+
+  .c6r6 {
+    grid-column: span 6;
+    grid-row: span 6;
+  }
+
+  .c8r1 {
+    grid-column: span 8;
+    grid-row: span 1;
+  }
+
+  .c8r2 {
+    grid-column: span 8;
+    grid-row: span 2;
+  }
+
+  .c8r3 {
+    grid-column: span 8;
+    grid-row: span 3;
+  }
+
+  .c8r6 {
+    grid-column: span 8;
+    grid-row: span 6;
+  }
+
+  .order2 {
+    order: 2;
+  }
+
+  .order3 {
+    order: 3;
+  }
+
+  .order4 {
+    order: 4;
+  }
+
+  .order5 {
+    order: 5;
+  }
+
+  .order6 {
+    order: 6;
+  }
+
+  .order7 {
+    order: 7;
+  }
+
+  .order8 {
+    order: 8;
+  }
+}

components/TempDesignSystem/Grids/Dynamic/Item/item.ts

@@ -0,0 +1,7 @@
+import { itemVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface ItemProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof itemVariants> {}

components/TempDesignSystem/Grids/Dynamic/Item/variants.ts

@@ -0,0 +1,138 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./item.module.css"
+
+export const itemVariants = cva(styles.item, {
+  variants: {
+    order: {
+      1: styles.order1,
+      2: styles.order2,
+      3: styles.order3,
+      4: styles.order4,
+      5: styles.order5,
+      6: styles.order6,
+      7: styles.order7,
+      8: styles.order8,
+      9: styles.order9,
+    },
+    // These are only placeholder classes
+    // so that we can use compoundVariants
+    columns: {
+      2: styles.colTwo,
+      3: styles.colThree,
+      4: styles.colFour,
+      6: styles.colSix,
+      8: styles.colEight,
+    },
+    // These are only placeholder classes
+    // so that we can use compoundVariants
+    rows: {
+      1: styles.rowOne,
+      2: styles.rowTwo,
+      3: styles.rowThree,
+      6: styles.rowSix,
+    },
+  },
+  compoundVariants: [
+    {
+      class: styles.c2r1,
+      columns: 2,
+      rows: 1,
+    },
+    {
+      class: styles.c2r2,
+      columns: 2,
+      rows: 2,
+    },
+    {
+      class: styles.c2r3,
+      columns: 2,
+      rows: 3,
+    },
+    {
+      class: styles.c2r6,
+      columns: 2,
+      rows: 6,
+    },
+    {
+      class: styles.c3r1,
+      columns: 3,
+      rows: 1,
+    },
+    {
+      class: styles.c3r2,
+      columns: 3,
+      rows: 2,
+    },
+    {
+      class: styles.c3r3,
+      columns: 3,
+      rows: 3,
+    },
+    {
+      class: styles.c3r6,
+      columns: 3,
+      rows: 6,
+    },
+    {
+      class: styles.c4r1,
+      columns: 4,
+      rows: 1,
+    },
+    {
+      class: styles.c4r2,
+      columns: 4,
+      rows: 2,
+    },
+    {
+      class: styles.c4r3,
+      columns: 4,
+      rows: 3,
+    },
+    {
+      class: styles.c4r6,
+      columns: 4,
+      rows: 6,
+    },
+    {
+      class: styles.c6r1,
+      columns: 6,
+      rows: 1,
+    },
+    {
+      class: styles.c6r2,
+      columns: 6,
+      rows: 2,
+    },
+    {
+      class: styles.c6r3,
+      columns: 6,
+      rows: 3,
+    },
+    {
+      class: styles.c6r6,
+      columns: 6,
+      rows: 6,
+    },
+    {
+      class: styles.c8r1,
+      columns: 8,
+      rows: 1,
+    },
+    {
+      class: styles.c8r2,
+      columns: 8,
+      rows: 2,
+    },
+    {
+      class: styles.c8r3,
+      columns: 8,
+      rows: 3,
+    },
+    {
+      class: styles.c8r6,
+      columns: 8,
+      rows: 6,
+    },
+  ],
+})