mirror of
https://github.com/penpot/penpot.git
synced 2025-05-07 12:55:53 +02:00
📎 Move typography-related components to their own folder
This commit is contained in:
Belén Albeza
parent
54da6832f3
commit
9d3a282c0a
11 changed files with 32 additions and 167 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.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
|
||||
|
|
|
|||
|
|
@ -1,137 +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 const typographyIds = Object.values(typographyList).map(x => x.id);
|
||||
|
||||
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"))
|
||||
|
||||
|
|
@ -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");
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
import { typographyIds } from "./typography.stories";
|
||||
|
||||
const { Heading } = Components;
|
||||
const { StoryWrapper } = Components.storybook;
|
||||
const { typography } = Components.meta;
|
||||
|
||||
const typographyIds = typography.sort();
|
||||
|
||||
export default {
|
||||
title: "Foundations/Typography/Heading",
|
||||
|
|
@ -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])
|
||||
|
|
@ -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.text :refer [text*]]
|
||||
[app.main.ui.ds.foundations.typography :as t]))
|
||||
[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:
|
||||
|
|
@ -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");
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
import { typographyIds } from "./typography.stories";
|
||||
|
||||
const { Text } = Components;
|
||||
const { StoryWrapper } = Components.storybook;
|
||||
const { typography } = Components.meta;
|
||||
|
||||
const typographyIds = typography.sort();
|
||||
|
||||
export default {
|
||||
title: "Foundations/Typography/Text",
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
Reference in a new issue