Storybook and organize text stories

coder · presleyp · Apr 8, 2022 · Apr 5, 2022 · Apr 5, 2022 · Apr 6, 2022
commit bc84caf6f8aa6292df1f44320f8a147e71d753ca
diff --git a/site/src/components/CodeBlock/index.stories.tsx b/site/src/components/CodeBlock/index.stories.tsx
@@ -9,7 +9,7 @@ Started container user
 Using user 'coder' with shell '/bin/bash'`.split("\n")
 
 export default {
-  title: "CodeBlock/CodeBlock",
+  title: "Text/CodeBlock",
   component: CodeBlock,
   argTypes: {
     lines: { control: "text", defaultValue: sampleLines },

diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -5,7 +5,7 @@ import { CodeExample, CodeExampleProps } from "./CodeExample"
 const sampleCode = `echo "Hello, world"`
 
 export default {
-  title: "CodeBlock/CodeExample",
+  title: "Text/CodeExample",
   component: CodeExample,
   argTypes: {
     code: { control: "string", defaultValue: sampleCode },

diff --git a/site/src/components/Typography/Typography.stories.tsx b/site/src/components/Typography/Typography.stories.tsx
@@ -0,0 +1,28 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { Typography, TypographyProps } from "."
+
+export default {
+  title: "Text/Typography",
+  component: Typography,
+}
+
+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 const Short = Template.bind({})
+Short.args = {
+  short: true
+}
+export const Tall = Template.bind({})
+Tall.args = {
+  short: false
+}