Merge pull request #173 from gsoft-inc/feature/ds-412

converted chromatic stories to CSF3 format
gsoft-inc · Oct 29, 2024 · 6a68f07 · 6a68f07
2 parents 98e4c85 + ad38449
commit 6a68f07
Show file tree

Hide file tree

Showing 268 changed files with 55,835 additions and 8,915 deletions.
diff --git a/...dion/tests/chromatic/Accordion.chroma.jsx → ...ts/chromatic/Accordion-hopper.stories.tsx b/...dion/tests/chromatic/Accordion.chroma.jsx → ...ts/chromatic/Accordion-hopper.stories.tsx
@@ -3,24 +3,26 @@ import { Content } from "@components/placeholders";
 import { H3 } from "@components/typography";
 import { Inline } from "@components/layout";
 import { Item } from "@components/collection";
-import { createAccordionTestSuite } from "./createAccordionTestSuite";
-import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
-function stories(segment) {
-    return storiesOfBuilder(module, "Chromatic/Accordion")
-        .segment(segment)
-        .parameters(paramsBuilder()
-            .chromaticDelay(100)
-            .build())
-        .build();
-}
+import { Meta, StoryObj } from "@storybook/react";
 
-createAccordionTestSuite(<Accordion variant="borderless" />, stories("/borderless"));
+const meta = {
+    title: "Chromatic/Accordion-hopper",
+    component: Accordion,
+    parameters: {
+        chromatic: {
+            delay: 100
+        }
+    }
+} as Meta<typeof Accordion>;
 
-createAccordionTestSuite(<Accordion variant="bordered" />, stories("/bordered"));
+export default meta;
 
-stories()
-    .add("conditional rendering", () =>
+type AccordionStory = StoryObj<typeof meta>;
+
+export const ConditionalRendering: AccordionStory = {
+    name: "conditional rendering",
+    render: () => (
         <Accordion>
             <Item>
                 <H3>Mars</H3>
@@ -32,7 +34,11 @@ stories()
             </Item>}
         </Accordion>
     )
-    .add("styling", () =>
+};
+
+export const Styling: AccordionStory = {
+    name: "styling",
+    render: () => (
         <Inline>
             <Accordion border="warning" expandedKeys={["0"]}>
                 <Item>
@@ -53,4 +59,5 @@ stories()
                 </Item>
             </Accordion>
         </Inline>
-    );
+    )
+};
diff --git a/...sts/chromatic/Accordion-hopper.chroma.jsx → ...ion/tests/chromatic/Accordion.stories.tsx b/...sts/chromatic/Accordion-hopper.chroma.jsx → ...ion/tests/chromatic/Accordion.stories.tsx
@@ -3,24 +3,26 @@ import { Content } from "@components/placeholders";
 import { H3 } from "@components/typography";
 import { Inline } from "@components/layout";
 import { Item } from "@components/collection";
-import { createAccordionTestSuite } from "./createAccordionTestSuite-hopper";
-import { paramsBuilder, storiesOfBuilder } from "@stories/utils";
 
-function stories(segment) {
-    return storiesOfBuilder(module, "Chromatic/Accordion-hopper")
-        .segment(segment)
-        .parameters(paramsBuilder()
-            .chromaticDelay(100)
-            .build())
-        .build();
-}
+import { Meta, StoryObj } from "@storybook/react";
 
-createAccordionTestSuite(<Accordion variant="borderless" />, stories("/borderless"));
+const meta = {
+    title: "Chromatic/Accordion",
+    component: Accordion,
+    parameters: {
+        chromatic: {
+            delay: 100
+        }
+    }
+} as Meta<typeof Accordion>;
 
-createAccordionTestSuite(<Accordion variant="bordered" />, stories("/bordered"));
+export default meta;
 
-stories()
-    .add("conditional rendering", () =>
+type AccordionStory = StoryObj<typeof meta>;
+
+export const ConditionalRendering: AccordionStory = {
+    name: "conditional rendering",
+    render: () => (
         <Accordion>
             <Item>
                 <H3>Mars</H3>
@@ -32,7 +34,11 @@ stories()
             </Item>}
         </Accordion>
     )
-    .add("styling", () =>
+};
+
+export const Styling: AccordionStory = {
+    name: "styling",
+    render: () => (
         <Inline>
             <Accordion border="warning" expandedKeys={["0"]}>
                 <Item>
@@ -53,4 +59,5 @@ stories()
                 </Item>
             </Accordion>
         </Inline>
-    );
+    )
+};