test(storybook): inline Stack with variance

kripod · Jul 12, 2024 · f15a047 · f15a047
1 parent 78239dc
commit f15a047
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 25 deletions.
diff --git a/.storybook/blocks/Stack.tsx b/.storybook/blocks/Stack.tsx
diff --git a/src/components/Alert.stories.tsx b/src/components/Alert.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Stack } from "../../.storybook/blocks/Stack";
 import { Alert } from "./Alert";
 
 const meta = {
@@ -19,11 +18,11 @@ export const Basic = {
 
 export const Sentiments = {
   render: () => (
-    <Stack>
+    <div className="flex flex-col gap-y-4">
       <Alert sentiment="info">Info</Alert>
       <Alert sentiment="danger">Danger</Alert>
       <Alert sentiment="success">Success</Alert>
       <Alert sentiment="warning">Warning</Alert>
-    </Stack>
+    </div>
   ),
 } satisfies Story;
diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
 
-import { Stack } from "../../.storybook/blocks/Stack";
 import { ButtonPrimary } from "./ButtonPrimary";
 
 const meta = {
@@ -20,10 +19,10 @@ export const Basic = {
 
 export const Interactivity = {
   render: () => (
-    <Stack>
+    <div className="flex flex-wrap gap-4">
       <ButtonPrimary>Focused</ButtonPrimary>
       <ButtonPrimary disabled>Disabled</ButtonPrimary>
-    </Stack>
+    </div>
   ),
   play: async () => {
     await userEvent.tab();
@@ -32,19 +31,19 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <Stack>
+    <div className="flex flex-col items-start gap-y-4">
       <ButtonPrimary size="sm">Small</ButtonPrimary>
       <ButtonPrimary size="md">Medium</ButtonPrimary>
       <ButtonPrimary size="lg">Large</ButtonPrimary>
-    </Stack>
+    </div>
   ),
 } satisfies Story;
 
 export const Sentiments = {
   render: () => (
-    <Stack>
+    <div className="flex flex-wrap gap-4">
       <ButtonPrimary sentiment="neutral">Neutral</ButtonPrimary>
       <ButtonPrimary sentiment="danger">Danger</ButtonPrimary>
-    </Stack>
+    </div>
   ),
 } satisfies Story;
diff --git a/src/components/Input.stories.tsx b/src/components/Input.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
 
-import { Stack } from "../../.storybook/blocks/Stack";
 import { Input } from "./Input";
 
 const meta = {
@@ -23,13 +22,13 @@ export const Basic = {
 
 export const Interactivity = {
   render: () => (
-    <Stack>
+    <div className="flex flex-col items-start gap-y-4">
       <Input defaultValue="Focused" />
       <Input defaultValue="Invalid" aria-invalid />
       <Input value="Read-only" readOnly />
       <Input placeholder="Placeholder" />
       <Input value="Disabled" disabled />
-    </Stack>
+    </div>
   ),
   play: async () => {
     await userEvent.tab();
@@ -38,10 +37,10 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <Stack>
+    <div className="flex flex-col items-start gap-y-4">
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />
-    </Stack>
+    </div>
   ),
 } satisfies Story;
diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
@@ -1,14 +1,13 @@
 import { Unstyled } from "@storybook/blocks";
 
-import { Stack } from "../../.storybook/blocks/Stack";
 import { Alert } from "../components/Alert";
 import { ButtonPrimary } from "../components/ButtonPrimary";
 import { Input } from "../components/Input";
 
 <Unstyled>
   <div className="space-y-4 text-base text-ui-neutral-800">
     <Alert>
-      <Stack>
+      <div className="flex flex-col gap-y-4">
         An alert displays a brief, important message, usually at the top of a
         page. Only text content updates are conveyed to screen readers,
         preserving focus.
@@ -17,7 +16,7 @@ import { Input } from "../components/Input";
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
           <ButtonPrimary size="sm">Cancel</ButtonPrimary>
         </div>
-      </Stack>
+      </div>
     </Alert>
     <Alert sentiment="danger">This is an alert.</Alert>
     <Alert sentiment="success">This is an alert.</Alert>