@justeattakeaway/pie-toast 0.5.1 → 0.6.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/dist/index.js +19 -19
- package/package.json +3 -3
- package/src/toast.scss +0 -9
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement as x, unsafeCSS as A, html as c, nothing as l } from "lit";
|
|
2
|
-
import { property as p, query as
|
|
2
|
+
import { property as p, query as f } from "lit/decorators.js";
|
|
3
3
|
import { classMap as C } from "lit/directives/class-map.js";
|
|
4
4
|
import { RtlMixin as w, dispatchCustomEvent as v, validPropertyValues as k, defineCustomElement as E } from "@justeattakeaway/pie-webc-core";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
@@ -9,7 +9,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
|
|
|
9
9
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
|
|
10
10
|
import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
|
|
11
11
|
import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
|
|
12
|
-
const _ = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-
|
|
12
|
+
const _ = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius: var(--dt-radius-rounded-b);--toast-background-color: var(--dt-color-container-inverse);--toast-font-color: var(--dt-color-content-inverse);--toast-font-size: calc(var(--dt-font-body-s-size) * 1px);--toast-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--toast-icon-fill: var(--dt-color-content-default);--toast-translate-start: -100%;--toast-translate-end: 0;display:flex;flex-direction:column;justify-content:center;min-height:48px;max-height:122px;min-width:300px;max-width:420px;padding:var(--dt-spacing-b) var(--dt-spacing-c) var(--dt-spacing-b) var(--dt-spacing-d);border-radius:var(--toast-border-radius);background-color:var(--toast-background-color);box-shadow:var(--dt-elevation-03);color:var(--toast-font-color);font-size:var(--toast-font-size);line-height:var(--toast-line-height);transition-property:all;transition-duration:var(--dt-motion-timing-100);transition-timing-function:var(--dt-motion-easing-in)}.c-toast--rtl{--toast-translate-start: 100%}.c-toast--animate-in{animation-duration:var(--dt-motion-timing-200);animation-name:animate-in;animation-timing-function:var(--dt-motion-easing-out);transform:translate(var(--toast-translate-end))}.c-toast--animate-out{animation-duration:var(--dt-motion-timing-100);animation-name:animate-out;animation-timing-function:var(--dt-motion-easing-in);transform:translate(var(--toast-translate-start));opacity:0}.c-toast--info{--toast-icon-fill: var(--dt-color-support-info-inverse)}.c-toast--info.c-toast--strong{--toast-background-color: var(--dt-color-support-info);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--warning{--toast-icon-fill: var(--dt-color-support-warning-inverse)}.c-toast--warning.c-toast--strong{--toast-background-color: var(--dt-color-support-warning);--toast-icon-fill: var(--dt-color-content-dark);--toast-font-color: var(--dt-color-content-dark)}.c-toast--success{--toast-icon-fill: var(--dt-color-support-positive-inverse)}.c-toast--success.c-toast--strong{--toast-background-color: var(--dt-color-support-positive);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast--error{--toast-icon-fill: var(--dt-color-support-error-inverse)}.c-toast--error.c-toast--strong{--toast-background-color: var(--dt-color-support-error);--toast-icon-fill: var(--dt-color-content-inverse)}.c-toast-contentArea{display:flex;gap:var(--dt-spacing-b);justify-content:space-between}.c-toast-messageArea{display:flex;align-items:center;gap:var(--dt-spacing-b);padding:6px var(--dt-spacing-a) 6px 0;overflow:hidden}.c-toast-messageArea span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.c-toast-actionsArea{display:flex;gap:var(--dt-spacing-b);flex-shrink:0}.c-toast--multiline .c-toast-contentArea{align-items:flex-start;gap:0}.c-toast--multiline .c-toast-messageArea{align-items:flex-start;padding-block-end:var(--dt-spacing-b)}.c-toast--multiline .c-toast-messageArea span{max-height:60px;white-space:inherit;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.c-toast-footer{display:flex;justify-content:flex-end}.c-toast-icon{color:var(--toast-icon-fill)}@keyframes animate-in{0%{transform:translate(var(--toast-translate-start))}to{transform:translate(var(--toast-translate-end))}}@keyframes animate-out{0%{transform:translate(var(--toast-translate-end))}to{transform:translate(var(--toast-translate-start))}}", O = ["neutral", "info", "warning", "success", "error"], s = "pie-toast", o = "c-toast", T = `${s}-close`, L = `${s}-open`, B = `${s}-leading-action-click`, d = {
|
|
13
13
|
message: "",
|
|
14
14
|
isOpen: !0,
|
|
15
15
|
variant: "neutral",
|
|
@@ -18,10 +18,10 @@ const _ = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
|
|
|
18
18
|
isMultiline: !1,
|
|
19
19
|
duration: 5e3
|
|
20
20
|
};
|
|
21
|
-
var N = Object.defineProperty, r = (
|
|
22
|
-
for (var e = void 0,
|
|
23
|
-
(m =
|
|
24
|
-
return e && N(t,
|
|
21
|
+
var N = Object.defineProperty, r = (g, t, a, u) => {
|
|
22
|
+
for (var e = void 0, n = g.length - 1, m; n >= 0; n--)
|
|
23
|
+
(m = g[n]) && (e = m(t, a, e) || e);
|
|
24
|
+
return e && N(t, a, e), e;
|
|
25
25
|
};
|
|
26
26
|
const h = class h extends w(x) {
|
|
27
27
|
constructor() {
|
|
@@ -56,8 +56,8 @@ const h = class h extends w(x) {
|
|
|
56
56
|
*
|
|
57
57
|
* @private
|
|
58
58
|
*/
|
|
59
|
-
addListenersToElement(t,
|
|
60
|
-
t && (t.addEventListener(
|
|
59
|
+
addListenersToElement(t, a, u, e) {
|
|
60
|
+
t && (t.addEventListener(a, () => {
|
|
61
61
|
this._timeoutId && clearTimeout(this._timeoutId);
|
|
62
62
|
}, { signal: e }), t.addEventListener(u, () => {
|
|
63
63
|
this.setAutoDismiss();
|
|
@@ -100,7 +100,7 @@ const h = class h extends w(x) {
|
|
|
100
100
|
* @private
|
|
101
101
|
*/
|
|
102
102
|
renderActionButton(t) {
|
|
103
|
-
const { text:
|
|
103
|
+
const { text: a, ariaLabel: u } = t;
|
|
104
104
|
return c`
|
|
105
105
|
<pie-button
|
|
106
106
|
variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
|
|
@@ -109,7 +109,7 @@ const h = class h extends w(x) {
|
|
|
109
109
|
@click="${() => this.handleActionClick()}"
|
|
110
110
|
data-test-id="${s}-leading-action"
|
|
111
111
|
type="button">
|
|
112
|
-
${
|
|
112
|
+
${a}
|
|
113
113
|
</pie-button>
|
|
114
114
|
`;
|
|
115
115
|
}
|
|
@@ -208,10 +208,10 @@ const h = class h extends w(x) {
|
|
|
208
208
|
render() {
|
|
209
209
|
const {
|
|
210
210
|
isOpen: t,
|
|
211
|
-
variant:
|
|
211
|
+
variant: a,
|
|
212
212
|
message: u,
|
|
213
213
|
isDismissible: e,
|
|
214
|
-
leadingAction:
|
|
214
|
+
leadingAction: n,
|
|
215
215
|
isMultiline: m,
|
|
216
216
|
isStrong: b,
|
|
217
217
|
isRTL: $
|
|
@@ -219,27 +219,27 @@ const h = class h extends w(x) {
|
|
|
219
219
|
[o]: !0,
|
|
220
220
|
[`${o}--rtl`]: $,
|
|
221
221
|
[`${o}--multiline`]: m,
|
|
222
|
-
[`${o}--${
|
|
222
|
+
[`${o}--${a}`]: !0,
|
|
223
223
|
[`${o}--strong`]: b,
|
|
224
224
|
[`${o}--animate-in`]: t,
|
|
225
225
|
[`${o}--animate-out`]: !t
|
|
226
226
|
};
|
|
227
227
|
return c`
|
|
228
228
|
<div
|
|
229
|
-
role="${
|
|
229
|
+
role="${a === "error" ? "alert" : "status"}"
|
|
230
230
|
data-test-id="${s}"
|
|
231
231
|
class="${C(y)}">
|
|
232
232
|
<div class="${o}-contentArea">
|
|
233
233
|
<div class="${o}-messageArea">
|
|
234
|
-
${this.variantHasIcon(
|
|
234
|
+
${this.variantHasIcon(a) ? this.getVariantIcon() : l}
|
|
235
235
|
${u === "" ? l : this.renderMessage(u)}
|
|
236
236
|
</div>
|
|
237
237
|
<div class="${o}-actionsArea">
|
|
238
|
-
${!m && (
|
|
238
|
+
${!m && (n != null && n.text) ? this.renderActionButton(n) : l}
|
|
239
239
|
${e ? this.renderCloseButton() : l}
|
|
240
240
|
</div>
|
|
241
241
|
</div>
|
|
242
|
-
${m && (
|
|
242
|
+
${m && (n != null && n.text) ? this.renderFooter() : l}
|
|
243
243
|
</div>`;
|
|
244
244
|
}
|
|
245
245
|
};
|
|
@@ -271,10 +271,10 @@ r([
|
|
|
271
271
|
p({ type: Number })
|
|
272
272
|
], i.prototype, "duration");
|
|
273
273
|
r([
|
|
274
|
-
|
|
274
|
+
f("pie-button")
|
|
275
275
|
], i.prototype, "actionButton");
|
|
276
276
|
r([
|
|
277
|
-
|
|
277
|
+
f("pie-icon-button")
|
|
278
278
|
], i.prototype, "closeButton");
|
|
279
279
|
E(s, i);
|
|
280
280
|
export {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-toast",
|
|
3
3
|
"description": "PIE Design System Toast built using Web Components",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
44
|
"@justeattakeaway/pie-button": "1.1.0",
|
|
45
|
-
"@justeattakeaway/pie-icon-button": "1.
|
|
46
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
45
|
+
"@justeattakeaway/pie-icon-button": "1.1.0",
|
|
46
|
+
"@justeattakeaway/pie-icons-webc": "1.2.0",
|
|
47
47
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
48
48
|
},
|
|
49
49
|
"volta": {
|
package/src/toast.scss
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
|
-
@use '@justeattakeaway/pie-css/scss/settings' as *;
|
|
3
2
|
|
|
4
3
|
.c-toast {
|
|
5
4
|
--toast-border-radius: var(--dt-radius-rounded-b);
|
|
@@ -8,13 +7,9 @@
|
|
|
8
7
|
--toast-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
9
8
|
--toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
|
|
10
9
|
--toast-icon-fill: var(--dt-color-content-default);
|
|
11
|
-
--toast-offset: var(--dt-spacing-d);
|
|
12
10
|
--toast-translate-start: -100%;
|
|
13
11
|
--toast-translate-end: 0;
|
|
14
12
|
|
|
15
|
-
position: absolute;
|
|
16
|
-
inset-inline-start: var(--toast-offset);
|
|
17
|
-
inset-block-end: var(--toast-offset);
|
|
18
13
|
display: flex;
|
|
19
14
|
flex-direction: column;
|
|
20
15
|
justify-content: center;
|
|
@@ -33,10 +28,6 @@
|
|
|
33
28
|
transition-property: all;
|
|
34
29
|
transition-duration: var(--dt-motion-timing-100);
|
|
35
30
|
transition-timing-function: var(--dt-motion-easing-in);
|
|
36
|
-
|
|
37
|
-
@include media('>md') {
|
|
38
|
-
--toast-offset: var(--dt-spacing-e);
|
|
39
|
-
}
|
|
40
31
|
}
|
|
41
32
|
|
|
42
33
|
.c-toast--rtl {
|