@nulogy/components 16.0.1 → 16.0.3

package/dist/src/Toast/Toast.story.js

@@ -1,99 +1,147 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Button, DangerButton, IconicButton, Modal, PrimaryButton, Flex, Toast } from "../index";
 export default {
     title: "Components/Toast",
 };
-export const _Toast = () => {
-    const ToastWithTrigger = () => {
-        const [triggered, setTriggered] = useState(false);
-        const triggerToast = () => {
-            setTriggered(!triggered);
+export const _Toast = {
+    render: () => {
+        const ToastWithTrigger = () => {
+            const [triggered, setTriggered] = useState(false);
+            const triggerToast = () => {
+                setTriggered(!triggered);
+            };
+            const onHideHandler = () => {
+                setTriggered(false);
+            };
+            return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, children: "Saved" })] }));
         };
-        const onHideHandler = () => {
-            setTriggered(false);
-        };
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, children: "Saved" })] }));
-    };
-    return _jsx(ToastWithTrigger, {});
+        return _jsx(ToastWithTrigger, {});
+    },
+    name: "Toast",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("is hidden by default", async () => {
+            await expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+        });
+        await step("shows toast when triggered", async () => {
+            await userEvent.click(canvas.getByText("Save Changes"));
+            await waitFor(() => expect(screen.getByRole("alert")).toBeVisible());
+        });
+    },
 };
-export const _MultipleToastsExample = () => {
-    const MultipleToastsExample = () => {
-        const [currentToast, setCurrentToast] = useState(undefined);
-        const triggerToast = (toastName) => {
-            setCurrentToast(toastName);
-        };
-        /* Alternate trigger toast fn adds a delay between toasts
-        const triggerToast = toastName => {
-          if (!currentToast) {
-            setCurrentToast(toastName);
-          } else {
-            // adds a delay between toasts
-            setTimeout(() => {
-              setCurrentToast(toastName);
-            }, 200);
-          }
-        }; */
-        const onHideHandler = (toastName) => {
-            if (currentToast === toastName) {
-                setCurrentToast(undefined);
-            }
+export const _MultipleToastsExample = {
+    render: () => {
+        const MultipleToastsExample = () => {
+            const [currentToast, setCurrentToast] = useState(undefined);
+            const triggerToast = (toastName) => {
+                setCurrentToast(toastName);
+            };
+            /* Alternate trigger toast fn adds a delay between toasts
+            const triggerToast = toastName => {
+              if (!currentToast) {
+                setCurrentToast(toastName);
+              } else {
+                // adds a delay between toasts
+                setTimeout(() => {
+                  setCurrentToast(toastName);
+                }, 200);
+              }
+            }; */
+            const onHideHandler = (toastName) => {
+                if (currentToast === toastName) {
+                    setCurrentToast(undefined);
+                }
+            };
+            const TOAST_ACTIONS = {
+                SAVE: "save",
+                RESET: "reset",
+                DELETE: "delete",
+                ERROR: "error",
+            };
+            const TOASTS = [
+                {
+                    action: TOAST_ACTIONS.SAVE,
+                    message: "Saved all your changes",
+                    type: "success",
+                },
+                {
+                    action: TOAST_ACTIONS.RESET,
+                    message: "Reset all your changes",
+                    type: "success",
+                },
+                {
+                    action: TOAST_ACTIONS.DELETE,
+                    message: "Ok, it's deleted",
+                    type: "success",
+                },
+                {
+                    action: TOAST_ACTIONS.ERROR,
+                    message: "An error occurred, please retry",
+                    type: "danger",
+                },
+            ];
+            return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
+                        return (_jsx(Toast, { triggered: currentToast === toast.action, onHide: () => onHideHandler(toast.action), type: toast.type, children: toast.message }, toast.action));
+                    })] }));
         };
-        const TOAST_ACTIONS = {
-            SAVE: "save",
-            RESET: "reset",
-            DELETE: "delete",
-            ERROR: "error",
-        };
-        const TOASTS = [
-            {
-                action: TOAST_ACTIONS.SAVE,
-                message: "Saved all your changes",
-                type: "success",
-            },
-            {
-                action: TOAST_ACTIONS.RESET,
-                message: "Reset all your changes",
-                type: "success",
-            },
-            {
-                action: TOAST_ACTIONS.DELETE,
-                message: "Ok, it's deleted",
-                type: "success",
-            },
-            {
-                action: TOAST_ACTIONS.ERROR,
-                message: "An error occurred, please retry",
-                type: "danger",
-            },
-        ];
-        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
-                    return (_jsx(Toast, { triggered: currentToast === toast.action, onHide: () => onHideHandler(toast.action), type: toast.type, children: toast.message }, toast.action));
-                })] }));
-    };
-    return _jsx(MultipleToastsExample, {});
-};
-_MultipleToastsExample.story = {
+        return _jsx(MultipleToastsExample, {});
+    },
     name: "multiple toasts example",
 };
-export const CustomizeLengthOfTimeToastIsVisible = () => {
-    const ToastWithTrigger = () => {
-        const [triggered, setTriggered] = useState(false);
-        const triggerToast = () => {
-            setTriggered(!triggered);
+export const CustomizeLengthOfTimeToastIsVisible = {
+    render: () => {
+        const ToastWithTrigger = () => {
+            const [triggered, setTriggered] = useState(false);
+            const triggerToast = () => {
+                setTriggered(!triggered);
+            };
+            const onHideHandler = () => {
+                setTriggered(false);
+            };
+            return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, showDuration: 5000, children: "Saved" })] }));
         };
-        const onHideHandler = () => {
-            setTriggered(false);
+        return _jsx(ToastWithTrigger, {});
+    },
+    name: "customize length of time toast is visible",
+};
+export const WithCloseButton = {
+    render: () => {
+        const ToastWithTrigger = () => {
+            const [triggered, setTriggered] = useState(false);
+            const triggerToast = () => {
+                setTriggered(!triggered);
+            };
+            const onHideHandler = () => {
+                setTriggered(false);
+            };
+            return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, isCloseable: true, children: "An error occurred while saving results. Please try again" })] }));
         };
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, showDuration: 5000, children: "Saved" })] }));
-    };
-    return _jsx(ToastWithTrigger, {});
+        return _jsx(ToastWithTrigger, {});
+    },
+    name: "with close button",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("is hidden by default", async () => {
+            await expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+        });
+        await step("shows toast when triggered", async () => {
+            await userEvent.click(canvas.getByText("Save Changes"));
+            await waitFor(() => expect(screen.getByRole("alert")).toBeVisible());
+        });
+        await step("hides toast when close button is clicked", async () => {
+            await userEvent.click(screen.getByLabelText("Close"));
+            await waitFor(() => expect(screen.queryByRole("alert")).not.toBeInTheDocument());
+        });
+    },
 };
-CustomizeLengthOfTimeToastIsVisible.story = {
-    name: "customize length of time toast is visible",
+export const WithModal = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Toast, { triggered: true, type: "danger", isCloseable: true, zIndex: 1001, children: "Something went wrong. Try again." }), _jsx(Modal, { title: "Modal Title", onRequestClose: () => { }, maxWidth: "456px", children: "Modal Body" })] })),
+    name: "with a modal",
 };
-export const WithCloseButton = () => {
-    const ToastWithTrigger = () => {
+export const CloseableWithMultiLineMessage = {
+    render: () => {
         const [triggered, setTriggered] = useState(false);
         const triggerToast = () => {
             setTriggered(!triggered);
@@ -101,69 +149,49 @@ export const WithCloseButton = () => {
         const onHideHandler = () => {
             setTriggered(false);
         };
-        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, isCloseable: true, children: "An error occurred while saving results. Please try again" })] }));
-    };
-    return _jsx(ToastWithTrigger, {});
-};
-WithCloseButton.story = {
-    name: "with close button",
-};
-export const WithModal = () => (_jsxs(_Fragment, { children: [_jsx(Toast, { triggered: true, type: "danger", isCloseable: true, zIndex: 1001, children: "Something went wrong. Try again." }), _jsx(Modal, { title: "Modal Title", onRequestClose: () => { }, maxWidth: "456px", children: "Modal Body" })] }));
-WithModal.story = {
-    name: "with a modal",
-};
-export const CloseableWithMultiLineMessage = () => {
-    const [triggered, setTriggered] = useState(false);
-    const triggerToast = () => {
-        setTriggered(!triggered);
-    };
-    const onHideHandler = () => {
-        setTriggered(false);
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, type: "danger", isCloseable: true, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quidem eveniet, repellat accusamus error reiciendis libero. Totam autem distinctio vo" })] }));
-};
-CloseableWithMultiLineMessage.story = {
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: triggerToast, children: "Save Changes" }), _jsx(Toast, { triggered: triggered, onHide: onHideHandler, type: "danger", isCloseable: true, children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quidem eveniet, repellat accusamus error reiciendis libero. Totam autem distinctio vo" })] }));
+    },
     name: "closeable with a 150 character long multi-line message",
 };
-export const MultipleCloseableToastsExample = () => {
-    const MultipleToastsExample = () => {
-        const [currentToasts, setCurrentToasts] = useState([]);
-        const triggerToast = (toastName) => {
-            setCurrentToasts([...currentToasts, toastName]);
+export const MultipleCloseableToastsExample = {
+    render: () => {
+        const MultipleToastsExample = () => {
+            const [currentToasts, setCurrentToasts] = useState([]);
+            const triggerToast = (toastName) => {
+                setCurrentToasts([...currentToasts, toastName]);
+            };
+            const onHideHandler = (toastName) => {
+                setCurrentToasts(currentToasts.filter((toast) => toast !== toastName));
+            };
+            const TOAST_ACTIONS = {
+                SAVE: "save",
+                RESET: "reset",
+                DELETE: "delete",
+                ERROR: "error",
+            };
+            const TOASTS = [
+                {
+                    action: TOAST_ACTIONS.SAVE,
+                    message: "Error saving all your changes",
+                },
+                {
+                    action: TOAST_ACTIONS.RESET,
+                    message: "Error: changes were reset",
+                },
+                {
+                    action: TOAST_ACTIONS.DELETE,
+                    message: "An error occurred, could not deleted",
+                },
+                {
+                    action: TOAST_ACTIONS.ERROR,
+                    message: "An error occurred, please retry",
+                },
+            ];
+            return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
+                        return (_jsx(Toast, { triggered: currentToasts.includes(toast.action), onHide: () => onHideHandler(toast.action), type: "danger", isCloseable: true, children: toast.message }, toast.action));
+                    })] }));
         };
-        const onHideHandler = (toastName) => {
-            setCurrentToasts(currentToasts.filter((toast) => toast !== toastName));
-        };
-        const TOAST_ACTIONS = {
-            SAVE: "save",
-            RESET: "reset",
-            DELETE: "delete",
-            ERROR: "error",
-        };
-        const TOASTS = [
-            {
-                action: TOAST_ACTIONS.SAVE,
-                message: "Error saving all your changes",
-            },
-            {
-                action: TOAST_ACTIONS.RESET,
-                message: "Error: changes were reset",
-            },
-            {
-                action: TOAST_ACTIONS.DELETE,
-                message: "An error occurred, could not deleted",
-            },
-            {
-                action: TOAST_ACTIONS.ERROR,
-                message: "An error occurred, please retry",
-            },
-        ];
-        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(PrimaryButton, { onClick: () => triggerToast(TOAST_ACTIONS.SAVE), mr: "x2", children: "Save Changes" }), _jsx(Button, { onClick: () => triggerToast(TOAST_ACTIONS.RESET), mr: "x2", children: "Reset" }), _jsx(DangerButton, { onClick: () => triggerToast(TOAST_ACTIONS.ERROR), mr: "x2", children: "Trigger Error" }), _jsx(IconicButton, { icon: "delete", onClick: () => triggerToast(TOAST_ACTIONS.DELETE), children: "Delete" })] }), TOASTS.map((toast) => {
-                    return (_jsx(Toast, { triggered: currentToasts.includes(toast.action), onHide: () => onHideHandler(toast.action), type: "danger", isCloseable: true, children: toast.message }, toast.action));
-                })] }));
-    };
-    return _jsx(MultipleToastsExample, {});
-};
-MultipleCloseableToastsExample.story = {
+        return _jsx(MultipleToastsExample, {});
+    },
     name: "multiple closeable toasts example",
 };

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

@@ -1,4 +1,11 @@
-export declare const WithEverything: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithEverything: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 declare const _default: {
     title: string;
 };

package/dist/src/ToastContainer/ToastContainer.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { PrimaryButton } from "../Button";
 import { Input } from "../Input";
 import { Flex } from "../Flex";
@@ -11,7 +12,7 @@ const getToastFunctionTemplate = ({ isClosable = false, toastType = "informative
   title: "This is a '${toastType}' type toast title",
   isCloseable: ${isClosable},
 })`;
-export const WithEverything = () => {
+const WithEverythingComponent = () => {
     const [behavior, setBehavior] = useState("random");
     const [position, setPosition] = useState("bottom-center");
     const [type, setType] = useState("random");
@@ -53,6 +54,17 @@ export const WithEverything = () => {
                                             });
                                         }, children: "Trigger toast" })] })] }), _jsx(ToastContainer, { position: position, toastOptions: { duration }, maxVisibleToasts: maxVisibleToasts })] })] }));
 };
+export const WithEverything = {
+    render: () => _jsx(WithEverythingComponent, {}),
+    name: "With Everything",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("triggers a toast", async () => {
+            await userEvent.click(canvas.getByText("Trigger toast"));
+            await waitFor(() => expect(screen.getAllByRole("alert")[0]).toBeVisible());
+        });
+    },
+};
 export default {
     title: "Components/ToastContainer",
 };

package/dist/src/ToastContainer/ToastFunction.js

@@ -4,12 +4,12 @@ import { toast as _toast } from "react-hot-toast";
 import { Alert } from "../Alert";
 import { AnimatedBox } from "../Box";
 import { toastAnimationConfig } from "../Toast/Toast";
-const CustomToast = ({ isVisible, id, children, ...props }) => {
+function CustomToast({ isVisible, id, children, ...props }) {
     const handleClose = () => {
         _toast.dismiss(id);
     };
     return (_jsx(AnimatePresence, { children: isVisible && (_jsx(AnimatedBox, { role: "alert", ...toastAnimationConfig, children: _jsx(Alert, { controlled: true, onClose: handleClose, ...props, children: children }) }, "notification")) }));
-};
+}
 const toast = {
     danger: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "danger", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),
     informative: (children, props = {}, options = {}) => _toast.custom((t) => (_jsx(CustomToast, { id: t.id, isVisible: t.visible, type: "informative", ...props, children: children })), { duration: props.isCloseable ? Infinity : options.duration, ...options }),

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

@@ -2,32 +2,42 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _Toggle: () => import("react/jsx-runtime").JSX.Element;
+export declare const _Toggle: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const ToggleWithAllProps: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const ToggleSetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
 };
 export declare const WithCustomId: {
-    (): 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 WithLongText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithContraintWidth: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Toggle/Toggle.story.js

@@ -1,51 +1,85 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Toggle, Button, Box } from "../index";
 import { dashed } from "../utils/story/dashed";
 const DashedBox = dashed(Box);
 export default {
     title: "Components/Toggle",
 };
-export const _Toggle = () => {
-    const [toggled, setToggled] = useState(false);
-    return _jsx(Toggle, { "data-testid": "toggle-example", toggled: toggled, onChange: (e) => setToggled(e.target.checked) });
-};
-export const ToggleWithAllProps = () => {
-    const [toggled, setToggled] = useState(true);
-    return (_jsx(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", toggled: toggled, required: true, requirementText: "(Required)", onChange: (e) => setToggled(e.target.checked) }));
-};
-ToggleWithAllProps.storyName = "Toggle with all props";
-export const ToggleSetToDisabled = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }), _jsx(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", toggled: true, labelText: "Toggle", onChange: action("on change") })] }));
-};
-ToggleSetToDisabled.storyName = "Toggle set to disabled";
-export const WithCustomId = () => {
-    const [toggled, setToggled] = useState(true);
-    return (_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
-};
-WithCustomId.storyName = "With custom id";
-export const WithText = () => {
-    const [toggled, setToggled] = useState(true);
-    return (_jsx(Toggle, { labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
-};
-WithText.storyName = "With text";
-export const WithLongText = () => {
-    const [toggled, setToggled] = useState(true);
-    return (_jsx(Toggle, { labelText: "Toggle", toggled: toggled, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: (e) => setToggled(e.target.checked) }));
-};
-WithLongText.storyName = "With long text";
-export const WithContraintWidth = () => {
-    const [toggled, setToggled] = useState(true);
-    return (_jsx(DashedBox, { width: "200px", padding: "x2", children: _jsx(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }) }));
-};
-WithContraintWidth.storyName = "With constraint width";
-export const UsingRefToControlFocus = () => {
-    const [toggled, setToggled] = useState(true);
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked), ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
-};
-UsingRefToControlFocus.storyName = "Using ref to control focus";
+export const _Toggle = {
+    render: () => {
+        const [toggled, setToggled] = useState(false);
+        return _jsx(Toggle, { "data-testid": "toggle-example", toggled: toggled, onChange: (e) => setToggled(e.target.checked) });
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("changes the value on click", async () => {
+            const input = canvasElement.querySelector("[data-testid='toggle-example'] input");
+            await expect(input).not.toBeChecked();
+            await userEvent.click(canvas.getByTestId("toggle-example"));
+            await expect(input).toBeChecked();
+        });
+    },
+};
+export const ToggleWithAllProps = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        return (_jsx(Toggle, { labelText: "Toggle", helpText: "Turns setting on/off", onText: "on", offText: "off", toggled: toggled, required: true, requirementText: "(Required)", onChange: (e) => setToggled(e.target.checked) }));
+    },
+    name: "Toggle with all props",
+};
+export const ToggleSetToDisabled = {
+    render: () => {
+        return (_jsxs(_Fragment, { children: [_jsx(Toggle, { labelText: "Toggle", disabled: true, onText: "on", offText: "off", onChange: action("on change"), "data-testid": "toggle-example" }), _jsx(Toggle, { id: "toggle-2", disabled: true, onText: "on", offText: "off", toggled: true, labelText: "Toggle", onChange: action("on change") })] }));
+    },
+    name: "Toggle set to disabled",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("disabled toggle does not change on click", async () => {
+            const input = canvas.getByTestId("toggle-example").querySelector("input");
+            await expect(input).toBeDisabled();
+            await expect(input).not.toBeChecked();
+        });
+    },
+};
+export const WithCustomId = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        return (_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+    },
+    name: "With custom id",
+};
+export const WithText = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        return (_jsx(Toggle, { labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }));
+    },
+    name: "With text",
+};
+export const WithLongText = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        return (_jsx(Toggle, { labelText: "Toggle", toggled: toggled, onText: "this state has a very long text label to explain it's state", offText: "not this one", onChange: (e) => setToggled(e.target.checked) }));
+    },
+    name: "With long text",
+};
+export const WithContraintWidth = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        return (_jsx(DashedBox, { width: "200px", padding: "x2", children: _jsx(Toggle, { labelText: "Toggle", onText: "This is a long On label for the toggle component.", offText: "This is a long Off label for the toggle component.", toggled: toggled, onChange: (e) => setToggled(e.target.checked) }) }));
+    },
+    name: "With constraint width",
+};
+export const UsingRefToControlFocus = {
+    render: () => {
+        const [toggled, setToggled] = useState(true);
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.focus();
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Toggle, { id: "my-custom-id", labelText: "Toggle", onText: "on", offText: "off", toggled: toggled, onChange: (e) => setToggled(e.target.checked), ref: ref }), _jsx(Button, { onClick: handleClick, children: "Focus the Toggle" })] }));
+    },
+    name: "Using ref to control focus",
+};

package/dist/src/Toggle/ToggleButton.js

@@ -18,7 +18,7 @@ function Switch({ children, disabled, checked }) {
     const componentVariant = useComponentVariant();
     return (_jsx(AnimatedBox, { marginTop: componentVariant === "touch" ? "x0_25" : "none", position: "relative", flexShrink: 0, height: "24px", width: "48px", bg: disabled ? "grey" : getSwitchBackground(checked), borderRadius: "20px", padding: "2px", boxShadow: "small", animate: checked ? "toggled" : "initial", whileHover: "active", whileFocus: "active", children: children }));
 }
-const Slider = ({ disabled, children }) => {
+function Slider({ disabled, children }) {
     const theme = useTheme();
     return (_jsx(motion.div, { className: "slider", initial: false, variants: {
             active: {
@@ -37,7 +37,7 @@ const Slider = ({ disabled, children }) => {
             borderRadius: "50%",
             backgroundColor: disabled ? theme.colors.whiteGrey : theme.colors.white,
         }, children: children }));
-};
+}
 const ToggleInput = styled.input(({ disabled, theme }) => ({
     width: "1px",
     height: "1px",

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

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