Skip to content

Commit 957f289

Browse files
pawelgrimmpawelgrimm
committed
docs: add SF Pro typography reference story
1 parent f3d5444 commit 957f289

2 files changed

Lines changed: 188 additions & 0 deletions

File tree

‎src/typography/typography.stories.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.reference {
2+
--reactist-content-primary: #000;
3+
4+
width: 400px;
5+
height: 1628px;
6+
color: #000;
7+
}
8+
9+
.header {
10+
box-sizing: border-box;
11+
width: 400px;
12+
height: 43px;
13+
margin: 0;
14+
padding: 0;
15+
font-family: var(--reactist-font-family);
16+
font-size: 32px;
17+
font-weight: var(--reactist-font-weight-strong);
18+
letter-spacing: 0.41px;
19+
line-height: normal;
20+
}
21+
22+
.rows {
23+
display: flex;
24+
flex-direction: column;
25+
gap: 16px;
26+
width: 400px;
27+
}
28+
29+
.row,
30+
.rowEnd {
31+
display: flex;
32+
flex: 0 0 auto;
33+
align-items: center;
34+
width: 400px;
35+
}
36+
37+
.rowEnd {
38+
align-items: flex-end;
39+
}

‎src/typography/typography.stories.tsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import * as React from 'react'
2+
3+
import { Text } from '../text'
4+
5+
import styles from './typography.stories.module.css'
6+
7+
type ReferenceRow = {
8+
height: number
9+
content?: React.ReactNode
10+
alignEnd?: boolean
11+
}
12+
13+
const rows: ReferenceRow[] = [
14+
{ height: 128, content: <Text variant="display-1">Display 1</Text>, alignEnd: true },
15+
{ height: 117, content: <Text variant="display-2">Display 2</Text> },
16+
{ height: 96, content: <Text variant="display-3">Display 3</Text> },
17+
{ height: 74, content: <Text variant="display-4">Display 4</Text> },
18+
{ height: 56, content: <Text variant="display-5">Display 5</Text> },
19+
{ height: 43, content: <Text variant="heading-1">Header 1</Text> },
20+
{ height: 35, content: <Text variant="heading-2">Header 2</Text> },
21+
{ height: 27, content: <Text variant="heading-3">Header 3</Text> },
22+
{ height: 24, content: <Text variant="heading-4">Header 4</Text> },
23+
{ height: 23, content: <Text variant="subheader-1">Subheader 1</Text> },
24+
{
25+
height: 23,
26+
content: (
27+
<Text variant="subheader-1" decoration="strikethrough">
28+
Subheader 1 Strikethrough
29+
</Text>
30+
),
31+
},
32+
{ height: 24, content: <Text variant="subheader-2">Subheader 2</Text> },
33+
{
34+
height: 24,
35+
content: (
36+
<Text variant="subheader-2" decoration="strikethrough">
37+
Subheader 2 Strikethrough
38+
</Text>
39+
),
40+
},
41+
{ height: 24 },
42+
{ height: 24 },
43+
{ height: 21, content: <Text variant="body-1">Body 1</Text> },
44+
{ height: 22, content: <Text variant="body-2">Body 2</Text> },
45+
{ height: 22, content: <Text variant="body-3">Body 3</Text> },
46+
{
47+
height: 22,
48+
content: (
49+
<Text variant="body-3" decoration="strikethrough">
50+
Body 3 Strikethrough
51+
</Text>
52+
),
53+
},
54+
{ height: 20, content: <Text variant="callout-1">Callout 1</Text> },
55+
{
56+
height: 20,
57+
content: (
58+
<Text variant="callout-1" decoration="strikethrough">
59+
Callout 1 Strikethrough
60+
</Text>
61+
),
62+
},
63+
{ height: 20, content: <Text variant="callout-2">Callout 2</Text> },
64+
{
65+
height: 20,
66+
content: (
67+
<Text variant="callout-2" decoration="strikethrough">
68+
Callout 2 Strikethrough
69+
</Text>
70+
),
71+
},
72+
{ height: 20, content: <Text variant="caption-1">Caption 1</Text> },
73+
{ height: 15, content: <Text variant="caption-2">Caption 2</Text> },
74+
{
75+
height: 15,
76+
content: (
77+
<Text variant="caption-2" decoration="strikethrough">
78+
Caption 2 Strikethrough
79+
</Text>
80+
),
81+
},
82+
{
83+
height: 15,
84+
content: (
85+
<Text variant="caption-2" decoration="underline">
86+
Caption 2 Underline
87+
</Text>
88+
),
89+
},
90+
{ height: 20, content: <Text variant="caption-3">Caption 3</Text> },
91+
{
92+
height: 20,
93+
content: (
94+
<Text variant="caption-3" decoration="underline">
95+
Caption 3 Underline
96+
</Text>
97+
),
98+
},
99+
{
100+
height: 20,
101+
content: (
102+
<Text variant="caption-3" decoration="strikethrough">
103+
Caption 3 Strikethrough
104+
</Text>
105+
),
106+
},
107+
{ height: 13, content: <Text variant="footnote-1">Footnote 1</Text> },
108+
{
109+
height: 13,
110+
content: (
111+
<Text variant="footnote-1" case="uppercase">
112+
Footnote 1 Caps
113+
</Text>
114+
),
115+
},
116+
{ height: 13, content: <Text variant="footnote-2">Footnote 2</Text> },
117+
]
118+
119+
export default {
120+
title: '🔤 Typography/SF Pro Reference',
121+
parameters: {
122+
figma: {
123+
path: 'Global > Text Styles > SF *FOR WEB*',
124+
url: 'https://www.figma.com/design/xo9yAsH8PQUpi0eTJh9pmR/Product-Library---Global?node-id=9062-3316',
125+
},
126+
},
127+
}
128+
129+
export function SFReference() {
130+
return (
131+
<section className={styles.reference} data-testid="sf-reference">
132+
<div className={styles.header}>Web (SF – default)</div>
133+
<div className={styles.rows}>
134+
{rows.map(({ height, content, alignEnd }, index) => (
135+
<div
136+
className={alignEnd ? styles.rowEnd : styles.row}
137+
data-reference-row
138+
key={index}
139+
style={{ height }}
140+
>
141+
{content}
142+
</div>
143+
))}
144+
</div>
145+
</section>
146+
)
147+
}
148+
149+
SFReference.parameters = { chromatic: { disableSnapshot: false } }

0 commit comments

Comments
 (0)