@justeattakeaway/pie-card 0.25.5 → 0.26.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/custom-elements.json +9 -74
- package/dist/index.d.ts +3 -3
- package/dist/index.js +5 -5
- package/dist/react.d.ts +6 -4
- package/package.json +4 -4
- package/src/card.scss +2 -2
package/custom-elements.json
CHANGED
|
@@ -88,14 +88,12 @@
|
|
|
88
88
|
{
|
|
89
89
|
"kind": "field",
|
|
90
90
|
"name": "tag",
|
|
91
|
-
"privacy": "public"
|
|
92
|
-
"attribute": "tag"
|
|
91
|
+
"privacy": "public"
|
|
93
92
|
},
|
|
94
93
|
{
|
|
95
94
|
"kind": "field",
|
|
96
95
|
"name": "variant",
|
|
97
|
-
"privacy": "public"
|
|
98
|
-
"attribute": "variant"
|
|
96
|
+
"privacy": "public"
|
|
99
97
|
},
|
|
100
98
|
{
|
|
101
99
|
"kind": "field",
|
|
@@ -103,9 +101,7 @@
|
|
|
103
101
|
"type": {
|
|
104
102
|
"text": "CardProps['href']"
|
|
105
103
|
},
|
|
106
|
-
"privacy": "public"
|
|
107
|
-
"attribute": "href",
|
|
108
|
-
"reflects": true
|
|
104
|
+
"privacy": "public"
|
|
109
105
|
},
|
|
110
106
|
{
|
|
111
107
|
"kind": "field",
|
|
@@ -113,9 +109,7 @@
|
|
|
113
109
|
"type": {
|
|
114
110
|
"text": "CardProps['target']"
|
|
115
111
|
},
|
|
116
|
-
"privacy": "public"
|
|
117
|
-
"attribute": "target",
|
|
118
|
-
"reflects": true
|
|
112
|
+
"privacy": "public"
|
|
119
113
|
},
|
|
120
114
|
{
|
|
121
115
|
"kind": "field",
|
|
@@ -123,15 +117,12 @@
|
|
|
123
117
|
"type": {
|
|
124
118
|
"text": "CardProps['rel']"
|
|
125
119
|
},
|
|
126
|
-
"privacy": "public"
|
|
127
|
-
"attribute": "rel",
|
|
128
|
-
"reflects": true
|
|
120
|
+
"privacy": "public"
|
|
129
121
|
},
|
|
130
122
|
{
|
|
131
123
|
"kind": "field",
|
|
132
124
|
"name": "disabled",
|
|
133
|
-
"privacy": "public"
|
|
134
|
-
"attribute": "disabled"
|
|
125
|
+
"privacy": "public"
|
|
135
126
|
},
|
|
136
127
|
{
|
|
137
128
|
"kind": "field",
|
|
@@ -139,14 +130,12 @@
|
|
|
139
130
|
"type": {
|
|
140
131
|
"text": "CardProps['aria']"
|
|
141
132
|
},
|
|
142
|
-
"privacy": "public"
|
|
143
|
-
"attribute": "aria"
|
|
133
|
+
"privacy": "public"
|
|
144
134
|
},
|
|
145
135
|
{
|
|
146
136
|
"kind": "field",
|
|
147
137
|
"name": "isDraggable",
|
|
148
|
-
"privacy": "public"
|
|
149
|
-
"attribute": "isDraggable"
|
|
138
|
+
"privacy": "public"
|
|
150
139
|
},
|
|
151
140
|
{
|
|
152
141
|
"kind": "field",
|
|
@@ -154,8 +143,7 @@
|
|
|
154
143
|
"type": {
|
|
155
144
|
"text": "CardProps['padding']"
|
|
156
145
|
},
|
|
157
|
-
"privacy": "public"
|
|
158
|
-
"attribute": "padding"
|
|
146
|
+
"privacy": "public"
|
|
159
147
|
},
|
|
160
148
|
{
|
|
161
149
|
"kind": "field",
|
|
@@ -245,59 +233,6 @@
|
|
|
245
233
|
"description": "Applies or removes opacity from the given images based on the `disabled` property."
|
|
246
234
|
}
|
|
247
235
|
],
|
|
248
|
-
"attributes": [
|
|
249
|
-
{
|
|
250
|
-
"name": "tag",
|
|
251
|
-
"fieldName": "tag"
|
|
252
|
-
},
|
|
253
|
-
{
|
|
254
|
-
"name": "variant",
|
|
255
|
-
"fieldName": "variant"
|
|
256
|
-
},
|
|
257
|
-
{
|
|
258
|
-
"name": "href",
|
|
259
|
-
"type": {
|
|
260
|
-
"text": "CardProps['href']"
|
|
261
|
-
},
|
|
262
|
-
"fieldName": "href"
|
|
263
|
-
},
|
|
264
|
-
{
|
|
265
|
-
"name": "target",
|
|
266
|
-
"type": {
|
|
267
|
-
"text": "CardProps['target']"
|
|
268
|
-
},
|
|
269
|
-
"fieldName": "target"
|
|
270
|
-
},
|
|
271
|
-
{
|
|
272
|
-
"name": "rel",
|
|
273
|
-
"type": {
|
|
274
|
-
"text": "CardProps['rel']"
|
|
275
|
-
},
|
|
276
|
-
"fieldName": "rel"
|
|
277
|
-
},
|
|
278
|
-
{
|
|
279
|
-
"name": "disabled",
|
|
280
|
-
"fieldName": "disabled"
|
|
281
|
-
},
|
|
282
|
-
{
|
|
283
|
-
"name": "aria",
|
|
284
|
-
"type": {
|
|
285
|
-
"text": "CardProps['aria']"
|
|
286
|
-
},
|
|
287
|
-
"fieldName": "aria"
|
|
288
|
-
},
|
|
289
|
-
{
|
|
290
|
-
"name": "isDraggable",
|
|
291
|
-
"fieldName": "isDraggable"
|
|
292
|
-
},
|
|
293
|
-
{
|
|
294
|
-
"name": "padding",
|
|
295
|
-
"type": {
|
|
296
|
-
"text": "CardProps['padding']"
|
|
297
|
-
},
|
|
298
|
-
"fieldName": "padding"
|
|
299
|
-
}
|
|
300
|
-
],
|
|
301
236
|
"superclass": {
|
|
302
237
|
"name": "PieElement",
|
|
303
238
|
"package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
|
-
import
|
|
2
|
+
import { CSSResult } from 'lit';
|
|
3
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
|
-
import
|
|
5
|
-
import
|
|
4
|
+
import { PropertyValues } from 'lit';
|
|
5
|
+
import { TemplateResult } from 'lit';
|
|
6
6
|
|
|
7
7
|
declare type AriaProps = {
|
|
8
8
|
label?: string;
|
package/dist/index.js
CHANGED
|
@@ -8,9 +8,9 @@ const b = class b extends y {
|
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", b.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
b.v = "0.
|
|
11
|
+
b.v = "0.26.0";
|
|
12
12
|
let g = b;
|
|
13
|
-
const
|
|
13
|
+
const w = ".c-card.c-card--draggable{cursor:grab}.c-card.c-card--draggable:active{cursor:grabbing}*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-below-10)}.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-below-10)}.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}", k = ["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 = {
|
|
14
14
|
disabled: !1,
|
|
15
15
|
variant: "default",
|
|
16
16
|
isDraggable: !1,
|
|
@@ -142,14 +142,14 @@ let t = class extends g {
|
|
|
142
142
|
</div>`;
|
|
143
143
|
}
|
|
144
144
|
};
|
|
145
|
-
t.styles = S(
|
|
145
|
+
t.styles = S(w);
|
|
146
146
|
d([
|
|
147
147
|
s({ type: String }),
|
|
148
148
|
u(p, O, n.tag)
|
|
149
149
|
], t.prototype, "tag", 2);
|
|
150
150
|
d([
|
|
151
151
|
s({ type: String }),
|
|
152
|
-
u(p,
|
|
152
|
+
u(p, k, n.variant)
|
|
153
153
|
], t.prototype, "variant", 2);
|
|
154
154
|
d([
|
|
155
155
|
s({ type: String, reflect: !0 })
|
|
@@ -184,5 +184,5 @@ export {
|
|
|
184
184
|
n as defaultProps,
|
|
185
185
|
D as paddingValues,
|
|
186
186
|
O as tags,
|
|
187
|
-
|
|
187
|
+
k as variants
|
|
188
188
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
|
-
import
|
|
2
|
+
import { CSSResult } from 'lit';
|
|
3
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
4
|
-
import
|
|
4
|
+
import { PropertyValues } from 'lit';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
|
-
import
|
|
6
|
+
import { TemplateResult } from 'lit';
|
|
7
7
|
|
|
8
8
|
declare type AriaProps = {
|
|
9
9
|
label?: string;
|
|
@@ -58,7 +58,7 @@ declare type PaddingValue = typeof spacingTokens[number];
|
|
|
58
58
|
|
|
59
59
|
export declare const paddingValues: string[];
|
|
60
60
|
|
|
61
|
-
export declare const PieCard: React_2.ForwardRefExoticComponent<
|
|
61
|
+
export declare const PieCard: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<CardProps> & React_2.RefAttributes<PieCard_2> & ReactBaseType>;
|
|
62
62
|
|
|
63
63
|
/**
|
|
64
64
|
* @tagname pie-card
|
|
@@ -121,6 +121,8 @@ declare class PieCard_2 extends PieElement implements CardProps {
|
|
|
121
121
|
static styles: CSSResult;
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
+
declare type ReactBaseType = React_2.AnchorHTMLAttributes<HTMLAnchorElement> & React_2.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
125
|
+
|
|
124
126
|
declare const spacingTokens: readonly ["a", "b", "c", "d", "e", "f", "g"];
|
|
125
127
|
|
|
126
128
|
export declare const tags: readonly ["a", "button"];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "PIE Design System Card built using Web Components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"license": "Apache-2.0",
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
44
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
42
|
+
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
43
|
+
"@justeattakeaway/pie-css": "0.19.0",
|
|
44
|
+
"@justeattakeaway/pie-monorepo-utils": "0.6.0",
|
|
45
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
package/src/card.scss
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&.c-card--default {
|
|
39
|
-
box-shadow: var(--dt-elevation-
|
|
39
|
+
box-shadow: var(--dt-elevation-below-10);
|
|
40
40
|
|
|
41
41
|
@include p.interactive-states('--dt-color-container-default');
|
|
42
42
|
}
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
--int-states-mixin-bg-color: var(--dt-color-container-inverse);
|
|
52
52
|
--card-color: var(--dt-color-content-inverse);
|
|
53
53
|
|
|
54
|
-
box-shadow: var(--dt-elevation-inverse-
|
|
54
|
+
box-shadow: var(--dt-elevation-inverse-below-10);
|
|
55
55
|
|
|
56
56
|
@include p.interactive-states('--dt-color-container-inverse', 'inverse', '02');
|
|
57
57
|
}
|