@nulogy/components 16.0.2 → 16.0.4

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { Alert } from "../index";
 declare const _default: {

package/dist/src/Alert/Alert.story.js

@@ -1,4 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Alert, Flex } from "../index";
 import { Link } from "../Link";
 export default {
@@ -15,6 +16,16 @@ export const WithACloseButton = {
         children: "This is an alert with a close button",
     },
     name: "With a close button",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows an alert", async () => {
+            await expect(canvas.getByRole("alert")).toBeVisible();
+        });
+        await step("hides the alert when closed", async () => {
+            await userEvent.click(canvas.getByLabelText("Close"));
+            await waitFor(() => expect(canvas.queryByRole("alert")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithATitle = {
     args: {

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

@@ -6,6 +6,6 @@ declare const _default: {
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutATooltip: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

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

@@ -25,8 +25,10 @@ export const Default = () => {
     }));
     return _jsx(Table, { rowHovers: false, columns: columns, rows: rows });
 };
-export const WithoutATooltip = () => {
-    const appNames = Object.keys(APP_DISPLAY_NAMES);
-    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "AppTag without tooltip" }), _jsx(Flex, { gap: "x2", children: appNames.map((appName) => (_jsx(AppTag, { app: appName, type: "active", hideTooltip: true }, appName))) })] }));
+export const WithoutATooltip = {
+    render: () => {
+        const appNames = Object.keys(APP_DISPLAY_NAMES);
+        return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Heading1, { compact: true, children: "AppTag without tooltip" }), _jsx(Flex, { gap: "x2", children: appNames.map((appName) => (_jsx(AppTag, { app: appName, type: "active", hideTooltip: true }, appName))) })] }));
+    },
+    name: "Without a tooltip",
 };
-WithoutATooltip.storyName = "Without a tooltip";

package/dist/src/AppTag/stories/AppTag.usecases.story.d.ts

@@ -5,22 +5,25 @@ declare const _default: {
 };
 export default _default;
 export declare const WithALink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMessages: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithTooltip: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
 };
 export declare const InsideAModal: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement: _canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };

package/dist/src/AppTag/stories/AppTag.usecases.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, screen, userEvent, waitFor } from "storybook/test";
 import { AppTag } from "..";
 import { Flex, InlineFlex } from "../../Flex";
 import { Icon } from "../../Icon";
@@ -14,59 +15,78 @@ export default {
     title: "Components/AppTag/Usecases",
     component: AppTag,
 };
-export const WithALink = () => {
-    return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "AppTag with Link" }), _jsxs(Text, { fontSize: "sm", children: ["These examples show the ", _jsx(Code, { children: "Link" }), " component used with the ", _jsx(Code, { children: "forApp" }), " prop. See the", " ", _jsx(Link, { href: "/?path=/story/components-link--with-app-tag", children: "With AppTag" }), " Link story for more examples."] })] }), _jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsx(Link, { href: "#app", forApp: "digital-quality-inspection", children: "POLI-120392" }), _jsx(Link, { underline: false, href: "#app", forApp: "supplier-collaboration", children: "POLI-120392" })] })] }));
+export const WithALink = {
+    render: () => {
+        return (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading1, { compact: true, children: "AppTag with Link" }), _jsxs(Text, { fontSize: "sm", children: ["These examples show the ", _jsx(Code, { children: "Link" }), " component used with the ", _jsx(Code, { children: "forApp" }), " prop. See the", " ", _jsx(Link, { href: "/?path=/story/components-link--with-app-tag", children: "With AppTag" }), " Link story for more examples."] })] }), _jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsx(Link, { href: "#app", forApp: "digital-quality-inspection", children: "POLI-120392" }), _jsx(Link, { underline: false, href: "#app", forApp: "supplier-collaboration", children: "POLI-120392" })] })] }));
+    },
+    name: "With a Link",
 };
-WithALink.storyName = "With a Link";
-export const WithText = () => {
-    return (_jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }), _jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { color: "midGrey", children: "Inactive entity reference" }), _jsx(AppTag, { app: "supplier-collaboration", type: "inactive" })] })] }));
+export const WithText = {
+    render: () => {
+        return (_jsxs(InlineFlex, { flexDirection: "column", gap: "x2", children: [_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }), _jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(Text, { color: "midGrey", children: "Inactive entity reference" }), _jsx(AppTag, { app: "supplier-collaboration", type: "inactive" })] })] }));
+    },
+    name: "With text",
 };
-WithText.storyName = "With text";
-export const WithMessages = () => {
-    const columns = [
-        { label: "Use-case", dataKey: "type", width: "20%" },
-        { label: "Example", dataKey: "example", width: "80%" },
-    ];
-    const rows = [
-        {
-            id: "status-indicator",
-            type: "Using a StatusIndicator",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(StatusIndicator, { type: "informative", children: "New" })] })),
-        },
-        {
-            id: "custom-component",
-            type: "Using a custom component",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "error", size: "x2", color: "red" }), _jsx(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red", children: "Transaction failed" })] })] })),
-        },
-        {
-            id: "icon-text",
-            type: "Using Icon and Text",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "warning", size: "x2", color: "yellow" }), _jsx(Text, { fontSize: "small", color: "black", children: "Requires attention" })] })] })),
-        },
-        {
-            id: "text-icon",
-            type: "Using Text and Icon",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_75", children: [_jsx(Text, { fontSize: "small", children: "Processing" }), _jsx(Icon, { icon: "loading" })] })] })),
-        },
-        {
-            id: "text-only",
-            type: "Using Text",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(Text, { fontSize: "small", children: "Processed" })] })),
-        },
-        {
-            id: "truncated-text",
-            type: "Using TruncatedText",
-            example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(TruncatedText, { fontSize: "small", color: "red", children: "Transaction failed because the supplier did not provide the required information." })] })),
-        },
-    ];
-    return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Table, { rowHovers: false, columns: columns, rows: rows }) }));
+export const WithMessages = {
+    render: () => {
+        const columns = [
+            { label: "Use-case", dataKey: "type", width: "20%" },
+            { label: "Example", dataKey: "example", width: "80%" },
+        ];
+        const rows = [
+            {
+                id: "status-indicator",
+                type: "Using a StatusIndicator",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(StatusIndicator, { type: "informative", children: "New" })] })),
+            },
+            {
+                id: "custom-component",
+                type: "Using a custom component",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "error", size: "x2", color: "red" }), _jsx(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red", children: "Transaction failed" })] })] })),
+            },
+            {
+                id: "icon-text",
+                type: "Using Icon and Text",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "warning", size: "x2", color: "yellow" }), _jsx(Text, { fontSize: "small", color: "black", children: "Requires attention" })] })] })),
+            },
+            {
+                id: "text-icon",
+                type: "Using Text and Icon",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsxs(InlineFlex, { alignItems: "center", gap: "x0_75", children: [_jsx(Text, { fontSize: "small", children: "Processing" }), _jsx(Icon, { icon: "loading" })] })] })),
+            },
+            {
+                id: "text-only",
+                type: "Using Text",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(Text, { fontSize: "small", children: "Processed" })] })),
+            },
+            {
+                id: "truncated-text",
+                type: "Using TruncatedText",
+                example: (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(AppTag, { app: "digital-quality-inspection", type: "active" }), _jsx(TruncatedText, { fontSize: "small", color: "red", children: "Transaction failed because the supplier did not provide the required information." })] })),
+            },
+        ];
+        return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Table, { rowHovers: false, columns: columns, rows: rows }) }));
+    },
+    name: "With messages",
 };
-WithMessages.storyName = "With messages";
-export const WithTooltip = () => {
-    return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Tooltip, { tooltip: "This is a tooltip", children: _jsxs(InlineFlex, { alignItems: "center", gap: "half", alignSelf: "flex-start", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }) }));
+export const WithTooltip = {
+    render: () => {
+        return (_jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsx(Tooltip, { tooltip: "This is a tooltip", children: _jsxs(InlineFlex, { alignItems: "center", gap: "half", alignSelf: "flex-start", children: [_jsx(Text, { children: "Entity reference" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }) }));
+    },
 };
-WithTooltip.storyName = "With Tooltip";
-export const InsideAModal = () => {
-    return (_jsx(Modal, { title: "Modal Title", children: _jsxs(Flex, { flexDirection: "column", gap: "half", children: [_jsx(Text, { children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }));
+export const InsideAModal = {
+    render: () => {
+        return (_jsx(Modal, { title: "Modal Title", children: _jsxs(Flex, { flexDirection: "column", gap: "half", children: [_jsx(Text, { children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }), _jsx(AppTag, { app: "digital-quality-inspection", type: "active" })] }) }));
+    },
+    name: "Inside a Modal",
+    play: async ({ canvasElement: _canvasElement, step }) => {
+        await step("shows the modal with the app tag", async () => {
+            await expect(screen.getByRole("dialog")).toBeVisible();
+            await expect(screen.getByText("DQI")).toBeVisible();
+        });
+        await step("shows a tooltip with the app name on hover", async () => {
+            await userEvent.hover(screen.getByText("DQI"));
+            await waitFor(() => expect(screen.getByRole("tooltip")).toHaveTextContent("Digital Quality Inspection"));
+        });
+    },
 };
-InsideAModal.storyName = "Inside a Modal";

package/dist/src/AsyncSelect/AsyncSelect.graphql.story.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { gql, useLazyQuery } from "@apollo/client";
-import { MockedProvider } from "@apollo/client/testing";
+import { gql } from "@apollo/client";
+import { useLazyQuery } from "@apollo/client/react";
+import { MockedProvider } from "@apollo/client/testing/react";
 import { useCallback } from "react";
 import { AsyncSelect } from "../index";
 export default {
@@ -49,4 +50,4 @@ const AsyncSelectWithApollo = () => {
     }, [data, getCountries]);
     return _jsx(AsyncSelect, { placeholder: "Search for a country", loadOptions: loadOptions, labelText: "Country" });
 };
-export const WithApolloClientExample = () => (_jsx(MockedProvider, { mocks: mocks, addTypename: false, children: _jsx(AsyncSelectWithApollo, {}) }));
+export const WithApolloClientExample = () => (_jsx(MockedProvider, { mocks: mocks, children: _jsx(AsyncSelectWithApollo, {}) }));

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

@@ -4,24 +4,28 @@ declare const _default: {
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithDefaultOptions: {
-    (): 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 WithADefaultValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const Multiselect: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
-export declare const Multiselect: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAClearButton: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/AsyncSelect/AsyncSelect.story.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { useState } from "react";
 import { AsyncSelect, Button, Flex } from "../index";
 import { loadMatchingProvinces } from "./fixtures";
@@ -8,33 +9,55 @@ export default {
     title: "Components/AsyncSelect",
 };
 export const Default = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const WithDefaultOptions = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), isClearable: true, defaultOptions: [
-        {
-            value: "ON",
-            label: "Ontario",
-        },
-        {
-            value: "QC",
-            label: "Quebec",
-        },
-    ], loadOptions: loadMatchingProvinces }));
-WithDefaultOptions.story = {
+export const WithDefaultOptions = {
+    render: () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", onInputChange: action("typed input value changed"), isClearable: true, defaultOptions: [
+            {
+                value: "ON",
+                label: "Ontario",
+            },
+            {
+                value: "QC",
+                label: "Quebec",
+            },
+        ], loadOptions: loadMatchingProvinces })),
     name: "With default options",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows the dropdown arrow when there are default options", async () => {
+            await expect(canvas.getByTestId("select-arrow")).toBeVisible();
+        });
+    },
 };
-export const WithADefaultValue = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-WithADefaultValue.story = {
+export const WithADefaultValue = {
+    render: () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces })),
     name: "With a default value",
 };
-export const Multiselect = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", multiselect: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const WithAClearButton = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", isClearable: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    return (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(AsyncSelect, { ref: ref, placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
+export const Multiselect = {
+    render: () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", multiselect: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces })),
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can select multiple values", async () => {
+            await userEvent.click(canvas.getByTestId("select-container"));
+            await userEvent.type(canvas.getByTestId("select-input"), "on");
+            await waitFor(() => expect(screen.getByText("Ontario")).toBeInTheDocument());
+            await userEvent.keyboard("{Enter}");
+            await expect(canvas.getByTestId("select-container")).toHaveTextContent("Ontario");
+            await userEvent.type(canvas.getByTestId("select-input"), "qu");
+            await waitFor(() => expect(screen.getByText("Quebec")).toBeInTheDocument());
+            await userEvent.keyboard("{Enter}");
+            await expect(canvas.getByTestId("select-container")).toHaveTextContent("Quebec");
+        });
+    },
 };
-UsingRefToControlFocus.story = {
+export const WithAClearButton = () => (_jsx(AsyncSelect, { placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Provinces", isClearable: true, onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }));
+export const UsingRefToControlFocus = {
+    render: () => {
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.focus();
+        };
+        return (_jsxs(Flex, { gap: "x2", flexDirection: "column", children: [_jsx(AsyncSelect, { ref: ref, placeholder: "Enter a province", onChange: action("selection changed"), onBlur: action("blurred"), className: "Select", classNamePrefix: "SelectTest", labelText: "Province", defaultValue: "Ontario", onInputChange: action("typed input value changed"), loadOptions: loadMatchingProvinces }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
+    },
     name: "using ref to control focus",
 };
 export const Controlled = () => {

package/dist/src/BottomSheet/stories/BottomSheet.actions.story.d.ts

@@ -8,5 +8,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const WithAHiddenCloseButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAHiddenCloseButton: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithButtons: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.actions.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Button, PrimaryButton, QuietButton } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
@@ -10,9 +11,27 @@ export default {
         chromatic: { delay: 3000 },
     },
 };
-export const WithAHiddenCloseButton = () => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => _jsx(PrimaryButton, { onClick: onClose, children: "Submit" }), hideCloseButton: true, children: _jsx(Placeholder, {}) })] }));
+export const WithAHiddenCloseButton = {
+    render: () => {
+        const [isOpen, setIsOpen] = React.useState(true);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "User Feedback", helpText: "Please provide your feedback to help us improve our services", isOpen: isOpen, onClose: () => setIsOpen(false), primaryAction: ({ onClose }) => _jsx(PrimaryButton, { onClick: onClose, children: "Submit" }), hideCloseButton: true, children: _jsx(Placeholder, {}) })] }));
+    },
+    name: "With a hidden close button",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("is open initially without a close button", async () => {
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+            await expect(screen.queryByText("Close")).not.toBeInTheDocument();
+        });
+        await step("can be closed using primary action", async () => {
+            await userEvent.click(screen.getByText("Submit"));
+            await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+        });
+        await step("opens when trigger button is clicked", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
+    },
 };
 export const WithButtons = () => {
     const [isOpen, setIsOpen] = React.useState(true);

package/dist/src/BottomSheet/stories/BottomSheet.features.story.d.ts

@@ -10,10 +10,17 @@ declare const _default: {
 export default _default;
 export declare const WithCustomWidths: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAnApplicationFrame: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
 };
-export declare const DisableCloseOnOverlayClick: () => import("react/jsx-runtime").JSX.Element;
+export declare const DisableCloseOnOverlayClick: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement: _canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const AdvancedUsage: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/BottomSheet/stories/BottomSheet.features.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, userEvent, waitFor } from "storybook/test";
 import { Box } from "../../Box";
 import { Button, IconicButton } from "../../Button";
 import { Flex } from "../../Flex";
@@ -24,19 +25,33 @@ export const WithCustomWidths = () => {
     const [isOpen, setIsOpen] = React.useState(true);
     return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", sheetWidth: { extraSmall: "100%", small: 480, medium: 640, large: 768 }, contentWidth: { small: 320, medium: 420, large: 600 }, isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
 };
-export const WithAnApplicationFrame = () => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    const navBar = (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: _jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { title: "Home", description: "Go to the home page", icon: "home", href: "/home" }) }) })] }));
-    return (_jsx(ApplicationFrame, { navBar: navBar, children: _jsxs(Page, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }) }));
-};
-WithAnApplicationFrame.parameters = {
-    layout: "fullscreen",
+export const WithAnApplicationFrame = {
+    render: () => {
+        const [isOpen, setIsOpen] = React.useState(true);
+        const navBar = (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: _jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { title: "Home", description: "Go to the home page", icon: "home", href: "/home" }) }) })] }));
+        return (_jsx(ApplicationFrame, { navBar: navBar, children: _jsxs(Page, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { "aria-label": "Example BottomSheet", title: "Edit Profile", helpText: "Update your profile information to access exclusive features.", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }) }));
+    },
+    parameters: {
+        layout: "fullscreen",
+    },
 };
-export const DisableCloseOnOverlayClick = () => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { disableCloseOnOverlayClick: true, "aria-label": "Example BottomSheet", title: "Disabled overlay", helpText: "This BottomSheet can not be dismissed by clicking on the overlay", isOpen: isOpen, onClose: () => {
-                    setIsOpen(false);
-                }, children: _jsx(Placeholder, {}) })] }));
+export const DisableCloseOnOverlayClick = {
+    render: () => {
+        const [isOpen, setIsOpen] = React.useState(true);
+        return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { disableCloseOnOverlayClick: true, "aria-label": "Example BottomSheet", title: "Disabled overlay", helpText: "This BottomSheet can not be dismissed by clicking on the overlay", isOpen: isOpen, onClose: () => {
+                        setIsOpen(false);
+                    }, children: _jsx(Placeholder, {}) })] }));
+    },
+    name: "Disable close on overlay click",
+    play: async ({ canvasElement: _canvasElement, step }) => {
+        await step("is open initially", async () => {
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible(), { timeout: 3000 });
+        });
+        await step("closes when close button is clicked", async () => {
+            await userEvent.click(screen.getByText("Close"));
+            await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+        });
+    },
 };
 export const AdvancedUsage = () => {
     const [isOpen, setIsOpen] = React.useState(true);

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

@@ -8,4 +8,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicUsage: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Button } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
@@ -10,7 +11,23 @@ export default {
         chromatic: { delay: 3000 },
     },
 };
-export const BasicUsage = () => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
+export const BasicUsage = {
+    render: () => {
+        const [isOpen, setIsOpen] = React.useState(true);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("is open initially", async () => {
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
+        await step("closes when Close button is clicked", async () => {
+            await userEvent.click(screen.getByText("Close"));
+            await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+        });
+        await step("opens when trigger button is clicked", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
+    },
 };