@justeattakeaway/pie-card
Advanced tools
Comparing version 0.19.4 to 0.19.5
@@ -34,2 +34,10 @@ { | ||
"name": "paddingValues" | ||
}, | ||
{ | ||
"kind": "variable", | ||
"name": "defaultProps", | ||
"type": { | ||
"text": "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" | ||
@@ -196,3 +202,2 @@ }, | ||
}, | ||
"default": "'button'", | ||
"fieldName": "tag" | ||
@@ -205,3 +210,2 @@ }, | ||
}, | ||
"default": "'default'", | ||
"fieldName": "variant" | ||
@@ -232,6 +236,2 @@ }, | ||
"name": "disabled", | ||
"type": { | ||
"text": "boolean" | ||
}, | ||
"default": "false", | ||
"fieldName": "disabled" | ||
@@ -242,3 +242,3 @@ }, | ||
"type": { | ||
"text": "CardProps['aria']" | ||
"text": "CardProps['aria'] | undefined" | ||
}, | ||
@@ -249,6 +249,2 @@ "fieldName": "aria" | ||
"name": "isDraggable", | ||
"type": { | ||
"text": "boolean" | ||
}, | ||
"default": "false", | ||
"fieldName": "isDraggable" | ||
@@ -255,0 +251,0 @@ }, |
@@ -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: 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']; |
@@ -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 | ||
}; |
@@ -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: 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']; |
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 | ||
}; |
{ | ||
"name": "@justeattakeaway/pie-card", | ||
"version": "0.19.4", | ||
"version": "0.19.5", | ||
"description": "PIE Design System Card built using Web Components", | ||
@@ -44,3 +44,3 @@ "type": "module", | ||
"dependencies": { | ||
"@justeattakeaway/pie-webc-core": "0.22.0" | ||
"@justeattakeaway/pie-webc-core": "0.23.0" | ||
}, | ||
@@ -47,0 +47,0 @@ "volta": { |
@@ -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: DefaultProps = { | ||
tag: 'button', | ||
variant: 'default', | ||
disabled: false, | ||
isDraggable: false, | ||
}; |
@@ -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 }) |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
35280
837
+ Added@justeattakeaway/pie-webc-core@0.23.0(transitive)
- Removed@justeattakeaway/pie-webc-core@0.22.0(transitive)