Refactor Typography props

BrunoQuaresma · BrunoQuaresma · commit dbf2efc6fd88 · 2023-09-07T13:51:42.000Z
diff --git a/site/src/components/TemplateVersionWarnings/TemplateVersionWarnings.stories.tsx b/site/src/components/TemplateVersionWarnings/TemplateVersionWarnings.stories.tsx
@@ -1,19 +1,16 @@
-import { Story } from "@storybook/react";
-import {
-  TemplateVersionWarnings,
-  TemplateVersionWarningsProps,
-} from "./TemplateVersionWarnings";
+import { TemplateVersionWarnings } from "./TemplateVersionWarnings";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof TemplateVersionWarnings> = {
   title: "components/TemplateVersionWarnings",
   component: TemplateVersionWarnings,
 };
 
-const Template: Story<TemplateVersionWarningsProps> = (args) => (
-  <TemplateVersionWarnings {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof TemplateVersionWarnings>;
 
-export const UnsupportedWorkspaces = Template.bind({});
-UnsupportedWorkspaces.args = {
-  warnings: ["UNSUPPORTED_WORKSPACES"],
+export const UnsupportedWorkspaces: Story = {
+  args: {
+    warnings: ["UNSUPPORTED_WORKSPACES"],
+  },
 };
diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx
@@ -1,25 +1,25 @@
-import { Story } from "@storybook/react";
-import { Typography, TypographyProps } from "./Typography";
+import { Typography } from "./Typography";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof Typography> = {
   title: "components/Typography",
   component: Typography,
+  args: {
+    children: "Colorless green ideas sleep furiously",
+  },
 };
 
-const Template: Story<TypographyProps> = (args: TypographyProps) => (
-  <>
-    <Typography {...args}>Colorless green ideas sleep furiously</Typography>
-    <Typography {...args}>
-      More people have been to France than I have
-    </Typography>
-  </>
-);
+export default meta;
+type Story = StoryObj<typeof Typography>;
 
-export const Short = Template.bind({});
-Short.args = {
-  short: true,
+export const Short: Story = {
+  args: {
+    short: true,
+  },
 };
-export const Tall = Template.bind({});
-Tall.args = {
-  short: false,
+
+export const Tall: Story = {
+  args: {
+    short: false,
+  },
 };
