@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 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></pie-divider>
69
+ <pie-divider />
69
70
 
70
71
  <!-- JSX -->
71
- <PieDivider></PieDivider>
72
+ <PieDivider />
72
73
  ```
73
74
 
74
75
  ## Testing
@@ -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 t, LitElement as i, html as s } from "lit";
2
- const r = "", d = "pie-divider";
3
- class e extends i {
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
- return s`<h1 data-test-id="pie-divider">Hello world!</h1>`;
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
- e.styles = t(r);
9
- customElements.define(d, e);
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
- e as PieDivider
54
+ a as PieDivider,
55
+ P as orientations,
56
+ b as variants
12
57
  };
@@ -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 Mr() {
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), M = 0; M < b; M++)
76
- E[M] = arguments[M + 2];
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(M) {
121
- return M;
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 M = 0; M < E; M++)
191
- b[M] = arguments[M + 2];
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 xr() {
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 M(e, t, n) {
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 = M.prototype = new E();
435
- ke.constructor = M, d(ke, v.prototype), ke.isPureReactComponent = !0;
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 Mt(e, t, n) {
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 = ".", xt = ":";
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 + xt;
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 x() {
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 = x();
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 = x();
979
+ var t = M();
977
980
  return t.useState(e);
978
981
  }
979
982
  function er(e, t, n) {
980
- var a = x();
983
+ var a = M();
981
984
  return a.useReducer(e, t, n);
982
985
  }
983
986
  function tr(e) {
984
- var t = x();
987
+ var t = M();
985
988
  return t.useRef(e);
986
989
  }
987
990
  function rr(e, t) {
988
- var n = x();
991
+ var n = M();
989
992
  return n.useEffect(e, t);
990
993
  }
991
994
  function nr(e, t) {
992
- var n = x();
995
+ var n = M();
993
996
  return n.useInsertionEffect(e, t);
994
997
  }
995
998
  function ar(e, t) {
996
- var n = x();
999
+ var n = M();
997
1000
  return n.useLayoutEffect(e, t);
998
1001
  }
999
1002
  function or(e, t) {
1000
- var n = x();
1003
+ var n = M();
1001
1004
  return n.useCallback(e, t);
1002
1005
  }
1003
1006
  function ur(e, t) {
1004
- var n = x();
1007
+ var n = M();
1005
1008
  return n.useMemo(e, t);
1006
1009
  }
1007
1010
  function ir(e, t, n) {
1008
- var a = x();
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 = x();
1016
+ var n = M();
1014
1017
  return n.useDebugValue(e, t);
1015
1018
  }
1016
1019
  }
1017
1020
  function cr() {
1018
- var e = x();
1021
+ var e = M();
1019
1022
  return e.useTransition();
1020
1023
  }
1021
1024
  function fr(e) {
1022
- var t = x();
1025
+ var t = M();
1023
1026
  return t.useDeferredValue(e);
1024
1027
  }
1025
1028
  function lr() {
1026
- var e = x();
1029
+ var e = M();
1027
1030
  return e.useId();
1028
1031
  }
1029
1032
  function dr(e, t, n) {
1030
- var a = x();
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 = Mt.apply(this, arguments), o = 2; o < arguments.length; o++)
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, xe(o));
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 && (xe(m), j.current = 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
- xe(a), Or(function() {
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 Me = !1;
1490
- function xe(e) {
1491
- if (!Me) {
1492
- Me = !0;
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
- Me = !1;
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 = M, 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
+ 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 = Mr() : Ve.exports = xr();
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 qr = zr({
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
- qr as PieDivider
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.1.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/types/index.d.ts",
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
- // TODO - please remove the eslint disable comment below when you add props to this interface
2
- // eslint-disable-next-line @typescript-eslint/no-empty-interface
3
- export interface DividerProps {}
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
- return html`<h1 data-test-id="pie-divider">Hello world!</h1>`;
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
@@ -1,6 +0,0 @@
1
- .turbo
2
- dist
3
- node_modules
4
- lit-browsers-report
5
- lit-visual-report
6
- test-results
@@ -1,14 +0,0 @@
1
- [9:04:00 AM] @custom-elements-manifest/analyzer: Created new manifest.
2
- react wrapper has been added!
3
- vite v4.3.9 building for production...
4
- transforming...
5
- ✓ 12 modules transformed.
6
- rendering chunks...
7
- computing gzip size...
8
- dist/index.js  0.28 kB │ gzip: 0.22 kB
9
- dist/react.js 58.95 kB │ gzip: 15.89 kB
10
- 
11
- [vite:dts] Start generate declaration files...
12
- ✓ built in 11.55s
13
- [vite:dts] Declaration files built in 10706ms.
14
- 
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)
@@ -1 +0,0 @@
1
- export * from './src/index'
@@ -1 +0,0 @@
1
- export * from './src/react'
@@ -1,3 +0,0 @@
1
- export interface DividerProps {
2
- }
3
- //# sourceMappingURL=defs.d.ts.map
@@ -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,3 +0,0 @@
1
- import { PieDivider as PieDividerReact } from './index';
2
- export declare const PieDivider: import("@lit-labs/react").ReactWebComponent<PieDividerReact, {}>;
3
- //# sourceMappingURL=react.d.ts.map
@@ -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"}
@@ -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>
@@ -1 +0,0 @@
1
- // Import common styles here
@@ -1,4 +0,0 @@
1
- import { defineConfig } from '@sand4rt/experimental-ct-web';
2
- import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
3
-
4
- export default defineConfig(getPlaywrightVisualConfig());
@@ -1,4 +0,0 @@
1
- import { defineConfig } from '@sand4rt/experimental-ct-web';
2
- import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
3
-
4
- export default defineConfig(getPlaywrightConfig());
@@ -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
@@ -1,3 +0,0 @@
1
- import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
2
-
3
- export default viteConfig;