From 87b4d0f1af2410cf98f8563aedd6f3868c9fd4a7 Mon Sep 17 00:00:00 2001
From: Marcus Kernohan <135075821+mkernohanbc@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:36:06 -0800
Subject: [PATCH] Add Heading and Text components (#510)

* implement RAC Text

* scaffolding Text docs

* WIP on implementing BCDS typescale

* React Aria library update to 1.5.0

* Add Accordion and AccordionGroup components (#499)

* staging Accordion and AccordionGroup file structure

* bump RAC to 1.4.0

* basic shape of Accordion component

* tweak props import

* add story wireframe for Accordion

* styling accordion

* styling

* additional styling and alternative icon implementation

* refining button styling

* scaffolding AccordionGroup

* add title prop and styling to AccordionGroup

* continuing work on Accordion and AccordionGroup styling

* fix focus state for accordions inside accordiongroup

* fleshing out argTypes

* scaffolding accordion docs

* add examples to vite kitchen sink

* fleshing out examples on vite

* expanding stories and docs

* stories and docs

* typo

* renaming CSS classes to bcds-react-aria-* to match convention

* typo

* add comments to accordion group props

* remove unused CSS class

* bump RAC to 1.5.0

* update RAC imports

* Refactor Select to use ListBoxSection (#504)

* bump RAC to 1.5.0

* replace Section with ListBoxSection

* Revert "bump RAC to 1.5.0"

This reverts commit 75e05e7ae1045a707e7bf73621a6533b07fd5a3f.

* Reapply "bump RAC to 1.5.0"

This reverts commit 0edc443c769193cf05e97596a2e6de850c32562d.

* storybook library update to 8.4.7

* add TextProps, refining styling

* add missing CSS import

* fork Heading styles into new component

* add vite page for dev and testing

* demo content

* add text colour prop

* wireframing storybook docs

* add isUnstyled prop to Heading and Text

* docs and stories

* add color prop to Heading and flesh out docs

* add ARIA attribute to fix accessibility violation

* add explicit default elementType

* add missing elementType declaration

* docs edits

---------

Co-authored-by: Arora <Supriya.Arora@gov.bc.ca>
Co-authored-by: Supriya-Arora <101464129+Supriya-Arora@users.noreply.github.com>
---
 packages/react-components/src/App.tsx         |   2 +
 .../src/components/Heading/Heading.css        |  44 +++++++
 .../src/components/Heading/Heading.tsx        |  32 ++++++
 .../src/components/Heading/index.ts           |   2 +
 .../src/components/Text/Text.css              |  64 +++++++++++
 .../src/components/Text/Text.tsx              |  41 +++++++
 .../src/components/Text/index.ts              |   2 +
 .../react-components/src/components/index.ts  |   2 +
 .../src/pages/TextPage/TextPage.tsx           |  55 +++++++++
 .../src/pages/TextPage/index.ts               |   3 +
 packages/react-components/src/pages/index.ts  |   2 +
 .../react-components/src/stories/Heading.mdx  |  61 ++++++++++
 .../src/stories/Heading.stories.tsx           | 107 ++++++++++++++++++
 .../react-components/src/stories/Text.mdx     |  66 +++++++++++
 .../src/stories/Text.stories.tsx              | 104 +++++++++++++++++
 15 files changed, 587 insertions(+)
 create mode 100644 packages/react-components/src/components/Heading/Heading.css
 create mode 100644 packages/react-components/src/components/Heading/Heading.tsx
 create mode 100644 packages/react-components/src/components/Heading/index.ts
 create mode 100644 packages/react-components/src/components/Text/Text.css
 create mode 100644 packages/react-components/src/components/Text/Text.tsx
 create mode 100644 packages/react-components/src/components/Text/index.ts
 create mode 100644 packages/react-components/src/pages/TextPage/TextPage.tsx
 create mode 100644 packages/react-components/src/pages/TextPage/index.ts
 create mode 100644 packages/react-components/src/stories/Heading.mdx
 create mode 100644 packages/react-components/src/stories/Heading.stories.tsx
 create mode 100644 packages/react-components/src/stories/Text.mdx
 create mode 100644 packages/react-components/src/stories/Text.stories.tsx

diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx
index 10c81c60..67a08db6 100644
--- a/packages/react-components/src/App.tsx
+++ b/packages/react-components/src/App.tsx
@@ -18,6 +18,7 @@ import {
   RadioGroupPage,
   SelectPage,
   TagGroupPage,
+  TextPage,
   TextAreaPage,
   TextFieldPage,
   SwitchPage,
@@ -169,6 +170,7 @@ function App() {
         <TooltipPage />
         <TextAreaPage />
         <TextFieldPage />
+        <TextPage />
       </main>
       <Footer />
       <Footer
diff --git a/packages/react-components/src/components/Heading/Heading.css b/packages/react-components/src/components/Heading/Heading.css
new file mode 100644
index 00000000..2b867874
--- /dev/null
+++ b/packages/react-components/src/components/Heading/Heading.css
@@ -0,0 +1,44 @@
+/* Headings */
+h1.bcds-react-aria-Heading {
+  font: var(--typography-bold-h1);
+}
+
+h2.bcds-react-aria-Heading {
+  font: var(--typography-bold-h2);
+}
+
+h3.bcds-react-aria-Heading {
+  font: var(--typography-bold-h3);
+}
+
+h4.bcds-react-aria-Heading {
+  font: var(--typography-bold-h4);
+}
+
+h5.bcds-react-aria-Heading {
+  font: var(--typography-bold-h5);
+}
+
+h6.bcds-react-aria-Heading {
+  font: var(--typography-bold-h6);
+}
+
+/* Text colour */
+.bcds-react-aria-Heading.primary {
+  color: var(--typography-color-primary);
+}
+.bcds-react-aria-Heading.primaryInvert {
+  color: var(--typography-color-primary-invert);
+}
+.bcds-react-aria-Heading.secondary {
+  color: var(--typography-color-secondary);
+}
+.bcds-react-aria-Heading.secondaryInvert {
+  color: var(--typography-color-secondary-invert);
+}
+.bcds-react-aria-Heading.disabled {
+  color: var(--typography-color-disabled);
+}
+.bcds-react-aria-Heading.danger {
+  color: var(--typography-color-danger);
+}
diff --git a/packages/react-components/src/components/Heading/Heading.tsx b/packages/react-components/src/components/Heading/Heading.tsx
new file mode 100644
index 00000000..21d56aaf
--- /dev/null
+++ b/packages/react-components/src/components/Heading/Heading.tsx
@@ -0,0 +1,32 @@
+import {
+  Heading as ReactAriaHeading,
+  HeadingProps as ReactAriaHeadingProps,
+} from "react-aria-components";
+
+import "./Heading.css";
+
+export interface HeadingProps extends ReactAriaHeadingProps {
+  /* Sets text color, defaults to primary */
+  color?:
+    | "primary"
+    | "primaryInvert"
+    | "secondary"
+    | "secondaryInvert"
+    | "disabled"
+    | "danger";
+  /* If true, renders component without CSS class */
+  isUnstyled?: boolean;
+}
+
+export default function Heading({
+  color = "primary",
+  isUnstyled = false,
+  ...props
+}: HeadingProps) {
+  return (
+    <ReactAriaHeading
+      className={isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`}
+      {...props}
+    />
+  );
+}
diff --git a/packages/react-components/src/components/Heading/index.ts b/packages/react-components/src/components/Heading/index.ts
new file mode 100644
index 00000000..25159477
--- /dev/null
+++ b/packages/react-components/src/components/Heading/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Heading";
+export type { HeadingProps } from "./Heading";
diff --git a/packages/react-components/src/components/Text/Text.css b/packages/react-components/src/components/Text/Text.css
new file mode 100644
index 00000000..cce57a6d
--- /dev/null
+++ b/packages/react-components/src/components/Text/Text.css
@@ -0,0 +1,64 @@
+/* Medium size (default) */
+.bcds-react-aria-Text.medium {
+  font: var(--typography-regular-body);
+}
+
+.bcds-react-aria-Text.medium b,
+.bcds-react-aria-Text.medium strong {
+  font: var(--typography-bold-body);
+}
+
+.bcds-react-aria-Text.medium i,
+.bcds-react-aria-Text.medium em {
+  font: var(--typography-italic-body);
+}
+
+/* Small size */
+.bcds-react-aria-Text.small {
+  font: var(--typography-regular-small-body);
+}
+
+.bcds-react-aria-Text.small b,
+.bcds-react-aria-Text.small strong {
+  font: var(--typography-bold-small-body);
+}
+
+.bcds-react-aria-Text.small i,
+.bcds-react-aria-Text.small em {
+  font: var(--typography-italic-small-body);
+}
+
+/* Large size */
+.bcds-react-aria-Text.large {
+  font: var(--typography-regular-large-body);
+}
+
+.bcds-react-aria-Text.large b,
+.bcds-react-aria-Text.large strong {
+  font: var(--typography-bold-large-body);
+}
+
+.bcds-react-aria-Text.large i,
+.bcds-react-aria-Text.large em {
+  font: var(--typography-italic-large-body);
+}
+
+/* Text color */
+.bcds-react-aria-Text.primary {
+  color: var(--typography-color-primary);
+}
+.bcds-react-aria-Text.primaryInvert {
+  color: var(--typography-color-primary-invert);
+}
+.bcds-react-aria-Text.secondary {
+  color: var(--typography-color-secondary);
+}
+.bcds-react-aria-Text.secondaryInvert {
+  color: var(--typography-color-secondary-invert);
+}
+.bcds-react-aria-Text.disabled {
+  color: var(--typography-color-disabled);
+}
+.bcds-react-aria-Text.danger {
+  color: var(--typography-color-danger);
+}
diff --git a/packages/react-components/src/components/Text/Text.tsx b/packages/react-components/src/components/Text/Text.tsx
new file mode 100644
index 00000000..70a75057
--- /dev/null
+++ b/packages/react-components/src/components/Text/Text.tsx
@@ -0,0 +1,41 @@
+import {
+  Text as ReactAriaText,
+  TextProps as ReactAriaTextProps,
+} from "react-aria-components";
+
+import "./Text.css";
+
+export interface TextProps extends ReactAriaTextProps {
+  /* Sets text size, defaults to medium */
+  size?: "small" | "medium" | "large";
+  /* Sets text color, defaults to primary */
+  color?:
+    | "primary"
+    | "primaryInvert"
+    | "secondary"
+    | "secondaryInvert"
+    | "disabled"
+    | "danger";
+  /* If true, renders component without CSS class */
+  isUnstyled?: boolean;
+}
+
+export default function Text({
+  elementType = "span",
+  size = "medium",
+  color = "primary",
+  isUnstyled = false,
+  ...props
+}: TextProps) {
+  return (
+    <ReactAriaText
+      elementType={elementType}
+      className={
+        isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`
+      }
+      {...props}
+    >
+      {props.children}
+    </ReactAriaText>
+  );
+}
diff --git a/packages/react-components/src/components/Text/index.ts b/packages/react-components/src/components/Text/index.ts
new file mode 100644
index 00000000..246a4c44
--- /dev/null
+++ b/packages/react-components/src/components/Text/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Text";
+export type { TextProps } from "./Text";
diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts
index fdcd2fcd..36709786 100644
--- a/packages/react-components/src/components/index.ts
+++ b/packages/react-components/src/components/index.ts
@@ -13,6 +13,7 @@ export { default as Dialog, DialogTrigger } from "./Dialog";
 export { default as Footer, FooterLinks } from "./Footer";
 export { default as Form } from "./Form";
 export { default as Header } from "./Header";
+export { default as Heading } from "./Heading";
 export { default as InlineAlert } from "./InlineAlert";
 export { default as Link } from "./Link";
 export { default as Modal } from "./Modal";
@@ -35,6 +36,7 @@ export { default as SvgTooltipArrowUp } from "./Icons/SvgTooltipArrowUp";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";
+export { default as Text } from "./Text";
 export { default as TextArea } from "./TextArea";
 export { default as TextField } from "./TextField";
 export { default as Switch } from "./Switch";
diff --git a/packages/react-components/src/pages/TextPage/TextPage.tsx b/packages/react-components/src/pages/TextPage/TextPage.tsx
new file mode 100644
index 00000000..b92b3682
--- /dev/null
+++ b/packages/react-components/src/pages/TextPage/TextPage.tsx
@@ -0,0 +1,55 @@
+import { Heading, Text } from "@/components";
+
+export default function TextPage() {
+  return (
+    <>
+      <Heading level={2}>Headings and text</Heading>
+      <Text>
+        The Heading and Text components provide an easy way to populate sections
+        of content. They implement the B.C. Design System's typescale.
+      </Text>
+      <Heading level={3}>Headings</Heading>
+      <Text>
+        The Heading component supports standard HTML heading levels (H1 to H6).
+      </Text>
+      <Heading level={3}>Text size</Heading>
+      <Text>The text component supports 3 different sizes: </Text>
+      <ul>
+        <li>
+          <Text size="large">Large</Text>
+        </li>
+        <li>
+          <Text size="medium">Medium (default)</Text>
+        </li>
+        <li>
+          <Text size="small">Small</Text>
+        </li>
+      </ul>
+      <Heading level={4}>Text styling</Heading>
+      <Text>
+        The text component also supports standard text styling, like <b>bold</b>{" "}
+        and <i>italic</i>.
+      </Text>
+      <Heading level={4}>Text colour</Heading>
+      <Text>You can modify the colour of text via prop:</Text>
+      <ul>
+        <li>
+          <Text color="primary">Primary (default)</Text>
+        </li>
+        <li>
+          <Text color="secondary">Secondary</Text>
+        </li>
+        <li>
+          <Text color="disabled">Disabled</Text>
+        </li>
+        <li>
+          <Text color="danger">Danger</Text>
+        </li>
+      </ul>
+      <Text>
+        Inverted versions of the primary and secondary colours for use on dark
+        backgrounds are also supported.
+      </Text>
+    </>
+  );
+}
diff --git a/packages/react-components/src/pages/TextPage/index.ts b/packages/react-components/src/pages/TextPage/index.ts
new file mode 100644
index 00000000..296cb694
--- /dev/null
+++ b/packages/react-components/src/pages/TextPage/index.ts
@@ -0,0 +1,3 @@
+import TextPage from "./TextPage";
+
+export default TextPage;
diff --git a/packages/react-components/src/pages/index.ts b/packages/react-components/src/pages/index.ts
index 196bc8e2..c8639294 100644
--- a/packages/react-components/src/pages/index.ts
+++ b/packages/react-components/src/pages/index.ts
@@ -9,6 +9,7 @@ import ModalDialogPage from "./ModalDialog";
 import RadioGroupPage from "./RadioGroup";
 import SelectPage from "./Select";
 import TagGroupPage from "./TagGroup";
+import TextPage from "./TextPage";
 import TextAreaPage from "./TextArea";
 import TextFieldPage from "./TextField";
 import SwitchPage from "./Switch";
@@ -26,6 +27,7 @@ export {
   RadioGroupPage,
   SelectPage,
   TagGroupPage,
+  TextPage,
   TextAreaPage,
   TextFieldPage,
   SwitchPage,
diff --git a/packages/react-components/src/stories/Heading.mdx b/packages/react-components/src/stories/Heading.mdx
new file mode 100644
index 00000000..c57e26f0
--- /dev/null
+++ b/packages/react-components/src/stories/Heading.mdx
@@ -0,0 +1,61 @@
+{/* Heading.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as HeadingStories from "./Heading.stories";
+
+<Meta of={HeadingStories} />
+
+# Headings
+
+<Subtitle>Utility content for creating section headings</Subtitle>
+
+<Source
+  code={`import { Heading } from "@bcgov/design-system-react-components";`}
+  language="typescript"
+/>
+
+## Usage and resources
+
+Heading is a utility component that creates a text heading for a section of content. It renders a standard heading element (`<h1>` to `<h6>`), styled to align with the [B.C. Design System typescale](https://www2.gov.bc.ca/gov/content?id=72C2CD6E05494C84B9A072DD9C6A5342).
+
+## Controls
+
+<Canvas of={HeadingStories.HeadingTemplate} />
+<Controls of={HeadingStories.HeadingTemplate} />
+
+## Configuration
+
+Heading text is populated via the `children` slot.
+
+### Styling headings
+
+You can override the default styling of a heading by either:
+
+- Passing a `className` to apply your own CSS class
+- Setting the `isUnstyled` prop to render a heading without any additional CSS, allowing it to inherit its styles from its parent element
+
+<Canvas of={HeadingStories.UnstyledHeading} />
+
+Use the `color` prop to set the text colour, from the options defined in the design system colour palette:
+
+<Canvas of={HeadingStories.PrimaryInvert} />
+
+### Heading level
+
+Use the `level` prop to set the heading level. `level` expects a number from 1 to 6:
+
+<Canvas of={HeadingStories.Heading1} />
+<Canvas of={HeadingStories.Heading2} />
+<Canvas of={HeadingStories.Heading3} />
+<Canvas of={HeadingStories.Heading4} />
+<Canvas of={HeadingStories.Heading5} />
+<Canvas of={HeadingStories.Heading6} />
diff --git a/packages/react-components/src/stories/Heading.stories.tsx b/packages/react-components/src/stories/Heading.stories.tsx
new file mode 100644
index 00000000..6fe8a92f
--- /dev/null
+++ b/packages/react-components/src/stories/Heading.stories.tsx
@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Heading } from "../components";
+import { HeadingProps } from "../components/Heading";
+
+const meta = {
+  title: "Utility/Headings and text/Headings",
+  component: Heading,
+  parameters: { layout: "centered" },
+  argTypes: {
+    level: {
+      control: { type: "number" },
+      description: "Heading level, expects a number between 1 and 6",
+    },
+    children: {
+      control: { type: "object" },
+      description: "Populates heading text",
+    },
+    color: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "primaryInvert",
+          "secondary",
+          "secondaryInvert",
+          "disabled",
+          "danger",
+        ],
+      },
+    },
+    isUnstyled: {
+      control: { type: "boolean" },
+      description:
+        "Removes CSS class, allowing component to inherit its styles",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Overrides CSS class",
+    },
+  },
+} satisfies Meta<typeof Heading>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HeadingTemplate: Story = {
+  args: { level: 1, children: ["This is a heading"] },
+  render: ({ ...args }: HeadingProps) => <Heading {...args} />,
+};
+
+export const PrimaryInvert: Story = {
+  args: {
+    level: 2,
+    color: "primaryInvert",
+    children: ["Heading with inverted primary colour"],
+  },
+  render: ({ ...args }: HeadingProps) => (
+    <div
+      style={{
+        backgroundColor: "var(--surface-color-background-dark-blue)",
+        padding: "var(--layout-padding-small) var(--layout-padding-large)",
+      }}
+    >
+      <Heading {...args} />
+    </div>
+  ),
+};
+
+export const UnstyledHeading: Story = {
+  ...HeadingTemplate,
+  args: {
+    isUnstyled: true,
+    level: 1,
+    children: ["This heading is unstyled, and can inherit its styling"],
+  },
+};
+
+export const Heading1: Story = {
+  ...HeadingTemplate,
+  args: { level: 1, children: ["Heading 1"] },
+};
+
+export const Heading2: Story = {
+  ...HeadingTemplate,
+  args: { level: 2, children: ["Heading 2"] },
+};
+
+export const Heading3: Story = {
+  ...HeadingTemplate,
+  args: { level: 3, children: ["Heading 3"] },
+};
+
+export const Heading4: Story = {
+  ...HeadingTemplate,
+  args: { level: 4, children: ["Heading 4"] },
+};
+
+export const Heading5: Story = {
+  ...HeadingTemplate,
+  args: { level: 5, children: ["Heading 5"] },
+};
+
+export const Heading6: Story = {
+  ...HeadingTemplate,
+  args: { level: 6, children: ["Heading 6"] },
+};
diff --git a/packages/react-components/src/stories/Text.mdx b/packages/react-components/src/stories/Text.mdx
new file mode 100644
index 00000000..56cf3a7a
--- /dev/null
+++ b/packages/react-components/src/stories/Text.mdx
@@ -0,0 +1,66 @@
+{/* Text.mdx */}
+
+import {
+  Canvas,
+  Controls,
+  Meta,
+  Primary,
+  Source,
+  Story,
+  Subtitle,
+} from "@storybook/blocks";
+
+import * as TextStories from "./Text.stories";
+
+<Meta of={TextStories} />
+
+# Text
+
+<Subtitle>Utility component for populating text content</Subtitle>
+
+<Source
+  code={`import { Text } from "@bcgov/design-system-react-components";`}
+  language="typescript"
+/>
+
+## Usage and resources
+
+Text is a utility component used to create sections of text content within an interface. It is also used internally by other components.
+
+It is styled to align with the [B.C. Design System typescale](https://www2.gov.bc.ca/gov/content?id=72C2CD6E05494C84B9A072DD9C6A5342).
+
+## Controls
+
+<Canvas of={TextStories.TextTemplate} />
+<Controls of={TextStories.TextTemplate} />
+
+## Configuration
+
+Text content is populated via the `children` slot.
+
+By default, Text renders a `<span>`. Use the `elementType` prop to render a different HTML element.
+
+### Text size
+
+Use the `size` prop to toggle between small, medium (default) and large text sizes:
+
+<Canvas of={TextStories.SmallText} />
+<Canvas of={TextStories.MediumText} />
+<Canvas of={TextStories.LargeText} />
+
+### Styling text
+
+By default, Text is styled to align with the [B.C. Design System typescale](https://www2.gov.bc.ca/gov/content?id=72C2CD6E05494C84B9A072DD9C6A5342). If needed, you can override the default styling by either:
+
+- Passing a `className` to apply your own CSS class
+- Setting the `isUnstyled` prop to render text without any additional CSS, allowing it to inherit its styles from its parent element
+
+<Canvas of={TextStories.UnstyledText} />
+
+Use the `color` prop to set the text colour, from the options defined in the design system colour palette:
+
+<Canvas of={TextStories.DangerText} />
+<Canvas of={TextStories.DisabledText} />
+<Canvas of={TextStories.PrimaryInvert} />
+
+You can also use the `style` prop to apply inline CSS to text.
diff --git a/packages/react-components/src/stories/Text.stories.tsx b/packages/react-components/src/stories/Text.stories.tsx
new file mode 100644
index 00000000..9359de9d
--- /dev/null
+++ b/packages/react-components/src/stories/Text.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Text } from "../components";
+import { TextProps } from "../components/Text";
+
+const meta = {
+  title: "Utility/Headings and text/Text",
+  component: Text,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    children: {
+      control: { type: "object" },
+      description: "Populates the component's content",
+    },
+    elementType: {
+      control: { type: "text" },
+      description: "Defines the type of HTML element that Text renders",
+    },
+    color: {
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "primaryInvert",
+          "secondary",
+          "secondaryInvert",
+          "disabled",
+          "danger",
+        ],
+      },
+    },
+    isUnstyled: {
+      control: { type: "boolean" },
+      description:
+        "Removes CSS class, allowing component to inherit its styles",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Overrides CSS class",
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextTemplate: Story = {
+  args: { elementType: "span", children: ["This is some text"] },
+  render: ({ ...args }: TextProps) => <Text {...args} />,
+};
+
+export const SmallText: Story = {
+  args: { size: "small", children: ["This text uses the small size"] },
+};
+
+export const MediumText: Story = {
+  args: { size: "medium", children: ["This text uses the medium size"] },
+};
+
+export const LargeText: Story = {
+  args: { size: "large", children: ["This text uses the large size"] },
+};
+
+export const UnstyledText: Story = {
+  ...TextTemplate,
+  args: {
+    isUnstyled: true,
+    children: ["This text is unstyled, and can inherit its styling"],
+  },
+};
+
+export const DisabledText: Story = {
+  ...TextTemplate,
+  args: {
+    color: "disabled",
+    children: ["This text uses the 'disabled' colour"],
+  },
+  render: ({ ...args }: TextProps) => <Text {...args} aria-disabled="true" />,
+};
+
+export const DangerText: Story = {
+  ...TextTemplate,
+  args: { color: "danger", children: ["This text uses the 'danger' colour"] },
+};
+
+export const PrimaryInvert: Story = {
+  ...TextTemplate,
+  args: {
+    color: "primaryInvert",
+    children: ["This text uses the inverted primary colour"],
+  },
+  render: ({ ...args }: TextProps) => (
+    <div
+      style={{
+        backgroundColor: "var(--surface-color-background-dark-blue)",
+        padding: "var(--layout-padding-medium)",
+      }}
+    >
+      <Text {...args} />
+    </div>
+  ),
+};