reshaped 3.3.11 → 3.3.13

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

@@ -11,86 +11,100 @@ export default {
         },
     },
 };
-export const content = () => (<Example>
-		<Example.Item title="With image">
-			<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png" alt="Reshaped"/>
-		</Example.Item>
-		<Example.Item title="With initials">
-			<Avatar initials="RS"/>
-		</Example.Item>
-		<Example.Item title="With icon">
-			<Avatar icon={IconZap}/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: 6">
-			<View direction="row" gap={3}>
-				<Avatar size={6} icon={IconZap}/>
-				<Avatar size={6} initials="RS" squared/>
-			</View>
-		</Example.Item>
+export const src = {
+    name: "src, initials, icon",
+    render: () => (<Example>
+			<Example.Item title="With image">
+				<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
+			</Example.Item>
 
-		<Example.Item title="size: 15">
-			<View direction="row" gap={3}>
-				<Avatar size={15} icon={IconZap}/>
-				<Avatar size={15} initials="RS" squared/>
-			</View>
-		</Example.Item>
+			<Example.Item title="With initials">
+				<Avatar initials="RS"/>
+			</Example.Item>
 
-		<Example.Item title="size: 40">
-			<View direction="row" gap={3}>
-				<Avatar size={40} icon={IconZap}/>
-				<Avatar size={40} initials="RS" squared/>
-			</View>
-		</Example.Item>
+			<Example.Item title="With icon">
+				<Avatar icon={IconZap}/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: 6">
+				<View direction="row" gap={3}>
+					<Avatar size={6} icon={IconZap}/>
+					<Avatar size={6} initials="RS" squared/>
+				</View>
+			</Example.Item>
+
+			<Example.Item title="size: 15">
+				<View direction="row" gap={3}>
+					<Avatar size={15} icon={IconZap}/>
+					<Avatar size={15} initials="RS" squared/>
+				</View>
+			</Example.Item>
+
+			<Example.Item title="size: 40">
+				<View direction="row" gap={3}>
+					<Avatar size={40} icon={IconZap}/>
+					<Avatar size={40} initials="RS" squared/>
+				</View>
+			</Example.Item>
 
-		<Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
-			<View direction="row" gap={3}>
-				<Avatar size={{ s: 10, m: 20 }} icon={IconZap}/>
-				<Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const squared = () => (<Example>
-		<Example.Item title="squared, with image">
-			<Avatar squared src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
-		</Example.Item>
-		<Example.Item title="squared, with initials">
-			<Avatar squared initials="RS"/>
-		</Example.Item>
-		<Example.Item title="squared, with initials">
-			<Avatar squared icon={IconZap}/>
-		</Example.Item>
-	</Example>);
-export const colors = () => (<Example>
-		<Example.Item title="color: neutral">
-			<Avatar color="neutral" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: neutral, variant: faded">
-			<Avatar color="neutral" variant="faded" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: primary">
-			<Avatar color="primary" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: primary, variant: faded">
-			<Avatar color="primary" variant="faded" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Avatar color="positive" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: positive, variant: faded">
-			<Avatar color="positive" variant="faded" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: warning">
-			<Avatar color="warning" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: warning, variant: faded">
-			<Avatar color="warning" variant="faded" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Avatar color="critical" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="color: critical, variant: faded">
-			<Avatar color="critical" variant="faded" icon={IconZap}/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title={["responsive size", "[s] 10", "[m+] 20"]}>
+				<View direction="row" gap={3}>
+					<Avatar size={{ s: 10, m: 20 }} icon={IconZap}/>
+					<Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared/>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const squared = {
+    name: "squared",
+    render: () => (<Example>
+			<Example.Item title="squared, with image">
+				<Avatar squared src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>
+			</Example.Item>
+			<Example.Item title="squared, with initials">
+				<Avatar squared initials="RS"/>
+			</Example.Item>
+			<Example.Item title="squared, with initials">
+				<Avatar squared icon={IconZap}/>
+			</Example.Item>
+		</Example>),
+};
+export const colors = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<Avatar color="neutral" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: neutral, variant: faded">
+				<Avatar color="neutral" variant="faded" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Avatar color="primary" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: primary, variant: faded">
+				<Avatar color="primary" variant="faded" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Avatar color="positive" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: positive, variant: faded">
+				<Avatar color="positive" variant="faded" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Avatar color="warning" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: warning, variant: faded">
+				<Avatar color="warning" variant="faded" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Avatar color="critical" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="color: critical, variant: faded">
+				<Avatar color="critical" variant="faded" icon={IconZap}/>
+			</Example.Item>
+		</Example>),
+};

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

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

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

@@ -0,0 +1,39 @@
+import { expect } from "@storybook/test";
+import Avatar from "../index.js";
+export default {
+    title: "Components/Avatar/tests",
+    component: Avatar,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/avatar",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const src = {
+    name: "src",
+    render: () => (<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png"/>),
+    play: ({ canvas }) => {
+        const presentation = canvas.getByRole("presentation");
+        expect(presentation).toBeInTheDocument();
+    },
+};
+export const srcAlt = {
+    name: "src, alt",
+    render: () => (<Avatar src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_400x400.png" alt="test alt"/>),
+    play: ({ canvas }) => {
+        const img = canvas.getByRole("img");
+        expect(img).toHaveAccessibleName("test alt");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Avatar initials="RS" 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/Badge/tests/Badge.stories.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
     component: import("../Badge.types").Export;
@@ -9,11 +11,34 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const sizes: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const actionable: () => React.JSX.Element;
-export declare const rounded: () => React.JSX.Element;
-export declare const empty: () => React.JSX.Element;
-export declare const container: () => React.JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const icon: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const onDismiss: StoryObj<{
+    handleDismiss: ReturnType<typeof fn>;
+}>;
+export declare const rounded: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const empty: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const container: {
+    name: string;
+    render: () => React.JSX.Element;
+};