scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* Move Table component to design-system


Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
2025-08-13 14:52:56 +00:00
parent cd29e54098
commit d10fc5ed74
18 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx
View File

@@ -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"

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

@@ -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"

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

@@ -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"

3
apps/scandic-web/components/Blocks/Table/index.tsx
View File

@@ -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"

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

@@ -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"

2
apps/scandic-web/components/DeprecatedJsonToHtml/renderOptions.tsx
View File

@@ -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"

2
apps/scandic-web/components/JsonToHtml/renderOptions.tsx
View File

@@ -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,

7
apps/scandic-web/components/TempDesignSystem/Table/TBody.tsx
View File

@@ -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

14
apps/scandic-web/components/TempDesignSystem/Table/TD.tsx
View File

@@ -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

13
apps/scandic-web/components/TempDesignSystem/Table/TH.tsx
View File

@@ -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

7
apps/scandic-web/components/TempDesignSystem/Table/THead.tsx
View File

@@ -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

14
apps/scandic-web/components/TempDesignSystem/Table/TR.tsx
View File

@@ -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

41
apps/scandic-web/components/TempDesignSystem/Table/index.tsx
View File

@@ -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

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

@@ -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);
}
}

14
apps/scandic-web/components/TempDesignSystem/Table/table.ts
View File

@@ -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
}

27
apps/scandic-web/components/TempDesignSystem/Table/variants.ts
View File

@@ -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",
},
})