Skip to content

Commit

Permalink
chore: port Typography MDX to stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamiehenson
jamiehenson committed Nov 19, 2024
1 parent 83899c6 commit 791d811
Show file tree
Hide file tree
Showing 3 changed files with 526 additions and 101 deletions.
239 changes: 139 additions & 100 deletions src/pages/Typography.mdx → src/core/styles/Typography.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,113 @@
import { Unstyled, Meta } from "@storybook/blocks";
import clsx from "clsx";
import React from "react";

<Meta title="Brand/Typography" />
export default {
title: "CSS/Typography",
};

<Unstyled>
<section id="section-typography" className="mb-64">
<h1 className="ui-text-h1 mb-32">Typography</h1>
<p className="ui-text-p1 mb-32">
Type definitions do not include margin as it can be contextual. Figma
and the below list include recommended margins.
</p>
<p className="ui-text-p1 mb-32">
The below list is created with ui-text-* helpers which include
properties beyond the standard{" "}
<code className="ui-inline-code">font-size</code> and{" "}
<code className="ui-inline-code">line-height</code> that text-*
includes.
</p>
<div className="mb-40">
<hr className="m-0" />
<p className="ui-text-title mt-64 mb-40 xs:mt-80 xs:mb-32 xl:mt-96 xl:mb-32">
Title - this is a title
</p>
<hr className="m-0" />
<p className="ui-text-h1 mb-40">H1 - this is an h1</p>
<hr className="m-0" />
<p className="ui-text-h2 mb-36">H2 - this is an h2</p>
<hr className="m-0" />
<p className="ui-text-h3 mb-24">H3 - this is an h3</p>
<hr className="m-0" />
<p className="ui-text-h4 mb-16">H4 - this is an h4</p>
<hr className="m-0" />
<p className="ui-text-h5 mb-16">H5 - this is an h5</p>
<hr className="m-0" />
<p className="ui-text-p1 mb-32">Paragraph 1</p>
<hr className="m-0" />
<p className="ui-text-p1 font-bold mb-32">Paragraph 1 (strong)</p>
<hr className="m-0" />
<p className="ui-text-p2 mb-24">Paragraph 2</p>
<hr className="m-0" />
<p className="ui-text-p2 font-bold mb-24">Paragraph 2 (strong)</p>
<hr className="m-0" />
<p className="ui-text-p3 mb-24">Paragraph 3</p>
<hr className="m-0" />
<p className="ui-text-p3 font-bold mb-24">Paragraph 3 (strong)</p>
<hr className="m-0" />
<p className="ui-figcaption mb-16">This is a figure caption style</p>
<hr className="m-0" />
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" },
],
};

<p className="ui-text-quote mb-24">Quote</p>
<hr className="m-0" />
<p className="ui-text-sub-header mb-40 xs:mb-48">Sub-header</p>
<hr className="m-0" />
<p className="ui-text-overline1 mb-12">Overline 1</p>
<hr className="m-0" />
<p className="ui-text-overline2 mb-8">Overline 2</p>
<hr className="m-0" />
<p className="ui-text-menu1">Menu label 1</p>
<hr className="m-0" />
<p className="ui-text-menu1 font-bold">Menu label 1 (strong)</p>
<hr className="m-0" />
<p className="ui-text-menu2">Menu label 2</p>
<hr className="m-0" />
<p className="ui-text-menu2 font-bold">Menu label 2 (strong)</p>
<hr className="m-0" />
<p className="ui-text-menu3">Menu label 3</p>
<hr className="m-0" />
<p className="ui-text-menu3 font-bold">Menu label 3 (strong)</p>
<hr className="m-0" />
<p className="ui-text-code">Code 1 font for code blocks</p>
<hr className="m-0" />
<p className="ui-text-code2">Code 2 font for code blocks</p>
<hr className="m-0" />
<p className="ui-text-p1 mt-12 mb-12">
Text, then styling for{" "}
<span className="ui-text-code-inline">inline code</span>, within
paragraphs.
</p>
<hr className="m-0" />
const fontCell = (style) => (
<div
key={style.label}
className={clsx(
"rounded-lg p-16 ui-shadow-lg-soft flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000",
style.className,
)}
>
<div>{style.label}</div>
<code className="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
{style.className
.split(" ")
.map((className) => `.${className}`)
.join("")}
</code>
</div>
);

export const Primary = {
render: () => (
<div className="grid sm:grid-cols-3 gap-16">
{styles.primary.map((style) => fontCell(style))}
</div>
),
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: () => (
<div className="grid sm:grid-cols-3 gap-16">
{styles.decorative.map((style) => fontCell(style))}
</div>
),
};

export const GUI = {
render: () => (
<div className="grid sm:grid-cols-3 gap-16">
{styles.gui.map((style) => fontCell(style))}
</div>
),
};

{" "}
export const Code = {
render: () => (
<div className="grid grid-cols-2 gap-16">
{styles.code.map((style) => fontCell(style))}
</div>
),
};

<div className="mb-40">
export const Links = {
render: () => (
<>
<h3 className="ui-text-h2 mb-24">Links</h3>
<p className="ui-text-p1 mb-24">
The default text color is inherited from the surrounding text.
Expand All @@ -94,27 +117,45 @@ import { Unstyled, Meta } from "@storybook/blocks";
<p className="ui-text-p1 text-charcoal-grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, <a href="/xyz" className="ui-link"> per inceptos himenaeos</a>.
nostra,{" "}
<a href="/xyz" className="ui-link">
{" "}
per inceptos himenaeos
</a>
.
</p>
</div>
<div className="p-16 mb-16 mr-16 border rounded bg-cool-black">
<p className="ui-text-p1 text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, <a href="/123" className="ui-link"> per inceptos himenaeos</a>.
nostra,{" "}
<a href="/123" className="ui-link">
{" "}
per inceptos himenaeos
</a>
.
</p>
</div>
<div className="p-16 mb-16 mr-16 border rounded bg-jazzy-pink">
<p className="ui-text-p1 text-charcoal-grey">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Class aptent taciti sociosqu ad litora torquent per conubia
nostra <a href="/123" className="ui-link-neutral">per inceptos himenaeos</a>.
nostra{" "}
<a href="/123" className="ui-link-neutral">
per inceptos himenaeos
</a>
.
</p>
</div>
</div>
</div>
</>
),
};

<div className="mb-40">
export const Lists = {
render: () => (
<>
<h3 className="ui-text-h2 mb-24">Lists</h3>
<p className="ui-text-p1 mb-24">
Note that lists support having li items and li items with children,
Expand All @@ -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.
</p>
<ul className="ui-unordered-list">
<li>
Expand All @@ -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.
</p>
</div>

Expand All @@ -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.
</p>
<ol className="ui-ordered-list">
<li>
<p>
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.
</p>
<ol>
<li>
Expand All @@ -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.
</p>
</div>

</div>

</section>
</Unstyled>
</>
),
};
Loading

0 comments on commit 791d811

Please sign in to comment.