@justeattakeaway/pie-spinner - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/index.d.ts

@@ -20,3 +20,3 @@ import type { CSSResult } from 'lit';
 
-export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+export declare const sizes: readonly ["xsmall", "small", "medium", "large", "xlarge"];
 
@@ -23,0 +23,0 @@ export declare interface SpinnerProps {

dist/index.js

@@ -1,2 +0,2 @@
-import { unsafeCSS as f, LitElement as h, html as v, nothing as u } from "lit";
+import { unsafeCSS as f, LitElement as h, html as v, nothing as m } from "lit";
 import { property as c } from "lit/decorators.js";
@@ -19,11 +19,11 @@ const b = (n, e, o) => function(s, i) {
 };
-function m(n, e) {
+function u(n, e) {
   customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
 }
-const y = `*,*: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=xs]{--spinner-size: 16px}.c-spinner[size=s]{--spinner-size: 20px}.c-spinner[size=l]{--spinner-size: 32px}.c-spinner[size=xl]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
-`, z = ["xs", "s", "m", "l", "xl"], x = ["brand", "secondary", "inverse"];
-var g = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (n, e, o, r) => {
+const y = `*,*: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}
+`, z = ["xsmall", "small", "medium", "large", "xlarge"], g = ["brand", "secondary", "inverse"];
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (n, e, o, r) => {
   for (var s = r > 1 ? void 0 : r ? P(e, o) : e, i = n.length - 1, t; i >= 0; i--)
     (t = n[i]) && (s = (r ? t(e, o, s) : t(s)) || s);
-  return r && s && g(e, o, s), s;
+  return r && s && x(e, o, s), s;
 };
@@ -33,3 +33,3 @@ const d = "pie-spinner";
   constructor() {
-    super(...arguments), this.size = "m", this.variant = "brand";
+    super(...arguments), this.size = "medium", this.variant = "brand";
   }
@@ -46,3 +46,3 @@ render() {
                 variant="${e}">
-                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : u}
+                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : m}
                 </div>`;
@@ -57,13 +57,13 @@ }
   c(),
-  b(d, z, "m")
+  b(d, z, "medium")
 ], a.prototype, "size", 2);
 p([
   c(),
-  b(d, x, "brand")
+  b(d, g, "brand")
 ], a.prototype, "variant", 2);
-m(d, a);
+u(d, a);
 export {
   a as PieSpinner,
   z as sizes,
-  x as variants
+  g as variants
 };

dist/react.d.ts

@@ -23,3 +23,3 @@ import type { CSSResult } from 'lit';
 
-export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+export declare const sizes: readonly ["xsmall", "small", "medium", "large", "xlarge"];
 
@@ -26,0 +26,0 @@ export declare interface SpinnerProps {

package.json

 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

README.md

@@ -77,3 +77,3 @@ <p align="center">
 |---|---|---|---|
-| size | `String` | `m` | Size of the spinner, one of `sizes` – `xs`, `s`, `m`, `l`, `xl` |
+| size | `String` | `medium` | Size of the spinner, one of `sizes` – `xsmall`, `small`, `medium`, `large`, `xlarge` |
 | variant | `String` | `brand` | Variant of the spinner, one of `variants` – `brand`, `secondary`, `inverse` |
@@ -80,0 +80,0 @@ | aria  | `Object`  | `undefined`  | An object representing the aria attributes such as label;

src/defs.ts

@@ -1,2 +0,2 @@
-export const sizes = ['xs', 's', 'm', 'l', 'xl'] as const;
+export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 export const variants = ['brand', 'secondary', 'inverse'] as const;
@@ -3,0 +3,0 @@

src/index.ts

@@ -27,4 +27,4 @@ import {
     @property()
-    @validPropertyValues(componentSelector, sizes, 'm')
-    public size?: SpinnerProps['size'] = 'm';
+    @validPropertyValues(componentSelector, sizes, 'medium')
+    public size?: SpinnerProps['size'] = 'medium';
 
@@ -31,0 +31,0 @@ @property()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15235

increased by1.11%

No dependency changes