Merged in feat/sw-3247-move-table-to-design-system (pull request #2636)

feat(SW-3247): Move Table component to design-system

* Move Table component to design-system


Approved-by: Bianca Widstam

packages/design-system/lib/components/Table/TBody.tsx

@@ -0,0 +1,7 @@
+import styles from './table.module.css'
+
+function TBody({ children }: React.PropsWithChildren) {
+  return <tbody className={styles.tbody}>{children}</tbody>
+}
+
+export default TBody

packages/design-system/lib/components/Table/TD.tsx

@@ -0,0 +1,14 @@
+import styles from './table.module.css'
+
+function TD({
+  children,
+  ...rest
+}: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) {
+  return (
+    <td className={styles.td} {...rest}>
+      {children}
+    </td>
+  )
+}
+
+export default TD

packages/design-system/lib/components/Table/TH.tsx

@@ -0,0 +1,13 @@
+import styles from './table.module.css'
+
+import type { THeadProps } from './table'
+
+function TH({ children, width = 'auto', ...props }: THeadProps) {
+  return (
+    <th className={styles.th} style={{ width }} {...props}>
+      {children}
+    </th>
+  )
+}
+
+export default TH

packages/design-system/lib/components/Table/THead.tsx

@@ -0,0 +1,7 @@
+import styles from './table.module.css'
+
+function THead({ children }: React.PropsWithChildren) {
+  return <thead className={styles.thead}>{children}</thead>
+}
+
+export default THead

packages/design-system/lib/components/Table/TR.tsx

@@ -0,0 +1,14 @@
+import styles from './table.module.css'
+
+function TR({
+  children,
+  ...rest
+}: React.PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>) {
+  return (
+    <tr className={styles.tr} {...rest}>
+      {children}
+    </tr>
+  )
+}
+
+export default TR

packages/design-system/lib/components/Table/index.tsx

@@ -0,0 +1,41 @@
+import TBody from './TBody'
+import TD from './TD'
+import TH from './TH'
+import THead from './THead'
+import TR from './TR'
+import { tableVariants } from './variants'
+
+import type { TableProps } from './table'
+
+function Table({
+  className,
+  intent,
+  borderRadius,
+  variant,
+  layout,
+  width = '100%',
+  children,
+  ...props
+}: TableProps) {
+  const classNames = tableVariants({
+    className,
+    borderRadius,
+    intent,
+    layout,
+    variant,
+  })
+
+  return (
+    <table className={classNames} style={{ width }} {...props}>
+      {children}
+    </table>
+  )
+}
+
+Table.THead = THead
+Table.TH = TH
+Table.TBody = TBody
+Table.TD = TD
+Table.TR = TR
+
+export default Table

packages/design-system/lib/components/Table/table.module.css

@@ -0,0 +1,66 @@
+.table {
+  border-collapse: collapse;
+  overflow: hidden;
+  min-width: 100%;
+}
+
+.thead {
+  color: var(--Base-Text-High-contrast);
+  background-color: var(--Base-Surface-Primary-dark-Normal);
+}
+
+.tbody {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.tr:not(:last-of-type) {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.th {
+  padding: var(--Spacing-x2);
+  text-align: left;
+}
+
+.td {
+  padding: var(--Spacing-x2);
+}
+
+.fixed {
+  table-layout: fixed;
+}
+
+.smallRadius {
+  border-radius: var(--Corner-radius-sm);
+}
+.mediumRadius {
+  border-radius: var(--Corner-radius-md);
+}
+.largeRadius {
+  border-radius: var(--Corner-radius-lg);
+}
+
+.content .thead {
+  background-color: var(--Base-Surface-Subtle-Hover);
+}
+
+.content .tbody {
+  background-color: var(--Background-Primary);
+}
+
+.content.striped .tbody .tr:nth-child(odd) {
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+.content.striped .tbody .tr:nth-child(even) {
+  background-color: var(--Background-Primary);
+}
+
+@media screen and (min-width: 768px) {
+  .th {
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+  }
+
+  .td {
+    padding: var(--Spacing-x3);
+  }
+}

packages/design-system/lib/components/Table/table.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { tableVariants } from './variants'
+
+export interface TableProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,
+    VariantProps<typeof tableVariants> {
+  width?: string
+}
+
+export interface THeadProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableCellElement>> {
+  width?: string
+}

packages/design-system/lib/components/Table/variants.ts

@@ -0,0 +1,27 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './table.module.css'
+
+export const tableVariants = cva(styles.table, {
+  variants: {
+    intent: {
+      light: styles.light,
+      striped: styles.striped,
+    },
+    variant: {
+      content: styles.content,
+    },
+    borderRadius: {
+      none: '',
+      small: styles.smallRadius,
+      medium: styles.mediumRadius,
+      large: styles.largeRadius,
+    },
+    layout: {
+      fixed: styles.fixed,
+    },
+  },
+  defaultVariants: {
+    borderRadius: 'medium',
+  },
+})