reshaped 3.3.11 → 3.3.13

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

@@ -13,64 +13,73 @@ export default {
         },
     },
 };
-export const size = () => (<Example>
-		<Example.Item title="size: 4">
-			<Icon svg={IconZap} size={4}/>
-		</Example.Item>
-		<Example.Item title="size: 8">
-			<Icon svg={IconZap} size={8}/>
-		</Example.Item>
-		<Example.Item title="size: 100%">
-			<View width={25} height={25}>
-				<Icon svg={IconZap} size="100%"/>
-			</View>
-		</Example.Item>
-		<Example.Item title={["responsive size", "[s] 5", "[m]: 10"]}>
-			<Icon svg={IconZap} size={{ s: 5, m: 10 }}/>
-		</Example.Item>
-		<Example.Item title="size: inherit from font">
-			<Text variant="title-6">
-				<View direction="row" align="center" gap={2}>
-					<Icon svg={IconZap}/>
-					<View.Item>Reshaped</View.Item>
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: 4">
+				<Icon svg={IconZap} size={4}/>
+			</Example.Item>
+			<Example.Item title="size: 8">
+				<Icon svg={IconZap} size={8}/>
+			</Example.Item>
+			<Example.Item title="size: 100%">
+				<View width={25} height={25}>
+					<Icon svg={IconZap} size="100%"/>
 				</View>
-			</Text>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: neutral">
-			<Icon svg={IconZap} color="neutral"/>
-		</Example.Item>
-		<Example.Item title="color: neutral-faded">
-			<Icon svg={IconZap} color="neutral-faded"/>
-		</Example.Item>
-		<Example.Item title="color: primary">
-			<Icon svg={IconZap} color="primary"/>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Icon svg={IconZap} color="critical"/>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Icon svg={IconZap} color="positive"/>
-		</Example.Item>
-		<Example.Item title="color: disabled">
-			<Icon svg={IconZap} color="disabled"/>
-		</Example.Item>
-		<Example.Item title="color: inherit">
-			<div style={{ color: "tomato" }}>
-				<Icon svg={IconZap}/>
-			</div>
-		</Example.Item>
-	</Example>);
-export const autoWidth = () => (<Example>
-		<Example.Item title="square boundaries">
-			<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
-				<Icon svg={IconMic} size={10}/>
-			</div>
-		</Example.Item>
-		<Example.Item title="auto width boundaries">
-			<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
-				<Icon svg={IconMic} size={10} autoWidth/>
-			</div>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+			<Example.Item title={["responsive size", "[s] 5", "[m]: 10"]}>
+				<Icon svg={IconZap} size={{ s: 5, m: 10 }}/>
+			</Example.Item>
+			<Example.Item title="size: inherit from font">
+				<Text variant="title-6">
+					<View direction="row" align="center" gap={2}>
+						<Icon svg={IconZap}/>
+						<View.Item>Reshaped</View.Item>
+					</View>
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<Icon svg={IconZap} color="neutral"/>
+			</Example.Item>
+			<Example.Item title="color: neutral-faded">
+				<Icon svg={IconZap} color="neutral-faded"/>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Icon svg={IconZap} color="primary"/>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Icon svg={IconZap} color="critical"/>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Icon svg={IconZap} color="positive"/>
+			</Example.Item>
+			<Example.Item title="color: disabled">
+				<Icon svg={IconZap} color="disabled"/>
+			</Example.Item>
+			<Example.Item title="color: inherit">
+				<div style={{ color: "tomato" }}>
+					<Icon svg={IconZap}/>
+				</div>
+			</Example.Item>
+		</Example>),
+};
+export const autoWidth = {
+    name: "autoWidth",
+    render: () => (<Example>
+			<Example.Item title="square boundaries">
+				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
+					<Icon svg={IconMic} size={10}/>
+				</div>
+			</Example.Item>
+			<Example.Item title="auto width boundaries">
+				<div style={{ background: "var(--rs-color-background-neutral)", display: "inline-block" }}>
+					<Icon svg={IconMic} size={10} autoWidth/>
+				</div>
+			</Example.Item>
+		</Example>),
+};

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

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

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

@@ -0,0 +1,35 @@
+import { expect } from "@storybook/test";
+import Icon from "../index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
+    title: "Utilities/Icon/tests",
+    component: Icon,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/icon",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "render, hidden from sr",
+    render: () => (<div data-testid="root">
+			<Icon svg={IconZap}/>
+		</div>),
+    play: ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toBeInTheDocument();
+        expect(root).toHaveAttribute("aria-hidden");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Icon svg={IconZap} 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");
+    },
+};

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

@@ -8,8 +8,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const size: () => import("react").JSX.Element;
-export declare const radius: () => import("react").JSX.Element;
-export declare const displayMode: () => import("react").JSX.Element;
-export declare const ratio: () => import("react").JSX.Element;
-export declare const fallback: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const radius: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const displayMode: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const ratio: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const fallback: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -13,85 +13,105 @@ export default {
     },
 };
 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 size = () => (<Example>
-		<Example.Item title="size: auto">
-			<Image src={imgUrl} alt="Image alt"/>
-		</Example.Item>
-		<Example.Item title="width: 200px">
-			<Image src={imgUrl} width="200px"/>
-		</Example.Item>
-		<Example.Item title="height: 200px">
-			<Image src={imgUrl} height="200px"/>
-		</Example.Item>
-		<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
-			<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
-		</Example.Item>
-	</Example>);
-export const radius = () => (<Example>
-		<Example.Item title="radius: small">
-			<View width="300px">
-				<Image src={imgUrl} borderRadius="small"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="radius: medium">
-			<View width="300px">
-				<Image src={imgUrl} borderRadius="medium"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="radius: large">
-			<View width="300px">
-				<Image src={imgUrl} borderRadius="large"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const displayMode = () => (<Example>
-		<Example.Item title="mode: cover">
-			<Image src={imgUrl} height="200px" width="100%" displayMode="cover"/>
-		</Example.Item>
-		<Example.Item title="mode: contain">
-			<Image src={imgUrl} height="200px" width="100%" displayMode="contain"/>
-		</Example.Item>
-	</Example>);
-export const ratio = () => (<Example>
-		<Example.Item title="ratio: 16/9">
-			<View aspectRatio={16 / 9}>
-				<Image src={imgUrl}/>
-			</View>
-		</Example.Item>
-		<Example.Item title="ratio: 16/9, displayMode: contain">
-			<View aspectRatio={16 / 9}>
-				<Image src={imgUrl} displayMode="contain"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const fallback = () => (<Example>
-		<Example.Item title="fallback, background, on error">
-			<View width="300px">
+export const base = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="base">
+				<Image src={imgUrl} alt="Image alt"/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "width, height",
+    render: () => (<Example>
+			<Example.Item title="width: 200px">
+				<Image src={imgUrl} width="200px"/>
+			</Example.Item>
+			<Example.Item title="height: 200px">
+				<Image src={imgUrl} height="200px"/>
+			</Example.Item>
+			<Example.Item title={["responsive width", "[s] 200px", "[m+] 300px"]}>
+				<Image src={imgUrl} width={{ s: "200px", m: "300px" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const radius = {
+    name: "borderRadius",
+    render: () => (<Example>
+			<Example.Item title="radius: small">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="small"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="radius: medium">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="medium"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="radius: large">
+				<View width="300px">
+					<Image src={imgUrl} borderRadius="large"/>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const displayMode = {
+    name: "displayMode",
+    render: () => (<Example>
+			<Example.Item title="mode: cover">
+				<Image src={imgUrl} height="200px" width="100%" displayMode="cover"/>
+			</Example.Item>
+			<Example.Item title="mode: contain">
+				<Image src={imgUrl} height="200px" width="100%" displayMode="contain"/>
+			</Example.Item>
+		</Example>),
+};
+export const ratio = {
+    name: "composition, aspectRatio",
+    render: () => (<Example>
+			<Example.Item title="ratio: 16/9">
 				<View aspectRatio={16 / 9}>
-					<Image src="error" fallback/>
+					<Image src={imgUrl}/>
 				</View>
-			</View>
-		</Example.Item>
-		<Example.Item title="fallback, image, on error">
-			<View width="300px">
+			</Example.Item>
+			<Example.Item title="ratio: 16/9, displayMode: contain">
 				<View aspectRatio={16 / 9}>
-					<Image src="error" fallback={imgUrl}/>
+					<Image src={imgUrl} displayMode="contain"/>
 				</View>
-			</View>
-		</Example.Item>
+			</Example.Item>
+		</Example>),
+};
+export const fallback = {
+    name: "fallback",
+    render: () => (<Example>
+			<Example.Item title="fallback, background, on error">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image src="error" fallback/>
+					</View>
+				</View>
+			</Example.Item>
+			<Example.Item title="fallback, image, on error">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image src="error" fallback={imgUrl}/>
+					</View>
+				</View>
+			</Example.Item>
 
-		<Example.Item title="fallback, icon, on error">
-			<View width="300px">
-				<View aspectRatio={16 / 9}>
-					<Image src="error" fallback={<Icon svg={IconZap} size={10}/>}/>
+			<Example.Item title="fallback, icon, on error">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image src="error" fallback={<Icon svg={IconZap} size={10}/>}/>
+					</View>
 				</View>
-			</View>
-		</Example.Item>
-		<Example.Item title="fallback, icon, no url">
-			<View width="300px">
-				<View aspectRatio={16 / 9}>
-					<Image fallback={<Icon svg={IconZap} size={10}/>}/>
+			</Example.Item>
+			<Example.Item title="fallback, icon, no url">
+				<View width="300px">
+					<View aspectRatio={16 / 9}>
+						<Image fallback={<Icon svg={IconZap} size={10}/>}/>
+					</View>
 				</View>
-			</View>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+		</Example>),
+};

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