@justeattakeaway/pie-button 0.24.1 → 0.25.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/dist/{types/packages/components/pie-button/src/defs.d.ts → index.d.ts} +57 -31
- package/dist/react.d.ts +60 -0
- package/dist/react.js +46 -42
- package/package.json +7 -2
- package/src/index.ts +1 -6
- package/.eslintignore +0 -5
- package/.turbo/turbo-build.log +0 -14
- package/CHANGELOG.md +0 -306
- package/dist/types/index.d.ts +0 -1
- package/dist/types/packages/components/pie-button/src/defs.d.ts.map +0 -1
- package/dist/types/packages/components/pie-button/src/index.d.ts +0 -26
- package/dist/types/packages/components/pie-button/src/index.d.ts.map +0 -1
- package/dist/types/packages/components/pie-button/src/react.d.ts +0 -3
- package/dist/types/packages/components/pie-button/src/react.d.ts.map +0 -1
- package/dist/types/react.d.ts +0 -1
- package/playwright/index.html +0 -56
- package/playwright/index.ts +0 -1
- package/playwright-lit-visual.config.ts +0 -4
- package/playwright-lit.config.ts +0 -4
- package/test/accessibility/pie-button.spec.ts +0 -35
- package/test/component/pie-button.spec.ts +0 -30
- package/test/visual/pie-button.spec.ts +0 -113
- package/tsconfig.json +0 -8
- package/vite.config.js +0 -3
|
@@ -1,31 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export interface ButtonProps {
|
|
6
|
-
/**
|
|
7
|
-
* What size the button should be.
|
|
8
|
-
*/
|
|
9
|
-
size: typeof sizes[number];
|
|
10
|
-
/**
|
|
11
|
-
* What type attribute should be applied to the button. For example submit, button or menu.
|
|
12
|
-
*/
|
|
13
|
-
type: typeof types[number];
|
|
14
|
-
/**
|
|
15
|
-
* What style variant the button should be such as primary, outline or ghost.
|
|
16
|
-
*/
|
|
17
|
-
variant: Variant;
|
|
18
|
-
/**
|
|
19
|
-
* When true, the button element is disabled.
|
|
20
|
-
*/
|
|
21
|
-
disabled: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* When true, the button element will occupy the full width of its container.
|
|
24
|
-
*/
|
|
25
|
-
isFullWidth: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* When true, displays a loading indicator inside the button.
|
|
28
|
-
*/
|
|
29
|
-
isLoading: boolean;
|
|
30
|
-
}
|
|
31
|
-
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import type { LitElement } from 'lit';
|
|
3
|
+
import type { TemplateResult } from 'lit-html';
|
|
4
|
+
|
|
5
|
+
export declare interface ButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* What size the button should be.
|
|
8
|
+
*/
|
|
9
|
+
size: typeof sizes[number];
|
|
10
|
+
/**
|
|
11
|
+
* What type attribute should be applied to the button. For example submit, button or menu.
|
|
12
|
+
*/
|
|
13
|
+
type: typeof types[number];
|
|
14
|
+
/**
|
|
15
|
+
* What style variant the button should be such as primary, outline or ghost.
|
|
16
|
+
*/
|
|
17
|
+
variant: Variant;
|
|
18
|
+
/**
|
|
19
|
+
* When true, the button element is disabled.
|
|
20
|
+
*/
|
|
21
|
+
disabled: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* When true, the button element will occupy the full width of its container.
|
|
24
|
+
*/
|
|
25
|
+
isFullWidth: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* When true, displays a loading indicator inside the button.
|
|
28
|
+
*/
|
|
29
|
+
isLoading: boolean;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* @slot icon-leading - Leading icon
|
|
34
|
+
* @slot icon-trailing - Trailing icon
|
|
35
|
+
* @slot - Default slot
|
|
36
|
+
*/
|
|
37
|
+
export declare class PieButton extends LitElement implements ButtonProps {
|
|
38
|
+
size: ButtonProps['size'];
|
|
39
|
+
type: ButtonProps['type'];
|
|
40
|
+
variant: ButtonProps['variant'];
|
|
41
|
+
disabled: boolean;
|
|
42
|
+
isLoading: boolean;
|
|
43
|
+
isFullWidth: boolean;
|
|
44
|
+
render(): TemplateResult<1>;
|
|
45
|
+
focus(): void;
|
|
46
|
+
static styles: CSSResult;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
|
|
50
|
+
|
|
51
|
+
export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
52
|
+
|
|
53
|
+
export declare type Variant = typeof variants[number];
|
|
54
|
+
|
|
55
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
56
|
+
|
|
57
|
+
export { }
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import type { LitElement } from 'lit';
|
|
3
|
+
import type { ReactWebComponent } from '@lit-labs/react';
|
|
4
|
+
import type { TemplateResult } from 'lit-html';
|
|
5
|
+
|
|
6
|
+
export declare interface ButtonProps {
|
|
7
|
+
/**
|
|
8
|
+
* What size the button should be.
|
|
9
|
+
*/
|
|
10
|
+
size: typeof sizes[number];
|
|
11
|
+
/**
|
|
12
|
+
* What type attribute should be applied to the button. For example submit, button or menu.
|
|
13
|
+
*/
|
|
14
|
+
type: typeof types[number];
|
|
15
|
+
/**
|
|
16
|
+
* What style variant the button should be such as primary, outline or ghost.
|
|
17
|
+
*/
|
|
18
|
+
variant: Variant;
|
|
19
|
+
/**
|
|
20
|
+
* When true, the button element is disabled.
|
|
21
|
+
*/
|
|
22
|
+
disabled: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* When true, the button element will occupy the full width of its container.
|
|
25
|
+
*/
|
|
26
|
+
isFullWidth: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* When true, displays a loading indicator inside the button.
|
|
29
|
+
*/
|
|
30
|
+
isLoading: boolean;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* @slot icon-leading - Leading icon
|
|
37
|
+
* @slot icon-trailing - Trailing icon
|
|
38
|
+
* @slot - Default slot
|
|
39
|
+
*/
|
|
40
|
+
declare class PieButton_2 extends LitElement implements ButtonProps {
|
|
41
|
+
size: ButtonProps['size'];
|
|
42
|
+
type: ButtonProps['type'];
|
|
43
|
+
variant: ButtonProps['variant'];
|
|
44
|
+
disabled: boolean;
|
|
45
|
+
isLoading: boolean;
|
|
46
|
+
isFullWidth: boolean;
|
|
47
|
+
render(): TemplateResult<1>;
|
|
48
|
+
focus(): void;
|
|
49
|
+
static styles: CSSResult;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
|
|
53
|
+
|
|
54
|
+
export declare const types: readonly ["submit", "button", "reset", "menu"];
|
|
55
|
+
|
|
56
|
+
export declare type Variant = typeof variants[number];
|
|
57
|
+
|
|
58
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
|
|
59
|
+
|
|
60
|
+
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PieButton as Nr } from "./index.js";
|
|
2
|
+
import { sizes as Xr, types as Zr, variants as en } from "./index.js";
|
|
2
3
|
import "lit";
|
|
3
4
|
import "lit/decorators.js";
|
|
4
5
|
import "lit/decorators/property.js";
|
|
@@ -32,7 +33,7 @@ var Ve = { exports: {} }, p = {};
|
|
|
32
33
|
* LICENSE file in the root directory of this source tree.
|
|
33
34
|
*/
|
|
34
35
|
var Ct;
|
|
35
|
-
function
|
|
36
|
+
function xr() {
|
|
36
37
|
if (Ct)
|
|
37
38
|
return p;
|
|
38
39
|
Ct = 1;
|
|
@@ -74,8 +75,8 @@ function Mr() {
|
|
|
74
75
|
if (b === 1)
|
|
75
76
|
v.children = d;
|
|
76
77
|
else if (1 < b) {
|
|
77
|
-
for (var E = Array(b),
|
|
78
|
-
E[
|
|
78
|
+
for (var E = Array(b), x = 0; x < b; x++)
|
|
79
|
+
E[x] = arguments[x + 2];
|
|
79
80
|
v.children = E;
|
|
80
81
|
}
|
|
81
82
|
if (r && r.defaultProps)
|
|
@@ -119,8 +120,8 @@ function Mr() {
|
|
|
119
120
|
}
|
|
120
121
|
}
|
|
121
122
|
if (S)
|
|
122
|
-
return S = r, v = v(S), r = h === "" ? "." + se(S, 0) : h, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(
|
|
123
|
-
return
|
|
123
|
+
return S = r, v = v(S), r = h === "" ? "." + se(S, 0) : h, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(x) {
|
|
124
|
+
return x;
|
|
124
125
|
})) : v != null && (ie(v) && (v = pe(v, d + (!v.key || S && S.key === v.key ? "" : ("" + v.key).replace(ve, "$&/") + "/") + r)), u.push(v)), 1;
|
|
125
126
|
if (S = 0, h = h === "" ? "." : h + ":", Q(r))
|
|
126
127
|
for (var b = 0; b < r.length; b++) {
|
|
@@ -189,8 +190,8 @@ function Mr() {
|
|
|
189
190
|
h.children = d;
|
|
190
191
|
else if (1 < E) {
|
|
191
192
|
b = Array(E);
|
|
192
|
-
for (var
|
|
193
|
-
b[
|
|
193
|
+
for (var x = 0; x < E; x++)
|
|
194
|
+
b[x] = arguments[x + 2];
|
|
194
195
|
h.children = b;
|
|
195
196
|
}
|
|
196
197
|
return { $$typeof: g, type: r.type, key: v, ref: _, props: h, _owner: S };
|
|
@@ -260,7 +261,7 @@ var de = { exports: {} };
|
|
|
260
261
|
*/
|
|
261
262
|
de.exports;
|
|
262
263
|
var St;
|
|
263
|
-
function
|
|
264
|
+
function Mr() {
|
|
264
265
|
return St || (St = 1, function(g, c) {
|
|
265
266
|
process.env.NODE_ENV !== "production" && function() {
|
|
266
267
|
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
|
|
@@ -430,11 +431,11 @@ function xr() {
|
|
|
430
431
|
function E() {
|
|
431
432
|
}
|
|
432
433
|
E.prototype = v.prototype;
|
|
433
|
-
function
|
|
434
|
+
function x(e, t, n) {
|
|
434
435
|
this.props = e, this.context = t, this.refs = h, this.updater = n || u;
|
|
435
436
|
}
|
|
436
|
-
var ke =
|
|
437
|
-
ke.constructor =
|
|
437
|
+
var ke = x.prototype = new E();
|
|
438
|
+
ke.constructor = x, d(ke, v.prototype), ke.isPureReactComponent = !0;
|
|
438
439
|
function kt() {
|
|
439
440
|
var e = {
|
|
440
441
|
current: null
|
|
@@ -626,7 +627,7 @@ function xr() {
|
|
|
626
627
|
var n = je(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
|
|
627
628
|
return n;
|
|
628
629
|
}
|
|
629
|
-
function
|
|
630
|
+
function xt(e, t, n) {
|
|
630
631
|
if (e == null)
|
|
631
632
|
throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + e + ".");
|
|
632
633
|
var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, m = e._owner;
|
|
@@ -650,7 +651,7 @@ function xr() {
|
|
|
650
651
|
function ae(e) {
|
|
651
652
|
return typeof e == "object" && e !== null && e.$$typeof === T;
|
|
652
653
|
}
|
|
653
|
-
var Ke = ".",
|
|
654
|
+
var Ke = ".", Mt = ":";
|
|
654
655
|
function Ut(e) {
|
|
655
656
|
var t = /[=:]/g, n = {
|
|
656
657
|
"=": "=0",
|
|
@@ -707,7 +708,7 @@ function xr() {
|
|
|
707
708
|
)), t.push(y));
|
|
708
709
|
return 1;
|
|
709
710
|
}
|
|
710
|
-
var w, C, O = 0, $ = a === "" ? Ke : a +
|
|
711
|
+
var w, C, O = 0, $ = a === "" ? Ke : a + Mt;
|
|
711
712
|
if (he(e))
|
|
712
713
|
for (var Oe = 0; Oe < e.length; Oe++)
|
|
713
714
|
w = e[Oe], C = $ + Ae(w, Oe), O += ge(w, t, n, C, o);
|
|
@@ -958,7 +959,7 @@ Your code should look like:
|
|
|
958
959
|
}
|
|
959
960
|
return n;
|
|
960
961
|
}
|
|
961
|
-
function
|
|
962
|
+
function M() {
|
|
962
963
|
var e = K.current;
|
|
963
964
|
return e === null && f(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
|
|
964
965
|
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
|
@@ -967,7 +968,7 @@ Your code should look like:
|
|
|
967
968
|
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`), e;
|
|
968
969
|
}
|
|
969
970
|
function Xt(e) {
|
|
970
|
-
var t =
|
|
971
|
+
var t = M();
|
|
971
972
|
if (e._context !== void 0) {
|
|
972
973
|
var n = e._context;
|
|
973
974
|
n.Consumer === e ? f("Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be removed in a future major release. Did you mean to call useContext(Context) instead?") : n.Provider === e && f("Calling useContext(Context.Provider) is not supported. Did you mean to call useContext(Context) instead?");
|
|
@@ -975,61 +976,61 @@ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and f
|
|
|
975
976
|
return t.useContext(e);
|
|
976
977
|
}
|
|
977
978
|
function Zt(e) {
|
|
978
|
-
var t =
|
|
979
|
+
var t = M();
|
|
979
980
|
return t.useState(e);
|
|
980
981
|
}
|
|
981
982
|
function er(e, t, n) {
|
|
982
|
-
var a =
|
|
983
|
+
var a = M();
|
|
983
984
|
return a.useReducer(e, t, n);
|
|
984
985
|
}
|
|
985
986
|
function tr(e) {
|
|
986
|
-
var t =
|
|
987
|
+
var t = M();
|
|
987
988
|
return t.useRef(e);
|
|
988
989
|
}
|
|
989
990
|
function rr(e, t) {
|
|
990
|
-
var n =
|
|
991
|
+
var n = M();
|
|
991
992
|
return n.useEffect(e, t);
|
|
992
993
|
}
|
|
993
994
|
function nr(e, t) {
|
|
994
|
-
var n =
|
|
995
|
+
var n = M();
|
|
995
996
|
return n.useInsertionEffect(e, t);
|
|
996
997
|
}
|
|
997
998
|
function ar(e, t) {
|
|
998
|
-
var n =
|
|
999
|
+
var n = M();
|
|
999
1000
|
return n.useLayoutEffect(e, t);
|
|
1000
1001
|
}
|
|
1001
1002
|
function or(e, t) {
|
|
1002
|
-
var n =
|
|
1003
|
+
var n = M();
|
|
1003
1004
|
return n.useCallback(e, t);
|
|
1004
1005
|
}
|
|
1005
1006
|
function ur(e, t) {
|
|
1006
|
-
var n =
|
|
1007
|
+
var n = M();
|
|
1007
1008
|
return n.useMemo(e, t);
|
|
1008
1009
|
}
|
|
1009
1010
|
function ir(e, t, n) {
|
|
1010
|
-
var a =
|
|
1011
|
+
var a = M();
|
|
1011
1012
|
return a.useImperativeHandle(e, t, n);
|
|
1012
1013
|
}
|
|
1013
1014
|
function sr(e, t) {
|
|
1014
1015
|
{
|
|
1015
|
-
var n =
|
|
1016
|
+
var n = M();
|
|
1016
1017
|
return n.useDebugValue(e, t);
|
|
1017
1018
|
}
|
|
1018
1019
|
}
|
|
1019
1020
|
function cr() {
|
|
1020
|
-
var e =
|
|
1021
|
+
var e = M();
|
|
1021
1022
|
return e.useTransition();
|
|
1022
1023
|
}
|
|
1023
1024
|
function fr(e) {
|
|
1024
|
-
var t =
|
|
1025
|
+
var t = M();
|
|
1025
1026
|
return t.useDeferredValue(e);
|
|
1026
1027
|
}
|
|
1027
1028
|
function lr() {
|
|
1028
|
-
var e =
|
|
1029
|
+
var e = M();
|
|
1029
1030
|
return e.useId();
|
|
1030
1031
|
}
|
|
1031
1032
|
function dr(e, t, n) {
|
|
1032
|
-
var a =
|
|
1033
|
+
var a = M();
|
|
1033
1034
|
return a.useSyncExternalStore(e, t, n);
|
|
1034
1035
|
}
|
|
1035
1036
|
var le = 0, tt, rt, nt, at, ot, ut, it;
|
|
@@ -1385,7 +1386,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1385
1386
|
}), t;
|
|
1386
1387
|
}
|
|
1387
1388
|
function Cr(e, t, n) {
|
|
1388
|
-
for (var a =
|
|
1389
|
+
for (var a = xt.apply(this, arguments), o = 2; o < arguments.length; o++)
|
|
1389
1390
|
yt(arguments[o], a.type);
|
|
1390
1391
|
return ht(a), a;
|
|
1391
1392
|
}
|
|
@@ -1427,7 +1428,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1427
1428
|
try {
|
|
1428
1429
|
if (j.isBatchingLegacy = !0, a = e(), !n && j.didScheduleLegacyUpdate) {
|
|
1429
1430
|
var o = j.current;
|
|
1430
|
-
o !== null && (j.didScheduleLegacyUpdate = !1,
|
|
1431
|
+
o !== null && (j.didScheduleLegacyUpdate = !1, Me(o));
|
|
1431
1432
|
}
|
|
1432
1433
|
} catch (C) {
|
|
1433
1434
|
throw Se(t), C;
|
|
@@ -1452,7 +1453,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1452
1453
|
var y = a;
|
|
1453
1454
|
if (Se(t), ue === 0) {
|
|
1454
1455
|
var m = j.current;
|
|
1455
|
-
m !== null && (
|
|
1456
|
+
m !== null && (Me(m), j.current = null);
|
|
1456
1457
|
var R = {
|
|
1457
1458
|
then: function(C, O) {
|
|
1458
1459
|
j.current === null ? (j.current = [], Le(y, C, O)) : C(y);
|
|
@@ -1478,7 +1479,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1478
1479
|
var a = j.current;
|
|
1479
1480
|
if (a !== null)
|
|
1480
1481
|
try {
|
|
1481
|
-
|
|
1482
|
+
Me(a), Or(function() {
|
|
1482
1483
|
a.length === 0 ? (j.current = null, t(e)) : Le(e, t, n);
|
|
1483
1484
|
});
|
|
1484
1485
|
} catch (o) {
|
|
@@ -1488,10 +1489,10 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1488
1489
|
t(e);
|
|
1489
1490
|
}
|
|
1490
1491
|
}
|
|
1491
|
-
var
|
|
1492
|
-
function
|
|
1493
|
-
if (!
|
|
1494
|
-
|
|
1492
|
+
var xe = !1;
|
|
1493
|
+
function Me(e) {
|
|
1494
|
+
if (!xe) {
|
|
1495
|
+
xe = !0;
|
|
1495
1496
|
var t = 0;
|
|
1496
1497
|
try {
|
|
1497
1498
|
for (; t < e.length; t++) {
|
|
@@ -1504,7 +1505,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1504
1505
|
} catch (a) {
|
|
1505
1506
|
throw e = e.slice(t + 1), a;
|
|
1506
1507
|
} finally {
|
|
1507
|
-
|
|
1508
|
+
xe = !1;
|
|
1508
1509
|
}
|
|
1509
1510
|
}
|
|
1510
1511
|
}
|
|
@@ -1515,11 +1516,11 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1515
1516
|
toArray: Bt,
|
|
1516
1517
|
only: zt
|
|
1517
1518
|
};
|
|
1518
|
-
c.Children = Ar, c.Component = v, c.Fragment = k, c.Profiler = I, c.PureComponent =
|
|
1519
|
+
c.Children = Ar, c.Component = v, c.Fragment = k, c.Profiler = I, c.PureComponent = x, c.StrictMode = V, c.Suspense = H, c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = q, c.cloneElement = Pr, c.createContext = Ht, c.createElement = kr, c.createFactory = jr, c.createRef = kt, c.forwardRef = Qt, c.isValidElement = ae, c.lazy = Kt, c.memo = Jt, c.startTransition = Sr, c.unstable_act = Tr, c.useCallback = or, c.useContext = Xt, c.useDebugValue = sr, c.useDeferredValue = fr, c.useEffect = rr, c.useId = lr, c.useImperativeHandle = ir, c.useInsertionEffect = nr, c.useLayoutEffect = ar, c.useMemo = ur, c.useReducer = er, c.useRef = tr, c.useState = Zt, c.useSyncExternalStore = dr, c.useTransition = cr, c.version = U, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
|
|
1519
1520
|
}();
|
|
1520
1521
|
}(de, de.exports)), de.exports;
|
|
1521
1522
|
}
|
|
1522
|
-
process.env.NODE_ENV === "production" ? Ve.exports =
|
|
1523
|
+
process.env.NODE_ENV === "production" ? Ve.exports = xr() : Ve.exports = Mr();
|
|
1523
1524
|
var Tt = Ve.exports;
|
|
1524
1525
|
const Ur = /* @__PURE__ */ Lr(Tt), Vr = /* @__PURE__ */ Fr({
|
|
1525
1526
|
__proto__: null,
|
|
@@ -1587,5 +1588,8 @@ const Kr = Br({
|
|
|
1587
1588
|
events: {}
|
|
1588
1589
|
});
|
|
1589
1590
|
export {
|
|
1590
|
-
Kr as PieButton
|
|
1591
|
+
Kr as PieButton,
|
|
1592
|
+
Xr as sizes,
|
|
1593
|
+
Zr as types,
|
|
1594
|
+
en as variants
|
|
1591
1595
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.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
|
-
"types": "dist/
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"src",
|
|
11
|
+
"dist",
|
|
12
|
+
"**/*.d.ts"
|
|
13
|
+
],
|
|
9
14
|
"scripts": {
|
|
10
15
|
"build": "yarn build:wrapper pie-button && run -T vite build ",
|
|
11
16
|
"lint:scripts": "run -T eslint .",
|
package/src/index.ts
CHANGED
package/.eslintignore
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
[2:03:50 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
|
-
react wrapper has been added!
|
|
3
|
-
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
|
-
transforming...
|
|
5
|
-
[32m✓[39m 22 modules transformed.
|
|
6
|
-
rendering chunks...
|
|
7
|
-
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m14.78 kB[22m[1m[22m[2m │ gzip: 2.72 kB[22m
|
|
9
|
-
[2mdist/[22m[36mreact.js [39m[1m[2m59.01 kB[22m[1m[22m[2m │ gzip: 15.91 kB[22m
|
|
10
|
-
[32m
|
|
11
|
-
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in 46.23s[39m
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in 42885ms.
|
|
14
|
-
[39m
|
package/CHANGELOG.md
DELETED
|
@@ -1,306 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
## 0.24.1
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- [Changed] - use latest pie-design-tokens ([#716](https://github.com/justeattakeaway/pie/pull/716)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
8
|
-
|
|
9
|
-
## 0.24.0
|
|
10
|
-
|
|
11
|
-
### Minor Changes
|
|
12
|
-
|
|
13
|
-
- [Added] - destructive and destructive-ghost button variants ([#686](https://github.com/justeattakeaway/pie/pull/686)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
14
|
-
|
|
15
|
-
[Fixed] - hover and active colours for ghost-inverse variant
|
|
16
|
-
[Added] - mixin for reassigning button spinner HSL custom properties
|
|
17
|
-
|
|
18
|
-
- [Added] - `font-size` function added & tests ([#681](https://github.com/justeattakeaway/pie/pull/681)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
19
|
-
|
|
20
|
-
[Added] - adding pie-css to pie-button
|
|
21
|
-
|
|
22
|
-
### Patch Changes
|
|
23
|
-
|
|
24
|
-
- [Changed] - use latest pie-design-tokens ([#694](https://github.com/justeattakeaway/pie/pull/694)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
25
|
-
|
|
26
|
-
## 0.23.0
|
|
27
|
-
|
|
28
|
-
### Minor Changes
|
|
29
|
-
|
|
30
|
-
- [Added] - axe builder to be shared as a base instance across broswer accessibility tests ([#669](https://github.com/justeattakeaway/pie/pull/669)) by [@raoufswe](https://github.com/raoufswe)
|
|
31
|
-
|
|
32
|
-
## 0.22.0
|
|
33
|
-
|
|
34
|
-
### Minor Changes
|
|
35
|
-
|
|
36
|
-
- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
37
|
-
|
|
38
|
-
[Removed] - Built webc icons from source control
|
|
39
|
-
[Added] - Type declaration files for components
|
|
40
|
-
[Added] - Types for pie-icons
|
|
41
|
-
[Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
|
|
42
|
-
[Added] - Webc icon tests for width, height and base classes
|
|
43
|
-
[Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
|
|
44
|
-
[Changed] - Update pie-icons-webc rollup config to remove commonjs build
|
|
45
|
-
[Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
|
|
46
|
-
|
|
47
|
-
## 0.21.0
|
|
48
|
-
|
|
49
|
-
### Minor Changes
|
|
50
|
-
|
|
51
|
-
- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
52
|
-
|
|
53
|
-
## 0.20.0
|
|
54
|
-
|
|
55
|
-
### Minor Changes
|
|
56
|
-
|
|
57
|
-
- [Added] - Slots for leading and trailing icons ([#634](https://github.com/justeattakeaway/pie/pull/634)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
58
|
-
|
|
59
|
-
## 0.19.0
|
|
60
|
-
|
|
61
|
-
### Minor Changes
|
|
62
|
-
|
|
63
|
-
- [Added] - pie-button loading state ([#603](https://github.com/justeattakeaway/pie/pull/603)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
64
|
-
|
|
65
|
-
## 0.18.0
|
|
66
|
-
|
|
67
|
-
### Minor Changes
|
|
68
|
-
|
|
69
|
-
- [Added] - inverse and ghost-inverse variants to pie-button ([#596](https://github.com/justeattakeaway/pie/pull/596)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
70
|
-
|
|
71
|
-
- [Changed] - Set all component props to public ([#597](https://github.com/justeattakeaway/pie/pull/597)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
72
|
-
|
|
73
|
-
## 0.17.0
|
|
74
|
-
|
|
75
|
-
### Minor Changes
|
|
76
|
-
|
|
77
|
-
- [Changed] - Styles updated to fully match design updates ([#581](https://github.com/justeattakeaway/pie/pull/581)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
78
|
-
|
|
79
|
-
- Focus styles have been updated to the new style
|
|
80
|
-
- Padding, font-size and line-heights adjusted inline with designs
|
|
81
|
-
- Outline button text colour updated from `color-content-interactive-tertiary` to `color-content-interactive-secondary`
|
|
82
|
-
- Primary buttons at `xsmall` and `small-productive` now have darker background
|
|
83
|
-
- `ghost` variant background colour changed to `transparent` (rather than #fff)
|
|
84
|
-
|
|
85
|
-
## 0.16.1
|
|
86
|
-
|
|
87
|
-
### Patch Changes
|
|
88
|
-
|
|
89
|
-
- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
90
|
-
|
|
91
|
-
## 0.16.0
|
|
92
|
-
|
|
93
|
-
### Minor Changes
|
|
94
|
-
|
|
95
|
-
- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
|
|
96
|
-
|
|
97
|
-
## 0.15.0
|
|
98
|
-
|
|
99
|
-
### Minor Changes
|
|
100
|
-
|
|
101
|
-
- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
102
|
-
|
|
103
|
-
- [Changed] - use prop variant helper for simpler and more extensive visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
104
|
-
|
|
105
|
-
- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
106
|
-
|
|
107
|
-
- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
108
|
-
|
|
109
|
-
- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
110
|
-
|
|
111
|
-
### Patch Changes
|
|
112
|
-
|
|
113
|
-
- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
|
|
114
|
-
|
|
115
|
-
## 0.14.0
|
|
116
|
-
|
|
117
|
-
### Minor Changes
|
|
118
|
-
|
|
119
|
-
- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
120
|
-
|
|
121
|
-
- [Fixed] – Encapsulated styles and removed reflect ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
122
|
-
|
|
123
|
-
## 0.13.0
|
|
124
|
-
|
|
125
|
-
### Minor Changes
|
|
126
|
-
|
|
127
|
-
- [Changed] - Build script to include generating react wrapper ([#426](https://github.com/justeattakeaway/pie/pull/426)) by [@LTurns](https://github.com/LTurns)
|
|
128
|
-
|
|
129
|
-
- [Changed] - Deleted old prop validation decorator to replace with shared one from the core package ([#491](https://github.com/justeattakeaway/pie/pull/491)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
130
|
-
|
|
131
|
-
- [Changed] - Changed styles to use CSS Custom Props and host attrs ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
132
|
-
|
|
133
|
-
### Patch Changes
|
|
134
|
-
|
|
135
|
-
- [Added] - Missing `test:ci` scripts to package.json ([#492](https://github.com/justeattakeaway/pie/pull/492)) by [@siggerzz](https://github.com/siggerzz)
|
|
136
|
-
|
|
137
|
-
- [Fixed] - Resolved TS Build errors ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
138
|
-
|
|
139
|
-
- [Updated] - components to use the shared configurations ([#487](https://github.com/justeattakeaway/pie/pull/487)) by [@fernandofranca](https://github.com/fernandofranca)
|
|
140
|
-
|
|
141
|
-
- Updated dependencies [[`090354733`](https://github.com/justeattakeaway/pie/commit/090354733f24f0aa52ce287db7f8d13648414150)]:
|
|
142
|
-
- @justeattakeaway/pie-webc-core@0.2.0
|
|
143
|
-
|
|
144
|
-
## 0.12.2
|
|
145
|
-
|
|
146
|
-
### Patch Changes
|
|
147
|
-
|
|
148
|
-
- Updated dependencies [[`1f79d9d1a`](https://github.com/justeattakeaway/pie/commit/1f79d9d1a6fe9160b244e82d956290136b87187b)]:
|
|
149
|
-
- @justeattakeaway/pie-webc-core@0.1.0
|
|
150
|
-
|
|
151
|
-
## 0.12.1
|
|
152
|
-
|
|
153
|
-
### Patch Changes
|
|
154
|
-
|
|
155
|
-
- [Changed] - Added missing newline at the end of tsconfig.json ([#439](https://github.com/justeattakeaway/pie/pull/439)) by [@fernandofranca](https://github.com/fernandofranca)
|
|
156
|
-
|
|
157
|
-
[Changed] - Updated README.md
|
|
158
|
-
[Removed] - Removed npm `dev` script
|
|
159
|
-
|
|
160
|
-
## 0.12.0
|
|
161
|
-
|
|
162
|
-
### Minor Changes
|
|
163
|
-
|
|
164
|
-
- [Changed] - extended readme file to mention props, events and enum exports ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
165
|
-
|
|
166
|
-
- [Changed] - Prevent hover and active status on disabled btns and change outline to border for safari support ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
167
|
-
|
|
168
|
-
- [Removed] - custom event handler and updated tests accordingly ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
169
|
-
|
|
170
|
-
- [Added] - isFullWidth prop to button ([#434](https://github.com/justeattakeaway/pie/pull/434)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
171
|
-
|
|
172
|
-
## 0.11.0
|
|
173
|
-
|
|
174
|
-
### Minor Changes
|
|
175
|
-
|
|
176
|
-
- [Changed] - Improved readme files ([#418](https://github.com/justeattakeaway/pie/pull/418)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
177
|
-
|
|
178
|
-
- [Changed] - Refactor SCSS to reduce duplication ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
179
|
-
|
|
180
|
-
- [Changed] - Copy playwright projects from monorepo root ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
181
|
-
|
|
182
|
-
- [Changed] - Split small size into expressive and productive ([#416](https://github.com/justeattakeaway/pie/pull/416)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
183
|
-
|
|
184
|
-
### Patch Changes
|
|
185
|
-
|
|
186
|
-
- [Removed] the custom decorator and uses the native `customElement` decorator instead ([#417](https://github.com/justeattakeaway/pie/pull/417)) by [@fernandofranca](https://github.com/fernandofranca)
|
|
187
|
-
|
|
188
|
-
## 0.10.2
|
|
189
|
-
|
|
190
|
-
### Patch Changes
|
|
191
|
-
|
|
192
|
-
- [Added] Declare global statement back in. ([#393](https://github.com/justeattakeaway/pie/pull/393)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
193
|
-
|
|
194
|
-
## 0.10.1
|
|
195
|
-
|
|
196
|
-
### Patch Changes
|
|
197
|
-
|
|
198
|
-
- [Fixed] - Added module entry for component ([#378](https://github.com/justeattakeaway/pie/pull/378)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
199
|
-
|
|
200
|
-
## 0.10.0
|
|
201
|
-
|
|
202
|
-
### Minor Changes
|
|
203
|
-
|
|
204
|
-
- [Removed] Global declare statement ([#371](https://github.com/justeattakeaway/pie/pull/371)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
205
|
-
|
|
206
|
-
## 0.9.0
|
|
207
|
-
|
|
208
|
-
### Minor Changes
|
|
209
|
-
|
|
210
|
-
- [Added] - HTMLElementTagNameMap entry for pie-button element ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
211
|
-
|
|
212
|
-
- [Added] - Slot functionality to pie-button component and associated SB and example app integrations ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
213
|
-
|
|
214
|
-
## 0.8.0
|
|
215
|
-
|
|
216
|
-
### Minor Changes
|
|
217
|
-
|
|
218
|
-
- [Updated] - Register approach for button web component ([#346](https://github.com/justeattakeaway/pie/pull/346)) by [@fernandofranca](https://github.com/fernandofranca)
|
|
219
|
-
|
|
220
|
-
[Added] - "types" field in package.json for better DX and IDE TypesScript support
|
|
221
|
-
[Updated] - Provide Vite settings for generating TypeScript declaration files during build
|
|
222
|
-
|
|
223
|
-
## 0.7.0
|
|
224
|
-
|
|
225
|
-
### Minor Changes
|
|
226
|
-
|
|
227
|
-
- [Updated] button to handle custom events ([#309](https://github.com/justeattakeaway/pie/pull/309)) by [@FayeCarter](https://github.com/FayeCarter)
|
|
228
|
-
|
|
229
|
-
### Patch Changes
|
|
230
|
-
|
|
231
|
-
- Add missing Volta settings to package.json ([#322](https://github.com/justeattakeaway/pie/pull/322)) by [@fernandofranca](https://github.com/fernandofranca)
|
|
232
|
-
|
|
233
|
-
## 0.6.1
|
|
234
|
-
|
|
235
|
-
### Patch Changes
|
|
236
|
-
|
|
237
|
-
- [Added] `watch` script in `package.json` ([#233](https://github.com/justeattakeaway/pie/pull/233)) by [@LTurns](https://github.com/LTurns)
|
|
238
|
-
|
|
239
|
-
[Added] README content for `yarn watch` script
|
|
240
|
-
|
|
241
|
-
## 0.6.0
|
|
242
|
-
|
|
243
|
-
### Minor Changes
|
|
244
|
-
|
|
245
|
-
- [Added] - state styling to button (focus/hover/active/disabled) ([#234](https://github.com/justeattakeaway/pie/pull/234)) by [@raoufswe](https://github.com/raoufswe)
|
|
246
|
-
|
|
247
|
-
## 0.5.1
|
|
248
|
-
|
|
249
|
-
### Patch Changes
|
|
250
|
-
|
|
251
|
-
- [Changed] - Replaced hard-coded font values with scss variables ([#226](https://github.com/justeattakeaway/pie/pull/226)) by [@LTurns](https://github.com/LTurns)
|
|
252
|
-
|
|
253
|
-
## 0.5.0
|
|
254
|
-
|
|
255
|
-
### Minor Changes
|
|
256
|
-
|
|
257
|
-
- [Changed] - Bring button styles into the component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
258
|
-
|
|
259
|
-
- [Added] - Size property to pie-button component ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
260
|
-
|
|
261
|
-
- [Removed] - index.html file in favour of Storybook ([#178](https://github.com/justeattakeaway/pie/pull/178)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
262
|
-
|
|
263
|
-
## 0.4.0
|
|
264
|
-
|
|
265
|
-
### Minor Changes
|
|
266
|
-
|
|
267
|
-
- [Changed] - Set TSconfig target to ES6 to allow modern syntax such as property accessors ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
268
|
-
|
|
269
|
-
- [Added] Create decorator for validating property values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
270
|
-
|
|
271
|
-
- [Added] - `variant` property to decide how we style the button ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
272
|
-
|
|
273
|
-
- [Added] - Lit `classmap` directive to handle conditional css class logic and rendering ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
274
|
-
|
|
275
|
-
- [Changed] - Refactored props to include validation based on enums and add console errors for invalid values ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
276
|
-
|
|
277
|
-
- [Changed] - Renamed `actionType` property to `type` ([#171](https://github.com/justeattakeaway/pie/pull/171)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
278
|
-
|
|
279
|
-
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
|
|
280
|
-
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
|
|
281
|
-
|
|
282
|
-
## v0.3.0
|
|
283
|
-
|
|
284
|
-
_January 24, 2023_
|
|
285
|
-
|
|
286
|
-
### Added
|
|
287
|
-
|
|
288
|
-
- Button default styling (medium).
|
|
289
|
-
- JET font family to html file.
|
|
290
|
-
|
|
291
|
-
## v0.2.0
|
|
292
|
-
|
|
293
|
-
_January 23, 2023_
|
|
294
|
-
|
|
295
|
-
### Added
|
|
296
|
-
|
|
297
|
-
- `actionType` property mapped to `type` attribute.
|
|
298
|
-
|
|
299
|
-
## v0.1.0
|
|
300
|
-
|
|
301
|
-
_January 19, 2023_
|
|
302
|
-
|
|
303
|
-
### Added
|
|
304
|
-
|
|
305
|
-
- Basic button using Lit
|
|
306
|
-
- Initial TypeScript and Vite config
|
package/dist/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './packages/components/pie-button/src/index'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,gFAAiF,CAAC;AACpG,eAAO,MAAM,KAAK,gDAAiD,CAAC;AACpE,eAAO,MAAM,QAAQ,uHAEX,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE9C,MAAM,WAAW,WAAW;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;CACtB"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { ButtonProps, sizes, types, variants } from './defs';
|
|
3
|
-
export { type ButtonProps, sizes, types, variants, };
|
|
4
|
-
declare const componentSelector = "pie-button";
|
|
5
|
-
/**
|
|
6
|
-
* @slot icon-leading - Leading icon
|
|
7
|
-
* @slot icon-trailing - Trailing icon
|
|
8
|
-
* @slot - Default slot
|
|
9
|
-
*/
|
|
10
|
-
export declare class PieButton extends LitElement implements ButtonProps {
|
|
11
|
-
size: ButtonProps['size'];
|
|
12
|
-
type: ButtonProps['type'];
|
|
13
|
-
variant: ButtonProps['variant'];
|
|
14
|
-
disabled: boolean;
|
|
15
|
-
isLoading: boolean;
|
|
16
|
-
isFullWidth: boolean;
|
|
17
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
18
|
-
focus(): void;
|
|
19
|
-
static styles: import("lit").CSSResult;
|
|
20
|
-
}
|
|
21
|
-
declare global {
|
|
22
|
-
interface HTMLElementTagNameMap {
|
|
23
|
-
[componentSelector]: PieButton;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EACH,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EACtC,MAAM,QAAQ,CAAC;AAGhB,OAAO,EACH,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,EACL,QAAQ,GACX,CAAC;AAEF,QAAA,MAAM,iBAAiB,eAAe,CAAC;AAEvC;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,UAAW,YAAW,WAAW;IAGrD,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAY;IAIrC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAa;IAG5C,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,WAAW,UAAS;IAE3B,MAAM;IAoBN,KAAK;IAKL,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;KAClC;CACJ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,SAAS,CAAC;AAEtD,eAAO,MAAM,SAAS,iEAMpB,CAAC"}
|
package/dist/types/react.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './packages/components/pie-button/src/react'
|
package/playwright/index.html
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
7
|
-
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
8
|
-
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
9
|
-
<style>
|
|
10
|
-
@font-face {
|
|
11
|
-
font-family: JETSansDigital;
|
|
12
|
-
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
|
|
13
|
-
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
|
|
14
|
-
font-weight: 400;
|
|
15
|
-
font-display: swap;
|
|
16
|
-
}
|
|
17
|
-
@font-face {
|
|
18
|
-
font-family: JETSansDigital;
|
|
19
|
-
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
|
|
20
|
-
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
|
|
21
|
-
font-weight: 700;
|
|
22
|
-
font-display: swap;
|
|
23
|
-
}
|
|
24
|
-
@font-face {
|
|
25
|
-
font-family: JETSansDigital;
|
|
26
|
-
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
|
|
27
|
-
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
|
|
28
|
-
font-weight: 800;
|
|
29
|
-
font-display: swap;
|
|
30
|
-
}
|
|
31
|
-
body {
|
|
32
|
-
font-feature-settings: "tnum"; /* Enable tabular numbers */
|
|
33
|
-
}
|
|
34
|
-
/* basic styles to center align components and give them some spacing */
|
|
35
|
-
#root {
|
|
36
|
-
padding: 1em;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
#root > * {
|
|
40
|
-
display: block;
|
|
41
|
-
margin-inline: auto;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
#root > * + * {
|
|
45
|
-
margin-top: 1em;
|
|
46
|
-
}
|
|
47
|
-
</style>
|
|
48
|
-
<title>Testing Page</title>
|
|
49
|
-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
|
|
50
|
-
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
|
|
51
|
-
</head>
|
|
52
|
-
<body>
|
|
53
|
-
<div id="root"></div>
|
|
54
|
-
<script type="module" src="./index.ts"></script>
|
|
55
|
-
</body>
|
|
56
|
-
</html>
|
package/playwright/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
// Import common styles here
|
package/playwright-lit.config.ts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
|
|
2
|
-
import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
|
|
3
|
-
import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
|
|
4
|
-
import { PieButton } from '@/index';
|
|
5
|
-
import { sizes, variants } from '@/defs';
|
|
6
|
-
|
|
7
|
-
const props: PropObject = {
|
|
8
|
-
variant: variants,
|
|
9
|
-
size: sizes,
|
|
10
|
-
type: 'button', // Changing the type does not affect the appearance of the button
|
|
11
|
-
isFullWidth: [true, false],
|
|
12
|
-
disabled: [true, false],
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
|
|
16
|
-
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
17
|
-
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
18
|
-
|
|
19
|
-
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ makeAxeBuilder, mount }) => {
|
|
20
|
-
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
21
|
-
await mount(
|
|
22
|
-
PieButton,
|
|
23
|
-
{
|
|
24
|
-
props: { ...combo },
|
|
25
|
-
slots: {
|
|
26
|
-
default: 'Hello world',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
);
|
|
30
|
-
}));
|
|
31
|
-
|
|
32
|
-
const results = await makeAxeBuilder().analyze();
|
|
33
|
-
|
|
34
|
-
expect(results.violations).toEqual([]);
|
|
35
|
-
}));
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import { PieButton, ButtonProps } from '@/index';
|
|
3
|
-
|
|
4
|
-
const props: ButtonProps = {
|
|
5
|
-
size: 'large',
|
|
6
|
-
variant: 'primary',
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
test('should correctly work with native click events', async ({ mount }) => {
|
|
10
|
-
const messages: string[] = [];
|
|
11
|
-
const expectedEventMessage = 'Native event dispatched';
|
|
12
|
-
const component = await mount(
|
|
13
|
-
PieButton,
|
|
14
|
-
{
|
|
15
|
-
props,
|
|
16
|
-
slots: {
|
|
17
|
-
default: 'Click me!',
|
|
18
|
-
},
|
|
19
|
-
on: {
|
|
20
|
-
click: () => {
|
|
21
|
-
messages.push(expectedEventMessage);
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
await component.click();
|
|
28
|
-
|
|
29
|
-
expect(messages).toEqual([expectedEventMessage]);
|
|
30
|
-
});
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { test } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import percySnapshot from '@percy/playwright';
|
|
3
|
-
import type {
|
|
4
|
-
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
5
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
|
|
6
|
-
import {
|
|
7
|
-
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
8
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
|
|
9
|
-
import {
|
|
10
|
-
createTestWebComponent,
|
|
11
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
|
|
12
|
-
import {
|
|
13
|
-
WebComponentTestWrapper,
|
|
14
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
15
|
-
import { PieButton } from '@/index';
|
|
16
|
-
import { sizes, variants } from '@/defs';
|
|
17
|
-
|
|
18
|
-
const props: PropObject = {
|
|
19
|
-
variant: variants,
|
|
20
|
-
size: sizes,
|
|
21
|
-
type: 'button', // Changing the type does not affect the appearance of the button
|
|
22
|
-
isFullWidth: [true, false],
|
|
23
|
-
disabled: [true, false],
|
|
24
|
-
isLoading: [true, false],
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
// Renders a <pie-button> HTML string with the given prop values
|
|
28
|
-
const renderTestPieButton = (propVals: WebComponentPropValues) => `<pie-button variant="${propVals.variant}" size="${propVals.size}" type="${propVals.type}" ${propVals.isFullWidth ? 'isFullWidth' : ''} ${propVals.disabled ? 'disabled' : ''} ${propVals.isLoading ? 'isLoading' : ''}>Hello world</pie-button>`;
|
|
29
|
-
|
|
30
|
-
const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
|
|
31
|
-
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
32
|
-
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
33
|
-
|
|
34
|
-
// This ensures the component is registered in the DOM for each test
|
|
35
|
-
// This is not required if your tests mount the web component directly in the tests
|
|
36
|
-
test.beforeEach(async ({ page, mount }) => {
|
|
37
|
-
await mount(
|
|
38
|
-
PieButton,
|
|
39
|
-
{},
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
// Removing the element so it's not present in the tests (but is still registered in the DOM)
|
|
43
|
-
await page.evaluate(() => {
|
|
44
|
-
const element : Element | null = document.querySelector('pie-button');
|
|
45
|
-
element?.remove();
|
|
46
|
-
});
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
50
|
-
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
51
|
-
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieButton);
|
|
52
|
-
const propKeyValues = `size: ${testComponent.propValues.size}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}, isLoading: ${testComponent.propValues.isLoading}`;
|
|
53
|
-
const darkMode = variant === 'inverse' || variant === 'ghost-inverse';
|
|
54
|
-
|
|
55
|
-
await mount(
|
|
56
|
-
WebComponentTestWrapper,
|
|
57
|
-
{
|
|
58
|
-
props: { propKeyValues, darkMode },
|
|
59
|
-
slots: {
|
|
60
|
-
component: testComponent.renderedString.trim(),
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
);
|
|
64
|
-
}));
|
|
65
|
-
|
|
66
|
-
await percySnapshot(page, `PIE Button - Variant: ${variant}`);
|
|
67
|
-
}));
|
|
68
|
-
|
|
69
|
-
// TODO: Currently setting the slot to use a straight up SVG
|
|
70
|
-
// This should be updated to use pie-icons-webc, but after some investigation, we think that we'll
|
|
71
|
-
// need to convert the webc icons to use Lit, as currently the components don't work well in a Node env like Playwright
|
|
72
|
-
// Atm, importing them like `import '@justeattakeaway/pie-icons-webc/icons/IconClose.js';` results in an `HTMLElement is not defined` error
|
|
73
|
-
const plusSVG = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--plusCircle"><path d="M8.656 4.596H7.344v2.748H4.596v1.312h2.748v2.748h1.312V8.656h2.748V7.344H8.656V4.596Z"></path><path d="M12.795 3.205a6.781 6.781 0 1 0 0 9.625 6.79 6.79 0 0 0 0-9.625Zm-.927 8.662a5.469 5.469 0 1 1-7.734-7.735 5.469 5.469 0 0 1 7.734 7.736Z"></path></svg>';
|
|
74
|
-
const chevronSVG = '<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronDown"><path d="M2.82 5.044 8 10.399 13.197 5l.963.875-5.364 5.565a1.164 1.164 0 0 1-1.636 0L1.875 5.945l.945-.901Z"></path></svg>';
|
|
75
|
-
|
|
76
|
-
sizes.forEach((size) => test(`Render icon slot variations for Size: ${size}`, async ({ page, mount }) => {
|
|
77
|
-
const iconSlotVariations = [
|
|
78
|
-
{
|
|
79
|
-
'icon-leading': plusSVG,
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
'icon-trailing': chevronSVG,
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
'icon-leading': plusSVG,
|
|
86
|
-
'icon-trailing': chevronSVG,
|
|
87
|
-
},
|
|
88
|
-
];
|
|
89
|
-
|
|
90
|
-
await Promise.all(iconSlotVariations.map(async (iconSlots) => {
|
|
91
|
-
const iconLeading = iconSlots['icon-leading'] ? iconSlots['icon-leading'].replace('<svg', '<svg slot="icon-leading"') : '';
|
|
92
|
-
const iconTrailing = iconSlots['icon-trailing'] ? iconSlots['icon-trailing'].replace('<svg', '<svg slot="icon-trailing"') : '';
|
|
93
|
-
|
|
94
|
-
await mount(
|
|
95
|
-
WebComponentTestWrapper,
|
|
96
|
-
{
|
|
97
|
-
props: {
|
|
98
|
-
size,
|
|
99
|
-
},
|
|
100
|
-
slots: {
|
|
101
|
-
component: `<pie-button size="${size}">
|
|
102
|
-
${iconLeading || ''}
|
|
103
|
-
Hello, ${size} Button!
|
|
104
|
-
${iconTrailing || ''}
|
|
105
|
-
</pie-button>`,
|
|
106
|
-
},
|
|
107
|
-
},
|
|
108
|
-
);
|
|
109
|
-
}));
|
|
110
|
-
|
|
111
|
-
await percySnapshot(page, `PIE Button Leading Icon - Size: ${size}`);
|
|
112
|
-
}));
|
|
113
|
-
|
package/tsconfig.json
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../../configs/pie-components-config/tsconfig.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"baseUrl": ".",
|
|
5
|
-
"rootDir": ".",
|
|
6
|
-
},
|
|
7
|
-
"include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
|
|
8
|
-
}
|
package/vite.config.js
DELETED