@justeattakeaway/pie-card 0.14.1 → 0.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/index.d.ts +0 -0
- package/dist/index.js +22 -22
- package/dist/react.d.ts +1 -1
- package/dist/react.js +11 -65
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ import '@justeattakeaway/pie-card';
|
|
|
55
55
|
```js
|
|
56
56
|
// React
|
|
57
57
|
// For React, you will need to import our React-specific component build
|
|
58
|
-
// which wraps the web component using
|
|
58
|
+
// which wraps the web component using @lit/react
|
|
59
59
|
import { PieCard } from '@justeattakeaway/pie-card/dist/react';
|
|
60
60
|
```
|
|
61
61
|
|
package/dist/index.d.ts
CHANGED
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { unsafeCSS as p, LitElement as
|
|
1
|
+
import { unsafeCSS as p, LitElement as h, html as u, nothing as s } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
|
-
const
|
|
3
|
+
const g = (t, r, a) => function(e, c) {
|
|
4
4
|
const i = `#${c}`;
|
|
5
5
|
Object.defineProperty(e, c, {
|
|
6
6
|
get() {
|
|
7
7
|
return this[i];
|
|
8
8
|
},
|
|
9
9
|
set(b) {
|
|
10
|
-
const h = this[i];
|
|
11
10
|
r.includes(b) ? this[i] = b : (console.error(
|
|
12
11
|
`<${t}> Invalid value "${b}" provided for property "${c}".`,
|
|
13
12
|
`Must be one of: ${r.join(" | ")}.`,
|
|
14
13
|
`Falling back to default value: "${a}"`
|
|
15
|
-
), this[i] = a)
|
|
16
|
-
}
|
|
14
|
+
), this[i] = a);
|
|
15
|
+
},
|
|
16
|
+
configurable: !0
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function m(t, r) {
|
|
20
20
|
customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, r);
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
`,
|
|
24
|
-
var
|
|
25
|
-
for (var e = o > 1 ? void 0 : o ?
|
|
22
|
+
const $ = `.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}
|
|
23
|
+
`, y = ["default", "outline", "inverse", "outline-inverse"], S = ["a", "button"], f = ["a", "b", "c", "d", "e", "f", "g"], k = f.flatMap((t) => [t, ...f.map((r) => `${t},${r}`)]);
|
|
24
|
+
var P = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, r, a, o) => {
|
|
25
|
+
for (var e = o > 1 ? void 0 : o ? x(r, a) : r, c = t.length - 1, i; c >= 0; c--)
|
|
26
26
|
(i = t[c]) && (e = (o ? i(r, a, e) : i(e)) || e);
|
|
27
|
-
return o && e &&
|
|
27
|
+
return o && e && P(r, a, e), e;
|
|
28
28
|
};
|
|
29
29
|
const v = "pie-card";
|
|
30
|
-
class d extends
|
|
30
|
+
class d extends h {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
|
|
33
33
|
}
|
|
@@ -39,7 +39,7 @@ class d extends m {
|
|
|
39
39
|
renderAnchor() {
|
|
40
40
|
var a;
|
|
41
41
|
const r = this.generatePaddingCSS();
|
|
42
|
-
return
|
|
42
|
+
return u`
|
|
43
43
|
<a
|
|
44
44
|
class="c-card"
|
|
45
45
|
data-test-id="pie-card"
|
|
@@ -84,7 +84,7 @@ class d extends m {
|
|
|
84
84
|
aria: e,
|
|
85
85
|
isDraggable: c
|
|
86
86
|
} = this, i = this.generatePaddingCSS();
|
|
87
|
-
return o === "a" ? this.renderAnchor() :
|
|
87
|
+
return o === "a" ? this.renderAnchor() : u`
|
|
88
88
|
<div
|
|
89
89
|
class="c-card"
|
|
90
90
|
data-test-id="pie-card"
|
|
@@ -102,14 +102,14 @@ class d extends m {
|
|
|
102
102
|
</div>`;
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
d.styles = p(
|
|
105
|
+
d.styles = p($);
|
|
106
106
|
l([
|
|
107
107
|
n(),
|
|
108
|
-
|
|
108
|
+
g(v, S, "button")
|
|
109
109
|
], d.prototype, "tag", 2);
|
|
110
110
|
l([
|
|
111
111
|
n(),
|
|
112
|
-
|
|
112
|
+
g(v, y, "default")
|
|
113
113
|
], d.prototype, "variant", 2);
|
|
114
114
|
l([
|
|
115
115
|
n({ type: String, reflect: !0 })
|
|
@@ -131,12 +131,12 @@ l([
|
|
|
131
131
|
], d.prototype, "isDraggable", 2);
|
|
132
132
|
l([
|
|
133
133
|
n({ type: String }),
|
|
134
|
-
|
|
134
|
+
g(v, k, void 0)
|
|
135
135
|
], d.prototype, "padding", 2);
|
|
136
|
-
|
|
136
|
+
m(v, d);
|
|
137
137
|
export {
|
|
138
138
|
d as PieCard,
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
k as paddingValues,
|
|
140
|
+
S as tags,
|
|
141
|
+
y as variants
|
|
142
142
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare type AriaProps = {
|
package/dist/react.js
CHANGED
|
@@ -1,73 +1,19 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import * as a from "react";
|
|
2
|
+
import { createComponent as e } from "@lit/react";
|
|
3
|
+
import { PieCard as r } from "./index.js";
|
|
4
|
+
import { paddingValues as n, tags as C, variants as c } from "./index.js";
|
|
4
5
|
import "lit";
|
|
5
6
|
import "lit/decorators.js";
|
|
6
|
-
|
|
7
|
-
* @license
|
|
8
|
-
* Copyright 2018 Google LLC
|
|
9
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
|
-
*/
|
|
11
|
-
const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), b = (t, i, c, p, m) => {
|
|
12
|
-
const o = m == null ? void 0 : m[i];
|
|
13
|
-
o === void 0 || c === p ? c == null && i in HTMLElement.prototype ? t.removeAttribute(i) : t[i] = c : ((a, s, h) => {
|
|
14
|
-
let r = g.get(a);
|
|
15
|
-
r === void 0 && g.set(a, r = /* @__PURE__ */ new Map());
|
|
16
|
-
let l = r.get(s);
|
|
17
|
-
h !== void 0 ? l === void 0 ? (r.set(s, l = { handleEvent: h }), a.addEventListener(s, l)) : l.handleEvent = h : l !== void 0 && (r.delete(s), a.removeEventListener(s, l));
|
|
18
|
-
})(t, o, c);
|
|
19
|
-
}, M = (t, i) => {
|
|
20
|
-
typeof t == "function" ? t(i) : t.current = i;
|
|
21
|
-
};
|
|
22
|
-
function P(t = window.React, i, c, p, m) {
|
|
23
|
-
let o, a, s;
|
|
24
|
-
if (i === void 0) {
|
|
25
|
-
const d = t;
|
|
26
|
-
({ tagName: a, elementClass: s, events: p, displayName: m } = d), o = d.react;
|
|
27
|
-
} else
|
|
28
|
-
o = t, s = c, a = i;
|
|
29
|
-
const h = o.Component, r = o.createElement, l = new Set(Object.keys(p ?? {}));
|
|
30
|
-
class f extends h {
|
|
31
|
-
constructor() {
|
|
32
|
-
super(...arguments), this.o = null;
|
|
33
|
-
}
|
|
34
|
-
t(e) {
|
|
35
|
-
if (this.o !== null)
|
|
36
|
-
for (const u in this.i)
|
|
37
|
-
b(this.o, u, this.props[u], e ? e[u] : void 0, p);
|
|
38
|
-
}
|
|
39
|
-
componentDidMount() {
|
|
40
|
-
var e;
|
|
41
|
-
this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
|
|
42
|
-
}
|
|
43
|
-
componentDidUpdate(e) {
|
|
44
|
-
this.t(e);
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
const { _$Gl: e, ...u } = this.props;
|
|
48
|
-
this.h !== e && (this.u = (n) => {
|
|
49
|
-
e !== null && M(e, n), this.o = n, this.h = e;
|
|
50
|
-
}), this.i = {};
|
|
51
|
-
const v = { ref: this.u };
|
|
52
|
-
for (const [n, y] of Object.entries(u))
|
|
53
|
-
E.has(n) ? v[n === "className" ? "class" : n] = y : l.has(n) || n in s.prototype ? this.i[n] = y : v[n] = y;
|
|
54
|
-
return v.suppressHydrationWarning = !0, r(a, v);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
f.displayName = m ?? s.name;
|
|
58
|
-
const N = o.forwardRef((d, e) => r(f, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
|
|
59
|
-
return N.displayName = f.displayName, N;
|
|
60
|
-
}
|
|
61
|
-
const $ = P({
|
|
7
|
+
const p = e({
|
|
62
8
|
displayName: "PieCard",
|
|
63
|
-
elementClass:
|
|
64
|
-
react:
|
|
9
|
+
elementClass: r,
|
|
10
|
+
react: a,
|
|
65
11
|
tagName: "pie-card",
|
|
66
12
|
events: {}
|
|
67
13
|
});
|
|
68
14
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
15
|
+
p as PieCard,
|
|
16
|
+
n as paddingValues,
|
|
17
|
+
C as tags,
|
|
18
|
+
c as variants
|
|
73
19
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
31
|
+
"@justeattakeaway/pie-components-config": "0.6.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
34
|
+
"@justeattakeaway/pie-webc-core": "0.12.0"
|
|
35
35
|
},
|
|
36
36
|
"volta": {
|
|
37
37
|
"extends": "../../../package.json"
|