@justeattakeaway/pie-divider 0.1.0 → 0.3.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/README.md +4 -3
- package/dist/index.d.ts +27 -0
- package/dist/index.js +52 -7
- package/dist/react.d.ts +30 -0
- package/dist/react.js +48 -43
- package/package.json +7 -2
- package/src/defs.ts +13 -3
- package/src/divider.scss +29 -0
- package/src/index.ts +22 -6
- package/.eslintignore +0 -6
- package/.turbo/turbo-build.log +0 -14
- package/CHANGELOG.md +0 -9
- package/dist/types/index.d.ts +0 -1
- package/dist/types/react.d.ts +0 -1
- package/dist/types/src/defs.d.ts +0 -3
- package/dist/types/src/defs.d.ts.map +0 -1
- package/dist/types/src/index.d.ts +0 -14
- package/dist/types/src/index.d.ts.map +0 -1
- package/dist/types/src/react.d.ts +0 -3
- package/dist/types/src/react.d.ts.map +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-divider.spec.ts +0 -18
- package/test/component/pie-divider.spec.ts +0 -20
- package/test/visual/pie-divider.spec.ts +0 -14
- package/tsconfig.json +0 -8
- package/vite.config.js +0 -3
package/README.md
CHANGED
|
@@ -59,16 +59,17 @@ import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
|
|
|
59
59
|
|
|
60
60
|
| Property | Type | Default | Description |
|
|
61
61
|
|---|---|---|---|
|
|
62
|
-
|
|
|
62
|
+
| variant | `String` | `default` | Variant of the divider, one of variants – default, inverse |
|
|
63
|
+
| orientation | `String` | `horizontal` | Orientation of the divider, one of – horizontal, vertical |
|
|
63
64
|
|
|
64
65
|
In your markup or JSX, you can then use these to set the properties for the `pie-divider` component:
|
|
65
66
|
|
|
66
67
|
```html
|
|
67
68
|
<!-- Native HTML -->
|
|
68
|
-
<pie-divider
|
|
69
|
+
<pie-divider />
|
|
69
70
|
|
|
70
71
|
<!-- JSX -->
|
|
71
|
-
<PieDivider
|
|
72
|
+
<PieDivider />
|
|
72
73
|
```
|
|
73
74
|
|
|
74
75
|
## Testing
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { CSSResult } from 'lit';
|
|
2
|
+
import type { LitElement } from 'lit';
|
|
3
|
+
import type { TemplateResult } from 'lit-html';
|
|
4
|
+
|
|
5
|
+
export declare interface DividerProps {
|
|
6
|
+
/**
|
|
7
|
+
* What style variant the divider should be such as default or vertical.
|
|
8
|
+
*/
|
|
9
|
+
variant: typeof variants[number];
|
|
10
|
+
/**
|
|
11
|
+
* What orientation the divider should be such as horizontal or inverse.
|
|
12
|
+
*/
|
|
13
|
+
orientation: typeof orientations[number];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export declare const orientations: readonly ["horizontal", "vertical"];
|
|
17
|
+
|
|
18
|
+
export declare class PieDivider extends LitElement implements DividerProps {
|
|
19
|
+
variant: DividerProps['variant'];
|
|
20
|
+
orientation: DividerProps['orientation'];
|
|
21
|
+
render(): TemplateResult<1>;
|
|
22
|
+
static styles: CSSResult;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export declare const variants: readonly ["default", "inverse"];
|
|
26
|
+
|
|
27
|
+
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,57 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { unsafeCSS as u, LitElement as f, html as g } from "lit";
|
|
2
|
+
import { property as c } from "lit/decorators.js";
|
|
3
|
+
import "lit/decorators/property.js";
|
|
4
|
+
const l = (n, i, r) => function(e, t) {
|
|
5
|
+
const o = `#${t}`;
|
|
6
|
+
Object.defineProperty(e, t, {
|
|
7
|
+
get() {
|
|
8
|
+
return this[o];
|
|
9
|
+
},
|
|
10
|
+
set(s) {
|
|
11
|
+
const p = this[o];
|
|
12
|
+
i.includes(s) ? this[o] = s : (console.error(
|
|
13
|
+
`<${n}> Invalid value "${s}" provided for property "${t}".`,
|
|
14
|
+
`Must be one of: ${i.join(" | ")}.`,
|
|
15
|
+
`Falling back to default value: "${r}"`
|
|
16
|
+
), this[o] = r), this.requestUpdate(t, p);
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}, m = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
|
|
20
|
+
`, b = ["default", "inverse"], P = ["horizontal", "vertical"];
|
|
21
|
+
var $ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (n, i, r, d) => {
|
|
22
|
+
for (var e = d > 1 ? void 0 : d ? y(i, r) : i, t = n.length - 1, o; t >= 0; t--)
|
|
23
|
+
(o = n[t]) && (e = (d ? o(i, r, e) : o(e)) || e);
|
|
24
|
+
return d && e && $(i, r, e), e;
|
|
25
|
+
};
|
|
26
|
+
const v = "pie-divider";
|
|
27
|
+
class a extends f {
|
|
28
|
+
constructor() {
|
|
29
|
+
super(...arguments), this.variant = "default", this.orientation = "horizontal";
|
|
30
|
+
}
|
|
4
31
|
render() {
|
|
5
|
-
|
|
32
|
+
const { variant: i, orientation: r } = this;
|
|
33
|
+
return g`
|
|
34
|
+
<hr
|
|
35
|
+
data-test-id="pie-divider"
|
|
36
|
+
aria-hidden="true"
|
|
37
|
+
class="c-divider"
|
|
38
|
+
variant=${i}
|
|
39
|
+
orientation=${r}
|
|
40
|
+
/>`;
|
|
6
41
|
}
|
|
7
42
|
}
|
|
8
|
-
|
|
9
|
-
|
|
43
|
+
a.styles = u(m);
|
|
44
|
+
h([
|
|
45
|
+
c({ type: String }),
|
|
46
|
+
l(v, b, "default")
|
|
47
|
+
], a.prototype, "variant", 2);
|
|
48
|
+
h([
|
|
49
|
+
c({ type: String }),
|
|
50
|
+
l(v, P, "horizontal")
|
|
51
|
+
], a.prototype, "orientation", 2);
|
|
52
|
+
customElements.define(v, a);
|
|
10
53
|
export {
|
|
11
|
-
|
|
54
|
+
a as PieDivider,
|
|
55
|
+
P as orientations,
|
|
56
|
+
b as variants
|
|
12
57
|
};
|
package/dist/react.d.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
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 DividerProps {
|
|
7
|
+
/**
|
|
8
|
+
* What style variant the divider should be such as default or vertical.
|
|
9
|
+
*/
|
|
10
|
+
variant: typeof variants[number];
|
|
11
|
+
/**
|
|
12
|
+
* What orientation the divider should be such as horizontal or inverse.
|
|
13
|
+
*/
|
|
14
|
+
orientation: typeof orientations[number];
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export declare const orientations: readonly ["horizontal", "vertical"];
|
|
18
|
+
|
|
19
|
+
export declare const PieDivider: ReactWebComponent<PieDivider_2, {}>;
|
|
20
|
+
|
|
21
|
+
declare class PieDivider_2 extends LitElement implements DividerProps {
|
|
22
|
+
variant: DividerProps['variant'];
|
|
23
|
+
orientation: DividerProps['orientation'];
|
|
24
|
+
render(): TemplateResult<1>;
|
|
25
|
+
static styles: CSSResult;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export declare const variants: readonly ["default", "inverse"];
|
|
29
|
+
|
|
30
|
+
export { }
|
package/dist/react.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { PieDivider as Nr } from "./index.js";
|
|
2
|
+
import { orientations as Xr, variants as Zr } from "./index.js";
|
|
2
3
|
import "lit";
|
|
4
|
+
import "lit/decorators.js";
|
|
5
|
+
import "lit/decorators/property.js";
|
|
3
6
|
function Fr(g, c) {
|
|
4
7
|
for (var U = 0; U < c.length; U++) {
|
|
5
8
|
const T = c[U];
|
|
@@ -30,7 +33,7 @@ var Ve = { exports: {} }, p = {};
|
|
|
30
33
|
* LICENSE file in the root directory of this source tree.
|
|
31
34
|
*/
|
|
32
35
|
var Ct;
|
|
33
|
-
function
|
|
36
|
+
function xr() {
|
|
34
37
|
if (Ct)
|
|
35
38
|
return p;
|
|
36
39
|
Ct = 1;
|
|
@@ -72,8 +75,8 @@ function Mr() {
|
|
|
72
75
|
if (b === 1)
|
|
73
76
|
v.children = d;
|
|
74
77
|
else if (1 < b) {
|
|
75
|
-
for (var E = Array(b),
|
|
76
|
-
E[
|
|
78
|
+
for (var E = Array(b), x = 0; x < b; x++)
|
|
79
|
+
E[x] = arguments[x + 2];
|
|
77
80
|
v.children = E;
|
|
78
81
|
}
|
|
79
82
|
if (r && r.defaultProps)
|
|
@@ -117,8 +120,8 @@ function Mr() {
|
|
|
117
120
|
}
|
|
118
121
|
}
|
|
119
122
|
if (S)
|
|
120
|
-
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(
|
|
121
|
-
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;
|
|
122
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;
|
|
123
126
|
if (S = 0, h = h === "" ? "." : h + ":", Q(r))
|
|
124
127
|
for (var b = 0; b < r.length; b++) {
|
|
@@ -187,8 +190,8 @@ function Mr() {
|
|
|
187
190
|
h.children = d;
|
|
188
191
|
else if (1 < E) {
|
|
189
192
|
b = Array(E);
|
|
190
|
-
for (var
|
|
191
|
-
b[
|
|
193
|
+
for (var x = 0; x < E; x++)
|
|
194
|
+
b[x] = arguments[x + 2];
|
|
192
195
|
h.children = b;
|
|
193
196
|
}
|
|
194
197
|
return { $$typeof: g, type: r.type, key: v, ref: _, props: h, _owner: S };
|
|
@@ -258,7 +261,7 @@ var de = { exports: {} };
|
|
|
258
261
|
*/
|
|
259
262
|
de.exports;
|
|
260
263
|
var St;
|
|
261
|
-
function
|
|
264
|
+
function Mr() {
|
|
262
265
|
return St || (St = 1, function(g, c) {
|
|
263
266
|
process.env.NODE_ENV !== "production" && function() {
|
|
264
267
|
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
|
|
@@ -428,11 +431,11 @@ function xr() {
|
|
|
428
431
|
function E() {
|
|
429
432
|
}
|
|
430
433
|
E.prototype = v.prototype;
|
|
431
|
-
function
|
|
434
|
+
function x(e, t, n) {
|
|
432
435
|
this.props = e, this.context = t, this.refs = h, this.updater = n || u;
|
|
433
436
|
}
|
|
434
|
-
var ke =
|
|
435
|
-
ke.constructor =
|
|
437
|
+
var ke = x.prototype = new E();
|
|
438
|
+
ke.constructor = x, d(ke, v.prototype), ke.isPureReactComponent = !0;
|
|
436
439
|
function kt() {
|
|
437
440
|
var e = {
|
|
438
441
|
current: null
|
|
@@ -624,7 +627,7 @@ function xr() {
|
|
|
624
627
|
var n = je(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
|
|
625
628
|
return n;
|
|
626
629
|
}
|
|
627
|
-
function
|
|
630
|
+
function xt(e, t, n) {
|
|
628
631
|
if (e == null)
|
|
629
632
|
throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + e + ".");
|
|
630
633
|
var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, m = e._owner;
|
|
@@ -648,7 +651,7 @@ function xr() {
|
|
|
648
651
|
function ae(e) {
|
|
649
652
|
return typeof e == "object" && e !== null && e.$$typeof === T;
|
|
650
653
|
}
|
|
651
|
-
var Ke = ".",
|
|
654
|
+
var Ke = ".", Mt = ":";
|
|
652
655
|
function Ut(e) {
|
|
653
656
|
var t = /[=:]/g, n = {
|
|
654
657
|
"=": "=0",
|
|
@@ -705,7 +708,7 @@ function xr() {
|
|
|
705
708
|
)), t.push(y));
|
|
706
709
|
return 1;
|
|
707
710
|
}
|
|
708
|
-
var w, C, O = 0, $ = a === "" ? Ke : a +
|
|
711
|
+
var w, C, O = 0, $ = a === "" ? Ke : a + Mt;
|
|
709
712
|
if (he(e))
|
|
710
713
|
for (var Oe = 0; Oe < e.length; Oe++)
|
|
711
714
|
w = e[Oe], C = $ + Ae(w, Oe), O += ge(w, t, n, C, o);
|
|
@@ -956,7 +959,7 @@ Your code should look like:
|
|
|
956
959
|
}
|
|
957
960
|
return n;
|
|
958
961
|
}
|
|
959
|
-
function
|
|
962
|
+
function M() {
|
|
960
963
|
var e = K.current;
|
|
961
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:
|
|
962
965
|
1. You might have mismatching versions of React and the renderer (such as React DOM)
|
|
@@ -965,7 +968,7 @@ Your code should look like:
|
|
|
965
968
|
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`), e;
|
|
966
969
|
}
|
|
967
970
|
function Xt(e) {
|
|
968
|
-
var t =
|
|
971
|
+
var t = M();
|
|
969
972
|
if (e._context !== void 0) {
|
|
970
973
|
var n = e._context;
|
|
971
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?");
|
|
@@ -973,61 +976,61 @@ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and f
|
|
|
973
976
|
return t.useContext(e);
|
|
974
977
|
}
|
|
975
978
|
function Zt(e) {
|
|
976
|
-
var t =
|
|
979
|
+
var t = M();
|
|
977
980
|
return t.useState(e);
|
|
978
981
|
}
|
|
979
982
|
function er(e, t, n) {
|
|
980
|
-
var a =
|
|
983
|
+
var a = M();
|
|
981
984
|
return a.useReducer(e, t, n);
|
|
982
985
|
}
|
|
983
986
|
function tr(e) {
|
|
984
|
-
var t =
|
|
987
|
+
var t = M();
|
|
985
988
|
return t.useRef(e);
|
|
986
989
|
}
|
|
987
990
|
function rr(e, t) {
|
|
988
|
-
var n =
|
|
991
|
+
var n = M();
|
|
989
992
|
return n.useEffect(e, t);
|
|
990
993
|
}
|
|
991
994
|
function nr(e, t) {
|
|
992
|
-
var n =
|
|
995
|
+
var n = M();
|
|
993
996
|
return n.useInsertionEffect(e, t);
|
|
994
997
|
}
|
|
995
998
|
function ar(e, t) {
|
|
996
|
-
var n =
|
|
999
|
+
var n = M();
|
|
997
1000
|
return n.useLayoutEffect(e, t);
|
|
998
1001
|
}
|
|
999
1002
|
function or(e, t) {
|
|
1000
|
-
var n =
|
|
1003
|
+
var n = M();
|
|
1001
1004
|
return n.useCallback(e, t);
|
|
1002
1005
|
}
|
|
1003
1006
|
function ur(e, t) {
|
|
1004
|
-
var n =
|
|
1007
|
+
var n = M();
|
|
1005
1008
|
return n.useMemo(e, t);
|
|
1006
1009
|
}
|
|
1007
1010
|
function ir(e, t, n) {
|
|
1008
|
-
var a =
|
|
1011
|
+
var a = M();
|
|
1009
1012
|
return a.useImperativeHandle(e, t, n);
|
|
1010
1013
|
}
|
|
1011
1014
|
function sr(e, t) {
|
|
1012
1015
|
{
|
|
1013
|
-
var n =
|
|
1016
|
+
var n = M();
|
|
1014
1017
|
return n.useDebugValue(e, t);
|
|
1015
1018
|
}
|
|
1016
1019
|
}
|
|
1017
1020
|
function cr() {
|
|
1018
|
-
var e =
|
|
1021
|
+
var e = M();
|
|
1019
1022
|
return e.useTransition();
|
|
1020
1023
|
}
|
|
1021
1024
|
function fr(e) {
|
|
1022
|
-
var t =
|
|
1025
|
+
var t = M();
|
|
1023
1026
|
return t.useDeferredValue(e);
|
|
1024
1027
|
}
|
|
1025
1028
|
function lr() {
|
|
1026
|
-
var e =
|
|
1029
|
+
var e = M();
|
|
1027
1030
|
return e.useId();
|
|
1028
1031
|
}
|
|
1029
1032
|
function dr(e, t, n) {
|
|
1030
|
-
var a =
|
|
1033
|
+
var a = M();
|
|
1031
1034
|
return a.useSyncExternalStore(e, t, n);
|
|
1032
1035
|
}
|
|
1033
1036
|
var le = 0, tt, rt, nt, at, ot, ut, it;
|
|
@@ -1383,7 +1386,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1383
1386
|
}), t;
|
|
1384
1387
|
}
|
|
1385
1388
|
function Cr(e, t, n) {
|
|
1386
|
-
for (var a =
|
|
1389
|
+
for (var a = xt.apply(this, arguments), o = 2; o < arguments.length; o++)
|
|
1387
1390
|
yt(arguments[o], a.type);
|
|
1388
1391
|
return ht(a), a;
|
|
1389
1392
|
}
|
|
@@ -1425,7 +1428,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1425
1428
|
try {
|
|
1426
1429
|
if (j.isBatchingLegacy = !0, a = e(), !n && j.didScheduleLegacyUpdate) {
|
|
1427
1430
|
var o = j.current;
|
|
1428
|
-
o !== null && (j.didScheduleLegacyUpdate = !1,
|
|
1431
|
+
o !== null && (j.didScheduleLegacyUpdate = !1, Me(o));
|
|
1429
1432
|
}
|
|
1430
1433
|
} catch (C) {
|
|
1431
1434
|
throw Se(t), C;
|
|
@@ -1450,7 +1453,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1450
1453
|
var y = a;
|
|
1451
1454
|
if (Se(t), ue === 0) {
|
|
1452
1455
|
var m = j.current;
|
|
1453
|
-
m !== null && (
|
|
1456
|
+
m !== null && (Me(m), j.current = null);
|
|
1454
1457
|
var R = {
|
|
1455
1458
|
then: function(C, O) {
|
|
1456
1459
|
j.current === null ? (j.current = [], Le(y, C, O)) : C(y);
|
|
@@ -1476,7 +1479,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1476
1479
|
var a = j.current;
|
|
1477
1480
|
if (a !== null)
|
|
1478
1481
|
try {
|
|
1479
|
-
|
|
1482
|
+
Me(a), Or(function() {
|
|
1480
1483
|
a.length === 0 ? (j.current = null, t(e)) : Le(e, t, n);
|
|
1481
1484
|
});
|
|
1482
1485
|
} catch (o) {
|
|
@@ -1486,10 +1489,10 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1486
1489
|
t(e);
|
|
1487
1490
|
}
|
|
1488
1491
|
}
|
|
1489
|
-
var
|
|
1490
|
-
function
|
|
1491
|
-
if (!
|
|
1492
|
-
|
|
1492
|
+
var xe = !1;
|
|
1493
|
+
function Me(e) {
|
|
1494
|
+
if (!xe) {
|
|
1495
|
+
xe = !0;
|
|
1493
1496
|
var t = 0;
|
|
1494
1497
|
try {
|
|
1495
1498
|
for (; t < e.length; t++) {
|
|
@@ -1502,7 +1505,7 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1502
1505
|
} catch (a) {
|
|
1503
1506
|
throw e = e.slice(t + 1), a;
|
|
1504
1507
|
} finally {
|
|
1505
|
-
|
|
1508
|
+
xe = !1;
|
|
1506
1509
|
}
|
|
1507
1510
|
}
|
|
1508
1511
|
}
|
|
@@ -1513,11 +1516,11 @@ Check the top-level render call using <` + n + ">.");
|
|
|
1513
1516
|
toArray: zt,
|
|
1514
1517
|
only: Bt
|
|
1515
1518
|
};
|
|
1516
|
-
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());
|
|
1517
1520
|
}();
|
|
1518
1521
|
}(de, de.exports)), de.exports;
|
|
1519
1522
|
}
|
|
1520
|
-
process.env.NODE_ENV === "production" ? Ve.exports =
|
|
1523
|
+
process.env.NODE_ENV === "production" ? Ve.exports = xr() : Ve.exports = Mr();
|
|
1521
1524
|
var Tt = Ve.exports;
|
|
1522
1525
|
const Ur = /* @__PURE__ */ Lr(Tt), Vr = /* @__PURE__ */ Fr({
|
|
1523
1526
|
__proto__: null,
|
|
@@ -1577,7 +1580,7 @@ function zr(g = window.React, c, U, T, A) {
|
|
|
1577
1580
|
const J = k.forwardRef((D, P) => F(H, { ...D, _$Gl: P }, D == null ? void 0 : D.children));
|
|
1578
1581
|
return J.displayName = H.displayName, J;
|
|
1579
1582
|
}
|
|
1580
|
-
const
|
|
1583
|
+
const Kr = zr({
|
|
1581
1584
|
displayName: "PieDivider",
|
|
1582
1585
|
elementClass: Nr,
|
|
1583
1586
|
react: Vr,
|
|
@@ -1585,5 +1588,7 @@ const qr = zr({
|
|
|
1585
1588
|
events: {}
|
|
1586
1589
|
});
|
|
1587
1590
|
export {
|
|
1588
|
-
|
|
1591
|
+
Kr as PieDivider,
|
|
1592
|
+
Xr as orientations,
|
|
1593
|
+
Zr as variants
|
|
1589
1594
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-divider",
|
|
3
3
|
"description": "PIE Design System Divider built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.3.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-divider && run -T vite build",
|
|
11
16
|
"lint:scripts": "run -T eslint .",
|
package/src/defs.ts
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export const variants = ['default', 'inverse'] as const;
|
|
2
|
+
export const orientations = ['horizontal', 'vertical'] as const;
|
|
3
|
+
|
|
4
|
+
export interface DividerProps {
|
|
5
|
+
/**
|
|
6
|
+
* What style variant the divider should be such as default or vertical.
|
|
7
|
+
*/
|
|
8
|
+
variant: typeof variants[number];
|
|
9
|
+
/**
|
|
10
|
+
* What orientation the divider should be such as horizontal or inverse.
|
|
11
|
+
*/
|
|
12
|
+
orientation: typeof orientations[number];
|
|
13
|
+
}
|
package/src/divider.scss
CHANGED
|
@@ -1 +1,30 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
|
+
|
|
3
|
+
.c-divider {
|
|
4
|
+
--divider-bg-color: var(--dt-color-divider-default);
|
|
5
|
+
--divider-width: 100%;
|
|
6
|
+
--divider-height: 1px;
|
|
7
|
+
|
|
8
|
+
margin: 0;
|
|
9
|
+
border: 0;
|
|
10
|
+
width: var(--divider-width);
|
|
11
|
+
height: var(--divider-height);
|
|
12
|
+
background-color: var(--divider-bg-color);
|
|
13
|
+
|
|
14
|
+
&[variant='default'] {
|
|
15
|
+
/* Same as default styles */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&[variant='inverse'] {
|
|
19
|
+
--divider-bg-color: var(--dt-color-divider-inverse);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&[orientation='horizontal'] {
|
|
23
|
+
/* Same as default styles */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&[orientation='vertical'] {
|
|
27
|
+
--divider-width: 1px;
|
|
28
|
+
--divider-height: 100%;
|
|
29
|
+
}
|
|
30
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
2
|
-
|
|
2
|
+
import { property } from 'lit/decorators.js';
|
|
3
|
+
import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
3
4
|
import styles from './divider.scss?inline';
|
|
4
|
-
import { DividerProps } from './defs';
|
|
5
|
+
import { DividerProps, variants, orientations } from './defs';
|
|
5
6
|
|
|
6
7
|
// Valid values available to consumers
|
|
7
|
-
export
|
|
8
|
-
type DividerProps,
|
|
9
|
-
};
|
|
8
|
+
export * from './defs';
|
|
10
9
|
|
|
11
10
|
const componentSelector = 'pie-divider';
|
|
12
11
|
|
|
13
12
|
export class PieDivider extends LitElement implements DividerProps {
|
|
13
|
+
@property({ type: String })
|
|
14
|
+
@validPropertyValues(componentSelector, variants, 'default')
|
|
15
|
+
public variant: DividerProps['variant'] = 'default';
|
|
16
|
+
|
|
17
|
+
@property({ type: String })
|
|
18
|
+
@validPropertyValues(componentSelector, orientations, 'horizontal')
|
|
19
|
+
public orientation : DividerProps['orientation'] = 'horizontal';
|
|
20
|
+
|
|
14
21
|
render () {
|
|
15
|
-
|
|
22
|
+
const { variant, orientation } = this;
|
|
23
|
+
|
|
24
|
+
return html`
|
|
25
|
+
<hr
|
|
26
|
+
data-test-id="pie-divider"
|
|
27
|
+
aria-hidden="true"
|
|
28
|
+
class="c-divider"
|
|
29
|
+
variant=${variant}
|
|
30
|
+
orientation=${orientation}
|
|
31
|
+
/>`;
|
|
16
32
|
}
|
|
17
33
|
|
|
18
34
|
// Renders a `CSSResult` generated from SCSS by Vite
|
package/.eslintignore
DELETED
package/.turbo/turbo-build.log
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
[9:04:00 AM] @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 12 modules transformed.
|
|
6
|
-
rendering chunks...
|
|
7
|
-
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m 0.28 kB[22m[1m[22m[2m │ gzip: 0.22 kB[22m
|
|
9
|
-
[2mdist/[22m[36mreact.js [39m[1m[2m58.95 kB[22m[1m[22m[2m │ gzip: 15.89 kB[22m
|
|
10
|
-
[32m
|
|
11
|
-
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in 11.55s[39m
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in 10706ms.
|
|
14
|
-
[39m
|
package/CHANGELOG.md
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
# @justeattakeaway/pie-divider
|
|
2
|
-
|
|
3
|
-
## 0.1.0
|
|
4
|
-
|
|
5
|
-
### Minor Changes
|
|
6
|
-
|
|
7
|
-
- [Added] - Create a skeleton divider web component using our component generator ([#693](https://github.com/justeattakeaway/pie/pull/693)) by [@raoufswe](https://github.com/raoufswe)
|
|
8
|
-
|
|
9
|
-
- [Added] - init pie link ([#707](https://github.com/justeattakeaway/pie/pull/707)) by [@raoufswe](https://github.com/raoufswe)
|
package/dist/types/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/index'
|
package/dist/types/react.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/react'
|
package/dist/types/src/defs.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;CAAG"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import { DividerProps } from './defs';
|
|
3
|
-
export { type DividerProps, };
|
|
4
|
-
declare const componentSelector = "pie-divider";
|
|
5
|
-
export declare class PieDivider extends LitElement implements DividerProps {
|
|
6
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
7
|
-
static styles: import("lit").CSSResult;
|
|
8
|
-
}
|
|
9
|
-
declare global {
|
|
10
|
-
interface HTMLElementTagNameMap {
|
|
11
|
-
[componentSelector]: PieDivider;
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
//# 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;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EACH,KAAK,YAAY,GACpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,gBAAgB,CAAC;AAExC,qBAAa,UAAW,SAAQ,UAAW,YAAW,YAAY;IAC9D,MAAM;IAKN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;KACnC;CACJ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,UAAU,kEAMrB,CAAC"}
|
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 { PieDivider, DividerProps } from '@/index';
|
|
4
|
-
|
|
5
|
-
test.describe('PieDivider - Accessibility tests', () => {
|
|
6
|
-
test('a11y - should test the PieDivider component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
|
|
7
|
-
await mount(
|
|
8
|
-
PieDivider,
|
|
9
|
-
{
|
|
10
|
-
props: {} as DividerProps,
|
|
11
|
-
},
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
const results = await makeAxeBuilder().analyze();
|
|
15
|
-
|
|
16
|
-
expect(results.violations).toEqual([]);
|
|
17
|
-
});
|
|
18
|
-
});
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
3
|
-
import { PieDivider, DividerProps } from '@/index';
|
|
4
|
-
|
|
5
|
-
const componentSelector = '[data-test-id="pie-divider"]';
|
|
6
|
-
|
|
7
|
-
test.describe('PieDivider - Component tests', () => {
|
|
8
|
-
test('should render successfully', async ({ mount, page }) => {
|
|
9
|
-
// Arrange
|
|
10
|
-
await mount(PieDivider, {
|
|
11
|
-
props: {} as DividerProps,
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
// Act
|
|
15
|
-
const divider = page.locator(componentSelector);
|
|
16
|
-
|
|
17
|
-
// Assert
|
|
18
|
-
expect(divider).toBeVisible();
|
|
19
|
-
});
|
|
20
|
-
});
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { test } from '@sand4rt/experimental-ct-web';
|
|
3
|
-
import percySnapshot from '@percy/playwright';
|
|
4
|
-
import { PieDivider, DividerProps } from '@/index';
|
|
5
|
-
|
|
6
|
-
test.describe('PieDivider - Visual tests`', () => {
|
|
7
|
-
test('should display the PieDivider component successfully', async ({ page, mount }) => {
|
|
8
|
-
await mount(PieDivider, {
|
|
9
|
-
props: {} as DividerProps,
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
await percySnapshot(page, 'PieDivider - Visual Test');
|
|
13
|
-
});
|
|
14
|
-
});
|
package/tsconfig.json
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "@justeattakeaway/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