Refactor Margins stories

BrunoQuaresma · BrunoQuaresma · commit 2800c67dc2e4 · 2023-09-07T13:05:29.000Z
diff --git a/site/src/components/Margins/Margins.stories.tsx b/site/src/components/Margins/Margins.stories.tsx
@@ -1,17 +1,20 @@
-import { ComponentMeta, Story } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Margins } from "./Margins";
 
-export default {
+const meta: Meta<typeof Margins> = {
   title: "components/Margins",
   component: Margins,
-} as ComponentMeta<typeof Margins>;
+};
 
-const Template: Story = (args) => (
-  <Margins {...args}>
-    <div style={{ width: "100%", background: "black" }}>
-      Here is some content that will not get too wide!
-    </div>
-  </Margins>
-);
+export default meta;
+type Story = StoryObj<typeof Margins>;
 
-export const Example = Template.bind({});
+export const Example: Story = {
+  args: {
+    children: (
+      <div style={{ width: "100%", background: "black" }}>
+        Here is some content that will not get too wide!
+      </div>
+    ),
+  },
+};
