From 791d811209c1ab6f4458d59b0341ac902f8a2ab3 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Tue, 19 Nov 2024 16:59:08 +0000 Subject: [PATCH] chore: port Typography MDX to stories --- .../styles/Typography.stories.tsx} | 239 ++++++----- .../__snapshots__/Typography.stories.tsx.snap | 386 ++++++++++++++++++ tailwind.config.js | 2 +- 3 files changed, 526 insertions(+), 101 deletions(-) rename src/{pages/Typography.mdx => core/styles/Typography.stories.tsx} (50%) create mode 100644 src/core/styles/__snapshots__/Typography.stories.tsx.snap diff --git a/src/pages/Typography.mdx b/src/core/styles/Typography.stories.tsx similarity index 50% rename from src/pages/Typography.mdx rename to src/core/styles/Typography.stories.tsx index dd5dc424b..a525bb569 100644 --- a/src/pages/Typography.mdx +++ b/src/core/styles/Typography.stories.tsx @@ -1,90 +1,113 @@ -import { Unstyled, Meta } from "@storybook/blocks"; +import clsx from "clsx"; +import React from "react"; - +export default { + title: "CSS/Typography", +}; - -
-

Typography

-

- Type definitions do not include margin as it can be contextual. Figma - and the below list include recommended margins. -

-

- The below list is created with ui-text-* helpers which include - properties beyond the standard{" "} - font-size and{" "} - line-height that text-* - includes. -

-
-
-

- Title - this is a title -

-
-

H1 - this is an h1

-
-

H2 - this is an h2

-
-

H3 - this is an h3

-
-

H4 - this is an h4

-
-

H5 - this is an h5

-
-

Paragraph 1

-
-

Paragraph 1 (strong)

-
-

Paragraph 2

-
-

Paragraph 2 (strong)

-
-

Paragraph 3

-
-

Paragraph 3 (strong)

-
-

This is a figure caption style

-
+const styles = { + primary: [ + { label: "Title XL", className: "ui-text-title text-title-xl" }, + { label: "Title", className: "ui-text-title" }, + { label: "Title XS", className: "ui-text-title text-title-xs" }, + { label: "h1 XL", className: "ui-text-h1 text-h1-xl" }, + { label: "h1", className: "ui-text-h1" }, + { label: "h1 XS", className: "ui-text-h1 text-h1-xs" }, + { label: "h2 XL", className: "ui-text-h2 text-h2-xl" }, + { label: "h2", className: "ui-text-h2" }, + { label: "h2 XS", className: "ui-text-h2 text-h2-xs" }, + { label: "h3", className: "ui-text-h3" }, + { label: "h4", className: "ui-text-h4" }, + { label: "h5", className: "ui-text-h5" }, + { label: "p1", className: "ui-text-p1" }, + { label: "p2", className: "ui-text-p2" }, + { label: "p3", className: "ui-text-p3" }, + { label: "p4", className: "ui-text-p4" }, + ], + decorative: [ + { label: "Sub-header", className: "ui-text-sub-header" }, + { label: "Sub-header XS", className: "ui-text-sub-header" }, + { label: "Overline 1", className: "ui-text-overline1" }, + { label: "Overline 2", className: "ui-text-overline2" }, + ], + gui: [ + { label: "Button label 1", className: "ui-text-button1" }, + { label: "Button label 2", className: "ui-text-button2" }, + { label: "Button label 3", className: "ui-text-button3" }, + { label: "Button label 4", className: "ui-text-button4" }, + { label: "Menu label 1", className: "ui-text-menu1" }, + { label: "Menu label 2", className: "ui-text-menu2" }, + { label: "Menu label 3", className: "ui-text-menu3" }, + { label: "Menu label 4", className: "ui-text-menu4" }, + { label: "Link", className: "ui-text" }, + ], + code: [ + { label: "Code 1", className: "ui-text-code" }, + { label: "Code 2", className: "ui-text-code2" }, + ], +}; -

Quote

-
-

Sub-header

-
-

Overline 1

-
-

Overline 2

-
-

Menu label 1

-
-

Menu label 1 (strong)

-
-

Menu label 2

-
-

Menu label 2 (strong)

-
-

Menu label 3

-
-

Menu label 3 (strong)

-
-

Code 1 font for code blocks

-
-

Code 2 font for code blocks

-
-

- Text, then styling for{" "} - inline code, within - paragraphs. -

-
+const fontCell = (style) => ( +
+
{style.label}
+ + {style.className + .split(" ") + .map((className) => `.${className}`) + .join("")} + +
+); +export const Primary = { + render: () => ( +
+ {styles.primary.map((style) => fontCell(style))}
+ ), + parameters: { + docs: { + description: { + story: + "CSS classes for headings and paragraphs. Title, H1 and H2 have three sizes: XL, default, and XS - the default classes responsively adapt to the screen size, so the variant visible here will correspond to that.", + }, + }, + }, +}; - {" "} +export const Decorative = { + render: () => ( +
+ {styles.decorative.map((style) => fontCell(style))} +
+ ), +}; + +export const GUI = { + render: () => ( +
+ {styles.gui.map((style) => fontCell(style))} +
+ ), +}; - {" "} +export const Code = { + render: () => ( +
+ {styles.code.map((style) => fontCell(style))} +
+ ), +}; -
+export const Links = { + render: () => ( + <>

Links

The default text color is inherited from the surrounding text. @@ -94,27 +117,45 @@ import { Unstyled, Meta } from "@storybook/blocks";

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia - nostra, per inceptos himenaeos. + nostra,{" "} + + {" "} + per inceptos himenaeos + + .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia - nostra, per inceptos himenaeos. + nostra,{" "} + + {" "} + per inceptos himenaeos + + .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia - nostra per inceptos himenaeos. + nostra{" "} + + per inceptos himenaeos + + .

- + + ), +}; -
+export const Lists = { + render: () => ( + <>

Lists

Note that lists support having li items and li items with children, @@ -128,8 +169,8 @@ import { Unstyled, Meta } from "@storybook/blocks"; This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. - Maecenas faucibus, diam sit amet sollicitudin pellentesque, est - nulla pellentesque sapien. + Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla + pellentesque sapien.

  • @@ -154,8 +195,8 @@ import { Unstyled, Meta } from "@storybook/blocks"; This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. - Maecenas faucibus, diam sit amet sollicitudin pellentesque, est - nulla pellentesque sapien. + Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla + pellentesque sapien.

@@ -165,15 +206,15 @@ import { Unstyled, Meta } from "@storybook/blocks"; This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. - Maecenas faucibus, diam sit amet sollicitudin pellentesque, est - nulla pellentesque sapien. + Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla + pellentesque sapien.

  1. - Pellentesque consequat elit eget tristique sagittis. Etiam et - erat et lorem elementum commodo. Aenean congue diam a nibh - accumsan tincidunt. + Pellentesque consequat elit eget tristique sagittis. Etiam et erat + et lorem elementum commodo. Aenean congue diam a nibh accumsan + tincidunt.

    1. @@ -195,12 +236,10 @@ import { Unstyled, Meta } from "@storybook/blocks"; This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. - Maecenas faucibus, diam sit amet sollicitudin pellentesque, est - nulla pellentesque sapien. + Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla + pellentesque sapien.

      - - - -
- + + ), +}; diff --git a/src/core/styles/__snapshots__/Typography.stories.tsx.snap b/src/core/styles/__snapshots__/Typography.stories.tsx.snap new file mode 100644 index 000000000..9ab4a8ac5 --- /dev/null +++ b/src/core/styles/__snapshots__/Typography.stories.tsx.snap @@ -0,0 +1,386 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CSS/Typography Code smoke-test 1`] = ` +
+
+
+ Code 1 +
+ + .ui-text-code + +
+
+
+ Code 2 +
+ + .ui-text-code2 + +
+
+`; + +exports[`CSS/Typography Decorative smoke-test 1`] = ` +
+
+
+ Sub-header +
+ + .ui-text-sub-header + +
+
+
+ Sub-header XS +
+ + .ui-text-sub-header + +
+
+
+ Overline 1 +
+ + .ui-text-overline1 + +
+
+
+ Overline 2 +
+ + .ui-text-overline2 + +
+
+`; + +exports[`CSS/Typography GUI smoke-test 1`] = ` +
+
+
+ Button label 1 +
+ + .ui-text-button1 + +
+
+
+ Button label 2 +
+ + .ui-text-button2 + +
+
+
+ Button label 3 +
+ + .ui-text-button3 + +
+
+
+ Button label 4 +
+ + .ui-text-button4 + +
+
+
+ Menu label 1 +
+ + .ui-text-menu1 + +
+
+
+ Menu label 2 +
+ + .ui-text-menu2 + +
+
+
+ Menu label 3 +
+ + .ui-text-menu3 + +
+
+
+ Menu label 4 +
+ + .ui-text-menu4 + +
+
+
+ Link +
+ + .ui-text + +
+
+`; + +exports[`CSS/Typography Links smoke-test 1`] = ` +

+ Links +

+

+ The default text color is inherited from the surrounding text. +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + + per inceptos himenaeos + + . +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + + per inceptos himenaeos + + . +

+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra + + per inceptos himenaeos + + . +

+
+
+`; + +exports[`CSS/Typography Lists smoke-test 1`] = ` +

+ Lists +

+

+ Note that lists support having li items and li items with children, while keeping the same margin (in these examples, the ordered list has paragraphs). +

+
+

+ Unordered +

+

+ This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien. +

+ +

+ This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien. +

+
+
+

+ Ordered +

+

+ This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien. +

+
    +
  1. +

    + Pellentesque consequat elit eget tristique sagittis. Etiam et erat et lorem elementum commodo. Aenean congue diam a nibh accumsan tincidunt. +

    +
      +
    1. +

      + In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien. +

      +
        +
      1. +

        + Etiam et erat et lorem elementum commodo. +

        +
        2. +
      +
      2. +
    +
    2. +
+

+ This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien. +

+
+`; + +exports[`CSS/Typography Primary smoke-test 1`] = ` +
+
+
+ Title XL +
+ + .ui-text-title.text-title-xl + +
+
+
+ Title +
+ + .ui-text-title + +
+
+
+ Title XS +
+ + .ui-text-title.text-title-xs + +
+
+
+ h1 XL +
+ + .ui-text-h1.text-h1-xl + +
+
+
+ h1 +
+ + .ui-text-h1 + +
+
+
+ h1 XS +
+ + .ui-text-h1.text-h1-xs + +
+
+
+ h2 XL +
+ + .ui-text-h2.text-h2-xl + +
+
+
+ h2 +
+ + .ui-text-h2 + +
+
+
+ h2 XS +
+ + .ui-text-h2.text-h2-xs + +
+
+
+ h3 +
+ + .ui-text-h3 + +
+
+
+ h4 +
+ + .ui-text-h4 + +
+
+
+ h5 +
+ + .ui-text-h5 + +
+
+
+ p1 +
+ + .ui-text-p1 + +
+
+
+ p2 +
+ + .ui-text-p2 + +
+
+
+ p3 +
+ + .ui-text-p3 + +
+
+
+ p4 +
+ + .ui-text-p4 + +
+
+`; diff --git a/tailwind.config.js b/tailwind.config.js index 119addbac..284927569 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,5 @@ module.exports = { - content: ["./src/**/*.{js,ts,tsx,mdx,stories.tsx,json}"], + content: ["./src/**/*.{js,ts,tsx,stories.tsx,json}"], safelist: [{ pattern: /^hljs.*/ }], theme: { screens: {