@nulogy/components 16.0.1 → 16.0.3

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

@@ -11,14 +11,10 @@ export declare const Success: () => import("react/jsx-runtime").JSX.Element;
 export declare const Warning: () => import("react/jsx-runtime").JSX.Element;
 export declare const Danger: () => import("react/jsx-runtime").JSX.Element;
 export declare const FollowingText: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const InsideFlex: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/StatusIndicator/StatusIndicator.story.js

@@ -14,11 +14,11 @@ export const Informative = () => _jsx(StatusIndicator, { type: "informative", ch
 export const Success = () => _jsx(StatusIndicator, { type: "success", children: "Success" });
 export const Warning = () => _jsx(StatusIndicator, { type: "warning", children: "Warning" });
 export const Danger = () => _jsx(StatusIndicator, { type: "danger", children: "Danger" });
-export const FollowingText = () => (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
-FollowingText.story = {
+export const FollowingText = {
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Box, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Box, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", children: "Long label Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend metus, in tempus sapien. Morbi eget felis est. Nunc facilisis vel nisi nec ornare. Ut blandit ullamcorper enim sed fringilla. Quisque malesuada pharetra tincidunt. Mauris mauris tortor, maximus vitae tempor ac, tincidunt pharetra augue. In eget suscipit est. Suspendisse feugiat risus urna" }), _jsx(StatusIndicator, { children: "Status" })] })] })),
     name: "Following text",
 };
-export const InsideFlex = () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { className: "my-test-classname", children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] })] }));
-InsideFlex.story = {
+export const InsideFlex = {
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { mb: "x3", children: [_jsx(Heading2, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { className: "my-test-classname", children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Heading3, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "small", lineHeight: "smallTextBase", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] }), _jsxs(Flex, { mb: "x3", children: [_jsx(Text, { fontSize: "smaller", lineHeight: "smallerText", inline: true, mr: "x1", mb: "0", children: "Label" }), _jsx(StatusIndicator, { children: "Status" })] })] })),
     name: "Inside flex",
 };

package/dist/src/Summary/Summary.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import { BoxProps } from "../Box/Box";
 type SummaryProps = Omit<BoxProps, "as"> & {
     breakpoint?: number | string;
 };
-declare const Summary: React.FC<React.PropsWithChildren<SummaryProps>>;
+declare function Summary({ breakpoint, children, ...rest }: SummaryProps): import("react/jsx-runtime").JSX.Element;
 export default Summary;

package/dist/src/Summary/Summary.js

@@ -21,10 +21,10 @@ const SummaryWrapper = styled(Box)(({ theme, breakpoint }) => ({
         rowGap: 0,
     },
 }));
-const Summary = ({ breakpoint, children, ...rest }) => {
+function Summary({ breakpoint, children, ...rest }) {
     const theme = useTheme();
     breakpoint || (breakpoint = theme.breakpoints.medium);
     const breakpointPx = numberFromDimension(breakpoint);
     return (_jsx(SummaryContextProvider, { breakpoint: breakpointPx, children: _jsx(SummaryWrapper, { breakpoint: breakpointPx, ...rest, children: children }) }));
-};
+}
 export default Summary;

package/dist/src/Summary/SummaryContext.d.ts

@@ -3,5 +3,7 @@ type SummaryContextValue = {
     breakpoint: number;
 };
 export declare function useSummaryContext(): SummaryContextValue;
-export declare const SummaryContextProvider: React.FC<React.PropsWithChildren<SummaryContextValue>>;
+export declare function SummaryContextProvider({ breakpoint, children }: SummaryContextValue & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Summary/SummaryContext.js

@@ -8,8 +8,8 @@ export function useSummaryContext() {
     }
     return context;
 }
-export const SummaryContextProvider = ({ breakpoint, children, }) => {
+export function SummaryContextProvider({ breakpoint, children }) {
     return (_jsx(SummaryContext.Provider, { value: {
             breakpoint,
         }, children: children }));
-};
+}

package/dist/src/Summary/SummaryItem.d.ts

@@ -4,5 +4,5 @@ type SummaryItemProps = Omit<FlexProps, "as"> & {
     value: number | string;
     status: React.ReactNode;
 };
-declare const SummaryItem: React.FC<React.PropsWithChildren<SummaryItemProps>>;
+declare function SummaryItem({ value, status, ...rest }: SummaryItemProps): import("react/jsx-runtime").JSX.Element;
 export default SummaryItem;

package/dist/src/Summary/SummaryItem.js

@@ -11,10 +11,10 @@ const SummaryItemWrapper = styled(Flex)(({ theme, breakpoint }) => ({
         flexDirection: "row",
     },
 }));
-const SummaryItem = ({ value, status, ...rest }) => {
+function SummaryItem({ value, status, ...rest }) {
     const { breakpoint } = useSummaryContext();
     const matches = useMediaQuery(`(max-width: ${breakpoint}px)`);
     delete rest["children"];
     return (_jsxs(SummaryItemWrapper, { breakpoint: breakpoint, ...rest, children: [_jsx(Text, { fontWeight: "medium", fontSize: !matches ? "heading4" : undefined, children: value }), status] }));
-};
+}
 export default SummaryItem;

package/dist/src/Switcher/Switcher.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
 import type { SwitchProps } from "./Switch";
 type SwitcherProps = {
@@ -7,5 +7,5 @@ type SwitcherProps = {
     selected?: string;
     onChange?: (value: string) => void;
 };
-declare const Switcher: React.FC<React.PropsWithChildren<SwitcherProps>>;
+declare function Switcher({ variant, selected, onChange, ...rest }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
 export default Switcher;

package/dist/src/Switcher/Switcher.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Box } from "../Box";
 import FocusManager from "../utils/ts/FocusManager";
 import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
-const Switcher = ({ variant, selected, onChange, ...rest }) => {
+function Switcher({ variant, selected, onChange, ...rest }) {
     const componentVariant = useComponentVariant(variant);
     const optionRefs = [];
     const isSelected = (value, index) => {
@@ -37,5 +37,5 @@ const Switcher = ({ variant, selected, onChange, ...rest }) => {
         });
     };
     return (_jsx(Box, { display: "inline-flex", bg: "whiteGrey", borderRadius: "9999px", ...rest, children: _jsx(FocusManager, { refs: optionRefs, defaultFocusedIndex: getSelectedIndex(), children: ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => options(focusedIndex, setFocusedIndex, handleArrowNavigation) }) }));
-};
+}
 export default Switcher;

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

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

package/dist/src/Switcher/Switcher.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, userEvent, within } from "storybook/test";
 import { Box } from "../Box";
 import { Text } from "../Type";
 import { Button } from "../Button";
@@ -10,7 +11,18 @@ export const WithSelectedValue = () => {
     const [selected, setSelected] = useState("option_2");
     return (_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }));
 };
-export const WithOtherInteractiveElements = () => (_jsxs(Flex, { gap: "x1", alignItems: "center", children: [_jsx(Button, { children: "Click me" }), _jsxs(Switcher, { "aria-label": "storybook-switcher", selected: "option_2", children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] })] }));
+export const WithOtherInteractiveElements = {
+    render: () => (_jsxs(Flex, { gap: "x1", alignItems: "center", children: [_jsx(Button, { children: "Click me" }), _jsxs(Switcher, { "aria-label": "storybook-switcher", selected: "option_2", children: [_jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] })] })),
+    name: "with other interactive elements",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("focuses the selected switch when tabbing from another element", async () => {
+            canvas.getByText("Click me").focus();
+            await userEvent.tab();
+            await expect(document.activeElement).toHaveTextContent("Option 2");
+        });
+    },
+};
 export const WithContent = () => {
     const [selected, setSelected] = useState("all");
     return (_jsxs(_Fragment, { children: [_jsxs(Switcher, { "aria-label": "storybook-switcher", selected: selected, onChange: setSelected, children: [_jsx(Switch, { value: "all", children: "All" }), _jsx(Switch, { value: "option_1", children: "Option 1" }), _jsx(Switch, { value: "option_2", children: "Option 2" })] }), _jsxs(Box, { px: "x1", py: "x3", children: [["all", "option_1"].includes(selected) && _jsx(Text, { children: "Option 1 Content" }), ["all", "option_2"].includes(selected) && _jsx(Text, { children: "Option 2 Content" })] })] }));

package/dist/src/Table/stories/BaseTable.story.d.ts

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

package/dist/src/Table/stories/BaseTable.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Box, DropdownButton, DropdownMenu, Button, Text, Flex } from "../..";
 import { getMockRows, mockColumns } from "../Table.mock-utils";
 import { Table } from "..";

package/dist/src/Table/stories/CustomContent.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Input } from "../../Input";
 import { Table } from "..";
 import { Box } from "../../Box";

package/dist/src/Table/stories/Density.story.d.ts

@@ -3,14 +3,10 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Compact: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/Density.story.js

@@ -58,11 +58,11 @@ const rowData = [
 export default {
     title: "Components/Table/Density",
 };
-export const Default = () => _jsx(Table, { columns: columns, rows: rowData });
-Default.story = {
+export const Default = {
+    render: () => _jsx(Table, { columns: columns, rows: rowData }),
     name: "Default",
 };
-export const Compact = () => _jsx(Table, { columns: columns, rows: rowData, compact: true });
-Compact.story = {
+export const Compact = {
+    render: () => _jsx(Table, { columns: columns, rows: rowData, compact: true }),
     name: "Compact",
 };

package/dist/src/Table/stories/SortingColumnHeader.story.d.ts

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

package/dist/src/Table/stories/SortingColumnHeader.story.js

@@ -1,4 +1,4 @@
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Table } from "../../index";
 export default {
     title: "Components/Table/Headers",

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

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

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { useState } from "react";
 import { Box, DropdownButton, DropdownMenu, Text } from "../..";
 import { Table } from "..";
@@ -176,6 +177,21 @@ export const WithPagination = {
         },
     },
     name: "with pagination",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("navigates to next page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to next results"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-02");
+        });
+        await step("navigates to previous page", async () => {
+            await userEvent.click(canvas.getByLabelText("Go to previous results"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-01");
+        });
+        await step("navigates to a specific page", async () => {
+            await userEvent.click(canvas.getByRole("button", { name: "Go to page 5" }));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("2019-10-07");
+        });
+    },
 };
 export const WithEverything = {
     args: {
@@ -204,6 +220,26 @@ export const WithEverything = {
         },
     },
     name: "with everything",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can expand a row", async () => {
+            await userEvent.click(canvas.getByLabelText("Expand row"));
+            await expect(canvas.getByTestId("table-body")).toHaveTextContent("Expands!");
+        });
+        await step("can collapse the expanded row", async () => {
+            await userEvent.click(canvas.getByLabelText("Collapse row"));
+            await waitFor(() => expect(canvas.getByTestId("table-body")).not.toHaveTextContent("Expands!"));
+        });
+        await step("saves row selections when navigating pages", async () => {
+            const tableHead = canvasElement.querySelector("[data-testid='table-head']");
+            await userEvent.click(within(tableHead).getByTestId("visual-checkbox"));
+            const headerInput = canvasElement.querySelector("[data-testid='table-head'] [type='checkbox']");
+            await expect(headerInput).toBeChecked();
+            await userEvent.click(canvas.getByLabelText("Go to next results"));
+            await userEvent.click(canvas.getByLabelText("Go to previous results"));
+            await expect(headerInput).toBeChecked();
+        });
+    },
 };
 export const WithOnHoverActions = {
     render: (args) => {

package/dist/src/Table/stories/TableWithCustomSorting.story.d.ts

@@ -3,8 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const WithCustomSorting: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithCustomSorting.story.js

@@ -58,7 +58,7 @@ const TableWithCustomSorting = () => {
 export default {
     title: "Components/Table/with custom sorting",
 };
-export const WithCustomSorting = () => _jsx(TableWithCustomSorting, {});
-WithCustomSorting.story = {
+export const WithCustomSorting = {
+    render: () => _jsx(TableWithCustomSorting, {}),
     name: "with custom sorting",
 };

package/dist/src/Table/stories/TableWithExpandableRows.story.d.ts

@@ -3,14 +3,10 @@ declare const _default: {
 };
 export default _default;
 export declare const WithExpandableRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithRowsExpandedByDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithExpandableRows.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Table } from "..";
 import { Box, Text } from "../..";
 const columns = [
@@ -64,11 +64,11 @@ const rowDataWithExpandable = [
 export default {
     title: "Components/Table/with expandable rows",
 };
-export const WithExpandableRows = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") }));
-WithExpandableRows.story = {
+export const WithExpandableRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, onRowExpansionChange: action("toggled expand") })),
     name: "with expandable rows",
 };
-export const WithRowsExpandedByDefault = () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
-WithRowsExpandedByDefault.story = {
+export const WithRowsExpandedByDefault = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowDataWithExpandable, hasExpandableRows: true, expandedRows: ["2019-10-04", "2019-10-22"], keyField: "date", onRowSelectionChange: action("row selection changed") })),
     name: "with rows expanded by default",
 };

package/dist/src/Table/stories/TableWithFiltering.story.d.ts

@@ -3,14 +3,14 @@ declare const _default: {
 };
 export default _default;
 export declare const WithFiltering: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFilteringAndPagination: {
-    (): 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>;
 };

package/dist/src/Table/stories/TableWithFiltering.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Table } from "../..";
 import { Input } from "../../Input";
 const COLUMNS = [
@@ -51,11 +52,21 @@ const TableWithFilters = ({ rowsPerPage }) => {
 export default {
     title: "Components/Table/with filtering",
 };
-export const WithFiltering = () => _jsx(TableWithFilters, {});
-WithFiltering.story = {
+export const WithFiltering = {
+    render: () => _jsx(TableWithFilters, {}),
     name: "with filtering",
 };
-export const WithFilteringAndPagination = () => _jsx(TableWithFilters, { rowsPerPage: 4 });
-WithFilteringAndPagination.story = {
+export const WithFilteringAndPagination = {
+    render: () => _jsx(TableWithFilters, { rowsPerPage: 4 }),
     name: "with filtering and pagination",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("shows multiple pages for unfiltered data", async () => {
+            await expect(canvas.getByRole("button", { name: "Go to page 3" })).toBeInTheDocument();
+        });
+        await step("filters down to fewer pages", async () => {
+            await userEvent.type(canvas.getByRole("textbox", { name: "Filter by Name" }), "a");
+            await waitFor(() => expect(canvas.queryByRole("button", { name: "Go to page 3" })).not.toBeInTheDocument());
+        });
+    },
 };

package/dist/src/Table/stories/TableWithSelectableRows.story.d.ts

@@ -3,14 +3,14 @@ declare const _default: {
 };
 export default _default;
 export declare const WithSelectableRows: {
-    (): 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 WithPreselectedRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithSelectableRows.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { expect, userEvent, within } from "storybook/test";
+import { action } from "storybook/actions";
 import { Table } from "..";
 const columns = [
     { label: "Date", dataKey: "date" },
@@ -59,11 +60,27 @@ const rowData = [
 export default {
     title: "Components/Table/with selectable rows",
 };
-export const WithSelectableRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") }));
-WithSelectableRows.story = {
+export const WithSelectableRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, onRowSelectionChange: action("row selection changed") })),
     name: "with selectable rows",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("can select a row by clicking its checkbox", async () => {
+            const tableBody = canvas.getByTestId("table-body");
+            const rowCheckboxes = within(tableBody).getAllByTestId("visual-checkbox");
+            await userEvent.click(rowCheckboxes[0]);
+            const rowInputs = canvasElement.querySelectorAll("[data-testid='table-body'] [type='checkbox']");
+            await expect(rowInputs[0]).toBeChecked();
+        });
+        await step("can select all rows using the header checkbox", async () => {
+            const tableHead = canvasElement.querySelector("[data-testid='table-head']");
+            await userEvent.click(within(tableHead).getByTestId("visual-checkbox"));
+            const headerInput = canvasElement.querySelector("[data-testid='table-head'] [type='checkbox']");
+            await expect(headerInput).toBeChecked();
+        });
+    },
 };
-export const WithPreselectedRows = () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") }));
-WithPreselectedRows.story = {
+export const WithPreselectedRows = {
+    render: () => (_jsx(Table, { columns: columns, rows: rowData, hasSelectableRows: true, selectedRows: ["2019-10-01"], keyField: "date", onRowSelectionChange: action("row selection changed") })),
     name: "with preselected rows",
 };

package/dist/src/Table/stories/TableWithServerSidePagination.story.d.ts

@@ -3,8 +3,6 @@ declare const _default: {
 };
 export default _default;
 export declare const WithServerSidePagination: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Table/stories/TableWithServerSidePagination.story.js

@@ -55,7 +55,7 @@ class TableWithServerSidePagination extends React.Component {
 export default {
     title: "Components/Table/with server side pagination",
 };
-export const WithServerSidePagination = () => _jsx(TableWithServerSidePagination, {});
-WithServerSidePagination.story = {
+export const WithServerSidePagination = {
+    render: () => _jsx(TableWithServerSidePagination, {}),
     name: "with server-side pagination",
 };

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

@@ -7,5 +7,5 @@ type TabScrollIndicatorProps = {
     ariaLabelLeft?: string;
     ariaLabelRight?: string;
 };
-declare const TabScrollIndicator: React.FC<React.PropsWithChildren<TabScrollIndicatorProps>>;
+declare function TabScrollIndicator({ side, width, ariaLabelLeft, ariaLabelRight, onClick, ...props }: TabScrollIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default TabScrollIndicator;

package/dist/src/Tabs/TabScrollIndicator.js

@@ -36,7 +36,7 @@ const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
         opacity: ".5",
     },
 }));
-const TabScrollIndicator = ({ side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick, ...props }) => {
+function TabScrollIndicator({ side = "left", width = 40, ariaLabelLeft, ariaLabelRight, onClick, ...props }) {
     const { t } = useTranslation();
     const rightArrowLabel = ariaLabelRight || t("next");
     const leftArrowLabel = ariaLabelLeft || t("previous");
@@ -44,5 +44,5 @@ const TabScrollIndicator = ({ side = "left", width = 40, ariaLabelLeft, ariaLabe
         event.preventDefault();
     }
     return (_jsx(TabScrollIndicatorButton, { ...props, width: width, tabIndex: -1, onClick: onClick, onMouseDown: preventFocusMovement, side: side, "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel, children: _jsx(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" }) }));
-};
+}
 export default TabScrollIndicator;