reshaped 3.3.11 → 3.3.13

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

@@ -9,42 +9,57 @@ export default {
         },
     },
 };
-export const position = () => (<Example>
-		<Example.Item title="position: top">
-			<ActionBar position="top">
-				<Placeholder />
-			</ActionBar>
-		</Example.Item>
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: top">
+				<ActionBar position="top">
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
 
-		<Example.Item title="position: bottom">
-			<ActionBar>
-				<Placeholder />
-			</ActionBar>
-		</Example.Item>
-	</Example>);
-export const elevated = () => (<Example>
-		<Example.Item title="elevated, position: top">
-			<ActionBar position="top" elevated>
-				<Placeholder />
-			</ActionBar>
-		</Example.Item>
+			<Example.Item title="position: bottom">
+				<ActionBar>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
+		</Example>),
+};
+export const elevated = {
+    name: "elevated",
+    render: () => (<Example>
+			<Example.Item title="elevated, position: top">
+				<ActionBar position="top" elevated>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
+
+			<Example.Item title="elevated, position: bottom">
+				<ActionBar elevated>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
+		</Example>),
+};
+export const padding = {
+    name: "padding, paddingBlock, paddingInline",
+    render: () => (<Example>
+			<Example.Item title="padding: 6">
+				<ActionBar padding={6}>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
 
-		<Example.Item title="elevated, position: bottom">
-			<ActionBar elevated>
-				<Placeholder h={16}/>
-			</ActionBar>
-		</Example.Item>
-	</Example>);
-export const padding = () => (<Example>
-		<Example.Item title="padding: 6">
-			<ActionBar padding={6}>
-				<Placeholder />
-			</ActionBar>
-		</Example.Item>
+			<Example.Item title="paddingBlock: 2, paddingInline: 4">
+				<ActionBar paddingBlock={2} paddingInline={4}>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
 
-		<Example.Item title={["padding: responsive", "[s] 4", "[m+] 6"]}>
-			<ActionBar padding={{ s: 4, m: 6 }}>
-				<Placeholder />
-			</ActionBar>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="padding: [s] 4, [m+] 6">
+				<ActionBar padding={{ s: 4, m: 6 }}>
+					<Placeholder />
+				</ActionBar>
+			</Example.Item>
+		</Example>),
+};

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

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

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

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

package/dist/components/Actionable/Actionable.js

@@ -55,6 +55,6 @@ const Actionable = forwardRef((props, ref) => {
         event.preventDefault();
         handlePress(event);
     };
-    return (_jsx(TagName, { ref: ref, ...rootAttributes, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children }));
+    return (_jsx(TagName, { ref: ref, ...rootAttributes, "aria-disabled": disabled ? true : undefined, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children }));
 });
 export default Actionable;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
@@ -8,8 +9,21 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const role: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const fullWidth: () => import("react").JSX.Element;
-export declare const focusRing: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const disabled: StoryObj;
+export declare const fullWidth: StoryObj;
+export declare const insetFocus: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};
+export declare const disableFocusRing: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};
+export declare const borderRadius: {
+    name: string;
+    render: () => import("react").JSX.Element;
+    play: () => Promise<void>;
+};

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

@@ -1,5 +1,6 @@
-import Actionable from "../index.js";
+import { userEvent, expect } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
+import Actionable from "../index.js";
 import View from "../../View/index.js";
 export default {
     title: "Utilities/Actionable",
@@ -10,66 +11,90 @@ export default {
         },
     },
 };
-export const role = () => (<Example>
-		<Example.Item title="rendered as link">
-			<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
-				Actionable
-			</Actionable>
-		</Example.Item>
-		<Example.Item title="rendered as button">
-			<Actionable onClick={() => console.log("Clicked")}>Actionable</Actionable>
-		</Example.Item>
-		<Example.Item title="rendered as div with button role">
-			<Actionable as="div" onClick={() => console.log("Clicked")}>
-				Actionable
-			</Actionable>
-		</Example.Item>
-		<Example.Item title="rendered as link with onClick">
-			<Actionable onClick={() => console.log("Clicked")} href="https://reshaped.so">
-				Actionable
-			</Actionable>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled, button">
-			<Actionable disabled onClick={() => { }}>
-				Actionable
-			</Actionable>
-		</Example.Item>
-		<Example.Item title="disabled, link">
-			<Actionable disabled href="https://reshaped.so">
-				Actionable
-			</Actionable>
-		</Example.Item>
-	</Example>);
-export const fullWidth = () => (<Example>
-		<Example.Item title="fullWidth">
-			<Actionable fullWidth href="https://reshaped.so">
-				Actionable
-			</Actionable>
-		</Example.Item>
-	</Example>);
-export const focusRing = () => (<Example>
-		<Example.Item title="insetFocus">
-			<Actionable insetFocus onClick={() => { }}>
-				Actionable
-			</Actionable>
-		</Example.Item>
-		<Example.Item title="radius: inherit">
-			<Actionable borderRadius="inherit" onClick={() => { }}>
-				<View borderRadius="large">Actionable</View>
-			</Actionable>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="form submit">
-			<form onSubmit={(e) => {
-        e.preventDefault();
-        alert("Submitted");
-    }}>
-				<Actionable type="submit" onClick={() => console.log("Clicked")}>
-					Submit
+export const base = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="link">
+				<Actionable href="https://reshaped.so" attributes={{ target: "_blank" }}>
+					Link
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="button">
+				<Actionable onClick={() => { }}>Button</Actionable>
+			</Example.Item>
+		</Example>),
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled, button">
+				<Actionable disabled onClick={() => { }}>
+					Button
+				</Actionable>
+			</Example.Item>
+			<Example.Item title="disabled, link">
+				<Actionable disabled href="https://reshaped.so">
+					Link
+				</Actionable>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const button = canvas.getAllByRole("button")[0];
+        const link = canvas.getByText("Link");
+        expect(button).toBeDisabled();
+        expect(link).not.toHaveAttribute("href");
+        expect(link).not.toHaveRole("link");
+    },
+};
+export const fullWidth = {
+    name: "fullWidth",
+    render: () => (<Example>
+			<Example.Item title="fullWidth">
+				<Actionable fullWidth href="https://reshaped.so">
+					Actionable
 				</Actionable>
-			</form>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+		</Example>),
+    play: async () => {
+        await userEvent.keyboard("{Tab/}");
+    },
+};
+export const insetFocus = {
+    name: "insetFocus",
+    render: () => (<Example>
+			<Example.Item title="insetFocus">
+				<Actionable insetFocus onClick={() => { }}>
+					Actionable
+				</Actionable>
+			</Example.Item>
+		</Example>),
+    play: async () => {
+        await userEvent.keyboard("{Tab/}");
+    },
+};
+export const disableFocusRing = {
+    name: "disableFocusRing",
+    render: () => (<Example>
+			<Example.Item title="disableFocusRing">
+				<Actionable disableFocusRing onClick={() => { }}>
+					Actionable
+				</Actionable>
+			</Example.Item>
+		</Example>),
+    play: async () => {
+        await userEvent.keyboard("{Tab/}");
+    },
+};
+export const borderRadius = {
+    name: "borderRadius",
+    render: () => (<Example>
+			<Example.Item title="radius: inherit">
+				<Actionable borderRadius="inherit" onClick={() => { }}>
+					<View borderRadius="large">Actionable</View>
+				</Actionable>
+			</Example.Item>
+		</Example>),
+    play: async () => {
+        await userEvent.keyboard("{Tab/}");
+    },
+};

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

@@ -0,0 +1,32 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & 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 attributesHref: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const hrefOnClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const as: StoryObj;
+export declare const type: StoryObj<{
+    handleSubmit: ReturnType<typeof fn>;
+}>;
+export declare const stopPropagation: StoryObj<{
+    handleParentClick: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,130 @@
+import { userEvent, expect, fn } from "@storybook/test";
+import Actionable from "../index.js";
+export default {
+    title: "Utilities/Actionable/tests",
+    component: Actionable,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/actionable",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const children = {
+    name: "children",
+    render: () => <Actionable>Trigger</Actionable>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByText("Trigger");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SPAN");
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <Actionable href="https://reshaped.so">Trigger</Actionable>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("link");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const attributesHref = {
+    name: "attributes.href",
+    render: () => <Actionable attributes={{ href: "https://reshaped.so" }}>Trigger</Actionable>,
+    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) => <Actionable onClick={args.handleClick}>Trigger</Actionable>,
+    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) => (<Actionable onClick={(e) => {
+            e.preventDefault();
+            args.handleClick(e);
+        }} href="https://reshaped.so">
+			Trigger
+		</Actionable>),
+    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 as = {
+    name: "as",
+    render: () => (<Actionable onClick={() => { }} as="span">
+			Trigger
+		</Actionable>),
+    play: ({ canvas }) => {
+        const el = canvas.getAllByRole("button")[0];
+        expect(el.tagName).toBe("SPAN");
+    },
+};
+export const type = {
+    name: "type",
+    args: {
+        handleSubmit: fn(),
+    },
+    render: (args) => (<form onSubmit={(e) => {
+            e.preventDefault();
+            args.handleSubmit();
+        }}>
+			<Actionable onClick={() => { }} type="submit">
+				Trigger
+			</Actionable>
+		</form>),
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleSubmit).toHaveBeenCalledTimes(1);
+    },
+};
+export const stopPropagation = {
+    name: "stopPropagation",
+    args: {
+        handleParentClick: fn(),
+    },
+    render: (args) => (<div onClick={args.handleParentClick}>
+			<Actionable stopPropagation onClick={() => { }}>
+				Trigger
+			</Actionable>
+		</div>),
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleParentClick).not.toHaveBeenCalled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Actionable className="test-classname" attributes={{ id: "test-id" }}>
+				Trigger
+			</Actionable>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Alert/Alert.js

@@ -10,7 +10,7 @@ const Alert = (props) => {
         if (inline) {
             return (_jsxs(_Fragment, { children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", as: "span", children: title })), title && children && " ", children && (_jsx(Text, { variant: "body-3", as: "span", children: children }))] }));
         }
-        return (_jsxs(View, { gap: 1, children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", children: title })), children && _jsx(Text, { variant: "body-3", children: children })] }));
+        return (_jsxs(View, { gap: 1, grow: true, children: [title && (_jsx(Text, { variant: "body-3", weight: "medium", children: title })), children && _jsx(Text, { variant: "body-3", children: children })] }));
     };
     const applyActions = (content) => {
         if (!actionsSlot)

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

@@ -9,6 +9,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const color: () => React.JSX.Element;
-export declare const inline: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
+export declare const color: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const inline: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const bleed: {
+    name: string;
+    render: () => React.JSX.Element;
+};