[BOOKINGSG-9293][ZZ] migrate table to linaria

e2e/nextjs-app/src/app/components/table/basic.e2e.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { Table } from "@lifesg/react-design-system/table";
+
+export default function Story() {
+    return (
+        <Table data-testid="table">
+            <Table.Head>
+                <Table.Row>
+                    <Table.HeaderCell>Name</Table.HeaderCell>
+                    <Table.HeaderCell>Email</Table.HeaderCell>
+                    <Table.HeaderCell>Status</Table.HeaderCell>
+                </Table.Row>
+            </Table.Head>
+            <Table.Body>
+                <Table.Row data-testid="row-1">
+                    <Table.Cell>Alice Tan</Table.Cell>
+                    <Table.Cell>alice@example.com</Table.Cell>
+                    <Table.Cell>Active</Table.Cell>
+                </Table.Row>
+                <Table.Row data-testid="row-2">
+                    <Table.Cell>Bob Lim</Table.Cell>
+                    <Table.Cell>bob@example.com</Table.Cell>
+                    <Table.Cell>Inactive</Table.Cell>
+                </Table.Row>
+                <Table.Row data-testid="row-3">
+                    <Table.Cell>Carol Wong</Table.Cell>
+                    <Table.Cell>carol@example.com</Table.Cell>
+                    <Table.Cell>Pending</Table.Cell>
+                </Table.Row>
+            </Table.Body>
+        </Table>
+    );
+}

e2e/nextjs-app/src/app/components/table/horizontal-overflow.e2e.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { Table } from "@lifesg/react-design-system/table";
+import styles from "./table.module.css";
+
+export default function Story() {
+    return (
+        <div className={styles["table-overflow"]}>
+            <Table data-testid="table">
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>First name</Table.HeaderCell>
+                        <Table.HeaderCell>Last name</Table.HeaderCell>
+                        <Table.HeaderCell>Email address</Table.HeaderCell>
+                        <Table.HeaderCell>Department</Table.HeaderCell>
+                        <Table.HeaderCell>Status</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>Alice</Table.Cell>
+                        <Table.Cell>Tan</Table.Cell>
+                        <Table.Cell>alice@example.com</Table.Cell>
+                        <Table.Cell>Engineering</Table.Cell>
+                        <Table.Cell>Active</Table.Cell>
+                    </Table.Row>
+                    <Table.Row>
+                        <Table.Cell>Bob</Table.Cell>
+                        <Table.Cell>Lim</Table.Cell>
+                        <Table.Cell>bob@example.com</Table.Cell>
+                        <Table.Cell>Design</Table.Cell>
+                        <Table.Cell>Inactive</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/table/table.module.css

@@ -0,0 +1,7 @@
+.table-overflow {
+    width: 400px;
+}
+
+.table-vertical-overflow {
+    max-height: 200px;
+}

e2e/nextjs-app/src/app/components/table/vertical-overflow.e2e.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { Table } from "@lifesg/react-design-system/table";
+import styles from "./table.module.css";
+
+export default function Story() {
+    return (
+        <Table.Container
+            data-testid="table-wrapper"
+            className={styles["table-vertical-overflow"]}
+        >
+            <Table.Table data-testid="table">
+                <Table.Head>
+                    <Table.Row>
+                        <Table.HeaderCell>Name</Table.HeaderCell>
+                        <Table.HeaderCell>Email</Table.HeaderCell>
+                        <Table.HeaderCell>Status</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Head>
+                <Table.Body>
+                    {Array.from({ length: 10 }).map((_, i) => (
+                        <Table.Row key={i} data-testid={`row-${i + 1}`}>
+                            <Table.Cell>User {i + 1}</Table.Cell>
+                            <Table.Cell>user{i + 1}@example.com</Table.Cell>
+                            <Table.Cell>
+                                {i % 2 === 0 ? "Active" : "Inactive"}
+                            </Table.Cell>
+                        </Table.Row>
+                    ))}
+                </Table.Body>
+            </Table.Table>
+        </Table.Container>
+    );
+}

e2e/tests/components/table/table.e2e.spec.ts

@@ -0,0 +1,107 @@
+import { test as base, expect, Locator, Page } from "@playwright/test";
+import { AbstractStoryPage, compareScreenshot } from "../../utils";
+
+class StoryPage extends AbstractStoryPage {
+    protected readonly component = "table";
+
+    public readonly locators: {
+        table: Locator;
+        tableWrapper: Locator;
+    };
+
+    constructor(page: Page) {
+        super(page);
+
+        this.locators = {
+            table: page.getByTestId("table"),
+            tableWrapper: page.getByTestId("table-wrapper"),
+        };
+    }
+}
+
+const test = base.extend<{ story: StoryPage }>({
+    story: async ({ page }, use) => {
+        const story = new StoryPage(page);
+        await use(story);
+    },
+});
+
+test.describe("Table", () => {
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("basic");
+        });
+
+        test("Default table", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+
+            await expect(story.locators.table).toMatchAriaSnapshot(`
+                - table:
+                  - rowgroup:
+                    - row "Name Email Status":
+                      - columnheader "Name"
+                      - columnheader "Email"
+                      - columnheader "Status"
+                  - rowgroup:
+                    - row "Alice Tan alice@example.com Active":
+                      - cell "Alice Tan"
+                      - cell "alice@example.com"
+                      - cell "Active"
+                    - row "Bob Lim bob@example.com Inactive":
+                      - cell "Bob Lim"
+                      - cell "bob@example.com"
+                      - cell "Inactive"
+                    - row "Carol Wong carol@example.com Pending":
+                      - cell "Carol Wong"
+                      - cell "carol@example.com"
+                      - cell "Pending"
+            `);
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("basic", { mode: "dark" });
+        });
+
+        test("Default table (dark mode)", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("horizontal-overflow");
+        });
+
+        test("Horizontal overflow scrollable table", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+
+        test("Table can be scrolled horizontally", async ({ story }) => {
+            await story.locators.tableWrapper.hover();
+            await story.page.mouse.wheel(200, 0);
+            await compareScreenshot(story, "scrolled", {
+                locator: story.locators.tableWrapper,
+            });
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("vertical-overflow");
+        });
+
+        test("Vertical overflow scrollable table", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+
+        test("Table can be scrolled vertically", async ({ story }) => {
+            await story.locators.tableWrapper.hover();
+            await story.page.mouse.wheel(0, 200);
+            await compareScreenshot(story, "scrolled", {
+                locator: story.locators.tableWrapper,
+            });
+        });
+    });
+});

src/table/table.styles.ts

@@ -0,0 +1,79 @@
+import { css } from "@linaria/core";
+
+import { Border, Colour, Radius, Spacing } from "../theme";
+
+// =============================================================================
+// STYLES CONSTANTS
+// =============================================================================
+const borderColor = Colour["border"];
+const fontColor = Colour["text"];
+
+// =============================================================================
+// STYLES
+// =============================================================================
+export const tableWrapper = css`
+    overflow: auto;
+    border: ${Border["width-010"]} ${Border["solid"]} ${borderColor};
+    border-radius: ${Radius["md"]};
+
+    /* Hide scrollbar */
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    * {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+`;
+
+export const tableComponent = css`
+    text-align: left;
+    border-collapse: separate;
+    border-spacing: 0;
+    width: 100%;
+`;
+
+export const tableBody = css`
+    :where(tr:last-child) {
+        td {
+            border-bottom: none;
+        }
+    }
+`;
+
+export const headerCell = css`
+    padding: ${Spacing["spacing-20"]} ${Spacing["spacing-16"]};
+    text-align: left;
+    cursor: default;
+    vertical-align: middle;
+    color: ${fontColor};
+    background-color: ${Colour["bg-stronger"]};
+    height: 6rem;
+    border-bottom: ${Border["width-010"]} ${Border["solid"]} ${borderColor};
+
+    &:where(&:first-child) {
+        padding-left: ${Spacing["spacing-24"]};
+    }
+    &:where(&:last-child) {
+        padding-right: ${Spacing["spacing-24"]};
+    }
+`;
+
+export const bodyRow = css`
+    background-color: ${Colour["bg"]};
+    border-top: ${Border["width-010"]} ${Border["solid"]} ${borderColor};
+`;
+
+export const bodyCell = css`
+    padding: ${Spacing["spacing-20"]} ${Spacing["spacing-16"]};
+    vertical-align: middle;
+    color: ${fontColor};
+    border-bottom: ${Border["width-010"]} ${Border["solid"]} ${borderColor};
+
+    &:where(&:first-child) {
+        padding-left: ${Spacing["spacing-24"]};
+    }
+    &:where(&:last-child) {
+        padding-right: ${Spacing["spacing-24"]};
+    }
+`;