[BOOKINGSG-9221][GZ] migrate radio button to linaria

e2e/nextjs-app/src/app/components/radio-button/focusable-when-disabled.e2e.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+import { useState } from "react";
+
+export default function Story() {
+    const [changeCount, setChangeCount] = useState(0);
+
+    return (
+        <div className="story-column-container">
+            <button data-testid="focus-start">Focus start</button>
+
+            <RadioButton
+                disabled
+                focusableWhenDisabled
+                checked={false}
+                onChange={() => setChangeCount((value) => value + 1)}
+            />
+
+            <span data-testid="change-count">{changeCount}</span>
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/radio-button/keyboard-navigation.e2e.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+import { useState } from "react";
+
+export default function Story() {
+    const [checked, setChecked] = useState(false);
+    const [changeCount, setChangeCount] = useState(0);
+
+    return (
+        <div className="story-column-container">
+            <button data-testid="focus-start">Focus start</button>
+
+            <RadioButton
+                checked={checked}
+                onChange={() => {
+                    setChecked(true);
+                    setChangeCount((value) => value + 1);
+                }}
+            />
+
+            <span data-testid="change-count">{changeCount}</span>
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/radio-button/variants.e2e.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { RadioButton } from "@lifesg/react-design-system/radio-button";
+
+export default function Story() {
+    return (
+        <div className="story-column-container">
+            <div className="story-row-container">
+                <RadioButton
+                    data-testid="radio-unchecked-default"
+                    checked={false}
+                />
+                <RadioButton data-testid="radio-checked-default" checked />
+                <RadioButton data-testid="radio-unchecked-disabled" disabled />
+                <RadioButton
+                    data-testid="radio-checked-disabled"
+                    checked
+                    disabled
+                />
+            </div>
+            <div className="story-row-container">
+                <RadioButton
+                    data-testid="radio-unchecked-small"
+                    displaySize="small"
+                    checked={false}
+                />
+                <RadioButton
+                    data-testid="radio-checked-small"
+                    displaySize="small"
+                    checked
+                />
+                <RadioButton
+                    data-testid="radio-unchecked-small-disabled"
+                    disabled
+                    displaySize="small"
+                />
+                <RadioButton
+                    data-testid="radio-checked-small-disabled"
+                    checked
+                    displaySize="small"
+                    disabled
+                />
+            </div>
+        </div>
+    );
+}

e2e/tests/components/radio-button/radio-button.e2e.spec.ts

@@ -0,0 +1,150 @@
+import { test as base, expect, Locator, Page } from "@playwright/test";
+import { AbstractStoryPage, compareScreenshot } from "../../utils";
+
+class StoryPage extends AbstractStoryPage {
+    protected readonly component = "radio-button";
+
+    public readonly locators: {
+        radio: Locator;
+
+        radioUncheckedDefault: Locator;
+        radioCheckedDefault: Locator;
+        radioUncheckedDisabled: Locator;
+        radioCheckedDisabled: Locator;
+        focusStart: Locator;
+        changeCount: Locator;
+    };
+
+    constructor(page: Page) {
+        super(page);
+
+        this.locators = {
+            radio: page.getByRole("radio"),
+
+            radioUncheckedDefault: page.getByTestId("radio-unchecked-default"),
+            radioCheckedDefault: page.getByTestId("radio-checked-default"),
+            radioUncheckedDisabled: page.getByTestId(
+                "radio-unchecked-disabled"
+            ),
+            radioCheckedDisabled: page.getByTestId("radio-checked-disabled"),
+            focusStart: page.getByTestId("focus-start"),
+            changeCount: page.getByTestId("change-count"),
+        };
+    }
+
+    public getContainer(locator: Locator) {
+        return locator.locator("xpath=..");
+    }
+}
+
+const test = base.extend<{ story: StoryPage }>({
+    story: async ({ page }, runStory) => {
+        const story = new StoryPage(page);
+        await runStory(story);
+    },
+});
+
+test.describe("RadioButton", () => {
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("variants");
+        });
+
+        test("Variants", async ({ story }) => {
+            await compareScreenshot(story, "mount");
+
+            await expect(story.layout).toMatchAriaSnapshot(`
+                - radio
+                - radio [checked]
+                - radio [disabled] [checked]
+                - radio [disabled]
+            `);
+
+            await story.locators.radioUncheckedDefault.hover();
+            await compareScreenshot(story, "hover-enabled", {
+                locator: story.getContainer(
+                    story.locators.radioUncheckedDefault
+                ),
+            });
+
+            await story.locators.radioCheckedDefault.hover();
+            await compareScreenshot(story, "hover-checked-enabled", {
+                locator: story.getContainer(story.locators.radioCheckedDefault),
+            });
+
+            await story.locators.radioUncheckedDisabled.hover();
+            await compareScreenshot(story, "hover-disabled", {
+                locator: story.getContainer(
+                    story.locators.radioUncheckedDisabled
+                ),
+            });
+
+            await story.locators.radioCheckedDisabled.hover();
+            await compareScreenshot(story, "hover-checked-disabled", {
+                locator: story.getContainer(
+                    story.locators.radioCheckedDisabled
+                ),
+            });
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("focusable-when-disabled");
+        });
+
+        test("Focusable when disabled", async ({ story }) => {
+            await test.step("Remains disabled", async () => {
+                await expect(story.locators.radio).toHaveAttribute(
+                    "aria-disabled",
+                    "true"
+                );
+
+                await expect(story.locators.radio).toBeDisabled();
+            });
+
+            await test.step("Can receive focus", async () => {
+                await story.locators.focusStart.focus();
+                await story.page.keyboard.press("Tab");
+
+                await expect(story.locators.radio).toBeFocused();
+            });
+
+            await test.step("Do not trigger onChange", async () => {
+                await expect(story.locators.changeCount).toHaveText("0");
+
+                await story.locators.radio.click({
+                    force: true,
+                });
+
+                await story.page.keyboard.press("Space");
+
+                await expect(story.locators.changeCount).toHaveText("0");
+            });
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("keyboard-navigation");
+        });
+
+        test("Keyboard navigation", async ({ story }) => {
+            await test.step("Radio can receive focus", async () => {
+                await story.locators.focusStart.focus();
+                await story.page.keyboard.press("Tab");
+
+                await expect(story.locators.radio).toBeFocused();
+            });
+
+            await test.step("Space key checks radio and fires onChange", async () => {
+                await expect(story.locators.changeCount).toHaveText("0");
+
+                await story.page.keyboard.press("Space");
+
+                await expect(story.locators.radio).toBeChecked();
+                await expect(story.locators.changeCount).toHaveText("1");
+            });
+        });
+    });
+});

src/radio-button/radio-button.styles.ts

@@ -0,0 +1,66 @@
+import { css } from "@linaria/core";
+
+import { Colour, Motion } from "../theme";
+
+export const classes = {} as const;
+
+export const container = css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    &[data-display-size="small"] {
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+
+    &[data-display-size="default"] {
+        height: 2rem;
+        width: 2rem;
+    }
+`;
+
+export const icon = css`
+    height: 100%;
+    width: 100%;
+    transition: ${Motion["duration-150"]} ${Motion["ease-default"]};
+`;
+
+export const uncheckedIcon = css`
+    color: ${Colour["icon-subtle"]};
+`;
+
+export const uncheckedIconDisabled = css`
+    color: ${Colour["icon-disabled-subtle"]};
+`;
+
+export const checkedIcon = css`
+    color: ${Colour["icon-selected"]};
+`;
+
+export const checkedIconDisabled = css`
+    color: ${Colour["icon-selected-disabled"]};
+`;
+
+export const input = css`
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    cursor: not-allowed;
+    z-index: 1;
+
+    appearance: none;
+    background: transparent;
+    border: none;
+`;
+
+export const inputActive = css`
+    cursor: pointer;
+
+    &:hover + svg {
+        @media (pointer: fine) {
+            color: ${Colour["icon-hover"]};
+        }
+    }
+`;