reshaped 3.3.11 → 3.3.13

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { expect, fn } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Avatar from "../../Avatar/index.js";
 import View from "../../View/index.js";
@@ -7,6 +8,7 @@ import Icon from "../../Icon/index.js";
 import Button from "../../Button/index.js";
 import IconCheckmark from "../../../icons/Checkmark.js";
 import IconChevronRight from "../../../icons/ChevronRight.js";
+import userEvent from "@testing-library/user-event";
 export default {
     title: "Components/Badge",
     component: Badge,
@@ -16,232 +18,256 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="variant: default">
-			<Badge>Badge</Badge>
-		</Example.Item>
-		<Example.Item title="variant: faded">
-			<Badge variant="faded">Badge</Badge>
-		</Example.Item>
-		<Example.Item title="variant: outline">
-			<Badge variant="outline">Badge</Badge>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: primary, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="primary">Badge</Badge>
-				<Badge variant="faded" color="primary">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="primary">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: positive, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="positive">Badge</Badge>
-				<Badge variant="faded" color="positive">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="positive">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: critical, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="critical">Badge</Badge>
-				<Badge variant="faded" color="critical">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="critical">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-
-		<Example.Item title="color: warning, all variants">
-			<View direction="row" gap={3}>
-				<Badge color="warning">Badge</Badge>
-				<Badge variant="faded" color="warning">
-					Badge
-				</Badge>
-				<Badge variant="outline" color="warning">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const sizes = () => (<Example>
-		<Example.Item title="size: small, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="small">Badge</Badge>
-				<Badge rounded size="small">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium, not rounded and rounded">
-			<View gap={3} direction="row">
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: default">
 				<Badge>Badge</Badge>
-				<Badge rounded>Badge</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="large">Badge</Badge>
-				<Badge rounded size="large">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const icon = () => (<Example>
-		<Example.Item title="size: small, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large, not rounded and rounded">
-			<View gap={3} direction="row">
-				<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const actionable = () => (<Example>
-		<Example.Item title="onClick">
-			<Badge onClick={() => console.log("click")} dismissAriaLabel="Dismiss">
-				Badge
-			</Badge>
-		</Example.Item>
-		<Example.Item title="dismissible, close button is actionable">
-			<Badge onDismiss={() => console.log("heyeye")} dismissAriaLabel="Dismiss">
-				Badge
-			</Badge>
-		</Example.Item>
-		<Example.Item title="dismissible + onClick, whole badge is actionable">
-			<Badge onDismiss={() => console.log("dismiss")} dismissAriaLabel="Dismiss" onClick={() => console.log("click")}>
-				Badge
-			</Badge>
-		</Example.Item>
-	</Example>);
-export const rounded = () => (<Example>
-		<Example.Item title="rounded, all variants">
-			<View direction="row" gap={3}>
-				<Badge rounded>Badge</Badge>
-				<Badge rounded variant="faded">
-					Badge
-				</Badge>
-				<Badge rounded variant="outline">
-					Badge
-				</Badge>
-			</View>
-		</Example.Item>
-		<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
-			<View direction="row" gap={3}>
-				<Badge rounded color="critical" size="small">
-					2
-				</Badge>
-				<Badge rounded color="critical">
-					2
-				</Badge>
-				<Badge rounded color="critical" size="large">
-					2
-				</Badge>
-			</View>
-		</Example.Item>
-	</Example>);
-export const empty = () => (<Example>
-		<Example.Item title="empty, not rounded, all sizes, color: critical">
-			<View direction="row" gap={3}>
-				<Badge size="small" color="critical"/>
-				<Badge color="critical"/>
-				<Badge size="large" color="critical"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="empty, rounded, all sizes, color: critical">
-			<View direction="row" gap={3}>
-				<Badge rounded size="small" color="critical"/>
-				<Badge rounded color="critical"/>
-				<Badge rounded size="large" color="critical"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const container = () => {
-    const [hidden, setHidden] = React.useState(false);
-    return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
-			<Example.Item title="position: top-end">
-				<Badge.Container>
-					<Badge color="primary" hidden={hidden}>
-						5
-					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
 			</Example.Item>
-
-			<Example.Item title="position: bottom-end">
-				<Badge.Container position="bottom-end">
-					<Badge color="primary" hidden={hidden}>
-						5
+			<Example.Item title="variant: faded">
+				<Badge variant="faded">Badge</Badge>
+			</Example.Item>
+			<Example.Item title="variant: outline">
+				<Badge variant="outline">Badge</Badge>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: primary, all variants">
+				<View direction="row" gap={3}>
+					<Badge color="primary">Badge</Badge>
+					<Badge variant="faded" color="primary">
+						Badge
+					</Badge>
+					<Badge variant="outline" color="primary">
+						Badge
 					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
+				</View>
 			</Example.Item>
 
-			<Example.Item title="position: top-end, rounded, multiple digits">
-				<Badge.Container>
-					<Badge size="small" color="primary" rounded hidden={hidden}>
-						123
+			<Example.Item title="color: positive, all variants">
+				<View direction="row" gap={3}>
+					<Badge color="positive">Badge</Badge>
+					<Badge variant="faded" color="positive">
+						Badge
 					</Badge>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
+					<Badge variant="outline" color="positive">
+						Badge
+					</Badge>
+				</View>
 			</Example.Item>
 
-			<Example.Item title="position: top-end, rounded, empty">
-				<Badge.Container>
-					<Badge color="primary" rounded hidden={hidden}/>
-					<Avatar initials="A" squared/>
-				</Badge.Container>
+			<Example.Item title="color: critical, all variants">
+				<View direction="row" gap={3}>
+					<Badge color="critical">Badge</Badge>
+					<Badge variant="faded" color="critical">
+						Badge
+					</Badge>
+					<Badge variant="outline" color="critical">
+						Badge
+					</Badge>
+				</View>
 			</Example.Item>
 
-			<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
-				<Badge.Container overlap>
-					<Badge size="small" color="primary" rounded hidden={hidden}>
-						2
+			<Example.Item title="color: warning, all variants">
+				<View direction="row" gap={3}>
+					<Badge color="warning">Badge</Badge>
+					<Badge variant="faded" color="warning">
+						Badge
+					</Badge>
+					<Badge variant="outline" color="warning">
+						Badge
 					</Badge>
-					<Avatar initials="A"/>
-				</Badge.Container>
+				</View>
 			</Example.Item>
-
-			<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
-				<Badge.Container overlap position="bottom-end">
-					<Badge size="small" color="primary" rounded hidden={hidden}>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge size="small">Badge</Badge>
+					<Badge rounded size="small">
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge>Badge</Badge>
+					<Badge rounded>Badge</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large, not rounded and rounded">
+				<View gap={3} direction="row">
+					<Badge size="large">Badge</Badge>
+					<Badge rounded size="large">
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const icon = {
+    name: "icon",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={3} direction="row">
+					<Badge icon={IconCheckmark} endIcon={IconChevronRight} size="small">
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={3} direction="row">
+					<Badge icon={IconCheckmark} endIcon={IconChevronRight}>
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<View gap={3} direction="row">
+					<Badge size="large" icon={IconCheckmark} endIcon={IconChevronRight}>
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const onDismiss = {
+    name: "onDismiss, dismissAriaLabel",
+    args: {
+        handleDismiss: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="onDismiss">
+				<Badge onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss">
+					Badge
+				</Badge>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, args }) => {
+        const dismissTrigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(dismissTrigger);
+        expect(dismissTrigger).toHaveAccessibleName("Dismiss");
+        expect(args.handleDismiss).toHaveBeenCalledTimes(1);
+        expect(args.handleDismiss).toHaveBeenCalledWith();
+    },
+};
+export const rounded = {
+    name: "rounded",
+    render: () => (<Example>
+			<Example.Item title="rounded, all variants">
+				<View direction="row" gap={3}>
+					<Badge rounded>Badge</Badge>
+					<Badge rounded variant="faded">
+						Badge
+					</Badge>
+					<Badge rounded variant="outline">
+						Badge
+					</Badge>
+				</View>
+			</Example.Item>
+			<Example.Item title={["rounded, all sizes, color: critical", "one character, renders as circle"]}>
+				<View direction="row" gap={3}>
+					<Badge rounded color="critical" size="small">
 						2
 					</Badge>
-					<Avatar initials="A"/>
-				</Badge.Container>
+					<Badge rounded color="critical">
+						2
+					</Badge>
+					<Badge rounded color="critical" size="large">
+						2
+					</Badge>
+				</View>
 			</Example.Item>
-
-			<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
-				<Badge.Container overlap position="top-end">
-					<Badge size="small" color="primary" rounded hidden={hidden}/>
-					<Icon svg={IconCheckmark} size={5}/>
-				</Badge.Container>
+		</Example>),
+};
+export const empty = {
+    name: "empty",
+    render: () => (<Example>
+			<Example.Item title="empty, not rounded, all sizes, color: critical">
+				<View direction="row" gap={3}>
+					<Badge size="small" color="critical"/>
+					<Badge color="critical"/>
+					<Badge size="large" color="critical"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="empty, rounded, all sizes, color: critical">
+				<View direction="row" gap={3}>
+					<Badge rounded size="small" color="critical"/>
+					<Badge rounded color="critical"/>
+					<Badge rounded size="large" color="critical"/>
+				</View>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+export const container = {
+    name: "container",
+    render: () => {
+        const [hidden, setHidden] = React.useState(false);
+        return (<Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>
+				<Example.Item title="position: top-end">
+					<Badge.Container>
+						<Badge color="primary" hidden={hidden}>
+							5
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title="position: bottom-end">
+					<Badge.Container position="bottom-end">
+						<Badge color="primary" hidden={hidden}>
+							5
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title="position: top-end, rounded, multiple digits">
+					<Badge.Container>
+						<Badge size="small" color="primary" rounded hidden={hidden}>
+							123
+						</Badge>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title="position: top-end, rounded, empty">
+					<Badge.Container>
+						<Badge color="primary" rounded hidden={hidden}/>
+						<Avatar initials="A" squared/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title={["position: top-end, overlap", "should cover the circular avatar"]}>
+					<Badge.Container overlap>
+						<Badge size="small" color="primary" rounded hidden={hidden}>
+							2
+						</Badge>
+						<Avatar initials="A"/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title={["position: bottom-end, overlap", "should cover the circular avatar"]}>
+					<Badge.Container overlap position="bottom-end">
+						<Badge size="small" color="primary" rounded hidden={hidden}>
+							2
+						</Badge>
+						<Avatar initials="A"/>
+					</Badge.Container>
+				</Example.Item>
+
+				<Example.Item title={["position: top-end, overlap", "should cover the icon"]}>
+					<Badge.Container overlap position="top-end">
+						<Badge size="small" color="primary" rounded hidden={hidden}/>
+						<Icon svg={IconCheckmark} size={5}/>
+					</Badge.Container>
+				</Example.Item>
+			</Example>);
+    },
 };

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

@@ -0,0 +1,20 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: import("../Badge.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const href: StoryObj;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,44 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import Badge from "../index.js";
+export default {
+    title: "Components/Badge/tests",
+    component: Badge,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/badge",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const href = {
+    name: "href",
+    render: () => <Badge href="https://reshaped.so">Badge</Badge>,
+    play: async ({ canvas }) => {
+        const link = canvas.getByRole("link");
+        expect(link).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const onClick = {
+    name: "onClick",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
+    play: async ({ canvas, args }) => {
+        const button = canvas.getAllByRole("button")[0];
+        await userEvent.click(button);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Badge color="primary" 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/Breadcrumbs/Breadcrumbs.js

@@ -9,7 +9,7 @@ import Button from "../Button/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
 const Breadcrumbs = (props) => {
-    const { children, separator, color, defaultVisibleItems, disableExpand, ariaLabel, className, attributes, } = props;
+    const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
     const [expanded, setExpanded] = React.useState(false);
     const rootClassNames = classNames(className);
@@ -32,7 +32,7 @@ const Breadcrumbs = (props) => {
                     itemNode = child;
                 }
                 else if (isCollapseButton) {
-                    itemNode = disableExpand ? (_jsx(Icon, { svg: IconDotsHorizontal, size: 4 })) : (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand }) }));
+                    itemNode = disableExpand ? (_jsx(Icon, { svg: IconDotsHorizontal, size: 4 })) : (_jsx(Button.Aligner, { children: _jsx(Button, { variant: "ghost", size: "small", icon: IconDotsHorizontal, onClick: handleExpand, attributes: { "aria-label": expandAriaLabel } }) }));
                 }
                 if (itemNode === null)
                     return null;

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

@@ -6,6 +6,7 @@ export type Props = {
     separator?: React.ReactNode;
     color?: "neutral" | "primary";
     defaultVisibleItems?: number;
+    expandAriaLabel?: string;
     disableExpand?: boolean;
     ariaLabel?: string;
     className?: G.ClassName;

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

@@ -10,8 +10,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const color: () => import("react").JSX.Element;
-export declare const item: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const collapsed: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const item: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const icon: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const slots: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const collapsed: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const multiline: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};