@justeattakeaway/pie-spinner - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240111110632 to 0.0.0-snapshot-release-20240209112948

dist/index.js

@@ -1,4 +0,4 @@
-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}
@@ -18,4 +18,4 @@ `, u = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"];
     const { variant: n, size: s, aria: r } = this;
-    return v`
-            <div 
+    return d`
+            <div
                 data-test-id="pie-spinner"
@@ -25,5 +25,5 @@ class="c-spinner"
                 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>`;
@@ -38,7 +38,7 @@ }
   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);
@@ -45,0 +45,0 @@ f(c, o);

package.json

 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.0.0-snapshot-release-20240111110632",
+  "version": "0.0.0-snapshot-release-20240209112948",
   "type": "module",
@@ -35,8 +35,8 @@ "main": "dist/index.js",
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.9.0",
-    "@justeattakeaway/pie-wrapper-react": "0.0.0-snapshot-release-20240111110632",
+    "@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.16.0"
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240209112948"
   },
@@ -43,0 +43,0 @@ "volta": {

src/index.ts

@@ -38,3 +38,3 @@ import {
         return html`
-            <div 
+            <div
                 data-test-id="pie-spinner"
@@ -44,4 +44,4 @@ class="c-spinner"
                 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}
@@ -48,0 +48,0 @@ </div>`;

src/react.ts

@@ -18,4 +18,3 @@ import * as React from 'react';
 
-
-
-export const PieSpinner = PieSpinnerReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SpinnerProps> & React.RefAttributes<PieSpinnerLit> & ReactBaseType>;
+export const PieSpinner = PieSpinnerReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<SpinnerProps>
+    & React.RefAttributes<PieSpinnerLit> & ReactBaseType>;

No alert changes

Improved metrics

Total package byte prevSize

19474

increased by0.24%

Lines of code

377

increased by0.27%

Dependency changes

• + Added@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240209112948(transitive)

• + Addedlit@3.1.1(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.16.0(transitive)

• - Removedlit@3.1.0(transitive)

• Updated@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240209112948