@justeattakeaway/pie-spinner 1.4.19 → 1.5.1

package/README.md

@@ -33,6 +33,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 |----------|----------------------------------------------|--------------------------------------------------------------------------------------------------|-------------|
 | `size`   | `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"` | Size of the spinner.                                                                             | `medium`    |
 | `variant`| `"brand"`, `"secondary"`, `"secondary-dark"`, `"inverse"`, `"inverse-light"` | Variant of the spinner.                                                                          | `brand`     |
+| `isCentered` | `true`, `false`                            | When true, positions the spinner absolutely and centers it within its nearest relative ancestor. | `false`     |
 | `aria`   | —                                            | An object representing the ARIA attributes such as `label`.                                      | `undefined` |
 
 ### Slots

package/custom-elements.json

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{ size: 'medium', variant: 'brand', }"
+          "default": "{ size: 'medium', variant: 'brand', isCentered: false, }"
         }
       ],
       "exports": [
@@ -94,6 +94,13 @@
               "privacy": "public",
               "attribute": "variant"
             },
+            {
+              "kind": "field",
+              "name": "isCentered",
+              "privacy": "public",
+              "attribute": "isCentered",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "renderAriaLabel",
@@ -115,6 +122,10 @@
             {
               "name": "variant",
               "fieldName": "variant"
+            },
+            {
+              "name": "isCentered",
+              "fieldName": "isCentered"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export declare class PieSpinner extends PieElement implements SpinnerProps {
     aria: SpinnerProps['aria'];
     size: "xsmall" | "small" | "medium" | "large" | "xlarge";
     variant: "brand" | "secondary" | "secondary-dark" | "inverse" | "inverse-light";
+    isCentered: boolean;
     render(): TemplateResult<1>;
     private renderAriaLabel;
     static styles: CSSResult;
@@ -38,6 +39,10 @@ export declare interface SpinnerProps {
      * What style variant the spinner should be such as brand, secondary or inverse.
      */
     variant?: typeof variants[number];
+    /**
+     * When true, the spinner positions itself absolutely and centers itself within its nearest relative ancestor.
+     */
+    isCentered?: boolean;
 }
 
 export declare const variants: readonly ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"];

package/dist/index.js

@@ -1,33 +1,34 @@
 import { LitElement as m, unsafeCSS as u, html as b, nothing as g } from "lit";
-import { property as v } from "lit/decorators.js";
+import { property as c } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
 import { validPropertyValues as h, safeCustomElement as z } from "@justeattakeaway/pie-webc-core";
-const a = class a extends m {
+const l = class l extends m {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", a.v);
+    this.getAttribute("v") || this.setAttribute("v", l.v);
   }
 };
-a.v = "1.4.19";
-let d = a;
-const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@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-solid-h);--spinner-base-color-s: var(--dt-color-content-brand-solid-s);--spinner-base-color-l: var(--dt-color-content-brand-solid-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-solid-l)}.c-spinner.c-spinner--secondary-dark{--spinner-base-color-h: var(--dt-color-content-interactive-dark-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-dark-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-dark-solid-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-solid-h);--spinner-base-color-s: var(--dt-color-content-inverse-solid-s);--spinner-base-color-l: var(--dt-color-content-inverse-solid-l)}.c-spinner.c-spinner--inverse-light{--spinner-base-color-h: var(--dt-color-content-light-solid-h);--spinner-base-color-s: var(--dt-color-content-light-solid-s);--spinner-base-color-l: var(--dt-color-content-light-solid-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-spinner-label *{overflow:hidden}", w = ["xsmall", "small", "medium", "large", "xlarge"], S = ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"], t = {
+l.v = "1.5.1";
+let v = l;
+const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host([isCentered]){position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}@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-solid-h);--spinner-base-color-s: var(--dt-color-content-brand-solid-s);--spinner-base-color-l: var(--dt-color-content-brand-solid-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-solid-l)}.c-spinner.c-spinner--secondary-dark{--spinner-base-color-h: var(--dt-color-content-interactive-dark-solid-h);--spinner-base-color-s: var(--dt-color-content-interactive-dark-solid-s);--spinner-base-color-l: var(--dt-color-content-interactive-dark-solid-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-solid-h);--spinner-base-color-s: var(--dt-color-content-inverse-solid-s);--spinner-base-color-l: var(--dt-color-content-inverse-solid-l)}.c-spinner.c-spinner--inverse-light{--spinner-base-color-h: var(--dt-color-content-light-solid-h);--spinner-base-color-s: var(--dt-color-content-light-solid-s);--spinner-base-color-l: var(--dt-color-content-light-solid-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-spinner-label *{overflow:hidden}", w = ["xsmall", "small", "medium", "large", "xlarge"], C = ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"], t = {
   size: "medium",
-  variant: "brand"
+  variant: "brand",
+  isCentered: !1
 };
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (r, n, i, o) => {
-  for (var e = o > 1 ? void 0 : o ? P(n, i) : n, c = r.length - 1, p; c >= 0; c--)
-    (p = r[c]) && (e = (o ? p(n, i, e) : p(e)) || e);
-  return o && e && O(n, i, e), e;
+var S = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (e, s, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? O(s, i) : s, p = e.length - 1, d; p >= 0; p--)
+    (d = e[p]) && (r = (a ? d(s, i, r) : d(r)) || r);
+  return a && r && S(s, i, r), r;
 };
 const f = "pie-spinner";
-let s = class extends d {
+let n = class extends v {
   constructor() {
-    super(...arguments), this.size = t.size, this.variant = t.variant;
+    super(...arguments), this.size = t.size, this.variant = t.variant, this.isCentered = t.isCentered;
   }
   render() {
-    const { variant: r, size: n } = this, i = {
+    const { variant: e, size: s } = this, i = {
       "c-spinner": !0,
-      [`c-spinner--${n}`]: !0,
-      [`c-spinner--${r}`]: !0
+      [`c-spinner--${s}`]: !0,
+      [`c-spinner--${e}`]: !0
     };
     return b`
             <div
@@ -39,31 +40,34 @@ let s = class extends d {
             </div>`;
   }
   renderAriaLabel() {
-    var r;
-    return (r = this.aria) != null && r.label ? b`
+    var e;
+    return (e = this.aria) != null && e.label ? b`
         <span class="c-spinner-label">
             ${this.aria.label}
         </span>` : g;
   }
 };
-s.styles = u(x);
-l([
-  v({ type: Object })
-], s.prototype, "aria", 2);
-l([
-  v({ type: String }),
+n.styles = u(x);
+o([
+  c({ type: Object })
+], n.prototype, "aria", 2);
+o([
+  c({ type: String }),
   h(f, w, t.size)
-], s.prototype, "size", 2);
-l([
-  v({ type: String }),
-  h(f, S, t.variant)
-], s.prototype, "variant", 2);
-s = l([
+], n.prototype, "size", 2);
+o([
+  c({ type: String }),
+  h(f, C, t.variant)
+], n.prototype, "variant", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], n.prototype, "isCentered", 2);
+n = o([
   z("pie-spinner")
-], s);
+], n);
 export {
-  s as PieSpinner,
+  n as PieSpinner,
   t as defaultProps,
   w as sizes,
-  S as variants
+  C as variants
 };

package/dist/react.d.ts

@@ -21,6 +21,7 @@ declare class PieSpinner_2 extends PieElement implements SpinnerProps {
     aria: SpinnerProps['aria'];
     size: "xsmall" | "small" | "medium" | "large" | "xlarge";
     variant: "brand" | "secondary" | "secondary-dark" | "inverse" | "inverse-light";
+    isCentered: boolean;
     render(): TemplateResult<1>;
     private renderAriaLabel;
     static styles: CSSResult;
@@ -43,6 +44,10 @@ export declare interface SpinnerProps {
      * What style variant the spinner should be such as brand, secondary or inverse.
      */
     variant?: typeof variants[number];
+    /**
+     * When true, the spinner positions itself absolutely and centers itself within its nearest relative ancestor.
+     */
+    isCentered?: boolean;
 }
 
 export declare const variants: readonly ["brand", "secondary", "secondary-dark", "inverse", "inverse-light"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "1.4.19",
+  "version": "1.5.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -44,12 +44,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-css": "1.3.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.6",
     "@justeattakeaway/pie-wrapper-react": "0.14.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "15.1.0"
+    "@justeattakeaway/pie-webc-core": "16.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/defs.ts

@@ -20,6 +20,10 @@ export interface SpinnerProps {
      * What style variant the spinner should be such as brand, secondary or inverse.
      */
     variant?: typeof variants[number];
+    /**
+     * When true, the spinner positions itself absolutely and centers itself within its nearest relative ancestor.
+     */
+    isCentered?: boolean;
 }
 
 export type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<SpinnerProps, 'aria'>>;
@@ -27,4 +31,5 @@ export type DefaultProps = ComponentDefaultProps<SpinnerProps, keyof Omit<Spinne
 export const defaultProps: DefaultProps = {
     size: 'medium',
     variant: 'brand',
+    isCentered: false,
 };

package/src/index.ts

@@ -34,6 +34,9 @@ export class PieSpinner extends PieElement implements SpinnerProps {
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
     public variant = defaultProps.variant;
 
+    @property({ type: Boolean, reflect: true })
+    public isCentered = defaultProps.isCentered;
+
     render () {
         const { variant, size } = this;
 

package/src/spinner.scss

@@ -4,6 +4,14 @@
     display: block;
 }
 
+:host([isCentered]) {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /**
 * 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.