@justeattakeaway/pie-spinner 0.2.2-next.0 → 0.3.0

package/README.md

@@ -55,7 +55,7 @@ import '@justeattakeaway/pie-spinner';
 ```js
 // React
 // For React, you will need to import our React-specific component build
-// which wraps the web component using @lit-labs/react
+// which wraps the web component using ​@lit/react
 import { PieSpinner } from '@justeattakeaway/pie-spinner/dist/react';
 ```
 
@@ -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,4 +1,4 @@
-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";
 const b = (n, e, o) => function(s, i) {
   const t = `#${i}`;
@@ -16,20 +16,20 @@ const b = (n, e, o) => function(s, i) {
     configurable: !0
   });
 };
-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;
 };
 const d = "pie-spinner";
 class a extends h {
   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;
@@ -41,7 +41,7 @@ class a extends h {
                 aria-live="polite"
                 size="${o}"
                 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>`;
   }
 }
@@ -51,15 +51,15 @@ p([
 ], a.prototype, "aria", 2);
 p([
   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
 };

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,49 +1,18 @@
-import * as y from "react";
-import { PieSpinner as E } from "./index.js";
-import { sizes as k, variants as C } from "./index.js";
+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 "lit";
 import "lit/decorators.js";
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), h = (t, c, o, u, l) => {
-  const p = l == null ? void 0 : l[c];
-  p === void 0 || o === u ? (t[c] = o, o == null && c in HTMLElement.prototype && t.removeAttribute(c)) : ((i, n, s) => {
-    let a = v.get(i);
-    a === void 0 && v.set(i, a = /* @__PURE__ */ new Map());
-    let r = a.get(n);
-    s !== void 0 ? r === void 0 ? (a.set(n, r = { handleEvent: s }), i.addEventListener(n, r)) : r.handleEvent = s : r !== void 0 && (a.delete(n), i.removeEventListener(n, r));
-  })(t, p, o);
-}, S = ({ react: t, tagName: c, elementClass: o, events: u, displayName: l }) => {
-  const p = new Set(Object.keys(u ?? {})), i = t.forwardRef((n, s) => {
-    const a = t.useRef(null), r = t.useRef(null), m = {}, d = {};
-    for (const [e, f] of Object.entries(n))
-      N.has(e) ? m[e === "className" ? "class" : e] = f : p.has(e) || e in o.prototype ? d[e] = f : m[e] = f;
-    return t.useLayoutEffect(() => {
-      if (r.current !== null) {
-        for (const e in d)
-          h(r.current, e, n[e], a.current ? a.current[e] : void 0, u);
-        a.current = n;
-      }
-    }), t.useLayoutEffect(() => {
-      var e;
-      (e = r.current) == null || e.removeAttribute("defer-hydration");
-    }, []), m.suppressHydrationWarning = !0, t.createElement(c, { ...m, ref: t.useCallback((e) => {
-      r.current = e, typeof s == "function" ? s(e) : s !== null && (s.current = e);
-    }, [s]) });
-  });
-  return i.displayName = l ?? o.name, i;
-}, L = S({
+const m = r({
   displayName: "PieSpinner",
-  elementClass: E,
-  react: y,
+  elementClass: i,
+  react: e,
   tagName: "pie-spinner",
   events: {}
 });
 export {
-  L as PieSpinner,
-  k as sizes,
-  C as variants
+  m as PieSpinner,
+  c as sizes,
+  f 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-next.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "@justeattakeaway/pie-components-config": "0.6.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.12.0-next.0"
+    "@justeattakeaway/pie-webc-core": "0.12.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;
     }
 }