@justeattakeaway/pie-spinner 0.6.3 → 0.6.5

package/custom-elements.json

@@ -27,6 +27,14 @@
             "text": "['brand', 'secondary', 'inverse']"
           },
           "default": "['brand', 'secondary', 'inverse']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    size: 'medium',\n    variant: 'brand',\n}"
         }
       ],
       "exports": [
@@ -45,6 +53,14 @@
             "name": "variants",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -73,7 +89,6 @@
                 "text": "SpinnerProps['size'] | undefined"
               },
               "privacy": "public",
-              "default": "'medium'",
               "attribute": "size"
             },
             {
@@ -83,7 +98,6 @@
                 "text": "SpinnerProps['variant'] | undefined"
               },
               "privacy": "public",
-              "default": "'brand'",
               "attribute": "variant"
             }
           ],
@@ -100,7 +114,6 @@
               "type": {
                 "text": "SpinnerProps['size'] | undefined"
               },
-              "default": "'medium'",
               "fieldName": "size"
             },
             {
@@ -108,7 +121,6 @@
               "type": {
                 "text": "SpinnerProps['variant'] | undefined"
               },
-              "default": "'brand'",
               "fieldName": "variant"
             }
           ],

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
@@ -6,6 +7,10 @@ export declare type AriaProps = {
     label?: string;
 };
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<SpinnerProps, 'size' | 'variant'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-spinner
  */

package/dist/index.js

@@ -1,17 +1,20 @@
-import { unsafeCSS as b, LitElement as m, html as d, nothing as h } from "lit";
-import { property as l } from "lit/decorators.js";
-import { validPropertyValues as v, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
-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}
-`, u = ["xsmall", "small", "medium", "large", "xlarge"], y = ["brand", "secondary", "inverse"];
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (i, n, s, e) => {
-  for (var r = e > 1 ? void 0 : e ? g(n, s) : n, a = i.length - 1, t; a >= 0; a--)
-    (t = i[a]) && (r = (e ? t(n, s, r) : t(r)) || r);
-  return e && r && x(n, s, r), r;
+import { unsafeCSS as h, LitElement as m, html as d, nothing as z } from "lit";
+import { property as p } from "lit/decorators.js";
+import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+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}
+`, y = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"], o = {
+  size: "medium",
+  variant: "brand"
 };
-const c = "pie-spinner";
-class o extends m {
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, n, s, e) => {
+  for (var r = e > 1 ? void 0 : e ? w(n, s) : n, t = a.length - 1, l; t >= 0; t--)
+    (l = a[t]) && (r = (e ? l(n, s, r) : l(r)) || r);
+  return e && r && g(n, s, r), r;
+};
+const v = "pie-spinner";
+class i extends m {
   constructor() {
-    super(...arguments), this.size = "medium", this.variant = "brand";
+    super(...arguments), this.size = o.size, this.variant = o.variant;
   }
   render() {
     const { variant: n, size: s, aria: e } = this;
@@ -21,27 +24,28 @@ class o extends m {
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${s || "medium"}"
-                variant="${n || "brand"}">
-                   ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : h}
+                size="${s}"
+                variant="${n}">
+                   ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z}
                 </div>`;
   }
 }
-o.styles = b(z);
-p([
-  l({ type: Object })
-], o.prototype, "aria", 2);
-p([
-  l(),
-  v(c, u, "medium")
-], o.prototype, "size", 2);
-p([
-  l(),
-  v(c, y, "brand")
-], o.prototype, "variant", 2);
-f(c, o);
+i.styles = h(u);
+c([
+  p({ type: Object })
+], i.prototype, "aria", 2);
+c([
+  p(),
+  b(v, y, o.size)
+], i.prototype, "size", 2);
+c([
+  p(),
+  b(v, x, o.variant)
+], i.prototype, "variant", 2);
+f(v, i);
 export {
-  o as PieSpinner,
-  u as sizes,
-  y as variants
+  i as PieSpinner,
+  o as defaultProps,
+  y as sizes,
+  x as variants
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
@@ -7,6 +8,10 @@ export declare type AriaProps = {
     label?: string;
 };
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<SpinnerProps, 'size' | 'variant'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps & React_2.RefAttributes<PieSpinner_2> & ReactBaseType>;
 
 /**

package/dist/react.js

@@ -1,19 +1,20 @@
 import * as e from "react";
-import { createComponent as i } from "@lit/react";
-import { PieSpinner as r } from "./index.js";
-import { sizes as S, variants as f } from "./index.js";
+import { createComponent as r } from "@lit/react";
+import { PieSpinner as i } from "./index.js";
+import { defaultProps as f, sizes as S, variants as l } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
-const n = i({
+const t = r({
   displayName: "PieSpinner",
-  elementClass: r,
+  elementClass: i,
   react: e,
   tagName: "pie-spinner",
   events: {}
-}), s = n;
+}), s = t;
 export {
   s as PieSpinner,
+  f as defaultProps,
   S as sizes,
-  f as variants
+  l as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,7 +41,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.21.1"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 export const variants = ['brand', 'secondary', 'inverse'] as const;
 
@@ -19,3 +21,9 @@ export interface SpinnerProps {
      */
     variant?: typeof variants[number];
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<SpinnerProps, 'size' | 'variant'>;
+export const defaultProps: DefaultProps = {
+    size: 'medium',
+    variant: 'brand',
+};

package/src/index.ts

@@ -9,6 +9,7 @@ import {
     sizes,
     variants,
     type AriaProps,
+    defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -24,12 +25,12 @@ export class PieSpinner extends LitElement implements SpinnerProps {
     public aria?: AriaProps;
 
     @property()
-    @validPropertyValues(componentSelector, sizes, 'medium')
-    public size?: SpinnerProps['size'] = 'medium';
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size?: SpinnerProps['size'] = defaultProps.size;
 
     @property()
-    @validPropertyValues(componentSelector, variants, 'brand')
-    public variant?: SpinnerProps['variant'] = 'brand';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant?: SpinnerProps['variant'] = defaultProps.variant;
 
     render () {
         const { variant, size, aria } = this;
@@ -40,8 +41,8 @@ export class PieSpinner extends LitElement implements SpinnerProps {
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${size || 'medium'}"
-                variant="${variant || 'brand'}">
+                size="${size}"
+                variant="${variant}">
                    ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing}
                 </div>`;
     }