3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-09 16:07:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4865 from penpot/ladybenko-8347-storybook-controls

Browse source 
Use Storybook controls for stories
This commit is contained in:
Eva Marco 2024-07-11 13:06:56 +02:00 • committed by GitHub
commit 5ab7123566
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 231 additions and 662 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/ui/ds.cljs
View file

@ -6,11 +6,11 @@
(ns app.main.ui.ds
(:require
[app.main.ui.ds.foundations.heading :refer [heading*]]
[app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
[app.main.ui.ds.foundations.text :refer [text*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]]
[app.main.ui.ds.foundations.typography :refer [typography-list]]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography.text :refer [text*]]
[app.main.ui.ds.storybook :as sb]))
(def default

2
frontend/src/app/main/ui/ds/foundations/icon.clj → frontend/src/app/main/ui/ds/foundations/assets/icon.clj
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.icon
(ns app.main.ui.ds.foundations.assets.icon
(:require
[clojure.core :as c]
[cuerdas.core :as str]

8
frontend/src/app/main/ui/ds/foundations/icon.cljs → frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View file

@ -4,12 +4,12 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.icon
(ns app.main.ui.ds.foundations.assets.icon
(:refer-clojure :exclude [mask])
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl]
[app.main.ui.ds.foundations.icon :refer [collect-icons]])
[app.main.ui.ds.foundations.assets.icon :refer [collect-icons]])
(:require
[rumext.v2 :as mf]))
@ -279,10 +279,10 @@
(mf/defc icon*
{::mf/props :obj}
[{:keys [icon size class] :rest props}]
[{:keys [id size class] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
size-px (cond (= size "s") icon-size-s :else icon-size-m)
offset (/ (- icon-size-m size-px) 2)]
[:> "svg" props
[:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
[:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))

8
frontend/src/app/main/ui/ds/foundations/icon.mdx → frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
View file

@ -41,13 +41,13 @@ Assuming the namespace is required as `i`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.icon :as i]))
[app.main.ui.ds.foundations.assets.icon :as i]))
```
You can now use the icon IDs defined in the namespace:
```clj
[:> i/icon* {:icon i/pin}]
[:> i/icon* {:id i/pin}]
```
### Customizing colors
@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
component and set `color` to whatever value you prefer:
```clj
[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
```
```scss
@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
add an `aria-label` attribute to set a proper text:
```clj
[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
```
## Usage guidelines for design

0
frontend/src/app/main/ui/ds/foundations/icon.scss → frontend/src/app/main/ui/ds/foundations/assets/icon.scss
View file

52
frontend/src/app/main/ui/ds/foundations/icon.stories.jsx → frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
View file

@ -6,21 +6,31 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { icons } = Components.meta;
export default {
title: "Foundations/Icons",
component: Components.Icon,
};
const iconList = Object.entries(icons)
.map(([_, value]) => value)
.sort();
export const AllIcons = {
render: () => (
export default {
title: "Foundations/Assets/Icon",
component: Components.Icon,
argTypes: {
id: {
options: iconList,
control: { type: "select" },
},
size: {
options: ["m", "s"],
control: { type: "radio" },
},
},
};
export const All = {
render: ({ size }) => (
<StoryWrapper theme="default">
<StoryHeader>
<h1>All Icons</h1>
<p>Hover on an icon to see its ID</p>
<p>Hover on an icon to see its ID.</p>
</StoryHeader>
<StoryGrid>
{iconList.map((iconId) => (
@ -29,29 +39,43 @@ export const AllIcons = {
key={iconId}
style={{ color: "var(--color-accent-primary)" }}
>
<Icon icon={iconId} />
<Icon id={iconId} size={size} />
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
),
args: {
size: "m",
},
parameters: {
controls: { exclude: ["id", "size"] },
backgrounds: { disable: true },
},
};
export const Default = {
render: () => (
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<Icon icon={icons.Pin} />
<Icon id={id} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
},
parameters: {
controls: { exclude: ["size"] },
},
};
export const Small = {
render: () => (
export const CustomSize = {
render: ({ id, size, ...args }) => (
<StoryWrapper theme="default">
<Icon icon={icons.Pin} size="s" />
<Icon id={id} size={size} {...args} />
</StoryWrapper>
),
args: {
id: "pin",
size: "m",
},
};

2
frontend/src/app/main/ui/ds/foundations/raw_svg.clj → frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(ns app.main.ui.ds.foundations.assets.raw-svg
(:require
[clojure.core :as c]
[cuerdas.core :as str]

8
frontend/src/app/main/ui/ds/foundations/raw_svg.cljs → frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
View file

@ -4,11 +4,11 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.raw-svg
(ns app.main.ui.ds.foundations.assets.raw-svg
(:refer-clojure :exclude [mask])
(:require-macros
[app.common.data.macros :as dm]
[app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
[app.main.ui.ds.foundations.assets.raw-svg :refer [collect-raw-svgs]])
(:require
[rumext.v2 :as mf]))
@ -32,6 +32,6 @@
(mf/defc raw-svg*
{::mf/props :obj}
[{:keys [asset] :rest props}]
[{:keys [id] :rest props}]
[:> "svg" props
[:use {:href (dm/str "#asset-" asset)}]])
[:use {:href (dm/str "#asset-" id)}]])

2
frontend/src/app/main/ui/ds/foundations/raw_svg.mdx → frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx
View file

@ -20,7 +20,7 @@ For convenience, asset IDs are available in the component namespace.
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.raw-svg :as svg]))
[app.main.ui.ds.foundations.assets.raw-svg :as svg]))
```
```clj

34
frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx → frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx
View file

@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
Components.storybook;
const { svgs } = Components.meta;
export default {
title: "Foundations/RawSvg",
component: Components.RawSvg,
};
const assetList = Object.entries(svgs)
.map(([_, value]) => value)
.sort();
export const AllAssets = {
render: () => (
export default {
title: "Foundations/Assets/RawSvg",
component: Components.RawSvg,
argTypes: {
id: {
options: assetList,
control: { type: "select" },
},
},
};
export const All = {
render: ({}) => (
<StoryWrapper theme="light">
<StoryHeader>
<h1>All assets</h1>
<p>Hover on a asset to see its id.</p>
<h1>All SVG Assets</h1>
<p>Hover on an asset to see its ID.</p>
</StoryHeader>
<StoryGrid size="200">
{assetList.map((x) => (
<StoryGridCell key={x} title={x}>
<RawSvg asset={x} style={{ maxWidth: "100%" }} />
<RawSvg id={x} style={{ maxWidth: "100%" }} />
</StoryGridCell>
))}
</StoryGrid>
</StoryWrapper>
),
parameters: {
controls: { exclude: ["id"] },
backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
},
};
export const Default = {
render: () => (
render: ({ id, ...args }) => (
<StoryWrapper theme="default">
<RawSvg asset={svgs.BrandGitlab} width="200" />
<RawSvg id={id} {...args} width="200" />
</StoryWrapper>
),
args: {
id: "brand-gitlab",
},
};

54
frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
View file

@ -1,54 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook;
export default {
title: "Foundations/Heading",
component: Components.Heading,
};
export const Levels = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"1 / display"}>
<Heading level="1" typography="display">
h1 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"2 / display"}>
<Heading level="2" typography="display">
h2 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"3 / display"}>
<Heading level="3" typography="display">
h3 / display
</Heading>
</StoryGridRow>
</StoryWrapper>
),
};
export const HeadingTypography = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"1 / title-large"}>
<Heading level="1" typography="title-large">
h1 / title-large
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / title-medium"}>
<Heading level="1" typography="title-medium">
h1 / title-medium
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / code-font"}>
<Heading level="1" typography="code-font">
h1 / code-font
</Heading>
</StoryGridRow>
</StoryWrapper>
),
};

48
frontend/src/app/main/ui/ds/foundations/text.mdx
View file

@ -1,48 +0,0 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as TextStories from "./text.stories";
<Meta of={TextStories} />
# Texts
This component will add a text element to our code that will match the tag prop.
## Technical notes
This components accepts to props:
- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.).
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
You can check passed props to renderized components on hover `tag / typography`
### Using typography IDs
There are typography ID definitions you can use in your code rather than typing the
typography ID by hand.
**Using these IDs is recommended**.
Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.text :refer [text*]]
[app.main.ui.ds.foundations.typography :as t]))
```
You can now use the typography IDs defined in the namespace:
```clj
[:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
```
## Accesibility
There should only be one level 1 heading `<h1>` per page.
Headings are used to navigate the page and must follow the `<h1>` -> `<h2>` -> `<h3>` -> `<h4>` -> `<h5>` -> `<h6>` hierarchy.
For example, do not skip levels in the `<h1>` -> `<h3>` hierarchy if there is no `<h2>` in between.
We should not choose the heading level by its visual aspect.

54
frontend/src/app/main/ui/ds/foundations/text.stories.jsx
View file

@ -1,54 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Text } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook;
export default {
title: "Foundations/Text",
component: Components.Text,
};
export const TextTags = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title
</Text>
</StoryGridRow>
<StoryGridRow title={"span / title-large"}>
<Text tag="span" typography="title-large">
span / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"div / title-large"}>
<Text tag="div" typography="title-large">
div / Title large
</Text>
</StoryGridRow>
</StoryWrapper>
),
};
export const TypographyParagraph = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"p / title-medium"}>
<Text tag="p" typography="title-medium">
p / Title medium
</Text>
</StoryGridRow>
<StoryGridRow title={"p / code-font"}>
<Text tag="p" typography="code-font">
p / Code font
</Text>
</StoryGridRow>
</StoryWrapper>
),
};

1
frontend/src/app/main/ui/ds/foundations/typography.cljs
View file

@ -18,7 +18,6 @@
(def ^:typography-id body-small "body-small")
(def ^:typography-id code-font "code-font")
(def typography-list #{display
title-large
title-medium

135
frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
View file

@ -1,135 +0,0 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
const typographyList = {
display: {
name: "Display",
id: "display",
size: "36px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleLarge: {
name: "Title large",
id: "title-large",
size: "24px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleMedium: {
name: "Title medium",
id: "title-medium",
size: "20px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
titleSmall: {
name: "Title small",
id: "title-small",
size: "14px",
weight: "400",
line: "1.2",
uppercase: false,
font: "Work Sans",
},
headlineLarge: {
name: "Headline large",
id: "headline-large",
size: "18px",
weight: "400",
line: "1.4",
uppercase: true,
font: "Work Sans",
},
headlineMedium: {
name: "Headline medium",
id: "headline-medium",
size: "16px",
weight: "400",
line: "1.4",
uppercase: true,
font: "Work Sans",
},
headlineSmall: {
name: "Headline small",
id: "headline-small",
size: "12px",
weight: "500",
line: "1.2",
uppercase: true,
font: "Work Sans",
},
bodyLarge: {
name: "Body large",
id: "body-large",
size: "16px",
weight: "400",
line: "1.4",
uppercase: false,
font: "Work Sans",
},
bodyMedium: {
name: "Body medium",
id: "body-medium",
size: "14px",
weight: "400",
line: "1.3",
uppercase: false,
font: "Work Sans",
},
bodySmall: {
name: "Body small",
id: "body-small",
size: "12px",
weight: "400",
line: "1.3",
uppercase: false,
font: "Work Sans",
},
codeFont: {
name: "Code font",
id: "code-font",
size: "12px",
weight: "400",
line: "1.2",
uppercase: false,
font: "Roboto Mono",
},
};
export default {
title: "Foundations/Typography",
component: Components.StoryHeader,
};
export const AllTypography = {
render: () => (
<StoryWrapper theme="default">
<StoryHeader>
<h1>All Typography</h1>
<p>Hover on a heading to see its ID</p>
</StoryHeader>
{Object.values(typographyList).map(
({ id, name, size, weight, line, font }) => (
<StoryGridRow title={id} key={id}>
<Heading level="1" typography={id}>
{name} - {weight} - {size}/{line} {font}
</Heading>
</StoryGridRow>
),
)}
</StoryWrapper>
),
parameters: {
backgrounds: { disable: true },
},
};

3
frontend/src/app/main/ui/ds/foundations/heading.cljs → frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.heading
(ns app.main.ui.ds.foundations.typography.heading
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl])
@ -25,7 +25,6 @@
(assert (or (valid-level? level)
(nil? level))
(dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
(assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown typography"))

6
frontend/src/app/main/ui/ds/foundations/heading.mdx → frontend/src/app/main/ui/ds/foundations/typography/heading.mdx
View file

@ -11,7 +11,7 @@ This component will add a heading tag element to our code.
This components accepts to props:
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
You can check passed props to renderized components on hover `level / typography`;
@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.heading :refer [heading*]]
[app.main.ui.ds.foundations.typography :as t]))
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
```
You can now use the typography IDs defined in the namespace:

2
frontend/src/app/main/ui/ds/foundations/heading.scss → frontend/src/app/main/ui/ds/foundations/typography/heading.scss
View file

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "../typography.scss" as t;
@use "../../typography.scss" as t;
.display-typography {
@include t.use-typography("display");

38
frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx Normal file
View file

@ -0,0 +1,38 @@
import * as React from "react";
import Components from "@target/components";
const { Heading } = Components;
const { StoryWrapper } = Components.storybook;
const { typography } = Components.meta;
const typographyIds = typography.sort();
export default {
title: "Foundations/Typography/Heading",
component: Components.Heading,
argTypes: {
level: {
options: [1, 2, 3, 4, 5, 6],
control: { type: "select" },
},
typography: {
options: typographyIds,
control: { type: "select" },
},
},
};
export const AnyHeading = {
name: "Heading",
render: ({ level, typography, ...args }) => (
<StoryWrapper theme="default">
<Heading level={level} typography={typography} {...args}>
Lorem ipsum
</Heading>
</StoryWrapper>
),
args: {
level: 1,
typography: "display",
},
};

8
frontend/src/app/main/ui/ds/foundations/text.cljs → frontend/src/app/main/ui/ds/foundations/typography/text.cljs
View file

@ -4,7 +4,7 @@
;;
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.ds.foundations.text
(ns app.main.ui.ds.foundations.typography.text
(:require-macros
[app.common.data.macros :as dm]
[app.main.style :as stl])
@ -17,12 +17,12 @@
(mf/defc text*
{::mf/props :obj}
[{:keys [tag typography children class] :rest props}]
[{:keys [as typography children class] :rest props}]
(assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown typography"))
(let [tag (or tag "p")
(let [as (if (or (empty? as) (nil? as)) "p" as)
class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
:title-large-typography (= typography t/title-large)
:title-medium-typography (= typography t/title-medium)
@ -35,5 +35,5 @@
:body-small-typography (= typography t/body-small)
:code-font-typography (= typography t/code-font)))
props (mf/spread-props props {:class class})]
[:> tag props
[:> as props
children]))

31
frontend/src/app/main/ui/ds/foundations/typography/text.mdx Normal file
View file

@ -0,0 +1,31 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as TextStories from "./text.stories";
<Meta of={TextStories} />
# Texts
This component will add a text element to our code that will match the tag prop.
## Technical notes
### Using typography IDs
There are typography ID definitions you can use in your code rather than typing the
typography ID by hand.
**Using these IDs is recommended**.
Assuming the namespace of the typography is required as `t`:
```clj
(ns app.main.ui.foo
(:require
[app.main.ui.ds.foundations.typography :as t]
[app.main.ui.ds.foundations.typography.text :refer [text*]]))
```
You can now use the typography IDs defined in the namespace:
```clj
[:> text* {:typography t/title-large :as "p"} "Welcome to Penpot"]
```

2
frontend/src/app/main/ui/ds/foundations/text.scss → frontend/src/app/main/ui/ds/foundations/typography/text.scss
View file

@ -3,7 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC
@use "../typography.scss" as t;
@use "../../typography.scss" as t;
.display-typography {
@include t.use-typography("display");

46
frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx Normal file
View file

@ -0,0 +1,46 @@
import * as React from "react";
import Components from "@target/components";
const { Text } = Components;
const { StoryWrapper } = Components.storybook;
const { typography } = Components.meta;
const typographyIds = typography.sort();
export default {
title: "Foundations/Typography/Text",
component: Text,
argTypes: {
typography: {
options: typographyIds,
control: { type: "select" },
},
},
};
export const Default = {
render: ({ typography, ...args }) => (
<StoryWrapper theme="default">
<Text typography={typography} {...args}>
Lorem ipsum
</Text>
</StoryWrapper>
),
args: {
typography: "display",
},
};
export const CustomTag = {
render: ({ typography, ...args }) => (
<StoryWrapper theme="default">
<Text typography={typography} {...args}>
Lorem ipsum
</Text>
</StoryWrapper>
),
args: {
typography: "display",
as: "li",
},
};

29
frontend/src/app/main/ui/ds/foundations/typography.mdx → frontend/src/app/main/ui/ds/foundations/typography/typography.mdx
View file

@ -1,8 +1,7 @@
import { Canvas, Meta, Story } from "@storybook/blocks";
import * as TypographyStories from "./typography.stories";
import { Canvas, Meta } from "@storybook/blocks";
import Components from "@target/components";
<Meta of={TypographyStories} />
<Meta title="Foundations/Typography" />
# Typography
@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements.
Typographic colours are used in text elements such as headers
and body and in the various components that make up the tool...
The colours used in typography are the Foreground colours such
The colours used in typography are the Foreground colours such
`--color-foreground-primary` or `--color-foreground-secondary`
but different colours can be applied in specific component
applications with their own styles, such as buttons.
@ -55,7 +54,7 @@ for exceptions based on the size of the components.
Hero style text for transitional pages (Login). If too large use large title in narrow windows.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
<Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
</Canvas>
### Title large `title-large`
@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
(medium) in narrow windows.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
<Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
</Canvas>
### Title medium `title-medium`
@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
of buttons and other medium controls. Ideal for page header layout.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Title small `title-small`
@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
Uses the same size as body (large).
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
<Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
</Canvas>
## Headline
@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
### Headline large `headline-large`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Headline medium `headline-medium`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Headline small `headline-small`
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
<Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
</Canvas>
## Body
@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
Generic content.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
<Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
</Canvas>
### Body medium `body-medium`
@ -123,7 +122,7 @@ Generic content.
Default UI font. Most commonly used for body text.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
<Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
</Canvas>
@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
Use for single line scenarios, as the small size does not meet accessibility requirements.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
<Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
</Canvas>
## Code font `code-font`
@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
Default style for rendering code blocks.
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
<Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
<Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
</Canvas>
## Fonts