Skip to content

Commit 04054bb

Browse files
bjlaabjlaa
authored
✨ Create documentation page for text sizes (#1191)
Co-authored-by: Benjamin Arias <12382534+bjlaa@users.noreply.github.com>
1 parent c77ac44 commit 04054bb

File tree

1 file changed

+282
-0
lines changed

1 file changed

+282
-0
lines changed

‎src/design-system/docs/TextSizes.stories.tsx‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
// eslint-disable-next-line storybook/no-renderer-packages
2+
import type { Meta, StoryObj } from '@storybook/nextjs'
3+
import React from 'react'
4+
5+
// Tailles de texte Tailwind par défaut avec leurs équivalents en rem et px
6+
const tailwindTextSizes = [
7+
{ class: 'text-xs', rem: '0.75rem', px: '12px', description: 'Extra small' },
8+
{ class: 'text-sm', rem: '0.875rem', px: '14px', description: 'Small' },
9+
{
10+
class: 'text-base',
11+
rem: '1rem',
12+
px: '16px',
13+
description: 'Base (default)',
14+
},
15+
{ class: 'text-lg', rem: '1.125rem', px: '18px', description: 'Large' },
16+
{ class: 'text-xl', rem: '1.25rem', px: '20px', description: 'Extra large' },
17+
{ class: 'text-2xl', rem: '1.5rem', px: '24px', description: '2X Large' },
18+
{ class: 'text-3xl', rem: '1.875rem', px: '30px', description: '3X Large' },
19+
{ class: 'text-4xl', rem: '2.25rem', px: '36px', description: '4X Large' },
20+
{ class: 'text-5xl', rem: '2.75rem', px: '44px', description: '5X Large' },
21+
{ class: 'text-6xl', rem: '3.75rem', px: '60px', description: '6X Large' },
22+
{ class: 'text-7xl', rem: '4.5rem', px: '72px', description: '7X Large' },
23+
{ class: 'text-8xl', rem: '6rem', px: '96px', description: '8X Large' },
24+
{ class: 'text-9xl', rem: '8rem', px: '128px', description: '9X Large' },
25+
]
26+
27+
// Styles des balises h1-h6 définis dans globals.css
28+
const headingStyles = [
29+
{
30+
tag: 'h1',
31+
mobileClass: 'text-2xl',
32+
desktopClass: 'md:text-3xl',
33+
mobileRem: '1.5rem',
34+
mobilePx: '24px',
35+
desktopRem: '1.875rem',
36+
desktopPx: '30px',
37+
fontWeight: 'font-medium',
38+
marginBottom: 'mb-6',
39+
lineHeight: 'leading-tight',
40+
},
41+
{
42+
tag: 'h2',
43+
mobileClass: 'text-xl',
44+
desktopClass: 'md:text-2xl',
45+
mobileRem: '1.25rem',
46+
mobilePx: '20px',
47+
desktopRem: '1.5rem',
48+
desktopPx: '24px',
49+
fontWeight: 'font-medium',
50+
marginBottom: 'mb-4',
51+
lineHeight: 'leading-tight',
52+
},
53+
{
54+
tag: 'h3',
55+
mobileClass: 'text-lg',
56+
desktopClass: 'md:text-xl',
57+
mobileRem: '1.125rem',
58+
mobilePx: '18px',
59+
desktopRem: '1.25rem',
60+
desktopPx: '20px',
61+
fontWeight: 'font-medium',
62+
marginBottom: 'mb-4',
63+
lineHeight: 'leading-tight',
64+
},
65+
{
66+
tag: 'h4',
67+
mobileClass: 'text-base',
68+
desktopClass: 'md:text-lg',
69+
mobileRem: '1rem',
70+
mobilePx: '16px',
71+
desktopRem: '1.125rem',
72+
desktopPx: '18px',
73+
fontWeight: 'font-medium',
74+
marginBottom: 'mb-4',
75+
lineHeight: 'leading-tight',
76+
},
77+
{
78+
tag: 'h5',
79+
mobileClass: 'text-base',
80+
desktopClass: 'md:text-lg',
81+
mobileRem: '1rem',
82+
mobilePx: '16px',
83+
desktopRem: '1.125rem',
84+
desktopPx: '18px',
85+
fontWeight: 'font-medium',
86+
marginBottom: 'mb-4',
87+
lineHeight: 'leading-tight',
88+
},
89+
{
90+
tag: 'h6',
91+
mobileClass: 'text-base',
92+
desktopClass: 'md:text-lg',
93+
mobileRem: '1rem',
94+
mobilePx: '16px',
95+
desktopRem: '1.125rem',
96+
desktopPx: '18px',
97+
fontWeight: 'font-medium',
98+
marginBottom: 'mb-4',
99+
lineHeight: 'leading-tight',
100+
},
101+
]
102+
103+
const TextSizeExample = ({
104+
className,
105+
rem,
106+
px,
107+
description,
108+
children,
109+
}: {
110+
className: string
111+
rem: string
112+
px: string
113+
description: string
114+
children: React.ReactNode
115+
}) => (
116+
<div className="mb-4 rounded-lg border border-gray-200 p-4">
117+
<div className={`${className} mb-2`}>{children}</div>
118+
<div className="space-y-1 text-sm text-gray-600">
119+
<div>
120+
<strong>Classe Tailwind:</strong> {className}
121+
</div>
122+
<div>
123+
<strong>Taille:</strong> {rem} ({px})
124+
</div>
125+
<div>
126+
<strong>Description:</strong> {description}
127+
</div>
128+
</div>
129+
</div>
130+
)
131+
132+
const HeadingExample = ({
133+
tag,
134+
mobileClass,
135+
desktopClass,
136+
mobileRem,
137+
mobilePx,
138+
desktopRem,
139+
desktopPx,
140+
fontWeight,
141+
marginBottom,
142+
lineHeight,
143+
}: {
144+
tag: string
145+
mobileClass: string
146+
desktopClass: string
147+
mobileRem: string
148+
mobilePx: string
149+
desktopRem: string
150+
desktopPx: string
151+
fontWeight: string
152+
marginBottom: string
153+
lineHeight: string
154+
}) => {
155+
const Tag = tag as keyof React.JSX.IntrinsicElements
156+
return (
157+
<div className="mb-4 rounded-lg border border-gray-200 p-4">
158+
<Tag
159+
className={`${mobileClass} ${desktopClass} ${fontWeight} ${marginBottom} ${lineHeight}`}>
160+
Exemple de titre {tag.toUpperCase()}
161+
</Tag>
162+
<div className="space-y-1 text-sm text-gray-600">
163+
<div>
164+
<strong>Balise:</strong> &lt;{tag}&gt;
165+
</div>
166+
<div>
167+
<strong>Classes:</strong> {mobileClass} {desktopClass} {fontWeight}{' '}
168+
{marginBottom} {lineHeight}
169+
</div>
170+
<div>
171+
<strong>Mobile:</strong> {mobileRem} ({mobilePx})
172+
</div>
173+
<div>
174+
<strong>Desktop:</strong> {desktopRem} ({desktopPx})
175+
</div>
176+
</div>
177+
</div>
178+
)
179+
}
180+
181+
const TextSizes = () => {
182+
return (
183+
<div className="mx-auto max-w-6xl p-6">
184+
<h1 className="mb-8 text-4xl font-bold">Tailles de texte</h1>
185+
186+
{/* Section Tailwind */}
187+
<section className="mb-12">
188+
<h2 className="mb-6 text-2xl font-bold">
189+
Tailles de texte Tailwind CSS
190+
</h2>
191+
<p className="mb-6 text-gray-600">
192+
Voici toutes les tailles de texte disponibles avec Tailwind CSS, avec
193+
leurs équivalents en rem et pixels.
194+
</p>
195+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
196+
{tailwindTextSizes.map((size) => (
197+
<TextSizeExample
198+
key={size.class}
199+
className={size.class}
200+
rem={size.rem}
201+
px={size.px}
202+
description={size.description}>
203+
Exemple de texte {size.description.toLowerCase()}
204+
</TextSizeExample>
205+
))}
206+
</div>
207+
</section>
208+
209+
{/* Section Balises de titre */}
210+
<section className="mb-12">
211+
<h2 className="mb-6 text-2xl font-bold">Balises de titre (h1-h6)</h2>
212+
<p className="mb-6 text-gray-600">
213+
Styles spécifiques définis pour les balises de titre dans le fichier
214+
globals.css.
215+
</p>
216+
<div className="space-y-4">
217+
{headingStyles.map((heading) => (
218+
<HeadingExample
219+
key={heading.tag}
220+
tag={heading.tag}
221+
mobileClass={heading.mobileClass}
222+
desktopClass={heading.desktopClass}
223+
mobileRem={heading.mobileRem}
224+
mobilePx={heading.mobilePx}
225+
desktopRem={heading.desktopRem}
226+
desktopPx={heading.desktopPx}
227+
fontWeight={heading.fontWeight}
228+
marginBottom={heading.marginBottom}
229+
lineHeight={heading.lineHeight}
230+
/>
231+
))}
232+
</div>
233+
</section>
234+
235+
{/* Section Utilisation */}
236+
<section className="mb-12">
237+
<h2 className="mb-6 text-2xl font-bold">Guide d'utilisation</h2>
238+
<div className="rounded-lg bg-gray-50 p-6">
239+
<h3 className="mb-4 text-xl font-semibold">
240+
Quand utiliser chaque taille :
241+
</h3>
242+
<ul className="space-y-2 text-gray-700">
243+
<li>
244+
<strong>text-xs (12px) :</strong> Labels, badges, annotations
245+
</li>
246+
<li>
247+
<strong>text-sm (14px) :</strong> Textes secondaires, légendes
248+
</li>
249+
<li>
250+
<strong>text-base (16px) :</strong> Texte principal, paragraphes
251+
</li>
252+
<li>
253+
<strong>text-lg (18px) :</strong> Sous-titres, textes importants
254+
</li>
255+
<li>
256+
<strong>text-xl (20px) :</strong> Titres de section
257+
</li>
258+
<li>
259+
<strong>text-2xl (24px) :</strong> Titres principaux
260+
</li>
261+
<li>
262+
<strong>text-3xl+ (30px+) :</strong> Titres de page, hero
263+
</li>
264+
</ul>
265+
</div>
266+
</section>
267+
</div>
268+
)
269+
}
270+
271+
const meta: Meta<typeof TextSizes> = {
272+
title: 'Design System/Docs/TextSizes',
273+
component: TextSizes,
274+
parameters: {
275+
layout: 'fullscreen',
276+
},
277+
}
278+
279+
export default meta
280+
type Story = StoryObj<typeof TextSizes>
281+
282+
export const Default: Story = {}

0 commit comments

Comments
 (0)