@justeattakeaway/pie-link 0.1.0 → 0.2.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-link/src/defs.d.ts → index.d.ts} +52 -33
- package/dist/index.js +1 -1
- package/dist/react.d.ts +55 -0
- package/dist/react.js +45 -42
- package/package.json +7 -2
- package/src/index.ts +2 -6
- package/.eslintignore +0 -6
- package/.turbo/turbo-build.log +0 -14
- package/CHANGELOG.md +0 -7
- package/dist/types/index.d.ts +0 -1
- package/dist/types/packages/components/pie-link/src/defs.d.ts.map +0 -1
- package/dist/types/packages/components/pie-link/src/index.d.ts +0 -21
- package/dist/types/packages/components/pie-link/src/index.d.ts.map +0 -1
- package/dist/types/packages/components/pie-link/src/react.d.ts +0 -3
- package/dist/types/packages/components/pie-link/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-link.spec.ts +0 -18
- package/test/component/pie-link.spec.ts +0 -28
- package/test/visual/pie-link.spec.ts +0 -54
- package/tsconfig.json +0 -8
- package/vite.config.js +0 -3
|
@@ -1,33 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import type { LitElement } from 'lit';
|
|
3
|
+
import type { TemplateResult } from 'lit-html';
|
|
4
|
+
|
|
5
|
+
export declare interface LinkProps {
|
|
6
|
+
/**
|
|
7
|
+
* What style variant the link should be such as default, high-visibility or inverse.
|
|
8
|
+
*/
|
|
9
|
+
variant?: typeof variants[number];
|
|
10
|
+
/**
|
|
11
|
+
* What size the link should be.
|
|
12
|
+
*/
|
|
13
|
+
size?: typeof sizes[number];
|
|
14
|
+
/**
|
|
15
|
+
* The URL that the hyperlink should point to
|
|
16
|
+
*/
|
|
17
|
+
href?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Where to display the linked URL such as _self, _blank, _parent or _top
|
|
20
|
+
*/
|
|
21
|
+
target?: string;
|
|
22
|
+
/**
|
|
23
|
+
* What the relationship of the linked URL is
|
|
24
|
+
*/
|
|
25
|
+
rel?: string;
|
|
26
|
+
/**
|
|
27
|
+
* When true, the link text will be bold.
|
|
28
|
+
*/
|
|
29
|
+
isBold?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* When true, the link will be treated as a block box
|
|
32
|
+
*/
|
|
33
|
+
isStandalone?: boolean;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export declare class PieLink extends LitElement implements LinkProps {
|
|
37
|
+
variant: LinkProps['variant'];
|
|
38
|
+
size: LinkProps['size'];
|
|
39
|
+
href?: string;
|
|
40
|
+
target?: string;
|
|
41
|
+
rel?: string;
|
|
42
|
+
isBold: boolean;
|
|
43
|
+
isStandalone: boolean;
|
|
44
|
+
render(): TemplateResult<1>;
|
|
45
|
+
static styles: CSSResult;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export declare const sizes: readonly ["small", "medium"];
|
|
49
|
+
|
|
50
|
+
export declare const variants: readonly ["default", "high-visibility", "inverse"];
|
|
51
|
+
|
|
52
|
+
export { }
|
package/dist/index.js
CHANGED
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
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 LinkProps {
|
|
7
|
+
/**
|
|
8
|
+
* What style variant the link should be such as default, high-visibility or inverse.
|
|
9
|
+
*/
|
|
10
|
+
variant?: typeof variants[number];
|
|
11
|
+
/**
|
|
12
|
+
* What size the link should be.
|
|
13
|
+
*/
|
|
14
|
+
size?: typeof sizes[number];
|
|
15
|
+
/**
|
|
16
|
+
* The URL that the hyperlink should point to
|
|
17
|
+
*/
|
|
18
|
+
href?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Where to display the linked URL such as _self, _blank, _parent or _top
|
|
21
|
+
*/
|
|
22
|
+
target?: string;
|
|
23
|
+
/**
|
|
24
|
+
* What the relationship of the linked URL is
|
|
25
|
+
*/
|
|
26
|
+
rel?: string;
|
|
27
|
+
/**
|
|
28
|
+
* When true, the link text will be bold.
|
|
29
|
+
*/
|
|
30
|
+
isBold?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* When true, the link will be treated as a block box
|
|
33
|
+
*/
|
|
34
|
+
isStandalone?: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export declare const PieLink: ReactWebComponent<PieLink_2, {}>;
|
|
38
|
+
|
|
39
|
+
declare class PieLink_2 extends LitElement implements LinkProps {
|
|
40
|
+
variant: LinkProps['variant'];
|
|
41
|
+
size: LinkProps['size'];
|
|
42
|
+
href?: string;
|
|
43
|
+
target?: string;
|
|
44
|
+
rel?: string;
|
|
45
|
+
isBold: boolean;
|
|
46
|
+
isStandalone: boolean;
|
|
47
|
+
render(): TemplateResult<1>;
|
|
48
|
+
static styles: CSSResult;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export declare const sizes: readonly ["small", "medium"];
|
|
52
|
+
|
|
53
|
+
export declare const variants: readonly ["default", "high-visibility", "inverse"];
|
|
54
|
+
|
|
55
|
+
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PieLink as Lr } from "./index.js";
|
|
2
|
+
import { sizes as Zr, variants as en } from "./index.js";
|
|
2
3
|
import "lit";
|
|
3
4
|
import "lit/decorators.js";
|
|
4
5
|
import "lit/directives/if-defined.js";
|
|
@@ -33,7 +34,7 @@ var Ve = { exports: {} }, p = {};
|
|
|
33
34
|
* LICENSE file in the root directory of this source tree.
|
|
34
35
|
*/
|
|
35
36
|
var Ct;
|
|
36
|
-
function
|
|
37
|
+
function xr() {
|
|
37
38
|
if (Ct)
|
|
38
39
|
return p;
|
|
39
40
|
Ct = 1;
|
|
@@ -75,8 +76,8 @@ function Mr() {
|
|
|
75
76
|
if (b === 1)
|
|
76
77
|
v.children = d;
|
|
77
78
|
else if (1 < b) {
|
|
78
|
-
for (var E = Array(b),
|
|
79
|
-
E[
|
|
79
|
+
for (var E = Array(b), x = 0; x < b; x++)
|
|
80
|
+
E[x] = arguments[x + 2];
|
|
80
81
|
v.children = E;
|
|
81
82
|
}
|
|
82
83
|
if (r && r.defaultProps)
|
|
@@ -120,8 +121,8 @@ function Mr() {
|
|
|
120
121
|
}
|
|
121
122
|
}
|
|
122
123
|
if (S)
|
|
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(
|
|
124
|
-
return
|
|
124
|
+
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) {
|
|
125
|
+
return x;
|
|
125
126
|
})) : v != null && (ie(v) && (v = pe(v, d + (!v.key || S && S.key === v.key ? "" : ("" + v.key).replace(ve, "$&/") + "/") + r)), u.push(v)), 1;
|
|
126
127
|
if (S = 0, h = h === "" ? "." : h + ":", Q(r))
|
|
127
128
|
for (var b = 0; b < r.length; b++) {
|
|
@@ -190,8 +191,8 @@ function Mr() {
|
|
|
190
191
|
h.children = d;
|
|
191
192
|
else if (1 < E) {
|
|
192
193
|
b = Array(E);
|
|
193
|
-
for (var
|
|
194
|
-
b[
|
|
194
|
+
for (var x = 0; x < E; x++)
|
|
195
|
+
b[x] = arguments[x + 2];
|
|
195
196
|
h.children = b;
|
|
196
197
|
}
|
|
197
198
|
return { $$typeof: g, type: r.type, key: v, ref: _, props: h, _owner: S };
|
|
@@ -261,7 +262,7 @@ var de = { exports: {} };
|
|
|
261
262
|
*/
|
|
262
263
|
de.exports;
|
|
263
264
|
var St;
|
|
264
|
-
function
|
|
265
|
+
function Mr() {
|
|
265
266
|
return St || (St = 1, function(g, c) {
|
|
266
267
|
process.env.NODE_ENV !== "production" && function() {
|
|
267
268
|
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
|
|
@@ -431,11 +432,11 @@ function xr() {
|
|
|
431
432
|
function E() {
|
|
432
433
|
}
|
|
433
434
|
E.prototype = v.prototype;
|
|
434
|
-
function
|
|
435
|
+
function x(e, t, n) {
|
|
435
436
|
this.props = e, this.context = t, this.refs = h, this.updater = n || u;
|
|
436
437
|
}
|
|
437
|
-
var Te =
|
|
438
|
-
Te.constructor =
|
|
438
|
+
var Te = x.prototype = new E();
|
|
439
|
+
Te.constructor = x, d(Te, v.prototype), Te.isPureReactComponent = !0;
|
|
439
440
|
function Tt() {
|
|
440
441
|
var e = {
|
|
441
442
|
current: null
|
|
@@ -627,7 +628,7 @@ function xr() {
|
|
|
627
628
|
var n = je(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
|
|
628
629
|
return n;
|
|
629
630
|
}
|
|
630
|
-
function
|
|
631
|
+
function xt(e, t, n) {
|
|
631
632
|
if (e == null)
|
|
632
633
|
throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + e + ".");
|
|
633
634
|
var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, m = e._owner;
|
|
@@ -651,7 +652,7 @@ function xr() {
|
|
|
651
652
|
function ae(e) {
|
|
652
653
|
return typeof e == "object" && e !== null && e.$$typeof === k;
|
|
653
654
|
}
|
|
654
|
-
var Ke = ".",
|
|
655
|
+
var Ke = ".", Mt = ":";
|
|
655
656
|
function Ut(e) {
|
|
656
657
|
var t = /[=:]/g, n = {
|
|
657
658
|
"=": "=0",
|
|
@@ -708,7 +709,7 @@ function xr() {
|
|
|
708
709
|
)), t.push(y));
|
|
709
710
|
return 1;
|
|
710
711
|
}
|
|
711
|
-
var w, C, O = 0, $ = a === "" ? Ke : a +
|
|
712
|
+
var w, C, O = 0, $ = a === "" ? Ke : a + Mt;
|
|
712
713
|
if (he(e))
|
|
713
714
|
for (var Oe = 0; Oe < e.length; Oe++)
|
|
714
715
|
w = e[Oe], C = $ + Ae(w, Oe), O += ge(w, t, n, C, o);
|
|
@@ -959,7 +960,7 @@ Your code should look like:
|
|
|
959
960
|
}
|
|
960
961
|
return n;
|
|
961
962
|
}
|
|
962
|
-
function
|
|
963
|
+
function M() {
|
|
963
964
|
var e = K.current;
|
|
964
965
|
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:
|
|
965
966
|
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
|
@@ -968,7 +969,7 @@ Your code should look like:
|
|
|
968
969
|
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`), e;
|
|
969
970
|
}
|
|
970
971
|
function Xt(e) {
|
|
971
|
-
var t =
|
|
972
|
+
var t = M();
|
|
972
973
|
if (e._context !== void 0) {
|
|
973
974
|
var n = e._context;
|
|
974
975
|
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?");
|
|
@@ -976,61 +977,61 @@ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and f
|
|
|
976
977
|
return t.useContext(e);
|
|
977
978
|
}
|
|
978
979
|
function Zt(e) {
|
|
979
|
-
var t =
|
|
980
|
+
var t = M();
|
|
980
981
|
return t.useState(e);
|
|
981
982
|
}
|
|
982
983
|
function er(e, t, n) {
|
|
983
|
-
var a =
|
|
984
|
+
var a = M();
|
|
984
985
|
return a.useReducer(e, t, n);
|
|
985
986
|
}
|
|
986
987
|
function tr(e) {
|
|
987
|
-
var t =
|
|
988
|
+
var t = M();
|
|
988
989
|
return t.useRef(e);
|
|
989
990
|
}
|
|
990
991
|
function rr(e, t) {
|
|
991
|
-
var n =
|
|
992
|
+
var n = M();
|
|
992
993
|
return n.useEffect(e, t);
|
|
993
994
|
}
|
|
994
995
|
function nr(e, t) {
|
|
995
|
-
var n =
|
|
996
|
+
var n = M();
|
|
996
997
|
return n.useInsertionEffect(e, t);
|
|
997
998
|
}
|
|
998
999
|
function ar(e, t) {
|
|
999
|
-
var n =
|
|
1000
|
+
var n = M();
|
|
1000
1001
|
return n.useLayoutEffect(e, t);
|
|
1001
1002
|
}
|
|
1002
1003
|
function or(e, t) {
|
|
1003
|
-
var n =
|
|
1004
|
+
var n = M();
|
|
1004
1005
|
return n.useCallback(e, t);
|
|
1005
1006
|
}
|
|
1006
1007
|
function ur(e, t) {
|
|
1007
|
-
var n =
|
|
1008
|
+
var n = M();
|
|
1008
1009
|
return n.useMemo(e, t);
|
|
1009
1010
|
}
|
|
1010
1011
|
function ir(e, t, n) {
|
|
1011
|
-
var a =
|
|
1012
|
+
var a = M();
|
|
1012
1013
|
return a.useImperativeHandle(e, t, n);
|
|
1013
1014
|
}
|
|
1014
1015
|
function sr(e, t) {
|
|
1015
1016
|
{
|
|
1016
|
-
var n =
|
|
1017
|
+
var n = M();
|
|
1017
1018
|
return n.useDebugValue(e, t);
|
|
1018
1019
|
}
|
|
1019
1020
|
}
|
|
1020
1021
|
function cr() {
|
|
1021
|
-
var e =
|
|
1022
|
+
var e = M();
|
|
1022
1023
|
return e.useTransition();
|
|
1023
1024
|
}
|
|
1024
1025
|
function fr(e) {
|
|
1025
|
-
var t =
|
|
1026
|
+
var t = M();
|
|
1026
1027
|
return t.useDeferredValue(e);
|
|
1027
1028
|
}
|
|
1028
1029
|
function lr() {
|
|
1029
|
-
var e =
|
|
1030
|
+
var e = M();
|
|
1030
1031
|
return e.useId();
|
|
1031
1032
|
}
|
|
1032
1033
|
function dr(e, t, n) {
|
|
1033
|
-
var a =
|
|
1034
|
+
var a = M();
|
|
1034
1035
|
return a.useSyncExternalStore(e, t, n);
|
|
1035
1036
|
}
|
|
1036
1037
|
var le = 0, tt, rt, nt, at, ot, ut, it;
|
|
@@ -1386,7 +1387,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1386
1387
|
}), t;
|
|
1387
1388
|
}
|
|
1388
1389
|
function Cr(e, t, n) {
|
|
1389
|
-
for (var a =
|
|
1390
|
+
for (var a = xt.apply(this, arguments), o = 2; o < arguments.length; o++)
|
|
1390
1391
|
yt(arguments[o], a.type);
|
|
1391
1392
|
return ht(a), a;
|
|
1392
1393
|
}
|
|
@@ -1428,7 +1429,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1428
1429
|
try {
|
|
1429
1430
|
if (j.isBatchingLegacy = !0, a = e(), !n && j.didScheduleLegacyUpdate) {
|
|
1430
1431
|
var o = j.current;
|
|
1431
|
-
o !== null && (j.didScheduleLegacyUpdate = !1,
|
|
1432
|
+
o !== null && (j.didScheduleLegacyUpdate = !1, Me(o));
|
|
1432
1433
|
}
|
|
1433
1434
|
} catch (C) {
|
|
1434
1435
|
throw Se(t), C;
|
|
@@ -1453,7 +1454,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1453
1454
|
var y = a;
|
|
1454
1455
|
if (Se(t), ue === 0) {
|
|
1455
1456
|
var m = j.current;
|
|
1456
|
-
m !== null && (
|
|
1457
|
+
m !== null && (Me(m), j.current = null);
|
|
1457
1458
|
var R = {
|
|
1458
1459
|
then: function(C, O) {
|
|
1459
1460
|
j.current === null ? (j.current = [], Fe(y, C, O)) : C(y);
|
|
@@ -1479,7 +1480,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1479
1480
|
var a = j.current;
|
|
1480
1481
|
if (a !== null)
|
|
1481
1482
|
try {
|
|
1482
|
-
|
|
1483
|
+
Me(a), Or(function() {
|
|
1483
1484
|
a.length === 0 ? (j.current = null, t(e)) : Fe(e, t, n);
|
|
1484
1485
|
});
|
|
1485
1486
|
} catch (o) {
|
|
@@ -1489,10 +1490,10 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1489
1490
|
t(e);
|
|
1490
1491
|
}
|
|
1491
1492
|
}
|
|
1492
|
-
var
|
|
1493
|
-
function
|
|
1494
|
-
if (!
|
|
1495
|
-
|
|
1493
|
+
var xe = !1;
|
|
1494
|
+
function Me(e) {
|
|
1495
|
+
if (!xe) {
|
|
1496
|
+
xe = !0;
|
|
1496
1497
|
var t = 0;
|
|
1497
1498
|
try {
|
|
1498
1499
|
for (; t < e.length; t++) {
|
|
@@ -1505,7 +1506,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1505
1506
|
} catch (a) {
|
|
1506
1507
|
throw e = e.slice(t + 1), a;
|
|
1507
1508
|
} finally {
|
|
1508
|
-
|
|
1509
|
+
xe = !1;
|
|
1509
1510
|
}
|
|
1510
1511
|
}
|
|
1511
1512
|
}
|
|
@@ -1516,11 +1517,11 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1516
1517
|
toArray: zt,
|
|
1517
1518
|
only: Bt
|
|
1518
1519
|
};
|
|
1519
|
-
c.Children = Ar, c.Component = v, c.Fragment = T, c.Profiler = I, c.PureComponent =
|
|
1520
|
+
c.Children = Ar, c.Component = v, c.Fragment = T, 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 = Tr, c.createFactory = jr, c.createRef = Tt, c.forwardRef = Qt, c.isValidElement = ae, c.lazy = Kt, c.memo = Jt, c.startTransition = Sr, c.unstable_act = kr, 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());
|
|
1520
1521
|
}();
|
|
1521
1522
|
}(de, de.exports)), de.exports;
|
|
1522
1523
|
}
|
|
1523
|
-
process.env.NODE_ENV === "production" ? Ve.exports =
|
|
1524
|
+
process.env.NODE_ENV === "production" ? Ve.exports = xr() : Ve.exports = Mr();
|
|
1524
1525
|
var kt = Ve.exports;
|
|
1525
1526
|
const Ur = /* @__PURE__ */ Fr(kt), Vr = /* @__PURE__ */ Nr({
|
|
1526
1527
|
__proto__: null,
|
|
@@ -1588,5 +1589,7 @@ const Qr = zr({
|
|
|
1588
1589
|
events: {}
|
|
1589
1590
|
});
|
|
1590
1591
|
export {
|
|
1591
|
-
Qr as PieLink
|
|
1592
|
+
Qr as PieLink,
|
|
1593
|
+
Zr as sizes,
|
|
1594
|
+
en as variants
|
|
1592
1595
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-link",
|
|
3
3
|
"description": "PIE Design System Link built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
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-link && run -T vite build",
|
|
11
16
|
"lint:scripts": "run -T eslint .",
|
package/src/index.ts
CHANGED
|
@@ -6,11 +6,7 @@ import styles from './link.scss?inline';
|
|
|
6
6
|
import { LinkProps, variants, sizes } from './defs';
|
|
7
7
|
|
|
8
8
|
// Valid values available to consumers
|
|
9
|
-
export
|
|
10
|
-
type LinkProps,
|
|
11
|
-
variants,
|
|
12
|
-
sizes,
|
|
13
|
-
};
|
|
9
|
+
export * from './defs';
|
|
14
10
|
|
|
15
11
|
const componentSelector = 'pie-link';
|
|
16
12
|
|
|
@@ -44,7 +40,7 @@ export class PieLink extends LitElement implements LinkProps {
|
|
|
44
40
|
} = this;
|
|
45
41
|
|
|
46
42
|
return html`
|
|
47
|
-
<a
|
|
43
|
+
<a
|
|
48
44
|
data-test-id="pie-link"
|
|
49
45
|
class="c-link"
|
|
50
46
|
variant=${variant}
|
package/.eslintignore
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
[2:03:47 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[2m 3.27 kB[22m[1m[22m[2m │ gzip: 1.24 kB[22m
|
|
9
|
-
[2mdist/[22m[36mreact.js [39m[1m[2m59.04 kB[22m[1m[22m[2m │ gzip: 15.92 kB[22m
|
|
10
|
-
[32m
|
|
11
|
-
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in 45.82s[39m
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in 43014ms.
|
|
14
|
-
[39m
|
package/CHANGELOG.md
DELETED
package/dist/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './packages/components/pie-link/src/index'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oDAAqD,CAAC;AAC3E,eAAO,MAAM,KAAK,8BAA+B,CAAC;AAElD,MAAM,WAAW,SAAS;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { LinkProps, variants, sizes } from './defs';
|
|
3
|
-
export { type LinkProps, variants, sizes, };
|
|
4
|
-
declare const componentSelector = "pie-link";
|
|
5
|
-
export declare class PieLink extends LitElement implements LinkProps {
|
|
6
|
-
variant: LinkProps['variant'];
|
|
7
|
-
size: LinkProps['size'];
|
|
8
|
-
href?: string;
|
|
9
|
-
target?: string;
|
|
10
|
-
rel?: string;
|
|
11
|
-
isBold: boolean;
|
|
12
|
-
isStandalone: boolean;
|
|
13
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
-
static styles: import("lit").CSSResult;
|
|
15
|
-
}
|
|
16
|
-
declare global {
|
|
17
|
-
interface HTMLElementTagNameMap {
|
|
18
|
-
[componentSelector]: PieLink;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
//# 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;AAKlD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAGpD,OAAO,EACH,KAAK,SAAS,EACd,QAAQ,EACR,KAAK,GACR,CAAC;AAEF,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qBAAa,OAAQ,SAAQ,UAAW,YAAW,SAAS;IAGjD,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAa;IAI1C,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAY;IAGnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,MAAM,UAAS;IAGf,YAAY,UAAS;IAE5B,MAAM;IAqBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAChC;CACJ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,OAAO,+DAMlB,CAAC"}
|
package/dist/types/react.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './packages/components/pie-link/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,18 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
|
|
3
|
-
import { PieLink, LinkProps } from '@/index';
|
|
4
|
-
|
|
5
|
-
test.describe('PieLink - Accessibility tests', () => {
|
|
6
|
-
test('a11y - should test the PieLink component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
|
|
7
|
-
await mount(
|
|
8
|
-
PieLink,
|
|
9
|
-
{
|
|
10
|
-
props: {} as LinkProps,
|
|
11
|
-
},
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
const results = await makeAxeBuilder().analyze();
|
|
15
|
-
|
|
16
|
-
expect(results.violations).toEqual([]);
|
|
17
|
-
});
|
|
18
|
-
});
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
3
|
-
import { PieLink, LinkProps } from '@/index';
|
|
4
|
-
|
|
5
|
-
const componentSelector = '[data-test-id="pie-link"]';
|
|
6
|
-
|
|
7
|
-
const props: LinkProps = {
|
|
8
|
-
href: '#',
|
|
9
|
-
target: '_blank',
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
test.describe('PieLink - Component tests', () => {
|
|
13
|
-
test('should be visible', async ({ mount, page }) => {
|
|
14
|
-
// Arrange
|
|
15
|
-
await mount(PieLink, {
|
|
16
|
-
props,
|
|
17
|
-
slots: { default: 'Link!' },
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
// Act
|
|
21
|
-
const link = page.locator(componentSelector);
|
|
22
|
-
|
|
23
|
-
// Assert
|
|
24
|
-
await expect(link).toBeVisible();
|
|
25
|
-
await expect(link).toHaveAttribute('href', '#');
|
|
26
|
-
await expect(link).toHaveAttribute('target', '_blank');
|
|
27
|
-
});
|
|
28
|
-
});
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { test } from '@sand4rt/experimental-ct-web';
|
|
3
|
-
import percySnapshot from '@percy/playwright';
|
|
4
|
-
import type {
|
|
5
|
-
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
6
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
|
|
7
|
-
import {
|
|
8
|
-
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
9
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
|
|
10
|
-
import {
|
|
11
|
-
createTestWebComponent,
|
|
12
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
|
|
13
|
-
import {
|
|
14
|
-
WebComponentTestWrapper,
|
|
15
|
-
} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
16
|
-
import { variants, sizes } from '@/defs';
|
|
17
|
-
import { PieLink } from '@/index';
|
|
18
|
-
|
|
19
|
-
const props: PropObject = {
|
|
20
|
-
variant: variants,
|
|
21
|
-
size: sizes,
|
|
22
|
-
href: 'pie.design',
|
|
23
|
-
target: '_blank',
|
|
24
|
-
isBold: [true, false],
|
|
25
|
-
isStandalone: [true, false],
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const renderTestPieLink = (propVals: WebComponentPropValues) => `<pie-link variant="${propVals.variant}" size="${propVals.size}" href="${propVals.href}" target="${propVals.target}" ${propVals.isBold ? 'isBold' : ''} ${propVals.isStandalone ? 'isStandalone' : ''} />`;
|
|
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
|
-
test.beforeEach(async ({ page, mount }) => {
|
|
35
|
-
await mount(PieLink, {});
|
|
36
|
-
await page.evaluate(() => {
|
|
37
|
-
const element : Element | null = document.querySelector('pie-link');
|
|
38
|
-
element?.remove();
|
|
39
|
-
});
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
43
|
-
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
44
|
-
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieLink);
|
|
45
|
-
const propKeyValues = `size: ${testComponent.propValues.size}, isBold: ${testComponent.propValues.isBold}, isStandalone: ${testComponent.propValues.isStandalone}, href: ${testComponent.propValues.href}, target: ${testComponent.propValues.target}, target: ${testComponent.propValues.target}`;
|
|
46
|
-
|
|
47
|
-
await mount(
|
|
48
|
-
WebComponentTestWrapper,
|
|
49
|
-
{ props: { propKeyValues, darkMode: variant === 'inverse' } },
|
|
50
|
-
);
|
|
51
|
-
}));
|
|
52
|
-
|
|
53
|
-
await percySnapshot(page, `PIE Link - Variant: ${variant}`);
|
|
54
|
-
}));
|
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