@guardian/stand 0.0.10 → 0.0.12
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.
- package/README.md +14 -21
- package/dist/components/button/Button.cjs +8 -2
- package/dist/components/button/Button.js +6 -4
- package/dist/components/button/styles.cjs +12 -4
- package/dist/components/button/styles.js +11 -1
- package/dist/components/byline/Byline.cjs +4 -18
- package/dist/components/byline/Preview.cjs +1 -8
- package/dist/components/byline/plugins.cjs +3 -13
- package/dist/components/icon/Icon.cjs +1 -4
- package/dist/components/icon/Icon.js +1 -4
- package/dist/components/icon-button/IconButton.cjs +45 -0
- package/dist/components/icon-button/IconButton.js +26 -0
- package/dist/components/icon-button/styles.cjs +9 -0
- package/dist/components/icon-button/styles.js +6 -0
- package/dist/components/icon-link-button/IconLinkButton.cjs +42 -0
- package/dist/components/icon-link-button/IconLinkButton.js +23 -0
- package/dist/components/icon-link-button/styles.cjs +9 -0
- package/dist/components/icon-link-button/styles.js +6 -0
- package/dist/components/link-button/LinkButton.cjs +8 -2
- package/dist/components/link-button/LinkButton.js +7 -5
- package/dist/components/user-menu/UserMenu.cjs +1 -8
- package/dist/fonts/OpenSans.css +64 -68
- package/dist/icon-button.cjs +7 -0
- package/dist/icon-button.js +1 -0
- package/dist/icon-link-button.cjs +7 -0
- package/dist/icon-link-button.js +1 -0
- package/dist/styleD/build/css/component/button.css +79 -16
- package/dist/styleD/build/css/semantic/typography.css +5 -10
- package/dist/styleD/build/typescript/component/button.cjs +208 -16
- package/dist/styleD/build/typescript/component/button.js +208 -16
- package/dist/types/components/button/Button.d.ts +1 -1
- package/dist/types/components/button/styles.d.ts +1 -1
- package/dist/types/components/button/types.d.ts +5 -0
- package/dist/types/components/icon-button/IconButton.d.ts +2 -0
- package/dist/types/components/icon-button/styles.d.ts +522 -0
- package/dist/types/components/icon-button/types.d.ts +26 -0
- package/dist/types/components/icon-link-button/IconLinkButton.d.ts +2 -0
- package/dist/types/components/icon-link-button/styles.d.ts +522 -0
- package/dist/types/components/icon-link-button/types.d.ts +26 -0
- package/dist/types/components/link-button/LinkButton.d.ts +1 -1
- package/dist/types/components/link-button/styles.d.ts +193 -1
- package/dist/types/components/link-button/types.d.ts +5 -0
- package/dist/types/icon-button.d.ts +20 -0
- package/dist/types/icon-link-button.d.ts +20 -0
- package/dist/types/styleD/build/typescript/component/button.d.ts +192 -0
- package/package.json +19 -3
|
@@ -44,12 +44,24 @@ const componentButton = {
|
|
|
44
44
|
top: "0.25rem",
|
|
45
45
|
right: "0.5rem",
|
|
46
46
|
bottom: "0.25rem",
|
|
47
|
-
left: "0.5rem"
|
|
47
|
+
left: "0.5rem",
|
|
48
|
+
withIcon: {
|
|
49
|
+
iconLeft: {
|
|
50
|
+
left: "0.25rem"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
48
53
|
},
|
|
49
54
|
typography: {
|
|
50
55
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
51
56
|
letterSpacing: "0rem",
|
|
52
57
|
fontWidth: 95
|
|
58
|
+
},
|
|
59
|
+
icon: {
|
|
60
|
+
size: "1.125rem",
|
|
61
|
+
gap: "0.25rem"
|
|
62
|
+
},
|
|
63
|
+
iconButton: {
|
|
64
|
+
width: "1.5rem"
|
|
53
65
|
}
|
|
54
66
|
},
|
|
55
67
|
sm: {
|
|
@@ -58,12 +70,24 @@ const componentButton = {
|
|
|
58
70
|
top: "0.25rem",
|
|
59
71
|
right: "0.625rem",
|
|
60
72
|
bottom: "0.25rem",
|
|
61
|
-
left: "0.625rem"
|
|
73
|
+
left: "0.625rem",
|
|
74
|
+
withIcon: {
|
|
75
|
+
iconLeft: {
|
|
76
|
+
left: "0.5rem"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
62
79
|
},
|
|
63
80
|
typography: {
|
|
64
81
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
65
82
|
letterSpacing: "-0.0125rem",
|
|
66
83
|
fontWidth: 95
|
|
84
|
+
},
|
|
85
|
+
icon: {
|
|
86
|
+
size: "1.125rem",
|
|
87
|
+
gap: "0.25rem"
|
|
88
|
+
},
|
|
89
|
+
iconButton: {
|
|
90
|
+
width: "2rem"
|
|
67
91
|
}
|
|
68
92
|
},
|
|
69
93
|
md: {
|
|
@@ -72,12 +96,24 @@ const componentButton = {
|
|
|
72
96
|
top: "0.25rem",
|
|
73
97
|
right: "0.75rem",
|
|
74
98
|
bottom: "0.25rem",
|
|
75
|
-
left: "0.75rem"
|
|
99
|
+
left: "0.75rem",
|
|
100
|
+
withIcon: {
|
|
101
|
+
iconLeft: {
|
|
102
|
+
left: "0.5rem"
|
|
103
|
+
}
|
|
104
|
+
}
|
|
76
105
|
},
|
|
77
106
|
typography: {
|
|
78
107
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
79
108
|
letterSpacing: "-0.0125rem",
|
|
80
109
|
fontWidth: 95
|
|
110
|
+
},
|
|
111
|
+
icon: {
|
|
112
|
+
size: "1.25rem",
|
|
113
|
+
gap: "0.25rem"
|
|
114
|
+
},
|
|
115
|
+
iconButton: {
|
|
116
|
+
width: "2.5rem"
|
|
81
117
|
}
|
|
82
118
|
},
|
|
83
119
|
lg: {
|
|
@@ -86,12 +122,24 @@ const componentButton = {
|
|
|
86
122
|
top: "0.25rem",
|
|
87
123
|
right: "1rem",
|
|
88
124
|
bottom: "0.25rem",
|
|
89
|
-
left: "1rem"
|
|
125
|
+
left: "1rem",
|
|
126
|
+
withIcon: {
|
|
127
|
+
iconLeft: {
|
|
128
|
+
left: "0.75rem"
|
|
129
|
+
}
|
|
130
|
+
}
|
|
90
131
|
},
|
|
91
132
|
typography: {
|
|
92
133
|
font: "normal 700 1rem/1 Open Sans",
|
|
93
134
|
letterSpacing: "-0.0125rem",
|
|
94
135
|
fontWidth: 95
|
|
136
|
+
},
|
|
137
|
+
icon: {
|
|
138
|
+
size: "1.5rem",
|
|
139
|
+
gap: "0.25rem"
|
|
140
|
+
},
|
|
141
|
+
iconButton: {
|
|
142
|
+
width: "3rem"
|
|
95
143
|
}
|
|
96
144
|
}
|
|
97
145
|
},
|
|
@@ -121,12 +169,24 @@ const componentButton = {
|
|
|
121
169
|
top: "0.25rem",
|
|
122
170
|
right: "0.5rem",
|
|
123
171
|
bottom: "0.25rem",
|
|
124
|
-
left: "0.5rem"
|
|
172
|
+
left: "0.5rem",
|
|
173
|
+
withIcon: {
|
|
174
|
+
iconLeft: {
|
|
175
|
+
left: "0.25rem"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
125
178
|
},
|
|
126
179
|
typography: {
|
|
127
180
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
128
181
|
letterSpacing: "0rem",
|
|
129
182
|
fontWidth: 95
|
|
183
|
+
},
|
|
184
|
+
icon: {
|
|
185
|
+
size: "1.125rem",
|
|
186
|
+
gap: "0.25rem"
|
|
187
|
+
},
|
|
188
|
+
iconButton: {
|
|
189
|
+
width: "1.5rem"
|
|
130
190
|
}
|
|
131
191
|
},
|
|
132
192
|
sm: {
|
|
@@ -135,12 +195,24 @@ const componentButton = {
|
|
|
135
195
|
top: "0.25rem",
|
|
136
196
|
right: "0.625rem",
|
|
137
197
|
bottom: "0.25rem",
|
|
138
|
-
left: "0.625rem"
|
|
198
|
+
left: "0.625rem",
|
|
199
|
+
withIcon: {
|
|
200
|
+
iconLeft: {
|
|
201
|
+
left: "0.5rem"
|
|
202
|
+
}
|
|
203
|
+
}
|
|
139
204
|
},
|
|
140
205
|
typography: {
|
|
141
206
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
142
207
|
letterSpacing: "-0.0125rem",
|
|
143
208
|
fontWidth: 95
|
|
209
|
+
},
|
|
210
|
+
icon: {
|
|
211
|
+
size: "1.125rem",
|
|
212
|
+
gap: "0.25rem"
|
|
213
|
+
},
|
|
214
|
+
iconButton: {
|
|
215
|
+
width: "2rem"
|
|
144
216
|
}
|
|
145
217
|
},
|
|
146
218
|
md: {
|
|
@@ -149,12 +221,24 @@ const componentButton = {
|
|
|
149
221
|
top: "0.25rem",
|
|
150
222
|
right: "0.75rem",
|
|
151
223
|
bottom: "0.25rem",
|
|
152
|
-
left: "0.75rem"
|
|
224
|
+
left: "0.75rem",
|
|
225
|
+
withIcon: {
|
|
226
|
+
iconLeft: {
|
|
227
|
+
left: "0.5rem"
|
|
228
|
+
}
|
|
229
|
+
}
|
|
153
230
|
},
|
|
154
231
|
typography: {
|
|
155
232
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
156
233
|
letterSpacing: "-0.0125rem",
|
|
157
234
|
fontWidth: 95
|
|
235
|
+
},
|
|
236
|
+
icon: {
|
|
237
|
+
size: "1.25rem",
|
|
238
|
+
gap: "0.25rem"
|
|
239
|
+
},
|
|
240
|
+
iconButton: {
|
|
241
|
+
width: "2.5rem"
|
|
158
242
|
}
|
|
159
243
|
},
|
|
160
244
|
lg: {
|
|
@@ -163,12 +247,24 @@ const componentButton = {
|
|
|
163
247
|
top: "0.25rem",
|
|
164
248
|
right: "1rem",
|
|
165
249
|
bottom: "0.25rem",
|
|
166
|
-
left: "1rem"
|
|
250
|
+
left: "1rem",
|
|
251
|
+
withIcon: {
|
|
252
|
+
iconLeft: {
|
|
253
|
+
left: "0.75rem"
|
|
254
|
+
}
|
|
255
|
+
}
|
|
167
256
|
},
|
|
168
257
|
typography: {
|
|
169
258
|
font: "normal 700 1rem/1 Open Sans",
|
|
170
259
|
letterSpacing: "-0.0125rem",
|
|
171
260
|
fontWidth: 95
|
|
261
|
+
},
|
|
262
|
+
icon: {
|
|
263
|
+
size: "1.5rem",
|
|
264
|
+
gap: "0.25rem"
|
|
265
|
+
},
|
|
266
|
+
iconButton: {
|
|
267
|
+
width: "3rem"
|
|
172
268
|
}
|
|
173
269
|
}
|
|
174
270
|
},
|
|
@@ -198,12 +294,24 @@ const componentButton = {
|
|
|
198
294
|
top: "0.25rem",
|
|
199
295
|
right: "0.5rem",
|
|
200
296
|
bottom: "0.25rem",
|
|
201
|
-
left: "0.5rem"
|
|
297
|
+
left: "0.5rem",
|
|
298
|
+
withIcon: {
|
|
299
|
+
iconLeft: {
|
|
300
|
+
left: "0.25rem"
|
|
301
|
+
}
|
|
302
|
+
}
|
|
202
303
|
},
|
|
203
304
|
typography: {
|
|
204
305
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
205
306
|
letterSpacing: "0rem",
|
|
206
307
|
fontWidth: 95
|
|
308
|
+
},
|
|
309
|
+
icon: {
|
|
310
|
+
size: "1.125rem",
|
|
311
|
+
gap: "0.25rem"
|
|
312
|
+
},
|
|
313
|
+
iconButton: {
|
|
314
|
+
width: "1.5rem"
|
|
207
315
|
}
|
|
208
316
|
},
|
|
209
317
|
sm: {
|
|
@@ -212,12 +320,24 @@ const componentButton = {
|
|
|
212
320
|
top: "0.25rem",
|
|
213
321
|
right: "0.625rem",
|
|
214
322
|
bottom: "0.25rem",
|
|
215
|
-
left: "0.625rem"
|
|
323
|
+
left: "0.625rem",
|
|
324
|
+
withIcon: {
|
|
325
|
+
iconLeft: {
|
|
326
|
+
left: "0.5rem"
|
|
327
|
+
}
|
|
328
|
+
}
|
|
216
329
|
},
|
|
217
330
|
typography: {
|
|
218
331
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
219
332
|
letterSpacing: "-0.0125rem",
|
|
220
333
|
fontWidth: 95
|
|
334
|
+
},
|
|
335
|
+
icon: {
|
|
336
|
+
size: "1.125rem",
|
|
337
|
+
gap: "0.25rem"
|
|
338
|
+
},
|
|
339
|
+
iconButton: {
|
|
340
|
+
width: "2rem"
|
|
221
341
|
}
|
|
222
342
|
},
|
|
223
343
|
md: {
|
|
@@ -226,12 +346,24 @@ const componentButton = {
|
|
|
226
346
|
top: "0.25rem",
|
|
227
347
|
right: "0.75rem",
|
|
228
348
|
bottom: "0.25rem",
|
|
229
|
-
left: "0.75rem"
|
|
349
|
+
left: "0.75rem",
|
|
350
|
+
withIcon: {
|
|
351
|
+
iconLeft: {
|
|
352
|
+
left: "0.5rem"
|
|
353
|
+
}
|
|
354
|
+
}
|
|
230
355
|
},
|
|
231
356
|
typography: {
|
|
232
357
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
233
358
|
letterSpacing: "-0.0125rem",
|
|
234
359
|
fontWidth: 95
|
|
360
|
+
},
|
|
361
|
+
icon: {
|
|
362
|
+
size: "1.25rem",
|
|
363
|
+
gap: "0.25rem"
|
|
364
|
+
},
|
|
365
|
+
iconButton: {
|
|
366
|
+
width: "2.5rem"
|
|
235
367
|
}
|
|
236
368
|
},
|
|
237
369
|
lg: {
|
|
@@ -240,12 +372,24 @@ const componentButton = {
|
|
|
240
372
|
top: "0.25rem",
|
|
241
373
|
right: "1rem",
|
|
242
374
|
bottom: "0.25rem",
|
|
243
|
-
left: "1rem"
|
|
375
|
+
left: "1rem",
|
|
376
|
+
withIcon: {
|
|
377
|
+
iconLeft: {
|
|
378
|
+
left: "0.75rem"
|
|
379
|
+
}
|
|
380
|
+
}
|
|
244
381
|
},
|
|
245
382
|
typography: {
|
|
246
383
|
font: "normal 700 1rem/1 Open Sans",
|
|
247
384
|
letterSpacing: "-0.0125rem",
|
|
248
385
|
fontWidth: 95
|
|
386
|
+
},
|
|
387
|
+
icon: {
|
|
388
|
+
size: "1.5rem",
|
|
389
|
+
gap: "0.25rem"
|
|
390
|
+
},
|
|
391
|
+
iconButton: {
|
|
392
|
+
width: "3rem"
|
|
249
393
|
}
|
|
250
394
|
}
|
|
251
395
|
},
|
|
@@ -275,12 +419,24 @@ const componentButton = {
|
|
|
275
419
|
top: "0.25rem",
|
|
276
420
|
right: "0.5rem",
|
|
277
421
|
bottom: "0.25rem",
|
|
278
|
-
left: "0.5rem"
|
|
422
|
+
left: "0.5rem",
|
|
423
|
+
withIcon: {
|
|
424
|
+
iconLeft: {
|
|
425
|
+
left: "0.25rem"
|
|
426
|
+
}
|
|
427
|
+
}
|
|
279
428
|
},
|
|
280
429
|
typography: {
|
|
281
430
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
282
431
|
letterSpacing: "0rem",
|
|
283
432
|
fontWidth: 95
|
|
433
|
+
},
|
|
434
|
+
icon: {
|
|
435
|
+
size: "1.125rem",
|
|
436
|
+
gap: "0.25rem"
|
|
437
|
+
},
|
|
438
|
+
iconButton: {
|
|
439
|
+
width: "1.5rem"
|
|
284
440
|
}
|
|
285
441
|
},
|
|
286
442
|
sm: {
|
|
@@ -289,12 +445,24 @@ const componentButton = {
|
|
|
289
445
|
top: "0.25rem",
|
|
290
446
|
right: "0.625rem",
|
|
291
447
|
bottom: "0.25rem",
|
|
292
|
-
left: "0.625rem"
|
|
448
|
+
left: "0.625rem",
|
|
449
|
+
withIcon: {
|
|
450
|
+
iconLeft: {
|
|
451
|
+
left: "0.5rem"
|
|
452
|
+
}
|
|
453
|
+
}
|
|
293
454
|
},
|
|
294
455
|
typography: {
|
|
295
456
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
296
457
|
letterSpacing: "-0.0125rem",
|
|
297
458
|
fontWidth: 95
|
|
459
|
+
},
|
|
460
|
+
icon: {
|
|
461
|
+
size: "1.125rem",
|
|
462
|
+
gap: "0.25rem"
|
|
463
|
+
},
|
|
464
|
+
iconButton: {
|
|
465
|
+
width: "2rem"
|
|
298
466
|
}
|
|
299
467
|
},
|
|
300
468
|
md: {
|
|
@@ -303,12 +471,24 @@ const componentButton = {
|
|
|
303
471
|
top: "0.25rem",
|
|
304
472
|
right: "0.75rem",
|
|
305
473
|
bottom: "0.25rem",
|
|
306
|
-
left: "0.75rem"
|
|
474
|
+
left: "0.75rem",
|
|
475
|
+
withIcon: {
|
|
476
|
+
iconLeft: {
|
|
477
|
+
left: "0.5rem"
|
|
478
|
+
}
|
|
479
|
+
}
|
|
307
480
|
},
|
|
308
481
|
typography: {
|
|
309
482
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
310
483
|
letterSpacing: "-0.0125rem",
|
|
311
484
|
fontWidth: 95
|
|
485
|
+
},
|
|
486
|
+
icon: {
|
|
487
|
+
size: "1.25rem",
|
|
488
|
+
gap: "0.25rem"
|
|
489
|
+
},
|
|
490
|
+
iconButton: {
|
|
491
|
+
width: "2.5rem"
|
|
312
492
|
}
|
|
313
493
|
},
|
|
314
494
|
lg: {
|
|
@@ -317,12 +497,24 @@ const componentButton = {
|
|
|
317
497
|
top: "0.25rem",
|
|
318
498
|
right: "1rem",
|
|
319
499
|
bottom: "0.25rem",
|
|
320
|
-
left: "1rem"
|
|
500
|
+
left: "1rem",
|
|
501
|
+
withIcon: {
|
|
502
|
+
iconLeft: {
|
|
503
|
+
left: "0.75rem"
|
|
504
|
+
}
|
|
505
|
+
}
|
|
321
506
|
},
|
|
322
507
|
typography: {
|
|
323
508
|
font: "normal 700 1rem/1 Open Sans",
|
|
324
509
|
letterSpacing: "-0.0125rem",
|
|
325
510
|
fontWidth: 95
|
|
511
|
+
},
|
|
512
|
+
icon: {
|
|
513
|
+
size: "1.5rem",
|
|
514
|
+
gap: "0.25rem"
|
|
515
|
+
},
|
|
516
|
+
iconButton: {
|
|
517
|
+
width: "3rem"
|
|
326
518
|
}
|
|
327
519
|
}
|
|
328
520
|
}
|