mirror of
https://github.com/penpot/penpot.git
synced 2025-01-19 21:22:31 -05:00
Merge pull request #4857 from penpot/eva-add-text-component-to-storybook
✨ Add text component to storybook
This commit is contained in:
Belén Albeza
GitHub
commit
7f6bfacff1
7 changed files with 182 additions and 29 deletions
|
|
@ -9,7 +9,7 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.typography :refer [typography-list]]
|
||||
[app.main.ui.ds.foundations.typography :as t]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn- valid-level? [value]
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
(contains? number-set (dm/str value))))
|
||||
|
||||
(defn- valid-typography? [value]
|
||||
(contains? typography-list value))
|
||||
(contains? t/typography-list value))
|
||||
|
||||
(mf/defc heading*
|
||||
{::mf/props :obj}
|
||||
|
|
@ -31,17 +31,17 @@
|
|||
|
||||
(let [level (or level "1")
|
||||
tag (dm/str "h" level)
|
||||
class (dm/str (or class "") " " (stl/css-case :display-typography (= typography "display")
|
||||
:title-large-typography (= typography "title-large")
|
||||
:title-medium-typography (= typography "title-medium")
|
||||
:title-small-typography (= typography "title-small")
|
||||
:headline-large-typography (= typography "headline-large")
|
||||
:headline-medium-typography (= typography "headline-medium")
|
||||
:headline-small-typography (= typography "headline-small")
|
||||
:body-large-typography (= typography "body-large")
|
||||
:body-medium-typography (= typography "body-medium")
|
||||
:body-small-typography (= typography "body-small")
|
||||
:code-font-typography (= typography "code-font")))
|
||||
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)
|
||||
:title-small-typography (= typography t/title-small)
|
||||
:headline-large-typography (= typography t/headline-large)
|
||||
:headline-medium-typography (= typography t/headline-medium)
|
||||
:headline-small-typography (= typography t/headline-small)
|
||||
:body-large-typography (= typography t/body-large)
|
||||
:body-medium-typography (= typography t/body-medium)
|
||||
:body-small-typography (= typography t/body-small)
|
||||
:code-font-typography (= typography t/code-font)))
|
||||
props (mf/spread-props props {:class class})]
|
||||
[:> tag props
|
||||
children]))
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ This components accepts to props:
|
|||
|
||||
You can check passed props to renderized components on hover `level / typography`;
|
||||
|
||||
|
||||
### Using typography IDs
|
||||
|
||||
There are typography ID definitions you can use in your code rather than typing the
|
||||
|
|
|
|||
|
|
@ -9,29 +9,31 @@
|
|||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.typography :refer [typography-list]]
|
||||
[app.main.ui.ds.foundations.typography :as t]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn- valid-typography? [value]
|
||||
(contains? typography-list value))
|
||||
(contains? t/typography-list value))
|
||||
|
||||
(mf/defc text*
|
||||
{::mf/props :obj}
|
||||
[{:keys [tag typography children] :rest props}]
|
||||
[{:keys [tag typography children class] :rest props}]
|
||||
|
||||
(assert (valid-typography? (dm/str typography))
|
||||
(dm/str typography " is an unknown typography"))
|
||||
|
||||
(let [props (mf/spread-props props {:class (stl/css-case :display-typography (= typography "display")
|
||||
:title-large-typography (= typography "title-large")
|
||||
:title-medium-typography (= typography "title-medium")
|
||||
:title-small-typography (= typography "title-small")
|
||||
:headline-large-typography (= typography "headline-large")
|
||||
:headline-medium-typography (= typography "headline-medium")
|
||||
:headline-small-typography (= typography "headline-small")
|
||||
:body-large-typography (= typography "body-large")
|
||||
:body-medium-typography (= typography "body-medium")
|
||||
:body-small-typography (= typography "body-small")
|
||||
:code-font-typography (= typography "code-font"))})]
|
||||
(let [tag (or tag "p")
|
||||
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)
|
||||
:title-small-typography (= typography t/title-small)
|
||||
:headline-large-typography (= typography t/headline-large)
|
||||
:headline-medium-typography (= typography t/headline-medium)
|
||||
:headline-small-typography (= typography t/headline-small)
|
||||
:body-large-typography (= typography t/body-large)
|
||||
:body-medium-typography (= typography t/body-medium)
|
||||
:body-small-typography (= typography t/body-small)
|
||||
:code-font-typography (= typography t/code-font)))
|
||||
props (mf/spread-props props {:class class})]
|
||||
[:> tag props
|
||||
children]))
|
||||
|
|
|
|||
48
frontend/src/app/main/ui/ds/foundations/text.mdx
Normal file
48
frontend/src/app/main/ui/ds/foundations/text.mdx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
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.
|
||||
50
frontend/src/app/main/ui/ds/foundations/text.scss
Normal file
50
frontend/src/app/main/ui/ds/foundations/text.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
// This Source Code Form is subject to the terms of the Mozilla Public
|
||||
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
@use "../typography.scss" as t;
|
||||
|
||||
.display-typography {
|
||||
@include t.use-typography("display");
|
||||
}
|
||||
|
||||
.title-large-typography {
|
||||
@include t.use-typography("title-large");
|
||||
}
|
||||
|
||||
.title-medium-typography {
|
||||
@include t.use-typography("title-medium");
|
||||
}
|
||||
|
||||
.title-small-typography {
|
||||
@include t.use-typography("title-small");
|
||||
}
|
||||
|
||||
.headline-large-typography {
|
||||
@include t.use-typography("headline-large");
|
||||
}
|
||||
|
||||
.headline-medium-typography {
|
||||
@include t.use-typography("headline-medium");
|
||||
}
|
||||
|
||||
.headline-small-typography {
|
||||
@include t.use-typography("headline-small");
|
||||
}
|
||||
|
||||
.body-large-typography {
|
||||
@include t.use-typography("body-large");
|
||||
}
|
||||
|
||||
.body-medium-typography {
|
||||
@include t.use-typography("body-medium");
|
||||
}
|
||||
|
||||
.body-small-typography {
|
||||
@include t.use-typography("body-small");
|
||||
}
|
||||
|
||||
.code-font-typography {
|
||||
@include t.use-typography("code-font");
|
||||
}
|
||||
54
frontend/src/app/main/ui/ds/foundations/text.stories.jsx
Normal file
54
frontend/src/app/main/ui/ds/foundations/text.stories.jsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
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>
|
||||
),
|
||||
};
|
||||
|
|
@ -29,4 +29,4 @@
|
|||
body-large
|
||||
body-medium
|
||||
body-small
|
||||
code-font})
|
||||
code-font})
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue