reshaped 3.8.0-canary.6 → 3.8.0-canary.8

package/dist/components/Hidden/Hidden.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { classNames, responsiveClassNames, setComponentChildId } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;
@@ -7,4 +7,5 @@ const Hidden = (props) => {
     return _jsx(TagName, { className: rootClassNames, children: children });
 };
 Hidden.displayName = "Hidden";
+setComponentChildId(Hidden, "Hidden");
 export default Hidden;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenProps>;
@@ -12,3 +13,4 @@ export declare const visibility: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const as: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Hidden from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Hidden",
     component: Hidden,
@@ -37,3 +38,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const as = {
+    name: "as",
+    render: () => <Hidden as="span">Content</Hidden>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el.tagName).toEqual("SPAN");
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenVisuallyProps>;
@@ -12,3 +13,4 @@ export declare const visibility: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const children: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import HiddenVisually from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/HiddenVisually",
     component: HiddenVisually,
@@ -17,3 +18,11 @@ export const visibility = {
 			</Example.Item>
 		</Example>),
 };
+export const children = {
+    name: "children",
+    render: () => <HiddenVisually>Content</HiddenVisually>,
+    play: ({ canvas }) => {
+        const el = canvas.getByText("Content");
+        expect(el).toBeInTheDocument();
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("..").HotkeyProps>;
@@ -9,3 +10,4 @@ declare const _default: {
 };
 export default _default;
 export declare const base: () => import("react").JSX.Element;
+export declare const className: StoryObj;

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

@@ -3,6 +3,7 @@ import useHotkeys from "../../../hooks/useHotkeys.js";
 import View from "../../View/index.js";
 import TextField from "../../TextField/index.js";
 import Hotkey from "../Hotkey.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Hotkey",
     component: Hotkey,
@@ -36,3 +37,17 @@ export const base = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Hotkey className="test-classname" attributes={{ id: "test-id" }}>
+				⌘K
+			</Hotkey>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root?.tagName).toBe("KBD");
+    },
+};

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").IconProps>;
@@ -20,3 +21,5 @@ export declare const autoWidth: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const className: StoryObj;
+export declare const render: StoryObj;

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

@@ -4,6 +4,7 @@ import Icon from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
 import IconMic from "../../../icons/Mic.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/Icon",
     component: Icon,
@@ -88,3 +89,25 @@ export const autoWidth = {
 			</Example.Item>
 		</Example>),
 };
+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");
+    },
+};
+export const render = {
+    name: "test: 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");
+    },
+};

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

@@ -1,3 +1,5 @@
+import { fn } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
@@ -12,8 +14,29 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const withIcon: () => import("react").JSX.Element;
-export declare const testMultilineInText: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const icon: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+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 render: StoryObj;
+export declare const className: StoryObj;
+export declare const testMultilineInText: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -2,6 +2,7 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Link from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Link",
     component: Link,
@@ -11,62 +12,144 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="variant: underline">
-			<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
-				Reshaped
-			</Link>
-		</Example.Item>
-		<Example.Item title="variant: plain">
-			<Link onClick={() => { }} variant="plain">
-				Link
-			</Link>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: primary">
-			<Link color="primary">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Link color="critical">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Link color="positive">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: warning">
-			<Link color="warning">Link</Link>
-		</Example.Item>
-		<Example.Item title="color: inherit">
-			<Link color="inherit">Link</Link>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<Link disabled>Link</Link>
-		</Example.Item>
-	</Example>);
-export const withIcon = () => (<Example>
-		<Example.Item title="icon, variant: underline">
-			<Link icon={IconZap}>Link</Link>
-		</Example.Item>
-		<Example.Item title="icon, variant: plain">
-			<Link icon={IconZap} variant="plain">
-				Link
-			</Link>
-		</Example.Item>
-		<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
-			<Text variant="title-3">
-				<Link icon={IconZap} variant="underline">
-					Instant delivery
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: underline">
+				<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
+					Reshaped
+				</Link>
+			</Example.Item>
+			<Example.Item title="variant: plain">
+				<Link onClick={() => { }} variant="plain">
+					Link
+				</Link>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Link color="primary">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Link color="critical">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Link color="positive">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Link color="warning">Link</Link>
+			</Example.Item>
+			<Example.Item title="color: inherit">
+				<Link color="inherit">Link</Link>
+			</Example.Item>
+		</Example>),
+};
+export const icon = {
+    name: "icon",
+    render: () => (<Example>
+			<Example.Item title="icon, variant: underline">
+				<Link icon={IconZap}>Link</Link>
+			</Example.Item>
+			<Example.Item title="icon, variant: plain">
+				<Link icon={IconZap} variant="plain">
+					Link
 				</Link>
-			</Text>
-		</Example.Item>
-	</Example>);
-export const testMultilineInText = () => (<Example>
-		<Example.Item title="should wrap inside the text">
-			<div>
-				Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
-				<Link href="/">this very very long link</Link> to it.
-			</div>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+			<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
+				<Text variant="title-3">
+					<Link icon={IconZap} variant="underline">
+						Instant delivery
+					</Link>
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+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 render = {
+    name: "render",
+    render: () => <Link render={(props) => <section {...props}/>}>Trigger</Link>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SECTION");
+    },
+};
+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");
+    },
+};
+export const testMultilineInText = {
+    name: "test: multiline",
+    render: () => (<Example>
+			<Example.Item title="should wrap inside the text">
+				<div>
+					Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
+					<Link href="/">this very very long link</Link> to it.
+				</div>
+			</Example.Item>
+		</Example>),
+};

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

@@ -1,5 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
@@ -17,14 +15,3 @@ declare const _default: {
     };
 };
 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 render: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,4 +1,3 @@
-import { userEvent, expect, fn } from "storybook/test";
 import Link from "../index.js";
 export default {
     title: "Components/Link/tests",
@@ -10,87 +9,3 @@ export default {
         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 render = {
-    name: "render",
-    render: () => <Link render={(props) => <section {...props}/>}>Trigger</Link>,
-    play: async ({ canvas }) => {
-        const el = canvas.getByText("Trigger");
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe("SECTION");
-    },
-};
-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/tests/Loader.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").LoaderProps>;
@@ -8,5 +9,13 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const size: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const ariaLabel: StoryObj;
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Loader from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Loader",
     component: Loader,
@@ -9,33 +10,59 @@ export default {
         },
     },
 };
-export const size = () => {
-    return (<Example>
-			<Example.Item title="size: medium">
-				<Loader size="medium" ariaLabel="Loading"/>
+export const size = {
+    name: "size",
+    render: () => {
+        return (<Example>
+				<Example.Item title="size: medium">
+					<Loader size="medium" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: small">
+					<Loader size="small" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: large">
+					<Loader size="large" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
+					<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Loader ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title="size: small">
-				<Loader size="small" ariaLabel="Loading"/>
+			<Example.Item title="color: critical">
+				<Loader color="critical" ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title="size: large">
-				<Loader size="large" ariaLabel="Loading"/>
+			<Example.Item title="color: positive">
+				<Loader color="positive" ariaLabel="Loading"/>
 			</Example.Item>
-			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-				<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
+			<Example.Item title="color: inherit">
+				<Loader color="inherit" ariaLabel="Loading"/>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+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");
+    },
 };
-export const color = () => (<Example>
-		<Example.Item title="color: primary">
-			<Loader ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Loader color="critical" ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Loader color="positive" ariaLabel="Loading"/>
-		</Example.Item>
-		<Example.Item title="color: inherit">
-			<Loader color="inherit" ariaLabel="Loading"/>
-		</Example.Item>
-	</Example>);

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

@@ -1,4 +1,3 @@
-import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").LoaderProps>;
@@ -12,5 +11,3 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const ariaLabel: StoryObj;
-export declare const className: StoryObj;