[BOOKINGSG-9157] refactor: migrate dropdown-list to linaria and v4 tokens

e2e/nextjs-app/src/app/components/dropdown-list/base-variants.e2e.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Option A", "Option B", "Option C", "Option D"];
+
+export default function Story() {
+    return (
+        <div className="story-row-container">
+            <div data-testid="variant-default">
+                <DropdownListState>
+                    <DropdownList
+                        listItems={ITEMS}
+                        listboxId="listbox-default"
+                        ariaLabel="Default variant"
+                        variant="default"
+                    />
+                </DropdownListState>
+            </div>
+            <div data-testid="variant-small">
+                <DropdownListState>
+                    <DropdownList
+                        listItems={ITEMS}
+                        listboxId="listbox-small"
+                        ariaLabel="Small variant"
+                        variant="small"
+                    />
+                </DropdownListState>
+            </div>
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/custom-cta.e2e.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Option A", "Option B", "Option C"];
+
+export default function Story() {
+    return (
+        <div data-testid="custom-cta-container">
+            <DropdownListState>
+                <DropdownList
+                    listItems={ITEMS}
+                    listboxId="listbox-cta"
+                    ariaLabel="Custom CTA"
+                    renderCustomCallToAction={(dismiss) => (
+                        <button
+                            data-testid="cta-button"
+                            onClick={dismiss}
+                            type="button"
+                        >
+                            Apply
+                        </button>
+                    )}
+                />
+            </DropdownListState>
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/keyboard-nav.e2e.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Option A", "Option B", "Option C", "Option D"];
+
+export default function Story() {
+    const [selected, setSelected] = useState<unknown[]>([]);
+
+    const handleSelectItem = (item: unknown) => {
+        setSelected((prev) => (prev.includes(item) ? [] : [item]));
+    };
+
+    return (
+        <div data-testid="keyboard-nav-container">
+            <DropdownListState>
+                <DropdownList
+                    listItems={ITEMS}
+                    selectedItems={selected}
+                    listboxId="listbox-keyboard"
+                    ariaLabel="Keyboard navigation"
+                    onSelectItem={handleSelectItem}
+                />
+            </DropdownListState>
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/load-states.e2e.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+export default function Story() {
+    const [failRetried, setFailRetried] = useState(false);
+
+    return (
+        <div className="story-column-container">
+            <div data-testid="loading-container">
+                <DropdownListState>
+                    <DropdownList
+                        listItems={[]}
+                        itemsLoadState="loading"
+                        listboxId="listbox-loading"
+                        ariaLabel="Loading state"
+                        onRetry={() => {}}
+                    />
+                </DropdownListState>
+            </div>
+            <div data-testid="fail-container">
+                <DropdownListState>
+                    <DropdownList
+                        listItems={[]}
+                        itemsLoadState="fail"
+                        listboxId="listbox-fail"
+                        ariaLabel="Fail state"
+                        onRetry={() => setFailRetried(true)}
+                    />
+                </DropdownListState>
+            </div>
+            {failRetried && (
+                <div data-testid="retry-triggered">Retry triggered</div>
+            )}
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/multi-selection.e2e.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Option A", "Option B", "Option C", "Option D"];
+
+export default function Story() {
+    const [selected, setSelected] = useState<unknown[]>([]);
+
+    const handleSelectItem = (item: unknown) => {
+        setSelected((prev) =>
+            prev.includes(item)
+                ? prev.filter((i) => i !== item)
+                : [...prev, item]
+        );
+    };
+
+    const handleSelectAll = () => {
+        setSelected((prev) => (prev.length === ITEMS.length ? [] : [...ITEMS]));
+    };
+
+    return (
+        <div data-testid="multi-select-container">
+            <DropdownListState>
+                <DropdownList
+                    listItems={ITEMS}
+                    selectedItems={selected}
+                    multiSelect
+                    listboxId="listbox-multi"
+                    ariaLabel="Multi selection"
+                    onSelectItem={handleSelectItem}
+                    onSelectAll={handleSelectAll}
+                />
+            </DropdownListState>
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/search.e2e.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
+
+export default function Story() {
+    return (
+        <div data-testid="search-container">
+            <DropdownListState>
+                <DropdownList
+                    listItems={ITEMS}
+                    listboxId="listbox-search"
+                    ariaLabel="Search dropdown"
+                    enableSearch
+                />
+            </DropdownListState>
+        </div>
+    );
+}
+
+export const story = { init: Story };

e2e/nextjs-app/src/app/components/dropdown-list/single-selection.e2e.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import {
+    DropdownList,
+    DropdownListState,
+} from "@lifesg/react-design-system/shared/dropdown-list";
+
+const ITEMS = ["Option A", "Option B", "Option C", "Option D"];
+
+export default function Story() {
+    const [selected, setSelected] = useState<unknown[]>([]);
+
+    const handleSelectItem = (item: unknown) => {
+        setSelected((prev) => (prev.includes(item) ? [] : [item]));
+    };
+
+    return (
+        <div data-testid="single-select-container">
+            <DropdownListState>
+                <DropdownList
+                    listItems={ITEMS}
+                    selectedItems={selected}
+                    listboxId="listbox-single"
+                    ariaLabel="Single selection"
+                    onSelectItem={handleSelectItem}
+                />
+            </DropdownListState>
+        </div>
+    );
+}
+
+export const story = { init: Story };