@guardian/stand 0.0.10 → 0.0.11
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/dist/components/button/Button.cjs +11 -2
- package/dist/components/button/Button.js +9 -4
- package/dist/components/button/styles.cjs +11 -1
- package/dist/components/button/styles.js +11 -1
- 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 +47 -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/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 +64 -0
- 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 +17 -1
|
@@ -42,12 +42,24 @@ const componentButton = {
|
|
|
42
42
|
top: "0.25rem",
|
|
43
43
|
right: "0.5rem",
|
|
44
44
|
bottom: "0.25rem",
|
|
45
|
-
left: "0.5rem"
|
|
45
|
+
left: "0.5rem",
|
|
46
|
+
withIcon: {
|
|
47
|
+
iconLeft: {
|
|
48
|
+
left: "0.25rem"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
46
51
|
},
|
|
47
52
|
typography: {
|
|
48
53
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
49
54
|
letterSpacing: "0rem",
|
|
50
55
|
fontWidth: 95
|
|
56
|
+
},
|
|
57
|
+
icon: {
|
|
58
|
+
size: "1.125rem",
|
|
59
|
+
gap: "0.25rem"
|
|
60
|
+
},
|
|
61
|
+
iconButton: {
|
|
62
|
+
width: "1.5rem"
|
|
51
63
|
}
|
|
52
64
|
},
|
|
53
65
|
sm: {
|
|
@@ -56,12 +68,24 @@ const componentButton = {
|
|
|
56
68
|
top: "0.25rem",
|
|
57
69
|
right: "0.625rem",
|
|
58
70
|
bottom: "0.25rem",
|
|
59
|
-
left: "0.625rem"
|
|
71
|
+
left: "0.625rem",
|
|
72
|
+
withIcon: {
|
|
73
|
+
iconLeft: {
|
|
74
|
+
left: "0.5rem"
|
|
75
|
+
}
|
|
76
|
+
}
|
|
60
77
|
},
|
|
61
78
|
typography: {
|
|
62
79
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
63
80
|
letterSpacing: "-0.0125rem",
|
|
64
81
|
fontWidth: 95
|
|
82
|
+
},
|
|
83
|
+
icon: {
|
|
84
|
+
size: "1.125rem",
|
|
85
|
+
gap: "0.25rem"
|
|
86
|
+
},
|
|
87
|
+
iconButton: {
|
|
88
|
+
width: "2rem"
|
|
65
89
|
}
|
|
66
90
|
},
|
|
67
91
|
md: {
|
|
@@ -70,12 +94,24 @@ const componentButton = {
|
|
|
70
94
|
top: "0.25rem",
|
|
71
95
|
right: "0.75rem",
|
|
72
96
|
bottom: "0.25rem",
|
|
73
|
-
left: "0.75rem"
|
|
97
|
+
left: "0.75rem",
|
|
98
|
+
withIcon: {
|
|
99
|
+
iconLeft: {
|
|
100
|
+
left: "0.5rem"
|
|
101
|
+
}
|
|
102
|
+
}
|
|
74
103
|
},
|
|
75
104
|
typography: {
|
|
76
105
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
77
106
|
letterSpacing: "-0.0125rem",
|
|
78
107
|
fontWidth: 95
|
|
108
|
+
},
|
|
109
|
+
icon: {
|
|
110
|
+
size: "1.25rem",
|
|
111
|
+
gap: "0.25rem"
|
|
112
|
+
},
|
|
113
|
+
iconButton: {
|
|
114
|
+
width: "2.5rem"
|
|
79
115
|
}
|
|
80
116
|
},
|
|
81
117
|
lg: {
|
|
@@ -84,12 +120,24 @@ const componentButton = {
|
|
|
84
120
|
top: "0.25rem",
|
|
85
121
|
right: "1rem",
|
|
86
122
|
bottom: "0.25rem",
|
|
87
|
-
left: "1rem"
|
|
123
|
+
left: "1rem",
|
|
124
|
+
withIcon: {
|
|
125
|
+
iconLeft: {
|
|
126
|
+
left: "0.75rem"
|
|
127
|
+
}
|
|
128
|
+
}
|
|
88
129
|
},
|
|
89
130
|
typography: {
|
|
90
131
|
font: "normal 700 1rem/1 Open Sans",
|
|
91
132
|
letterSpacing: "-0.0125rem",
|
|
92
133
|
fontWidth: 95
|
|
134
|
+
},
|
|
135
|
+
icon: {
|
|
136
|
+
size: "1.5rem",
|
|
137
|
+
gap: "0.25rem"
|
|
138
|
+
},
|
|
139
|
+
iconButton: {
|
|
140
|
+
width: "3rem"
|
|
93
141
|
}
|
|
94
142
|
}
|
|
95
143
|
},
|
|
@@ -119,12 +167,24 @@ const componentButton = {
|
|
|
119
167
|
top: "0.25rem",
|
|
120
168
|
right: "0.5rem",
|
|
121
169
|
bottom: "0.25rem",
|
|
122
|
-
left: "0.5rem"
|
|
170
|
+
left: "0.5rem",
|
|
171
|
+
withIcon: {
|
|
172
|
+
iconLeft: {
|
|
173
|
+
left: "0.25rem"
|
|
174
|
+
}
|
|
175
|
+
}
|
|
123
176
|
},
|
|
124
177
|
typography: {
|
|
125
178
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
126
179
|
letterSpacing: "0rem",
|
|
127
180
|
fontWidth: 95
|
|
181
|
+
},
|
|
182
|
+
icon: {
|
|
183
|
+
size: "1.125rem",
|
|
184
|
+
gap: "0.25rem"
|
|
185
|
+
},
|
|
186
|
+
iconButton: {
|
|
187
|
+
width: "1.5rem"
|
|
128
188
|
}
|
|
129
189
|
},
|
|
130
190
|
sm: {
|
|
@@ -133,12 +193,24 @@ const componentButton = {
|
|
|
133
193
|
top: "0.25rem",
|
|
134
194
|
right: "0.625rem",
|
|
135
195
|
bottom: "0.25rem",
|
|
136
|
-
left: "0.625rem"
|
|
196
|
+
left: "0.625rem",
|
|
197
|
+
withIcon: {
|
|
198
|
+
iconLeft: {
|
|
199
|
+
left: "0.5rem"
|
|
200
|
+
}
|
|
201
|
+
}
|
|
137
202
|
},
|
|
138
203
|
typography: {
|
|
139
204
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
140
205
|
letterSpacing: "-0.0125rem",
|
|
141
206
|
fontWidth: 95
|
|
207
|
+
},
|
|
208
|
+
icon: {
|
|
209
|
+
size: "1.125rem",
|
|
210
|
+
gap: "0.25rem"
|
|
211
|
+
},
|
|
212
|
+
iconButton: {
|
|
213
|
+
width: "2rem"
|
|
142
214
|
}
|
|
143
215
|
},
|
|
144
216
|
md: {
|
|
@@ -147,12 +219,24 @@ const componentButton = {
|
|
|
147
219
|
top: "0.25rem",
|
|
148
220
|
right: "0.75rem",
|
|
149
221
|
bottom: "0.25rem",
|
|
150
|
-
left: "0.75rem"
|
|
222
|
+
left: "0.75rem",
|
|
223
|
+
withIcon: {
|
|
224
|
+
iconLeft: {
|
|
225
|
+
left: "0.5rem"
|
|
226
|
+
}
|
|
227
|
+
}
|
|
151
228
|
},
|
|
152
229
|
typography: {
|
|
153
230
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
154
231
|
letterSpacing: "-0.0125rem",
|
|
155
232
|
fontWidth: 95
|
|
233
|
+
},
|
|
234
|
+
icon: {
|
|
235
|
+
size: "1.25rem",
|
|
236
|
+
gap: "0.25rem"
|
|
237
|
+
},
|
|
238
|
+
iconButton: {
|
|
239
|
+
width: "2.5rem"
|
|
156
240
|
}
|
|
157
241
|
},
|
|
158
242
|
lg: {
|
|
@@ -161,12 +245,24 @@ const componentButton = {
|
|
|
161
245
|
top: "0.25rem",
|
|
162
246
|
right: "1rem",
|
|
163
247
|
bottom: "0.25rem",
|
|
164
|
-
left: "1rem"
|
|
248
|
+
left: "1rem",
|
|
249
|
+
withIcon: {
|
|
250
|
+
iconLeft: {
|
|
251
|
+
left: "0.75rem"
|
|
252
|
+
}
|
|
253
|
+
}
|
|
165
254
|
},
|
|
166
255
|
typography: {
|
|
167
256
|
font: "normal 700 1rem/1 Open Sans",
|
|
168
257
|
letterSpacing: "-0.0125rem",
|
|
169
258
|
fontWidth: 95
|
|
259
|
+
},
|
|
260
|
+
icon: {
|
|
261
|
+
size: "1.5rem",
|
|
262
|
+
gap: "0.25rem"
|
|
263
|
+
},
|
|
264
|
+
iconButton: {
|
|
265
|
+
width: "3rem"
|
|
170
266
|
}
|
|
171
267
|
}
|
|
172
268
|
},
|
|
@@ -196,12 +292,24 @@ const componentButton = {
|
|
|
196
292
|
top: "0.25rem",
|
|
197
293
|
right: "0.5rem",
|
|
198
294
|
bottom: "0.25rem",
|
|
199
|
-
left: "0.5rem"
|
|
295
|
+
left: "0.5rem",
|
|
296
|
+
withIcon: {
|
|
297
|
+
iconLeft: {
|
|
298
|
+
left: "0.25rem"
|
|
299
|
+
}
|
|
300
|
+
}
|
|
200
301
|
},
|
|
201
302
|
typography: {
|
|
202
303
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
203
304
|
letterSpacing: "0rem",
|
|
204
305
|
fontWidth: 95
|
|
306
|
+
},
|
|
307
|
+
icon: {
|
|
308
|
+
size: "1.125rem",
|
|
309
|
+
gap: "0.25rem"
|
|
310
|
+
},
|
|
311
|
+
iconButton: {
|
|
312
|
+
width: "1.5rem"
|
|
205
313
|
}
|
|
206
314
|
},
|
|
207
315
|
sm: {
|
|
@@ -210,12 +318,24 @@ const componentButton = {
|
|
|
210
318
|
top: "0.25rem",
|
|
211
319
|
right: "0.625rem",
|
|
212
320
|
bottom: "0.25rem",
|
|
213
|
-
left: "0.625rem"
|
|
321
|
+
left: "0.625rem",
|
|
322
|
+
withIcon: {
|
|
323
|
+
iconLeft: {
|
|
324
|
+
left: "0.5rem"
|
|
325
|
+
}
|
|
326
|
+
}
|
|
214
327
|
},
|
|
215
328
|
typography: {
|
|
216
329
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
217
330
|
letterSpacing: "-0.0125rem",
|
|
218
331
|
fontWidth: 95
|
|
332
|
+
},
|
|
333
|
+
icon: {
|
|
334
|
+
size: "1.125rem",
|
|
335
|
+
gap: "0.25rem"
|
|
336
|
+
},
|
|
337
|
+
iconButton: {
|
|
338
|
+
width: "2rem"
|
|
219
339
|
}
|
|
220
340
|
},
|
|
221
341
|
md: {
|
|
@@ -224,12 +344,24 @@ const componentButton = {
|
|
|
224
344
|
top: "0.25rem",
|
|
225
345
|
right: "0.75rem",
|
|
226
346
|
bottom: "0.25rem",
|
|
227
|
-
left: "0.75rem"
|
|
347
|
+
left: "0.75rem",
|
|
348
|
+
withIcon: {
|
|
349
|
+
iconLeft: {
|
|
350
|
+
left: "0.5rem"
|
|
351
|
+
}
|
|
352
|
+
}
|
|
228
353
|
},
|
|
229
354
|
typography: {
|
|
230
355
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
231
356
|
letterSpacing: "-0.0125rem",
|
|
232
357
|
fontWidth: 95
|
|
358
|
+
},
|
|
359
|
+
icon: {
|
|
360
|
+
size: "1.25rem",
|
|
361
|
+
gap: "0.25rem"
|
|
362
|
+
},
|
|
363
|
+
iconButton: {
|
|
364
|
+
width: "2.5rem"
|
|
233
365
|
}
|
|
234
366
|
},
|
|
235
367
|
lg: {
|
|
@@ -238,12 +370,24 @@ const componentButton = {
|
|
|
238
370
|
top: "0.25rem",
|
|
239
371
|
right: "1rem",
|
|
240
372
|
bottom: "0.25rem",
|
|
241
|
-
left: "1rem"
|
|
373
|
+
left: "1rem",
|
|
374
|
+
withIcon: {
|
|
375
|
+
iconLeft: {
|
|
376
|
+
left: "0.75rem"
|
|
377
|
+
}
|
|
378
|
+
}
|
|
242
379
|
},
|
|
243
380
|
typography: {
|
|
244
381
|
font: "normal 700 1rem/1 Open Sans",
|
|
245
382
|
letterSpacing: "-0.0125rem",
|
|
246
383
|
fontWidth: 95
|
|
384
|
+
},
|
|
385
|
+
icon: {
|
|
386
|
+
size: "1.5rem",
|
|
387
|
+
gap: "0.25rem"
|
|
388
|
+
},
|
|
389
|
+
iconButton: {
|
|
390
|
+
width: "3rem"
|
|
247
391
|
}
|
|
248
392
|
}
|
|
249
393
|
},
|
|
@@ -273,12 +417,24 @@ const componentButton = {
|
|
|
273
417
|
top: "0.25rem",
|
|
274
418
|
right: "0.5rem",
|
|
275
419
|
bottom: "0.25rem",
|
|
276
|
-
left: "0.5rem"
|
|
420
|
+
left: "0.5rem",
|
|
421
|
+
withIcon: {
|
|
422
|
+
iconLeft: {
|
|
423
|
+
left: "0.25rem"
|
|
424
|
+
}
|
|
425
|
+
}
|
|
277
426
|
},
|
|
278
427
|
typography: {
|
|
279
428
|
font: "normal 700 0.75rem/1 Open Sans",
|
|
280
429
|
letterSpacing: "0rem",
|
|
281
430
|
fontWidth: 95
|
|
431
|
+
},
|
|
432
|
+
icon: {
|
|
433
|
+
size: "1.125rem",
|
|
434
|
+
gap: "0.25rem"
|
|
435
|
+
},
|
|
436
|
+
iconButton: {
|
|
437
|
+
width: "1.5rem"
|
|
282
438
|
}
|
|
283
439
|
},
|
|
284
440
|
sm: {
|
|
@@ -287,12 +443,24 @@ const componentButton = {
|
|
|
287
443
|
top: "0.25rem",
|
|
288
444
|
right: "0.625rem",
|
|
289
445
|
bottom: "0.25rem",
|
|
290
|
-
left: "0.625rem"
|
|
446
|
+
left: "0.625rem",
|
|
447
|
+
withIcon: {
|
|
448
|
+
iconLeft: {
|
|
449
|
+
left: "0.5rem"
|
|
450
|
+
}
|
|
451
|
+
}
|
|
291
452
|
},
|
|
292
453
|
typography: {
|
|
293
454
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
294
455
|
letterSpacing: "-0.0125rem",
|
|
295
456
|
fontWidth: 95
|
|
457
|
+
},
|
|
458
|
+
icon: {
|
|
459
|
+
size: "1.125rem",
|
|
460
|
+
gap: "0.25rem"
|
|
461
|
+
},
|
|
462
|
+
iconButton: {
|
|
463
|
+
width: "2rem"
|
|
296
464
|
}
|
|
297
465
|
},
|
|
298
466
|
md: {
|
|
@@ -301,12 +469,24 @@ const componentButton = {
|
|
|
301
469
|
top: "0.25rem",
|
|
302
470
|
right: "0.75rem",
|
|
303
471
|
bottom: "0.25rem",
|
|
304
|
-
left: "0.75rem"
|
|
472
|
+
left: "0.75rem",
|
|
473
|
+
withIcon: {
|
|
474
|
+
iconLeft: {
|
|
475
|
+
left: "0.5rem"
|
|
476
|
+
}
|
|
477
|
+
}
|
|
305
478
|
},
|
|
306
479
|
typography: {
|
|
307
480
|
font: "normal 700 0.875rem/1 Open Sans",
|
|
308
481
|
letterSpacing: "-0.0125rem",
|
|
309
482
|
fontWidth: 95
|
|
483
|
+
},
|
|
484
|
+
icon: {
|
|
485
|
+
size: "1.25rem",
|
|
486
|
+
gap: "0.25rem"
|
|
487
|
+
},
|
|
488
|
+
iconButton: {
|
|
489
|
+
width: "2.5rem"
|
|
310
490
|
}
|
|
311
491
|
},
|
|
312
492
|
lg: {
|
|
@@ -315,12 +495,24 @@ const componentButton = {
|
|
|
315
495
|
top: "0.25rem",
|
|
316
496
|
right: "1rem",
|
|
317
497
|
bottom: "0.25rem",
|
|
318
|
-
left: "1rem"
|
|
498
|
+
left: "1rem",
|
|
499
|
+
withIcon: {
|
|
500
|
+
iconLeft: {
|
|
501
|
+
left: "0.75rem"
|
|
502
|
+
}
|
|
503
|
+
}
|
|
319
504
|
},
|
|
320
505
|
typography: {
|
|
321
506
|
font: "normal 700 1rem/1 Open Sans",
|
|
322
507
|
letterSpacing: "-0.0125rem",
|
|
323
508
|
fontWidth: 95
|
|
509
|
+
},
|
|
510
|
+
icon: {
|
|
511
|
+
size: "1.5rem",
|
|
512
|
+
gap: "0.25rem"
|
|
513
|
+
},
|
|
514
|
+
iconButton: {
|
|
515
|
+
width: "3rem"
|
|
324
516
|
}
|
|
325
517
|
}
|
|
326
518
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import type { ButtonProps } from './types';
|
|
2
|
-
export declare function Button({ variant, size, theme, cssOverrides, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function Button({ variant, size, theme, cssOverrides, icon, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -4,4 +4,4 @@ import type { Prettify } from '../../util/types';
|
|
|
4
4
|
import type { ButtonProps } from './types';
|
|
5
5
|
export type ButtonTheme = Prettify<ComponentButton>;
|
|
6
6
|
export declare const defaultButtonTheme: ButtonTheme;
|
|
7
|
-
export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'
|
|
7
|
+
export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ButtonProps as RACButtonProps } from 'react-aria-components';
|
|
2
2
|
import type { DefaultProps } from '../../util/types';
|
|
3
|
+
import type { IconProps } from '../icon/types';
|
|
3
4
|
import type { ButtonTheme } from './styles';
|
|
4
5
|
export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['className']>, RACButtonProps {
|
|
5
6
|
/**
|
|
@@ -10,4 +11,8 @@ export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['c
|
|
|
10
11
|
* Variant of the button
|
|
11
12
|
*/
|
|
12
13
|
variant?: keyof Omit<ButtonTheme, 'shared'>;
|
|
14
|
+
/**
|
|
15
|
+
* Icon to be rendered within the button. Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
|
|
16
|
+
*/
|
|
17
|
+
icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
|
|
13
18
|
}
|