From 7e60524ffa03bb0f9adc0c18d9ad9b92fa6fd555 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 13:39:01 -0600 Subject: [PATCH 01/11] add prop description for tag for Typography components --- __docs__/wonder-blocks-typography/typography.argtypes.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/__docs__/wonder-blocks-typography/typography.argtypes.ts b/__docs__/wonder-blocks-typography/typography.argtypes.ts index 59cf949b9f..e20e4424f6 100644 --- a/__docs__/wonder-blocks-typography/typography.argtypes.ts +++ b/__docs__/wonder-blocks-typography/typography.argtypes.ts @@ -23,4 +23,11 @@ export default { table: {type: {summary: "string"}}, type: {required: false}, }, + tag: { + control: {type: "text"}, + description: + "The underyling HTML tag to render (e.g. `h1`, `h2`, etc.) Please use this to ensure that the header is hierarchically correct.", + table: {type: {summary: "string"}}, + type: {required: false}, + }, }; From 4bf971e79affb1aea4640ce7905a8ddcc0fbf1ab Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 13:57:12 -0600 Subject: [PATCH 02/11] fix types for typography arg types --- __docs__/wonder-blocks-typography/typography.argtypes.ts | 5 ----- __docs__/wonder-blocks-typography/typography.stories.tsx | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/__docs__/wonder-blocks-typography/typography.argtypes.ts b/__docs__/wonder-blocks-typography/typography.argtypes.ts index e20e4424f6..dcbe7c5c3c 100644 --- a/__docs__/wonder-blocks-typography/typography.argtypes.ts +++ b/__docs__/wonder-blocks-typography/typography.argtypes.ts @@ -3,31 +3,26 @@ export default { control: {type: "text"}, description: "Text to appear with the specified typography styles.", table: {type: {summary: "React.Node"}}, - type: {required: false}, }, style: { control: {type: "object"}, description: "Optional custom styles.", table: {type: {summary: "StyleType"}}, - type: {required: false}, }, testId: { control: {type: "text"}, description: "Test ID used for e2e testing.", table: {type: {summary: "string"}}, - type: {required: false}, }, id: { control: {type: "text"}, description: "Unique identifier.", table: {type: {summary: "string"}}, - type: {required: false}, }, tag: { control: {type: "text"}, description: "The underyling HTML tag to render (e.g. `h1`, `h2`, etc.) Please use this to ensure that the header is hierarchically correct.", table: {type: {summary: "string"}}, - type: {required: false}, }, }; diff --git a/__docs__/wonder-blocks-typography/typography.stories.tsx b/__docs__/wonder-blocks-typography/typography.stories.tsx index b1c3c4cb96..a3314d90ed 100644 --- a/__docs__/wonder-blocks-typography/typography.stories.tsx +++ b/__docs__/wonder-blocks-typography/typography.stories.tsx @@ -63,7 +63,7 @@ export default { }, }, // TODO(FEI-5000): Inline this - argTypes: TypographyArgTypes as any, + argTypes: TypographyArgTypes, } as Meta; export const ControlProps: StoryObj = { From 66bd4d34743dbe132aeea4470de754354f682238 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 13:57:54 -0600 Subject: [PATCH 03/11] add separate story file for Title component --- .../title.stories.tsx | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 __docs__/wonder-blocks-typography/title.stories.tsx diff --git a/__docs__/wonder-blocks-typography/title.stories.tsx b/__docs__/wonder-blocks-typography/title.stories.tsx new file mode 100644 index 0000000000..2adf4db687 --- /dev/null +++ b/__docs__/wonder-blocks-typography/title.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 {Title} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / Title", + component: Title, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "Title", + }, +}; From 8a8a310a469e46c15181b2356ed6f79bbaa9e657 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:15:59 -0600 Subject: [PATCH 04/11] Add individual stories for heading components so they are more discoverable --- .../heading-large.stories.tsx | 35 +++++++++++++++++++ .../heading-medium.stories.tsx | 35 +++++++++++++++++++ .../heading-small.stories.tsx | 35 +++++++++++++++++++ .../heading-xsmall.stories.tsx | 35 +++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 __docs__/wonder-blocks-typography/heading-large.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/heading-medium.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/heading-small.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/heading-xsmall.stories.tsx diff --git a/__docs__/wonder-blocks-typography/heading-large.stories.tsx b/__docs__/wonder-blocks-typography/heading-large.stories.tsx new file mode 100644 index 0000000000..94fa3363ba --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "HeadingLarge", + }, +}; diff --git a/__docs__/wonder-blocks-typography/heading-medium.stories.tsx b/__docs__/wonder-blocks-typography/heading-medium.stories.tsx new file mode 100644 index 0000000000..46c324b8ff --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "HeadingMedium", + }, +}; diff --git a/__docs__/wonder-blocks-typography/heading-small.stories.tsx b/__docs__/wonder-blocks-typography/heading-small.stories.tsx new file mode 100644 index 0000000000..545a94f4fc --- /dev/null +++ b/__docs__/wonder-blocks-typography/heading-small.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 {HeadingSmall} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / HeadingSmall", + component: HeadingSmall, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "HeadingSmall", + }, +}; diff --git a/__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx b/__docs__/wonder-blocks-typography/heading-xsmall.stories.tsx new file mode 100644 index 0000000000..aae22f7fcb --- /dev/null +++ b/__docs__/wonder-blocks-typography/heading-xsmall.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 {HeadingXSmall} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / HeadingXSmall", + component: HeadingXSmall, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "HeadingXSmall", + }, +}; From 59f29984f54cb612af988c34b456cf3ad232e213 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:19:21 -0600 Subject: [PATCH 05/11] Add body typography component stories --- .../body-monospace.stories.tsx | 35 +++++++++++++++++++ .../body-serif-block.stories.tsx | 35 +++++++++++++++++++ .../body-serif.stories.tsx | 35 +++++++++++++++++++ .../wonder-blocks-typography/body.stories.tsx | 35 +++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 __docs__/wonder-blocks-typography/body-monospace.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/body-serif-block.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/body-serif.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/body.stories.tsx diff --git a/__docs__/wonder-blocks-typography/body-monospace.stories.tsx b/__docs__/wonder-blocks-typography/body-monospace.stories.tsx new file mode 100644 index 0000000000..0f7ca674c5 --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "BodyMonospace", + }, +}; diff --git a/__docs__/wonder-blocks-typography/body-serif-block.stories.tsx b/__docs__/wonder-blocks-typography/body-serif-block.stories.tsx new file mode 100644 index 0000000000..97e50372f1 --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "BodySerifBlock", + }, +}; diff --git a/__docs__/wonder-blocks-typography/body-serif.stories.tsx b/__docs__/wonder-blocks-typography/body-serif.stories.tsx new file mode 100644 index 0000000000..28262b2b5c --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "BodySerif", + }, +}; diff --git a/__docs__/wonder-blocks-typography/body.stories.tsx b/__docs__/wonder-blocks-typography/body.stories.tsx new file mode 100644 index 0000000000..f2d4c3c2b2 --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "Body", + }, +}; From 3953481694cc55cf8b1f57e1e6bfb2faea6f8151 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:22:27 -0600 Subject: [PATCH 06/11] add individual stories for label components --- .../label-large.stories.tsx | 35 +++++++++++++++++++ .../label-medium.stories.tsx | 35 +++++++++++++++++++ .../label-small.stories.tsx | 35 +++++++++++++++++++ .../label-xsmall.stories.tsx | 35 +++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 __docs__/wonder-blocks-typography/label-large.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/label-medium.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/label-small.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/label-xsmall.stories.tsx diff --git a/__docs__/wonder-blocks-typography/label-large.stories.tsx b/__docs__/wonder-blocks-typography/label-large.stories.tsx new file mode 100644 index 0000000000..1df4e00722 --- /dev/null +++ b/__docs__/wonder-blocks-typography/label-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 {LabelLarge} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / LabelLarge", + component: LabelLarge, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "LabelLarge", + }, +}; diff --git a/__docs__/wonder-blocks-typography/label-medium.stories.tsx b/__docs__/wonder-blocks-typography/label-medium.stories.tsx new file mode 100644 index 0000000000..955b137e0d --- /dev/null +++ b/__docs__/wonder-blocks-typography/label-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 {LabelMedium} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / LabelMedium", + component: LabelMedium, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "LabelMedium", + }, +}; diff --git a/__docs__/wonder-blocks-typography/label-small.stories.tsx b/__docs__/wonder-blocks-typography/label-small.stories.tsx new file mode 100644 index 0000000000..a8d1d6fa11 --- /dev/null +++ b/__docs__/wonder-blocks-typography/label-small.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 {LabelSmall} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / LabelSmall", + component: LabelSmall, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "LabelSmall", + }, +}; diff --git a/__docs__/wonder-blocks-typography/label-xsmall.stories.tsx b/__docs__/wonder-blocks-typography/label-xsmall.stories.tsx new file mode 100644 index 0000000000..1d3b73c548 --- /dev/null +++ b/__docs__/wonder-blocks-typography/label-xsmall.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 {LabelXSmall} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / LabelXSmall", + component: LabelXSmall, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "LabelXSmall", + }, +}; From b015069d0f7c6dc78c1e3fddb9ae1174968adc12 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:24:26 -0600 Subject: [PATCH 07/11] add remaining stories for othe typography components --- .../caption.stories.tsx | 35 +++++++++++++++++++ .../footnote.stories.tsx | 35 +++++++++++++++++++ .../tagline.stories.tsx | 35 +++++++++++++++++++ 3 files changed, 105 insertions(+) create mode 100644 __docs__/wonder-blocks-typography/caption.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/footnote.stories.tsx create mode 100644 __docs__/wonder-blocks-typography/tagline.stories.tsx diff --git a/__docs__/wonder-blocks-typography/caption.stories.tsx b/__docs__/wonder-blocks-typography/caption.stories.tsx new file mode 100644 index 0000000000..c1ea163ec5 --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "Caption", + }, +}; diff --git a/__docs__/wonder-blocks-typography/footnote.stories.tsx b/__docs__/wonder-blocks-typography/footnote.stories.tsx new file mode 100644 index 0000000000..db78bae44f --- /dev/null +++ b/__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: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "Footnote", + }, +}; diff --git a/__docs__/wonder-blocks-typography/tagline.stories.tsx b/__docs__/wonder-blocks-typography/tagline.stories.tsx new file mode 100644 index 0000000000..d13ed975c7 --- /dev/null +++ b/__docs__/wonder-blocks-typography/tagline.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 {Tagline} from "@khanacademy/wonder-blocks-typography"; + +export default { + title: "Packages / Typography / Tagline", + component: Tagline, + parameters: { + componentSubtitle: ( + + ), + chromatic: { + // Disabling because all typography components are covered together + // in the Typography stories + disableSnapshot: true, + }, + }, + argTypes: TypographyArgTypes, +} as Meta; + +type StoryComponentType = StoryObj; + +export const Default: StoryComponentType = { + args: { + children: "Tagline", + }, +}; From 1d41f74485c37c638c69041d7860caa73c34004a Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:28:21 -0600 Subject: [PATCH 08/11] add empty changeset since only storybook files were updated --- .changeset/eight-pans-impress.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/eight-pans-impress.md diff --git a/.changeset/eight-pans-impress.md b/.changeset/eight-pans-impress.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/eight-pans-impress.md @@ -0,0 +1,2 @@ +--- +--- From f40e86841cfa56c3cca3e492ff2776fda28a4b1d Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 14:37:20 -0600 Subject: [PATCH 09/11] cleanup --- __docs__/wonder-blocks-typography/typography.argtypes.ts | 2 +- __docs__/wonder-blocks-typography/typography.stories.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/__docs__/wonder-blocks-typography/typography.argtypes.ts b/__docs__/wonder-blocks-typography/typography.argtypes.ts index dcbe7c5c3c..ae02d2b8c4 100644 --- a/__docs__/wonder-blocks-typography/typography.argtypes.ts +++ b/__docs__/wonder-blocks-typography/typography.argtypes.ts @@ -22,7 +22,7 @@ export default { tag: { control: {type: "text"}, description: - "The underyling HTML tag to render (e.g. `h1`, `h2`, etc.) Please use this to ensure that the header is hierarchically correct.", + "The underlying HTML tag to render (e.g. `h1`, `h2`, `label`, etc.). Please use this to ensure that the typography is hierarchically correct.", table: {type: {summary: "string"}}, }, }; diff --git a/__docs__/wonder-blocks-typography/typography.stories.tsx b/__docs__/wonder-blocks-typography/typography.stories.tsx index a3314d90ed..f7ba7e92bc 100644 --- a/__docs__/wonder-blocks-typography/typography.stories.tsx +++ b/__docs__/wonder-blocks-typography/typography.stories.tsx @@ -62,7 +62,6 @@ export default { }, }, }, - // TODO(FEI-5000): Inline this argTypes: TypographyArgTypes, } as Meta; From f31cbffdf01fbf258bf49d372a412511ca6b7b18 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Fri, 9 Aug 2024 15:35:07 -0600 Subject: [PATCH 10/11] Add form accessibility docs for labels --- __docs__/wonder-blocks-form/_overview_.mdx | 2 +- .../accessibility.stories.tsx | 66 +++++++++++++++++++ 2 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 __docs__/wonder-blocks-form/accessibility.stories.tsx diff --git a/__docs__/wonder-blocks-form/_overview_.mdx b/__docs__/wonder-blocks-form/_overview_.mdx index b3d26325bb..78c7e733d8 100644 --- a/__docs__/wonder-blocks-form/_overview_.mdx +++ b/__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. diff --git a/__docs__/wonder-blocks-form/accessibility.stories.tsx b/__docs__/wonder-blocks-form/accessibility.stories.tsx new file mode 100644 index 0000000000..60a143689d --- /dev/null +++ b/__docs__/wonder-blocks-form/accessibility.stories.tsx @@ -0,0 +1,66 @@ +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: { + 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. + ], +}; + +/** + *

Form Field Labels

+ * Form fields should have an associated `