@justeattakeaway/pie-button 0.43.0 → 0.45.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.
- package/custom-elements.json +515 -0
- package/dist/index.d.ts +7 -7
- package/dist/index.js +4 -4
- package/dist/react.d.ts +11 -9
- package/dist/react.js +10 -10
- package/package.json +12 -5
- package/src/defs-react.ts +3 -0
- package/src/defs.ts +7 -7
- package/src/index.ts +4 -4
- package/src/react.ts +20 -0
|
@@ -0,0 +1,515 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "1.0.0",
|
|
3
|
+
"readme": "",
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "src/defs-react.js",
|
|
8
|
+
"declarations": [],
|
|
9
|
+
"exports": []
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"kind": "javascript-module",
|
|
13
|
+
"path": "src/defs.js",
|
|
14
|
+
"declarations": [
|
|
15
|
+
{
|
|
16
|
+
"kind": "variable",
|
|
17
|
+
"name": "sizes",
|
|
18
|
+
"type": {
|
|
19
|
+
"text": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']"
|
|
20
|
+
},
|
|
21
|
+
"default": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "variable",
|
|
25
|
+
"name": "responsiveSizes",
|
|
26
|
+
"type": {
|
|
27
|
+
"text": "['productive', 'expressive']"
|
|
28
|
+
},
|
|
29
|
+
"default": "['productive', 'expressive']"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"kind": "variable",
|
|
33
|
+
"name": "types",
|
|
34
|
+
"type": {
|
|
35
|
+
"text": "['submit', 'button', 'reset']"
|
|
36
|
+
},
|
|
37
|
+
"default": "['submit', 'button', 'reset']"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"kind": "variable",
|
|
41
|
+
"name": "variants",
|
|
42
|
+
"type": {
|
|
43
|
+
"text": "[\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
|
|
44
|
+
},
|
|
45
|
+
"default": "[\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"kind": "variable",
|
|
49
|
+
"name": "iconPlacements",
|
|
50
|
+
"type": {
|
|
51
|
+
"text": "['leading', 'trailing']"
|
|
52
|
+
},
|
|
53
|
+
"default": "['leading', 'trailing']"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"kind": "variable",
|
|
57
|
+
"name": "formEncodingtypes",
|
|
58
|
+
"type": {
|
|
59
|
+
"text": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']"
|
|
60
|
+
},
|
|
61
|
+
"default": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"kind": "variable",
|
|
65
|
+
"name": "formMethodTypes",
|
|
66
|
+
"type": {
|
|
67
|
+
"text": "['post', 'get', 'dialog']"
|
|
68
|
+
},
|
|
69
|
+
"default": "['post', 'get', 'dialog']"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"kind": "variable",
|
|
73
|
+
"name": "formTargetTypes",
|
|
74
|
+
"type": {
|
|
75
|
+
"text": "['_self', '_blank', '_parent', '_top']"
|
|
76
|
+
},
|
|
77
|
+
"default": "['_self', '_blank', '_parent', '_top']"
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"exports": [
|
|
81
|
+
{
|
|
82
|
+
"kind": "js",
|
|
83
|
+
"name": "sizes",
|
|
84
|
+
"declaration": {
|
|
85
|
+
"name": "sizes",
|
|
86
|
+
"module": "src/defs.js"
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"kind": "js",
|
|
91
|
+
"name": "responsiveSizes",
|
|
92
|
+
"declaration": {
|
|
93
|
+
"name": "responsiveSizes",
|
|
94
|
+
"module": "src/defs.js"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"kind": "js",
|
|
99
|
+
"name": "types",
|
|
100
|
+
"declaration": {
|
|
101
|
+
"name": "types",
|
|
102
|
+
"module": "src/defs.js"
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"kind": "js",
|
|
107
|
+
"name": "variants",
|
|
108
|
+
"declaration": {
|
|
109
|
+
"name": "variants",
|
|
110
|
+
"module": "src/defs.js"
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"kind": "js",
|
|
115
|
+
"name": "iconPlacements",
|
|
116
|
+
"declaration": {
|
|
117
|
+
"name": "iconPlacements",
|
|
118
|
+
"module": "src/defs.js"
|
|
119
|
+
}
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "js",
|
|
123
|
+
"name": "formEncodingtypes",
|
|
124
|
+
"declaration": {
|
|
125
|
+
"name": "formEncodingtypes",
|
|
126
|
+
"module": "src/defs.js"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"kind": "js",
|
|
131
|
+
"name": "formMethodTypes",
|
|
132
|
+
"declaration": {
|
|
133
|
+
"name": "formMethodTypes",
|
|
134
|
+
"module": "src/defs.js"
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"kind": "js",
|
|
139
|
+
"name": "formTargetTypes",
|
|
140
|
+
"declaration": {
|
|
141
|
+
"name": "formTargetTypes",
|
|
142
|
+
"module": "src/defs.js"
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"kind": "javascript-module",
|
|
149
|
+
"path": "src/index.js",
|
|
150
|
+
"declarations": [
|
|
151
|
+
{
|
|
152
|
+
"kind": "class",
|
|
153
|
+
"description": "",
|
|
154
|
+
"name": "PieButton",
|
|
155
|
+
"slots": [
|
|
156
|
+
{
|
|
157
|
+
"description": "The icon slot",
|
|
158
|
+
"name": "icon"
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"description": "Default slot",
|
|
162
|
+
"name": ""
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
"members": [
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "size",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "ButtonProps['size']"
|
|
171
|
+
},
|
|
172
|
+
"privacy": "public",
|
|
173
|
+
"default": "'medium'",
|
|
174
|
+
"attribute": "size"
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"kind": "field",
|
|
178
|
+
"name": "type",
|
|
179
|
+
"type": {
|
|
180
|
+
"text": "ButtonProps['type']"
|
|
181
|
+
},
|
|
182
|
+
"privacy": "public",
|
|
183
|
+
"default": "'submit'",
|
|
184
|
+
"attribute": "type"
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
"kind": "field",
|
|
188
|
+
"name": "variant",
|
|
189
|
+
"type": {
|
|
190
|
+
"text": "ButtonProps['variant']"
|
|
191
|
+
},
|
|
192
|
+
"privacy": "public",
|
|
193
|
+
"default": "'primary'",
|
|
194
|
+
"attribute": "variant"
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"kind": "field",
|
|
198
|
+
"name": "iconPlacement",
|
|
199
|
+
"type": {
|
|
200
|
+
"text": "ButtonProps['iconPlacement']"
|
|
201
|
+
},
|
|
202
|
+
"privacy": "public",
|
|
203
|
+
"default": "'leading'",
|
|
204
|
+
"attribute": "iconPlacement"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "field",
|
|
208
|
+
"name": "disabled",
|
|
209
|
+
"type": {
|
|
210
|
+
"text": "boolean"
|
|
211
|
+
},
|
|
212
|
+
"privacy": "public",
|
|
213
|
+
"default": "false",
|
|
214
|
+
"attribute": "disabled"
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "field",
|
|
218
|
+
"name": "isLoading",
|
|
219
|
+
"type": {
|
|
220
|
+
"text": "boolean"
|
|
221
|
+
},
|
|
222
|
+
"privacy": "public",
|
|
223
|
+
"default": "false",
|
|
224
|
+
"attribute": "isLoading",
|
|
225
|
+
"reflects": true
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"kind": "field",
|
|
229
|
+
"name": "isFullWidth",
|
|
230
|
+
"type": {
|
|
231
|
+
"text": "boolean"
|
|
232
|
+
},
|
|
233
|
+
"privacy": "public",
|
|
234
|
+
"default": "false",
|
|
235
|
+
"attribute": "isFullWidth"
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
"kind": "field",
|
|
239
|
+
"name": "isResponsive",
|
|
240
|
+
"type": {
|
|
241
|
+
"text": "boolean"
|
|
242
|
+
},
|
|
243
|
+
"privacy": "public",
|
|
244
|
+
"default": "false",
|
|
245
|
+
"attribute": "isResponsive"
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
"kind": "field",
|
|
249
|
+
"name": "name",
|
|
250
|
+
"type": {
|
|
251
|
+
"text": "string | undefined"
|
|
252
|
+
},
|
|
253
|
+
"privacy": "public",
|
|
254
|
+
"attribute": "name"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"kind": "field",
|
|
258
|
+
"name": "value",
|
|
259
|
+
"type": {
|
|
260
|
+
"text": "string | undefined"
|
|
261
|
+
},
|
|
262
|
+
"privacy": "public",
|
|
263
|
+
"attribute": "value"
|
|
264
|
+
},
|
|
265
|
+
{
|
|
266
|
+
"kind": "field",
|
|
267
|
+
"name": "formaction",
|
|
268
|
+
"type": {
|
|
269
|
+
"text": "ButtonProps['formaction']"
|
|
270
|
+
},
|
|
271
|
+
"privacy": "public",
|
|
272
|
+
"attribute": "formaction"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"kind": "field",
|
|
276
|
+
"name": "formenctype",
|
|
277
|
+
"type": {
|
|
278
|
+
"text": "ButtonProps['formenctype']"
|
|
279
|
+
},
|
|
280
|
+
"privacy": "public",
|
|
281
|
+
"attribute": "formenctype"
|
|
282
|
+
},
|
|
283
|
+
{
|
|
284
|
+
"kind": "field",
|
|
285
|
+
"name": "formmethod",
|
|
286
|
+
"type": {
|
|
287
|
+
"text": "ButtonProps['formmethod']"
|
|
288
|
+
},
|
|
289
|
+
"privacy": "public",
|
|
290
|
+
"attribute": "formmethod"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"kind": "field",
|
|
294
|
+
"name": "formnovalidate",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "ButtonProps['formnovalidate']"
|
|
297
|
+
},
|
|
298
|
+
"privacy": "public",
|
|
299
|
+
"attribute": "formnovalidate"
|
|
300
|
+
},
|
|
301
|
+
{
|
|
302
|
+
"kind": "field",
|
|
303
|
+
"name": "formtarget",
|
|
304
|
+
"type": {
|
|
305
|
+
"text": "ButtonProps['formtarget']"
|
|
306
|
+
},
|
|
307
|
+
"privacy": "public",
|
|
308
|
+
"attribute": "formtarget"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
"kind": "field",
|
|
312
|
+
"name": "responsiveSize",
|
|
313
|
+
"type": {
|
|
314
|
+
"text": "ButtonProps['responsiveSize'] | undefined"
|
|
315
|
+
},
|
|
316
|
+
"privacy": "public",
|
|
317
|
+
"attribute": "responsiveSize"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"kind": "method",
|
|
321
|
+
"name": "_simulateNativeButtonClick",
|
|
322
|
+
"privacy": "private",
|
|
323
|
+
"parameters": [
|
|
324
|
+
{
|
|
325
|
+
"name": "btnType",
|
|
326
|
+
"type": {
|
|
327
|
+
"text": "'submit' | 'reset'"
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
],
|
|
331
|
+
"description": "This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.\nThis is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM\nshould be neglible, however this should be monitored.\nThis is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.\n\nTODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin."
|
|
332
|
+
},
|
|
333
|
+
{
|
|
334
|
+
"kind": "method",
|
|
335
|
+
"name": "_handleClick",
|
|
336
|
+
"privacy": "private"
|
|
337
|
+
},
|
|
338
|
+
{
|
|
339
|
+
"kind": "field",
|
|
340
|
+
"name": "_handleFormKeyDown",
|
|
341
|
+
"privacy": "private"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"kind": "method",
|
|
345
|
+
"name": "renderSpinner",
|
|
346
|
+
"privacy": "private",
|
|
347
|
+
"return": {
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "TemplateResult"
|
|
350
|
+
}
|
|
351
|
+
},
|
|
352
|
+
"description": "Template for the loading state"
|
|
353
|
+
},
|
|
354
|
+
{
|
|
355
|
+
"kind": "method",
|
|
356
|
+
"name": "focus"
|
|
357
|
+
}
|
|
358
|
+
],
|
|
359
|
+
"attributes": [
|
|
360
|
+
{
|
|
361
|
+
"name": "size",
|
|
362
|
+
"type": {
|
|
363
|
+
"text": "ButtonProps['size']"
|
|
364
|
+
},
|
|
365
|
+
"default": "'medium'",
|
|
366
|
+
"fieldName": "size"
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "type",
|
|
370
|
+
"type": {
|
|
371
|
+
"text": "ButtonProps['type']"
|
|
372
|
+
},
|
|
373
|
+
"default": "'submit'",
|
|
374
|
+
"fieldName": "type"
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"name": "variant",
|
|
378
|
+
"type": {
|
|
379
|
+
"text": "ButtonProps['variant']"
|
|
380
|
+
},
|
|
381
|
+
"default": "'primary'",
|
|
382
|
+
"fieldName": "variant"
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
"name": "iconPlacement",
|
|
386
|
+
"type": {
|
|
387
|
+
"text": "ButtonProps['iconPlacement']"
|
|
388
|
+
},
|
|
389
|
+
"default": "'leading'",
|
|
390
|
+
"fieldName": "iconPlacement"
|
|
391
|
+
},
|
|
392
|
+
{
|
|
393
|
+
"name": "disabled",
|
|
394
|
+
"type": {
|
|
395
|
+
"text": "boolean"
|
|
396
|
+
},
|
|
397
|
+
"default": "false",
|
|
398
|
+
"fieldName": "disabled"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"name": "isLoading",
|
|
402
|
+
"type": {
|
|
403
|
+
"text": "boolean"
|
|
404
|
+
},
|
|
405
|
+
"default": "false",
|
|
406
|
+
"fieldName": "isLoading"
|
|
407
|
+
},
|
|
408
|
+
{
|
|
409
|
+
"name": "isFullWidth",
|
|
410
|
+
"type": {
|
|
411
|
+
"text": "boolean"
|
|
412
|
+
},
|
|
413
|
+
"default": "false",
|
|
414
|
+
"fieldName": "isFullWidth"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"name": "isResponsive",
|
|
418
|
+
"type": {
|
|
419
|
+
"text": "boolean"
|
|
420
|
+
},
|
|
421
|
+
"default": "false",
|
|
422
|
+
"fieldName": "isResponsive"
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"name": "name",
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "string | undefined"
|
|
428
|
+
},
|
|
429
|
+
"fieldName": "name"
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"name": "value",
|
|
433
|
+
"type": {
|
|
434
|
+
"text": "string | undefined"
|
|
435
|
+
},
|
|
436
|
+
"fieldName": "value"
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"name": "formaction",
|
|
440
|
+
"type": {
|
|
441
|
+
"text": "ButtonProps['formaction']"
|
|
442
|
+
},
|
|
443
|
+
"fieldName": "formaction"
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"name": "formenctype",
|
|
447
|
+
"type": {
|
|
448
|
+
"text": "ButtonProps['formenctype']"
|
|
449
|
+
},
|
|
450
|
+
"fieldName": "formenctype"
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"name": "formmethod",
|
|
454
|
+
"type": {
|
|
455
|
+
"text": "ButtonProps['formmethod']"
|
|
456
|
+
},
|
|
457
|
+
"fieldName": "formmethod"
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"name": "formnovalidate",
|
|
461
|
+
"type": {
|
|
462
|
+
"text": "ButtonProps['formnovalidate']"
|
|
463
|
+
},
|
|
464
|
+
"fieldName": "formnovalidate"
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"name": "formtarget",
|
|
468
|
+
"type": {
|
|
469
|
+
"text": "ButtonProps['formtarget']"
|
|
470
|
+
},
|
|
471
|
+
"fieldName": "formtarget"
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
"name": "responsiveSize",
|
|
475
|
+
"type": {
|
|
476
|
+
"text": "ButtonProps['responsiveSize'] | undefined"
|
|
477
|
+
},
|
|
478
|
+
"fieldName": "responsiveSize"
|
|
479
|
+
}
|
|
480
|
+
],
|
|
481
|
+
"mixins": [
|
|
482
|
+
{
|
|
483
|
+
"name": "FormControlMixin",
|
|
484
|
+
"package": "@justeattakeaway/pie-webc-core"
|
|
485
|
+
}
|
|
486
|
+
],
|
|
487
|
+
"superclass": {
|
|
488
|
+
"name": "LitElement",
|
|
489
|
+
"package": "lit"
|
|
490
|
+
},
|
|
491
|
+
"tagName": "pie-button",
|
|
492
|
+
"customElement": true
|
|
493
|
+
}
|
|
494
|
+
],
|
|
495
|
+
"exports": [
|
|
496
|
+
{
|
|
497
|
+
"kind": "js",
|
|
498
|
+
"name": "*",
|
|
499
|
+
"declaration": {
|
|
500
|
+
"name": "*",
|
|
501
|
+
"package": "./defs"
|
|
502
|
+
}
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
"kind": "js",
|
|
506
|
+
"name": "PieButton",
|
|
507
|
+
"declaration": {
|
|
508
|
+
"name": "PieButton",
|
|
509
|
+
"module": "src/index.js"
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
]
|
|
513
|
+
}
|
|
514
|
+
]
|
|
515
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -9,15 +9,15 @@ export declare interface ButtonProps {
|
|
|
9
9
|
/**
|
|
10
10
|
* What size the button should be.
|
|
11
11
|
*/
|
|
12
|
-
size
|
|
12
|
+
size?: typeof sizes[number];
|
|
13
13
|
/**
|
|
14
14
|
* What type attribute should be applied to the button. For example submit, button.
|
|
15
15
|
*/
|
|
16
|
-
type
|
|
16
|
+
type?: typeof types[number];
|
|
17
17
|
/**
|
|
18
18
|
* What style variant the button should be such as primary, outline or ghost.
|
|
19
19
|
*/
|
|
20
|
-
variant
|
|
20
|
+
variant?: Variant;
|
|
21
21
|
/**
|
|
22
22
|
* The placement of the icon slot, if provided, such as leading or trailing
|
|
23
23
|
*/
|
|
@@ -25,19 +25,19 @@ export declare interface ButtonProps {
|
|
|
25
25
|
/**
|
|
26
26
|
* When true, the button element is disabled.
|
|
27
27
|
*/
|
|
28
|
-
disabled
|
|
28
|
+
disabled?: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* When true, the button element will occupy the full width of its container.
|
|
31
31
|
*/
|
|
32
|
-
isFullWidth
|
|
32
|
+
isFullWidth?: boolean;
|
|
33
33
|
/**
|
|
34
34
|
* When true, displays a loading indicator inside the button.
|
|
35
35
|
*/
|
|
36
|
-
isLoading
|
|
36
|
+
isLoading?: boolean;
|
|
37
37
|
/**
|
|
38
38
|
* When true, enables the responsive size feature.
|
|
39
39
|
*/
|
|
40
|
-
isResponsive
|
|
40
|
+
isResponsive?: boolean;
|
|
41
41
|
/**
|
|
42
42
|
* The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
|
|
43
43
|
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
|
package/dist/index.js
CHANGED
|
@@ -544,7 +544,7 @@ class v extends kt(wt) {
|
|
|
544
544
|
* @private
|
|
545
545
|
*/
|
|
546
546
|
renderSpinner() {
|
|
547
|
-
const { size: s, variant: a, disabled: c } = this, u = s.includes("small") ? "small" : "medium";
|
|
547
|
+
const { size: s, variant: a, disabled: c } = this, u = s && s.includes("small") ? "small" : "medium";
|
|
548
548
|
let f;
|
|
549
549
|
return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
|
|
550
550
|
<pie-spinner
|
|
@@ -568,9 +568,9 @@ class v extends kt(wt) {
|
|
|
568
568
|
<button
|
|
569
569
|
@click=${this._handleClick}
|
|
570
570
|
class="o-btn"
|
|
571
|
-
type=${s}
|
|
572
|
-
variant=${u}
|
|
573
|
-
size=${f}
|
|
571
|
+
type=${s || "submit"}
|
|
572
|
+
variant=${u || "primary"}
|
|
573
|
+
size=${f || "medium"}
|
|
574
574
|
responsiveSize=${Et(k)}
|
|
575
575
|
?disabled=${a}
|
|
576
576
|
?isFullWidth=${c}
|
package/dist/react.d.ts
CHANGED
|
@@ -3,22 +3,22 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
|
|
|
3
3
|
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
import type { LitElement } from 'lit';
|
|
5
5
|
import type { PropertyValues } from 'lit';
|
|
6
|
-
import
|
|
6
|
+
import * as React_2 from 'react';
|
|
7
7
|
import type { TemplateResult } from 'lit';
|
|
8
8
|
|
|
9
9
|
export declare interface ButtonProps {
|
|
10
10
|
/**
|
|
11
11
|
* What size the button should be.
|
|
12
12
|
*/
|
|
13
|
-
size
|
|
13
|
+
size?: typeof sizes[number];
|
|
14
14
|
/**
|
|
15
15
|
* What type attribute should be applied to the button. For example submit, button.
|
|
16
16
|
*/
|
|
17
|
-
type
|
|
17
|
+
type?: typeof types[number];
|
|
18
18
|
/**
|
|
19
19
|
* What style variant the button should be such as primary, outline or ghost.
|
|
20
20
|
*/
|
|
21
|
-
variant
|
|
21
|
+
variant?: Variant;
|
|
22
22
|
/**
|
|
23
23
|
* The placement of the icon slot, if provided, such as leading or trailing
|
|
24
24
|
*/
|
|
@@ -26,19 +26,19 @@ export declare interface ButtonProps {
|
|
|
26
26
|
/**
|
|
27
27
|
* When true, the button element is disabled.
|
|
28
28
|
*/
|
|
29
|
-
disabled
|
|
29
|
+
disabled?: boolean;
|
|
30
30
|
/**
|
|
31
31
|
* When true, the button element will occupy the full width of its container.
|
|
32
32
|
*/
|
|
33
|
-
isFullWidth
|
|
33
|
+
isFullWidth?: boolean;
|
|
34
34
|
/**
|
|
35
35
|
* When true, displays a loading indicator inside the button.
|
|
36
36
|
*/
|
|
37
|
-
isLoading
|
|
37
|
+
isLoading?: boolean;
|
|
38
38
|
/**
|
|
39
39
|
* When true, enables the responsive size feature.
|
|
40
40
|
*/
|
|
41
|
-
isResponsive
|
|
41
|
+
isResponsive?: boolean;
|
|
42
42
|
/**
|
|
43
43
|
* The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
|
|
44
44
|
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
|
|
@@ -91,7 +91,7 @@ export declare const formTargetTypes: readonly ["_self", "_blank", "_parent", "_
|
|
|
91
91
|
|
|
92
92
|
export declare const iconPlacements: readonly ["leading", "trailing"];
|
|
93
93
|
|
|
94
|
-
export declare const PieButton:
|
|
94
|
+
export declare const PieButton: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<PieButton_2> & ReactBaseType>;
|
|
95
95
|
|
|
96
96
|
/**
|
|
97
97
|
* @tagname pie-button
|
|
@@ -142,6 +142,8 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
|
|
|
142
142
|
|
|
143
143
|
declare const PieButton_base: GenericConstructor<FormControlInterface> & typeof LitElement;
|
|
144
144
|
|
|
145
|
+
declare type ReactBaseType = React_2.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
146
|
+
|
|
145
147
|
export declare const responsiveSizes: readonly ["productive", "expressive"];
|
|
146
148
|
|
|
147
149
|
export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
|
package/dist/react.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
import * as t from "react";
|
|
2
2
|
import { createComponent as e } from "@lit/react";
|
|
3
3
|
import { PieButton as o } from "./index.js";
|
|
4
|
-
import { formEncodingtypes as y, formMethodTypes as
|
|
4
|
+
import { formEncodingtypes as y, formMethodTypes as B, formTargetTypes as l, iconPlacements as d, responsiveSizes as g, sizes as v, types as T, variants as x } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
7
|
import "lit/directives/if-defined.js";
|
|
8
8
|
import "@justeattakeaway/pie-webc-core";
|
|
9
9
|
import "@justeattakeaway/pie-spinner";
|
|
10
|
-
const
|
|
10
|
+
const r = e({
|
|
11
11
|
displayName: "PieButton",
|
|
12
12
|
elementClass: o,
|
|
13
13
|
react: t,
|
|
14
14
|
tagName: "pie-button",
|
|
15
15
|
events: {}
|
|
16
|
-
});
|
|
16
|
+
}), f = r;
|
|
17
17
|
export {
|
|
18
|
-
|
|
18
|
+
f as PieButton,
|
|
19
19
|
y as formEncodingtypes,
|
|
20
|
-
|
|
20
|
+
B as formMethodTypes,
|
|
21
21
|
l as formTargetTypes,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
d as iconPlacements,
|
|
23
|
+
g as responsiveSizes,
|
|
24
|
+
v as sizes,
|
|
25
|
+
T as types,
|
|
26
|
+
x as variants
|
|
27
27
|
};
|
package/package.json
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.45.0",
|
|
4
4
|
"description": "PIE design system button built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
9
|
"files": [
|
|
10
|
+
"custom-elements.json",
|
|
10
11
|
"src",
|
|
11
12
|
"dist",
|
|
12
13
|
"**/*.d.ts"
|
|
13
14
|
],
|
|
14
15
|
"scripts": {
|
|
15
|
-
"build": "
|
|
16
|
+
"build": "run -T vite build",
|
|
17
|
+
"build:react-wrapper": "npx build-react-wrapper",
|
|
18
|
+
"create:manifest": "yarn cem analyze --litelement",
|
|
16
19
|
"lint:scripts": "run -T eslint .",
|
|
17
20
|
"lint:scripts:fix": "run -T eslint . --fix",
|
|
18
21
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
@@ -28,17 +31,21 @@
|
|
|
28
31
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
32
|
"license": "Apache-2.0",
|
|
30
33
|
"devDependencies": {
|
|
31
|
-
"@
|
|
34
|
+
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
35
|
+
"@justeattakeaway/pie-components-config": "0.9.0",
|
|
36
|
+
"@justeattakeaway/pie-wrapper-react": "0.13.0",
|
|
37
|
+
"cem-plugin-module-file-extensions": "0.0.5"
|
|
32
38
|
},
|
|
33
39
|
"volta": {
|
|
34
40
|
"extends": "../../../package.json"
|
|
35
41
|
},
|
|
42
|
+
"customElements": "custom-elements.json",
|
|
36
43
|
"sideEffects": [
|
|
37
44
|
"dist/*.js"
|
|
38
45
|
],
|
|
39
46
|
"dependencies": {
|
|
40
|
-
"@justeattakeaway/pie-spinner": "0.
|
|
41
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
47
|
+
"@justeattakeaway/pie-spinner": "0.5.0",
|
|
48
|
+
"@justeattakeaway/pie-webc-core": "0.17.0",
|
|
42
49
|
"element-internals-polyfill": "1.3.9"
|
|
43
50
|
}
|
|
44
51
|
}
|
package/src/defs.ts
CHANGED
|
@@ -17,15 +17,15 @@ export interface ButtonProps {
|
|
|
17
17
|
/**
|
|
18
18
|
* What size the button should be.
|
|
19
19
|
*/
|
|
20
|
-
size
|
|
20
|
+
size?: typeof sizes[number];
|
|
21
21
|
/**
|
|
22
22
|
* What type attribute should be applied to the button. For example submit, button.
|
|
23
23
|
*/
|
|
24
|
-
type
|
|
24
|
+
type?: typeof types[number];
|
|
25
25
|
/**
|
|
26
26
|
* What style variant the button should be such as primary, outline or ghost.
|
|
27
27
|
*/
|
|
28
|
-
variant
|
|
28
|
+
variant?: Variant;
|
|
29
29
|
/**
|
|
30
30
|
* The placement of the icon slot, if provided, such as leading or trailing
|
|
31
31
|
*/
|
|
@@ -33,20 +33,20 @@ export interface ButtonProps {
|
|
|
33
33
|
/**
|
|
34
34
|
* When true, the button element is disabled.
|
|
35
35
|
*/
|
|
36
|
-
disabled
|
|
36
|
+
disabled?: boolean;
|
|
37
37
|
/**
|
|
38
38
|
* When true, the button element will occupy the full width of its container.
|
|
39
39
|
*/
|
|
40
|
-
isFullWidth
|
|
40
|
+
isFullWidth?: boolean;
|
|
41
41
|
/**
|
|
42
42
|
* When true, displays a loading indicator inside the button.
|
|
43
43
|
*/
|
|
44
|
-
isLoading
|
|
44
|
+
isLoading?: boolean;
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* When true, enables the responsive size feature.
|
|
48
48
|
*/
|
|
49
|
-
isResponsive
|
|
49
|
+
isResponsive?: boolean;
|
|
50
50
|
|
|
51
51
|
/**
|
|
52
52
|
* The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
|
package/src/index.ts
CHANGED
|
@@ -197,7 +197,7 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
|
|
|
197
197
|
*/
|
|
198
198
|
private renderSpinner (): TemplateResult {
|
|
199
199
|
const { size, variant, disabled } = this;
|
|
200
|
-
const spinnerSize = size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
|
|
200
|
+
const spinnerSize = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
|
|
201
201
|
let spinnerVariant;
|
|
202
202
|
if (disabled) {
|
|
203
203
|
spinnerVariant = variant === 'ghost-inverse' ? 'inverse' : 'secondary';
|
|
@@ -230,9 +230,9 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
|
|
|
230
230
|
<button
|
|
231
231
|
@click=${this._handleClick}
|
|
232
232
|
class="o-btn"
|
|
233
|
-
type=${type}
|
|
234
|
-
variant=${variant}
|
|
235
|
-
size=${size}
|
|
233
|
+
type=${type || 'submit'}
|
|
234
|
+
variant=${variant || 'primary'}
|
|
235
|
+
size=${size || 'medium'}
|
|
236
236
|
responsiveSize=${ifDefined(responsiveSize)}
|
|
237
237
|
?disabled=${disabled}
|
|
238
238
|
?isFullWidth=${isFullWidth}
|
package/src/react.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { PieButton as PieButtonLit } from './index';
|
|
4
|
+
import { ButtonProps } from './defs';
|
|
5
|
+
|
|
6
|
+
export * from './defs';
|
|
7
|
+
|
|
8
|
+
const PieButtonReact = createComponent({
|
|
9
|
+
displayName: 'PieButton',
|
|
10
|
+
elementClass: PieButtonLit,
|
|
11
|
+
react: React,
|
|
12
|
+
tagName: 'pie-button',
|
|
13
|
+
events: {},
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
type ReactBaseType = React.ButtonHTMLAttributes<HTMLButtonElement>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export const PieButton = PieButtonReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonProps> & React.RefAttributes<PieButtonLit> & ReactBaseType>;
|