@justeattakeaway/pie-spinner 1.0.0 → 1.1.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 +48 -35
  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
@@ -118,8 +118,8 @@
118
118
  }
119
119
  ],
120
120
  "superclass": {
121
- "name": "LitElement",
122
- "package": "lit"
121
+ "name": "PieElement",
122
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
123
123
  },
124
124
  "tagName": "pie-spinner",
125
125
  "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
  declare type AriaProps = {
@@ -14,7 +14,7 @@ export declare const defaultProps: DefaultProps;
14
14
  /**
15
15
  * @tagname pie-spinner
16
16
  */
17
- export declare class PieSpinner extends LitElement implements SpinnerProps {
17
+ export declare class PieSpinner extends PieElement implements SpinnerProps {
18
18
  aria: SpinnerProps['aria'];
19
19
  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
20
20
  variant: "brand" | "secondary" | "inverse";
package/dist/index.js CHANGED
@@ -1,60 +1,73 @@
1
- import { LitElement as m, html as b, nothing as f, unsafeCSS as u } from "lit";
2
- import { property as t } from "lit/decorators.js";
3
- import { classMap as y } from "lit/directives/class-map.js";
1
+ import { LitElement as u, html as b, nothing as m, unsafeCSS as y } from "lit";
2
+ import { property as l } from "lit/decorators.js";
3
+ import { classMap as g } from "lit/directives/class-map.js";
4
4
  import { validPropertyValues as h, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
5
- const g = "*,*:after,*:before{box-sizing:inherit}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", x = ["xsmall", "small", "medium", "large", "xlarge"], w = ["brand", "secondary", "inverse"], i = {
5
+ var x = Object.defineProperty, _ = (i, e, n, c) => {
6
+ for (var r = void 0, s = i.length - 1, o; s >= 0; s--)
7
+ (o = i[s]) && (r = o(e, n, r) || r);
8
+ return r && x(e, n, r), r;
9
+ };
10
+ class f extends u {
11
+ constructor() {
12
+ super(...arguments), this.v = "1.1.0";
13
+ }
14
+ }
15
+ _([
16
+ l({ type: String, reflect: !0 })
17
+ ], f.prototype, "v");
18
+ const $ = "*,*:after,*:before{box-sizing:inherit}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], P = ["brand", "secondary", "inverse"], a = {
6
19
  size: "medium",
7
20
  variant: "brand"
8
21
  };
9
- var $ = Object.defineProperty, a = (p, r, s, d) => {
10
- for (var e = void 0, o = p.length - 1, v; o >= 0; o--)
11
- (v = p[o]) && (e = v(r, s, e) || e);
12
- return e && $(r, s, e), e;
22
+ var C = Object.defineProperty, p = (i, e, n, c) => {
23
+ for (var r = void 0, s = i.length - 1, o; s >= 0; s--)
24
+ (o = i[s]) && (r = o(e, n, r) || r);
25
+ return r && C(e, n, r), r;
13
26
  };
14
- const l = "pie-spinner", c = class c extends m {
27
+ const d = "pie-spinner", v = class v extends f {
15
28
  constructor() {
16
- super(...arguments), this.size = i.size, this.variant = i.variant;
29
+ super(...arguments), this.size = a.size, this.variant = a.variant;
17
30
  }
18
31
  render() {
19
- const { variant: r, size: s } = this, d = {
32
+ const { variant: e, size: n } = this, c = {
20
33
  "c-spinner": !0,
21
- [`c-spinner--${s}`]: !0,
22
- [`c-spinner--${r}`]: !0
34
+ [`c-spinner--${n}`]: !0,
35
+ [`c-spinner--${e}`]: !0
23
36
  };
24
37
  return b`
25
38
  <div
26
39
  data-test-id="pie-spinner"
27
- class="${y(d)}"
40
+ class="${g(c)}"
28
41
  role="status"
29
42
  aria-live="polite">
30
43
  ${this.renderAriaLabel()}
31
44
  </div>`;
32
45
  }
33
46
  renderAriaLabel() {
34
- var r;
35
- return (r = this.aria) != null && r.label ? b`
47
+ var e;
48
+ return (e = this.aria) != null && e.label ? b`
36
49
  <span class="c-spinner-label">
37
50
  ${this.aria.label}
38
- </span>` : f;
51
+ </span>` : m;
39
52
  }
40
53
  };
41
- c.styles = u(g);
42
- let n = c;
43
- a([
44
- t({ type: Object })
45
- ], n.prototype, "aria");
46
- a([
47
- t({ type: String }),
48
- h(l, x, i.size)
49
- ], n.prototype, "size");
50
- a([
51
- t({ type: String }),
52
- h(l, w, i.variant)
53
- ], n.prototype, "variant");
54
- z(l, n);
54
+ v.styles = y($);
55
+ let t = v;
56
+ p([
57
+ l({ type: Object })
58
+ ], t.prototype, "aria");
59
+ p([
60
+ l({ type: String }),
61
+ h(d, w, a.size)
62
+ ], t.prototype, "size");
63
+ p([
64
+ l({ type: String }),
65
+ h(d, P, a.variant)
66
+ ], t.prototype, "variant");
67
+ z(d, t);
55
68
  export {
56
- n as PieSpinner,
57
- i as defaultProps,
58
- x as sizes,
59
- w as variants
69
+ t as PieSpinner,
70
+ a as defaultProps,
71
+ w as sizes,
72
+ P as variants
60
73
  };
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
 
@@ -17,7 +17,7 @@ export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps
17
17
  /**
18
18
  * @tagname pie-spinner
19
19
  */
20
- declare class PieSpinner_2 extends LitElement implements SpinnerProps {
20
+ declare class PieSpinner_2 extends PieElement implements SpinnerProps {
21
21
  aria: SpinnerProps['aria'];
22
22
  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
23
23
  variant: "brand" | "secondary" | "inverse";
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-spinner",
3
3
  "description": "PIE Design System Spinner built using Web Components",
4
- "version": "1.0.0",
4
+ "version": "1.1.0",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-spinner"
9
+ },
10
+ "homepage": "https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-spinner",
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_SPINNER} 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.13.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
- LitElement, html, nothing, unsafeCSS,
2
+ html, nothing, 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 { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -20,7 +21,7 @@ const componentSelector = 'pie-spinner';
20
21
  /**
21
22
  * @tagname pie-spinner
22
23
  */
23
- export class PieSpinner extends LitElement implements SpinnerProps {
24
+ export class PieSpinner extends PieElement implements SpinnerProps {
24
25
  @property({ type: Object })
25
26
  public aria: SpinnerProps['aria'];
26
27