@syscore/ui-library 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/client/components/icons/ConceptIcons.tsx +27 -23
  2. package/client/components/ui/tag.tsx +1 -1
  3. package/client/components/ui/typography.tsx +116 -0
  4. package/client/global.css +22 -3
  5. package/client/ui/Card.stories.tsx +143 -25
  6. package/client/ui/Typography.stories.tsx +148 -307
  7. package/dist/index.cjs.js +1 -1
  8. package/dist/index.es.js +1 -1
  9. package/package.json +1 -1
package/client/ui/Typography.stories.tsx CHANGED
@@ -1,19 +1,21 @@
1
1
  import type { Meta, StoryObj } from "@storybook/react";
2
+ import { Text, List, ListItem } from "@/components/ui/typography";
2
3
 
3
4
  const meta = {
4
5
  title: "Review/Typography",
6
+ component: Text,
5
7
  tags: ["autodocs"],
6
8
  parameters: {
7
9
  layout: "fullscreen",
8
10
  },
9
- } satisfies Meta;
11
+ } satisfies Meta<typeof Text>;
10
12
 
11
13
  export default meta;
12
14
 
13
15
  type Story = StoryObj<typeof meta>;
14
16
 
15
17
  // Section header component
16
- const SectionHeader = ({ title }: { title: string }) => {
18
+ const StoryHeader = ({ title }: { title: string }) => {
17
19
  return (
18
20
  <div className="flex flex-col gap-2">
19
21
  <p className="text-lg font-medium text-black">{title}</p>
@@ -23,13 +25,7 @@ const SectionHeader = ({ title }: { title: string }) => {
23
25
  };
24
26
 
25
27
  // Typography row component
26
- const TypographyRow = ({
27
- children,
28
- className,
29
- }: {
30
- children: React.ReactNode;
31
- className?: string;
32
- }) => {
28
+ const StoryRow = ({ children }: { children: React.ReactNode }) => {
33
29
  return <div className="flex gap-8 items-start w-full">{children}</div>;
34
30
  };
35
31
 
@@ -39,380 +35,225 @@ export const Default: Story = {
39
35
  const sampleBodyText =
40
36
  "One of the hallmarks of the team is this sense of looking to be wrong.";
41
37
  const sampleNumber = "20:04–02:54";
42
- const sampleNumberSmall = "1, 4–6";
43
38
 
44
39
  return (
45
40
  <div className="min-h-screen bg-white">
46
- {/* Header */}
47
- <div className="px-20 py-16 border-b border-gray-200">
48
- <div className="flex gap-4 items-center">
49
- <h1 className="text-[36px] font-extrabold leading-[44px] tracking-[-0.72px] text-black">
50
- Web
51
- </h1>
52
- </div>
53
- </div>
54
-
55
- {/* Body */}
56
41
  <div className="px-20 py-16 space-y-20">
57
42
  {/* Heading Large */}
58
43
  <div className="space-y-8">
59
- <SectionHeader title="Heading large" />
60
- <TypographyRow>
61
- <h1 className="flex-1 heading-large text-black">{sampleText}</h1>
62
- </TypographyRow>
44
+ <StoryHeader title="Heading large" />
45
+ <StoryRow>
46
+ <Text variant="heading-large" className="flex-1 text-black">
47
+ {sampleText}
48
+ </Text>
49
+ </StoryRow>
63
50
  </div>
64
51
 
65
52
  {/* Heading Medium */}
66
53
  <div className="space-y-8">
67
- <SectionHeader title="Heading medium" />
68
- <TypographyRow>
69
- <p className="flex-1 heading-medium text-black">{sampleText}</p>
70
- </TypographyRow>
54
+ <StoryHeader title="Heading medium" />
55
+ <StoryRow>
56
+ <Text variant="heading-medium" className="flex-1 text-black">
57
+ {sampleText}
58
+ </Text>
59
+ </StoryRow>
71
60
  </div>
72
61
 
73
62
  {/* Heading Small */}
74
63
  <div className="space-y-8">
75
- <SectionHeader title="Heading small" />
76
- <TypographyRow>
77
- <p className="flex-1 heading-small text-black">{sampleText}</p>
78
- </TypographyRow>
64
+ <StoryHeader title="Heading small" />
65
+ <StoryRow>
66
+ <Text variant="heading-small" className="flex-1 text-black">
67
+ {sampleText}
68
+ </Text>
69
+ </StoryRow>
79
70
  </div>
80
71
 
81
72
  {/* Heading XSmall */}
82
73
  <div className="space-y-8">
83
- <SectionHeader title="Heading xsmall" />
84
- <TypographyRow>
85
- <p className="flex-1 heading-xsmall text-black">{sampleText}</p>
86
- </TypographyRow>
74
+ <StoryHeader title="Heading xsmall" />
75
+ <StoryRow>
76
+ <Text variant="heading-xsmall" className="flex-1 text-black">
77
+ {sampleText}
78
+ </Text>
79
+ </StoryRow>
87
80
  </div>
88
81
 
89
82
  {/* Heading XXSmall */}
90
83
  <div className="space-y-8">
91
- <SectionHeader title="Heading xxsmall" />
92
- <TypographyRow>
93
- <p
94
- className="flex-1 text-[20px] leading-[22px] tracking-[-0.2px] font-normal text-black"
95
- style={{ fontFamily: "var(--font-ftmade)" }}
96
- >
84
+ <StoryHeader title="Heading xxsmall" />
85
+ <StoryRow>
86
+ <Text variant="heading-xxsmall" className="flex-1 text-black">
97
87
  {sampleText}
98
- </p>
99
- </TypographyRow>
88
+ </Text>
89
+ </StoryRow>
100
90
  </div>
101
91
 
102
92
  {/* Body Large */}
103
93
  <div className="space-y-8">
104
- <SectionHeader title="Body large" />
105
- <TypographyRow>
106
- <p
107
- className="flex-1 body-large text-black font-normal"
108
- style={{ fontFamily: "var(--font-mazzard)" }}
109
- >
94
+ <StoryHeader title="Body large" />
95
+ <StoryRow>
96
+ <Text variant="body-large" className="flex-1 text-black font-normal">
110
97
  {sampleBodyText}
111
- </p>
112
- <p
113
- className="flex-1 body-large text-black font-medium"
114
- style={{ fontFamily: "var(--font-mazzard)" }}
115
- >
98
+ </Text>
99
+ <Text variant="body-large" className="flex-1 text-black font-medium">
116
100
  {sampleBodyText}
117
- </p>
118
- <p
119
- className="flex-1 body-large text-black font-semibold"
120
- style={{ fontFamily: "var(--font-mazzard)" }}
121
- >
101
+ </Text>
102
+ <Text variant="body-large" className="flex-1 text-black font-semibold">
122
103
  {sampleBodyText}
123
- </p>
124
- </TypographyRow>
125
- <TypographyRow>
126
- <p
127
- className="flex-1 body-large text-black font-normal italic"
128
- style={{ fontFamily: "var(--font-mazzard)" }}
129
- >
104
+ </Text>
105
+ </StoryRow>
106
+ <StoryRow>
107
+ <Text variant="body-large" className="flex-1 text-black font-normal italic">
130
108
  {sampleBodyText}
131
- </p>
132
- <p
133
- className="flex-1 body-large text-black font-medium italic"
134
- style={{ fontFamily: "var(--font-mazzard)" }}
135
- >
109
+ </Text>
110
+ <Text variant="body-large" className="flex-1 text-black font-medium italic">
136
111
  {sampleBodyText}
137
- </p>
138
- <p
139
- className="flex-1 body-large text-black font-semibold italic"
140
- style={{ fontFamily: "var(--font-mazzard)" }}
141
- >
112
+ </Text>
113
+ <Text variant="body-large" className="flex-1 text-black font-semibold italic">
142
114
  {sampleBodyText}
143
- </p>
144
- </TypographyRow>
115
+ </Text>
116
+ </StoryRow>
145
117
  </div>
146
118
 
147
119
  {/* Body Base */}
148
120
  <div className="space-y-8">
149
- <SectionHeader title="Body base" />
150
- <TypographyRow>
151
- <p
152
- className="flex-1 body-base text-black font-normal"
153
- style={{ fontFamily: "var(--font-mazzard)" }}
154
- >
121
+ <StoryHeader title="Body base" />
122
+ <StoryRow>
123
+ <Text variant="body-base" className="flex-1 text-black font-normal">
155
124
  {sampleBodyText}
156
- </p>
157
- <p
158
- className="flex-1 body-base text-black font-medium"
159
- style={{ fontFamily: "var(--font-mazzard)" }}
160
- >
125
+ </Text>
126
+ <Text variant="body-base" className="flex-1 text-black font-medium">
161
127
  {sampleBodyText}
162
- </p>
163
- <p
164
- className="flex-1 body-base text-black font-semibold"
165
- style={{ fontFamily: "var(--font-mazzard)" }}
166
- >
128
+ </Text>
129
+ <Text variant="body-base" className="flex-1 text-black font-semibold">
167
130
  {sampleBodyText}
168
- </p>
169
- </TypographyRow>
170
- <TypographyRow>
171
- <p
172
- className="flex-1 body-base text-black font-normal italic"
173
- style={{ fontFamily: "var(--font-mazzard)" }}
174
- >
131
+ </Text>
132
+ </StoryRow>
133
+ <StoryRow>
134
+ <Text variant="body-base" className="flex-1 text-black font-normal italic">
175
135
  {sampleBodyText}
176
- </p>
177
- <p
178
- className="flex-1 body-base text-black font-medium italic"
179
- style={{ fontFamily: "var(--font-mazzard)" }}
180
- >
136
+ </Text>
137
+ <Text variant="body-base" className="flex-1 text-black font-medium italic">
181
138
  {sampleBodyText}
182
- </p>
183
- <p
184
- className="flex-1 body-base text-black font-semibold italic"
185
- style={{ fontFamily: "var(--font-mazzard)" }}
186
- >
139
+ </Text>
140
+ <Text variant="body-base" className="flex-1 text-black font-semibold italic">
187
141
  {sampleBodyText}
188
- </p>
189
- </TypographyRow>
190
- <TypographyRow>
191
- <p
192
- className="flex-1 body-base text-black font-normal underline decoration-dotted"
193
- style={{ fontFamily: "var(--font-mazzard)" }}
194
- >
142
+ </Text>
143
+ </StoryRow>
144
+ <StoryRow>
145
+ <Text variant="body-base" className="flex-1 text-black font-normal underline decoration-dotted">
195
146
  {sampleBodyText}
196
- </p>
197
- <p
198
- className="flex-1 body-base text-black font-medium underline decoration-dotted"
199
- style={{ fontFamily: "var(--font-mazzard)" }}
200
- >
147
+ </Text>
148
+ <Text variant="body-base" className="flex-1 text-black font-medium underline decoration-dotted">
201
149
  {sampleBodyText}
202
- </p>
203
- <p
204
- className="flex-1 body-base text-black font-semibold underline decoration-dotted"
205
- style={{ fontFamily: "var(--font-mazzard)" }}
206
- >
150
+ </Text>
151
+ <Text variant="body-base" className="flex-1 text-black font-semibold underline decoration-dotted">
207
152
  {sampleBodyText}
208
- </p>
209
- </TypographyRow>
153
+ </Text>
154
+ </StoryRow>
210
155
  </div>
211
156
 
212
157
  {/* Body Small */}
213
158
  <div className="space-y-8">
214
- <SectionHeader title="Body small" />
215
- <TypographyRow>
216
- <p
217
- className="flex-1 body-small text-black font-normal"
218
- style={{ fontFamily: "var(--font-mazzard)" }}
219
- >
159
+ <StoryHeader title="Body small" />
160
+ <StoryRow>
161
+ <Text variant="body-small" className="flex-1 text-black font-normal">
220
162
  {sampleBodyText}
221
- </p>
222
- <p
223
- className="flex-1 body-small text-black font-medium"
224
- style={{ fontFamily: "var(--font-mazzard)" }}
225
- >
163
+ </Text>
164
+ <Text variant="body-small" className="flex-1 text-black font-medium">
226
165
  {sampleBodyText}
227
- </p>
228
- <p
229
- className="flex-1 body-small text-black font-semibold"
230
- style={{ fontFamily: "var(--font-mazzard)" }}
231
- >
166
+ </Text>
167
+ <Text variant="body-small" className="flex-1 text-black font-semibold">
232
168
  {sampleBodyText}
233
- </p>
234
- </TypographyRow>
235
- <TypographyRow>
236
- <p
237
- className="flex-1 body-small text-black font-normal italic"
238
- style={{ fontFamily: "var(--font-mazzard)" }}
239
- >
169
+ </Text>
170
+ </StoryRow>
171
+ <StoryRow>
172
+ <Text variant="body-small" className="flex-1 text-black font-normal italic">
240
173
  {sampleBodyText}
241
- </p>
242
- <p
243
- className="flex-1 body-small text-black font-medium italic"
244
- style={{ fontFamily: "var(--font-mazzard)" }}
245
- >
174
+ </Text>
175
+ <Text variant="body-small" className="flex-1 text-black font-medium italic">
246
176
  {sampleBodyText}
247
- </p>
248
- <p
249
- className="flex-1 body-small text-black font-semibold italic"
250
- style={{ fontFamily: "var(--font-mazzard)" }}
251
- >
177
+ </Text>
178
+ <Text variant="body-small" className="flex-1 text-black font-semibold italic">
252
179
  {sampleBodyText}
253
- </p>
254
- </TypographyRow>
180
+ </Text>
181
+ </StoryRow>
255
182
  </div>
256
183
 
257
184
  {/* Body Overline */}
258
185
  <div className="space-y-8">
259
- <SectionHeader title="Body overline" />
260
- <TypographyRow>
261
- <p
262
- className="flex-1 overline-large text-black font-semibold"
263
- style={{ fontFamily: "var(--font-mazzard)" }}
264
- >
186
+ <StoryHeader title="Body overline" />
187
+ <StoryRow>
188
+ <Text variant="overline-large" className="flex-1 text-black font-semibold">
265
189
  {sampleText}
266
- </p>
267
- <p
268
- className="flex-1 overline-large text-black font-semibold italic"
269
- style={{ fontFamily: "var(--font-mazzard)" }}
270
- >
190
+ </Text>
191
+ <Text variant="overline-large" className="flex-1 text-black font-semibold italic">
271
192
  {sampleText}
272
- </p>
273
- </TypographyRow>
274
- <TypographyRow>
275
- <p
276
- className="flex-1 overline-medium text-black font-semibold"
277
- style={{ fontFamily: "var(--font-mazzard)" }}
278
- >
193
+ </Text>
194
+ </StoryRow>
195
+ <StoryRow>
196
+ <Text variant="overline-medium" className="flex-1 text-black font-semibold">
279
197
  {sampleText}
280
- </p>
281
- <p
282
- className="flex-1 overline-medium text-black font-semibold italic"
283
- style={{ fontFamily: "var(--font-mazzard)" }}
284
- >
198
+ </Text>
199
+ <Text variant="overline-medium" className="flex-1 text-black font-semibold italic">
285
200
  {sampleText}
286
- </p>
287
- </TypographyRow>
288
- <TypographyRow>
289
- <p
290
- className="flex-1 overline-small text-black font-semibold"
291
- style={{ fontFamily: "var(--font-mazzard)" }}
292
- >
201
+ </Text>
202
+ </StoryRow>
203
+ <StoryRow>
204
+ <Text variant="overline-small" className="flex-1 text-black font-semibold">
293
205
  {sampleText}
294
- </p>
295
- <p
296
- className="flex-1 overline-small text-black font-semibold italic"
297
- style={{ fontFamily: "var(--font-mazzard)" }}
298
- >
206
+ </Text>
207
+ <Text variant="overline-small" className="flex-1 text-black font-semibold italic">
299
208
  {sampleText}
300
- </p>
301
- </TypographyRow>
209
+ </Text>
210
+ </StoryRow>
302
211
  </div>
303
212
 
304
213
  {/* Body Number */}
305
214
  <div className="space-y-8">
306
- <SectionHeader title="Body number" />
307
- <TypographyRow>
308
- <p
309
- className="flex-1 number-large text-black font-normal"
310
- style={{ fontFamily: "var(--font-mazzard)" }}
311
- >
312
- {sampleNumber}
313
- </p>
314
- <p
315
- className="flex-1 number-large text-black font-medium"
316
- style={{ fontFamily: "var(--font-mazzard)" }}
317
- >
215
+ <StoryHeader title="Body number" />
216
+ <StoryRow>
217
+ <Text variant="number-large" className="flex-1 text-black font-normal">
318
218
  {sampleNumber}
319
- </p>
320
- <p
321
- className="flex-1 number-large text-black font-semibold"
322
- style={{ fontFamily: "var(--font-mazzard)" }}
323
- >
219
+ </Text>
220
+ <Text variant="number-large" className="flex-1 text-black font-medium">
324
221
  {sampleNumber}
325
- </p>
326
- </TypographyRow>
327
- <TypographyRow>
328
- <p
329
- className="flex-1 number-base text-black font-normal"
330
- style={{ fontFamily: "var(--font-mazzard)" }}
331
- >
222
+ </Text>
223
+ <Text variant="number-large" className="flex-1 text-black font-semibold">
332
224
  {sampleNumber}
333
- </p>
334
- <p
335
- className="flex-1 number-base text-black font-medium"
336
- style={{ fontFamily: "var(--font-mazzard)" }}
337
- >
225
+ </Text>
226
+ </StoryRow>
227
+ <StoryRow>
228
+ <Text variant="number-base" className="flex-1 text-black font-normal">
338
229
  {sampleNumber}
339
- </p>
340
- <p
341
- className="flex-1 number-base text-black font-semibold"
342
- style={{ fontFamily: "var(--font-mazzard)" }}
343
- >
230
+ </Text>
231
+ <Text variant="number-base" className="flex-1 text-black font-medium">
344
232
  {sampleNumber}
345
- </p>
346
- </TypographyRow>
347
- <TypographyRow>
348
- <p
349
- className="flex-1 text-[10.32px] leading-[20px] text-black font-normal"
350
- style={{
351
- fontVariantNumeric: "lining-nums tabular-nums",
352
- fontFamily: "var(--font-mazzard)",
353
- }}
354
- >
355
- {sampleNumberSmall}
356
- </p>
357
- <p
358
- className="flex-1 text-[10.32px] leading-[21px] text-black font-semibold"
359
- style={{
360
- fontVariantNumeric: "lining-nums tabular-nums",
361
- fontFamily: "var(--font-mazzard)",
362
- }}
363
- >
364
- {sampleNumberSmall}
365
- </p>
366
- <p
367
- className="flex-1 text-[10.32px] leading-[21px] text-black font-semibold"
368
- style={{
369
- fontVariantNumeric: "lining-nums tabular-nums",
370
- fontFamily: "var(--font-mazzard)",
371
- }}
372
- >
373
- {sampleNumberSmall}
374
- </p>
375
- </TypographyRow>
376
- <TypographyRow>
377
- <p
378
- className="flex-1 number-small text-black font-normal"
379
- style={{ fontFamily: "var(--font-mazzard)" }}
380
- >
233
+ </Text>
234
+ <Text variant="number-base" className="flex-1 text-black font-semibold">
381
235
  {sampleNumber}
382
- </p>
383
- <p
384
- className="flex-1 number-small text-black font-medium"
385
- style={{ fontFamily: "var(--font-mazzard)" }}
386
- >
387
- {sampleNumber}
388
- </p>
389
- <p
390
- className="flex-1 number-small text-black font-semibold"
391
- style={{ fontFamily: "var(--font-mazzard)" }}
392
- >
393
- {sampleNumber}
394
- </p>
395
- </TypographyRow>
396
- <TypographyRow>
397
- <p
398
- className="flex-1 number-xsmall text-black font-normal"
399
- style={{ fontFamily: "var(--font-mazzard)" }}
400
- >
401
- {sampleNumber}
402
- </p>
403
- <p
404
- className="flex-1 number-xsmall text-black font-medium"
405
- style={{ fontFamily: "var(--font-mazzard)" }}
406
- >
407
- {sampleNumber}
408
- </p>
409
- <p
410
- className="flex-1 number-xsmall text-black font-semibold"
411
- style={{ fontFamily: "var(--font-mazzard)" }}
412
- >
413
- {sampleNumber}
414
- </p>
415
- </TypographyRow>
236
+ </Text>
237
+ </StoryRow>
238
+ </div>
239
+
240
+ {/* List */}
241
+ <div className="space-y-8">
242
+ <StoryHeader title="List" />
243
+ <StoryRow>
244
+ <List className="flex-1 text-black">
245
+ <ListItem>1st level of puns: 5 gold coins</ListItem>
246
+ <ListItem>2nd level of jokes: 10 gold coins</ListItem>
247
+ <ListItem>3rd level of one-liners: 20 gold coins</ListItem>
248
+ </List>
249
+ </StoryRow>
250
+ <StoryRow>
251
+ <List className="flex-1 text-black">
252
+ <ListItem variant="body-large">Body large list item</ListItem>
253
+ <ListItem variant="body-base">Body base list item</ListItem>
254
+ <ListItem variant="body-small">Body small list item</ListItem>
255
+ </List>
256
+ </StoryRow>
416
257
  </div>
417
258
  </div>
418
259
  </div>