reshaped 3.3.11 → 3.3.12

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

@@ -0,0 +1,25 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ImageProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const src: StoryObj;
+export declare const ariaLabel: StoryObj;
+export declare const onLoad: StoryObj<{
+    handleLoad: ReturnType<typeof fn>;
+}>;
+export declare const onError: StoryObj<{
+    handleError: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const imageAttributes: StoryObj;

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

@@ -0,0 +1,80 @@
+import { expect, fn, waitFor } from "@storybook/test";
+import Image from "../index.js";
+export default {
+    title: "Utilities/Image/tests",
+    component: Image,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/image",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
+export const src = {
+    name: "src, presentation",
+    render: () => <Image src={imgUrl}/>,
+    play: ({ canvas }) => {
+        const img = canvas.getByRole("presentation");
+        expect(img).toHaveAttribute("src", imgUrl);
+    },
+};
+export const ariaLabel = {
+    name: "src, alt",
+    render: () => <Image src={imgUrl} alt="photo"/>,
+    play: ({ canvas }) => {
+        const img = canvas.getByRole("img");
+        expect(img).toHaveAccessibleName("photo");
+    },
+};
+export const onLoad = {
+    name: "onLoad",
+    args: {
+        handleLoad: fn(),
+    },
+    render: (args) => <Image src={imgUrl} alt="photo" onLoad={args.handleLoad}/>,
+    play: async ({ canvas, args }) => {
+        const { handleLoad } = args;
+        const img = canvas.getByRole("img");
+        await waitFor(() => {
+            expect(handleLoad).toHaveBeenCalledTimes(1);
+            expect(handleLoad).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "load" }));
+        });
+    },
+};
+export const onError = {
+    name: "onError",
+    args: {
+        handleError: fn(),
+    },
+    render: (args) => <Image src="/invalid.png" alt="photo" onError={args.handleError}/>,
+    play: async ({ canvas, args }) => {
+        const { handleError } = args;
+        const img = canvas.getByRole("img");
+        await waitFor(() => {
+            expect(handleError).toHaveBeenCalledTimes(1);
+            expect(handleError).toHaveBeenCalledWith(expect.objectContaining({ target: img, type: "error" }));
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Image src={imgUrl} className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const imageAttributes = {
+    name: "imageAttributes",
+    render: () => (<div data-testid="root">
+			<Image src={imgUrl} alt="photo" attributes={{ id: "test-id" }} imageAttributes={{ id: "test-img-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const img = canvas.getByRole("img");
+        expect(img).toHaveAttribute("id", "test-img-id");
+    },
+};

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

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href" | "stopPropagation"> & {
+        icon?: import("../../Icon").IconProps["svg"];
+        color?: "inherit" | "critical" | "primary" | "positive" | "warning";
+        variant?: "plain" | "underline";
+    } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const children: StoryObj;
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,87 @@
+import { userEvent, expect, fn } from "@storybook/test";
+import Link from "../index.js";
+export default {
+    title: "Components/Link/tests",
+    component: Link,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/breadcrumbs",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const children = {
+    name: "children",
+    render: () => <Link>Trigger</Link>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SPAN");
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <Link href="https://reshaped.so">Trigger</Link>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Link onClick={args.handleClick}>Trigger</Link>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Link onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</Link>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Link disabled onClick={() => { }}>
+			Trigger
+		</Link>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Link className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</Link>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Loader/Loader.js

@@ -3,7 +3,7 @@ import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
 import s from "./Loader.module.css";
 const Loader = (props) => {
     const { size = "small", color = "primary", className, attributes } = props;
-    const ariaLabel = attributes?.["aria-label"];
+    const ariaLabel = props.ariaLabel || attributes?.["aria-label"];
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`]);
     return (_jsx("span", { ...attributes, role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames, children: _jsx("span", { className: s.inner }) }));
 };

package/dist/components/Loader/Loader.types.d.ts

@@ -2,6 +2,7 @@ import type * as G from "../../types/global";
 export type Props = {
     size?: G.Responsive<"small" | "medium" | "large">;
     color?: "primary" | "critical" | "positive" | "inherit";
+    ariaLabel?: string;
     className?: G.ClassName;
     attributes?: G.Attributes<"span">;
 };

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

@@ -12,30 +12,30 @@ export default {
 export const size = () => {
     return (<Example>
 			<Example.Item title="size: medium">
-				<Loader size="medium"/>
+				<Loader size="medium" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title="size: small">
-				<Loader size="small"/>
+				<Loader size="small" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title="size: large">
-				<Loader size="large"/>
+				<Loader size="large" ariaLabel="Loading"/>
 			</Example.Item>
 			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-				<Loader size={{ s: "small", m: "medium" }}/>
+				<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
 			</Example.Item>
 		</Example>);
 };
 export const color = () => (<Example>
 		<Example.Item title="color: primary">
-			<Loader />
+			<Loader ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: critical">
-			<Loader color="critical"/>
+			<Loader color="critical" ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: positive">
-			<Loader color="positive"/>
+			<Loader color="positive" ariaLabel="Loading"/>
 		</Example.Item>
 		<Example.Item title="color: inherit">
-			<Loader color="inherit"/>
+			<Loader color="inherit" ariaLabel="Loading"/>
 		</Example.Item>
 	</Example>);

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

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").LoaderProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const ariaLabel: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,32 @@
+import { expect } from "@storybook/test";
+import Loader from "../index.js";
+export default {
+    title: "Components/Loader/tests",
+    component: Loader,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/loader",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const ariaLabel = {
+    name: "ariaLabel",
+    render: () => <Loader ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root");
+        expect(root).toHaveAttribute("aria-live", "assertive");
+        expect(root).toHaveAttribute("aria-label", "Loading");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Loader className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -0,0 +1,26 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("../MenuItem.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const children: StoryObj;
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;
+export declare const alignerClassName: StoryObj;

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

@@ -0,0 +1,100 @@
+import { userEvent, expect, fn } from "@storybook/test";
+import MenuItem from "../index.js";
+export default {
+    title: "Components/MenuItem/tests",
+    component: MenuItem,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/menu-item",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const children = {
+    name: "children",
+    render: () => <MenuItem>Trigger</MenuItem>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("DIV");
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <MenuItem href="https://reshaped.so">Trigger</MenuItem>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <MenuItem onClick={args.handleClick}>Trigger</MenuItem>,
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getAllByRole("button")[0];
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const hrefOnClick = {
+    name: "href + onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<MenuItem onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas, args }) => {
+        const { handleClick } = args;
+        const el = canvas.getByRole("link");
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<MenuItem disabled onClick={() => { }}>
+			Trigger
+		</MenuItem>),
+    play: async ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</MenuItem>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const alignerClassName = {
+    name: "aligner, className, attributes",
+    render: () => (<div data-testid="root">
+			<MenuItem.Aligner className="test-classname" attributes={{ id: "test-id" }}>
+				<MenuItem>Trigger</MenuItem>
+			</MenuItem.Aligner>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ModalProps): React.JSX.Element;
+        Title: (props: import("../Modal.types").TitleProps) => React.JSX.Element;
+        Subtitle: (props: import("../Modal.types").SubtitleProps) => React.JSX.Element;
+    };
+    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/Modal/tests/Modal.test.stories.js

@@ -0,0 +1,149 @@
+import React from "react";
+import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import Modal from "../index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Components/Modal/tests",
+    component: Modal,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/modal",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const renderProps = {
+    name: "children, render props",
+    render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByText("Content");
+        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>
+				<Modal active={overlayToggle.active} onClose={(closeArgs) => {
+                overlayToggle.deactivate();
+                args.handleClose(closeArgs);
+            }} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
+					<Modal.Title>Title</Modal.Title>
+					Content
+				</Modal>
+			</>);
+    },
+    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);
+        // Wait for transition
+        await waitFor(() => {
+            // Changing state doesn't trigger onClose
+            expect(args.handleClose).toHaveBeenCalledTimes(0);
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        overlay = canvas.getAllByRole("button", { hidden: true }).at(-1);
+        // Close by clicking on the overlay
+        await userEvent.click(overlay);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+        // Open
+        await userEvent.click(trigger);
+        await sleep(100);
+        // Close by pressing Escape
+        await userEvent.keyboard("{Escape/}");
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(2);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const disableCloseOnClick = {
+    name: "disableCloseOnOutsideClick",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Modal active disableCloseOnOutsideClick onClose={(closeArgs) => {
+            args.handleClose(closeArgs);
+        }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    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 }}/>
+				<Modal active containerRef={containerRef}>
+					<Modal.Title>Title</Modal.Title>
+					Content
+				</Modal>
+			</>);
+    },
+    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: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Modal.Title>Title</Modal.Title>
+			Content
+		</Modal>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("test-id");
+        expect(root).toHaveClass("test-classname");
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: (props: import("./..").OverlayProps) => import("react").JSX.Element | null;
@@ -8,5 +9,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const shadowDom: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const transparent: StoryObj;
+export declare const blurred: StoryObj;