Update typography docs (#2290)

## Summary:
- Add individual stories for typography components so they are more discoverable
- Add prop description for tag for Typography components
- Add documentation for accessible form fields

Issue: WB-1737

## Test plan:
- Review documentation in Storybook for the `tag` prop for Typography components (`?path=/docs/packages-typography--docs`)
- Review accessibility documentation for form fields (`?path=/docs/packages-form-accessibility--docs`)
- Confirm that the individual typography components are more discoverable by using the Storybook search bar (ex: search for "label" or "heading" should result in documentation for each component)
- Review stories for each typography component (`?path=/docs/packages-typography--docs`)
<img height="200" alt="Screenshot 2024-08-09 at 3 45 11 PM" src="https://github.com/user-attachments/assets/e772a9a1-3ad4-41e8-bb90-4ee4ec89cd08">

Author: beaesguerra

Reviewers: beaesguerra, jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2290

.changeset/eight-pans-impress.md

@@ -0,0 +1,2 @@
+---
+---

__docs__/wonder-blocks-form/_overview_.mdx

@@ -7,4 +7,4 @@ import {Meta} from "@storybook/blocks";
 # Form
 
 `wonder-blocks-form` provides building blocks form Form components, including
-TextField, Choice, Checkbox, RadioButton, etc.
+TextField, TextArea, Choice, Checkbox, RadioButton, etc.

__docs__/wonder-blocks-form/accessibility.mdx

@@ -0,0 +1,34 @@
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as AccessibilityStories from './accessibility.stories';
+
+<Meta of={AccessibilityStories} />
+
+# Form Accessibility
+
+## Form Field Labels
+
+Form fields should have an associated `<label>` element that has the `htmlFor`
+prop set to the `id` of the form field element. This is helpful for
+screenreaders so that it can communicate the relationship between the label and
+the form field.
+
+### Guidelines
+- Make sure the id of the form field element is unique to the page
+- Consider using the `LabeledTextField` component if you are using `TextField`.
+This will automatically wire up the label and text input. (Note: we will have
+a more generic `LabelField` component later on to provide this functionality
+for other form fields.)
+- If you are using the `CheckboxGroup` or `RadioGroup` components, the accessible
+label for the field is already built-in when the `label` prop is used. This
+uses `<fieldset>` and `<legend>` elements instead of a `<label>` since the label
+is for a group of related controls. See
+[Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
+for more details!
+- When using Wonder Blocks typography components for form labels, the `tag`
+prop can be set to `label` to change the underlying element to render.
+
+
+Here is an example of a form field label using Wonder Blocks components
+`LabelMedium` and `TextArea`:
+
+<Canvas of={AccessibilityStories.FormLabelExample} />

__docs__/wonder-blocks-form/accessibility.stories.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {TextArea} from "@khanacademy/wonder-blocks-form";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+
+export default {
+    title: "Packages / Form / Accessibility",
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+
+        viewMode: "docs",
+
+        chromatic: {
+            // Disabling because this is used for documentation purposes
+            disableSnapshot: true,
+        },
+    },
+    tags: [
+        "!dev", // Hide individual stories from sidebar so they are only shown in the docs page.
+    ],
+};
+
+/**
+ * An example of a form field label using Wonder Blocks components `LabelMedium`
+ * and `TextArea`.
+ */
+export const FormLabelExample = () => {
+    const [value, setValue] = React.useState("");
+    return (
+        <View style={styles.container}>
+            <LabelMedium tag="label" htmlFor="description-field">
+                Description
+            </LabelMedium>
+            <TextArea
+                value={value}
+                onChange={(value) => setValue(value)}
+                id="description-field"
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: spacing.xSmall_8,
+    },
+});

__docs__/wonder-blocks-typography/body-monospace.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodyMonospace",
+    component: BodyMonospace,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodyMonospace>;
+
+type StoryComponentType = StoryObj<typeof BodyMonospace>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodyMonospace",
+    },
+};

__docs__/wonder-blocks-typography/body-serif-block.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodySerifBlock} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodySerifBlock",
+    component: BodySerifBlock,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodySerifBlock>;
+
+type StoryComponentType = StoryObj<typeof BodySerifBlock>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodySerifBlock",
+    },
+};

__docs__/wonder-blocks-typography/body-serif.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {BodySerif} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / BodySerif",
+    component: BodySerif,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof BodySerif>;
+
+type StoryComponentType = StoryObj<typeof BodySerif>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "BodySerif",
+    },
+};

__docs__/wonder-blocks-typography/body.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Body} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Body",
+    component: Body,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Body>;
+
+type StoryComponentType = StoryObj<typeof Body>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Body",
+    },
+};

__docs__/wonder-blocks-typography/caption.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Caption} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Caption",
+    component: Caption,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Caption>;
+
+type StoryComponentType = StoryObj<typeof Caption>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Caption",
+    },
+};

__docs__/wonder-blocks-typography/footnote.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {Footnote} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / Footnote",
+    component: Footnote,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof Footnote>;
+
+type StoryComponentType = StoryObj<typeof Footnote>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "Footnote",
+    },
+};

__docs__/wonder-blocks-typography/heading-large.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingLarge",
+    component: HeadingLarge,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingLarge>;
+
+type StoryComponentType = StoryObj<typeof HeadingLarge>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingLarge",
+    },
+};

__docs__/wonder-blocks-typography/heading-medium.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {Meta, StoryObj} from "@storybook/react";
+import packageConfig from "../../packages/wonder-blocks-typography/package.json";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import TypographyArgTypes from "./typography.argtypes";
+
+import {HeadingMedium} from "@khanacademy/wonder-blocks-typography";
+
+export default {
+    title: "Packages / Typography / HeadingMedium",
+    component: HeadingMedium,
+    parameters: {
+        componentSubtitle: (
+            <ComponentInfo
+                name={packageConfig.name}
+                version={packageConfig.version}
+            />
+        ),
+        chromatic: {
+            // Disabling because all typography components are covered together
+            // in the Typography stories
+            disableSnapshot: true,
+        },
+    },
+    argTypes: TypographyArgTypes,
+} as Meta<typeof HeadingMedium>;
+
+type StoryComponentType = StoryObj<typeof HeadingMedium>;
+
+export const Default: StoryComponentType = {
+    args: {
+        children: "HeadingMedium",
+    },
+};