@justeattakeaway/pie-divider 1.2.0 → 1.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.
Files changed (6) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +56 -43
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +12 -8
  6. package/src/index.ts +3 -2
package/custom-elements.json CHANGED
@@ -107,8 +107,8 @@
107
107
  }
108
108
  ],
109
109
  "superclass": {
110
- "name": "LitElement",
111
- "package": "lit"
110
+ "name": "PieElement",
111
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
112
112
  },
113
113
  "tagName": "pie-divider",
114
114
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import type { TemplateResult } from 'lit-html';
5
5
 
6
6
  export declare type DefaultProps = ComponentDefaultProps<DividerProps>;
@@ -27,7 +27,7 @@ export declare const orientations: readonly ["horizontal", "vertical"];
27
27
  /**
28
28
  * @tagname pie-divider
29
29
  */
30
- export declare class PieDivider extends LitElement implements DividerProps {
30
+ export declare class PieDivider extends PieElement implements DividerProps {
31
31
  variant: "default" | "inverse";
32
32
  orientation: "horizontal" | "vertical";
33
33
  label: string;
package/dist/index.js CHANGED
@@ -1,63 +1,76 @@
1
- import { LitElement as f, html as o, unsafeCSS as m } from "lit";
2
- import { property as v } from "lit/decorators.js";
1
+ import { LitElement as u, html as c, unsafeCSS as m } from "lit";
2
+ import { property as s } from "lit/decorators.js";
3
3
  import { classMap as b } from "lit/directives/class-map.js";
4
- import { validPropertyValues as g, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
5
- const w = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", x = ["default", "inverse"], y = ["horizontal", "vertical"], a = {
4
+ import { validPropertyValues as f, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
5
+ var w = Object.defineProperty, x = (a, t, d, v) => {
6
+ for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
7
+ (l = a[i]) && (e = l(t, d, e) || e);
8
+ return e && w(t, d, e), e;
9
+ };
10
+ class g extends u {
11
+ constructor() {
12
+ super(...arguments), this.v = "1.3.0";
13
+ }
14
+ }
15
+ x([
16
+ s({ type: String, reflect: !0 })
17
+ ], g.prototype, "v");
18
+ const $ = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", z = ["default", "inverse"], S = ["horizontal", "vertical"], o = {
6
19
  variant: "default",
7
20
  orientation: "horizontal",
8
21
  label: ""
9
22
  };
10
- var $ = Object.defineProperty, c = (h, l, t, n) => {
11
- for (var i = void 0, r = h.length - 1, p; r >= 0; r--)
12
- (p = h[r]) && (i = p(l, t, i) || i);
13
- return i && $(l, t, i), i;
23
+ var _ = Object.defineProperty, h = (a, t, d, v) => {
24
+ for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
25
+ (l = a[i]) && (e = l(t, d, e) || e);
26
+ return e && _(t, d, e), e;
14
27
  };
15
- const e = "pie-divider", s = class s extends f {
28
+ const r = "pie-divider", p = class p extends g {
16
29
  constructor() {
17
- super(...arguments), this.variant = a.variant, this.orientation = a.orientation, this.label = a.label;
30
+ super(...arguments), this.variant = o.variant, this.orientation = o.orientation, this.label = o.label;
18
31
  }
19
32
  render() {
20
- const { variant: l, orientation: t, label: n } = this, i = n.length > 0 && t === "horizontal", r = {
33
+ const { variant: t, orientation: d, label: v } = this, e = v.length > 0 && d === "horizontal", i = {
21
34
  "c-divider": !0,
22
- "c-divider--inverse": l === "inverse",
23
- "c-divider--vertical": t === "vertical",
24
- "c-divider--labelled": i
35
+ "c-divider--inverse": t === "inverse",
36
+ "c-divider--vertical": d === "vertical",
37
+ "c-divider--labelled": e
25
38
  };
26
- return o`
27
- ${i ? o`
39
+ return c`
40
+ ${e ? c`
28
41
  <div
29
- id="${e}"
30
- data-test-id="${e}"
31
- class="${b(r)}"
32
- aria-labelledby="${e}-label">
42
+ id="${r}"
43
+ data-test-id="${r}"
44
+ class="${b(i)}"
45
+ aria-labelledby="${r}-label">
33
46
  <hr aria-hidden="true"/>
34
- <span id="${e}-label" class="c-divider-label">${n}</span>
47
+ <span id="${r}-label" class="c-divider-label">${v}</span>
35
48
  <hr aria-hidden="true"/>
36
- </div>` : o`
37
- <hr id="${e}"
38
- data-test-id="${e}"
39
- class="${b(r)}"
49
+ </div>` : c`
50
+ <hr id="${r}"
51
+ data-test-id="${r}"
52
+ class="${b(i)}"
40
53
  aria-hidden="true"
41
54
  />`}`;
42
55
  }
43
56
  };
44
- s.styles = m(w);
45
- let d = s;
46
- c([
47
- v({ type: String }),
48
- g(e, x, a.variant)
49
- ], d.prototype, "variant");
50
- c([
51
- v({ type: String }),
52
- g(e, y, a.orientation)
53
- ], d.prototype, "orientation");
54
- c([
55
- v({ type: String })
56
- ], d.prototype, "label");
57
- u(e, d);
57
+ p.styles = m($);
58
+ let n = p;
59
+ h([
60
+ s({ type: String }),
61
+ f(r, z, o.variant)
62
+ ], n.prototype, "variant");
63
+ h([
64
+ s({ type: String }),
65
+ f(r, S, o.orientation)
66
+ ], n.prototype, "orientation");
67
+ h([
68
+ s({ type: String })
69
+ ], n.prototype, "label");
70
+ y(r, n);
58
71
  export {
59
- d as PieDivider,
60
- a as defaultProps,
61
- y as orientations,
62
- x as variants
72
+ n as PieDivider,
73
+ o as defaultProps,
74
+ S as orientations,
75
+ z as variants
63
76
  };
package/dist/react.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import * as React_2 from 'react';
5
5
  import type { TemplateResult } from 'lit-html';
6
6
 
@@ -30,7 +30,7 @@ export declare const PieDivider: React_2.ForwardRefExoticComponent<DividerProps
30
30
  /**
31
31
  * @tagname pie-divider
32
32
  */
33
- declare class PieDivider_2 extends LitElement implements DividerProps {
33
+ declare class PieDivider_2 extends PieElement implements DividerProps {
34
34
  variant: "default" | "inverse";
35
35
  orientation: "horizontal" | "vertical";
36
36
  label: string;
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-divider",
3
3
  "description": "PIE Design System Divider built using Web Components",
4
- "version": "1.2.0",
4
+ "version": "1.3.0",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-divider"
9
+ },
10
+ "homepage": "https://pie.design/components/divider/code/",
5
11
  "type": "module",
6
12
  "main": "dist/index.js",
7
13
  "module": "dist/index.js",
@@ -24,9 +30,6 @@
24
30
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
25
31
  "lint:style:fix": "yarn lint:style --fix",
26
32
  "watch": "run -T vite build --watch",
27
- "test": "echo \"Error: no test specified\" && exit 0",
28
- "test:ci": "yarn test",
29
- "test:browsers-setup": "npx playwright-lit-setup",
30
33
  "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
31
34
  "test:browsers:ci": "yarn test:browsers",
32
35
  "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_DIVIDER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
@@ -36,13 +39,14 @@
36
39
  "license": "Apache-2.0",
37
40
  "devDependencies": {
38
41
  "@custom-elements-manifest/analyzer": "0.9.0",
39
- "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.14.1",
41
- "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
+ "@justeattakeaway/pie-components-config": "0.19.0",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
45
+ "@justeattakeaway/pie-wrapper-react": "0.14.3",
42
46
  "cem-plugin-module-file-extensions": "0.0.5"
43
47
  },
44
48
  "dependencies": {
45
- "@justeattakeaway/pie-webc-core": "0.24.2"
49
+ "@justeattakeaway/pie-webc-core": "0.25.0"
46
50
  },
47
51
  "volta": {
48
52
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
- html, LitElement, unsafeCSS,
2
+ html, unsafeCSS,
3
3
  } from 'lit';
4
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
5
  import { property } from 'lit/decorators.js';
5
6
  import { classMap } from 'lit/directives/class-map.js';
6
7
  import { defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
@@ -17,7 +18,7 @@ const componentSelector = 'pie-divider';
17
18
  /**
18
19
  * @tagname pie-divider
19
20
  */
20
- export class PieDivider extends LitElement implements DividerProps {
21
+ export class PieDivider extends PieElement implements DividerProps {
21
22
  @property({ type: String })
22
23
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
23
24
  public variant = defaultProps.variant;