@justeattakeaway/pie-spinner 1.3.7 → 1.4.1

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 +1 -1
  2. package/custom-elements.json +2 -2
  3. package/dist/index.d.ts +2 -2
  4. package/dist/index.js +10 -10
  5. package/dist/react.d.ts +3 -3
  6. package/package.json +3 -3
  7. package/src/defs.ts +1 -1
  8. package/src/react.ts +1 -1
  9. package/src/spinner.scss +8 -0
package/README.md CHANGED
@@ -32,7 +32,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
32
32
  | Prop | Options | Description | Default |
33
33
  |----------|----------------------------------------------|--------------------------------------------------------------------------------------------------|-------------|
34
34
  | `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"` | Size of the spinner. | `medium` |
35
- | `variant`| `"brand"`, `"secondary"`, `"inverse"` | Variant of the spinner. | `brand` |
35
+ | `variant`| `"brand"`, `"secondary"`, `"secondary-dark"`, `"inverse"`, `"inverse-light"` | Variant of the spinner. | `brand` |
36
36
  | `aria` | — | An object representing the ARIA attributes such as `label`. | `undefined` |
37
37
 
38
38
  ### Slots
package/custom-elements.json CHANGED
@@ -24,9 +24,9 @@
24
24
  "kind": "variable",
25
25
  "name": "variants",
26
26
  "type": {
27
- "text": "['brand', 'secondary', 'inverse']"
27
+ "text": "['brand', 'secondary', 'secondary-dark', 'inverse', 'inverse-light']"
28
28
  },
29
- "default": "['brand', 'secondary', 'inverse']"
29
+ "default": "['brand', 'secondary', 'secondary-dark', 'inverse', 'inverse-light']"
30
30
  },
31
31
  {
32
32
  "kind": "variable",
package/dist/index.d.ts CHANGED
@@ -17,7 +17,7 @@ export declare const defaultProps: DefaultProps;
17
17
  export declare class PieSpinner extends PieElement implements SpinnerProps {
18
18
  aria: SpinnerProps['aria'];
19
19
  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
20
- variant: "brand" | "secondary" | "inverse";
20
+ variant: "brand" | "secondary" | "secondary-dark" | "inverse" | "inverse-light";
21
21
  render(): TemplateResult<1>;
22
22
  private renderAriaLabel;
23
23
  static styles: CSSResult;
@@ -40,6 +40,6 @@ export declare interface SpinnerProps {
40
40
  variant?: typeof variants[number];
41
41
  }
42
42
 
43
- export declare const variants: readonly ["brand", "secondary", "inverse"];
43
+ export declare const variants: readonly ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"];
44
44
 
45
45
  export { }
package/dist/index.js CHANGED
@@ -1,21 +1,21 @@
1
- import { LitElement as m, unsafeCSS as u, html as b, nothing as y } from "lit";
1
+ import { LitElement as m, unsafeCSS as u, html as b, nothing as g } from "lit";
2
2
  import { property as v } from "lit/decorators.js";
3
- import { classMap as z } from "lit/directives/class-map.js";
4
- import { validPropertyValues as h, safeCustomElement as g } from "@justeattakeaway/pie-webc-core";
3
+ import { classMap as y } from "lit/directives/class-map.js";
4
+ import { validPropertyValues as h, safeCustomElement as z } from "@justeattakeaway/pie-webc-core";
5
5
  const a = class a extends m {
6
6
  willUpdate() {
7
7
  this.getAttribute("v") || this.setAttribute("v", a.v);
8
8
  }
9
9
  };
10
- a.v = "1.3.7";
10
+ a.v = "1.4.1";
11
11
  let d = a;
12
- const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@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-solid-h);--spinner-base-color-s: var(--dt-color-content-brand-solid-s);--spinner-base-color-l: var(--dt-color-content-brand-solid-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-solid-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-solid-h);--spinner-base-color-s: var(--dt-color-content-inverse-solid-s);--spinner-base-color-l: var(--dt-color-content-inverse-solid-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"], S = ["brand", "secondary", "inverse"], t = {
12
+ const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@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-solid-h);--spinner-base-color-s: var(--dt-color-content-brand-solid-s);--spinner-base-color-l: var(--dt-color-content-brand-solid-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-solid-l)}.c-spinner.c-spinner--secondary-dark{--spinner-base-color-h: var(--dt-color-content-interactive-dark-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-dark-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-dark-solid-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-solid-h);--spinner-base-color-s: var(--dt-color-content-inverse-solid-s);--spinner-base-color-l: var(--dt-color-content-inverse-solid-l)}.c-spinner.c-spinner--inverse-light{--spinner-base-color-h: var(--dt-color-content-light-solid-h);--spinner-base-color-s: var(--dt-color-content-light-solid-s);--spinner-base-color-l: var(--dt-color-content-light-solid-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"], S = ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"], t = {
13
13
  size: "medium",
14
14
  variant: "brand"
15
15
  };
16
16
  var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (r, n, i, o) => {
17
- for (var e = o > 1 ? void 0 : o ? P(n, i) : n, p = r.length - 1, c; p >= 0; p--)
18
- (c = r[p]) && (e = (o ? c(n, i, e) : c(e)) || e);
17
+ for (var e = o > 1 ? void 0 : o ? P(n, i) : n, c = r.length - 1, p; c >= 0; c--)
18
+ (p = r[c]) && (e = (o ? p(n, i, e) : p(e)) || e);
19
19
  return o && e && O(n, i, e), e;
20
20
  };
21
21
  const f = "pie-spinner";
@@ -32,7 +32,7 @@ let s = class extends d {
32
32
  return b`
33
33
  <div
34
34
  data-test-id="pie-spinner"
35
- class="${z(i)}"
35
+ class="${y(i)}"
36
36
  role="status"
37
37
  aria-live="polite">
38
38
  ${this.renderAriaLabel()}
@@ -43,7 +43,7 @@ let s = class extends d {
43
43
  return (r = this.aria) != null && r.label ? b`
44
44
  <span class="c-spinner-label">
45
45
  ${this.aria.label}
46
- </span>` : y;
46
+ </span>` : g;
47
47
  }
48
48
  };
49
49
  s.styles = u(x);
@@ -59,7 +59,7 @@ l([
59
59
  h(f, S, t.variant)
60
60
  ], s.prototype, "variant", 2);
61
61
  s = l([
62
- g("pie-spinner")
62
+ z("pie-spinner")
63
63
  ], s);
64
64
  export {
65
65
  s as PieSpinner,
package/dist/react.d.ts CHANGED
@@ -12,7 +12,7 @@ export declare type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omi
12
12
 
13
13
  export declare const defaultProps: DefaultProps;
14
14
 
15
- export declare const PieSpinner: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<SpinnerProps> & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
15
+ export declare const PieSpinner: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<SpinnerProps>, "children">> & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
16
16
 
17
17
  /**
18
18
  * @tagname pie-spinner
@@ -20,7 +20,7 @@ export declare const PieSpinner: React_2.ForwardRefExoticComponent<React_2.Props
20
20
  declare class PieSpinner_2 extends PieElement implements SpinnerProps {
21
21
  aria: SpinnerProps['aria'];
22
22
  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
23
- variant: "brand" | "secondary" | "inverse";
23
+ variant: "brand" | "secondary" | "secondary-dark" | "inverse" | "inverse-light";
24
24
  render(): TemplateResult<1>;
25
25
  private renderAriaLabel;
26
26
  static styles: CSSResult;
@@ -45,6 +45,6 @@ export declare interface SpinnerProps {
45
45
  variant?: typeof variants[number];
46
46
  }
47
47
 
48
- export declare const variants: readonly ["brand", "secondary", "inverse"];
48
+ export declare const variants: readonly ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"];
49
49
 
50
50
  export { }
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": "1.3.7",
4
+ "version": "1.4.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -45,13 +45,13 @@
45
45
  "devDependencies": {
46
46
  "@custom-elements-manifest/analyzer": "0.9.0",
47
47
  "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "0.26.1",
48
+ "@justeattakeaway/pie-css": "0.26.2",
49
49
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
51
51
  "cem-plugin-module-file-extensions": "0.0.5"
52
52
  },
53
53
  "dependencies": {
54
- "@justeattakeaway/pie-webc-core": "6.0.1"
54
+ "@justeattakeaway/pie-webc-core": "6.0.2"
55
55
  },
56
56
  "volta": {
57
57
  "extends": "../../../package.json"
package/src/defs.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
 
3
3
  export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
4
- export const variants = ['brand', 'secondary', 'inverse'] as const;
4
+ export const variants = ['brand', 'secondary', 'secondary-dark', 'inverse', 'inverse-light'] as const;
5
5
 
6
6
  type AriaProps = {
7
7
  label?: string;
package/src/react.ts CHANGED
@@ -15,5 +15,5 @@ const PieSpinnerReact = createComponent({
15
15
 
16
16
  type ReactBaseType = React.HTMLAttributes<HTMLDivElement>
17
17
 
18
- export const PieSpinner = PieSpinnerReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SpinnerProps>
18
+ export const PieSpinner = PieSpinnerReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<SpinnerProps>, 'children'>>
19
19
  & React.RefAttributes<PieSpinnerLit> & ReactBaseType>;
package/src/spinner.scss CHANGED
@@ -50,10 +50,18 @@
50
50
  @include spinner-base-colors('--dt-color-content-interactive-secondary-solid');
51
51
  }
52
52
 
53
+ &.c-spinner--secondary-dark {
54
+ @include spinner-base-colors('--dt-color-content-interactive-dark-solid');
55
+ }
56
+
53
57
  &.c-spinner--inverse {
54
58
  @include spinner-base-colors('--dt-color-content-inverse-solid');
55
59
  }
56
60
 
61
+ &.c-spinner--inverse-light {
62
+ @include spinner-base-colors('--dt-color-content-light-solid');
63
+ }
64
+
57
65
  &.c-spinner--xsmall {
58
66
  --spinner-size: 16px;
59
67
  }