@nulogy/components 16.0.2 → 16.0.4

package/dist/src/DatePickers/stories/DatePicker.story.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { DatePicker } from "../index";
 import { Button } from "../..";
 const selectedDateExamples = [
@@ -27,6 +28,22 @@ export const Default = {
             options: selectedDateExamples,
         },
     },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct date selected by default", async () => {
+            await expect(canvas.getByLabelText("select a date")).toHaveValue("2019-Jan-01");
+        });
+        await step("can open a calendar on click", async () => {
+            expect(document.querySelector(".react-datepicker-popper")).toBeNull();
+            await userEvent.click(canvas.getByLabelText("select a date"));
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).toBeInTheDocument());
+        });
+        await step("closes the calendar after selecting a date", async () => {
+            const day2 = document.querySelector(".react-datepicker__day--002");
+            await userEvent.click(day2);
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithCustomDateFormat = {
     args: {
@@ -47,7 +64,31 @@ export const WithCustomDateFormat = {
 };
 export const WithCustomPlaceholder = () => (_jsx(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date", placeholder: "Month day, year" } }));
 export const WithErrorState = () => (_jsx(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, errorMessage: "The date is invalid" }));
-export const WithMinAndMaxDate = () => (_jsx(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
+export const WithMinAndMaxDate = {
+    render: () => (_jsx(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } })),
+    name: "with min and max date",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has the correct date selected", async () => {
+            await expect(canvas.getByLabelText("select a date")).toHaveValue("2019-Jan-05");
+        });
+        await step("cannot navigate past the max date with arrow keys", async () => {
+            const input = canvas.getByLabelText("select a date");
+            await userEvent.click(input);
+            for (let i = 0; i < 6; i++) {
+                await userEvent.keyboard("{ArrowUp}");
+            }
+            await expect(input).toHaveValue("2019-Jan-10");
+        });
+        await step("cannot navigate past the min date with arrow keys", async () => {
+            const input = canvas.getByLabelText("select a date");
+            for (let i = 0; i < 10; i++) {
+                await userEvent.keyboard("{ArrowDown}");
+            }
+            await expect(input).toHaveValue("2019-Jan-03");
+        });
+    },
+};
 export const DisableFlipping = {
     args: {
         selected: selectedDateExamples[0],

package/dist/src/DatePickers/stories/MonthPicker.story.d.ts

@@ -2,7 +2,14 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithPlaceholder: () => import("react/jsx-runtime").JSX.Element;
 export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithDefaultValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/stories/MonthPicker.story.js

@@ -1,12 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { format } from "date-fns";
 import MonthPicker from "../MonthPicker";
 export default {
     title: "Components/DatePickers/MonthPicker",
 };
-export const Default = () => {
-    return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date" } });
+export const Default = {
+    render: () => _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date" } }),
+    name: "Default",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can open a month picker on click", async () => {
+            expect(document.querySelector(".react-datepicker-popper")).toBeNull();
+            await userEvent.click(canvas.getByLabelText("select a date"));
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).toBeInTheDocument());
+        });
+        await step("displays 12 months", async () => {
+            const monthElements = document.querySelectorAll(".react-datepicker__month-text");
+            expect(monthElements).toHaveLength(12);
+        });
+        await step("can select a month by clicking", async () => {
+            const marchOption = Array.from(document.querySelectorAll(".react-datepicker__month-text")).find((el) => el.textContent === "Mar");
+            await userEvent.click(marchOption);
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithPlaceholder = () => {
     return _jsx(MonthPicker, { inputProps: { labelText: "Expiry Date", placeholder: "Select month" } });

package/dist/src/DatePickers/stories/WeekPicker.story.d.ts

@@ -2,11 +2,39 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithError: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithMinMaxDates: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithMinMaxDates: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithCustomDateFormat: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithPreselectedDate: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithCustomLocale: () => import("react/jsx-runtime").JSX.Element;
-export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomLocale: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
+export declare const Disabled: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const AdvancedUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DatePickers/stories/WeekPicker.story.js

@@ -1,23 +1,72 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { format } from "date-fns";
 import { Text } from "../../Type";
 import WeekPicker from "../WeekPicker";
 export default {
     title: "Components/DatePickers/WeekPicker",
 };
-export const Default = () => _jsx(WeekPicker, { inputProps: { labelText: "Expiry Date" } });
+export const Default = {
+    render: () => _jsx(WeekPicker, { inputProps: { labelText: "Expiry Date" } }),
+    name: "Default",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can open a calendar on click", async () => {
+            expect(document.querySelector(".react-datepicker-popper")).toBeNull();
+            await userEvent.click(canvas.getByLabelText("select a date"));
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).toBeInTheDocument());
+        });
+        await step("shows week numbers in the calendar", async () => {
+            expect(document.querySelector(".react-datepicker__week-number")).toBeTruthy();
+        });
+    },
+};
 export const WithError = () => (_jsx(WeekPicker, { inputProps: { labelText: "Week Selection" }, errorMessage: "Please select a valid week" }));
-export const WithMinMaxDates = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x2", children: "If a min or a max day falls in the middle of the week, no day in the week will be selectable." }), _jsx(WeekPicker, { inputProps: { labelText: "Select Week" }, minDate: new Date("01/15/2025"), maxDate: new Date("01/29/2025") })] }));
+export const WithMinMaxDates = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x2", children: "If a min or a max day falls in the middle of the week, no day in the week will be selectable." }), _jsx(WeekPicker, { inputProps: { labelText: "Select Week" }, minDate: new Date("01/15/2025"), maxDate: new Date("01/29/2025") })] })),
+    name: "with min max dates",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("disables dates outside min/max range", async () => {
+            await userEvent.click(canvas.getByLabelText("select a date"));
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).toBeInTheDocument());
+            expect(document.querySelector(".react-datepicker__day--disabled")).toBeTruthy();
+        });
+    },
 };
 export const WithCustomDateFormat = () => (_jsx(WeekPicker, { inputProps: { labelText: "Week", inputWidth: "320px" }, dateFormat: "'Week starting' dd/MM/yyyy" }));
 export const WithPreselectedDate = () => (_jsx(WeekPicker, { inputProps: { labelText: "Selected Week" }, selected: new Date("01/21/2025") }));
-export const WithCustomLocale = () => _jsx(WeekPicker, { inputProps: { labelText: "Semaine" }, locale: "fr_FR" });
-export const Disabled = () => (_jsx(WeekPicker, { inputProps: {
-        labelText: "Week Selection",
-        disabled: true,
-    } }));
+export const WithCustomLocale = {
+    render: () => _jsx(WeekPicker, { inputProps: { labelText: "Semaine" }, locale: "fr_FR" }),
+    name: "with custom locale",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("displays weekdays in French", async () => {
+            await userEvent.click(canvas.getByLabelText("select a date"));
+            await waitFor(() => expect(document.querySelector(".react-datepicker-popper")).toBeInTheDocument());
+            const dayNames = document.querySelectorAll(".react-datepicker__day-name");
+            expect(dayNames[1].textContent).toContain("lu");
+        });
+    },
+};
+export const Disabled = {
+    render: () => (_jsx(WeekPicker, { inputProps: {
+            labelText: "Week Selection",
+            disabled: true,
+        } })),
+    name: "disabled",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("has a disabled input", async () => {
+            await expect(canvas.getByLabelText("select a date")).toBeDisabled();
+        });
+        await step("cannot open the calendar when disabled", async () => {
+            await userEvent.click(canvas.getByLabelText("select a date"), { pointerEventsCheck: 0 });
+            expect(document.querySelector(".react-datepicker-popper")).toBeNull();
+        });
+    },
+};
 export const AdvancedUsage = () => {
     const [selectedWeek, setSelectedWeek] = useState(null);
     const [inputValue, setInputValue] = useState("");

package/dist/src/DateRange/DateRange.story.d.ts

@@ -3,13 +3,27 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const DefaultStartAndEndDate: () => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultStartAndEndDate: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const DisabledRangeValidation: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomError: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomizingInputProps: () => import("react/jsx-runtime").JSX.Element;
 export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
 export declare const IndividualInputError: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithTimes: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithTimes: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const CustomizingInputPropsWithTimes: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithDefaultStartAndEndTimes: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithTimeError: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/DateRange/DateRange.story.js

@@ -1,13 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Button, Box, Flex, PrimaryButton } from "..";
 import DateRange from "./DateRange";
 export default {
     title: "Components/DateRange",
 };
 export const Default = () => (_jsx(DateRange, { p: "x3", onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const DefaultStartAndEndDate = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
+export const DefaultStartAndEndDate = {
+    render: () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") })),
+    name: "default start and end date",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows start date marker in calendar when end date input is clicked", async () => {
+            await userEvent.click(canvas.getByLabelText("Select an end date"));
+            await waitFor(() => expect(document.querySelector(".nds-datepicker-day--start-date")).toBeInTheDocument());
+        });
+        await step("shows an error when start date is set after end date", async () => {
+            await userEvent.click(canvas.getByLabelText("Select a start date"));
+            const day8 = document.querySelector(".react-datepicker__day--008");
+            await userEvent.click(day8);
+            await waitFor(() => expect(canvas.getByText("End date is before start date")).toBeVisible());
+        });
+    },
+};
 export const DisabledRangeValidation = () => (_jsx(DateRange, { disableRangeValidation: true, defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), defaultStartDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
 export const WithCustomError = () => (_jsx(DateRange, { errorMessage: "This range conflicts with another range", defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
 export const CustomizingInputProps = () => (_jsx(DateRange, { startDateInputProps: {
@@ -39,7 +56,28 @@ export const Disabled = () => {
         } }));
 };
 export const IndividualInputError = () => (_jsx(DateRange, { errorMessage: "Start date is required", startDateInputProps: { required: true }, defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed") }));
-export const WithTimes = () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
+export const WithTimes = {
+    render: () => (_jsx(DateRange, { defaultStartDate: new Date("2019-01-01T05:00:00.000Z"), defaultEndDate: new Date("2019-01-05T05:00:00.000Z"), onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true })),
+    name: "with times",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows an error when start time is after end time on the same day", async () => {
+            await userEvent.click(canvas.getByLabelText("Select a start date"));
+            const day8Start = document.querySelector(".react-datepicker__day--008");
+            await userEvent.click(day8Start);
+            await userEvent.click(canvas.getByLabelText("Select a start time"));
+            const startOptions = within(canvas.getByTestId("daterange-start-time")).getAllByTestId(/select-option/);
+            await userEvent.click(startOptions[4]);
+            await userEvent.click(canvas.getByLabelText("Select an end time"));
+            const endOptions = within(canvas.getByTestId("daterange-end-time")).getAllByTestId(/select-option/);
+            await userEvent.click(endOptions[3]);
+            await userEvent.click(canvas.getByLabelText("Select an end date"));
+            const day8End = document.querySelector(".react-datepicker__day--008");
+            await userEvent.click(day8End);
+            await waitFor(() => expect(canvas.getByText("End time is before start time")).toBeVisible());
+        });
+    },
+};
 export const CustomizingInputPropsWithTimes = () => (_jsx(DateRange, { startDateInputProps: { placeholder: "From", inputWidth: "280px" }, endDateInputProps: { placeholder: "To", inputWidth: "280px" }, onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), showTimes: true }));
 export const WithDefaultStartAndEndTimes = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-09-10T05:00:00.000Z"), showTimes: true, defaultStartTime: "03:30", defaultEndTime: "13:30" }));
 export const WithTimeError = () => (_jsx(DateRange, { onRangeChange: action("range changed"), onStartDateChange: action("start date changed"), onEndDateChange: action("end date changed"), defaultStartDate: new Date("2019-07-05T05:00:00.000Z"), defaultEndDate: new Date("2019-07-05T05:00:00.000Z"), showTimes: true, defaultStartTime: "13:30", defaultEndTime: "10:30" }));

package/dist/src/DescriptionList/stories/DescriptionList.column.story.d.ts

@@ -7,7 +7,7 @@ export default _default;
 export declare const TwoColumns: () => import("react/jsx-runtime").JSX.Element;
 export declare const ThreeColumns: () => import("react/jsx-runtime").JSX.Element;
 export declare const ResponsiveColumns: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

package/dist/src/DescriptionList/stories/DescriptionList.column.story.js

@@ -22,13 +22,15 @@ const ColumnDemo = ({ resizable = false, columns, title, description, info, }) =
 };
 export const TwoColumns = () => _jsx(ColumnDemo, { title: "Two Columns", columns: 2 });
 export const ThreeColumns = () => _jsx(ColumnDemo, { title: "Three Columns", columns: 3 });
-export const ResponsiveColumns = () => (_jsx(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] }) }));
-ResponsiveColumns.parameters = {
-    chromatic: {
-        viewports: [
-            parseInt(legacy.breakpoints.small),
-            parseInt(legacy.breakpoints.medium),
-            parseInt(legacy.breakpoints.large),
-        ],
+export const ResponsiveColumns = {
+    render: () => (_jsx(ColumnDemo, { resizable: true, title: "Responsive Columns", columns: { small: 1, medium: 3, large: 6 }, description: "Small: 1 column, Medium: 3 columns, Large: 6 columns", info: _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] }) })),
+    parameters: {
+        chromatic: {
+            viewports: [
+                parseInt(legacy.breakpoints.small),
+                parseInt(legacy.breakpoints.medium),
+                parseInt(legacy.breakpoints.large),
+            ],
+        },
     },
 };

package/dist/src/DescriptionList/stories/DescriptionList.group-min-width.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.d.ts

@@ -7,7 +7,7 @@ export default _default;
 export declare const Inline: () => import("react/jsx-runtime").JSX.Element;
 export declare const Stacked: () => import("react/jsx-runtime").JSX.Element;
 export declare const Auto: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             viewports: number[];

package/dist/src/DescriptionList/stories/DescriptionList.layout.story.js

@@ -18,15 +18,17 @@ export const Inline = () => {
 export const Stacked = () => {
     return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "Stacked Layout" }), _jsx(DescriptionList, { layout: "stacked", children: _jsx(SampleContent, {}) })] }));
 };
-export const Auto = () => {
-    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "Auto Layout" }), _jsxs(Text, { fontSize: "sm", children: ["Automatically switches between ", _jsx(Code, { children: "stacked" }), " and ", _jsx(Code, { children: "inline" }), " layouts based on the specified container width. Default breakpoint is set to ", _jsx(Code, { children: "640px" }), "."] }), _jsxs(Flex, { alignItems: "center", gap: "half", mb: "x2", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] })] })] }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px", children: _jsx(SampleContent, {}) }) })] }));
-};
-Auto.parameters = {
-    chromatic: {
-        viewports: [
-            parseInt(legacy.breakpoints.extraSmall),
-            parseInt(legacy.breakpoints.small),
-            parseInt(legacy.breakpoints.medium),
-        ],
+export const Auto = {
+    render: () => {
+        return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "Auto Layout" }), _jsxs(Text, { fontSize: "sm", children: ["Automatically switches between ", _jsx(Code, { children: "stacked" }), " and ", _jsx(Code, { children: "inline" }), " layouts based on the specified container width. Default breakpoint is set to ", _jsx(Code, { children: "640px" }), "."] }), _jsxs(Flex, { alignItems: "center", gap: "half", mb: "x2", children: [_jsx(Icon, { icon: "info", color: "midGrey" }), _jsxs(Text, { fontSize: "sm", color: "darkGrey", children: ["The breakpoint is based on the container width, not the viewport width. See component", " ", _jsx(Link, { href: "https://github.com/nulogy/design-system/blob/main/src/DescriptionList/README.md", children: "documentation" }), "."] })] })] }), _jsx(Resizable, { containerWidth: "100%", showContainerOutline: true, children: _jsx(DescriptionList, { layout: "auto", autoLayoutBreakpoint: "640px", children: _jsx(SampleContent, {}) }) })] }));
+    },
+    parameters: {
+        chromatic: {
+            viewports: [
+                parseInt(legacy.breakpoints.extraSmall),
+                parseInt(legacy.breakpoints.small),
+                parseInt(legacy.breakpoints.medium),
+            ],
+        },
     },
 };

package/dist/src/DescriptionList/stories/DescriptionList.playground.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;

package/dist/src/DescriptionList/stories/DescriptionList.story.d.ts

@@ -2,6 +2,7 @@ import DescriptionList from "../DescriptionList";
 declare const _default: {
     title: string;
     component: typeof DescriptionList;
+    tags: string[];
 };
 export default _default;
 export { GroupMinWidth } from "./DescriptionList.group-min-width.story";

package/dist/src/DescriptionList/stories/DescriptionList.story.js

@@ -2,6 +2,9 @@ import DescriptionList from "../DescriptionList";
 export default {
     title: "Components/DescriptionList",
     component: DescriptionList,
+    // This file only re-exports stories defined in sibling files — the Storybook
+    // Vitest plugin can't transform re-exported stories, so we opt out of testing.
+    tags: ["!test"],
 };
 export { GroupMinWidth } from "./DescriptionList.group-min-width.story";
 export { Playground } from "./DescriptionList.playground.story";

package/dist/src/DropdownMenu/DropdownMenu.story.d.ts

@@ -6,54 +6,54 @@ declare const _default: {
 };
 export default _default;
 export declare const _DropdownMenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomTrigger: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomColors: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithButtonClosingMenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomLink: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomText: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDefaultOpen: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithSubmenu: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithVisitedLinks: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithConditionallyRenderedMenuItems: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRenderProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };