@nulogy/components 16.0.1 → 16.0.3

package/dist/src/Tooltip/Tooltip.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Box, Button, DescriptionDetails, DescriptionList, DescriptionTerm, Divider, Flex, Icon, Link, StatusIndicator, Text, Tooltip, } from "../index";
 export default {
     title: "Components/Tooltip",
@@ -10,6 +11,21 @@ export default {
 };
 export const Default = {
     render: () => (_jsx(Flex, { p: "x8", children: _jsx(Tooltip, { tooltip: "I am a Tooltip!", children: _jsx(Button, { "data-testid": "tooltip-trigger", children: "Button" }) }) })),
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("tooltip is not visible before interaction", async () => {
+            await expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+        });
+        await step("shows tooltip text on hover", async () => {
+            await userEvent.hover(canvas.getByTestId("tooltip-trigger"));
+            // Radix renders the tooltip in a body portal, so use screen (not canvas)
+            await waitFor(() => expect(screen.getByRole("tooltip")).toHaveTextContent("I am a Tooltip!"));
+        });
+        await step("hides tooltip when moving away", async () => {
+            await userEvent.unhover(canvas.getByTestId("tooltip-trigger"));
+            await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithWrappedText = {
     render: () => (_jsx(Flex, { p: "x8", children: _jsx(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true, children: _jsx(Button, { children: " Button " }) }) })),

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -9,26 +9,28 @@ declare const MenuButton: import("styled-components/dist/types").IStyledComponen
 declare const NavigationItemsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 declare const StyledBackLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
-} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+} & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLElement | SVGElement>;
+}, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
 }, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-declare const StyledMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
-    children?: import("react").ReactNode | Record<string, unknown>;
+declare const StyledMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<{
+    children?: import("react").ReactNode;
     value?: string | number | readonly string[];
-    slot?: string;
-    title?: string;
     property?: string;
     color?: string;
     content?: string;
     translate?: "yes" | "no";
     hidden?: boolean;
+    slot?: string;
+    title?: string;
     defaultChecked?: boolean;
     defaultValue?: string | number | readonly string[];
     suppressContentEditableWarning?: boolean;
@@ -37,7 +39,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus?: boolean;
     className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only";
     contextMenu?: string;
     dir?: string;
     draggable?: boolean | "true" | "false";
@@ -45,7 +47,6 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     id?: string;
     lang?: string;
     nonce?: string;
-    placeholder?: string;
     spellCheck?: boolean | "true" | "false";
     tabIndex?: number;
     radioGroup?: string;
@@ -69,7 +70,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     results?: number;
     security?: string;
     unselectable?: "off" | "on";
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
     exportparts?: string;
     part?: string;
@@ -85,7 +86,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "aria-colindextext"?: string;
     "aria-colspan"?: number;
     "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date";
+    "aria-current"?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date";
     "aria-describedby"?: string;
     "aria-description"?: string;
     "aria-details"?: string;
@@ -95,7 +96,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "aria-expanded"?: boolean | "true" | "false";
     "aria-flowto"?: string;
     "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
     "aria-hidden"?: boolean | "true" | "false";
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts"?: string;
@@ -112,7 +113,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "aria-posinset"?: number;
     "aria-pressed"?: boolean | "true" | "false" | "mixed";
     "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
     "aria-required"?: boolean | "true" | "false";
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
@@ -263,9 +264,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onPointerCancel?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerEnter?: import("react").PointerEventHandler<HTMLLIElement>;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerLeave?: import("react").PointerEventHandler<HTMLLIElement>;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOver?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLLIElement>;
     onPointerOut?: import("react").PointerEventHandler<HTMLLIElement>;
@@ -285,5 +284,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement>;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement>;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement>;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLIElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, keyof import("react").Component<any, {}, any>>;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLLIElement>;
+}, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLLIElement, import("framer-motion").HTMLMotionProps<"li">>, keyof import("react").Component<any, {}, any>>;
 export { Navigation, Header, NavigationItemsList, StyledBackLink, StyledPageTitle, Overlay, TileLink, StylelessButton, MenuItemList, MenuButton, StyledMenuItem, };

package/dist/src/TopBar/components/BackLink.d.ts

@@ -1,7 +1,9 @@
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
 import { MaxWidthProps } from "styled-system";
 import { StyledBackLink } from "../TopBar.styled";
 interface BackLinkProps extends MaxWidthProps, ComponentProps<typeof StyledBackLink> {
+    as?: React.ElementType;
+    to?: string;
 }
 export declare function BackLink({ children, maxWidth, ...props }: BackLinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/TopBar/components/MenuItemLink.d.ts

@@ -1,7 +1,9 @@
 import { IconName } from "@nulogy/icons";
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
 import { TileLink } from "../TopBar.styled";
 export interface MenuItemLinkProps extends ComponentProps<typeof TileLink> {
+    as?: React.ElementType;
+    to?: string;
     title: string;
     description?: string;
     icon: IconName;

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

@@ -25,4 +25,4 @@ export const WithACustomMaxWidth = () => (_jsxs(TopBar.Root, { children: [_jsx(T
                 large: "12ch",
                 extraLarge: "16ch",
             }, 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 WithARouterLink = () => (_jsx(BrowserRouter, { children: _jsxs(TopBar.Root, { children: [_jsx(Link, { component: TopBar.BackLink, to: "/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 WithARouterLink = () => (_jsx(BrowserRouter, { children: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { as: Link, to: "/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))) })] }) }));

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

@@ -28,5 +28,5 @@ export const WithRouterLinks = () => {
         ...item,
         to: href,
     }));
-    return (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: _jsx(BrowserRouter, { basename: "/", children: routerMenuItems.map((item) => (_jsx(TopBar.MenuItem, { children: _jsx(Link, { component: TopBar.MenuItemLink, ...item }) }, item.title))) }) })] }));
+    return (_jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "#", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { defaultOpened: true, children: _jsx(BrowserRouter, { basename: "/", children: routerMenuItems.map((item) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { as: Link, ...item }) }, item.title))) }) })] }));
 };

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

@@ -13,6 +13,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Default: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithALongTitle: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAnApplicationFrame: () => import("react/jsx-runtime").JSX.Element;

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/Headings.d.ts

@@ -1,5 +1,5 @@
 import { TextProps } from "./Text";
-export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading1: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
@@ -11,7 +11,7 @@ export declare const Heading1: import("styled-components/dist/types").IStyledCom
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, TextProps>> & string;
-export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
@@ -23,7 +23,7 @@ export declare const Heading2: import("styled-components/dist/types").IStyledCom
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading3: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;
@@ -35,7 +35,7 @@ export declare const Heading3: import("styled-components/dist/types").IStyledCom
 }, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: import("react").Ref<HTMLHeadingElement>;
 }>, never>, never>> & string;
-export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | "disabled" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+export declare const Heading4: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "textTransform" | keyof import("react").HTMLAttributes<HTMLParagraphElement> | "disabled" | "inline" | "compact" | keyof import("..").StyledProps> & import("react").HTMLAttributes<HTMLParagraphElement> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     inline?: boolean;
     compact?: boolean;

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",
 };