Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@justeattakeaway/pie-card

Package Overview
Dependencies
Maintainers
13
Versions
68
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@justeattakeaway/pie-card - npm Package Compare versions

Comparing version 0.19.4 to 0.19.5

40

custom-elements.json

@@ -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 })

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc