@nulogy/components 16.0.2 → 16.0.3

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/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;
 };