@justeattakeaway/pie-thumbnail 0.6.0 → 0.6.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/dist/index.d.ts +1 -1
- package/dist/index.js +29 -29
- package/dist/react.d.ts +1 -1
- package/package.json +2 -2
- package/src/default-placeholder.svg +1 -1
- package/src/defs.ts +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -89,7 +89,7 @@ export declare interface ThumbnailProps {
|
|
|
89
89
|
*/
|
|
90
90
|
disabled?: boolean;
|
|
91
91
|
/**
|
|
92
|
-
* When true,
|
|
92
|
+
* When true, extra spacing around the thumbnail container is applied.
|
|
93
93
|
*/
|
|
94
94
|
hasPadding?: boolean;
|
|
95
95
|
/**
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { LitElement as k, html as _, unsafeCSS as
|
|
2
|
-
import { validPropertyValues as h, defineCustomElement as
|
|
3
|
-
import { classMap as
|
|
1
|
+
import { LitElement as k, html as _, unsafeCSS as S } from "lit";
|
|
2
|
+
import { validPropertyValues as h, defineCustomElement as P } from "@justeattakeaway/pie-webc-core";
|
|
3
|
+
import { classMap as E } from "lit/directives/class-map.js";
|
|
4
4
|
import { property as l, query as z, state as C } from "lit/decorators.js";
|
|
5
5
|
const I = [
|
|
6
6
|
"default",
|
|
@@ -22,7 +22,7 @@ const I = [
|
|
|
22
22
|
}, $ = ["1by1", "4by3", "16by9"], m = 8, g = 24, w = 128, R = Object.freeze(Array.from(
|
|
23
23
|
{ length: (w - g) / m + 1 },
|
|
24
24
|
(u, t) => g + t * m
|
|
25
|
-
)),
|
|
25
|
+
)), r = {
|
|
26
26
|
variant: "default",
|
|
27
27
|
size: 48,
|
|
28
28
|
src: "",
|
|
@@ -36,22 +36,22 @@ const I = [
|
|
|
36
36
|
src: "",
|
|
37
37
|
alt: ""
|
|
38
38
|
}
|
|
39
|
-
}, j = ".c-thumbnail{--thumbnail-size: 48px;--thumbnail-border-radius: var(--dt-radius-rounded-b);--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-padding: calc(var(--dt-spacing-a) / 2);--thumbnail-default-placeholder-padding: var(--dt-spacing-b);--thumbnail-img-border-radius: unset;--thumbnail-img-object-fit: cover;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--thumbnail-border-radius);background-color:var(--thumbnail-bg-color)}.c-thumbnail.c-thumbnail--outline{border:1px solid var(--dt-color-border-default)}.c-thumbnail.c-thumbnail--disabled{opacity:.5}.c-thumbnail.c-thumbnail--backgroundSubtle{--thumbnail-bg-color: var(--dt-color-container-subtle)}.c-thumbnail.c-thumbnail--backgroundStrong{--thumbnail-bg-color: var(--dt-color-container-strong)}.c-thumbnail.c-thumbnail--backgroundDark{--thumbnail-bg-color: var(--dt-color-container-dark)}.c-thumbnail.c-thumbnail--backgroundInverse{--thumbnail-bg-color: var(--dt-color-container-inverse)}.c-thumbnail.c-thumbnail--backgroundInverseAlternative{--thumbnail-bg-color: var(--dt-color-container-inverse-alternative)}.c-thumbnail.c-thumbnail--padding{--thumbnail-img-border-radius: calc(var(--thumbnail-border-radius) - var(--thumbnail-padding));padding:var(--thumbnail-padding)}.c-thumbnail.c-thumbnail--4by3{height:calc(var(--thumbnail-size) * 3 / 4)}.c-thumbnail.c-thumbnail--16by9{height:calc(var(--thumbnail-size) * 9 / 16)}.c-thumbnail .c-thumbnail-img{width:100%;height:100%;border-radius:var(--thumbnail-img-border-radius);object-fit:var(--thumbnail-img-object-fit)}.c-thumbnail.c-thumbnail--defaultPlaceholder{--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-img-object-fit: fill;padding:var(--thumbnail-default-placeholder-padding)}", A = "data:image/svg+xml,%3csvg%
|
|
40
|
-
var B = Object.defineProperty, i = (u, t,
|
|
39
|
+
}, j = ".c-thumbnail{--thumbnail-size: 48px;--thumbnail-border-radius: var(--dt-radius-rounded-b);--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-padding: calc(var(--dt-spacing-a) / 2);--thumbnail-default-placeholder-padding: var(--dt-spacing-b);--thumbnail-img-border-radius: unset;--thumbnail-img-object-fit: cover;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--thumbnail-border-radius);background-color:var(--thumbnail-bg-color)}.c-thumbnail.c-thumbnail--outline{border:1px solid var(--dt-color-border-default)}.c-thumbnail.c-thumbnail--disabled{opacity:.5}.c-thumbnail.c-thumbnail--backgroundSubtle{--thumbnail-bg-color: var(--dt-color-container-subtle)}.c-thumbnail.c-thumbnail--backgroundStrong{--thumbnail-bg-color: var(--dt-color-container-strong)}.c-thumbnail.c-thumbnail--backgroundDark{--thumbnail-bg-color: var(--dt-color-container-dark)}.c-thumbnail.c-thumbnail--backgroundInverse{--thumbnail-bg-color: var(--dt-color-container-inverse)}.c-thumbnail.c-thumbnail--backgroundInverseAlternative{--thumbnail-bg-color: var(--dt-color-container-inverse-alternative)}.c-thumbnail.c-thumbnail--padding{--thumbnail-img-border-radius: calc(var(--thumbnail-border-radius) - var(--thumbnail-padding));padding:var(--thumbnail-padding)}.c-thumbnail.c-thumbnail--4by3{height:calc(var(--thumbnail-size) * 3 / 4)}.c-thumbnail.c-thumbnail--16by9{height:calc(var(--thumbnail-size) * 9 / 16)}.c-thumbnail .c-thumbnail-img{width:100%;height:100%;border-radius:var(--thumbnail-img-border-radius);object-fit:var(--thumbnail-img-object-fit)}.c-thumbnail.c-thumbnail--defaultPlaceholder{--thumbnail-bg-color: var(--dt-color-container-default);--thumbnail-img-object-fit: fill;padding:var(--thumbnail-default-placeholder-padding)}", A = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2033%2032'%3e%3cpath%20d='M32.399%2015.493c-.102-.255-1.495-2.753-4.081-5.888a.507.507%200%200%201-.119-.267%2048.162%2048.162%200%200%200-.778-5.436.88.88%200%200%200-.282-.467.928.928%200%200%200-.509-.221l-2.679-.323a.84.84%200%200%200-.071%200c-.15%200-.294.058-.401.161s-.166.243-.166.389v.906c0%20.009-.004.017-.011.023s-.015.01-.025.01c-.015-.003-.018-.006-.021-.008A37.89%2037.89%200%200%200%2017.829.395%202.43%202.43%200%200%200%2016.493%200c-.473%200-.936.138-1.328.395C5.887%205.956.782%2015.005.585%2015.493a.87.87%200%200%200%20.004.757.9.9%200%200%200%20.246.306.93.93%200%200%200%20.356.176l2.672.5c.177.047.335.144.454.279s.193.302.213.479c.023.457.527%2010.691%201.162%2013.345a.89.89%200%200%200%20.328.479c.161.12.358.186.561.185h.02l4.528-.084h.129c.079-.001.155-.032.211-.086s.087-.128.087-.205l-.306-5.093c0-.054-.007-.121-.01-.176a.54.54%200%200%200-.08-.254.56.56%200%200%200-.193-.188c-.407-.236-.747-.566-.992-.96s-.385-.841-.41-1.3c-.142-3.589-.211-7.735-.008-10.981.003-.138.062-.27.165-.366a.545.545%200%200%201%20.76.016c.099.1.152.234.149.372v.041c-.132%202.163-.142%204.72-.095%207.244a.61.61%200%200%200%20.195.435.65.65%200%200%200%20.454.174.65.65%200%200%200%20.448-.189.61.61%200%200%200%20.179-.441c-.048-2.54-.035-5.114.099-7.285.003-.138.062-.27.165-.366a.545.545%200%200%201%20.76.016c.099.1.152.234.149.372v.041c-.132%202.152-.142%204.694-.096%207.204a.61.61%200%200%200%20.194.435.65.65%200%200%200%20.454.175.65.65%200%200%200%20.448-.188.61.61%200%200%200%20.18-.441c-.047-2.529-.034-5.093.101-7.249.003-.138.063-.27.165-.366s.241-.148.383-.145.278.061.377.161.152.234.149.372v.041c-.193%203.154-.13%207.147%200%2010.651a.26.26%200%200%201%200%20.033v.086c0%20.455-.113.902-.331%201.305s-.533.747-.919%201.004a.54.54%200%200%200-.166.177.52.52%200%200%200-.07.229s-.067.538.179%203.144l.241%202.284c.009.067.043.128.095.172s.119.068.188.068h4.053l1.516.012c.07%200%20.137-.024.189-.069s.086-.107.094-.174c.35-3.123.434-4.879.434-4.879-.002-.075-.032-.146-.084-.201s-.123-.09-.199-.099l-1.843-.246c-.122-.015-.238-.064-.331-.142s-.161-.181-.195-.297a.83.83%200%200%201-.024-.275c.747-10.411%204.282-13.92%204.282-13.92a1.05%201.05%200%200%201%20.172-.144.575.575%200%200%201%20.491-.082.57.57%200%200%201%20.223.122.55.55%200%200%201%20.145.205.97.97%200%200%201%20.045.251c.306%203.272.157%208.842-.033%2013.186l-.353%206.583c0%20.057.023.112.065.152s.098.063.156.063l3.037.062h.021a.94.94%200%200%200%20.561-.186.892.892%200%200%200%20.328-.479c.635-2.654%201.134-12.887%201.161-13.344a.877.877%200%200%201%20.214-.479.92.92%200%200%201%20.453-.28l2.672-.5a.92.92%200%200%200%20.499-.317.873.873%200%200%200%20.194-.548.885.885%200%200%200-.101-.368z'%20fill='%23efedea'/%3e%3c/svg%3e";
|
|
40
|
+
var B = Object.defineProperty, i = (u, t, e, o) => {
|
|
41
41
|
for (var n = void 0, c = u.length - 1, d; c >= 0; c--)
|
|
42
|
-
(d = u[c]) && (n = d(t,
|
|
43
|
-
return n && B(t,
|
|
42
|
+
(d = u[c]) && (n = d(t, e, n) || n);
|
|
43
|
+
return n && B(t, e, n), n;
|
|
44
44
|
};
|
|
45
45
|
const s = "pie-thumbnail", b = class b extends k {
|
|
46
46
|
constructor() {
|
|
47
|
-
super(...arguments), this.variant =
|
|
47
|
+
super(...arguments), this.variant = r.variant, this.size = r.size, this.aspectRatio = r.aspectRatio, this.src = r.src, this.alt = r.alt, this.disabled = r.disabled, this.hasPadding = r.hasPadding, this.hideDefaultPlaceholder = r.hideDefaultPlaceholder, this.backgroundColor = r.backgroundColor, this.placeholder = r.placeholder, this._hasError = !1;
|
|
48
48
|
}
|
|
49
49
|
/**
|
|
50
50
|
* Determines if the default placeholder should be displayed.
|
|
51
51
|
*/
|
|
52
52
|
get _isDefaultPlaceholderVisible() {
|
|
53
|
-
const { _hasError: t, placeholder:
|
|
54
|
-
return t && !(
|
|
53
|
+
const { _hasError: t, placeholder: e, hideDefaultPlaceholder: o } = this;
|
|
54
|
+
return t && !(e != null && e.src) && !o;
|
|
55
55
|
}
|
|
56
56
|
/**
|
|
57
57
|
* Returns the appropriate image props based on the following order:
|
|
@@ -73,10 +73,10 @@ const s = "pie-thumbnail", b = class b extends k {
|
|
|
73
73
|
*/
|
|
74
74
|
_generateSizeStyles() {
|
|
75
75
|
const { size: t } = this;
|
|
76
|
-
let
|
|
77
|
-
return t <= 40 ? (
|
|
76
|
+
let e = "--dt-radius-rounded-c", o = "--dt-spacing-d";
|
|
77
|
+
return t <= 40 ? (e = "--dt-radius-rounded-a", o = "--dt-spacing-a") : t <= 56 && (e = "--dt-radius-rounded-b", o = "--dt-spacing-b"), `
|
|
78
78
|
--thumbnail-size: ${t}px;
|
|
79
|
-
--thumbnail-border-radius: var(${
|
|
79
|
+
--thumbnail-border-radius: var(${e});
|
|
80
80
|
--thumbnail-default-placeholder-padding: var(${o});
|
|
81
81
|
`;
|
|
82
82
|
}
|
|
@@ -92,8 +92,8 @@ const s = "pie-thumbnail", b = class b extends k {
|
|
|
92
92
|
*/
|
|
93
93
|
_checkImageError() {
|
|
94
94
|
if (this.img) {
|
|
95
|
-
const { complete: t, naturalHeight:
|
|
96
|
-
t &&
|
|
95
|
+
const { complete: t, naturalHeight: e } = this.img;
|
|
96
|
+
t && e === 0 && this._handleImageError.call(this);
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
firstUpdated() {
|
|
@@ -102,17 +102,17 @@ const s = "pie-thumbnail", b = class b extends k {
|
|
|
102
102
|
render() {
|
|
103
103
|
const {
|
|
104
104
|
variant: t,
|
|
105
|
-
_controlledSrc:
|
|
105
|
+
_controlledSrc: e,
|
|
106
106
|
_controlledAlt: o,
|
|
107
107
|
disabled: n,
|
|
108
108
|
hasPadding: c,
|
|
109
109
|
_isDefaultPlaceholderVisible: d,
|
|
110
110
|
backgroundColor: p,
|
|
111
|
-
aspectRatio:
|
|
112
|
-
} = this,
|
|
111
|
+
aspectRatio: f
|
|
112
|
+
} = this, v = {
|
|
113
113
|
"c-thumbnail": !0,
|
|
114
114
|
[`c-thumbnail--${t}`]: !0,
|
|
115
|
-
[`c-thumbnail--${
|
|
115
|
+
[`c-thumbnail--${f}`]: !0,
|
|
116
116
|
[x[p]]: !0,
|
|
117
117
|
"c-thumbnail--disabled": n,
|
|
118
118
|
"c-thumbnail--padding": c,
|
|
@@ -120,11 +120,11 @@ const s = "pie-thumbnail", b = class b extends k {
|
|
|
120
120
|
}, y = this._generateSizeStyles();
|
|
121
121
|
return _`
|
|
122
122
|
<div data-test-id="pie-thumbnail"
|
|
123
|
-
class="${
|
|
123
|
+
class="${E(v)}"
|
|
124
124
|
style="${y}">
|
|
125
125
|
<img
|
|
126
126
|
data-test-id="pie-thumbnail-img"
|
|
127
|
-
src="${
|
|
127
|
+
src="${e}"
|
|
128
128
|
alt="${o}"
|
|
129
129
|
class="c-thumbnail-img"
|
|
130
130
|
@error="${this._handleImageError}"
|
|
@@ -133,19 +133,19 @@ const s = "pie-thumbnail", b = class b extends k {
|
|
|
133
133
|
`;
|
|
134
134
|
}
|
|
135
135
|
};
|
|
136
|
-
b.styles =
|
|
136
|
+
b.styles = S(j);
|
|
137
137
|
let a = b;
|
|
138
138
|
i([
|
|
139
139
|
l({ type: String }),
|
|
140
|
-
h(s, I,
|
|
140
|
+
h(s, I, r.variant)
|
|
141
141
|
], a.prototype, "variant");
|
|
142
142
|
i([
|
|
143
143
|
l({ type: Number }),
|
|
144
|
-
h(s, R,
|
|
144
|
+
h(s, R, r.size)
|
|
145
145
|
], a.prototype, "size");
|
|
146
146
|
i([
|
|
147
147
|
l({ type: String }),
|
|
148
|
-
h(s, $,
|
|
148
|
+
h(s, $, r.aspectRatio)
|
|
149
149
|
], a.prototype, "aspectRatio");
|
|
150
150
|
i([
|
|
151
151
|
l({ type: String })
|
|
@@ -164,7 +164,7 @@ i([
|
|
|
164
164
|
], a.prototype, "hideDefaultPlaceholder");
|
|
165
165
|
i([
|
|
166
166
|
l({ type: String }),
|
|
167
|
-
h(s, D,
|
|
167
|
+
h(s, D, r.backgroundColor)
|
|
168
168
|
], a.prototype, "backgroundColor");
|
|
169
169
|
i([
|
|
170
170
|
l({ type: Object })
|
|
@@ -175,13 +175,13 @@ i([
|
|
|
175
175
|
i([
|
|
176
176
|
C()
|
|
177
177
|
], a.prototype, "_hasError");
|
|
178
|
-
|
|
178
|
+
P(s, a);
|
|
179
179
|
export {
|
|
180
180
|
a as PieThumbnail,
|
|
181
181
|
$ as aspectRatios,
|
|
182
182
|
x as backgroundColorClassNames,
|
|
183
183
|
D as backgroundColors,
|
|
184
|
-
|
|
184
|
+
r as defaultProps,
|
|
185
185
|
R as sizes,
|
|
186
186
|
I as variants
|
|
187
187
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -94,7 +94,7 @@ export declare interface ThumbnailProps {
|
|
|
94
94
|
*/
|
|
95
95
|
disabled?: boolean;
|
|
96
96
|
/**
|
|
97
|
-
* When true,
|
|
97
|
+
* When true, extra spacing around the thumbnail container is applied.
|
|
98
98
|
*/
|
|
99
99
|
hasPadding?: boolean;
|
|
100
100
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-thumbnail",
|
|
3
3
|
"description": "PIE Design System Thumbnail built using Web Components",
|
|
4
|
-
"version": "0.6.
|
|
4
|
+
"version": "0.6.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"**/*.d.ts"
|
|
14
14
|
],
|
|
15
15
|
"pieMetadata": {
|
|
16
|
-
"componentStatus": "
|
|
16
|
+
"componentStatus": "beta"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
19
|
"build": "run -T vite build",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 33 32"><path d="M32.399 15.493c-.102-.255-1.495-2.753-4.081-5.888a.507.507 0 0 1-.119-.267 48.162 48.162 0 0 0-.778-5.436.88.88 0 0 0-.282-.467.928.928 0 0 0-.509-.221l-2.679-.323a.84.84 0 0 0-.071 0c-.15 0-.294.058-.401.161s-.166.243-.166.389v.906c0 .009-.004.017-.011.023s-.015.01-.025.01c-.015-.003-.018-.006-.021-.008A37.89 37.89 0 0 0 17.829.395 2.43 2.43 0 0 0 16.493 0c-.473 0-.936.138-1.328.395C5.887 5.956.782 15.005.585 15.493a.87.87 0 0 0 .004.757.9.9 0 0 0 .246.306.93.93 0 0 0 .356.176l2.672.5c.177.047.335.144.454.279s.193.302.213.479c.023.457.527 10.691 1.162 13.345a.89.89 0 0 0 .328.479c.161.12.358.186.561.185h.02l4.528-.084h.129c.079-.001.155-.032.211-.086s.087-.128.087-.205l-.306-5.093c0-.054-.007-.121-.01-.176a.54.54 0 0 0-.08-.254.56.56 0 0 0-.193-.188c-.407-.236-.747-.566-.992-.96s-.385-.841-.41-1.3c-.142-3.589-.211-7.735-.008-10.981.003-.138.062-.27.165-.366a.545.545 0 0 1 .76.016c.099.1.152.234.149.372v.041c-.132 2.163-.142 4.72-.095 7.244a.61.61 0 0 0 .195.435.65.65 0 0 0 .454.174.65.65 0 0 0 .448-.189.61.61 0 0 0 .179-.441c-.048-2.54-.035-5.114.099-7.285.003-.138.062-.27.165-.366a.545.545 0 0 1 .76.016c.099.1.152.234.149.372v.041c-.132 2.152-.142 4.694-.096 7.204a.61.61 0 0 0 .194.435.65.65 0 0 0 .454.175.65.65 0 0 0 .448-.188.61.61 0 0 0 .18-.441c-.047-2.529-.034-5.093.101-7.249.003-.138.063-.27.165-.366s.241-.148.383-.145.278.061.377.161.152.234.149.372v.041c-.193 3.154-.13 7.147 0 10.651a.26.26 0 0 1 0 .033v.086c0 .455-.113.902-.331 1.305s-.533.747-.919 1.004a.54.54 0 0 0-.166.177.52.52 0 0 0-.07.229s-.067.538.179 3.144l.241 2.284c.009.067.043.128.095.172s.119.068.188.068h4.053l1.516.012c.07 0 .137-.024.189-.069s.086-.107.094-.174c.35-3.123.434-4.879.434-4.879-.002-.075-.032-.146-.084-.201s-.123-.09-.199-.099l-1.843-.246c-.122-.015-.238-.064-.331-.142s-.161-.181-.195-.297a.83.83 0 0 1-.024-.275c.747-10.411 4.282-13.92 4.282-13.92a1.05 1.05 0 0 1 .172-.144.575.575 0 0 1 .491-.082.57.57 0 0 1 .223.122.55.55 0 0 1 .145.205.97.97 0 0 1 .045.251c.306 3.272.157 8.842-.033 13.186l-.353 6.583c0 .057.023.112.065.152s.098.063.156.063l3.037.062h.021a.94.94 0 0 0 .561-.186.892.892 0 0 0 .328-.479c.635-2.654 1.134-12.887 1.161-13.344a.877.877 0 0 1 .214-.479.92.92 0 0 1 .453-.28l2.672-.5a.92.92 0 0 0 .499-.317.873.873 0 0 0 .194-.548.885.885 0 0 0-.101-.368z" fill="#efedea"/></svg>
|
package/src/defs.ts
CHANGED