@justeattakeaway/pie-spinner 0.6.4 → 0.6.6

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 (9) hide show
  1. package/README.md +3 -5
  2. package/custom-elements.json +16 -4
  3. package/dist/index.d.ts +5 -0
  4. package/dist/index.js +35 -31
  5. package/dist/react.d.ts +5 -0
  6. package/dist/react.js +8 -7
  7. package/package.json +3 -3
  8. package/src/defs.ts +9 -0
  9. package/src/index.ts +7 -6
package/README.md CHANGED
@@ -29,11 +29,9 @@ This component can be easily integrated into various frontend frameworks and cus
29
29
  To install `pie-spinner` in your application, run the following on your command line:
30
30
 
31
31
  ```bash
32
- # npm
33
- $ npm i @justeattakeaway/pie-spinner
32
+ npm i @justeattakeaway/pie-spinner
34
33
 
35
- # yarn
36
- $ yarn add @justeattakeaway/pie-spinner
34
+ yarn add @justeattakeaway/pie-spinner
37
35
  ```
38
36
 
39
37
  For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
@@ -90,4 +88,4 @@ In your markup or JSX, you can then use these to set the properties for the `pie
90
88
 
91
89
  ## Contributing
92
90
 
93
- Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
91
+ Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
package/custom-elements.json CHANGED
@@ -27,6 +27,14 @@
27
27
  "text": "['brand', 'secondary', 'inverse']"
28
28
  },
29
29
  "default": "['brand', 'secondary', 'inverse']"
30
+ },
31
+ {
32
+ "kind": "variable",
33
+ "name": "defaultProps",
34
+ "type": {
35
+ "text": "DefaultProps"
36
+ },
37
+ "default": "{\n size: 'medium',\n variant: 'brand',\n}"
30
38
  }
31
39
  ],
32
40
  "exports": [
@@ -45,6 +53,14 @@
45
53
  "name": "variants",
46
54
  "module": "src/defs.js"
47
55
  }
56
+ },
57
+ {
58
+ "kind": "js",
59
+ "name": "defaultProps",
60
+ "declaration": {
61
+ "name": "defaultProps",
62
+ "module": "src/defs.js"
63
+ }
48
64
  }
49
65
  ]
50
66
  },
@@ -73,7 +89,6 @@
73
89
  "text": "SpinnerProps['size'] | undefined"
74
90
  },
75
91
  "privacy": "public",
76
- "default": "'medium'",
77
92
  "attribute": "size"
78
93
  },
79
94
  {
@@ -83,7 +98,6 @@
83
98
  "text": "SpinnerProps['variant'] | undefined"
84
99
  },
85
100
  "privacy": "public",
86
- "default": "'brand'",
87
101
  "attribute": "variant"
88
102
  }
89
103
  ],
@@ -100,7 +114,6 @@
100
114
  "type": {
101
115
  "text": "SpinnerProps['size'] | undefined"
102
116
  },
103
- "default": "'medium'",
104
117
  "fieldName": "size"
105
118
  },
106
119
  {
@@ -108,7 +121,6 @@
108
121
  "type": {
109
122
  "text": "SpinnerProps['variant'] | undefined"
110
123
  },
111
- "default": "'brand'",
112
124
  "fieldName": "variant"
113
125
  }
114
126
  ],
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { LitElement } from 'lit';
3
4
  import type { TemplateResult } from 'lit-html';
@@ -6,6 +7,10 @@ export declare type AriaProps = {
6
7
  label?: string;
7
8
  };
8
9
 
10
+ export declare type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<SpinnerProps, 'aria'>>;
11
+
12
+ export declare const defaultProps: DefaultProps;
13
+
9
14
  /**
10
15
  * @tagname pie-spinner
11
16
  */
package/dist/index.js CHANGED
@@ -1,17 +1,20 @@
1
- import { unsafeCSS as b, LitElement as m, html as d, nothing as h } from "lit";
2
- import { property as l } from "lit/decorators.js";
3
- import { validPropertyValues as v, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
4
- const z = `*,*: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[variant=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[variant=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[size=xsmall]{--spinner-size: 16px}.c-spinner[size=small]{--spinner-size: 20px}.c-spinner[size=large]{--spinner-size: 32px}.c-spinner[size=xlarge]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
5
- `, u = ["xsmall", "small", "medium", "large", "xlarge"], y = ["brand", "secondary", "inverse"];
6
- var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (i, n, s, e) => {
7
- for (var r = e > 1 ? void 0 : e ? g(n, s) : n, a = i.length - 1, t; a >= 0; a--)
8
- (t = i[a]) && (r = (e ? t(n, s, r) : t(r)) || r);
9
- return e && r && x(n, s, r), r;
1
+ import { unsafeCSS as h, LitElement as m, html as d, nothing as z } from "lit";
2
+ import { property as p } from "lit/decorators.js";
3
+ import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
4
+ const u = `*,*: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[variant=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[variant=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[size=xsmall]{--spinner-size: 16px}.c-spinner[size=small]{--spinner-size: 20px}.c-spinner[size=large]{--spinner-size: 32px}.c-spinner[size=xlarge]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
5
+ `, y = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"], o = {
6
+ size: "medium",
7
+ variant: "brand"
10
8
  };
11
- const c = "pie-spinner";
12
- class o extends m {
9
+ var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, n, s, e) => {
10
+ for (var r = e > 1 ? void 0 : e ? w(n, s) : n, t = a.length - 1, l; t >= 0; t--)
11
+ (l = a[t]) && (r = (e ? l(n, s, r) : l(r)) || r);
12
+ return e && r && g(n, s, r), r;
13
+ };
14
+ const v = "pie-spinner";
15
+ class i extends m {
13
16
  constructor() {
14
- super(...arguments), this.size = "medium", this.variant = "brand";
17
+ super(...arguments), this.size = o.size, this.variant = o.variant;
15
18
  }
16
19
  render() {
17
20
  const { variant: n, size: s, aria: e } = this;
@@ -21,27 +24,28 @@ class o extends m {
21
24
  class="c-spinner"
22
25
  role="status"
23
26
  aria-live="polite"
24
- size="${s || "medium"}"
25
- variant="${n || "brand"}">
26
- ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : h}
27
+ size="${s}"
28
+ variant="${n}">
29
+ ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z}
27
30
  </div>`;
28
31
  }
29
32
  }
30
- o.styles = b(z);
31
- p([
32
- l({ type: Object })
33
- ], o.prototype, "aria", 2);
34
- p([
35
- l(),
36
- v(c, u, "medium")
37
- ], o.prototype, "size", 2);
38
- p([
39
- l(),
40
- v(c, y, "brand")
41
- ], o.prototype, "variant", 2);
42
- f(c, o);
33
+ i.styles = h(u);
34
+ c([
35
+ p({ type: Object })
36
+ ], i.prototype, "aria", 2);
37
+ c([
38
+ p(),
39
+ b(v, y, o.size)
40
+ ], i.prototype, "size", 2);
41
+ c([
42
+ p(),
43
+ b(v, x, o.variant)
44
+ ], i.prototype, "variant", 2);
45
+ f(v, i);
43
46
  export {
44
- o as PieSpinner,
45
- u as sizes,
46
- y as variants
47
+ i as PieSpinner,
48
+ o as defaultProps,
49
+ y as sizes,
50
+ x as variants
47
51
  };
package/dist/react.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
1
2
  import type { CSSResult } from 'lit';
2
3
  import type { LitElement } from 'lit';
3
4
  import * as React_2 from 'react';
@@ -7,6 +8,10 @@ export declare type AriaProps = {
7
8
  label?: string;
8
9
  };
9
10
 
11
+ export declare type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<SpinnerProps, 'aria'>>;
12
+
13
+ export declare const defaultProps: DefaultProps;
14
+
10
15
  export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
11
16
 
12
17
  /**
package/dist/react.js CHANGED
@@ -1,19 +1,20 @@
1
1
  import * as e from "react";
2
- import { createComponent as i } from "@lit/react";
3
- import { PieSpinner as r } from "./index.js";
4
- import { sizes as S, variants as f } from "./index.js";
2
+ import { createComponent as r } from "@lit/react";
3
+ import { PieSpinner as i } from "./index.js";
4
+ import { defaultProps as f, sizes as S, variants as l } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
7
  import "@justeattakeaway/pie-webc-core";
8
- const n = i({
8
+ const t = r({
9
9
  displayName: "PieSpinner",
10
- elementClass: r,
10
+ elementClass: i,
11
11
  react: e,
12
12
  tagName: "pie-spinner",
13
13
  events: {}
14
- }), s = n;
14
+ }), s = t;
15
15
  export {
16
16
  s as PieSpinner,
17
+ f as defaultProps,
17
18
  S as sizes,
18
- f as variants
19
+ l as variants
19
20
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-spinner",
3
3
  "description": "PIE Design System Spinner built using Web Components",
4
- "version": "0.6.4",
4
+ "version": "0.6.6",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,11 +37,11 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.16.0",
40
- "@justeattakeaway/pie-wrapper-react": "0.14.0",
40
+ "@justeattakeaway/pie-wrapper-react": "0.14.1",
41
41
  "cem-plugin-module-file-extensions": "0.0.5"
42
42
  },
43
43
  "dependencies": {
44
- "@justeattakeaway/pie-webc-core": "0.22.0"
44
+ "@justeattakeaway/pie-webc-core": "0.24.0"
45
45
  },
46
46
  "volta": {
47
47
  "extends": "../../../package.json"
package/src/defs.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
+
1
3
  export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
2
4
  export const variants = ['brand', 'secondary', 'inverse'] as const;
3
5
 
@@ -19,3 +21,10 @@ export interface SpinnerProps {
19
21
  */
20
22
  variant?: typeof variants[number];
21
23
  }
24
+
25
+ export type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<SpinnerProps, 'aria'>>;
26
+
27
+ export const defaultProps: DefaultProps = {
28
+ size: 'medium',
29
+ variant: 'brand',
30
+ };
package/src/index.ts CHANGED
@@ -9,6 +9,7 @@ import {
9
9
  sizes,
10
10
  variants,
11
11
  type AriaProps,
12
+ defaultProps,
12
13
  } from './defs';
13
14
 
14
15
  // Valid values available to consumers
@@ -24,12 +25,12 @@ export class PieSpinner extends LitElement implements SpinnerProps {
24
25
  public aria?: AriaProps;
25
26
 
26
27
  @property()
27
- @validPropertyValues(componentSelector, sizes, 'medium')
28
- public size?: SpinnerProps['size'] = 'medium';
28
+ @validPropertyValues(componentSelector, sizes, defaultProps.size)
29
+ public size?: SpinnerProps['size'] = defaultProps.size;
29
30
 
30
31
  @property()
31
- @validPropertyValues(componentSelector, variants, 'brand')
32
- public variant?: SpinnerProps['variant'] = 'brand';
32
+ @validPropertyValues(componentSelector, variants, defaultProps.variant)
33
+ public variant?: SpinnerProps['variant'] = defaultProps.variant;
33
34
 
34
35
  render () {
35
36
  const { variant, size, aria } = this;
@@ -40,8 +41,8 @@ export class PieSpinner extends LitElement implements SpinnerProps {
40
41
  class="c-spinner"
41
42
  role="status"
42
43
  aria-live="polite"
43
- size="${size || 'medium'}"
44
- variant="${variant || 'brand'}">
44
+ size="${size}"
45
+ variant="${variant}">
45
46
  ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing}
46
47
  </div>`;
47
48
  }