@justeattakeaway/pie-card 0.24.1 → 0.25.1
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 +86 -16
- package/custom-elements.json +2 -2
- package/dist/index.js +91 -95
- package/package.json +4 -4
- package/src/index.ts +2 -3
package/README.md
CHANGED
|
@@ -1,37 +1,107 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-card
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-card) | [Design Documentation](https://pie.design/components/card) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-card)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-card">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-card.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-card` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-card` is a Web Component built using the Lit library. It offers a simple and accessible interactive card component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
27
|
+
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
29
|
+
|
|
30
|
+
## Documentation
|
|
31
|
+
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|--------------|-------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
35
|
+
| `tag` | `"a"`, `"button"` | Which HTML tag to use for the card. | `"button"` |
|
|
36
|
+
| `variant` | `"default"`, `"outline"`, `"inverse"`, `"outline-inverse"` | Which variant of the card to use. | `"default"` |
|
|
37
|
+
| `href` | — | The `href` attribute to apply when `tag` is set to `"button"`. | `undefined` |
|
|
38
|
+
| `target` | — | The `target` attribute to apply when `tag` is set to `"button"`. | `undefined` |
|
|
39
|
+
| `rel` | — | The `rel` attribute to apply when `tag` is set to `"button"`. | `undefined` |
|
|
40
|
+
| `disabled` | `true`, `false` | Whether or not the card should be disabled. This applies disabled styles and turns off interactivity. <br /> If the card is used as a link, the `href` attribute will be removed so the link can no longer be navigated. | `false` |
|
|
41
|
+
| `aria` | `{ label?: string }` | Aria properties for the card to help with making it accessible. | `undefined` |
|
|
42
|
+
| `isDraggable`| `true`, `false` | Whether the card is draggable or not. Styling and pointer changes only. Implementation is left to the consuming application. | `false` |
|
|
43
|
+
| `padding` | `a-g` | Which spacing token(s) to use for the card's padding. Pass two (comma-separated) values for different vertical and horizontal padding, or one value to pad all sides evenly, e.g., `"a"` or `"a,b"`. | `undefined` |
|
|
44
|
+
|
|
45
|
+
### Slots
|
|
46
|
+
| Slot | Description |
|
|
47
|
+
|----------|-------------------------------------------------------------------|
|
|
48
|
+
| `default`| The default slot is used to pass content into the card component. |
|
|
49
|
+
|
|
50
|
+
### CSS Variables
|
|
51
|
+
This component does not expose any CSS variables for style overrides.
|
|
52
|
+
|
|
53
|
+
### Events
|
|
54
|
+
|
|
55
|
+
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
21
56
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-card
|
|
57
|
+
## Usage Examples
|
|
24
58
|
|
|
25
|
-
|
|
59
|
+
**For HTML:**
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
// import as module into a js file e.g. main.js
|
|
63
|
+
import '@justeattakeaway/pie-webc/components/card.js';
|
|
26
64
|
```
|
|
27
65
|
|
|
28
|
-
|
|
66
|
+
```html
|
|
67
|
+
<html>
|
|
68
|
+
<body>
|
|
69
|
+
<pie-card
|
|
70
|
+
tag="a"
|
|
71
|
+
href="https://www.example.com"
|
|
72
|
+
target="_blank"
|
|
73
|
+
padding="d">
|
|
74
|
+
Take me to example.com!
|
|
75
|
+
</pie-card>
|
|
76
|
+
<script type="module" src="/main.js"></script>
|
|
77
|
+
</body>
|
|
78
|
+
</html>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
// Vue templates (using Nuxt 3)
|
|
85
|
+
import '@justeattakeaway/pie-webc/components/card.js';
|
|
29
86
|
|
|
30
|
-
|
|
87
|
+
<pie-card tag="a" href="https://www.example.com" target="_blank" padding="d">
|
|
88
|
+
Take me to example.com!
|
|
89
|
+
</pie-card>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
**For React Applications:**
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
import { PieCard } from '@justeattakeaway/pie-webc/react/card.js';
|
|
96
|
+
|
|
97
|
+
<PieCard tag="a" href="https://www.example.com" target="_blank" padding="d">
|
|
98
|
+
Take me to example.com!
|
|
99
|
+
</PieCard>
|
|
100
|
+
```
|
|
31
101
|
|
|
32
|
-
## Questions
|
|
102
|
+
## Questions and Support
|
|
33
103
|
|
|
34
|
-
|
|
104
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
35
105
|
|
|
36
106
|
## Contributing
|
|
37
107
|
|
package/custom-elements.json
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"type": {
|
|
39
39
|
"text": "DefaultProps"
|
|
40
40
|
},
|
|
41
|
-
"default": "{\n disabled: false,\n variant: 'default',\n isDraggable: false,\n tag: 'button',\n}"
|
|
41
|
+
"default": "{\r\n disabled: false,\r\n variant: 'default',\r\n isDraggable: false,\r\n tag: 'button',\r\n}"
|
|
42
42
|
}
|
|
43
43
|
],
|
|
44
44
|
"exports": [
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
"text": "string"
|
|
207
207
|
}
|
|
208
208
|
},
|
|
209
|
-
"description": "Generates padding for the component based on `padding` values passed\nby the consumer.\n\n\nExample: 'a' or 'a, b'\nSingle values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right"
|
|
209
|
+
"description": "Generates padding for the component based on `padding` values passed\r\nby the consumer.\r\n\r\n\r\nExample: 'a' or 'a, b'\r\nSingle values i.e `'a'` applies to all sides and `'a, b'` applies to: top & bottom, left & right"
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -1,35 +1,30 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import {
|
|
3
|
-
import { classMap as h } from "lit/directives/class-map.js";
|
|
1
|
+
import { LitElement as y, unsafeCSS as S, nothing as v, html as h } from "lit";
|
|
2
|
+
import { classMap as m } from "lit/directives/class-map.js";
|
|
4
3
|
import { ifDefined as f } from "lit/directives/if-defined.js";
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
11
|
-
class y extends S {
|
|
12
|
-
constructor() {
|
|
13
|
-
super(...arguments), this.v = "0.24.1";
|
|
4
|
+
import { property as s, queryAssignedElements as $ } from "lit/decorators.js";
|
|
5
|
+
import { validPropertyValues as u, safeCustomElement as C } from "@justeattakeaway/pie-webc-core";
|
|
6
|
+
const b = class b extends y {
|
|
7
|
+
willUpdate() {
|
|
8
|
+
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
14
9
|
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const O = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--int-states-mixin-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(--int-states-mixin-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.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.is-disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-card)}.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--outline-inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--inverse.is-disabled,.c-card.c-card--outline-inverse.is-disabled{--int-states-mixin-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}", P = ["default", "outline", "inverse", "outline-inverse"], D = ["a", "button"], x = ["a", "b", "c", "d", "e", "f", "g"], I = x.flatMap((l) => [l, ...x.map((r) => `${l},${r}`)]), v = {
|
|
10
|
+
};
|
|
11
|
+
b.v = "0.25.1";
|
|
12
|
+
let g = b;
|
|
13
|
+
const k = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}.c-card{--int-states-mixin-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(--int-states-mixin-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.is-disabled{--int-states-mixin-bg-color: var(--dt-color-disabled-01);cursor:not-allowed}.c-card.is-disabled ::slotted(*){color:var(--dt-color-content-disabled)}.c-card.is-disabled img{opacity:.5}.c-card.c-card--default{box-shadow:var(--dt-elevation-card)}.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--default:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--default:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--default.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--outline{border-color:var(--dt-color-border-strong)}.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}.c-card.c-card--outline:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-card.c-card--inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);box-shadow:var(--dt-elevation-inverse-card)}.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--outline-inverse{--int-states-mixin-bg-color: var(--dt-color-container-inverse);--card-color: var(--dt-color-content-inverse);border-color:var(--dt-color-border-inverse)}.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--hover-modifier)))}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-container-inverse-h), var(--dt-color-container-inverse-s), calc(var(--dt-color-container-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.c-card.c-card--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-container-inverse))}.c-card.c-card--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.c-card.c-card--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-container-inverse))}}.c-card.c-card--inverse.is-disabled,.c-card.c-card--outline-inverse.is-disabled{--int-states-mixin-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}", w = ["default", "outline", "inverse", "outline-inverse"], O = ["a", "button"], x = ["a", "b", "c", "d", "e", "f", "g"], D = x.flatMap((r) => [r, ...x.map((e) => `${r},${e}`)]), n = {
|
|
20
14
|
disabled: !1,
|
|
21
15
|
variant: "default",
|
|
22
16
|
isDraggable: !1,
|
|
23
17
|
tag: "button"
|
|
24
18
|
};
|
|
25
|
-
var
|
|
26
|
-
for (var
|
|
27
|
-
(
|
|
28
|
-
return
|
|
19
|
+
var P = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (r, e, i, a) => {
|
|
20
|
+
for (var o = a > 1 ? void 0 : a ? A(e, i) : e, l = r.length - 1, c; l >= 0; l--)
|
|
21
|
+
(c = r[l]) && (o = (a ? c(e, i, o) : c(o)) || o);
|
|
22
|
+
return a && o && P(e, i, o), o;
|
|
29
23
|
};
|
|
30
|
-
const
|
|
24
|
+
const p = "pie-card";
|
|
25
|
+
let t = class extends g {
|
|
31
26
|
constructor() {
|
|
32
|
-
super(...arguments), this.tag =
|
|
27
|
+
super(...arguments), this.tag = n.tag, this.variant = n.variant, this.disabled = n.disabled, this.isDraggable = n.isDraggable;
|
|
33
28
|
}
|
|
34
29
|
onClickHandler(r) {
|
|
35
30
|
this.disabled && (r.preventDefault(), r.stopPropagation());
|
|
@@ -40,24 +35,24 @@ const g = "pie-card", p = class p extends y {
|
|
|
40
35
|
* @private
|
|
41
36
|
*/
|
|
42
37
|
renderAnchor(r) {
|
|
43
|
-
const
|
|
44
|
-
href:
|
|
45
|
-
rel:
|
|
38
|
+
const e = this.generatePaddingCSS(), {
|
|
39
|
+
href: i,
|
|
40
|
+
rel: a,
|
|
46
41
|
target: o,
|
|
47
|
-
disabled:
|
|
48
|
-
aria:
|
|
42
|
+
disabled: l,
|
|
43
|
+
aria: c
|
|
49
44
|
} = this;
|
|
50
|
-
return
|
|
45
|
+
return h`
|
|
51
46
|
<a
|
|
52
|
-
class="${
|
|
47
|
+
class="${m(r)}"
|
|
53
48
|
data-test-id="pie-card-link"
|
|
54
|
-
href=${f(
|
|
55
|
-
target=${o ||
|
|
56
|
-
rel=${
|
|
49
|
+
href=${f(i && !l ? i : void 0)}
|
|
50
|
+
target=${o || v}
|
|
51
|
+
rel=${a || v}
|
|
57
52
|
role="link"
|
|
58
|
-
aria-label=${(
|
|
59
|
-
aria-disabled=${
|
|
60
|
-
style=${f(
|
|
53
|
+
aria-label=${(c == null ? void 0 : c.label) || v}
|
|
54
|
+
aria-disabled=${l ? "true" : "false"}
|
|
55
|
+
style=${f(e)}>
|
|
61
56
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
62
57
|
</a>`;
|
|
63
58
|
}
|
|
@@ -73,11 +68,11 @@ const g = "pie-card", p = class p extends y {
|
|
|
73
68
|
*/
|
|
74
69
|
generatePaddingCSS() {
|
|
75
70
|
const { padding: r } = this;
|
|
76
|
-
let
|
|
71
|
+
let e = "";
|
|
77
72
|
if (!r)
|
|
78
73
|
return "";
|
|
79
|
-
const
|
|
80
|
-
return
|
|
74
|
+
const i = r.split(",").map((a) => a.trim()).filter((a) => /^[a-g]$/.test(a));
|
|
75
|
+
return i.length > 0 && i.length <= 2 && (e += `var(--dt-spacing-${i[0]})`, i.length > 1 && (e += ` var(--dt-spacing-${i[1]})`)), e ? `padding: ${e}` : "";
|
|
81
76
|
}
|
|
82
77
|
/**
|
|
83
78
|
* Handles the slot change event and applies/removes opacity to images based on the `disabled` state.
|
|
@@ -93,9 +88,9 @@ const g = "pie-card", p = class p extends y {
|
|
|
93
88
|
* @private
|
|
94
89
|
*/
|
|
95
90
|
updateImagesOpacity() {
|
|
96
|
-
this.assignedElements && this.assignedElements.forEach((
|
|
97
|
-
const
|
|
98
|
-
this.applyOpacityToImages(
|
|
91
|
+
this.assignedElements && this.assignedElements.forEach((e) => {
|
|
92
|
+
const i = e.querySelectorAll("img");
|
|
93
|
+
this.applyOpacityToImages(i);
|
|
99
94
|
});
|
|
100
95
|
const r = this.querySelectorAll("img");
|
|
101
96
|
this.applyOpacityToImages(r);
|
|
@@ -107,8 +102,8 @@ const g = "pie-card", p = class p extends y {
|
|
|
107
102
|
* @private
|
|
108
103
|
*/
|
|
109
104
|
applyOpacityToImages(r) {
|
|
110
|
-
r.forEach((
|
|
111
|
-
|
|
105
|
+
r.forEach((e) => {
|
|
106
|
+
e.style.opacity = this.disabled ? "0.5" : "";
|
|
112
107
|
});
|
|
113
108
|
}
|
|
114
109
|
/**
|
|
@@ -122,71 +117,72 @@ const g = "pie-card", p = class p extends y {
|
|
|
122
117
|
render() {
|
|
123
118
|
const {
|
|
124
119
|
variant: r,
|
|
125
|
-
disabled:
|
|
126
|
-
tag:
|
|
127
|
-
aria:
|
|
120
|
+
disabled: e,
|
|
121
|
+
tag: i,
|
|
122
|
+
aria: a,
|
|
128
123
|
isDraggable: o
|
|
129
|
-
} = this,
|
|
124
|
+
} = this, l = this.generatePaddingCSS(), c = {
|
|
130
125
|
"c-card": !0,
|
|
131
126
|
[`c-card--${r}`]: !0,
|
|
132
127
|
"c-card--draggable": o,
|
|
133
|
-
"is-disabled":
|
|
128
|
+
"is-disabled": e
|
|
134
129
|
};
|
|
135
|
-
return
|
|
130
|
+
return i === "a" ? this.renderAnchor(c) : h`
|
|
136
131
|
<div
|
|
137
|
-
class="${
|
|
132
|
+
class="${m(c)}"
|
|
138
133
|
data-test-id="pie-card-button"
|
|
139
134
|
role="button"
|
|
140
|
-
tabindex=${
|
|
141
|
-
aria-label=${(
|
|
142
|
-
aria-disabled=${
|
|
143
|
-
style=${
|
|
135
|
+
tabindex=${e ? "-1" : "0"}
|
|
136
|
+
aria-label=${(a == null ? void 0 : a.label) || v}
|
|
137
|
+
aria-disabled=${e ? "true" : "false"}
|
|
138
|
+
style=${l || ""}
|
|
144
139
|
@click=${this.onClickHandler}>
|
|
145
140
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
146
141
|
</div>
|
|
147
142
|
</div>`;
|
|
148
143
|
}
|
|
149
144
|
};
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
s(
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
s(
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
s(
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
s(
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
s(
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
s(
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
s(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
s(
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
s(
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
C(
|
|
145
|
+
t.styles = S(k);
|
|
146
|
+
d([
|
|
147
|
+
s({ type: String }),
|
|
148
|
+
u(p, O, n.tag)
|
|
149
|
+
], t.prototype, "tag", 2);
|
|
150
|
+
d([
|
|
151
|
+
s({ type: String }),
|
|
152
|
+
u(p, w, n.variant)
|
|
153
|
+
], t.prototype, "variant", 2);
|
|
154
|
+
d([
|
|
155
|
+
s({ type: String, reflect: !0 })
|
|
156
|
+
], t.prototype, "href", 2);
|
|
157
|
+
d([
|
|
158
|
+
s({ type: String, reflect: !0 })
|
|
159
|
+
], t.prototype, "target", 2);
|
|
160
|
+
d([
|
|
161
|
+
s({ type: String, reflect: !0 })
|
|
162
|
+
], t.prototype, "rel", 2);
|
|
163
|
+
d([
|
|
164
|
+
s({ type: Boolean })
|
|
165
|
+
], t.prototype, "disabled", 2);
|
|
166
|
+
d([
|
|
167
|
+
s({ type: Object })
|
|
168
|
+
], t.prototype, "aria", 2);
|
|
169
|
+
d([
|
|
170
|
+
s({ type: Boolean })
|
|
171
|
+
], t.prototype, "isDraggable", 2);
|
|
172
|
+
d([
|
|
173
|
+
s({ type: String }),
|
|
174
|
+
u(p, D, void 0)
|
|
175
|
+
], t.prototype, "padding", 2);
|
|
176
|
+
d([
|
|
177
|
+
$({ flatten: !0 })
|
|
178
|
+
], t.prototype, "assignedElements", 2);
|
|
179
|
+
t = d([
|
|
180
|
+
C("pie-card")
|
|
181
|
+
], t);
|
|
186
182
|
export {
|
|
187
183
|
t as PieCard,
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
184
|
+
n as defaultProps,
|
|
185
|
+
D as paddingValues,
|
|
186
|
+
O as tags,
|
|
187
|
+
w as variants
|
|
192
188
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.1",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,14 +39,14 @@
|
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
-
"@justeattakeaway/pie-monorepo-utils": "0.5.
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
45
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
49
|
+
"@justeattakeaway/pie-webc-core": "0.26.0"
|
|
50
50
|
},
|
|
51
51
|
"volta": {
|
|
52
52
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
|
|
|
5
5
|
import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
|
|
6
6
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
7
7
|
import { property, queryAssignedElements } from 'lit/decorators.js';
|
|
8
|
-
import {
|
|
8
|
+
import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
9
9
|
import styles from './card.scss?inline';
|
|
10
10
|
import {
|
|
11
11
|
variants,
|
|
@@ -23,6 +23,7 @@ const componentSelector = 'pie-card';
|
|
|
23
23
|
/**
|
|
24
24
|
* @tagname pie-card
|
|
25
25
|
*/
|
|
26
|
+
@safeCustomElement('pie-card')
|
|
26
27
|
export class PieCard extends PieElement implements CardProps {
|
|
27
28
|
@property({ type: String })
|
|
28
29
|
@validPropertyValues(componentSelector, tags, defaultProps.tag)
|
|
@@ -220,8 +221,6 @@ export class PieCard extends PieElement implements CardProps {
|
|
|
220
221
|
static styles = unsafeCSS(styles);
|
|
221
222
|
}
|
|
222
223
|
|
|
223
|
-
defineCustomElement(componentSelector, PieCard);
|
|
224
|
-
|
|
225
224
|
declare global {
|
|
226
225
|
interface HTMLElementTagNameMap {
|
|
227
226
|
[componentSelector]: PieCard;
|