[BOOKINGSG-9219][GZ] migrate badge to linaria

e2e/nextjs-app/src/app/components/badge/anchored.e2e.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "@lifesg/react-design-system";
+import { Avatar } from "@lifesg/react-design-system/avatar";
+import { Badge } from "@lifesg/react-design-system/badge";
+
+export default function Story() {
+    return (
+        <div className="story-row-container">
+            <Badge data-testid="badge-anchored-dot" count={8} variant="dot">
+                <Button styleType="secondary" />
+            </Badge>
+
+            <Badge
+                data-testid="badge-anchored-offset"
+                count={8}
+                badgeOffset={["25%", "50%"]}
+            >
+                <Button styleType="secondary" />
+            </Badge>
+
+            <Badge
+                data-testid="badge-anchored-dot-border"
+                count={8}
+                variant="dot-with-border"
+                badgeOffset={["-4px", "4px"]}
+            >
+                <Avatar>Example</Avatar>
+            </Badge>
+
+            <Badge data-testid="badge-anchored-avatar" count={8}>
+                <Avatar>Example</Avatar>
+            </Badge>
+        </div>
+    );
+}

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

@@ -0,0 +1,4 @@
+.wrapper {
+    padding: 1em;
+    background-color: burlywood;
+}

e2e/nextjs-app/src/app/components/badge/count.e2e.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { Badge } from "@lifesg/react-design-system/badge";
+
+export default function Story() {
+    return (
+        <div className="story-row-container">
+            <Badge data-testid="badge-count-8" count={8} />
+            <Badge data-testid="badge-count-88" count={88} />
+            <Badge data-testid="badge-count-209" count={209} />
+            <Badge data-testid="badge-count-1000" count={1000} />
+            <Badge data-testid="badge-count-2090" count={2090} />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/badge/variants.e2e.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Badge } from "@lifesg/react-design-system/badge";
+import clsx from "clsx";
+import styles from "./badge.module.css";
+
+export default function Story() {
+    return (
+        <div className={clsx("story-column-container", styles.wrapper)}>
+            <div className={"story-row-container"}>
+                <Badge
+                    data-testid="badge-dot-default"
+                    count={8}
+                    variant="dot"
+                />
+                <Badge
+                    data-testid="badge-dot-border-default"
+                    count={8}
+                    variant="dot-with-border"
+                />
+                <Badge
+                    data-testid="badge-number-default"
+                    count={8}
+                    variant="number"
+                />
+                <Badge
+                    data-testid="badge-number-border-default"
+                    count={8}
+                    variant="number-with-border"
+                />
+                <Badge
+                    data-testid="badge-square-number-default"
+                    count={8}
+                    variant="square-number"
+                />
+            </div>
+
+            <div className="story-row-container">
+                <Badge
+                    data-testid="badge-dot-important"
+                    count={8}
+                    color="important"
+                    variant="dot"
+                />
+                <Badge
+                    data-testid="badge-dot-border-important"
+                    count={8}
+                    color="important"
+                    variant="dot-with-border"
+                />
+                <Badge
+                    data-testid="badge-number-important"
+                    count={8}
+                    color="important"
+                    variant="number"
+                />
+                <Badge
+                    data-testid="badge-number-border-important"
+                    count={8}
+                    color="important"
+                    variant="number-with-border"
+                />
+                <Badge
+                    data-testid="badge-square-number-important"
+                    count={8}
+                    color="important"
+                    variant="square-number"
+                />
+            </div>
+        </div>
+    );
+}

e2e/tests/components/badge/badge.e2e.spec.ts

@@ -0,0 +1,77 @@
+import { test as base, expect, Locator, Page } from "@playwright/test";
+import { AbstractStoryPage, compareScreenshot } from "../../utils";
+
+class StoryPage extends AbstractStoryPage {
+    protected readonly component = "badge";
+
+    public readonly locators: {
+        variantsRowDefault: Locator;
+        variantsRowImportant: Locator;
+        badgeCount1000: Locator;
+        badgeCount2090: Locator;
+        anchoredOffset: Locator;
+        anchoredAvatar: Locator;
+    };
+
+    constructor(page: Page) {
+        super(page);
+
+        this.locators = {
+            variantsRowDefault: page.getByTestId("badge-dot-default"),
+            variantsRowImportant: page.getByTestId("badge-dot-important"),
+            badgeCount1000: page.getByTestId("badge-count-1000"),
+            badgeCount2090: page.getByTestId("badge-count-2090"),
+            anchoredOffset: page.getByTestId("badge-anchored-offset"),
+            anchoredAvatar: page.getByTestId("badge-anchored-avatar"),
+        };
+    }
+}
+
+const test = base.extend<{ story: StoryPage }>({
+    story: async ({ page }, mountStory) => {
+        const story = new StoryPage(page);
+        await mountStory(story);
+    },
+});
+
+test.describe("Badge", () => {
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("variants");
+        });
+
+        test("Variants", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("variants", { mode: "dark" });
+        });
+
+        test("Variants dark mode", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("count");
+        });
+
+        test("Count formatting", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("anchored");
+        });
+
+        test("Anchored positioning and offset", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+        });
+    });
+});