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

components/TempDesignSystem/Grids/Dynamic/index.tsx

@@ -0,0 +1,66 @@
+import Item from "./Item"
+
+import styles from "./dynamic.module.css"
+
+import type { GridProps, Order, RowSpan } from "./dynamic"
+
+export default function Grid({ children, items, tag = "section" }: GridProps) {
+  const Elm = tag
+
+  const allRows: number[] = items.columns.map((col) => col.rows.length)
+  const onlySingleRows = allRows.every((row) => row === 1)
+  const oneColumnWithTwoRows = allRows.includes(2)
+  const oneColumnWithThreeRows = allRows.includes(3)
+  /**
+   * When we have one column with 2 rows and another with 3,
+   * we have to reach the closest denominator which is 6 to be
+   * able to have the column with 2 rows span half the grid each.
+   */
+  const doubleTheRows = oneColumnWithTwoRows && oneColumnWithThreeRows
+  return (
+    <Elm className={styles.grid}>
+      {items.columns.map((column, columnIndex) => {
+        const rows = column.rows.map((row) => row.rowConnection.edges).flat()
+        let rowSpan: RowSpan = 1
+        if (!onlySingleRows) {
+          if (doubleTheRows) {
+            switch (rows.length) {
+              case 1:
+                rowSpan = 6
+                break
+              case 2:
+                rowSpan = 3
+                break
+              case 3:
+                rowSpan = 2
+                break
+            }
+          } else if (oneColumnWithTwoRows) {
+            if (rows.length === 1) {
+              rowSpan = 2
+            }
+          } else if (oneColumnWithThreeRows) {
+            if (rows.length === 1) {
+              rowSpan = 3
+            }
+          }
+        }
+        return rows.map(({ node: row }, rowIndex) => {
+          const order = (columnIndex +
+            1 +
+            rowIndex * items.columns.length) as Order
+          return (
+            <Item
+              key={order}
+              columns={column.span}
+              order={order}
+              rows={rowSpan}
+            >
+              {children(row)}
+            </Item>
+          )
+        })
+      })}
+    </Elm>
+  )
+}