mirror of
https://github.com/penpot/penpot.git
synced 2025-07-09 05:47:17 +02:00
Merge pull request #4865 from penpot/ladybenko-8347-storybook-controls
Use Storybook controls for stories
This commit is contained in:
commit
5ab7123566
27 changed files with 231 additions and 662 deletions
|
@ -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
|
||||
|
|
|
@ -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]
|
|
@ -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}]]))
|
|
@ -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
|
|
@ -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",
|
||||
},
|
||||
};
|
|
@ -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]
|
|
@ -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)}]])
|
|
@ -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
|
|
@ -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",
|
||||
},
|
||||
};
|
|
@ -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>
|
||||
),
|
||||
};
|
|
@ -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.
|
|
@ -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>
|
||||
),
|
||||
};
|
|
@ -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
|
||||
|
|
|
@ -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 },
|
||||
},
|
||||
};
|
|
@ -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"))
|
||||
|
|
@ -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:
|
|
@ -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");
|
|
@ -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",
|
||||
},
|
||||
};
|
|
@ -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
31
frontend/src/app/main/ui/ds/foundations/typography/text.mdx
Normal 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"]
|
||||
```
|
|
@ -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");
|
|
@ -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",
|
||||
},
|
||||
};
|
|
@ -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
|
Loading…
Add table
Add a link
Reference in a new issue