From 87cda5b33a2fe6aae0c8dd47155bcdf64b00b489 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 18 Jan 2023 16:42:41 +0100
Subject: [PATCH] add typography stories

---
 .../src/typography/typography.stories.tsx     | 60 +++++++++++++++++++
 .../components/src/typography/typography.tsx  |  5 ++
 2 files changed, 65 insertions(+)
 create mode 100644 packages/components/src/typography/typography.stories.tsx

diff --git a/packages/components/src/typography/typography.stories.tsx b/packages/components/src/typography/typography.stories.tsx
new file mode 100644
index 00000000..f645fced
--- /dev/null
+++ b/packages/components/src/typography/typography.stories.tsx
@@ -0,0 +1,60 @@
+import { Stack } from '@tamagui/core'
+
+import { Code, Heading, Paragraph } from '.'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'typography',
+  argTypes: {},
+}
+
+export const HeadingStory: StoryObj<typeof Heading> = {
+  name: 'Heading',
+  args: {
+    children: 'The quick brown fox jumped over the lazy dog.',
+  },
+  render: args => (
+    <Stack>
+      <Heading {...args} weight="regular" />
+      <Heading {...args} weight="medium" />
+      <Heading {...args} weight="semibold" />
+      <Heading {...args} weight="regular" heading="h2" />
+      <Heading {...args} weight="medium" heading="h2" />
+      <Heading {...args} weight="semibold" heading="h2" />
+    </Stack>
+  ),
+}
+
+export const TextStory: StoryObj<typeof Paragraph> = {
+  name: 'Text',
+  args: {
+    children: 'The quick brown fox jumped over the lazy dog.',
+  },
+  render: args => (
+    <Stack>
+      <Paragraph {...args} weight="regular" />
+      <Paragraph {...args} weight="medium" />
+      <Paragraph {...args} weight="semibold" />
+      <Paragraph {...args} weight="regular" variant="smaller" />
+      <Paragraph {...args} weight="medium" variant="smaller" />
+      <Paragraph {...args} weight="semibold" variant="smaller" />
+    </Stack>
+  ),
+}
+
+export const CodeStory: StoryObj<typeof Code> = {
+  name: 'Code',
+  args: {
+    children: '// How to create variables:',
+  },
+  render: () => (
+    <Stack>
+      <Code weight="regular">
+        The quick brown fox jumped over the lazy dog.
+      </Code>
+    </Stack>
+  ),
+}
+
+export default meta
diff --git a/packages/components/src/typography/typography.tsx b/packages/components/src/typography/typography.tsx
index 23d929e6..21c5b0dc 100644
--- a/packages/components/src/typography/typography.tsx
+++ b/packages/components/src/typography/typography.tsx
@@ -60,6 +60,11 @@ export const Paragraph = styled(SizableText, {
         lineHeight: 18,
         letterSpacing: '-0.003em',
       },
+      11: {
+        fontSize: 11,
+        lineHeight: 18,
+        letterSpacing: '-0.003em',
+      },
     },
     uppercase: {
       true: {