reshaped 3.3.11 → 3.3.12

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

@@ -1,10 +1,8 @@
 import React from "react";
-import { useRef } from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import ScrollArea from "../index.js";
 import View from "../../View/index.js";
 import Button from "../../Button/index.js";
-import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/ScrollArea",
     component: ScrollArea,
@@ -12,150 +10,105 @@ export default {
         iframe: {
             url: "https://reshaped.so/docs/utilities/scroll-area",
         },
+        // Skip because axe core incorrectly reports contrast issues
+        a11y: {
+            disable: true,
+        },
     },
 };
-const Demo = () => {
-    const ref = useRef(null);
-    return (<View gap={4}>
-			<Button onClick={() => ref.current?.scrollTo({ top: 100, behavior: "smooth" })}>
-				Scroll
-			</Button>
-			<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
-				<View backgroundColor="neutral-faded" padding={4}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</View>);
-};
-export const direction = () => (<Example>
-		<Example.Item title="vertical">
-			<ScrollArea height="100px" scrollbarDisplay="visible" onScroll={console.log}>
-				<View backgroundColor="neutral-faded" padding={4}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="horizontal">
-			<ScrollArea height="120px" scrollbarDisplay="visible" onScroll={console.log}>
-				<View backgroundColor="neutral-faded" padding={4} width="500px">
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s
-				</View>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="both directions">
-			<ScrollArea height="100px" scrollbarDisplay="visible">
-				<View backgroundColor="neutral-faded" padding={4} width="500px">
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</Example.Item>
-	</Example>);
-export const visibility = () => (<Example>
-		<Example.Item title="visibility: hover">
-			<ScrollArea height="100px">
-				<View backgroundColor="neutral-faded" padding={4}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="visibility: hidden">
-			<ScrollArea height="100px" scrollbarDisplay="hidden">
-				<View backgroundColor="neutral-faded" padding={4}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="visibility: visible">
-			<ScrollArea height="100px" scrollbarDisplay="visible">
-				<View backgroundColor="neutral-faded" padding={4}>
-					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
-					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
-					a galley of type and scrambled it to make a type specimen book. It has survived not only
-					five centuries, but also the leap into electronic typesetting, remaining essentially
-					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
-					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-					PageMaker including versions of Lorem Ipsum.
-				</View>
-			</ScrollArea>
-		</Example.Item>
-	</Example>);
-export const ref = () => (<Example>
-		<Example.Item title="external ref">
-			<Demo />
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => {
-    const toggle = useToggle(true);
-    const [count, setCount] = React.useState(20);
-    return (<Example>
-			<Example.Item title="dynamic content update">
-				<View gap={4}>
-					<Button onClick={toggle.toggle}>Toggle</Button>
-					<ScrollArea height="100px" scrollbarDisplay="visible">
-						<View backgroundColor="neutral-faded" padding={4} width={toggle.active ? "120%" : "90%"}>
-							{toggle.active ? (<React.Fragment>
-									Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
-									Ipsum has been the industry's standard dummy text ever since the 1500s, when an
-									unknown printer took a galley of type and scrambled it to make a type specimen
-									book. It has survived not only five centuries, but also the leap into electronic
-									typesetting, remaining essentially unchanged. It was popularised in the 1960s with
-									the release of Letraset sheets containing Lorem Ipsum passages, and more recently
-									with desktop publishing software like Aldus PageMaker including versions of Lorem
-									Ipsum.
-								</React.Fragment>) : null}
-						</View>
-					</ScrollArea>
-				</View>
+export const direction = {
+    name: "direction",
+    render: () => (<Example>
+			<Example.Item title="vertical">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="add items">
-				<View gap={4}>
-					<Button onClick={() => setCount((prev) => prev + 10)}>Add</Button>
+			<Example.Item title="horizontal">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" padding={4} width="150%" height="100px">
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-					<ScrollArea height="200px" scrollbarDisplay="visible">
-						{Array(count)
-            .fill("")
-            .map((_, index) => {
-            return <div key={index}>Item {index + 1}</div>;
-        })}
-					</ScrollArea>
-				</View>
+			<Example.Item title="horizontal, vertical">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" padding={4} width="150%">
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
+};
+export const visibility = {
+    name: "scrollbarDisplay",
+    render: () => (<Example>
+			<Example.Item title="visibility: hover">
+				<ScrollArea height="100px">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+
+			<Example.Item title="visibility: hidden">
+				<ScrollArea height="100px" scrollbarDisplay="hidden">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="nested, hover only for the current area">
+			<Example.Item title="visibility: visible">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" padding={4}>
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
+};
+export const composition = {
+    name: "composition",
+    render: () => (<Example>
+			<Example.Item title="nested">
 				<ScrollArea height="100px">
-					<View padding={8}>
+					<View padding={4} paddingInline={16}>
 						<ScrollArea height="200px">
 							{Array(20)
             .fill("")
@@ -166,5 +119,27 @@ export const edgeCases = () => {
 					</View>
 				</ScrollArea>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+export const dynamicHeight = {
+    name: "composition, dynamic height change",
+    render: () => {
+        const [count, setCount] = React.useState(10);
+        return (<View gap={4}>
+				<View.Item>
+					<Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>
+				</View.Item>
+
+				<ScrollArea height="200px" scrollbarDisplay="visible">
+					<View gap={2}>
+						{new Array(count).fill("").map((_, i) => (<View.Item key={i}>Item {i + 1}</View.Item>))}
+					</View>
+				</ScrollArea>
+			</View>);
+    },
+    // TODO: After Using play(), Storybook makes the scroll lag, but not when triggered manually in the browser
+    // play: async ({ canvas }) => {
+    // 	const trigger = canvas.getAllByRole("button")[0];
+    // 	await userEvent.click(trigger);
+    // },
 };

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        a11y: {
+            disable: boolean;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const onScroll: StoryObj<{
+    handleScroll: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import ScrollArea from "../index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Utilities/ScrollArea/tests",
+    component: ScrollArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/text",
+        },
+        // Skip because axe core incorrectly reports contrast issues
+        a11y: {
+            disable: true,
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const onScroll = {
+    name: "ref, onScroll",
+    args: {
+        handleScroll: fn(),
+    },
+    render: (args) => {
+        const ref = React.useRef(null);
+        return (<View gap={4}>
+				<View.Item>
+					<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
+				</View.Item>
+				<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
+					<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
+						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+						has been the industry's standard dummy text ever since the 1500s, when an unknown
+						printer took a galley of type and scrambled it to make a type specimen book. It has
+						survived not only five centuries, but also the leap into electronic typesetting,
+						remaining essentially unchanged. It was popularised in the 1960s with the release of
+						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
+						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+					</View>
+				</ScrollArea>
+			</View>);
+    },
+    play: async ({ canvas, args }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleScroll).toHaveBeenCalledTimes(1);
+            // x value is flaky, so only testing y here
+            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</ScrollArea>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -8,7 +8,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
+export declare const value: () => import("react").JSX.Element;
 export declare const variants: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
 export declare const disabled: () => import("react").JSX.Element;

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

@@ -13,23 +13,16 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected, placeholder">
-			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[
+export const value = () => (<Example>
+		<Example.Item title="defaultValue">
+			<Select name="animal" defaultValue="dog" inputAttributes={{ "aria-label": "test select" }} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]}/>
 		</Example.Item>
 
-		<Example.Item title="selected, controlled">
-			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" defaultValue="dog" options={[
-        { label: "Dog", value: "dog" },
-        { label: "Turtle", value: "turtle" },
-    ]}/>
-		</Example.Item>
-
-		<Example.Item title="selected, uncontrolled">
-			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" value="dog" options={[
+		<Example.Item title="placeholder">
+			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]}/>

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

@@ -0,0 +1,27 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").SelectProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const startSlot: StoryObj;
+export declare const placeholder: StoryObj;
+export declare const id: StoryObj;
+export declare const disabled: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,132 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Select from "../index.js";
+export default {
+    title: "Components/Select/tests",
+    component: Select,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/select",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<Select name="test-name" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("combobox");
+        const elOptions = canvas.getAllByRole("option");
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveValue("1");
+        expect(elOptions.length).toBe(2);
+        expect(elOptions[0]).toHaveValue("1");
+        expect(elOptions[0].textContent).toBe("Option 1");
+        expect(elOptions[1]).toHaveValue("2");
+        expect(elOptions[1].textContent).toBe("Option 2");
+    },
+};
+export const startSlot = {
+    name: "startSlot",
+    render: () => (<Select name="test-name" startSlot="Slot" options={[]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const slot = canvas.getByText("Slot");
+        expect(slot).toBeInTheDocument();
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<Select name="test-name" placeholder="Placeholder" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        const options = canvas.getAllByRole("option");
+        expect(input).toHaveValue("");
+        expect(options.length).toBe(3);
+        expect(options[0].textContent).toBe("Placeholder");
+        expect(options[0]).toHaveValue("");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<Select name="test-name" id="test-id" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Select name="test-name" disabled options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Select name="test-name" defaultValue="2" onChange={args.handleChange} options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveValue("2");
+        await userEvent.selectOptions(input, "1");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "1",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("1");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Select name="test-name" value="2" onChange={args.handleChange} options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveValue("2");
+        await userEvent.selectOptions(input, "1");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "1",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("2");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Select className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} options={[]} name="name"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("combobox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

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

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

@@ -0,0 +1,23 @@
+import { expect } from "@storybook/test";
+import Skeleton from "../index.js";
+export default {
+    title: "Components/Skeleton/tests",
+    component: Skeleton,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/skeleton",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Skeleton 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/Slider/tests/Slider.stories.d.ts

@@ -14,4 +14,3 @@ export declare const step: () => import("react").JSX.Element;
 export declare const boundaries: () => import("react").JSX.Element;
 export declare const status: () => import("react").JSX.Element;
 export declare const customRender: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;

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

@@ -13,7 +13,7 @@ export default {
 };
 export const base = () => (<Example>
 		<Example.Item title="range">
-			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} renderValue={() => "Hundred more times"}/>
+			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100}/>
 		</Example.Item>
 		<div style={{ height: 2000 }}/>
 	</Example>);
@@ -48,17 +48,16 @@ export const status = () => (<Example>
 	</Example>);
 export const customRender = () => (<Example>
 		<Example.Item title="custom render">
-			<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
+			<FormControl>
+				<FormControl.Label>Slider value</FormControl.Label>
+				<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
+			</FormControl>
 		</Example.Item>
+
 		<Example.Item title="no tooltip">
-			<Slider name="slider" defaultValue={30} renderValue={false}/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="form control, disabled">
-			<FormControl disabled>
+			<FormControl>
 				<FormControl.Label>Slider value</FormControl.Label>
-				<Slider name="slider"/>
+				<Slider name="slider" defaultValue={30} renderValue={false}/>
 			</FormControl>
 		</Example.Item>
 	</Example>);