@justeattakeaway/pie-card - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240927094312 to 0.0.0-snapshot-release-20240930150519

custom-elements.json

@@ -176,2 +176,15 @@ {
               "kind": "method",
+              "name": "onClickHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
               "name": "renderAnchor",
@@ -178,0 +191,0 @@ "privacy": "private",

dist/index.d.ts

@@ -74,2 +74,3 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     private assignedElements?;
+    private onClickHandler;
     /**
@@ -76,0 +77,0 @@ * Renders the card as an anchor element.

dist/index.js

@@ -1,7 +0,7 @@
-import { LitElement as y, html as u, nothing as v, unsafeCSS as S } from "lit";
+import { LitElement as S, html as u, nothing as g, unsafeCSS as $ } from "lit";
 import { classMap as f } from "lit/directives/class-map.js";
-import { ifDefined as $ } from "lit/directives/if-defined.js";
-import { property as d, queryAssignedElements as x } from "lit/decorators.js";
-import { validPropertyValues as p, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
-const E = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.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;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.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}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--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.c-card--default:active:not(.c-card--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.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--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.c-card--outline:active:not(.c-card--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.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01-inverse)}", O = ["default", "outline", "inverse", "outline-inverse"], I = ["a", "button"], m = ["a", "b", "c", "d", "e", "f", "g"], k = m.flatMap((l) => [l, ...m.map((r) => `${l},${r}`)]), i = {
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { property as d, queryAssignedElements as C } from "lit/decorators.js";
+import { validPropertyValues as b, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
+const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.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;-webkit-user-select:none;user-select:none;outline:none;text-decoration:none}.c-card.c-card--disabled{--card-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.c-card--disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.c-card--disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(.c-card--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.c-card--default:active:not(.c-card--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.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(.c-card--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.c-card--outline:active:not(.c-card--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.c-card--inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-dark-card)}.c-card.c-card--inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--outline-inverse{--card-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(.c-card--disabled){--hover-modifier: var(--dt-color-hover-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(.c-card--disabled){--active-modifier: var(--dt-color-active-01);--card-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}.c-card.c-card--inverse.c-card--disabled,.c-card.c-card--outline-inverse.c-card--disabled{--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}", E = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], y = ["a", "b", "c", "d", "e", "f", "g"], D = y.flatMap((v) => [v, ...y.map((r) => `${v},${r}`)]), s = {
   disabled: !1,
@@ -12,11 +12,14 @@ variant: "default",
 };
-var A = Object.defineProperty, c = (l, r, a, o) => {
-  for (var e = void 0, n = l.length - 1, s; n >= 0; n--)
-    (s = l[n]) && (e = s(r, a, e) || e);
-  return e && A(r, a, e), e;
+var I = Object.defineProperty, c = (v, r, a, o) => {
+  for (var e = void 0, i = v.length - 1, l; i >= 0; i--)
+    (l = v[i]) && (e = l(r, a, e) || e);
+  return e && I(r, a, e), e;
 };
-const g = "pie-card", b = class b extends y {
+const p = "pie-card", h = class h extends S {
   constructor() {
-    super(...arguments), this.tag = i.tag, this.variant = i.variant, this.disabled = i.disabled, this.isDraggable = i.isDraggable;
+    super(...arguments), this.tag = s.tag, this.variant = s.variant, this.disabled = s.disabled, this.isDraggable = s.isDraggable;
   }
+  onClickHandler(r) {
+    this.disabled && (r.preventDefault(), r.stopPropagation());
+  }
   /**
@@ -28,4 +31,9 @@ * Renders the card as an anchor element.
   renderAnchor(r) {
-    var o;
-    const a = this.generatePaddingCSS();
+    const a = this.generatePaddingCSS(), {
+      href: o,
+      rel: e,
+      target: i,
+      disabled: l,
+      aria: n
+    } = this;
     return u`
@@ -35,12 +43,10 @@ <a
                 data-test-id="pie-card"
-                ?disabled=${this.disabled}
-                href=${this.href || ""}
-                target=${this.target || v}
-                rel=${this.rel || v}
+                href=${m(o && !l ? o : void 0)}
+                target=${i || g}
+                rel=${e || g}
                 role="link"
-                aria-label=${((o = this.aria) == null ? void 0 : o.label) || v}
-                aria-disabled=${this.disabled ? "true" : "false"}
-                style=${$(a)}>
-                    <slot></slot>
-                </div>
+                aria-label=${(n == null ? void 0 : n.label) || g}
+                aria-disabled=${l ? "true" : "false"}
+                style=${m(a)}>
+                    <slot  @slotchange=${this.handleSlotChange}></slot>
             </a>`;
@@ -112,18 +118,19 @@ }
       aria: e,
-      isDraggable: n
-    } = this, s = this.generatePaddingCSS(), h = {
+      isDraggable: i
+    } = this, l = this.generatePaddingCSS(), n = {
       "c-card": !0,
       [`c-card--${r}`]: !0,
-      "c-card--draggable": n,
+      "c-card--draggable": i,
       "c-card--disabled": a
     };
-    return o === "a" ? this.renderAnchor(h) : u`
+    return o === "a" ? this.renderAnchor(n) : u`
                 <div
-                    class="${f(h)}"
+                    class="${f(n)}"
                     data-test-id="pie-card"
                     role="button"
-                    tabindex="0"
-                    aria-label=${(e == null ? void 0 : e.label) || v}
+                    tabindex=${a ? "-1" : "0"}
+                    aria-label=${(e == null ? void 0 : e.label) || g}
                     aria-disabled=${a ? "true" : "false"}
-                    style=${s || ""}>
+                    style=${l || ""}
+                    @click=${this.onClickHandler}>
                         <slot @slotchange=${this.handleSlotChange}></slot>
@@ -134,11 +141,11 @@ </div>
 };
-b.styles = S(E);
-let t = b;
+h.styles = $(k);
+let t = h;
 c([
   d(),
-  p(g, I, i.tag)
+  b(p, O, s.tag)
 ], t.prototype, "tag");
 c([
   d(),
-  p(g, O, i.variant)
+  b(p, E, s.variant)
 ], t.prototype, "variant");
@@ -165,14 +172,14 @@ c([
   d({ type: String }),
-  p(g, k, void 0)
+  b(p, D, void 0)
 ], t.prototype, "padding");
 c([
-  x({ flatten: !0 })
+  C({ flatten: !0 })
 ], t.prototype, "assignedElements");
-C(g, t);
+x(p, t);
 export {
   t as PieCard,
-  i as defaultProps,
-  k as paddingValues,
-  I as tags,
-  O as variants
+  s as defaultProps,
+  D as paddingValues,
+  O as tags,
+  E as variants
 };

dist/react.d.ts

@@ -77,2 +77,3 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
     private assignedElements?;
+    private onClickHandler;
     /**
@@ -79,0 +80,0 @@ * Renders the card as an anchor element.

package.json

 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.0.0-snapshot-release-20240927094312",
+  "version": "0.0.0-snapshot-release-20240930150519",
   "description": "PIE Design System Card built using Web Components",
@@ -45,3 +45,3 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240927094312"
+    "@justeattakeaway/pie-webc-core": "0.24.0"
   },
@@ -48,0 +48,0 @@ "volta": {

src/index.ts

@@ -59,2 +59,10 @@ import {
 
+    private onClickHandler (event: Event) {
+        if (this.disabled) {
+            // needed to intercept/prevent click events when the card is disabled.
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
     /**
@@ -67,2 +75,5 @@ * Renders the card as an anchor element.
         const paddingCSS = this.generatePaddingCSS();
+        const {
+            href, rel, target, disabled, aria,
+        } = this;
 
@@ -73,12 +84,10 @@ return html`
                 data-test-id="pie-card"
-                ?disabled=${this.disabled}
-                href=${this.href || ''}
-                target=${this.target || nothing}
-                rel=${this.rel || nothing}
+                href=${ifDefined(href && !disabled ? href : undefined)}
+                target=${target || nothing}
+                rel=${rel || nothing}
                 role="link"
-                aria-label=${this.aria?.label || nothing}
-                aria-disabled=${this.disabled ? 'true' : 'false'}
+                aria-label=${aria?.label || nothing}
+                aria-disabled=${disabled ? 'true' : 'false'}
                 style=${ifDefined(paddingCSS)}>
-                    <slot></slot>
-                </div>
+                    <slot  @slotchange=${this.handleSlotChange}></slot>
             </a>`;
@@ -202,6 +211,7 @@ }
                     role="button"
-                    tabindex="0"
+                    tabindex=${disabled ? '-1' : '0'}
                     aria-label=${aria?.label || nothing}
                     aria-disabled=${disabled ? 'true' : 'false'}
-                    style=${paddingCSS || ''}>
+                    style=${paddingCSS || ''}
+                    @click=${this.onClickHandler}>
                         <slot @slotchange=${this.handleSlotChange}></slot>
@@ -208,0 +218,0 @@ </div>

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42342

increased by2.23%

Lines of code

1060

increased by3.01%

Dependency changes

• + Added@justeattakeaway/pie-webc-core@0.24.0(transitive)

• + Addedlit@3.1.3(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240927094312(transitive)

• - Removedlit@3.2.0(transitive)

• Updated@justeattakeaway/pie-webc-core@0.24.0