@nulogy/components 16.0.1 → 16.0.3

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

@@ -2,52 +2,52 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Tabs: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Tabs: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithADefaultSelectedIndex: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+export declare const WithOtherInteractiveElements: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
-export declare const WithOtherInteractiveElements: () => import("react/jsx-runtime").JSX.Element;
 export declare const SetToFitted: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAllTabStates: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithScrollingTabs: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
         };
     };
 };
 export declare const Controlled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithInputs: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithContentLoadedOnSelection: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Tabs/Tabs.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import { expect, userEvent, within } from "storybook/test";
 import { Button } from "../Button";
 import { Flex } from "../Flex";
 import { Tab, Tabs } from ".";
@@ -22,34 +23,69 @@ class ControlledTabs extends React.Component {
 export default {
     title: "Components/Tabs",
 };
-export const _Tabs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] }));
-export const WithADefaultSelectedIndex = () => (_jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
-WithADefaultSelectedIndex.story = {
+export const _Tabs = {
+    render: () => (_jsxs(Tabs, { children: [_jsx(Tab, { className: "Tab1", label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { className: "Tab2", label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { className: "Tab3", label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { className: "Tab4", label: "Tab 4", children: "Tab 4 Content" })] })),
+    name: "Tabs",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("renders tab components", async () => {
+            await expect(canvas.getByText("Tab 1")).toBeVisible();
+        });
+        await step("selects the tab on click", async () => {
+            const tab1 = canvas.getByRole("tab", { name: "Tab 1" });
+            await expect(tab1).toHaveAttribute("aria-selected", "false");
+            await userEvent.click(tab1);
+            await expect(tab1).toHaveAttribute("aria-selected", "true");
+        });
+        await step("displays the tab content on click", async () => {
+            await expect(canvas.getByText("Tab 1 Content")).toBeVisible();
+        });
+        await step("moves to next tab with right arrow key", async () => {
+            const tab1 = canvas.getByRole("tab", { name: "Tab 1" });
+            tab1.focus();
+            await userEvent.keyboard("{ArrowRight}");
+            await expect(canvas.getByRole("tab", { name: "Tab 2" })).toHaveFocus();
+        });
+    },
+};
+export const WithADefaultSelectedIndex = {
+    render: () => (_jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })),
     name: "with a defaultSelectedIndex",
 };
-export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column", children: [_jsx(Button, { children: "Click me" }), _jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })] }));
-export const SetToFitted = () => (_jsxs(Tabs, { fitted: true, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] }));
-SetToFitted.story = {
+export const WithOtherInteractiveElements = {
+    render: () => (_jsxs(Flex, { gap: "x2", alignItems: "flex-start", flexDirection: "column", children: [_jsx(Button, { children: "Click me" }), _jsxs(Tabs, { defaultSelectedIndex: 1, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })] })),
+    name: "with other interactive elements",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("focuses on the default selected tab when tabbing", async () => {
+            canvas.getByText("Click me").focus();
+            await userEvent.tab();
+            await expect(document.activeElement).toHaveTextContent("Tab 2");
+        });
+    },
+};
+export const SetToFitted = {
+    render: () => (_jsxs(Tabs, { fitted: true, children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" })] })),
     name: "set to fitted",
 };
-export const WithAllTabStates = () => (_jsxs("div", { children: [_jsx(Tab, { label: "Tab" }), _jsx(Tab, { label: "Tab", selected: true }), _jsx(Tab, { label: "Tab", disabled: true }), _jsx(Tab, { label: "Tab", disabled: true, selected: true })] }));
-WithAllTabStates.story = {
+export const WithAllTabStates = {
+    render: () => (_jsxs("div", { children: [_jsx(Tab, { label: "Tab" }), _jsx(Tab, { label: "Tab", selected: true }), _jsx(Tab, { label: "Tab", disabled: true }), _jsx(Tab, { label: "Tab", disabled: true, selected: true })] })),
     name: "with all tab states",
 };
-export const WithScrollingTabs = () => (_jsxs(Tabs, { className: "tab-container", children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" }), _jsx(Tab, { label: "Tab 5", children: "Tab 5 Content" }), _jsx(Tab, { label: "Tab 6", children: "Tab 6 Content" }), _jsx(Tab, { label: "Tab 7", children: "Tab 7 Content" }), _jsx(Tab, { label: "Tab 8", children: "Tab 8 Content" }), _jsx(Tab, { label: "Tab 9", children: "Tab 9 Content" }), _jsx(Tab, { label: "Tab 10", children: "Tab 10 Content" }), _jsx(Tab, { label: "Tab 11", children: "Tab 11 Content" }), _jsx(Tab, { label: "Tab 12", children: "Tab 12 Content" })] }));
-WithScrollingTabs.story = {
+export const WithScrollingTabs = {
+    render: () => (_jsxs(Tabs, { className: "tab-container", children: [_jsx(Tab, { label: "Tab 1", children: "Tab 1 Content" }), _jsx(Tab, { label: "Tab 2", children: "Tab 2 Content" }), _jsx(Tab, { label: "Tab 3", children: "Tab 3 Content" }), _jsx(Tab, { label: "Tab 4", children: "Tab 4 Content" }), _jsx(Tab, { label: "Tab 5", children: "Tab 5 Content" }), _jsx(Tab, { label: "Tab 6", children: "Tab 6 Content" }), _jsx(Tab, { label: "Tab 7", children: "Tab 7 Content" }), _jsx(Tab, { label: "Tab 8", children: "Tab 8 Content" }), _jsx(Tab, { label: "Tab 9", children: "Tab 9 Content" }), _jsx(Tab, { label: "Tab 10", children: "Tab 10 Content" }), _jsx(Tab, { label: "Tab 11", children: "Tab 11 Content" }), _jsx(Tab, { label: "Tab 12", children: "Tab 12 Content" })] })),
     name: "with scrolling tabs",
     parameters: { viewport: { defaultViewport: "extraSmall" } },
 };
-export const Controlled = () => _jsx(ControlledTabs, {});
-Controlled.story = {
+export const Controlled = {
+    render: () => _jsx(ControlledTabs, {}),
     name: "controlled",
 };
-export const WithInputs = () => (_jsxs(Tabs, { children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
-WithInputs.story = {
+export const WithInputs = {
+    render: () => (_jsxs(Tabs, { children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] })),
     name: "with inputs",
 };
-export const WithContentLoadedOnSelection = () => (_jsxs(Tabs, { renderTabContentOnlyWhenSelected: true, children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] }));
-WithContentLoadedOnSelection.story = {
+export const WithContentLoadedOnSelection = {
+    render: () => (_jsxs(Tabs, { renderTabContentOnlyWhenSelected: true, children: [_jsx(Tab, { label: "Tab 1", className: "Tab1", children: _jsx("input", { className: "Input1" }) }), _jsx(Tab, { label: "Tab 2", className: "Tab2", children: _jsx("input", { className: "Input2" }) })] })),
     name: "with content loaded on selection",
 };

package/dist/src/Textarea/Textarea.story.js

@@ -1,6 +1,6 @@
 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 { action } from "storybook/actions";
 import { Textarea, Button } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {

package/dist/src/TimePicker/TimePicker.d.ts

@@ -38,5 +38,5 @@ export declare const getTimeOptions: (interval: any, timeFormat: any, minTime: a
     value: string;
     label: string;
 }[];
-declare const TimePicker: React.FC<React.PropsWithChildren<TimePickerProps>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & React.RefAttributes<any>>;
 export default TimePicker;

package/dist/src/TimePicker/TimePicker.js

@@ -100,6 +100,8 @@ const TimePicker = forwardRef(({ timeFormat, interval, className, minTime, maxTi
     const { t } = useTranslation();
     const componentVariant = useComponentVariant(variant);
     const scrollToSelection = useCallback(debounce((currentOption, dropdown) => {
+        if (!dropdown.current)
+            return;
         const currentIndex = Array.from(dropdown.current.children).indexOf(currentOption);
         if (currentIndex > 2) {
             dropdown.current.scrollTop = (currentIndex - 2) * currentOption.scrollHeight;

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

@@ -3,62 +3,46 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    (): 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 WithCustomTimeFormat: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomTimeInterval: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomPlaceholder: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const disabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorState: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMinAndMaxTime: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/TimePicker/TimePicker.story.js

@@ -1,57 +1,70 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { TimePicker, Button } from "../index";
 export default {
     title: "Components/TimePicker",
 };
-export const Default = () => (_jsx(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" }));
-Default.story = {
+export const Default = {
+    render: () => (_jsx(TimePicker, { p: "x3", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Start Time" })),
     name: "default",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can open the dropdown on click", async () => {
+            await userEvent.click(canvas.getByTestId("select-input"));
+            await waitFor(() => expect(screen.getAllByTestId(/select-option/)[0]).toBeVisible());
+        });
+        await step("allows the user to select a time by clicking", async () => {
+            const options = screen.getAllByTestId(/select-option/);
+            await userEvent.click(options[0]);
+            await expect(canvas.getByTestId("select-container")).toHaveTextContent("12:00 AM");
+        });
+    },
 };
-export const WithCustomTimeFormat = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
-WithCustomTimeFormat.story = {
+export const WithCustomTimeFormat = {
+    render: () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" })),
     name: "with custom time format",
 };
-export const WithCustomTimeInterval = () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" }));
-WithCustomTimeInterval.story = {
+export const WithCustomTimeInterval = {
+    render: () => (_jsx(TimePicker, { defaultValue: "03:30", timeFormat: "HH:mm", interval: 30, onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration" })),
     name: "with custom time interval",
 };
-export const WithCustomPlaceholder = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" }));
-WithCustomPlaceholder.story = {
+export const WithCustomPlaceholder = {
+    render: () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--" })),
     name: "with custom placeholder",
 };
-export const disabled = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true }));
-disabled.story = {
+export const disabled = {
+    render: () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", placeholder: "--:--", disabled: true })),
     name: "disabled",
 };
-export const WithErrorState = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" }));
-WithErrorState.story = {
+export const WithErrorState = {
+    render: () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", errorMessage: "This time is invalid" })),
     name: "with error state",
 };
-export const WithMinAndMaxTime = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" }));
-WithMinAndMaxTime.story = {
+export const WithMinAndMaxTime = {
+    render: () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", minTime: "09:00", maxTime: "21:00" })),
     name: "with min and max time",
 };
-export const WithCustomDefault = () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" }));
-WithCustomDefault.story = {
+export const WithCustomDefault = {
+    render: () => (_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "End Time", defaultValue: "12:38 PM" })),
     name: "with custom default",
 };
 const ControlledTimePicker = () => {
     const [value, setValue] = useState("13:43");
     return _jsx(TimePicker, { onChange: setValue, onInputChange: setValue, labelText: "End Time", value: value });
 };
-export const WithValue = () => _jsx(ControlledTimePicker, {});
-WithValue.story = {
+export const WithValue = {
+    render: () => _jsx(ControlledTimePicker, {}),
     name: "with value",
 };
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
-};
-UsingRefToControlFocus.story = {
+export const UsingRefToControlFocus = {
+    render: () => {
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.focus();
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(TimePicker, { onChange: action("time changed"), onInputChange: action("input changed"), labelText: "Duration", ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
+    },
     name: "using ref to control focus",
 };

package/dist/src/TimePicker/TimePickerInput.d.ts

@@ -2,5 +2,7 @@ import { InputFieldProps } from "../Input/InputField";
 type TimePickerInputProps = InputFieldProps & {
     dropdownIsOpen: boolean;
 };
-declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
+declare const TimePickerInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLInputElement>;
+}, TimePickerInputProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>, keyof import("react").Component<any, {}, any>>;
 export default TimePickerInput;

package/dist/src/TimeRange/TimeRange.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+type TimeRangeProps = SpaceProps & {
     variant?: ComponentVariant;
     timeFormat?: string;
     onRangeChange?: (range: {
@@ -24,5 +24,6 @@ declare const TimeRange: React.ForwardRefExoticComponent<Omit<SpaceProps<Require
     endAriaLabel?: string;
     endTimeProps?: any;
     startTimeProps?: any;
-}, "ref"> & React.RefAttributes<unknown>>;
+};
+declare const TimeRange: React.ForwardRefExoticComponent<Omit<TimeRangeProps, "ref"> & React.RefAttributes<unknown>>;
 export default TimeRange;

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

@@ -3,32 +3,26 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const DefaultSelections: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithRangeValidation: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMinAndMaxTimeRange: {
-    (): 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 UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/TimeRange/TimeRange.story.js

@@ -1,37 +1,51 @@
 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, screen, userEvent, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Button, PrimaryButton } from "..";
 import TimeRange from "./TimeRange";
 export default {
     title: "Components/TimeRange",
 };
-export const Default = () => (_jsx(TimeRange, { p: "x3", onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
-Default.story = {
+export const Default = {
+    render: () => (_jsx(TimeRange, { p: "x3", onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") })),
     name: "default",
 };
-export const DefaultSelections = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "01:30 PM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
-DefaultSelections.story = {
+export const DefaultSelections = {
+    render: () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "01:30 PM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") })),
     name: "default selections",
 };
-export const WithRangeValidation = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "03:30 AM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
-WithRangeValidation.story = {
+export const WithRangeValidation = {
+    render: () => (_jsx(TimeRange, { onRangeChange: action("range changed"), defaultStartTime: "12:00 AM", defaultEndTime: "03:30 AM", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") })),
     name: "with range validation",
 };
-export const WithMinAndMaxTimeRange = () => (_jsx(TimeRange, { onRangeChange: action("range changed"), minTime: "09:00", maxTime: "18:30", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") }));
-WithMinAndMaxTimeRange.story = {
+export const WithMinAndMaxTimeRange = {
+    render: () => (_jsx(TimeRange, { onRangeChange: action("range changed"), minTime: "09:00", maxTime: "18:30", onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed") })),
     name: "with min and max time range",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows constrained end time options after selecting a start time", async () => {
+            await userEvent.click(canvas.getByLabelText("Select a start time"));
+            const startOptions = screen.getAllByTestId(/select-option/);
+            await userEvent.click(startOptions[4]);
+            const startInput = canvas.getAllByTestId("select-input")[0];
+            await expect(startInput).toHaveValue("10:00 AM");
+            await userEvent.click(canvas.getByLabelText("Select an end time"));
+            const endOptions = screen.getAllByTestId(/select-option/);
+            await expect(endOptions.length).toBeGreaterThan(0);
+        });
+    },
 };
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.inputRef1.focus();
-    };
-    const handleClick2 = () => {
-        ref.current.inputRef2.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(TimeRange, { onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed"), ref: ref }), _jsx(Button, { onClick: handleClick, ml: "x2", children: "Focus the First Input" }), _jsx(PrimaryButton, { onClick: handleClick2, ml: "x2", children: "Focus the Second Input" })] }));
-};
-UsingRefToControlFocus.story = {
+export const UsingRefToControlFocus = {
+    render: () => {
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.inputRef1.focus();
+        };
+        const handleClick2 = () => {
+            ref.current.inputRef2.focus();
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(TimeRange, { onRangeChange: action("range changed"), onStartTimeChange: action("start date changed"), onEndTimeChange: action("end date changed"), ref: ref }), _jsx(Button, { onClick: handleClick, ml: "x2", children: "Focus the First Input" }), _jsx(PrimaryButton, { onClick: handleClick2, ml: "x2", children: "Focus the Second Input" })] }));
+    },
     name: "using ref to control focus",
 };

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

@@ -2,40 +2,39 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Toast: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Toast: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const _MultipleToastsExample: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CustomizeLengthOfTimeToastIsVisible: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCloseButton: {
-    (): 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 WithModal: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CloseableWithMultiLineMessage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const MultipleCloseableToastsExample: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };