@justeattakeaway/pie-spinner 0.2.2 → 0.3.1

package/README.md

@@ -74,7 +74,7 @@ import { PieSpinner } from '@justeattakeaway/pie-spinner/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| 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` |
 | aria  | `Object`  | `undefined`  | An object representing the aria attributes such as label;
 

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export declare class PieSpinner extends LitElement implements SpinnerProps {
     static styles: CSSResult;
 }
 
-export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+export declare const sizes: readonly ["xsmall", "small", "medium", "large", "xlarge"];
 
 export declare interface SpinnerProps {
     /**

package/dist/index.js

@@ -1,65 +1,47 @@
-import { unsafeCSS as f, LitElement as h, html as v, nothing as u } from "lit";
-import { property as c } from "lit/decorators.js";
-const b = (n, e, o) => function(s, i) {
-  const t = `#${i}`;
-  Object.defineProperty(s, i, {
-    get() {
-      return this[t];
-    },
-    set(l) {
-      e.includes(l) ? this[t] = l : (console.error(
-        `<${n}> Invalid value "${l}" provided for property "${i}".`,
-        `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[t] = o);
-    },
-    configurable: !0
-  });
+import { unsafeCSS as b, LitElement as m, html as v, 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";
+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) => {
+  for (var e = r > 1 ? void 0 : r ? g(n, s) : n, a = i.length - 1, t; a >= 0; a--)
+    (t = i[a]) && (e = (r ? t(n, s, e) : t(e)) || e);
+  return r && e && y(n, s, e), e;
 };
-function m(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) => {
-  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;
-};
-const d = "pie-spinner";
-class a extends h {
+const c = "pie-spinner";
+class o extends m {
   constructor() {
-    super(...arguments), this.size = "m", this.variant = "brand";
+    super(...arguments), this.size = "medium", this.variant = "brand";
   }
   render() {
-    const { variant: e, size: o, aria: r } = this;
+    const { variant: n, size: s, aria: r } = this;
     return v`
             <div 
                 data-test-id="pie-spinner"
                 class="c-spinner"
                 role="status"
                 aria-live="polite"
-                size="${o}"
-                variant="${e}">
-                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : u}
+                size="${s}"
+                variant="${n}">
+                   ${r != null && r.label ? v`<span class="c-spinner-label">${r.label}</span>` : h}
                 </div>`;
   }
 }
-a.styles = f(y);
+o.styles = b(z);
 p([
-  c({ type: Object })
-], a.prototype, "aria", 2);
+  l({ type: Object })
+], o.prototype, "aria", 2);
 p([
-  c(),
-  b(d, z, "m")
-], a.prototype, "size", 2);
+  l(),
+  d(c, u, "medium")
+], o.prototype, "size", 2);
 p([
-  c(),
-  b(d, x, "brand")
-], a.prototype, "variant", 2);
-m(d, a);
+  l(),
+  d(c, x, "brand")
+], o.prototype, "variant", 2);
+f(c, o);
 export {
-  a as PieSpinner,
-  z as sizes,
+  o as PieSpinner,
+  u as sizes,
   x as variants
 };

package/dist/react.d.ts

@@ -20,7 +20,7 @@ declare class PieSpinner_2 extends LitElement implements SpinnerProps {
     static styles: CSSResult;
 }
 
-export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+export declare const sizes: readonly ["xsmall", "small", "medium", "large", "xlarge"];
 
 export declare interface SpinnerProps {
     /**

package/dist/react.js

@@ -1,10 +1,11 @@
 import * as e from "react";
 import { createComponent as r } from "@lit/react";
 import { PieSpinner as i } from "./index.js";
-import { sizes as c, variants as f } from "./index.js";
+import { sizes as f, variants as P } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-const m = r({
+import "@justeattakeaway/pie-webc-core";
+const a = r({
   displayName: "PieSpinner",
   elementClass: i,
   react: e,
@@ -12,7 +13,7 @@ const m = r({
   events: {}
 });
 export {
-  m as PieSpinner,
-  c as sizes,
-  f as variants
+  a as PieSpinner,
+  f as sizes,
+  P as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.6.1"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.12.0"
+    "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,4 +1,4 @@
-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;
 
 export type AriaProps = {

package/src/index.ts

@@ -24,8 +24,8 @@ export class PieSpinner extends LitElement implements SpinnerProps {
     public aria?: AriaProps;
 
     @property()
-    @validPropertyValues(componentSelector, sizes, 'm')
-    public size?: SpinnerProps['size'] = 'm';
+    @validPropertyValues(componentSelector, sizes, 'medium')
+    public size?: SpinnerProps['size'] = 'medium';
 
     @property()
     @validPropertyValues(componentSelector, variants, 'brand')

package/src/spinner.scss

@@ -55,23 +55,23 @@
         @include spinner-base-colors('--dt-color-content-inverse');
     }
 
-    &[size='xs'] {
+    &[size='xsmall'] {
         --spinner-size: 16px;
     }
 
-    &[size='s'] {
+    &[size='small'] {
         --spinner-size: 20px;
     }
 
-    &[size='m'] {
+    &[size='medium'] {
         /* Same as default styles */
     }
 
-    &[size='l'] {
+    &[size='large'] {
         --spinner-size: 32px;
     }
 
-    &[size='xl'] {
+    &[size='xlarge'] {
         --spinner-size: 48px;
     }
 }