@justeattakeaway/pie-card 0.14.2-next.0 → 0.14.3

package/README.md

@@ -55,7 +55,7 @@ import '@justeattakeaway/pie-card';
 ```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 { PieCard } from '@justeattakeaway/pie-card/dist/react';
 ```
 

package/dist/index.js

@@ -1,33 +1,15 @@
-import { unsafeCSS as p, LitElement as h, html as u, nothing as s } from "lit";
-import { property as n } from "lit/decorators.js";
-const g = (t, r, a) => function(e, c) {
-  const i = `#${c}`;
-  Object.defineProperty(e, c, {
-    get() {
-      return this[i];
-    },
-    set(b) {
-      r.includes(b) ? this[i] = b : (console.error(
-        `<${t}> Invalid value "${b}" provided for property "${c}".`,
-        `Must be one of: ${r.join(" | ")}.`,
-        `Falling back to default value: "${a}"`
-      ), this[i] = a);
-    },
-    configurable: !0
-  });
-};
-function m(t, r) {
-  customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, r);
-}
-const $ = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:before,*:after{box-sizing:border-box}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
-`, y = ["default", "outline", "inverse", "outline-inverse"], S = ["a", "button"], f = ["a", "b", "c", "d", "e", "f", "g"], k = f.flatMap((t) => [t, ...f.map((r) => `${t},${r}`)]);
-var P = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, r, a, o) => {
-  for (var e = o > 1 ? void 0 : o ? x(r, a) : r, c = t.length - 1, i; c >= 0; c--)
-    (i = t[c]) && (e = (o ? i(r, a, e) : i(e)) || e);
-  return o && e && P(r, a, e), e;
+import { unsafeCSS as f, LitElement as p, html as g, nothing as i } from "lit";
+import { property as d } from "lit/decorators.js";
+import { validPropertyValues as b, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
+const m = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]:active{cursor:grabbing}*,*:before,*:after{box-sizing:border-box}.c-card{--card-bg-color: var(--dt-color-container-default);--card-color: var(--dt-color-content-default);--card-radius: var(--dt-radius-rounded-c);--card-border-color: transparent;display:block;position:relative;color:var(--card-color);background-color:var(--card-bg-color);border:1px solid var(--card-border-color);border-radius:var(--card-radius);cursor:pointer;user-select:none;outline:none;text-decoration:none}.c-card[variant=default]{box-shadow:var(--dt-elevation-card)}.c-card[variant=default]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=default]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=outline]{border-color:var(--dt-color-border-strong)}.c-card[variant=outline]:hover:not([disabled]){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)))}.c-card[variant=outline]:active:not([disabled]){--active-modifier: calc(-1 * var(--dt-color-active-01));--card-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)))}.c-card[variant=inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card[variant=inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[variant=outline-inverse]{--card-bg-color: var(--dt-color-container-dark);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card[variant=outline-inverse]:hover:not([disabled]){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--hover-modifier)))}.c-card[variant=outline-inverse]:active:not([disabled]){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-dark-h), var(--dt-color-container-dark-s), calc(var(--dt-color-container-dark-l) + var(--active-modifier)))}.c-card[disabled]{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card[disabled] ::slotted(*){color:var(--dt-color-content-disabled)}.c-card[disabled] img{opacity:.5}.c-card[disabled][variant=inverse],.c-card[disabled][variant=outline-inverse]{--card-bg-color: var(--dt-color-disabled-01-inverse)}.c-card:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}
+`, y = ["default", "outline", "inverse", "outline-inverse"], $ = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], S = u.flatMap((l) => [l, ...u.map((o) => `${l},${o}`)]);
+var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (l, o, a, e) => {
+  for (var r = e > 1 ? void 0 : e ? x(o, a) : o, n = l.length - 1, s; n >= 0; n--)
+    (s = l[n]) && (r = (e ? s(o, a, r) : s(r)) || r);
+  return e && r && k(o, a, r), r;
 };
 const v = "pie-card";
-class d extends h {
+class t extends p {
   constructor() {
     super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
   }
@@ -38,8 +20,8 @@ class d extends h {
    */
   renderAnchor() {
     var a;
-    const r = this.generatePaddingCSS();
-    return u`
+    const o = this.generatePaddingCSS();
+    return g`
             <a
                 class="c-card"
                 data-test-id="pie-card"
@@ -47,13 +29,13 @@ class d extends h {
                 ?isDraggable="${this.isDraggable}"
                 variant=${this.variant}
                 ?disabled=${this.disabled}
-                href=${this.href || s}
-                target=${this.target || s}
-                rel=${this.rel || s}
+                href=${this.href || i}
+                target=${this.target || i}
+                rel=${this.rel || i}
                 role="link"
-                aria-label=${((a = this.aria) == null ? void 0 : a.label) || s}
+                aria-label=${((a = this.aria) == null ? void 0 : a.label) || i}
                 aria-disabled=${this.disabled ? "true" : "false"}
-                style=${r || s}>
+                style=${o || i}>
                     <slot></slot>
                 </div>
             </a>`;
@@ -69,74 +51,74 @@ class d extends h {
    * @private
    */
   generatePaddingCSS() {
-    const { padding: r } = this;
+    const { padding: o } = this;
     let a = "";
-    if (!r)
+    if (!o)
       return "";
-    const o = r.split(",").map((e) => e.trim()).filter((e) => /^[a-g]$/.test(e));
-    return o.length > 0 && o.length <= 2 && (a += `var(--dt-spacing-${o[0]})`, o.length > 1 && (a += ` var(--dt-spacing-${o[1]})`)), a ? `padding: ${a}` : "";
+    const e = o.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
+    return e.length > 0 && e.length <= 2 && (a += `var(--dt-spacing-${e[0]})`, e.length > 1 && (a += ` var(--dt-spacing-${e[1]})`)), a ? `padding: ${a}` : "";
   }
   render() {
     const {
-      variant: r,
+      variant: o,
       disabled: a,
-      tag: o,
-      aria: e,
-      isDraggable: c
-    } = this, i = this.generatePaddingCSS();
-    return o === "a" ? this.renderAnchor() : u`
+      tag: e,
+      aria: r,
+      isDraggable: n
+    } = this, s = this.generatePaddingCSS();
+    return e === "a" ? this.renderAnchor() : g`
                 <div
                     class="c-card"
                     data-test-id="pie-card"
-                    tag=${o}
-                    ?isDraggable="${c}"
-                    variant=${r}
+                    tag=${e}
+                    ?isDraggable="${n}"
+                    variant=${o}
                     ?disabled=${a}
                     role="button"
                     tabindex="0"
-                    aria-label=${(e == null ? void 0 : e.label) || s}
+                    aria-label=${(r == null ? void 0 : r.label) || i}
                     aria-disabled=${a ? "true" : "false"}
-                    style=${i || s}>
+                    style=${s || i}>
                         <slot></slot>
                     </div>
                 </div>`;
   }
 }
-d.styles = p($);
-l([
-  n(),
-  g(v, S, "button")
-], d.prototype, "tag", 2);
-l([
-  n(),
-  g(v, y, "default")
-], d.prototype, "variant", 2);
-l([
-  n({ type: String, reflect: !0 })
-], d.prototype, "href", 2);
-l([
-  n({ type: String, reflect: !0 })
-], d.prototype, "target", 2);
-l([
-  n({ type: String, reflect: !0 })
-], d.prototype, "rel", 2);
-l([
-  n({ type: Boolean })
-], d.prototype, "disabled", 2);
-l([
-  n({ type: Object })
-], d.prototype, "aria", 2);
-l([
-  n({ type: Boolean })
-], d.prototype, "isDraggable", 2);
-l([
-  n({ type: String }),
-  g(v, k, void 0)
-], d.prototype, "padding", 2);
-m(v, d);
+t.styles = f(m);
+c([
+  d(),
+  b(v, $, "button")
+], t.prototype, "tag", 2);
+c([
+  d(),
+  b(v, y, "default")
+], t.prototype, "variant", 2);
+c([
+  d({ type: String, reflect: !0 })
+], t.prototype, "href", 2);
+c([
+  d({ type: String, reflect: !0 })
+], t.prototype, "target", 2);
+c([
+  d({ type: String, reflect: !0 })
+], t.prototype, "rel", 2);
+c([
+  d({ type: Boolean })
+], t.prototype, "disabled", 2);
+c([
+  d({ type: Object })
+], t.prototype, "aria", 2);
+c([
+  d({ type: Boolean })
+], t.prototype, "isDraggable", 2);
+c([
+  d({ type: String }),
+  b(v, S, void 0)
+], t.prototype, "padding", 2);
+h(v, t);
 export {
-  d as PieCard,
-  k as paddingValues,
-  S as tags,
+  t as PieCard,
+  S as paddingValues,
+  $ as tags,
   y as variants
 };

package/dist/react.js

@@ -1,50 +1,20 @@
-import * as y from "react";
-import { PieCard as E } from "./index.js";
-import { paddingValues as k, tags as M, variants as j } from "./index.js";
+import * as a from "react";
+import { createComponent as e } from "@lit/react";
+import { PieCard as r } from "./index.js";
+import { paddingValues as C, tags 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(), g = (t, i, o, u, l) => {
-  const d = l == null ? void 0 : l[i];
-  d === void 0 || o === u ? (t[i] = o, o == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, n, a) => {
-    let s = v.get(c);
-    s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
-    let r = s.get(n);
-    a !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: a }), c.addEventListener(n, r)) : r.handleEvent = a : r !== void 0 && (s.delete(n), c.removeEventListener(n, r));
-  })(t, d, o);
-}, C = ({ react: t, tagName: i, elementClass: o, events: u, displayName: l }) => {
-  const d = new Set(Object.keys(u ?? {})), c = t.forwardRef((n, a) => {
-    const s = t.useRef(null), r = t.useRef(null), m = {}, p = {};
-    for (const [e, f] of Object.entries(n))
-      N.has(e) ? m[e === "className" ? "class" : e] = f : d.has(e) || e in o.prototype ? p[e] = f : m[e] = f;
-    return t.useLayoutEffect(() => {
-      if (r.current !== null) {
-        for (const e in p)
-          g(r.current, e, n[e], s.current ? s.current[e] : void 0, u);
-        s.current = n;
-      }
-    }), t.useLayoutEffect(() => {
-      var e;
-      (e = r.current) == null || e.removeAttribute("defer-hydration");
-    }, []), m.suppressHydrationWarning = !0, t.createElement(i, { ...m, ref: t.useCallback((e) => {
-      r.current = e, typeof a == "function" ? a(e) : a !== null && (a.current = e);
-    }, [a]) });
-  });
-  return c.displayName = l ?? o.name, c;
-}, L = C({
+import "@justeattakeaway/pie-webc-core";
+const s = e({
   displayName: "PieCard",
-  elementClass: E,
-  react: y,
+  elementClass: r,
+  react: a,
   tagName: "pie-card",
   events: {}
 });
 export {
-  L as PieCard,
-  k as paddingValues,
-  M as tags,
-  j as variants
+  s as PieCard,
+  C as paddingValues,
+  c as tags,
+  f as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.14.2-next.0",
+  "version": "0.14.3",
   "description": "PIE Design System Card built using Web Components",
   "type": "module",
   "main": "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-next.0"
+    "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {
     "extends": "../../../package.json"