@justeattakeaway/pie-spinner 0.5.1 → 0.5.3

package/dist/index.js

@@ -1,6 +1,6 @@
-import { unsafeCSS as b, LitElement as m, html as v, nothing as h } from "lit";
+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 d, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
+import { validPropertyValues as v, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
 const z = `*,*:before,*:after{box-sizing:border-box}@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"], x = ["brand", "secondary", "inverse"];
 var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, p = (i, n, s, r) => {
@@ -15,15 +15,15 @@ class o extends m {
   }
   render() {
     const { variant: n, size: s, aria: r } = this;
-    return v`
-            <div 
+    return d`
+            <div
                 data-test-id="pie-spinner"
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${s}"
-                variant="${n}">
-                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : h}
+                size="${s || "medium"}"
+                variant="${n || "brand"}">
+                   ${r != null && r.label ? d`<span class="c-spinner-label">${r.label}</span>` : h}
                 </div>`;
   }
 }
@@ -33,11 +33,11 @@ p([
 ], o.prototype, "aria", 2);
 p([
   l(),
-  d(c, u, "medium")
+  v(c, u, "medium")
 ], o.prototype, "size", 2);
 p([
   l(),
-  d(c, x, "brand")
+  v(c, x, "brand")
 ], o.prototype, "variant", 2);
 f(c, o);
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-components-config": "0.11.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.17.1"
+    "@justeattakeaway/pie-webc-core": "0.18.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -35,13 +35,13 @@ export class PieSpinner extends LitElement implements SpinnerProps {
         const { variant, size, aria } = this;
 
         return html`
-            <div 
+            <div
                 data-test-id="pie-spinner"
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${size}"
-                variant="${variant}">
+                size="${size || 'medium'}"
+                variant="${variant || 'brand'}">
                    ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing}
                 </div>`;
     }