@justeattakeaway/pie-card - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240111110632 to 0.0.0-snapshot-release-20240209112948

dist/index.js

@@ -1,10 +0,11 @@
-import { unsafeCSS as f, LitElement as p, html as g, nothing as i } from "lit";
+import { unsafeCSS as f, LitElement as p, html as g, nothing as s } from "lit";
+import { ifDefined as h } from "lit/directives/if-defined.js";
 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;
+import { validPropertyValues as b, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
+const y = `.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;-webkit-user-select:none;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}
+`, $ = ["default", "outline", "inverse", "outline-inverse"], S = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], k = u.flatMap((i) => [i, ...u.map((o) => `${i},${o}`)]);
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, o, a, e) => {
+  for (var r = e > 1 ? void 0 : e ? C(o, a) : o, l = i.length - 1, n; l >= 0; l--)
+    (n = i[l]) && (r = (e ? n(o, a, r) : n(r)) || r);
+  return e && r && x(o, a, r), r;
 };
@@ -32,9 +33,9 @@ const v = "pie-card";
                 ?disabled=${this.disabled}
-                href=${this.href || i}
-                target=${this.target || i}
-                rel=${this.rel || i}
+                href=${this.href || ""}
+                target=${this.target || s}
+                rel=${this.rel || s}
                 role="link"
-                aria-label=${((a = this.aria) == null ? void 0 : a.label) || i}
+                aria-label=${((a = this.aria) == null ? void 0 : a.label) || s}
                 aria-disabled=${this.disabled ? "true" : "false"}
-                style=${o || i}>
+                style=${h(o)}>
                     <slot></slot>
@@ -68,4 +69,4 @@ </div>
       aria: r,
-      isDraggable: n
-    } = this, s = this.generatePaddingCSS();
+      isDraggable: l
+    } = this, n = this.generatePaddingCSS();
     return e === "a" ? this.renderAnchor() : g`
@@ -76,3 +77,3 @@ <div
                     tag=${e || "button"}
-                    ?isDraggable="${n}"
+                    ?isDraggable="${l}"
                     variant=${o || "default"}
@@ -82,5 +83,5 @@ ?disabled=${a}
                     tabindex="0"
-                    aria-label=${(r == null ? void 0 : r.label) || i}
+                    aria-label=${(r == null ? void 0 : r.label) || s}
                     aria-disabled=${a ? "true" : "false"}
-                    style=${s || i}>
+                    style=${n || ""}>
                         <slot></slot>
@@ -91,10 +92,10 @@ </div>
 }
-t.styles = f(m);
+t.styles = f(y);
 c([
   d(),
-  b(v, $, "button")
+  b(v, S, "button")
 ], t.prototype, "tag", 2);
 c([
   d(),
-  b(v, y, "default")
+  b(v, $, "default")
 ], t.prototype, "variant", 2);
@@ -121,10 +122,10 @@ c([
   d({ type: String }),
-  b(v, S, void 0)
+  b(v, k, void 0)
 ], t.prototype, "padding", 2);
-h(v, t);
+m(v, t);
 export {
   t as PieCard,
-  S as paddingValues,
-  $ as tags,
-  y as variants
+  k as paddingValues,
+  S as tags,
+  $ as variants
 };

dist/react.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 P, variants as f } from "./index.js";
+import { paddingValues as P, tags as f, variants as l } from "./index.js";
 import "lit";
+import "lit/directives/if-defined.js";
 import "lit/decorators.js";
@@ -14,8 +15,8 @@ import "@justeattakeaway/pie-webc-core";
   events: {}
-}), d = t;
+}), n = t;
 export {
-  d as PieCard,
-  C as paddingValues,
-  P as tags,
-  f as variants
+  n as PieCard,
+  P as paddingValues,
+  f as tags,
+  l as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.0.0-snapshot-release-20240111110632",
+  "version": "0.0.0-snapshot-release-20240209112948",
   "description": "PIE Design System Card built using Web Components",
@@ -35,8 +35,8 @@ "type": "module",
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.9.0",
-    "@justeattakeaway/pie-wrapper-react": "0.0.0-snapshot-release-20240111110632",
+    "@justeattakeaway/pie-components-config": "0.11.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.16.0"
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240209112948"
   },
@@ -43,0 +43,0 @@ "volta": {

src/index.ts

 import {
     html, LitElement, unsafeCSS, nothing, TemplateResult,
 } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
@@ -69,3 +70,3 @@ import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
                 ?disabled=${this.disabled}
-                href=${this.href || nothing}
+                href=${this.href || ''}
                 target=${this.target || nothing}
@@ -76,3 +77,3 @@ rel=${this.rel || nothing}
                 aria-disabled=${this.disabled ? 'true' : 'false'}
-                style=${paddingCSS || nothing}>
+                style=${ifDefined(paddingCSS)}>
                     <slot></slot>
@@ -147,3 +148,3 @@ </div>
                     aria-disabled=${disabled ? 'true' : 'false'}
-                    style=${paddingCSS || nothing}>
+                    style=${paddingCSS || ''}>
                         <slot></slot>
@@ -150,0 +151,0 @@ </div>

src/react.ts

@@ -18,4 +18,3 @@ import * as React from 'react';
 
-
-
-export const PieCard = PieCardReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CardProps> & React.RefAttributes<PieCardLit> & ReactBaseType>;
+export const PieCard = PieCardReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CardProps>
+    & React.RefAttributes<PieCardLit> & ReactBaseType>;

No alert changes

Improved metrics

Total package byte prevSize

34283

increased by0.52%

Lines of code

819

increased by0.49%

Dependency changes

• + Added@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240209112948(transitive)

• + Addedlit@3.1.1(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.16.0(transitive)

• - Removedlit@3.1.0(transitive)

• Updated@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240209112948