@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
|
@@ -46,12 +46,24 @@ export declare const componentButton: {
|
|
|
46
46
|
right: string;
|
|
47
47
|
bottom: string;
|
|
48
48
|
left: string;
|
|
49
|
+
withIcon: {
|
|
50
|
+
iconLeft: {
|
|
51
|
+
left: string;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
49
54
|
};
|
|
50
55
|
typography: {
|
|
51
56
|
font: string;
|
|
52
57
|
letterSpacing: string;
|
|
53
58
|
fontWidth: number;
|
|
54
59
|
};
|
|
60
|
+
icon: {
|
|
61
|
+
size: string;
|
|
62
|
+
gap: string;
|
|
63
|
+
};
|
|
64
|
+
iconButton: {
|
|
65
|
+
width: string;
|
|
66
|
+
};
|
|
55
67
|
};
|
|
56
68
|
sm: {
|
|
57
69
|
height: string;
|
|
@@ -60,12 +72,24 @@ export declare const componentButton: {
|
|
|
60
72
|
right: string;
|
|
61
73
|
bottom: string;
|
|
62
74
|
left: string;
|
|
75
|
+
withIcon: {
|
|
76
|
+
iconLeft: {
|
|
77
|
+
left: string;
|
|
78
|
+
};
|
|
79
|
+
};
|
|
63
80
|
};
|
|
64
81
|
typography: {
|
|
65
82
|
font: string;
|
|
66
83
|
letterSpacing: string;
|
|
67
84
|
fontWidth: number;
|
|
68
85
|
};
|
|
86
|
+
icon: {
|
|
87
|
+
size: string;
|
|
88
|
+
gap: string;
|
|
89
|
+
};
|
|
90
|
+
iconButton: {
|
|
91
|
+
width: string;
|
|
92
|
+
};
|
|
69
93
|
};
|
|
70
94
|
md: {
|
|
71
95
|
height: string;
|
|
@@ -74,12 +98,24 @@ export declare const componentButton: {
|
|
|
74
98
|
right: string;
|
|
75
99
|
bottom: string;
|
|
76
100
|
left: string;
|
|
101
|
+
withIcon: {
|
|
102
|
+
iconLeft: {
|
|
103
|
+
left: string;
|
|
104
|
+
};
|
|
105
|
+
};
|
|
77
106
|
};
|
|
78
107
|
typography: {
|
|
79
108
|
font: string;
|
|
80
109
|
letterSpacing: string;
|
|
81
110
|
fontWidth: number;
|
|
82
111
|
};
|
|
112
|
+
icon: {
|
|
113
|
+
size: string;
|
|
114
|
+
gap: string;
|
|
115
|
+
};
|
|
116
|
+
iconButton: {
|
|
117
|
+
width: string;
|
|
118
|
+
};
|
|
83
119
|
};
|
|
84
120
|
lg: {
|
|
85
121
|
height: string;
|
|
@@ -88,12 +124,24 @@ export declare const componentButton: {
|
|
|
88
124
|
right: string;
|
|
89
125
|
bottom: string;
|
|
90
126
|
left: string;
|
|
127
|
+
withIcon: {
|
|
128
|
+
iconLeft: {
|
|
129
|
+
left: string;
|
|
130
|
+
};
|
|
131
|
+
};
|
|
91
132
|
};
|
|
92
133
|
typography: {
|
|
93
134
|
font: string;
|
|
94
135
|
letterSpacing: string;
|
|
95
136
|
fontWidth: number;
|
|
96
137
|
};
|
|
138
|
+
icon: {
|
|
139
|
+
size: string;
|
|
140
|
+
gap: string;
|
|
141
|
+
};
|
|
142
|
+
iconButton: {
|
|
143
|
+
width: string;
|
|
144
|
+
};
|
|
97
145
|
};
|
|
98
146
|
};
|
|
99
147
|
'emphasised-secondary': {
|
|
@@ -123,12 +171,24 @@ export declare const componentButton: {
|
|
|
123
171
|
right: string;
|
|
124
172
|
bottom: string;
|
|
125
173
|
left: string;
|
|
174
|
+
withIcon: {
|
|
175
|
+
iconLeft: {
|
|
176
|
+
left: string;
|
|
177
|
+
};
|
|
178
|
+
};
|
|
126
179
|
};
|
|
127
180
|
typography: {
|
|
128
181
|
font: string;
|
|
129
182
|
letterSpacing: string;
|
|
130
183
|
fontWidth: number;
|
|
131
184
|
};
|
|
185
|
+
icon: {
|
|
186
|
+
size: string;
|
|
187
|
+
gap: string;
|
|
188
|
+
};
|
|
189
|
+
iconButton: {
|
|
190
|
+
width: string;
|
|
191
|
+
};
|
|
132
192
|
};
|
|
133
193
|
sm: {
|
|
134
194
|
height: string;
|
|
@@ -137,12 +197,24 @@ export declare const componentButton: {
|
|
|
137
197
|
right: string;
|
|
138
198
|
bottom: string;
|
|
139
199
|
left: string;
|
|
200
|
+
withIcon: {
|
|
201
|
+
iconLeft: {
|
|
202
|
+
left: string;
|
|
203
|
+
};
|
|
204
|
+
};
|
|
140
205
|
};
|
|
141
206
|
typography: {
|
|
142
207
|
font: string;
|
|
143
208
|
letterSpacing: string;
|
|
144
209
|
fontWidth: number;
|
|
145
210
|
};
|
|
211
|
+
icon: {
|
|
212
|
+
size: string;
|
|
213
|
+
gap: string;
|
|
214
|
+
};
|
|
215
|
+
iconButton: {
|
|
216
|
+
width: string;
|
|
217
|
+
};
|
|
146
218
|
};
|
|
147
219
|
md: {
|
|
148
220
|
height: string;
|
|
@@ -151,12 +223,24 @@ export declare const componentButton: {
|
|
|
151
223
|
right: string;
|
|
152
224
|
bottom: string;
|
|
153
225
|
left: string;
|
|
226
|
+
withIcon: {
|
|
227
|
+
iconLeft: {
|
|
228
|
+
left: string;
|
|
229
|
+
};
|
|
230
|
+
};
|
|
154
231
|
};
|
|
155
232
|
typography: {
|
|
156
233
|
font: string;
|
|
157
234
|
letterSpacing: string;
|
|
158
235
|
fontWidth: number;
|
|
159
236
|
};
|
|
237
|
+
icon: {
|
|
238
|
+
size: string;
|
|
239
|
+
gap: string;
|
|
240
|
+
};
|
|
241
|
+
iconButton: {
|
|
242
|
+
width: string;
|
|
243
|
+
};
|
|
160
244
|
};
|
|
161
245
|
lg: {
|
|
162
246
|
height: string;
|
|
@@ -165,12 +249,24 @@ export declare const componentButton: {
|
|
|
165
249
|
right: string;
|
|
166
250
|
bottom: string;
|
|
167
251
|
left: string;
|
|
252
|
+
withIcon: {
|
|
253
|
+
iconLeft: {
|
|
254
|
+
left: string;
|
|
255
|
+
};
|
|
256
|
+
};
|
|
168
257
|
};
|
|
169
258
|
typography: {
|
|
170
259
|
font: string;
|
|
171
260
|
letterSpacing: string;
|
|
172
261
|
fontWidth: number;
|
|
173
262
|
};
|
|
263
|
+
icon: {
|
|
264
|
+
size: string;
|
|
265
|
+
gap: string;
|
|
266
|
+
};
|
|
267
|
+
iconButton: {
|
|
268
|
+
width: string;
|
|
269
|
+
};
|
|
174
270
|
};
|
|
175
271
|
};
|
|
176
272
|
'neutral-primary': {
|
|
@@ -200,12 +296,24 @@ export declare const componentButton: {
|
|
|
200
296
|
right: string;
|
|
201
297
|
bottom: string;
|
|
202
298
|
left: string;
|
|
299
|
+
withIcon: {
|
|
300
|
+
iconLeft: {
|
|
301
|
+
left: string;
|
|
302
|
+
};
|
|
303
|
+
};
|
|
203
304
|
};
|
|
204
305
|
typography: {
|
|
205
306
|
font: string;
|
|
206
307
|
letterSpacing: string;
|
|
207
308
|
fontWidth: number;
|
|
208
309
|
};
|
|
310
|
+
icon: {
|
|
311
|
+
size: string;
|
|
312
|
+
gap: string;
|
|
313
|
+
};
|
|
314
|
+
iconButton: {
|
|
315
|
+
width: string;
|
|
316
|
+
};
|
|
209
317
|
};
|
|
210
318
|
sm: {
|
|
211
319
|
height: string;
|
|
@@ -214,12 +322,24 @@ export declare const componentButton: {
|
|
|
214
322
|
right: string;
|
|
215
323
|
bottom: string;
|
|
216
324
|
left: string;
|
|
325
|
+
withIcon: {
|
|
326
|
+
iconLeft: {
|
|
327
|
+
left: string;
|
|
328
|
+
};
|
|
329
|
+
};
|
|
217
330
|
};
|
|
218
331
|
typography: {
|
|
219
332
|
font: string;
|
|
220
333
|
letterSpacing: string;
|
|
221
334
|
fontWidth: number;
|
|
222
335
|
};
|
|
336
|
+
icon: {
|
|
337
|
+
size: string;
|
|
338
|
+
gap: string;
|
|
339
|
+
};
|
|
340
|
+
iconButton: {
|
|
341
|
+
width: string;
|
|
342
|
+
};
|
|
223
343
|
};
|
|
224
344
|
md: {
|
|
225
345
|
height: string;
|
|
@@ -228,12 +348,24 @@ export declare const componentButton: {
|
|
|
228
348
|
right: string;
|
|
229
349
|
bottom: string;
|
|
230
350
|
left: string;
|
|
351
|
+
withIcon: {
|
|
352
|
+
iconLeft: {
|
|
353
|
+
left: string;
|
|
354
|
+
};
|
|
355
|
+
};
|
|
231
356
|
};
|
|
232
357
|
typography: {
|
|
233
358
|
font: string;
|
|
234
359
|
letterSpacing: string;
|
|
235
360
|
fontWidth: number;
|
|
236
361
|
};
|
|
362
|
+
icon: {
|
|
363
|
+
size: string;
|
|
364
|
+
gap: string;
|
|
365
|
+
};
|
|
366
|
+
iconButton: {
|
|
367
|
+
width: string;
|
|
368
|
+
};
|
|
237
369
|
};
|
|
238
370
|
lg: {
|
|
239
371
|
height: string;
|
|
@@ -242,12 +374,24 @@ export declare const componentButton: {
|
|
|
242
374
|
right: string;
|
|
243
375
|
bottom: string;
|
|
244
376
|
left: string;
|
|
377
|
+
withIcon: {
|
|
378
|
+
iconLeft: {
|
|
379
|
+
left: string;
|
|
380
|
+
};
|
|
381
|
+
};
|
|
245
382
|
};
|
|
246
383
|
typography: {
|
|
247
384
|
font: string;
|
|
248
385
|
letterSpacing: string;
|
|
249
386
|
fontWidth: number;
|
|
250
387
|
};
|
|
388
|
+
icon: {
|
|
389
|
+
size: string;
|
|
390
|
+
gap: string;
|
|
391
|
+
};
|
|
392
|
+
iconButton: {
|
|
393
|
+
width: string;
|
|
394
|
+
};
|
|
251
395
|
};
|
|
252
396
|
};
|
|
253
397
|
'neutral-secondary': {
|
|
@@ -277,12 +421,24 @@ export declare const componentButton: {
|
|
|
277
421
|
right: string;
|
|
278
422
|
bottom: string;
|
|
279
423
|
left: string;
|
|
424
|
+
withIcon: {
|
|
425
|
+
iconLeft: {
|
|
426
|
+
left: string;
|
|
427
|
+
};
|
|
428
|
+
};
|
|
280
429
|
};
|
|
281
430
|
typography: {
|
|
282
431
|
font: string;
|
|
283
432
|
letterSpacing: string;
|
|
284
433
|
fontWidth: number;
|
|
285
434
|
};
|
|
435
|
+
icon: {
|
|
436
|
+
size: string;
|
|
437
|
+
gap: string;
|
|
438
|
+
};
|
|
439
|
+
iconButton: {
|
|
440
|
+
width: string;
|
|
441
|
+
};
|
|
286
442
|
};
|
|
287
443
|
sm: {
|
|
288
444
|
height: string;
|
|
@@ -291,12 +447,24 @@ export declare const componentButton: {
|
|
|
291
447
|
right: string;
|
|
292
448
|
bottom: string;
|
|
293
449
|
left: string;
|
|
450
|
+
withIcon: {
|
|
451
|
+
iconLeft: {
|
|
452
|
+
left: string;
|
|
453
|
+
};
|
|
454
|
+
};
|
|
294
455
|
};
|
|
295
456
|
typography: {
|
|
296
457
|
font: string;
|
|
297
458
|
letterSpacing: string;
|
|
298
459
|
fontWidth: number;
|
|
299
460
|
};
|
|
461
|
+
icon: {
|
|
462
|
+
size: string;
|
|
463
|
+
gap: string;
|
|
464
|
+
};
|
|
465
|
+
iconButton: {
|
|
466
|
+
width: string;
|
|
467
|
+
};
|
|
300
468
|
};
|
|
301
469
|
md: {
|
|
302
470
|
height: string;
|
|
@@ -305,12 +473,24 @@ export declare const componentButton: {
|
|
|
305
473
|
right: string;
|
|
306
474
|
bottom: string;
|
|
307
475
|
left: string;
|
|
476
|
+
withIcon: {
|
|
477
|
+
iconLeft: {
|
|
478
|
+
left: string;
|
|
479
|
+
};
|
|
480
|
+
};
|
|
308
481
|
};
|
|
309
482
|
typography: {
|
|
310
483
|
font: string;
|
|
311
484
|
letterSpacing: string;
|
|
312
485
|
fontWidth: number;
|
|
313
486
|
};
|
|
487
|
+
icon: {
|
|
488
|
+
size: string;
|
|
489
|
+
gap: string;
|
|
490
|
+
};
|
|
491
|
+
iconButton: {
|
|
492
|
+
width: string;
|
|
493
|
+
};
|
|
314
494
|
};
|
|
315
495
|
lg: {
|
|
316
496
|
height: string;
|
|
@@ -319,12 +499,24 @@ export declare const componentButton: {
|
|
|
319
499
|
right: string;
|
|
320
500
|
bottom: string;
|
|
321
501
|
left: string;
|
|
502
|
+
withIcon: {
|
|
503
|
+
iconLeft: {
|
|
504
|
+
left: string;
|
|
505
|
+
};
|
|
506
|
+
};
|
|
322
507
|
};
|
|
323
508
|
typography: {
|
|
324
509
|
font: string;
|
|
325
510
|
letterSpacing: string;
|
|
326
511
|
fontWidth: number;
|
|
327
512
|
};
|
|
513
|
+
icon: {
|
|
514
|
+
size: string;
|
|
515
|
+
gap: string;
|
|
516
|
+
};
|
|
517
|
+
iconButton: {
|
|
518
|
+
width: string;
|
|
519
|
+
};
|
|
328
520
|
};
|
|
329
521
|
};
|
|
330
522
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guardian/stand",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
|
|
6
6
|
"exports": {
|
|
@@ -24,6 +24,16 @@
|
|
|
24
24
|
"import": "./dist/link-button.js",
|
|
25
25
|
"require": "./dist/link-button.cjs"
|
|
26
26
|
},
|
|
27
|
+
"./icon-button": {
|
|
28
|
+
"types": "./dist/types/icon-button.d.ts",
|
|
29
|
+
"import": "./dist/icon-button.js",
|
|
30
|
+
"require": "./dist/icon-button.cjs"
|
|
31
|
+
},
|
|
32
|
+
"./icon-link-button": {
|
|
33
|
+
"types": "./dist/types/icon-link-button.d.ts",
|
|
34
|
+
"import": "./dist/icon-link-button.js",
|
|
35
|
+
"require": "./dist/icon-link-button.cjs"
|
|
36
|
+
},
|
|
27
37
|
"./typography": {
|
|
28
38
|
"types": "./dist/types/typography.d.ts",
|
|
29
39
|
"import": "./dist/typography.js",
|
|
@@ -88,6 +98,12 @@
|
|
|
88
98
|
"link-button": [
|
|
89
99
|
"./dist/types/link-button.d.ts"
|
|
90
100
|
],
|
|
101
|
+
"icon-button": [
|
|
102
|
+
"./dist/types/icon-button.d.ts"
|
|
103
|
+
],
|
|
104
|
+
"icon-link-button": [
|
|
105
|
+
"./dist/types/icon-link-button.d.ts"
|
|
106
|
+
],
|
|
91
107
|
"typography": [
|
|
92
108
|
"./dist/types/typography.d.ts"
|
|
93
109
|
],
|
|
@@ -112,8 +128,7 @@
|
|
|
112
128
|
"dist"
|
|
113
129
|
],
|
|
114
130
|
"repository": {
|
|
115
|
-
"url": "https://github.com/guardian/
|
|
116
|
-
"directory": "stand-component-library"
|
|
131
|
+
"url": "https://github.com/guardian/stand"
|
|
117
132
|
},
|
|
118
133
|
"main": "./dist/index.cjs",
|
|
119
134
|
"module": "./dist/index.js",
|
|
@@ -235,6 +250,7 @@
|
|
|
235
250
|
"format:fix": "prettier --write .",
|
|
236
251
|
"tsc": "tsc",
|
|
237
252
|
"test": "jest",
|
|
253
|
+
"test:setup-e2e": "playwright install --with-deps",
|
|
238
254
|
"test:e2e": "playwright test -c playwright-ct.config.ts",
|
|
239
255
|
"test:react-matrix": "./scripts/test-react-matrix.sh"
|
|
240
256
|
}
|