@nulogy/components 16.0.2 → 16.0.3

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { FormSection } from "../../Form";
 import { Input } from "../../Input";
 import { ApplicationFrame, Page } from "../../Layout";
@@ -20,6 +21,22 @@ export default {
         },
     },
 };
-export const Default = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
+export const Default = {
+    render: () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] })),
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens menu when menu button is clicked", async () => {
+            await userEvent.click(canvas.getByTestId("topbar-menu-button"));
+            await expect(screen.getByTestId("topbar-menu")).toBeVisible();
+        });
+        await step("displays correct number of menu items", async () => {
+            await expect(screen.getAllByTestId("topbar-menu-item")).toHaveLength(9);
+        });
+        await step("closes menu when clicking outside", async () => {
+            await userEvent.click(screen.getByTestId("topbar-menu-overlay"));
+            await waitFor(() => expect(screen.queryByTestId("topbar-menu")).not.toBeInTheDocument());
+        });
+    },
+};
 export const WithALongTitle = () => (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Previous page title" }), _jsx(TopBar.PageTitle, { children: "A long title that can not fit on smaller screens" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }));
 export const WithAnApplicationFrame = () => (_jsx(ApplicationFrame, { 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: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }), children: _jsxs(Page, { fullHeight: true, children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] }), _jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] }), _jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }) }));

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

@@ -3,54 +3,49 @@ declare const _default: {
 };
 export default _default;
 export declare const _TruncatedText: {
-    (): 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 WithoutTooltip: {
-    (): 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 UnderMaxCharacters: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMaxCharacters10: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomTruncationIndicator: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AsTitle: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FullWidth: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithoutChildren: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement }: {
+        canvasElement: any;
+    }) => Promise<void>;
 };
 export declare const TooltipInsideModal: {
-    (): import("react/jsx-runtime").JSX.Element;
-    storyName: string;
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/TruncatedText/TruncatedText.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Heading1 } from "../Type";
 import { Box } from "../Box";
 import { Modal } from "../Modal";
@@ -6,39 +7,65 @@ import { TruncatedText } from ".";
 export default {
     title: "Components/TruncatedText",
 };
-export const _TruncatedText = () => (_jsx(TruncatedText, { fontSize: "small", children: "Special instructions are provided for the shipment" }));
-_TruncatedText.story = {
+export const _TruncatedText = {
+    render: () => _jsx(TruncatedText, { fontSize: "small", children: "Special instructions are provided for the shipment" }),
     name: "TruncatedText",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows the truncated text", async () => {
+            await expect(canvas.getByTestId("truncated-text")).toHaveTextContent("Special instructions...");
+        });
+        await step("shows a tooltip with full content on hover", async () => {
+            await userEvent.hover(canvas.getByTestId("truncated-text"));
+            await waitFor(() => expect(screen.getByRole("tooltip")).toHaveTextContent("Special instructions are provided for the shipment"));
+        });
+    },
 };
-export const WithoutTooltip = () => (_jsx(TruncatedText, { showTooltip: false, children: "Special instructions are provided for the shipment" }));
-WithoutTooltip.story = {
+export const WithoutTooltip = {
+    render: () => _jsx(TruncatedText, { showTooltip: false, children: "Special instructions are provided for the shipment" }),
     name: "without tooltip",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows the truncated text", async () => {
+            await expect(canvas.getByTestId("truncated-text")).toHaveTextContent("Special instructions...");
+        });
+        await step("does not show a tooltip on hover", async () => {
+            await userEvent.hover(canvas.getByTestId("truncated-text"));
+            await expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+        });
+    },
 };
-export const UnderMaxCharacters = () => _jsx(TruncatedText, { children: "Item is available" });
-UnderMaxCharacters.story = {
+export const UnderMaxCharacters = {
+    render: () => _jsx(TruncatedText, { children: "Item is available" }),
     name: "under max characters",
 };
-export const WithMaxCharacters10 = () => _jsx(TruncatedText, { maxCharacters: 10, children: "Item is available" });
-WithMaxCharacters10.story = {
+export const WithMaxCharacters10 = {
+    render: () => _jsx(TruncatedText, { maxCharacters: 10, children: "Item is available" }),
     name: "with max characters 10",
 };
-export const WithCustomTruncationIndicator = () => (_jsx(TruncatedText, { indicator: " + 2...", children: "Special instructions are provided for the shipment" }));
-WithCustomTruncationIndicator.story = {
+export const WithCustomTruncationIndicator = {
+    render: () => _jsx(TruncatedText, { indicator: " + 2...", children: "Special instructions are provided for the shipment" }),
     name: "with custom truncation indicator",
 };
-export const AsTitle = () => (_jsx(TruncatedText, { element: _jsx(Heading1, {}), children: "Special instructions are provided for the shipment" }));
-AsTitle.story = {
+export const AsTitle = {
+    render: () => (_jsx(TruncatedText, { element: _jsx(Heading1, {}), children: "Special instructions are provided for the shipment" })),
     name: "as title",
 };
-export const FullWidth = () => (_jsxs(Box, { width: "200px", children: [_jsx(TruncatedText, { fullWidth: true, children: "Special instructions are truncated because there is not enough space to show them." }), _jsx(TruncatedText, { fullWidth: true, children: "Instructions fit here." })] }));
-FullWidth.story = {
+export const FullWidth = {
+    render: () => (_jsxs(Box, { width: "200px", children: [_jsx(TruncatedText, { fullWidth: true, children: "Special instructions are truncated because there is not enough space to show them." }), _jsx(TruncatedText, { fullWidth: true, children: "Instructions fit here." })] })),
     name: "full width",
 };
-export const WithoutChildren = () => (_jsxs(Box, { children: [_jsx(Heading1, { children: "No text should appear after this sentence, neither should the page crash." }), _jsx(TruncatedText, { children: null }), _jsx(TruncatedText, { children: undefined }), _jsx(TruncatedText, {})] }));
-WithoutChildren.story = {
+export const WithoutChildren = {
+    render: () => (_jsxs(Box, { children: [_jsx(Heading1, { children: "No text should appear after this sentence, neither should the page crash." }), _jsx(TruncatedText, { children: null }), _jsx(TruncatedText, { children: undefined }), _jsx(TruncatedText, {})] })),
     name: "Without children",
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await expect(canvas.getAllByTestId("truncated-text")[0]).toBeInTheDocument();
+    },
 };
-export const TooltipInsideModal = () => {
-    return (_jsx(Modal, { title: "Modal Title", children: _jsx(TruncatedText, { tooltipProps: { defaultOpen: true }, children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }) }));
+export const TooltipInsideModal = {
+    render: () => {
+        return (_jsx(Modal, { title: "Modal Title", children: _jsx(TruncatedText, { tooltipProps: { defaultOpen: true }, children: "The point of this test is to see if the tooltip is visible and shown over the modal and its overlay" }) }));
+    },
+    name: "Tooltip inside modal",
 };
-TooltipInsideModal.storyName = "Tooltip inside modal";

package/dist/src/Type/Text.story.d.ts

@@ -4,32 +4,22 @@ declare const _default: {
 export default _default;
 export declare const _Text: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAColor: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithASize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACustomMargin: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToInline: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Type/Text.story.js

@@ -5,23 +5,23 @@ export default {
     title: "Components/Text",
 };
 export const _Text = () => _jsx(Text, { children: "Default text" });
-export const WithAColor = () => _jsx(Text, { color: "blue", children: "Blue text" });
-WithAColor.story = {
+export const WithAColor = {
+    render: () => _jsx(Text, { color: "blue", children: "Blue text" }),
     name: "With a color",
 };
-export const WithASize = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { children: "Default (16px/24px)" }) }), _jsxs(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", children: "Small (14px/24px)" }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: "Small Compressed (14px/16px)" })] }), _jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", children: "Smaller (12px/16px)" }) })] }));
-WithASize.story = {
+export const WithASize = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { children: "Default (16px/24px)" }) }), _jsxs(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", children: "Small (14px/24px)" }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: "Small Compressed (14px/16px)" })] }), _jsx(Box, { bg: "whiteGrey", p: "x2", mb: "x3", children: _jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", children: "Smaller (12px/16px)" }) })] })),
     name: "With a size",
 };
-export const WithACustomMargin = () => (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x3", children: "Text 24px bottom margin." }), _jsx(Text, { children: "Text with default (0px) bottom margin." })] }));
-WithACustomMargin.story = {
+export const WithACustomMargin = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Text, { mb: "x3", children: "Text 24px bottom margin." }), _jsx(Text, { children: "Text with default (0px) bottom margin." })] })),
     name: "With a custom margin",
 };
-export const SetToInline = () => (_jsxs(_Fragment, { children: [_jsx(Text, { inline: true, mr: "x1", children: "Inline text" }), _jsx(Text, { inline: true, children: "Inline text" })] }));
-SetToInline.story = {
+export const SetToInline = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Text, { inline: true, mr: "x1", children: "Inline text" }), _jsx(Text, { inline: true, children: "Inline text" })] })),
     name: "Set to inline",
 };
-export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "white", p: "x2", m: "x2", children: _jsx(Text, { disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "darkBlue", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "black", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { bg: "white", p: "x2", m: "x2", children: _jsx(Text, { disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "darkBlue", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) }), _jsx(Box, { bg: "black", p: "x2", m: "x2", children: _jsx(Text, { color: "white", disabled: true, children: "Disabled text" }) })] })),
     name: "Set to disabled",
 };

package/dist/src/Validation/InlineValidation.story.d.ts

@@ -4,20 +4,14 @@ declare const _default: {
 export default _default;
 export declare const _InlineValidation: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithListItems: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithOnlyListItems: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomContent: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Validation/InlineValidation.story.js

@@ -5,15 +5,15 @@ export default {
     title: "Components/Inline Validation",
 };
 export const _InlineValidation = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong" });
-export const WithListItems = () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong", errorList: errorList });
-WithListItems.story = {
+export const WithListItems = {
+    render: () => _jsx(InlineValidation, { errorMessage: "Something has gone wrong", errorList: errorList }),
     name: "with list items",
 };
-export const WithOnlyListItems = () => _jsx(InlineValidation, { errorList: errorList });
-WithOnlyListItems.story = {
+export const WithOnlyListItems = {
+    render: () => _jsx(InlineValidation, { errorList: errorList }),
     name: "with only list items",
 };
-export const WithCustomContent = () => (_jsx(InlineValidation, { errorMessage: "Something has gone wrong.", children: _jsxs(List, { compact: true, leftAlign: true, children: [_jsx(ListItem, { children: "Entry must be at least 3 characters long." }), _jsx(ListItem, { children: "Entry must contain a number" }), _jsx(ListItem, { children: _jsx(Link, { href: "https://nulogy.design/", children: "Custom Link" }) })] }) }));
-WithCustomContent.story = {
+export const WithCustomContent = {
+    render: () => (_jsx(InlineValidation, { errorMessage: "Something has gone wrong.", children: _jsxs(List, { compact: true, leftAlign: true, children: [_jsx(ListItem, { children: "Entry must be at least 3 characters long." }), _jsx(ListItem, { children: "Entry must contain a number" }), _jsx(ListItem, { children: _jsx(Link, { href: "https://nulogy.design/", children: "Custom Link" }) })] }) })),
     name: "with custom content",
 };

package/dist/src/VisualTests/Select.story.d.ts

@@ -3,38 +3,26 @@ declare const _default: {
 };
 export default _default;
 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 WithABlankValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnOptionSelected: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithWrappingText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const TestMultiselectOverflow: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithANullValue: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/VisualTests/Select.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Select } from "../index";
 import { Box } from "../Box";
 const options = [
@@ -33,33 +33,33 @@ const wrappingOptions = [
 export default {
     title: "VisualTests/Select",
 };
-export const WithADefaultValue = () => (_jsx(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-WithADefaultValue.story = {
+export const WithADefaultValue = {
+    render: () => (_jsx(Select, { defaultValue: options[0].value, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: options, labelText: "Inventory status", onInputChange: action("typed input value changed") })),
     name: "with a defaultValue",
 };
-export const WithABlankValue = () => {
-    const optionsWithBlank = [{ value: null, label: "" }, ...options];
-    return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-};
-WithABlankValue.story = {
+export const WithABlankValue = {
+    render: () => {
+        const optionsWithBlank = [{ value: null, label: "" }, ...options];
+        return (_jsx(Select, { placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    },
     name: "with a blank value",
 };
-export const WithAnOptionSelected = () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] }));
-WithAnOptionSelected.story = {
+export const WithAnOptionSelected = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }), _jsx("br", {}), _jsx(Select, { value: options[0].value, placeholder: "Please select inventory status", options: options, labelText: "Inventory status", initialIsOpen: true, onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })] })),
     name: "with an option selected",
 };
-export const WithWrappingText = () => (_jsx(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") }));
-WithWrappingText.story = {
+export const WithWrappingText = {
+    render: () => (_jsx(Select, { initialIsOpen: true, value: options[0].value, placeholder: "Please select inventory status", options: wrappingOptions, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), onInputChange: action("typed input value changed") })),
     name: "With wrapping text",
 };
-export const TestMultiselectOverflow = () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] }));
-TestMultiselectOverflow.story = {
+export const TestMultiselectOverflow = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Select, { defaultValue: ["accepted", "assigned"], noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }), _jsx(Box, { width: "300px", children: _jsx(Select, { defaultValue: partnerCompanyName.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: partnerCompanyName, labelText: "PCN", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) }), _jsx(Box, { width: "400px", children: _jsx(Select, { defaultValue: options.map((item) => item.value), noOptionsMessage: () => "No options", placeholder: "Please select inventory status", options: options, labelText: "Inventory status", onChange: action("selection changed"), onBlur: action("blurred"), multiselect: true, onInputChange: action("typed input value changed") }) })] })),
     name: "test multiselect overflow",
 };
-export const WithANullValue = () => {
-    const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
-    return (_jsx(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
-};
-WithANullValue.story = {
+export const WithANullValue = {
+    render: () => {
+        const optionsWithBlank = [{ value: null, label: "Nullable" }, { value: null, label: "Other null" }, ...options];
+        return (_jsx(Select, { defaultValue: null, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), options: optionsWithBlank, labelText: "Inventory status", onInputChange: action("typed input value changed") }));
+    },
     name: "with a null value",
 };

package/dist/src/pages/ErrorPage.story.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Static: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             disable: boolean;
@@ -12,9 +12,7 @@ export declare const Static: {
 };
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithALink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Maintenance: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/pages/ErrorPage.story.js

@@ -7,18 +7,18 @@ const ErrorPageAlertWidth = "432px";
 export default {
     title: "Pages/ErrorPage",
 };
-export const Static = () => (_jsxs(Text, { children: ["For non-React, static HTML error pages see the Nulogy error pages repository", " ", _jsx(Link, { href: "https://github.com/nulogy/error-pages", children: "on GitHub" }), " or preview them", " ", _jsx(Link, { href: "https://nulogy.github.io/error-pages/", children: "here" }), "."] }));
-Static.parameters = {
-    chromatic: { disable: true },
+export const Static = {
+    render: () => (_jsxs(Text, { children: ["For non-React, static HTML error pages see the Nulogy error pages repository", " ", _jsx(Link, { href: "https://github.com/nulogy/error-pages", children: "on GitHub" }), " or preview them", " ", _jsx(Link, { href: "https://nulogy.github.io/error-pages/", children: "here" }), "."] })),
+    parameters: {
+        chromatic: { disable: true },
+    },
 };
 export const Base = () => (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsx(Box, { maxWidth: ErrorPageAlertWidth, children: _jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", children: "We've been notified about this issue and we'll take a look at it shortly." }) })] }) }) }));
-/* eslint-disable jsx-a11y/anchor-is-valid */
-export const WithALink = () => {
-    const theme = useTheme();
-    return (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsxs(Box, { maxWidth: ErrorPageAlertWidth, children: [_jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2", children: "We've been notified about this issue and we'll take a look at it shortly." }), _jsx(Link, { href: "#", children: "Back to homepage" })] })] }) }) }));
-};
-/* eslint-enable jsx-a11y/anchor-is-valid */
-WithALink.story = {
+export const WithALink = {
+    render: () => {
+        const theme = useTheme();
+        return (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: `-${theme.space.x4}` }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsxs(Box, { maxWidth: ErrorPageAlertWidth, children: [_jsx(Alert, { type: "danger", title: "We're sorry, but something went wrong.", mb: "x2", children: "We've been notified about this issue and we'll take a look at it shortly." }), _jsx(Link, { href: "/", children: "Back to homepage" })] })] }) }) }));
+    },
     name: "With a link",
 };
 export const Maintenance = () => (_jsx(Flex, { height: "100vh", flexDirection: "column", pt: "x3", pr: "x2", pb: "x2", pl: "x2", children: _jsx(Flex, { flexGrow: 1, maxWidth: ErrorPageWidth, m: "0 auto", children: _jsxs(Flex, { width: "100%", flexDirection: { extraSmall: "column", large: "row" }, alignItems: "center", children: [_jsx(Box, { mb: { extraSmall: "x5", small: "x4", large: 0 }, mt: { extraSmall: "x2", small: "80px", large: 0 }, mr: { extraSmall: 0, large: "x3" }, children: _jsx(Branding, { size: "large" }) }), _jsx(Box, { maxWidth: ErrorPageAlertWidth, children: _jsx(Alert, { children: "We are currently adding new features to Nulogy Quality Control. We should be online shortly." }) })] }) }) }));

package/dist/src/pages/LoginPage.story.d.ts

@@ -4,26 +4,18 @@ declare const _default: {
 export default _default;
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRememberMe: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithForgotPasswordLink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithError: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorAndNoAdditionalText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/pages/LoginPage.story.js

@@ -4,19 +4,19 @@ export default {
     title: "Pages/LoginPage",
 };
 export const Base = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-export const WithRememberMe = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs("form", { style: { width: "100%" }, children: [_jsx(Input, { mb: "x3", labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(Checkbox, { mb: "x3", labelText: "Remember me" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithRememberMe.story = {
+export const WithRememberMe = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs("form", { style: { width: "100%" }, children: [_jsx(Input, { mb: "x3", labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(Checkbox, { mb: "x3", labelText: "Remember me" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with remember me",
 };
-export const WithForgotPasswordLink = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] }), _jsx(Box, { py: "x1", mt: "x1", children: _jsx(Link, { href: "/", children: "Forgot your password?" }) })] }) }) }));
-WithForgotPasswordLink.story = {
+export const WithForgotPasswordLink = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { color: "darkGrey", fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] }), _jsx(Box, { py: "x1", mt: "x1", children: _jsx(Link, { href: "/", children: "Forgot your password?" }) })] }) }) })),
     name: "with forgot password link",
 };
-export const WithError = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithError.story = {
+export const WithError = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x2", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", mb: "x4", children: "Additional Text" }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { style: { width: "100%" }, children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with error",
 };
-export const WithErrorAndNoAdditionalText = () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x4", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) }));
-WithErrorAndNoAdditionalText.story = {
+export const WithErrorAndNoAdditionalText = {
+    render: () => (_jsx(Flex, { minHeight: "100vh", justifyContent: "center", flexDirection: "column", alignItems: "center", bg: { extraSmall: "white", small: "whiteGrey" }, width: "100%", children: _jsx(Flex, { width: "100%", maxWidth: "384px", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Flex, { height: { extraSmall: "100%", small: "auto" }, maxWidth: "384px", width: "100%", borderRadius: { extraSmall: null, small: "medium" }, boxShadow: { extraSmall: null, small: "small" }, px: { extraSmall: "x2", small: "x4" }, py: { extraSmall: "x3", small: "x5" }, bg: "white", my: "x2", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { mb: "x4", width: "100%", children: _jsx(Branding, { withLine: true, size: "large", subtext: "Logo Subtext", alignment: "center" }) }), _jsx(Alert, { mb: "x4", width: "100%", type: "danger", children: "text" }), _jsxs(Form, { children: [_jsx(Input, { labelText: "Email" }), _jsx(Input, { type: "password", labelText: "Password" }), _jsx(PrimaryButton, { fullWidth: true, children: "Sign In" })] })] }) }) })),
     name: "with error and no additional text",
 };