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/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx

@@ -5,12 +5,12 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
 import Link from "@scandic-hotels/design-system/Link"
+import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { Transactions } from "@scandic-hotels/trpc/enums/transactions"
 
 import { webviews } from "@/constants/routes/webviews"
 
-import Table from "@/components/TempDesignSystem/Table"
 import useLang from "@/hooks/useLang"
 
 import AwardPoints from "../../../AwardPoints"

apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/index.tsx

@@ -2,10 +2,9 @@
 
 import { useIntl } from "react-intl"
 
+import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Table from "@/components/TempDesignSystem/Table"
-
 import Row from "./Row"
 
 import styles from "./clientTable.module.css"

apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/ExpiringPointsTable/index.tsx

@@ -3,9 +3,9 @@
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Table from "@/components/TempDesignSystem/Table"
 import useLang from "@/hooks/useLang"
 
 import AwardPoints from "../../EarnAndBurn/AwardPoints"

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

@@ -8,11 +8,12 @@ import {
 } from "@tanstack/react-table"
 import { useState } from "react"
 
+import Table from "@scandic-hotels/design-system/Table"
+
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
-import Table from "@/components/TempDesignSystem/Table"
 
 import styles from "./table.module.css"
 

apps/scandic-web/components/ContentType/HotelSubpage/HtmlContent/index.tsx

@@ -2,10 +2,9 @@ import { ElementType } from "domelementtype"
 import parse, { type DOMNode, Element, type Text } from "html-react-parser"
 
 import Link from "@scandic-hotels/design-system/Link"
+import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Table from "@/components/TempDesignSystem/Table"
-
 import { NodeNames } from "./utils"
 
 import styles from "./htmlContent.module.css"

apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -7,6 +7,7 @@ import Image from "@scandic-hotels/design-system/Image"
 import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
 import Link from "@scandic-hotels/design-system/Link"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import Table from "@scandic-hotels/design-system/Table"
 import Title from "@scandic-hotels/design-system/Title"
 import {
   AvailableParagraphFormatEnum,
@@ -15,7 +16,6 @@ import {
 } from "@scandic-hotels/trpc/types/RTEenums"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import Table from "../TempDesignSystem/Table"
 import BiroScript from "../TempDesignSystem/Text/BiroScript"
 import { hasAvailableParagraphFormat, hasAvailableULFormat } from "./utils"
 

apps/scandic-web/components/JsonToHtml/renderOptions.tsx

@@ -5,11 +5,11 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageContainer from "@scandic-hotels/design-system/ImageContainer"
 import Link from "@scandic-hotels/design-system/Link"
+import Table from "@scandic-hotels/design-system/Table"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ContentEnum } from "@scandic-hotels/trpc/types/content"
 import { insertResponseToImageVaultAsset } from "@scandic-hotels/trpc/utils/imageVault"
 
-import Table from "../TempDesignSystem/Table"
 import {
   hasAvailableParagraphFormat,
   hasAvailableULFormat,

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

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

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

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

@@ -1,4 +1,4 @@
-import styles from "./table.module.css"
+import styles from './table.module.css'
 
 function TD({
   children,

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

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

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

@@ -1,4 +1,4 @@
-import styles from "./table.module.css"
+import styles from './table.module.css'
 
 function TR({
   children,

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

@@ -1,11 +1,11 @@
-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 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"
+import type { TableProps } from './table'
 
 function Table({
   className,
@@ -13,7 +13,7 @@ function Table({
   borderRadius,
   variant,
   layout,
-  width = "100%",
+  width = '100%',
   children,
   ...props
 }: TableProps) {

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

@@ -1,6 +1,6 @@
-import type { VariantProps } from "class-variance-authority"
+import type { VariantProps } from 'class-variance-authority'
 
-import type { tableVariants } from "./variants"
+import type { tableVariants } from './variants'
 
 export interface TableProps
   extends React.PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,

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

@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./table.module.css"
+import styles from './table.module.css'
 
 export const tableVariants = cva(styles.table, {
   variants: {
@@ -12,7 +12,7 @@ export const tableVariants = cva(styles.table, {
       content: styles.content,
     },
     borderRadius: {
-      none: "",
+      none: '',
       small: styles.smallRadius,
       medium: styles.mediumRadius,
       large: styles.largeRadius,
@@ -22,6 +22,6 @@ export const tableVariants = cva(styles.table, {
     },
   },
   defaultVariants: {
-    borderRadius: "medium",
+    borderRadius: 'medium',
   },
 })

packages/design-system/package.json

@@ -41,6 +41,7 @@
     "./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
     "./Subtitle": "./lib/components/Subtitle/index.tsx",
     "./Switch": "./lib/components/Switch/index.tsx",
+    "./Table": "./lib/components/Table/index.tsx",
     "./Title": "./lib/components/Title/index.tsx",
     "./Tooltip": "./lib/components/Tooltip/index.tsx",
     "./Typography": "./lib/components/Typography/index.tsx",