@justeattakeaway/pie-spinner 0.6.6 → 0.7.0

package/custom-elements.json

@@ -77,7 +77,7 @@
               "kind": "field",
               "name": "aria",
               "type": {
-                "text": "AriaProps | undefined"
+                "text": "SpinnerProps['aria']"
               },
               "privacy": "public",
               "attribute": "aria"
@@ -85,42 +85,35 @@
             {
               "kind": "field",
               "name": "size",
-              "type": {
-                "text": "SpinnerProps['size'] | undefined"
-              },
               "privacy": "public",
               "attribute": "size"
             },
             {
               "kind": "field",
               "name": "variant",
-              "type": {
-                "text": "SpinnerProps['variant'] | undefined"
-              },
               "privacy": "public",
               "attribute": "variant"
+            },
+            {
+              "kind": "method",
+              "name": "renderAriaLabel",
+              "privacy": "private"
             }
           ],
           "attributes": [
             {
               "name": "aria",
               "type": {
-                "text": "AriaProps | undefined"
+                "text": "SpinnerProps['aria']"
               },
               "fieldName": "aria"
             },
             {
               "name": "size",
-              "type": {
-                "text": "SpinnerProps['size'] | undefined"
-              },
               "fieldName": "size"
             },
             {
               "name": "variant",
-              "type": {
-                "text": "SpinnerProps['variant'] | undefined"
-              },
               "fieldName": "variant"
             }
           ],

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     label?: string;
 };
 
@@ -15,10 +15,11 @@ export declare const defaultProps: DefaultProps;
  * @tagname pie-spinner
  */
 export declare class PieSpinner extends LitElement implements SpinnerProps {
-    aria?: AriaProps;
-    size?: SpinnerProps['size'];
-    variant?: SpinnerProps['variant'];
+    aria: SpinnerProps['aria'];
+    size: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    variant: "brand" | "secondary" | "inverse";
     render(): TemplateResult<1>;
+    private renderAriaLabel;
     static styles: CSSResult;
 }
 

package/dist/index.js

@@ -1,15 +1,16 @@
-import { unsafeCSS as h, LitElement as m, html as d, nothing as z } from "lit";
+import { unsafeCSS as h, LitElement as m, html as d, nothing as f } from "lit";
 import { property as p } from "lit/decorators.js";
-import { validPropertyValues as b, defineCustomElement as f } from "@justeattakeaway/pie-webc-core";
-const u = `*,*:after,*:before{box-sizing:inherit}@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}
-`, y = ["xsmall", "small", "medium", "large", "xlarge"], x = ["brand", "secondary", "inverse"], o = {
+import { classMap as u } from "lit/directives/class-map.js";
+import { validPropertyValues as b, defineCustomElement as z } from "@justeattakeaway/pie-webc-core";
+const y = `*,*:after,*:before{box-sizing:inherit}@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.c-spinner--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.c-spinner--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.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;overflow:hidden;padding:1px;white-space:nowrap}
+`, x = ["xsmall", "small", "medium", "large", "xlarge"], g = ["brand", "secondary", "inverse"], o = {
   size: "medium",
   variant: "brand"
 };
-var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, n, s, e) => {
-  for (var r = e > 1 ? void 0 : e ? w(n, s) : n, t = a.length - 1, l; t >= 0; t--)
-    (l = a[t]) && (r = (e ? l(n, s, r) : l(r)) || r);
-  return e && r && g(n, s, r), r;
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (a, r, s, n) => {
+  for (var e = n > 1 ? void 0 : n ? P(r, s) : r, t = a.length - 1, l; t >= 0; t--)
+    (l = a[t]) && (e = (n ? l(r, s, e) : l(e)) || e);
+  return n && e && w(r, s, e), e;
 };
 const v = "pie-spinner";
 class i extends m {
@@ -17,35 +18,44 @@ class i extends m {
     super(...arguments), this.size = o.size, this.variant = o.variant;
   }
   render() {
-    const { variant: n, size: s, aria: e } = this;
+    const { variant: r, size: s } = this, n = {
+      "c-spinner": !0,
+      [`c-spinner--${s}`]: !0,
+      [`c-spinner--${r}`]: !0
+    };
     return d`
             <div
                 data-test-id="pie-spinner"
-                class="c-spinner"
+                class="${u(n)}"
                 role="status"
-                aria-live="polite"
-                size="${s}"
-                variant="${n}">
-                   ${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z}
-                </div>`;
+                aria-live="polite">
+                ${this.renderAriaLabel()}
+            </div>`;
+  }
+  renderAriaLabel() {
+    var r;
+    return (r = this.aria) != null && r.label ? d`
+        <span class="c-spinner-label">
+            ${this.aria.label}
+        </span>` : f;
   }
 }
-i.styles = h(u);
+i.styles = h(y);
 c([
   p({ type: Object })
 ], i.prototype, "aria", 2);
 c([
   p(),
-  b(v, y, o.size)
+  b(v, x, o.size)
 ], i.prototype, "size", 2);
 c([
   p(),
-  b(v, x, o.variant)
+  b(v, g, o.variant)
 ], i.prototype, "variant", 2);
-f(v, i);
+z(v, i);
 export {
   i as PieSpinner,
   o as defaultProps,
-  y as sizes,
-  x as variants
+  x as sizes,
+  g as variants
 };

package/dist/react.d.ts

@@ -4,7 +4,7 @@ import type { LitElement } from 'lit';
 import * as React_2 from 'react';
 import type { TemplateResult } from 'lit-html';
 
-export declare type AriaProps = {
+declare type AriaProps = {
     label?: string;
 };
 
@@ -18,10 +18,11 @@ export declare const PieSpinner: React_2.ForwardRefExoticComponent<SpinnerProps
  * @tagname pie-spinner
  */
 declare class PieSpinner_2 extends LitElement implements SpinnerProps {
-    aria?: AriaProps;
-    size?: SpinnerProps['size'];
-    variant?: SpinnerProps['variant'];
+    aria: SpinnerProps['aria'];
+    size: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    variant: "brand" | "secondary" | "inverse";
     render(): TemplateResult<1>;
+    private renderAriaLabel;
     static styles: CSSResult;
 }
 

package/dist/react.js

@@ -1,9 +1,10 @@
 import * as e from "react";
 import { createComponent as r } from "@lit/react";
 import { PieSpinner as i } from "./index.js";
-import { defaultProps as f, sizes as S, variants as l } from "./index.js";
+import { defaultProps as S, sizes as l, variants as d } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/class-map.js";
 import "@justeattakeaway/pie-webc-core";
 const t = r({
   displayName: "PieSpinner",
@@ -11,10 +12,10 @@ const t = r({
   react: e,
   tagName: "pie-spinner",
   events: {}
-}), s = t;
+}), c = t;
 export {
-  s as PieSpinner,
-  f as defaultProps,
-  S as sizes,
-  l as variants
+  c as PieSpinner,
+  S as defaultProps,
+  l as sizes,
+  d as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-spinner",
   "description": "PIE Design System Spinner built using Web Components",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,8 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },

package/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
 export type ReactBaseType = React.HTMLAttributes<HTMLDivElement>

package/src/defs.ts

@@ -3,7 +3,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 export const variants = ['brand', 'secondary', 'inverse'] as const;
 
-export type AriaProps = {
+type AriaProps = {
     label?: string;
 };
 

package/src/index.ts

@@ -2,13 +2,13 @@ import {
     LitElement, html, nothing, unsafeCSS,
 } from 'lit';
 import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './spinner.scss?inline';
 import {
-    SpinnerProps,
+    type SpinnerProps,
     sizes,
     variants,
-    type AriaProps,
     defaultProps,
 } from './defs';
 
@@ -22,29 +22,42 @@ const componentSelector = 'pie-spinner';
  */
 export class PieSpinner extends LitElement implements SpinnerProps {
     @property({ type: Object })
-    public aria?: AriaProps;
+    public aria: SpinnerProps['aria'];
 
     @property()
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size?: SpinnerProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
 
     @property()
     @validPropertyValues(componentSelector, variants, defaultProps.variant)
-    public variant?: SpinnerProps['variant'] = defaultProps.variant;
+    public variant = defaultProps.variant;
 
     render () {
-        const { variant, size, aria } = this;
+        const { variant, size } = this;
+
+        const classes = {
+            'c-spinner': true,
+            [`c-spinner--${size}`]: true,
+            [`c-spinner--${variant}`]: true,
+        };
 
         return html`
             <div
                 data-test-id="pie-spinner"
-                class="c-spinner"
+                class="${classMap(classes)}"
                 role="status"
-                aria-live="polite"
-                size="${size}"
-                variant="${variant}">
-                   ${aria?.label ? html`<span class="c-spinner-label">${aria.label}</span>` : nothing}
-                </div>`;
+                aria-live="polite">
+                ${this.renderAriaLabel()}
+            </div>`;
+    }
+
+    private renderAriaLabel () {
+        if (!this.aria?.label) return nothing;
+
+        return html`
+        <span class="c-spinner-label">
+            ${this.aria.label}
+        </span>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/spinner.scss

@@ -37,35 +37,32 @@
 
     @include spinner-base-colors('--dt-color-content-brand');
 
-    &[variant='brand'] {
+    &.c-spinner--medium,
+    &.c-spinner--brand {
         /* Same as default styles */
     }
 
-    &[variant='secondary'] {
+    &.c-spinner--secondary {
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
-    &[variant='inverse'] {
+    &.c-spinner--inverse {
         @include spinner-base-colors('--dt-color-content-inverse');
     }
 
-    &[size='xsmall'] {
+    &.c-spinner--xsmall {
         --spinner-size: 16px;
     }
 
-    &[size='small'] {
+    &.c-spinner--small {
         --spinner-size: 20px;
     }
 
-    &[size='medium'] {
-        /* Same as default styles */
-    }
-
-    &[size='large'] {
+    &.c-spinner--large {
         --spinner-size: 32px;
     }
 
-    &[size='xlarge'] {
+    &.c-spinner--xlarge {
         --spinner-size: 48px;
     }
 }