@justeattakeaway/pie-card - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240501131344 to 0.0.0-snapshot-release-20240516144918

custom-elements.json

@@ -34,2 +34,10 @@ {
           "name": "paddingValues"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "Readonly<DefaultProps>"
+          },
+          "default": "{\n    tag: 'button',\n    variant: 'default',\n    disabled: false,\n    isDraggable: false,\n}"
         }
@@ -61,2 +69,10 @@ ],
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
@@ -81,3 +97,2 @@ ]
               "privacy": "public",
-              "default": "'button'",
               "attribute": "tag"
@@ -92,3 +107,2 @@ },
               "privacy": "public",
-              "default": "'default'",
               "attribute": "variant"
@@ -129,7 +143,3 @@ },
               "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "disabled"
@@ -141,3 +151,3 @@ },
               "type": {
-                "text": "CardProps['aria']"
+                "text": "CardProps['aria'] | undefined"
               },
@@ -150,7 +160,3 @@ "privacy": "public",
               "name": "isDraggable",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isDraggable"
@@ -187,3 +193,3 @@ },
               },
-              "description": "Generates padding for the component based on `padding` values passed\r\nby the consumer.\r\n\r\n\r\nExample: 'a' or 'a, b'\r\nSingle values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right"
+              "description": "Generates padding for the component based on `padding` values passed\nby the consumer.\n\n\nExample: 'a' or 'a, b'\nSingle values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right"
             }
@@ -197,3 +203,2 @@ ],
               },
-              "default": "'button'",
               "fieldName": "tag"
@@ -206,3 +211,2 @@ },
               },
-              "default": "'default'",
               "fieldName": "variant"
@@ -233,6 +237,2 @@ },
               "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "disabled"
@@ -243,3 +243,3 @@ },
               "type": {
-                "text": "CardProps['aria']"
+                "text": "CardProps['aria'] | undefined"
               },
@@ -250,6 +250,2 @@ "fieldName": "aria"
               "name": "isDraggable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isDraggable"
@@ -256,0 +252,0 @@ },

dist/index.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -50,2 +51,6 @@ import type { LitElement } from 'lit';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
+
+export declare const defaultProps: Readonly<DefaultProps>;
+
 declare type PaddingValue = typeof spacingTokens[number];
@@ -65,3 +70,3 @@
     disabled: boolean;
-    aria: CardProps['aria'];
+    aria?: CardProps['aria'];
     isDraggable: boolean;
@@ -68,0 +73,0 @@ padding?: CardProps['padding'];

dist/index.js

@@ -1,16 +0,21 @@
-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 { unsafeCSS as p, LitElement as h, html as f, nothing as v } from "lit";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import { property as d } from "lit/decorators.js";
-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}*,*: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[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;
+import { validPropertyValues as g, defineCustomElement as y } from "@justeattakeaway/pie-webc-core";
+const $ = `.c-card[isdraggable]{cursor:grab}.c-card[isdraggable]: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[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}
+`, S = ["default", "outline", "inverse", "outline-inverse"], k = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], x = u.flatMap((i) => [i, ...u.map((e) => `${i},${e}`)]), l = {
+  tag: "button",
+  variant: "default",
+  disabled: !1,
+  isDraggable: !1
 };
-const v = "pie-card";
-class t extends p {
+var D = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, e, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? C(e, a) : e, n = i.length - 1, s; n >= 0; n--)
+    (s = i[n]) && (r = (o ? s(e, a, r) : s(r)) || r);
+  return o && r && D(e, a, r), r;
+};
+const b = "pie-card";
+class t extends h {
   constructor() {
-    super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
+    super(...arguments), this.tag = l.tag, this.variant = l.variant, this.disabled = l.disabled, this.isDraggable = l.isDraggable;
   }
@@ -24,4 +29,4 @@ /**
     var a;
-    const o = this.generatePaddingCSS();
-    return g`
+    const e = this.generatePaddingCSS();
+    return f`
             <a
@@ -35,8 +40,8 @@ class="c-card"
                 href=${this.href || ""}
-                target=${this.target || s}
-                rel=${this.rel || s}
+                target=${this.target || v}
+                rel=${this.rel || v}
                 role="link"
-                aria-label=${((a = this.aria) == null ? void 0 : a.label) || s}
+                aria-label=${((a = this.aria) == null ? void 0 : a.label) || v}
                 aria-disabled=${this.disabled ? "true" : "false"}
-                style=${h(o)}>
+                style=${m(e)}>
                     <slot></slot>
@@ -57,30 +62,30 @@ </div>
   generatePaddingCSS() {
-    const { padding: o } = this;
+    const { padding: e } = this;
     let a = "";
-    if (!o)
+    if (!e)
       return "";
-    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}` : "";
+    const o = e.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
+    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}` : "";
   }
   render() {
     const {
-      variant: o,
+      variant: e,
       disabled: a,
-      tag: e,
+      tag: o,
       aria: r,
-      isDraggable: l
-    } = this, n = this.generatePaddingCSS();
-    return e === "a" ? this.renderAnchor() : g`
+      isDraggable: n
+    } = this, s = this.generatePaddingCSS();
+    return o === "a" ? this.renderAnchor() : f`
                 <div
                     class="c-card"
                     data-test-id="pie-card"
-                    tag=${e || "button"}
-                    ?isDraggable="${l}"
-                    variant=${o || "default"}
+                    tag=${o || "button"}
+                    ?isDraggable="${n}"
+                    variant=${e || "default"}
                     ?disabled=${a}
                     role="button"
                     tabindex="0"
-                    aria-label=${(r == null ? void 0 : r.label) || s}
+                    aria-label=${(r == null ? void 0 : r.label) || v}
                     aria-disabled=${a ? "true" : "false"}
-                    style=${n || ""}>
+                    style=${s || ""}>
                         <slot></slot>
@@ -91,10 +96,10 @@ </div>
 }
-t.styles = f(y);
+t.styles = p($);
 c([
   d(),
-  b(v, S, "button")
+  g(b, k, l.tag)
 ], t.prototype, "tag", 2);
 c([
   d(),
-  b(v, $, "default")
+  g(b, S, l.variant)
 ], t.prototype, "variant", 2);
@@ -121,10 +126,11 @@ c([
   d({ type: String }),
-  b(v, k, void 0)
+  g(b, x, void 0)
 ], t.prototype, "padding", 2);
-m(v, t);
+y(b, t);
 export {
   t as PieCard,
-  k as paddingValues,
-  S as tags,
-  $ as variants
+  l as defaultProps,
+  x as paddingValues,
+  k as tags,
+  S as variants
 };

dist/react.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -51,2 +52,6 @@ import type { LitElement } from 'lit';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
+
+export declare const defaultProps: Readonly<DefaultProps>;
+
 declare type PaddingValue = typeof spacingTokens[number];
@@ -68,3 +73,3 @@
     disabled: boolean;
-    aria: CardProps['aria'];
+    aria?: CardProps['aria'];
     isDraggable: boolean;
@@ -71,0 +76,0 @@ padding?: CardProps['padding'];

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 P, tags as f, variants as l } from "./index.js";
+import { defaultProps as P, paddingValues as f, tags as l, variants as g } from "./index.js";
 import "lit";
@@ -18,5 +18,6 @@ import "lit/directives/if-defined.js";
   n as PieCard,
-  P as paddingValues,
-  f as tags,
-  l as variants
+  P as defaultProps,
+  f as paddingValues,
+  l as tags,
+  g as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-card",
-  "version": "0.0.0-snapshot-release-20240501131344",
+  "version": "0.0.0-snapshot-release-20240516144918",
   "description": "PIE Design System Card built using Web Components",
@@ -44,3 +44,3 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240501131344"
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240516144918"
   },
@@ -47,0 +47,0 @@ "volta": {

src/defs.ts

@@ -0,1 +1,3 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const variants = ['default', 'outline', 'inverse', 'outline-inverse'] as const;
@@ -61,1 +63,10 @@ export const tags = ['a', 'button'] as const;
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<CardProps, 'tag' | 'variant' | 'disabled' | 'isDraggable'>;
+
+export const defaultProps: Readonly<DefaultProps> = {
+    tag: 'button',
+    variant: 'default',
+    disabled: false,
+    isDraggable: false,
+};

src/index.ts

@@ -12,2 +12,3 @@ import {
     CardProps,
+    defaultProps,
     paddingValues,
@@ -26,8 +27,8 @@ } from './defs';
     @property()
-    @validPropertyValues(componentSelector, tags, 'button')
-    public tag: CardProps['tag'] = 'button';
+    @validPropertyValues(componentSelector, tags, defaultProps.tag)
+    public tag: CardProps['tag'] = defaultProps.tag;
 
     @property()
-    @validPropertyValues(componentSelector, variants, 'default')
-    public variant: CardProps['variant'] = 'default';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: CardProps['variant'] = defaultProps.variant;
 
@@ -44,9 +45,9 @@ @property({ type: String, reflect: true })
     @property({ type: Boolean })
-    public disabled = false;
+    public disabled = defaultProps.disabled;
 
     @property({ type: Object })
-    public aria: CardProps['aria'];
+    public aria?: CardProps['aria'];
 
     @property({ type: Boolean })
-    public isDraggable = false;
+    public isDraggable = defaultProps.isDraggable;
 
@@ -53,0 +54,0 @@ @property({ type: String })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35382

increased by3.02%

Lines of code

837

increased by2.2%

Dependency changes

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

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

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