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

apps/scandic-web/components/TempDesignSystem/Table/TBody.tsx

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

apps/scandic-web/components/TempDesignSystem/Table/TD.tsx

@@ -1,14 +0,0 @@
-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

apps/scandic-web/components/TempDesignSystem/Table/TH.tsx

@@ -1,13 +0,0 @@
-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

apps/scandic-web/components/TempDesignSystem/Table/THead.tsx

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

apps/scandic-web/components/TempDesignSystem/Table/TR.tsx

@@ -1,14 +0,0 @@
-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

apps/scandic-web/components/TempDesignSystem/Table/index.tsx

@@ -1,41 +0,0 @@
-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

apps/scandic-web/components/TempDesignSystem/Table/table.module.css

@@ -1,66 +0,0 @@
-.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);
-  }
-}

apps/scandic-web/components/TempDesignSystem/Table/table.ts

@@ -1,14 +0,0 @@
-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
-}

apps/scandic-web/components/TempDesignSystem/Table/variants.ts

@@ -1,27 +0,0 @@
-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",
-  },
-})