reshaped 3.3.11 → 3.3.12

package/dist/components/Overlay/tests/Overlay.stories.js

@@ -1,8 +1,7 @@
-import { createRoot } from "react-dom/client";
+import { userEvent } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
-import Reshaped from "../../Reshaped/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/Overlay",
@@ -13,56 +12,57 @@ export default {
         },
     },
 };
-export const base = () => {
-    const baseToggle = useToggle(false);
-    const transparentToggle = useToggle(false);
-    const blurredToggle = useToggle(false);
-    return (<Example>
-			<Example.Item title="locks scroll">
-				<Button onClick={() => baseToggle.activate()}>Open overlay</Button>
-				<Overlay active={baseToggle.active} onClose={() => baseToggle.deactivate()}>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<Example.Item title="transparent, doesn't lock scroll">
-				<Button onClick={() => transparentToggle.activate()}>Open overlay</Button>
-				<Overlay active={transparentToggle.active} onClose={() => transparentToggle.deactivate()} transparent>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<Example.Item title="blurred">
-				<Button onClick={() => blurredToggle.activate()}>Open overlay</Button>
-				<Overlay active={blurredToggle.active} onClose={() => blurredToggle.deactivate()} blurred>
-					Overlay content
-				</Overlay>
-			</Example.Item>
-
-			<div style={{ height: 1000 }}/>
-		</Example>);
+export const base = {
+    name: "base",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
 };
-class CustomElement extends window.HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        if (!this.shadowRoot)
-            return;
-        const overlay = (<Reshaped>
-				<Overlay active>Content</Overlay>
-			</Reshaped>);
-        const root = createRoot(this.shadowRoot);
-        root.render(overlay);
-    }
-}
-if (!window.customElements.get("custom-element")) {
-    window.customElements.define("custom-element", CustomElement);
-}
-export const shadowDom = () => {
-    return (<Example>
-			<Example.Item>
-				{/* @ts-ignore */}
-				<custom-element />
-			</Example.Item>
-		</Example>);
+export const transparent = {
+    name: "transparent",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
+};
+export const blurred = {
+    name: "blurred",
+    render: () => {
+        const overlayToggle = useToggle(false);
+        return (<Example>
+				<Example.Item title="base">
+					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>
+						Overlay content
+					</Overlay>
+				</Example.Item>
+			</Example>);
+    },
+    play: async ({ canvas }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
 };

package/dist/components/Overlay/tests/Overlay.test.stories.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").OverlayProps) => React.JSX.Element | null;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const renderProps: StoryObj;
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleAfterOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+    handleAfterClose: ReturnType<typeof fn>;
+}>;
+export declare const disableCloseOnClick: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const containerRef: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Overlay/tests/Overlay.test.stories.js

@@ -0,0 +1,146 @@
+import React from "react";
+import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import Overlay from "../index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Utilities/Overlay/tests",
+    component: Overlay,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/overlay",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			{(args) => (args.active ? "Opened" : "Closed")}
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Opened");
+        expect(root).toBeInTheDocument();
+    },
+};
+export const handlers = {
+    name: "onOpen, onClose, onAfterOpen, onAfterClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+        handleAfterClose: fn(),
+        handleAfterOpen: fn(),
+    },
+    render: (args) => {
+        const overlayToggle = useToggle();
+        return (<>
+				<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let overlay;
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
+        });
+        // Close by changing the state after the trigger click
+        await userEvent.click(trigger);
+        // Changing state doesn't trigger onClose
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        // Wait for transition
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        overlay = canvas.getByText("Content");
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        // TODO: Fails CLI tests in Storybook without a timeout
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape/}");
+        expect(args.handleClose).toHaveBeenCalledTimes(2);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+        await waitFor(() => {
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const overlay = canvas.getByText("Content");
+        await userEvent.click(overlay);
+        expect(args.handleClose).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("{Escape/}");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const containerRef = {
+    name: "containerRef",
+    render: () => {
+        const containerRef = React.useRef(null);
+        return (<>
+				<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
+				<Overlay active containerRef={containerRef}>
+					Content
+				</Overlay>
+			</>);
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const container = canvas.getByTestId("test-id");
+        const overlay = canvas.getByText("Content");
+        expect(container).toContainElement(overlay);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			Content
+		</Overlay>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

package/dist/components/Pagination/tests/Pagination.test.stories.d.ts

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").PaginationProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const defaultPage: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const page: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

package/dist/components/Pagination/tests/Pagination.test.stories.js

@@ -0,0 +1,86 @@
+import { expect, within, fn, userEvent } from "@storybook/test";
+import Pagination from "../index.js";
+export default {
+    title: "Components/Pagination/tests",
+    component: Pagination,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pagination",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<div data-testid="root">
+			<Pagination total={10} previousAriaLabel="Previous" nextAriaLabel="Next" pageAriaLabel={(args) => `Page ${args.page}`}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        const prevButton = root.getByLabelText("Previous");
+        const nextButton = root.getByLabelText("Next");
+        const firstPageButton = root.getByLabelText("Page 1");
+        expect(buttons.length).toBe(8);
+        expect(prevButton).toEqual(buttons[0]);
+        expect(prevButton).toBeDisabled();
+        expect(nextButton).toEqual(buttons.at(-1));
+        expect(nextButton).not.toBeDisabled();
+        expect(firstPageButton).toBeInTheDocument();
+        expect(firstPageButton).toEqual(pages[0]);
+        expect(firstPageButton).toHaveAttribute("aria-current", "true");
+    },
+};
+export const defaultPage = {
+    name: "defaultPage, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} defaultPage={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        expect(pages[1]).toHaveAttribute("aria-current", "false");
+        expect(pages[2]).toHaveAttribute("aria-current", "true");
+    },
+};
+export const page = {
+    name: "page, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<div data-testid="root">
+			<Pagination total={10} page={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const root = within(canvas.getByTestId("root"));
+        const buttons = root.getAllByRole("button");
+        const pages = buttons.slice(1, -1);
+        expect(pages[1]).toHaveAttribute("aria-current");
+        await userEvent.click(pages[2]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
+        // Stays the same because it's controlled
+        expect(pages[1]).toHaveAttribute("aria-current", "true");
+        expect(pages[2]).toHaveAttribute("aria-current", "false");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Pagination className="test-classname" attributes={{ id: "test-id" }} total={10} previousAriaLabel="Previous" nextAriaLabel="Next"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/PinField/tests/PinField.stories.d.ts

@@ -11,4 +11,3 @@ export default _default;
 export declare const base: () => import("react").JSX.Element;
 export declare const variant: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;

package/dist/components/PinField/tests/PinField.stories.js

@@ -1,6 +1,5 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import PinField from "../index.js";
-import FormControl from "../../FormControl/index.js";
 export default {
     title: "Components/PinField",
     component: PinField,
@@ -12,52 +11,44 @@ export default {
 };
 export const base = () => (<Example>
 		<Example.Item title="no value">
-			<PinField name="pin"/>
+			<PinField name="pin" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: 1234">
-			<PinField name="pin2" defaultValue="1234"/>
+			<PinField name="pin2" defaultValue="1234" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="value: 12">
-			<PinField name="pin3" value="12"/>
+			<PinField name="pin3" value="12" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: 12, valueLength: 6">
-			<PinField name="pin4" defaultValue="12" valueLength={6}/>
+			<PinField name="pin4" defaultValue="12" valueLength={6} inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
-			<PinField name="pin5" defaultValue="ab" pattern="alphabetic"/>
+			<PinField name="pin5" defaultValue="ab" pattern="alphabetic" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
-			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric"/>
+			<PinField name="pin6" defaultValue="ab" pattern="alphanumeric" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);
 export const variant = () => (<Example>
 		<Example.Item title="variant: faded">
-			<PinField name="pin" variant="faded"/>
+			<PinField name="pin" variant="faded" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: large">
-			<PinField name="pin" size="large"/>
+			<PinField name="pin" size="large" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="size: xlarge">
-			<PinField name="pin" size="xlarge"/>
+			<PinField name="pin" size="xlarge" inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 
 		<Example.Item title="size: responsive, s: medium, m+: xlarge">
-			<PinField name="pin" size={{ s: "medium", m: "xlarge" }}/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="with form control">
-			<FormControl>
-				<FormControl.Label>Label</FormControl.Label>
-				<PinField name="pin"/>
-			</FormControl>
+			<PinField name="pin" size={{ s: "medium", m: "xlarge" }} inputAttributes={{ "aria-label": "Pin" }}/>
 		</Example.Item>
 	</Example>);

package/dist/components/PinField/tests/PinField.test.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").PinFieldProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const valueLength: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const pattern: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const formControl: StoryObj;
+export declare const keyboard: StoryObj;
+export declare const className: StoryObj;