@justeattakeaway/pie-spinner 0.1.0 → 0.2.0

package/README.md

@@ -60,7 +60,9 @@ 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` |
+| 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;
 
 In your markup or JSX, you can then use these to set the properties for the `pie-spinner` component:
 

package/dist/index.d.ts

@@ -2,15 +2,38 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
+export declare type AriaProps = {
+    label?: string;
+};
+
 /**
  * @tagname pie-spinner
  */
 export declare class PieSpinner extends LitElement implements SpinnerProps {
+    aria?: AriaProps;
+    size?: SpinnerProps['size'];
+    variant?: SpinnerProps['variant'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+
 export declare interface SpinnerProps {
+    /**
+     * The ARIA labels used for the spinner component.
+     */
+    aria?: AriaProps;
+    /**
+     * What size the spinner should be.
+     */
+    size?: typeof sizes[number];
+    /**
+     * What style variant the spinner should be such as brand, secondary or inverse.
+     */
+    variant?: typeof variants[number];
 }
 
+export declare const variants: readonly ["brand", "secondary", "inverse"];
+
 export { }

package/dist/index.js

@@ -1,15 +1,65 @@
-import { unsafeCSS as t, LitElement as o, html as i } from "lit";
-function l(e, s) {
-  customElements.get(e) ? console.warn(`PIE Web Component: "${e}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(e, s);
+import { unsafeCSS as f, LitElement as u, html as v, nothing as m } from "lit";
+import { property as c } from "lit/decorators.js";
+const b = (r, e, o) => function(s, i) {
+  const t = `#${i}`;
+  Object.defineProperty(s, i, {
+    get() {
+      return this[t];
+    },
+    set(l) {
+      const h = this[t];
+      e.includes(l) ? this[t] = l : (console.error(
+        `<${r}> Invalid value "${l}" provided for property "${i}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${o}"`
+      ), this[t] = o), this.requestUpdate(i, h);
+    }
+  });
+};
+function z(r, e) {
+  customElements.get(r) ? console.warn(`PIE Web Component: "${r}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(r, e);
 }
-const r = "", d = "pie-spinner";
-class n extends o {
+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}
+`, x = ["xs", "s", "m", "l", "xl"], g = ["brand", "secondary", "inverse"];
+var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, p = (r, e, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? $(e, o) : e, i = r.length - 1, t; i >= 0; i--)
+    (t = r[i]) && (s = (n ? t(e, o, s) : t(s)) || s);
+  return n && s && P(e, o, s), s;
+};
+const d = "pie-spinner";
+class a extends u {
+  constructor() {
+    super(...arguments), this.size = "m", this.variant = "brand";
+  }
   render() {
-    return i`<h1 data-test-id="pie-spinner">Hello world!</h1>`;
+    const { variant: e, size: o, aria: n } = this;
+    return v`
+            <div 
+                data-test-id="pie-spinner"
+                class="c-spinner"
+                role="status"
+                aria-live="polite"
+                size="${o}"
+                variant="${e}">
+                   ${n != null && n.label ? v`<span class="c-spinner-label">${n.label}</span>` : m}
+                </div>`;
   }
 }
-n.styles = t(r);
-l(d, n);
+a.styles = f(y);
+p([
+  c({ type: Object })
+], a.prototype, "aria", 2);
+p([
+  c(),
+  b(d, x, "m")
+], a.prototype, "size", 2);
+p([
+  c(),
+  b(d, g, "brand")
+], a.prototype, "variant", 2);
+z(d, a);
 export {
-  n as PieSpinner
+  a as PieSpinner,
+  x as sizes,
+  g as variants
 };

package/dist/react.d.ts

@@ -3,17 +3,40 @@ import type { LitElement } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
 import type { TemplateResult } from 'lit-html';
 
+export declare type AriaProps = {
+    label?: string;
+};
+
 export declare const PieSpinner: ReactWebComponent<PieSpinner_2, {}>;
 
 /**
  * @tagname pie-spinner
  */
 declare class PieSpinner_2 extends LitElement implements SpinnerProps {
+    aria?: AriaProps;
+    size?: SpinnerProps['size'];
+    variant?: SpinnerProps['variant'];
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
+export declare const sizes: readonly ["xs", "s", "m", "l", "xl"];
+
 export declare interface SpinnerProps {
+    /**
+     * The ARIA labels used for the spinner component.
+     */
+    aria?: AriaProps;
+    /**
+     * What size the spinner should be.
+     */
+    size?: typeof sizes[number];
+    /**
+     * What style variant the spinner should be such as brand, secondary or inverse.
+     */
+    variant?: typeof variants[number];
 }
 
+export declare const variants: readonly ["brand", "secondary", "inverse"];
+
 export { }

package/dist/react.js

@@ -1,67 +1,72 @@
-import * as S from "react";
-import { PieSpinner as g } from "./index.js";
+import * as g from "react";
+import { PieSpinner as E } from "./index.js";
+import { sizes as k, variants as A } from "./index.js";
 import "lit";
+import "lit/decorators.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const M = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), E = /* @__PURE__ */ new WeakMap(), P = (p, a, d, m, h) => {
-  const i = h == null ? void 0 : h[a];
-  i === void 0 || d === m ? d == null && a in HTMLElement.prototype ? p.removeAttribute(a) : p[a] = d : ((s, t, u) => {
-    let o = E.get(s);
-    o === void 0 && E.set(s, o = /* @__PURE__ */ new Map());
-    let r = o.get(t);
-    u !== void 0 ? r === void 0 ? (o.set(t, r = { handleEvent: u }), s.addEventListener(t, r)) : r.handleEvent = u : r !== void 0 && (o.delete(t), s.removeEventListener(t, r));
-  })(p, i, d);
+const S = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), b = (t, n, c, d, m) => {
+  const o = m == null ? void 0 : m[n];
+  o === void 0 || c === d ? c == null && n in HTMLElement.prototype ? t.removeAttribute(n) : t[n] = c : ((r, i, h) => {
+    let a = w.get(r);
+    a === void 0 && w.set(r, a = /* @__PURE__ */ new Map());
+    let l = a.get(i);
+    h !== void 0 ? l === void 0 ? (a.set(i, l = { handleEvent: h }), r.addEventListener(i, l)) : l.handleEvent = h : l !== void 0 && (a.delete(i), r.removeEventListener(i, l));
+  })(t, o, c);
+}, M = (t, n) => {
+  typeof t == "function" ? t(n) : t.current = n;
 };
-function b(p = window.React, a, d, m, h) {
-  let i, s, t;
-  if (a === void 0) {
-    const l = p;
-    ({ tagName: s, elementClass: t, events: m, displayName: h } = l), i = l.react;
+function P(t = window.React, n, c, d, m) {
+  let o, r, i;
+  if (n === void 0) {
+    const p = t;
+    ({ tagName: r, elementClass: i, events: d, displayName: m } = p), o = p.react;
   } else
-    i = p, t = d, s = a;
-  const u = i.Component, o = i.createElement, r = new Set(Object.keys(m ?? {}));
-  class f extends u {
+    o = t, i = c, r = n;
+  const h = o.Component, a = o.createElement, l = new Set(Object.keys(d ?? {}));
+  class f extends h {
     constructor() {
       super(...arguments), this.o = null;
     }
     t(e) {
       if (this.o !== null)
-        for (const v in this.i)
-          P(this.o, v, this.props[v], e ? e[v] : void 0, m);
+        for (const u in this.i)
+          b(this.o, u, this.props[u], e ? e[u] : void 0, d);
     }
     componentDidMount() {
-      this.t();
+      var e;
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
     }
     componentDidUpdate(e) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...v } = this.props;
-      this.h !== e && (this.u = (n) => {
-        e !== null && ((c, w) => {
-          typeof c == "function" ? c(w) : c.current = w;
-        })(e, n), this.o = n, this.h = e;
+      const { _$Gl: e, ...u } = this.props;
+      this.h !== e && (this.u = (s) => {
+        e !== null && M(e, s), this.o = s, this.h = e;
       }), this.i = {};
-      const y = { ref: this.u };
-      for (const [n, c] of Object.entries(v))
-        M.has(n) ? y[n === "className" ? "class" : n] = c : r.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
-      return o(s, y);
+      const v = { ref: this.u };
+      for (const [s, y] of Object.entries(u))
+        S.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in i.prototype ? this.i[s] = y : v[s] = y;
+      return v.suppressHydrationWarning = !0, a(r, v);
     }
   }
-  f.displayName = h ?? t.name;
-  const N = i.forwardRef((l, e) => o(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
+  f.displayName = m ?? i.name;
+  const N = o.forwardRef((p, e) => a(f, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
   return N.displayName = f.displayName, N;
 }
-const R = b({
+const R = P({
   displayName: "PieSpinner",
-  elementClass: g,
-  react: S,
+  elementClass: E,
+  react: g,
   tagName: "pie-spinner",
   events: {}
 });
 export {
-  R as PieSpinner
+  R as PieSpinner,
+  k as sizes,
+  A as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,3 +1,21 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface SpinnerProps {}
+export const sizes = ['xs', 's', 'm', 'l', 'xl'] as const;
+export const variants = ['brand', 'secondary', 'inverse'] as const;
+
+export type AriaProps = {
+    label?: string;
+};
+
+export interface SpinnerProps {
+    /**
+     * The ARIA labels used for the spinner component.
+     */
+    aria?: AriaProps;
+    /**
+     * What size the spinner should be.
+     */
+    size?: typeof sizes[number];
+    /**
+     * What style variant the spinner should be such as brand, secondary or inverse.
+     */
+    variant?: typeof variants[number];
+}

package/src/index.ts

@@ -1,8 +1,15 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement, html, nothing, unsafeCSS,
+} from 'lit';
+import { property } from 'lit/decorators.js';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './spinner.scss?inline';
-import { SpinnerProps } from './defs';
+import {
+    SpinnerProps,
+    sizes,
+    variants,
+    type AriaProps,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,8 +20,30 @@ const componentSelector = 'pie-spinner';
  * @tagname pie-spinner
  */
 export class PieSpinner extends LitElement implements SpinnerProps {
+    @property({ type: Object })
+    public aria?: AriaProps;
+
+    @property()
+    @validPropertyValues(componentSelector, sizes, 'm')
+    public size?: SpinnerProps['size'] = 'm';
+
+    @property()
+    @validPropertyValues(componentSelector, variants, 'brand')
+    public variant?: SpinnerProps['variant'] = 'brand';
+
     render () {
-        return html`<h1 data-test-id="pie-spinner">Hello world!</h1>`;
+        const { variant, size, aria } = this;
+
+        return html`
+            <div 
+                data-test-id="pie-spinner"
+                class="c-spinner"
+                role="status"
+                aria-live="polite"
+                size="${size}"
+                variant="${variant}">
+                   ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing}
+                </div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/spinner.scss

@@ -1 +1,82 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+/**
+* Shorthand mixin for updating the HSL custom properties for the loading spinner.
+* Takes in the name of the color to be split into its HSL components.
+*/
+@mixin spinner-base-colors($color) {
+    --spinner-base-color-h: var(#{$color}-h);
+    --spinner-base-color-s: var(#{$color}-s);
+    --spinner-base-color-l: var(#{$color}-l);
+}
+
+// Spin animation for loading state
+@keyframes rotate360 {
+    from {
+        transform: rotate(0deg);
+    }
+
+    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), 0.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;
+
+    @include spinner-base-colors('--dt-color-content-brand');
+
+    &[variant='brand'] {
+        /* Same as default styles */
+    }
+
+    &[variant='secondary'] {
+        @include spinner-base-colors('--dt-color-content-interactive-secondary');
+    }
+
+    &[variant='inverse'] {
+        @include spinner-base-colors('--dt-color-content-inverse');
+    }
+
+    &[size='xs'] {
+        --spinner-size: 16px;
+    }
+
+    &[size='s'] {
+        --spinner-size: 20px;
+    }
+
+    &[size='m'] {
+        /* Same as default styles */
+    }
+
+    &[size='l'] {
+        --spinner-size: 32px;
+    }
+
+    &[size='xl'] {
+        --spinner-size: 48px;
+    }
+}
+
+// The label is only required for screen readers so we need to visually hide it
+.c-spinner-label {
+    @include p.visually-hidden;
+}