@justeattakeaway/pie-card 0.14.0 → 0.14.2-next.0
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 +16 -2
- package/dist/index.d.ts +0 -0
- package/dist/index.js +22 -22
- package/dist/react.d.ts +1 -1
- package/dist/react.js +35 -57
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -41,14 +41,28 @@ For full information on using PIE components as part of an application, check ou
|
|
|
41
41
|
|
|
42
42
|
### Importing the component
|
|
43
43
|
|
|
44
|
+
#### JavaScript
|
|
44
45
|
```js
|
|
45
|
-
//
|
|
46
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
46
47
|
import { PieCard } from '@justeattakeaway/pie-card';
|
|
47
48
|
|
|
48
|
-
//
|
|
49
|
+
// If you don't need to reference the imported object, you can simply
|
|
50
|
+
// import the module which registers the component as a custom element.
|
|
51
|
+
import '@justeattakeaway/pie-card';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
#### React
|
|
55
|
+
```js
|
|
56
|
+
// React
|
|
57
|
+
// For React, you will need to import our React-specific component build
|
|
58
|
+
// which wraps the web component using @lit-labs/react
|
|
49
59
|
import { PieCard } from '@justeattakeaway/pie-card/dist/react';
|
|
50
60
|
```
|
|
51
61
|
|
|
62
|
+
> [!NOTE]
|
|
63
|
+
> When using the React version of the component, please make sure to also
|
|
64
|
+
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
65
|
+
|
|
52
66
|
|
|
53
67
|
## Peer Dependencies
|
|
54
68
|
|
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,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as y from "react";
|
|
2
2
|
import { PieCard as E } from "./index.js";
|
|
3
|
-
import { paddingValues as
|
|
3
|
+
import { paddingValues as k, tags as M, variants as j } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
6
|
/**
|
|
@@ -8,65 +8,43 @@ import "lit/decorators.js";
|
|
|
8
8
|
* Copyright 2018 Google LLC
|
|
9
9
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
})(
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
componentDidUpdate(e) {
|
|
41
|
-
this.t(e);
|
|
42
|
-
}
|
|
43
|
-
render() {
|
|
44
|
-
const { _$Gl: e, ...v } = this.props;
|
|
45
|
-
this.h !== e && (this.u = (i) => {
|
|
46
|
-
e !== null && ((d, g) => {
|
|
47
|
-
typeof d == "function" ? d(g) : d.current = g;
|
|
48
|
-
})(e, i), this.o = i, this.h = e;
|
|
49
|
-
}), this.i = {};
|
|
50
|
-
const y = { ref: this.u };
|
|
51
|
-
for (const [i, d] of Object.entries(v))
|
|
52
|
-
M.has(i) ? y[i === "className" ? "class" : i] = d : a.has(i) || i in t.prototype ? this.i[i] = d : y[i] = d;
|
|
53
|
-
return o(n, y);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
f.displayName = h ?? t.name;
|
|
57
|
-
const N = s.forwardRef((l, e) => o(f, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
|
|
58
|
-
return N.displayName = f.displayName, N;
|
|
59
|
-
}
|
|
60
|
-
const $ = b({
|
|
11
|
+
const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), g = (t, i, o, u, l) => {
|
|
12
|
+
const d = l == null ? void 0 : l[i];
|
|
13
|
+
d === void 0 || o === u ? (t[i] = o, o == null && i in HTMLElement.prototype && t.removeAttribute(i)) : ((c, n, a) => {
|
|
14
|
+
let s = v.get(c);
|
|
15
|
+
s === void 0 && v.set(c, s = /* @__PURE__ */ new Map());
|
|
16
|
+
let r = s.get(n);
|
|
17
|
+
a !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: a }), c.addEventListener(n, r)) : r.handleEvent = a : r !== void 0 && (s.delete(n), c.removeEventListener(n, r));
|
|
18
|
+
})(t, d, o);
|
|
19
|
+
}, C = ({ react: t, tagName: i, elementClass: o, events: u, displayName: l }) => {
|
|
20
|
+
const d = new Set(Object.keys(u ?? {})), c = t.forwardRef((n, a) => {
|
|
21
|
+
const s = t.useRef(null), r = t.useRef(null), m = {}, p = {};
|
|
22
|
+
for (const [e, f] of Object.entries(n))
|
|
23
|
+
N.has(e) ? m[e === "className" ? "class" : e] = f : d.has(e) || e in o.prototype ? p[e] = f : m[e] = f;
|
|
24
|
+
return t.useLayoutEffect(() => {
|
|
25
|
+
if (r.current !== null) {
|
|
26
|
+
for (const e in p)
|
|
27
|
+
g(r.current, e, n[e], s.current ? s.current[e] : void 0, u);
|
|
28
|
+
s.current = n;
|
|
29
|
+
}
|
|
30
|
+
}), t.useLayoutEffect(() => {
|
|
31
|
+
var e;
|
|
32
|
+
(e = r.current) == null || e.removeAttribute("defer-hydration");
|
|
33
|
+
}, []), m.suppressHydrationWarning = !0, t.createElement(i, { ...m, ref: t.useCallback((e) => {
|
|
34
|
+
r.current = e, typeof a == "function" ? a(e) : a !== null && (a.current = e);
|
|
35
|
+
}, [a]) });
|
|
36
|
+
});
|
|
37
|
+
return c.displayName = l ?? o.name, c;
|
|
38
|
+
}, L = C({
|
|
61
39
|
displayName: "PieCard",
|
|
62
40
|
elementClass: E,
|
|
63
|
-
react:
|
|
41
|
+
react: y,
|
|
64
42
|
tagName: "pie-card",
|
|
65
43
|
events: {}
|
|
66
44
|
});
|
|
67
45
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
46
|
+
L as PieCard,
|
|
47
|
+
k as paddingValues,
|
|
48
|
+
M as tags,
|
|
49
|
+
j as variants
|
|
72
50
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.14.0",
|
|
3
|
+
"version": "0.14.2-next.0",
|
|
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-next.0"
|
|
35
35
|
},
|
|
36
36
|
"volta": {
|
|
37
37
|
"extends": "../../../package.json"
|