@automattic/vip-design-system 2.4.5 → 2.6.1

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 (97) hide show
  1. package/build/system/Breadcrumbs/Breadcrumbs.d.ts +1 -0
  2. package/build/system/Breadcrumbs/Breadcrumbs.js +75 -20
  3. package/build/system/Breadcrumbs/Breadcrumbs.stories.d.ts +2 -0
  4. package/build/system/Breadcrumbs/Breadcrumbs.stories.js +47 -7
  5. package/build/system/Breadcrumbs/Breadcrumbs.test.js +72 -0
  6. package/build/system/Breadcrumbs/styles.d.ts +2 -0
  7. package/build/system/Breadcrumbs/styles.js +8 -2
  8. package/build/system/Dropdown/Dropdown.d.ts +25 -36
  9. package/build/system/Dropdown/Dropdown.js +60 -99
  10. package/build/system/Dropdown/Dropdown.stories.d.ts +1 -26
  11. package/build/system/Dropdown/Dropdown.test.js +51 -28
  12. package/build/system/Dropdown/DropdownContent.d.ts +14 -10
  13. package/build/system/Dropdown/DropdownContent.js +43 -47
  14. package/build/system/Dropdown/DropdownItem.d.ts +20 -32
  15. package/build/system/Dropdown/DropdownItem.js +86 -103
  16. package/build/system/Dropdown/DropdownLabel.d.ts +11 -7
  17. package/build/system/Dropdown/DropdownLabel.js +29 -29
  18. package/build/system/Dropdown/DropdownSeparator.d.ts +10 -6
  19. package/build/system/Dropdown/DropdownSeparator.js +28 -28
  20. package/build/system/Dropdown/index.d.ts +17 -39
  21. package/build/system/Dropdown/index.js +23 -50
  22. package/build/system/FilterDropdown/FilterDropdown.d.ts +27 -0
  23. package/build/system/FilterDropdown/FilterDropdown.js +75 -0
  24. package/build/system/FilterDropdown/FilterDropdown.stories.d.ts +18 -0
  25. package/build/system/FilterDropdown/FilterDropdown.stories.js +46 -0
  26. package/build/system/FilterDropdown/FilterDropdown.test.d.ts +1 -0
  27. package/build/system/FilterDropdown/FilterDropdown.test.js +53 -0
  28. package/build/system/Hr/Hr.d.ts +7 -0
  29. package/build/system/Hr/Hr.js +22 -0
  30. package/build/system/Hr/Hr.stories.d.ts +23 -0
  31. package/build/system/Hr/Hr.stories.js +30 -0
  32. package/build/system/Hr/Hr.test.d.ts +1 -0
  33. package/build/system/Hr/Hr.test.js +41 -0
  34. package/build/system/Link/Link.d.ts +11 -1
  35. package/build/system/Link/Link.js +16 -1
  36. package/build/system/Link/Link.stories.d.ts +14 -1
  37. package/build/system/Link/Link.stories.js +16 -3
  38. package/build/system/Nav/styles.js +2 -1
  39. package/build/system/Page/Page.d.ts +2 -0
  40. package/build/system/Page/Page.js +10 -0
  41. package/build/system/Page/Page.test.d.ts +1 -0
  42. package/build/system/Page/Page.test.js +41 -0
  43. package/build/system/index.d.ts +3 -1
  44. package/build/system/index.js +4 -0
  45. package/build/system/theme/index.d.ts +889 -23
  46. package/build/system/theme/index.js +7 -8
  47. package/build/system/utils/stories/CustomLink.d.ts +1 -0
  48. package/build/system/utils/stories/CustomLink.js +7 -1
  49. package/package.json +1 -1
  50. package/src/system/Breadcrumbs/Breadcrumbs.stories.tsx +32 -3
  51. package/src/system/Breadcrumbs/Breadcrumbs.test.tsx +60 -0
  52. package/src/system/Breadcrumbs/Breadcrumbs.tsx +100 -29
  53. package/src/system/Breadcrumbs/styles.ts +11 -0
  54. package/src/system/Dropdown/{Dropdown.test.js → Dropdown.test.tsx} +2 -1
  55. package/src/system/Dropdown/Dropdown.tsx +72 -0
  56. package/src/system/Dropdown/DropdownContent.tsx +46 -0
  57. package/src/system/Dropdown/DropdownItem.tsx +112 -0
  58. package/src/system/Dropdown/DropdownLabel.tsx +29 -0
  59. package/src/system/Dropdown/DropdownSeparator.tsx +28 -0
  60. package/src/system/Dropdown/{index.js → index.ts} +1 -3
  61. package/src/system/FilterDropdown/FilterDropdown.stories.tsx +57 -0
  62. package/src/system/FilterDropdown/FilterDropdown.test.tsx +52 -0
  63. package/src/system/FilterDropdown/FilterDropdown.tsx +92 -0
  64. package/src/system/Hr/Hr.stories.tsx +48 -0
  65. package/src/system/Hr/Hr.test.tsx +22 -0
  66. package/src/system/Hr/Hr.tsx +11 -0
  67. package/src/system/Link/Link.stories.tsx +42 -1
  68. package/src/system/Link/Link.tsx +17 -8
  69. package/src/system/Nav/styles.ts +1 -0
  70. package/src/system/Page/Page.test.tsx +22 -0
  71. package/src/system/Page/Page.tsx +3 -0
  72. package/src/system/index.js +4 -0
  73. package/src/system/theme/index.js +7 -8
  74. package/src/system/utils/stories/CustomLink.tsx +6 -0
  75. package/tokens/valet-core/$metadata.json +1 -17
  76. package/tokens/valet-core/$themes.json +0 -2586
  77. package/src/system/Dropdown/Dropdown.js +0 -101
  78. package/src/system/Dropdown/DropdownContent.js +0 -50
  79. package/src/system/Dropdown/DropdownItem.js +0 -108
  80. package/src/system/Dropdown/DropdownLabel.js +0 -31
  81. package/src/system/Dropdown/DropdownSeparator.js +0 -30
  82. package/tokens/valet-core/figma-parsely-web-type.json +0 -1217
  83. package/tokens/valet-core/figma-valet-web-type.json +0 -1217
  84. package/tokens/valet-core/figma-wpvip-services-web-type.json +0 -1267
  85. package/tokens/valet-core/figma-wpvip-web-type.json +0 -1213
  86. package/tokens/valet-core/parsely-web-color.json +0 -729
  87. package/tokens/valet-core/parsely-web-core.json +0 -172
  88. package/tokens/valet-core/parsely-web-type.json +0 -362
  89. package/tokens/valet-core/valet-web-color.json +0 -677
  90. package/tokens/valet-core/valet-web-core.json +0 -172
  91. package/tokens/valet-core/wpvip-services-web-color.json +0 -730
  92. package/tokens/valet-core/wpvip-services-web-core.json +0 -172
  93. package/tokens/valet-core/wpvip-services-web-type.json +0 -412
  94. package/tokens/valet-core/wpvip-web-color-dark.json +0 -735
  95. package/tokens/valet-core/wpvip-web-color.json +0 -730
  96. package/tokens/valet-core/wpvip-web-type.json +0 -412
  97. package/tokens/valet-core/wpvip-web.json +0 -1310
package/tokens/valet-core/wpvip-web-type.json DELETED
@@ -1,412 +0,0 @@
1
- {
2
- "body": {
3
- "1-short": {
4
- "value": {
5
- "fontFamily": "{fontFamily.sans}",
6
- "fontWeight": "{fontWeight.regular}",
7
- "lineHeight": "{lineHeight.4}",
8
- "fontSize": "{fontSize.static.2}"
9
- },
10
- "type": "typography"
11
- },
12
- "1-short-medium": {
13
- "value": {
14
- "fontFamily": "{fontFamily.sans}",
15
- "fontWeight": "{fontWeight.medium}",
16
- "lineHeight": "{lineHeight.4}",
17
- "fontSize": "{fontSize.static.2}"
18
- },
19
- "type": "typography"
20
- },
21
- "1-short-caps": {
22
- "value": {
23
- "fontFamily": "{fontFamily.sans}",
24
- "fontWeight": "{fontWeight.regular}",
25
- "lineHeight": "{lineHeight.4}",
26
- "fontSize": "{fontSize.static.2}",
27
- "textCase": "uppercase"
28
- },
29
- "type": "typography"
30
- },
31
- "2-short": {
32
- "value": {
33
- "fontFamily": "{fontFamily.sans}",
34
- "fontWeight": "{fontWeight.regular}",
35
- "lineHeight": "{lineHeight.4}",
36
- "fontSize": "{fontSize.static.3}"
37
- },
38
- "type": "typography"
39
- },
40
- "2-short-medium": {
41
- "value": {
42
- "fontFamily": "{fontFamily.sans}",
43
- "fontWeight": "{fontWeight.medium}",
44
- "lineHeight": "{lineHeight.4}",
45
- "fontSize": "{fontSize.static.3}"
46
- },
47
- "type": "typography"
48
- },
49
- "3-short": {
50
- "value": {
51
- "fontFamily": "{fontFamily.sans}",
52
- "fontWeight": "{fontWeight.regular}",
53
- "lineHeight": "{lineHeight.4}",
54
- "fontSize": "{fontSize.static.4}"
55
- },
56
- "type": "typography"
57
- },
58
- "4-short": {
59
- "value": {
60
- "fontFamily": "{fontFamily.sans}",
61
- "fontWeight": "{fontWeight.regular}",
62
- "lineHeight": "{lineHeight.4}",
63
- "fontSize": "{fontSize.static.5}"
64
- },
65
- "type": "typography"
66
- },
67
- "4-serif": {
68
- "value": {
69
- "fontFamily": "{fontFamily.serif}",
70
- "fontWeight": "{fontWeight.regular}",
71
- "lineHeight": "{lineHeight.5}",
72
- "fontSize": "{fontSize.static.5}"
73
- },
74
- "type": "typography"
75
- }
76
- },
77
- "heading": {
78
- "1": {
79
- "value": {
80
- "fontFamily": "{fontFamily.sans}",
81
- "fontWeight": "{fontWeight.medium}",
82
- "lineHeight": "{lineHeight.responsive}",
83
- "fontSize": "{fontSize.responsive.6}",
84
- "letterSpacing": "{letterSpacing.tight}"
85
- },
86
- "type": "typography"
87
- },
88
- "2": {
89
- "value": {
90
- "fontFamily": "{fontFamily.sans}",
91
- "fontWeight": "{fontWeight.medium}",
92
- "lineHeight": "{lineHeight.responsive}",
93
- "fontSize": "{fontSize.responsive.7}",
94
- "letterSpacing": "{letterSpacing.tight}"
95
- },
96
- "type": "typography"
97
- },
98
- "3": {
99
- "value": {
100
- "fontFamily": "{fontFamily.sans}",
101
- "fontWeight": "{fontWeight.medium}",
102
- "lineHeight": "{lineHeight.responsive}",
103
- "fontSize": "{fontSize.responsive.9}",
104
- "letterSpacing": "{letterSpacing.tight}"
105
- },
106
- "type": "typography"
107
- },
108
- "4": {
109
- "value": {
110
- "fontFamily": "{fontFamily.sans}",
111
- "fontWeight": "{fontWeight.medium}",
112
- "lineHeight": "{lineHeight.responsive}",
113
- "fontSize": "{fontSize.responsive.10}",
114
- "letterSpacing": "{letterSpacing.tight}"
115
- },
116
- "type": "typography"
117
- },
118
- "5": {
119
- "value": {
120
- "fontFamily": "{fontFamily.sans}",
121
- "fontWeight": "{fontWeight.medium}",
122
- "lineHeight": "{lineHeight.responsive}",
123
- "fontSize": "{fontSize.responsive.11}",
124
- "letterSpacing": "{letterSpacing.tight}"
125
- },
126
- "type": "typography"
127
- },
128
- "6": {
129
- "value": {
130
- "fontFamily": "{fontFamily.sans}",
131
- "fontWeight": "{fontWeight.medium}",
132
- "lineHeight": "{lineHeight.responsive}",
133
- "fontSize": "{fontSize.responsive.12}",
134
- "letterSpacing": "{letterSpacing.tight}"
135
- },
136
- "type": "typography"
137
- },
138
- "7": {
139
- "value": {
140
- "fontFamily": "{fontFamily.sans}",
141
- "fontWeight": "{fontWeight.medium}",
142
- "lineHeight": "{lineHeight.responsive}",
143
- "fontSize": "{fontSize.responsive.13}",
144
- "letterSpacing": "{letterSpacing.tight}"
145
- },
146
- "type": "typography"
147
- },
148
- "1-light": {
149
- "value": {
150
- "fontFamily": "{fontFamily.sans}",
151
- "fontWeight": "{fontWeight.light}",
152
- "lineHeight": "{lineHeight.responsive}",
153
- "fontSize": "{fontSize.responsive.6}",
154
- "letterSpacing": "{letterSpacing.tight}"
155
- },
156
- "type": "typography"
157
- },
158
- "2-light": {
159
- "value": {
160
- "fontFamily": "{fontFamily.sans}",
161
- "fontWeight": "{fontWeight.light}",
162
- "lineHeight": "{lineHeight.responsive}",
163
- "fontSize": "{fontSize.responsive.8}",
164
- "letterSpacing": "{letterSpacing.tight}"
165
- },
166
- "type": "typography"
167
- },
168
- "3-light": {
169
- "value": {
170
- "fontFamily": "{fontFamily.sans}",
171
- "fontWeight": "{fontWeight.light}",
172
- "lineHeight": "{lineHeight.responsive}",
173
- "fontSize": "{fontSize.responsive.9}",
174
- "letterSpacing": "{letterSpacing.tight}"
175
- },
176
- "type": "typography"
177
- },
178
- "4-light": {
179
- "value": {
180
- "fontFamily": "{fontFamily.sans}",
181
- "fontWeight": "{fontWeight.light}",
182
- "lineHeight": "{lineHeight.responsive}",
183
- "fontSize": "{fontSize.responsive.10}",
184
- "letterSpacing": "{letterSpacing.tight}"
185
- },
186
- "type": "typography"
187
- },
188
- "5-light": {
189
- "value": {
190
- "fontFamily": "{fontFamily.sans}",
191
- "fontWeight": "{fontWeight.light}",
192
- "lineHeight": "{lineHeight.responsive}",
193
- "fontSize": "{fontSize.responsive.11}",
194
- "letterSpacing": "{letterSpacing.tight}"
195
- },
196
- "type": "typography"
197
- },
198
- "5-serif": {
199
- "value": {
200
- "fontFamily": "{fontFamily.serif}",
201
- "fontWeight": "{fontWeight.regular}",
202
- "lineHeight": "{lineHeight.responsive}",
203
- "fontSize": "{fontSize.responsive.11}",
204
- "letterSpacing": "{letterSpacing.tight}"
205
- },
206
- "type": "typography"
207
- },
208
- "6-serif": {
209
- "value": {
210
- "fontFamily": "{fontFamily.serif}",
211
- "fontWeight": "{fontWeight.regular}",
212
- "lineHeight": "{lineHeight.responsive}",
213
- "fontSize": "{fontSize.responsive.12}",
214
- "letterSpacing": "{letterSpacing.tight}"
215
- },
216
- "type": "typography"
217
- },
218
- "7-serif": {
219
- "value": {
220
- "fontFamily": "{fontFamily.serif}",
221
- "fontWeight": "{fontWeight.regular}",
222
- "lineHeight": "{lineHeight.responsive}",
223
- "fontSize": "{fontSize.responsive.13}",
224
- "letterSpacing": "{letterSpacing.tight}"
225
- },
226
- "type": "typography"
227
- }
228
- },
229
- "paragraph": {
230
- "1": {
231
- "value": {
232
- "fontFamily": "{fontFamily.sans}",
233
- "fontWeight": "{fontWeight.regular}",
234
- "lineHeight": "{lineHeight.responsive}",
235
- "fontSize": "{fontSize.responsive.7}",
236
- "letterSpacing": "{letterSpacing.tight}"
237
- },
238
- "type": "typography"
239
- }
240
- },
241
- "quotation": {
242
- "1": {
243
- "value": {
244
- "fontFamily": "{fontFamily.serif}",
245
- "fontWeight": "{fontWeight.regular}",
246
- "lineHeight": "{lineHeight.4}",
247
- "fontSize": "{fontSize.responsive.8}",
248
- "letterSpacing": "{letterSpacing.tight}"
249
- },
250
- "type": "typography"
251
- },
252
- "2": {
253
- "value": {
254
- "fontFamily": "{fontFamily.serif}",
255
- "fontWeight": "{fontWeight.regular}",
256
- "lineHeight": "{lineHeight.4}",
257
- "fontSize": "{fontSize.responsive.10}",
258
- "letterSpacing": "{letterSpacing.tight}"
259
- },
260
- "type": "typography"
261
- },
262
- "3": {
263
- "value": {
264
- "fontFamily": "{fontFamily.serif}",
265
- "fontWeight": "{fontWeight.regular}",
266
- "lineHeight": "{lineHeight.3}",
267
- "fontSize": "{fontSize.responsive.11}",
268
- "letterSpacing": "{letterSpacing.tight}"
269
- },
270
- "type": "typography"
271
- }
272
- },
273
- "caption": {
274
- "1": {
275
- "value": {
276
- "fontFamily": "{fontFamily.sans}",
277
- "fontWeight": "{fontWeight.regular}",
278
- "lineHeight": "{lineHeight.4}",
279
- "fontSize": "{fontSize.static.1}",
280
- "letterSpacing": "{letterSpacing.loose}"
281
- },
282
- "type": "typography"
283
- },
284
- "2": {
285
- "value": {
286
- "fontFamily": "{fontFamily.sans}",
287
- "fontWeight": "{fontWeight.regular}",
288
- "lineHeight": "{lineHeight.4}",
289
- "fontSize": "{fontSize.static.2}",
290
- "letterSpacing": "{letterSpacing.loose}"
291
- },
292
- "type": "typography"
293
- }
294
- },
295
- "code": {
296
- "1": {
297
- "value": {
298
- "fontFamily": "{fontFamily.monospace}",
299
- "fontWeight": "{fontWeight.regular}",
300
- "lineHeight": "{lineHeight.4}",
301
- "fontSize": "{fontSize.static.2}"
302
- },
303
- "type": "typography"
304
- },
305
- "2": {
306
- "value": {
307
- "fontFamily": "{fontFamily.monospace}",
308
- "fontWeight": "{fontWeight.regular}",
309
- "lineHeight": "{lineHeight.4}",
310
- "fontSize": "{fontSize.static.3}"
311
- },
312
- "type": "typography"
313
- }
314
- },
315
- "supporting": {
316
- "helper-text": {
317
- "1": {
318
- "value": {
319
- "fontFamily": "{fontFamily.sans}",
320
- "fontWeight": "{fontWeight.regular}",
321
- "lineHeight": "{lineHeight.4}",
322
- "fontSize": "{fontSize.static.1}",
323
- "letterSpacing": "{letterSpacing.loose}"
324
- },
325
- "type": "typography"
326
- },
327
- "1-caps": {
328
- "value": {
329
- "fontFamily": "{fontFamily.sans}",
330
- "fontWeight": "{fontWeight.regular}",
331
- "lineHeight": "{lineHeight.4}",
332
- "fontSize": "{fontSize.static.1}",
333
- "letterSpacing": "{letterSpacing.loose}",
334
- "textCase": "{textCase.uppercase}"
335
- },
336
- "type": "typography"
337
- }
338
- },
339
- "support-text": {
340
- "1": {
341
- "value": {
342
- "fontFamily": "{fontFamily.accent}",
343
- "fontWeight": "{fontWeight.medium}",
344
- "lineHeight": "{lineHeight.4}",
345
- "fontSize": "{fontSize.static.1}",
346
- "letterSpacing": "{letterSpacing.loose}",
347
- "textCase": "{textCase.uppercase}"
348
- },
349
- "type": "typography"
350
- },
351
- "2": {
352
- "value": {
353
- "fontFamily": "{fontFamily.accent}",
354
- "fontWeight": "{fontWeight.medium}",
355
- "lineHeight": "{lineHeight.4}",
356
- "fontSize": "{fontSize.static.3}",
357
- "letterSpacing": "{letterSpacing.loose}",
358
- "textCase": "{textCase.uppercase}"
359
- },
360
- "type": "typography"
361
- }
362
- }
363
- },
364
- "fontFamily": {
365
- "sans": {
366
- "value": "Aktiv Grotesk VF",
367
- "type": "fontFamilies"
368
- },
369
- "serif": {
370
- "value": "IvarText-Regular",
371
- "type": "fontFamilies"
372
- },
373
- "display": {
374
- "value": "Recoleta",
375
- "type": "fontFamilies"
376
- },
377
- "accent": {
378
- "value": "Aktiv Grotesk EX",
379
- "type": "fontFamilies"
380
- },
381
- "mono": {
382
- "value": "AkkuratMonoLLWeb-Regular",
383
- "type": "fontFamilies"
384
- }
385
- },
386
- "letterSpacing": {
387
- "tight": {
388
- "value": "-0.01em",
389
- "type": "letterSpacing"
390
- },
391
- "none": {
392
- "value": "0em",
393
- "type": "letterSpacing"
394
- },
395
- "loose": {
396
- "value": "0.03em",
397
- "type": "letterSpacing"
398
- }
399
- },
400
- "statistic": {
401
- "1": {
402
- "value": {
403
- "fontFamily": "{fontFamily.sans}",
404
- "fontWeight": "{fontWeight.regular}",
405
- "lineHeight": "{lineHeight.responsive}",
406
- "fontSize": "{fontSize.responsive.12}",
407
- "letterSpacing": "{letterSpacing.tight}"
408
- },
409
- "type": "typography"
410
- }
411
- }
412
- }