Update some stories to CSF3

storybookjs · Jan 16, 2024 · cae3482 · cae3482
1 parent da5f745
commit cae3482
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 71 deletions.
diff --git a/packages/examples/stories/docs/advanced/index.stories.js b/packages/examples/stories/docs/advanced/index.stories.js
@@ -4,48 +4,53 @@ import { config } from "@storybook/addon-designs";
 
 import { Button } from "../../Button";
 
-export default {
+const meta = {
   title: "Docs/Advanced usage",
 };
 
-export const setTabName = () => <Button>Button</Button>;
+export default meta;
 
-setTabName.parameters = {
-  design: config({
-    name: "Wireframe",
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
-};
-
-export const embedMultipleDesigns = () => <Button>Button</Button>;
-
-embedMultipleDesigns.parameters = {
-  design: config([
-    {
+export const setTabName = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config({
+      name: "Wireframe",
       type: "figma",
       url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-    {
-      type: "link",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-  ]),
+    }),
+  },
 };
 
-export const setTabNames = () => <Button>Button</Button>;
+export const embedMultipleDesigns = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config([
+      {
+        type: "figma",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+      {
+        type: "link",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+    ]),
+  },
+};
 
-setTabNames.parameters = {
-  design: config([
-    {
-      name: "Foo",
-      type: "figma",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-    {
-      name: "Bar",
-      type: "link",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-  ]),
+export const setTabNames = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config([
+      {
+        name: "Foo",
+        type: "figma",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+      {
+        name: "Bar",
+        type: "link",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+    ]),
+  },
 };
diff --git a/packages/examples/stories/docs/figma/examples.stories.js b/packages/examples/stories/docs/figma/examples.stories.js
@@ -4,53 +4,56 @@ import { config } from "@storybook/addon-designs";
 
 import { Button } from "../../Button";
 
-export default {
+const meta = {
   title: "Docs/Figma/Examples",
   component: Button,
+  render: () => <Button>Button</Button>,
 };
 
-export const embedFile = () => <Button>Button</Button>;
+export default meta;
 
-embedFile.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
+export const embedFile = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+    }),
+  },
 };
 
-export const embedFrame = () => <Button>Button</Button>;
-
-embedFrame.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=2%3A5",
-  }),
+export const embedFrame = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=2%3A5",
+    }),
+  },
 };
 
-export const embedPrivateFile = () => <Button>Button</Button>;
-
-embedPrivateFile.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/WOpzYgwlTe1UV6MpJP6SMv/private-test",
-  }),
+export const embedPrivateFile = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/WOpzYgwlTe1UV6MpJP6SMv/private-test",
+    }),
+  },
 };
 
-export const embedPrototype = () => <Button>Button</Button>;
-
-embedPrototype.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/proto/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
+export const embedPrototype = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/proto/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+    }),
+  },
 };
 
-export const allowFullscreen = () => <Button>Button</Button>;
-
-allowFullscreen.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    allowFullscreen: true,
-  }),
+export const allowFullscreen = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      allowFullscreen: true,
+    }),
+  },
 };