reshaped 3.3.11 → 3.3.12

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

@@ -0,0 +1,177 @@
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import FormControl from "../../FormControl/index.js";
+import PinField from "../index.js";
+export default {
+    title: "Components/PinField/tests",
+    component: PinField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pin-field",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toBeInTheDocument();
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
+        expect(elInput).toHaveAttribute("inputmode", "numeric");
+    },
+};
+export const valueLength = {
+    name: "valueLength",
+    render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAttribute("maxlength", "6");
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("123");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            value: "123",
+            name: "test-name",
+            event: expect.objectContaining({ target: elInput }),
+        });
+        expect(elInput).toHaveValue("12");
+    },
+};
+export const pattern = {
+    name: "pattern",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        await userEvent.keyboard("3");
+        expect(elInput).toHaveValue("ab");
+        expect(args.handleChange).toHaveBeenCalledTimes(0);
+        await userEvent.keyboard("c");
+        expect(elInput).toHaveValue("abc");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+    },
+};
+export const formControl = {
+    name: "with FormControl",
+    render: () => (<FormControl>
+			<FormControl.Label>Label</FormControl.Label>
+			<PinField name="test-name"/>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        expect(elInput).toHaveAccessibleName("Label");
+    },
+};
+export const keyboard = {
+    name: "keyboard navigation",
+    render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("textbox");
+        elInput.focus();
+        expect(elInput.selectionStart).toEqual(0);
+        expect(elInput.selectionEnd).toEqual(0);
+        await userEvent.keyboard("1");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        await userEvent.keyboard("234");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionEnd).toEqual(4);
+        });
+        // Move back to the first character
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        await userEvent.keyboard("{ArrowLeft/}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowLeft}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(0);
+            expect(elInput.selectionEnd).toEqual(1);
+        });
+        // Move to the third character
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(1);
+            expect(elInput.selectionEnd).toEqual(2);
+        });
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        expect(elInput).toHaveValue("1234");
+        await userEvent.keyboard("{backspace}");
+        expect(elInput).toHaveValue("124");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(2);
+            expect(elInput.selectionEnd).toEqual(3);
+        });
+        // Switched to type mode
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+        // Can't move further
+        await userEvent.keyboard("{ArrowRight}");
+        await waitFor(() => {
+            expect(elInput.selectionStart).toEqual(3);
+            expect(elInput.selectionStart).toEqual(3);
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.queryByLabelText("Label");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

@@ -0,0 +1,40 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").PopoverProps): import("react").JSX.Element;
+        Dismissible: (props: import("../../Dismissible").DismissibleProps) => import("react").JSX.Element;
+        Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
+        Content: (props: import("../../_private/Flyout").FlyoutContentProps) => import("react").JSX.Element | null;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const active: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const activeFalse: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const dismissible: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const triggerType: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,167 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import Popover from "../index.js";
+import Button from "../../Button/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Components/Popover/tests",
+    component: Popover,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/popover",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Content");
+        // Wait for the open animation
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Content");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Content");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const dismissible = {
+    name: "dismissible, onClose, className, attributes, closeAriaLabel",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
+					Content
+				</Popover.Dismissible>
+			</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const dismissible = canvas.getByTestId("test-id");
+        const closeButton = within(dismissible).getByRole("button");
+        expect(dismissible).toHaveClass("test-classname");
+        expect(closeButton).toHaveAccessibleName("Close");
+        await userEvent.click(closeButton);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const triggerType = {
+    name: "triggerType hover",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.hover(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        await userEvent.unhover(trigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith();
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Popover active>
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+					Content
+				</Popover.Content>
+			</Popover>
+		</div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const menu = await canvas.findByTestId("test-id");
+        expect(menu).toHaveClass("test-classname");
+    },
+};

package/dist/components/Progress/Progress.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../utilities/helpers.js";
 import s from "./Progress.module.css";
 const Progress = (props) => {
-    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, className, attributes, } = props;
+    const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
     const total = max - min;
     const normalizedValue = value - min;
     const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
     const width = (resolvedValue / total) * 100;
     const translate = `${width - 100}%`;
-    return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
+    return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-label": ariaLabel || attributes?.["aria-label"], "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
                 "--rs-progress-value": translate,
                 "--rs-progress-duration": duration ? `${duration}ms` : undefined,
             } }) }));

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

@@ -6,6 +6,7 @@ export type Props = {
     size?: "small" | "medium";
     color?: "primary" | "critical" | "warning" | "positive" | "media";
     duration?: number;
+    ariaLabel?: string;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

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

@@ -14,36 +14,36 @@ export default {
 };
 export const value = () => (<Example>
 		<Example.Item title="value: 50">
-			<Progress value={50}/>
+			<Progress value={50} ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="value: 20, min: 0, max: 40">
-			<Progress value={20} min={0} max={40}/>
+			<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="value: 50, min: 0, max: 40">
-			<Progress value={50} min={0} max={40}/>
+			<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
 		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: small, value: 50">
-			<Progress value={50} size="small"/>
+			<Progress value={50} size="small" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="size: medium, value: 50">
-			<Progress value={50} size="medium"/>
+			<Progress value={50} size="medium" ariaLabel="rating value"/>
 		</Example.Item>
 	</Example>);
 export const color = () => (<Example>
 		<Example.Item title="color: critical, value: 50">
-			<Progress value={50} color="critical"/>
+			<Progress value={50} color="critical" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: warning, value: 50">
-			<Progress value={50} color="warning"/>
+			<Progress value={50} color="warning" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: positive, value: 50">
-			<Progress value={50} color="positive"/>
+			<Progress value={50} color="positive" ariaLabel="rating value"/>
 		</Example.Item>
 		<Example.Item title="color: media, value: 50">
 			<View padding={4} backgroundColor="black" borderRadius="medium">
-				<Progress value={50} color="media"/>
+				<Progress value={50} color="media" ariaLabel="rating value"/>
 			</View>
 		</Example.Item>
 	</Example>);
@@ -59,7 +59,7 @@ export const duration = () => {
 						<Button onClick={handleChange}>Change</Button>
 					</View.Item>
 
-					<Progress value={active ? 100 : 0} duration={2000}/>
+					<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
 				</View>
 			</Example.Item>
 		</Example>);

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

@@ -0,0 +1,16 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ProgressProps) => 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/Progress/tests/Progress.test.stories.js

@@ -0,0 +1,35 @@
+import { expect } from "@storybook/test";
+import Progress from "../index.js";
+export default {
+    title: "Components/Progress/tests",
+    component: Progress,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/progress",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => <Progress value={75} min={50} max={100} ariaLabel="progress"/>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("progressbar");
+        expect(el).toBeInTheDocument();
+        expect(el).toHaveAttribute("aria-valuenow", "75");
+        expect(el).toHaveAttribute("aria-valuemin", "50");
+        expect(el).toHaveAttribute("aria-valuemax", "100");
+        expect(el).toHaveAccessibleName("progress");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Progress className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

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

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

@@ -0,0 +1,118 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Radio from "../index.js";
+export default {
+    title: "Components/Radio/tests",
+    component: Radio,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "name, value",
+    render: () => (<Radio name="test-name" value="test-value">
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const checkedFalse = {
+    name: "checked false, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        // Still not checked because it's controlled
+        expect(input).not.toBeChecked();
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const defaultCheckedFalse = {
+    name: "defaultChecked false, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Radio name="test-name" value="test-value" disabled>
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
+				Content
+			</Radio>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};