Skip to content

Commit

Permalink
Merge pull request #547 from ably/typography-rewrite
Browse files Browse the repository at this point in the history 
[WEB-4122] Typography MDX rewrite, HTML preview addon
  • Loading branch information
@jamiehenson
jamiehenson authored Nov 20, 2024
2 parents 59b5863 + 2a92845 commit b9e0edc
Show file tree
Hide file tree
Showing 8 changed files with 873 additions and 257 deletions.
3 changes: 2 additions & 1 deletion .storybook/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
framework: {
name: "@storybook/react-vite",
options: {},
Expand All @@ -15,6 +15,7 @@ const config: StorybookConfig = {
"@storybook/addon-interactions",
"@storybook/addon-a11y",
"storybook-dark-mode",
"@whitespace/storybook-addon-html",
],
docs: {},
typescript: {
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"@whitespace/storybook-addon-html": "^6.1.1",
"autoprefixer": "^10.0.2",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
Expand All @@ -44,6 +45,7 @@
"msw": "2.6.1",
"msw-storybook-addon": "^2.0.2",
"prettier": "^3.2.5",
"react-syntax-highlighter": "^15.6.1",
"storybook": "^8.4.0",
"storybook-dark-mode": "^4.0.2",
"svg-sprite": "^2.0.4",
Expand Down
15 changes: 15 additions & 0 deletions src/core/Icon/__snapshots__/Icon.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2238,6 +2238,21 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
</div>
</div>
</div>
<div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
<code class="ui-text-code mb-8 block">
icon-gui-warning-fill
</code>
<div class="border inline-flex flex-0">
<div class="flex pi-checkered-bg">
<svg class="text-cool-black hover:text-active-orange"
style="width: 1.5rem; height: 1.5rem;"
>
<use xlink:href="#sprite-icon-gui-warning-fill">
</use>
</svg>
</div>
</div>
</div>
<div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
<code class="ui-text-code mb-8 block">
icon-gui-warning
Expand Down
5 changes: 5 additions & 0 deletions src/core/icons/icon-gui-warning-fill.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
242 changes: 142 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,116 @@
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 text-sub-header-xs",
},
{ 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 +120,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 +172,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 +198,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 +209,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 +239,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 b9e0edc

Please sign in to comment.