@justeattakeaway/pie-card 0.14.2 → 0.15.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 +5 -64
- package/dist/index.js +67 -85
- package/dist/react.js +7 -6
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -8,15 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-card)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
19
|
-
|
|
20
11
|
## pie-card
|
|
21
12
|
|
|
22
13
|
`pie-card` is a Web Component built using the Lit library.
|
|
@@ -36,64 +27,14 @@ $ npm i @justeattakeaway/pie-card
|
|
|
36
27
|
$ yarn add @justeattakeaway/pie-card
|
|
37
28
|
```
|
|
38
29
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
### Importing the component
|
|
43
|
-
|
|
44
|
-
#### JavaScript
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieCard } from '@justeattakeaway/pie-card';
|
|
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/react
|
|
59
|
-
import { PieCard } from '@justeattakeaway/pie-card/dist/react';
|
|
60
|
-
```
|
|
30
|
+
## Documentation
|
|
61
31
|
|
|
62
|
-
|
|
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.
|
|
32
|
+
Visit [Card | PIE Design System](https://pie.design/components/card/overview) to view more information on this component.
|
|
65
33
|
|
|
34
|
+
## Questions
|
|
66
35
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
> [!IMPORTANT]
|
|
70
|
-
> When using `pie-card`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
71
|
-
|
|
72
|
-
## Props
|
|
73
|
-
|
|
74
|
-
| Property | Type | Default | Description |
|
|
75
|
-
|---|---|-------------|------------------------------------------------------------------------------------------------------------------------------|
|
|
76
|
-
| tag | `String` | `button` | What HTML element the card should be such as a or button
|
|
77
|
-
| variant | `string` | `default` | What style variant the card should be such as default, outline, inverse or outline-inverse |
|
|
78
|
-
| disabled | `boolean` | `false` | When true, the card is disabled. |
|
|
79
|
-
| href | `string` | `undefined` | The URL that the card should point to (this will not take effect unless the card is a link). |
|
|
80
|
-
| target | `string` | `undefined` | Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link). |
|
|
81
|
-
| rel | `string` | `undefined` | What the relationship of the linked URL is (this will not take effect unless the card is a link). |
|
|
82
|
-
| aria | `object` | `undefined` | The ARIA labels used for various parts of the card. |
|
|
83
|
-
| isDraggable | `boolean` | `false` | Sets a grab/grabbing cursor when set to true. **Note:** the actual dragging capabilities should be implemented by the consuming application. |
|
|
84
|
-
| padding | `String` | `undefined` | Sets the padding of the card. Can be either a single value or two values separated by commas. Setting a single value adds padding to all sides of the card, whereas setting two values will set the "topBottom, leftRight" padding. e.g `'a'` or `'a, b'` |
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-card` component:
|
|
88
|
-
|
|
89
|
-
```html
|
|
90
|
-
<!-- Native HTML -->
|
|
91
|
-
<pie-card disabled href="/foo/bar" rel="noopener" target="_blank"></pie-card>
|
|
92
|
-
|
|
93
|
-
<!-- JSX -->
|
|
94
|
-
<PieCard disabled href="/foo/bar" rel="noopener" target="_blank"></PieCard>
|
|
95
|
-
```
|
|
36
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
96
37
|
|
|
97
38
|
## Contributing
|
|
98
39
|
|
|
99
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
40
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,15 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
r.includes(b) ? this[i] = b : (console.error(
|
|
11
|
-
`<${t}> Invalid value "${b}" provided for property "${c}".`,
|
|
12
|
-
`Must be one of: ${r.join(" | ")}.`,
|
|
13
|
-
`Falling back to default value: "${a}"`
|
|
14
|
-
), this[i] = a);
|
|
15
|
-
},
|
|
16
|
-
configurable: !0
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
|
-
function m(t, r) {
|
|
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
|
-
}
|
|
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
|
-
(i = t[c]) && (e = (o ? i(r, a, e) : i(e)) || e);
|
|
27
|
-
return o && e && P(r, a, e), e;
|
|
1
|
+
import { unsafeCSS as f, LitElement as p, html as g, nothing as i } from "lit";
|
|
2
|
+
import { property as d } from "lit/decorators.js";
|
|
3
|
+
import { validPropertyValues as b, defineCustomElement as h } from "@justeattakeaway/pie-webc-core";
|
|
4
|
+
const m = `.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}
|
|
5
|
+
`, y = ["default", "outline", "inverse", "outline-inverse"], $ = ["a", "button"], u = ["a", "b", "c", "d", "e", "f", "g"], S = u.flatMap((l) => [l, ...u.map((o) => `${l},${o}`)]);
|
|
6
|
+
var k = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (l, o, a, e) => {
|
|
7
|
+
for (var r = e > 1 ? void 0 : e ? x(o, a) : o, n = l.length - 1, s; n >= 0; n--)
|
|
8
|
+
(s = l[n]) && (r = (e ? s(o, a, r) : s(r)) || r);
|
|
9
|
+
return e && r && k(o, a, r), r;
|
|
28
10
|
};
|
|
29
11
|
const v = "pie-card";
|
|
30
|
-
class
|
|
12
|
+
class t extends p {
|
|
31
13
|
constructor() {
|
|
32
14
|
super(...arguments), this.tag = "button", this.variant = "default", this.disabled = !1, this.isDraggable = !1;
|
|
33
15
|
}
|
|
@@ -38,8 +20,8 @@ class d extends h {
|
|
|
38
20
|
*/
|
|
39
21
|
renderAnchor() {
|
|
40
22
|
var a;
|
|
41
|
-
const
|
|
42
|
-
return
|
|
23
|
+
const o = this.generatePaddingCSS();
|
|
24
|
+
return g`
|
|
43
25
|
<a
|
|
44
26
|
class="c-card"
|
|
45
27
|
data-test-id="pie-card"
|
|
@@ -47,13 +29,13 @@ class d extends h {
|
|
|
47
29
|
?isDraggable="${this.isDraggable}"
|
|
48
30
|
variant=${this.variant}
|
|
49
31
|
?disabled=${this.disabled}
|
|
50
|
-
href=${this.href ||
|
|
51
|
-
target=${this.target ||
|
|
52
|
-
rel=${this.rel ||
|
|
32
|
+
href=${this.href || i}
|
|
33
|
+
target=${this.target || i}
|
|
34
|
+
rel=${this.rel || i}
|
|
53
35
|
role="link"
|
|
54
|
-
aria-label=${((a = this.aria) == null ? void 0 : a.label) ||
|
|
36
|
+
aria-label=${((a = this.aria) == null ? void 0 : a.label) || i}
|
|
55
37
|
aria-disabled=${this.disabled ? "true" : "false"}
|
|
56
|
-
style=${
|
|
38
|
+
style=${o || i}>
|
|
57
39
|
<slot></slot>
|
|
58
40
|
</div>
|
|
59
41
|
</a>`;
|
|
@@ -69,74 +51,74 @@ class d extends h {
|
|
|
69
51
|
* @private
|
|
70
52
|
*/
|
|
71
53
|
generatePaddingCSS() {
|
|
72
|
-
const { padding:
|
|
54
|
+
const { padding: o } = this;
|
|
73
55
|
let a = "";
|
|
74
|
-
if (!
|
|
56
|
+
if (!o)
|
|
75
57
|
return "";
|
|
76
|
-
const
|
|
77
|
-
return
|
|
58
|
+
const e = o.split(",").map((r) => r.trim()).filter((r) => /^[a-g]$/.test(r));
|
|
59
|
+
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}` : "";
|
|
78
60
|
}
|
|
79
61
|
render() {
|
|
80
62
|
const {
|
|
81
|
-
variant:
|
|
63
|
+
variant: o,
|
|
82
64
|
disabled: a,
|
|
83
|
-
tag:
|
|
84
|
-
aria:
|
|
85
|
-
isDraggable:
|
|
86
|
-
} = this,
|
|
87
|
-
return
|
|
65
|
+
tag: e,
|
|
66
|
+
aria: r,
|
|
67
|
+
isDraggable: n
|
|
68
|
+
} = this, s = this.generatePaddingCSS();
|
|
69
|
+
return e === "a" ? this.renderAnchor() : g`
|
|
88
70
|
<div
|
|
89
71
|
class="c-card"
|
|
90
72
|
data-test-id="pie-card"
|
|
91
|
-
tag=${
|
|
92
|
-
?isDraggable="${
|
|
93
|
-
variant=${
|
|
73
|
+
tag=${e}
|
|
74
|
+
?isDraggable="${n}"
|
|
75
|
+
variant=${o}
|
|
94
76
|
?disabled=${a}
|
|
95
77
|
role="button"
|
|
96
78
|
tabindex="0"
|
|
97
|
-
aria-label=${(
|
|
79
|
+
aria-label=${(r == null ? void 0 : r.label) || i}
|
|
98
80
|
aria-disabled=${a ? "true" : "false"}
|
|
99
|
-
style=${
|
|
81
|
+
style=${s || i}>
|
|
100
82
|
<slot></slot>
|
|
101
83
|
</div>
|
|
102
84
|
</div>`;
|
|
103
85
|
}
|
|
104
86
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
],
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
],
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
],
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
],
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
],
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
],
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
],
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
],
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
],
|
|
136
|
-
|
|
87
|
+
t.styles = f(m);
|
|
88
|
+
c([
|
|
89
|
+
d(),
|
|
90
|
+
b(v, $, "button")
|
|
91
|
+
], t.prototype, "tag", 2);
|
|
92
|
+
c([
|
|
93
|
+
d(),
|
|
94
|
+
b(v, y, "default")
|
|
95
|
+
], t.prototype, "variant", 2);
|
|
96
|
+
c([
|
|
97
|
+
d({ type: String, reflect: !0 })
|
|
98
|
+
], t.prototype, "href", 2);
|
|
99
|
+
c([
|
|
100
|
+
d({ type: String, reflect: !0 })
|
|
101
|
+
], t.prototype, "target", 2);
|
|
102
|
+
c([
|
|
103
|
+
d({ type: String, reflect: !0 })
|
|
104
|
+
], t.prototype, "rel", 2);
|
|
105
|
+
c([
|
|
106
|
+
d({ type: Boolean })
|
|
107
|
+
], t.prototype, "disabled", 2);
|
|
108
|
+
c([
|
|
109
|
+
d({ type: Object })
|
|
110
|
+
], t.prototype, "aria", 2);
|
|
111
|
+
c([
|
|
112
|
+
d({ type: Boolean })
|
|
113
|
+
], t.prototype, "isDraggable", 2);
|
|
114
|
+
c([
|
|
115
|
+
d({ type: String }),
|
|
116
|
+
b(v, S, void 0)
|
|
117
|
+
], t.prototype, "padding", 2);
|
|
118
|
+
h(v, t);
|
|
137
119
|
export {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
120
|
+
t as PieCard,
|
|
121
|
+
S as paddingValues,
|
|
122
|
+
$ as tags,
|
|
141
123
|
y as variants
|
|
142
124
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as a from "react";
|
|
2
2
|
import { createComponent as e } from "@lit/react";
|
|
3
3
|
import { PieCard as r } from "./index.js";
|
|
4
|
-
import { paddingValues as
|
|
4
|
+
import { paddingValues as C, tags as c, variants as f } from "./index.js";
|
|
5
5
|
import "lit";
|
|
6
6
|
import "lit/decorators.js";
|
|
7
|
-
|
|
7
|
+
import "@justeattakeaway/pie-webc-core";
|
|
8
|
+
const s = e({
|
|
8
9
|
displayName: "PieCard",
|
|
9
10
|
elementClass: r,
|
|
10
11
|
react: a,
|
|
@@ -12,8 +13,8 @@ const p = e({
|
|
|
12
13
|
events: {}
|
|
13
14
|
});
|
|
14
15
|
export {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
s as PieCard,
|
|
17
|
+
C as paddingValues,
|
|
18
|
+
c as tags,
|
|
19
|
+
f as variants
|
|
19
20
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.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.7.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
34
|
+
"@justeattakeaway/pie-webc-core": "0.13.0"
|
|
35
35
|
},
|
|
36
36
|
"volta": {
|
|
37
37
|
"extends": "../../../package.json"
|