PR comments

workleap · Dec 5, 2024 · 8c079b9 · 8c079b9
1 parent 905d0b8
commit 8c079b9
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 46 deletions.
diff --git a/packages/components/src/IllustratedMessage/docs/buttons.tsx b/packages/components/src/IllustratedMessage/docs/buttons.tsx
@@ -4,7 +4,7 @@ import { NoResults } from "../assets/index.ts";
 
 export default function Example() {
     return (
-        <Stack>
+        <Stack gap="stack-lg">
             <IllustratedMessage>
                 <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
                 <Heading>No results found</Heading>

diff --git a/packages/components/src/IllustratedMessage/docs/image.tsx b/packages/components/src/IllustratedMessage/docs/image.tsx
@@ -3,7 +3,7 @@ import { Content, Heading, IllustratedMessage, Image } from "@hopper-ui/componen
 export default function Example() {
     return (
         <IllustratedMessage>
-            <Image src="/frog.jpg" aria-label="No Results" />
+            <Image src="/frog.jpg" alt="No Results" />
             <Heading>No results found</Heading>
             <Content>It seems like there’s nothing here for now. Hop on and add something new!</Content>
         </IllustratedMessage>

diff --git a/packages/components/src/IllustratedMessage/docs/size.tsx b/packages/components/src/IllustratedMessage/docs/size.tsx
@@ -4,17 +4,17 @@ export default function Example() {
     return (
         <Stack gap="core_480" alignX="center">
             <IllustratedMessage size="sm">
-                <Image src="/frog.jpg" aria-label="Frog" />
+                <Image src="/frog.jpg" alt="Frog" />
                 <Heading>No results found</Heading>
                 <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
             </IllustratedMessage>
             <IllustratedMessage size="md">
-                <Image src="/frog.jpg" aria-label="Frog" />
+                <Image src="/frog.jpg" alt="Frog" />
                 <Heading>No results found</Heading>
                 <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
             </IllustratedMessage>
             <IllustratedMessage size="lg">
-                <Image src="/frog.jpg" aria-label="Frog" />
+                <Image src="/frog.jpg" alt="Frog" />
                 <Heading>No results found</Heading>
                 <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
             </IllustratedMessage>

diff --git a/packages/components/src/Image/tests/chromatic/Image.stories.tsx b/packages/components/src/Image/tests/chromatic/Image.stories.tsx
@@ -1,7 +1,7 @@
 import { Div } from "@hopper-ui/styled-system";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Inline, Stack } from "../../../layout/index.ts";
+import { Inline } from "../../../layout/index.ts";
 import { Frog } from "../../assets/index.ts";
 import { Image } from "../../src/Image.tsx";
 
@@ -18,30 +18,23 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default = {
-    render: args => (
-        <Image {...args} />
-    )
-} satisfies Story;
+export const Default = {} satisfies Story;
 
 export const Contained = {
-    render: args => (
+    decorators: [Story => (
         <Div UNSAFE_width="200px" UNSAFE_height="200px">
-            <Image {...args} />
+            <Story />
         </Div>
-    )
+    )]
 } satisfies Story;
 
 export const Size = {
     render: args => (
-        <Stack>
-            <Image {...args} />
-            <Image UNSAFE_height="200px" {...args} />
-        </Stack>
-    ),
-    args: {
-        UNSAFE_width: "200px"
-    }
+        <Inline>
+            <Image UNSAFE_width="200px" {...args} />
+            <Image UNSAFE_width="300px" {...args} />
+        </Inline>
+    )
 } satisfies Story;
 
 export const Straight = {
@@ -131,17 +124,20 @@ export const ObjectPosition = {
     }
 } satisfies Story;
 
-export const Zoom = {
-    render: args => (
-        <Stack>
-            <Div className="zoom-in">
-                <Image {...args} />
-            </Div>
-            <Div className="zoom-out">
-                <Image {...args} />
-            </Div>
-        </Stack>
-    )
+export const ZoomIn = {
+    decorators: [Story => (
+        <Div className="zoom-in">
+            <Story />
+        </Div>
+    )]
+} satisfies Story;
+
+export const ZoomOut = {
+    decorators: [Story => (
+        <Div className="zoom-in">
+            <Story />
+        </Div>
+    )]
 } satisfies Story;
 
 export const Styling = {

diff --git a/packages/components/src/Image/tests/chromatic/SvgImage.stories.tsx b/packages/components/src/Image/tests/chromatic/SvgImage.stories.tsx
@@ -10,7 +10,8 @@ const meta = {
     component: SvgImage,
     args: {
         src: NoResults,
-        "aria-label": "No Results"
+        "aria-label": "No Results",
+        stroke: "neutral"
     }
 } satisfies Meta<typeof SvgImage>;
 
@@ -19,27 +20,27 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Stroke = {
-    render: args => (
-        <SvgImage stroke="neutral" {...args} />
-    )
+    args: {
+        stroke: "neutral"
+    }
 } satisfies Story;
 
 export const Fill = {
-    render: args => (
-        <SvgImage fill="neutral" {...args} />
-    )
+    args: {
+        fill: "neutral"
+    }
 } satisfies Story;
 
 export const Width = {
-    render: args => (
-        <SvgImage UNSAFE_width="100px" stroke="neutral" {...args} />
-    )
+    args: {
+        UNSAFE_width: "100px"
+    }
 } satisfies Story;
 
 export const Height = {
-    render: args => (
-        <SvgImage UNSAFE_height="100px" stroke="neutral" {...args} />
-    )
+    args: {
+        UNSAFE_height: "100px"
+    }
 } satisfies Story;
 
 export const Styling = {