@justeattakeaway/pie-toast 0.9.7 → 0.10.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 +18 -1
- package/custom-elements.json +0 -6
- package/dist/index.d.ts +1 -5
- package/dist/index.js +69 -74
- package/dist/react.d.ts +1 -5
- package/package.json +3 -3
- package/src/index.ts +1 -7
- package/src/toast.scss +4 -43
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
- [Slots](#slots)
|
|
18
18
|
- [CSS Variables](#css-variables)
|
|
19
19
|
- [Events](#events)
|
|
20
|
+
- [Animations](#animations)
|
|
20
21
|
- [Usage Examples](#usage-examples)
|
|
21
22
|
- [Questions and Support](#questions-and-support)
|
|
22
23
|
- [Contributing](#contributing)
|
|
@@ -54,7 +55,23 @@ This component does not expose any CSS variables for style overrides.
|
|
|
54
55
|
|-----------------------------------|---------------|--------------------------------------------------------------------------------------------------|
|
|
55
56
|
| `pie-toast-close` | `CustomEvent` | Triggered when the user interacts with the close icon or when the toast auto dismiss. |
|
|
56
57
|
| `pie-toast-open` | `CustomEvent` | Triggered when the toast is opened. |
|
|
57
|
-
| `pie-toast-leading-action-click`| `CustomEvent` | Triggered when the user interacts with the leading action.
|
|
58
|
+
| `pie-toast-leading-action-click`| `CustomEvent` | Triggered when the user interacts with the leading action.
|
|
59
|
+
|
|
60
|
+
### Animations
|
|
61
|
+
|
|
62
|
+
`pie-toast` does not include any animations to keep the component agnostic. We generally recommend using [pie-toast-provider](https://webc.pie.design/?path=/docs/components-toast-provider--overview) to manage toasts in your application, which already provides the animation aligned to PIE specs. However, in case you would like to have full control of the toasts and require animation, you may use the slide animation reusable classes from [pie-css](https://github.com/justeattakeaway/pie/blob/main/packages/tools/pie-css/README.md#reusable-animations).
|
|
63
|
+
|
|
64
|
+
You will need to listen to the `pie-toast-open` and `pie-toast-close` events to toggle the following animation classes:
|
|
65
|
+
|
|
66
|
+
| Class | Description |
|
|
67
|
+
| -------------------------- | ---------------|
|
|
68
|
+
| `.pie-animation--slide-in` | Slides an element in from the left. |
|
|
69
|
+
| `.pie-animation--slide-out`| Slides an element out to the left. |
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
**Customization:**
|
|
73
|
+
|
|
74
|
+
The starting position of the slide animation can be customized by overriding the `--pie-animation-slide-translate-start` CSS variable.
|
|
58
75
|
|
|
59
76
|
## Usage Examples
|
|
60
77
|
|
package/custom-elements.json
CHANGED
|
@@ -427,12 +427,6 @@
|
|
|
427
427
|
"fieldName": "duration"
|
|
428
428
|
}
|
|
429
429
|
],
|
|
430
|
-
"mixins": [
|
|
431
|
-
{
|
|
432
|
-
"name": "RtlMixin",
|
|
433
|
-
"package": "@justeattakeaway/pie-webc-core"
|
|
434
|
-
}
|
|
435
|
-
],
|
|
436
430
|
"superclass": {
|
|
437
431
|
"name": "PieElement",
|
|
438
432
|
"package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
|
-
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import type { PropertyValues } from 'lit';
|
|
6
|
-
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
7
5
|
import type { TemplateResult } from 'lit';
|
|
8
6
|
|
|
9
7
|
export declare type ActionProps = {
|
|
@@ -52,7 +50,7 @@ export declare const ON_TOAST_OPEN_EVENT: string;
|
|
|
52
50
|
* @event {CustomEvent} pie-toast-open - when the toast is opened.
|
|
53
51
|
* @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
|
|
54
52
|
*/
|
|
55
|
-
export declare class PieToast extends
|
|
53
|
+
export declare class PieToast extends PieElement implements ToastProps {
|
|
56
54
|
message: string;
|
|
57
55
|
isOpen: boolean;
|
|
58
56
|
variant: "neutral" | "info" | "warning" | "success" | "error";
|
|
@@ -173,8 +171,6 @@ export declare class PieToast extends PieToast_base implements ToastProps {
|
|
|
173
171
|
render(): TemplateResult<1>;
|
|
174
172
|
}
|
|
175
173
|
|
|
176
|
-
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
177
|
-
|
|
178
174
|
export declare interface ToastProps {
|
|
179
175
|
/**
|
|
180
176
|
* When true, the toast is set to be open and visible.
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as $, unsafeCSS as y, nothing as d, html as l } from "lit";
|
|
2
2
|
import { property as u, query as b } from "lit/decorators.js";
|
|
3
|
-
import { classMap as
|
|
4
|
-
import {
|
|
3
|
+
import { classMap as x } from "lit/directives/class-map.js";
|
|
4
|
+
import { validPropertyValues as A, safeCustomElement as w, dispatchCustomEvent as f } from "@justeattakeaway/pie-webc-core";
|
|
5
5
|
import "@justeattakeaway/pie-icon-button";
|
|
6
6
|
import "@justeattakeaway/pie-button";
|
|
7
7
|
import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
|
|
@@ -9,14 +9,14 @@ 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
|
|
12
|
+
const g = class g extends $ {
|
|
13
13
|
willUpdate() {
|
|
14
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
14
|
+
this.getAttribute("v") || this.setAttribute("v", g.v);
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
|
|
18
|
-
let
|
|
19
|
-
const
|
|
17
|
+
g.v = "0.10.0";
|
|
18
|
+
let m = g;
|
|
19
|
+
const C = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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);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)}.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)}", _ = ["neutral", "info", "warning", "success", "error"], o = "pie-toast", i = "c-toast", O = `${o}-close`, E = `${o}-open`, T = `${o}-leading-action-click`, p = {
|
|
20
20
|
message: "",
|
|
21
21
|
isOpen: !0,
|
|
22
22
|
variant: "neutral",
|
|
@@ -25,12 +25,12 @@ const E = "*,*:after,*:before{box-sizing:inherit}.c-toast{--toast-border-radius:
|
|
|
25
25
|
isMultiline: !1,
|
|
26
26
|
duration: 5e3
|
|
27
27
|
};
|
|
28
|
-
var
|
|
29
|
-
for (var
|
|
30
|
-
(v = t[
|
|
31
|
-
return
|
|
28
|
+
var k = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (t, r, c, s) => {
|
|
29
|
+
for (var n = s > 1 ? void 0 : s ? B(r, c) : r, h = t.length - 1, v; h >= 0; h--)
|
|
30
|
+
(v = t[h]) && (n = (s ? v(r, c, n) : v(n)) || n);
|
|
31
|
+
return s && n && k(r, c, n), n;
|
|
32
32
|
};
|
|
33
|
-
let e = class extends
|
|
33
|
+
let e = class extends m {
|
|
34
34
|
constructor() {
|
|
35
35
|
super(...arguments), this.message = p.message, this.isOpen = p.isOpen, this.variant = p.variant, this.isStrong = p.isStrong, this.isDismissible = p.isDismissible, this.isMultiline = p.isMultiline, this.duration = p.duration, this._timeoutId = null, this._abortController = null;
|
|
36
36
|
}
|
|
@@ -63,12 +63,12 @@ let e = class extends C(f) {
|
|
|
63
63
|
*
|
|
64
64
|
* @private
|
|
65
65
|
*/
|
|
66
|
-
addListenersToElement(t,
|
|
67
|
-
t && (t.addEventListener(
|
|
66
|
+
addListenersToElement(t, r, c, s) {
|
|
67
|
+
t && (t.addEventListener(r, () => {
|
|
68
68
|
this._timeoutId && clearTimeout(this._timeoutId);
|
|
69
|
-
}, { signal:
|
|
69
|
+
}, { signal: s }), t.addEventListener(c, () => {
|
|
70
70
|
this.setAutoDismiss();
|
|
71
|
-
}, { signal:
|
|
71
|
+
}, { signal: s }));
|
|
72
72
|
}
|
|
73
73
|
/**
|
|
74
74
|
* It creates all event listeners to handle the auto-dismiss capability
|
|
@@ -88,7 +88,7 @@ let e = class extends C(f) {
|
|
|
88
88
|
* It aborts all event listeners when toast is closed.
|
|
89
89
|
*/
|
|
90
90
|
async updated(t) {
|
|
91
|
-
t.has("isOpen") && this.isOpen && (
|
|
91
|
+
t.has("isOpen") && this.isOpen && (f(this, E, { targetNotification: this }), this.duration !== null && this.createAutoDismissEventListeners()), t.has("isOpen") && !this.isOpen && this.abortAndCleanEventListeners();
|
|
92
92
|
}
|
|
93
93
|
/**
|
|
94
94
|
* It handle the action button action.
|
|
@@ -96,7 +96,7 @@ let e = class extends C(f) {
|
|
|
96
96
|
* @private
|
|
97
97
|
*/
|
|
98
98
|
handleActionClick() {
|
|
99
|
-
|
|
99
|
+
f(this, T, { targetNotification: this });
|
|
100
100
|
}
|
|
101
101
|
/**
|
|
102
102
|
* Render the action button depending on action type and its action.
|
|
@@ -107,16 +107,16 @@ let e = class extends C(f) {
|
|
|
107
107
|
* @private
|
|
108
108
|
*/
|
|
109
109
|
renderActionButton(t) {
|
|
110
|
-
const { text:
|
|
110
|
+
const { text: r, ariaLabel: c } = t;
|
|
111
111
|
return l`
|
|
112
112
|
<pie-button
|
|
113
113
|
variant="${this.shouldNotUseInverseBtnVariant() ? "ghost" : "ghost-inverse"}"
|
|
114
114
|
size="xsmall"
|
|
115
|
-
aria-label="${
|
|
115
|
+
aria-label="${c || d}"
|
|
116
116
|
@click="${() => this.handleActionClick()}"
|
|
117
|
-
data-test-id="${
|
|
117
|
+
data-test-id="${o}-leading-action"
|
|
118
118
|
type="button">
|
|
119
|
-
${
|
|
119
|
+
${r}
|
|
120
120
|
</pie-button>
|
|
121
121
|
`;
|
|
122
122
|
}
|
|
@@ -130,7 +130,7 @@ let e = class extends C(f) {
|
|
|
130
130
|
renderFooter() {
|
|
131
131
|
const { leadingAction: t } = this;
|
|
132
132
|
return l`
|
|
133
|
-
<footer class="${
|
|
133
|
+
<footer class="${i}-footer" data-test-id="${o}-footer" >
|
|
134
134
|
${t ? this.renderActionButton(t) : d}
|
|
135
135
|
</footer>
|
|
136
136
|
`;
|
|
@@ -146,7 +146,7 @@ let e = class extends C(f) {
|
|
|
146
146
|
<pie-icon-button
|
|
147
147
|
variant="${this.shouldNotUseInverseBtnVariant() ? "ghost-secondary" : "ghost-inverse"}"
|
|
148
148
|
size="xsmall"
|
|
149
|
-
data-test-id="${
|
|
149
|
+
data-test-id="${o}-close"
|
|
150
150
|
@click="${this.closeToastComponent}">
|
|
151
151
|
<icon-close></icon-close>
|
|
152
152
|
</pie-icon-button>`;
|
|
@@ -161,7 +161,7 @@ let e = class extends C(f) {
|
|
|
161
161
|
*/
|
|
162
162
|
renderMessage(t) {
|
|
163
163
|
return l`
|
|
164
|
-
<span data-test-id="${
|
|
164
|
+
<span data-test-id="${o}-message">
|
|
165
165
|
${t}
|
|
166
166
|
</span>
|
|
167
167
|
`;
|
|
@@ -173,7 +173,7 @@ let e = class extends C(f) {
|
|
|
173
173
|
* @private
|
|
174
174
|
*/
|
|
175
175
|
closeToastComponent() {
|
|
176
|
-
this.isOpen = !1,
|
|
176
|
+
this.isOpen = !1, f(this, O, { targetNotification: this }), this.abortAndCleanEventListeners();
|
|
177
177
|
}
|
|
178
178
|
/**
|
|
179
179
|
* Util method that returns an icon from a variant that has default icon.
|
|
@@ -183,13 +183,13 @@ let e = class extends C(f) {
|
|
|
183
183
|
getVariantIcon() {
|
|
184
184
|
switch (this.variant) {
|
|
185
185
|
case "info":
|
|
186
|
-
return l`<icon-info-circle class="${
|
|
186
|
+
return l`<icon-info-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
|
|
187
187
|
case "success":
|
|
188
|
-
return l`<icon-check-circle class="${
|
|
188
|
+
return l`<icon-check-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
|
|
189
189
|
case "warning":
|
|
190
|
-
return l`<icon-alert-triangle class="${
|
|
190
|
+
return l`<icon-alert-triangle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
|
|
191
191
|
case "error":
|
|
192
|
-
return l`<icon-alert-circle class="${
|
|
192
|
+
return l`<icon-alert-circle class="${i}-icon" size="s" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
|
|
193
193
|
default:
|
|
194
194
|
return d;
|
|
195
195
|
}
|
|
@@ -214,84 +214,79 @@ let e = class extends C(f) {
|
|
|
214
214
|
}
|
|
215
215
|
render() {
|
|
216
216
|
const {
|
|
217
|
-
|
|
218
|
-
variant: a,
|
|
217
|
+
variant: t,
|
|
219
218
|
message: r,
|
|
220
219
|
isDismissible: c,
|
|
221
|
-
leadingAction:
|
|
222
|
-
isMultiline:
|
|
223
|
-
isStrong:
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
[
|
|
227
|
-
[`${
|
|
228
|
-
[`${
|
|
229
|
-
[`${s}--${a}`]: !0,
|
|
230
|
-
[`${s}--strong`]: v,
|
|
231
|
-
[`${s}--animate-in`]: t,
|
|
232
|
-
[`${s}--animate-out`]: !t
|
|
220
|
+
leadingAction: s,
|
|
221
|
+
isMultiline: n,
|
|
222
|
+
isStrong: h
|
|
223
|
+
} = this, v = {
|
|
224
|
+
[i]: !0,
|
|
225
|
+
[`${i}--multiline`]: n,
|
|
226
|
+
[`${i}--${t}`]: !0,
|
|
227
|
+
[`${i}--strong`]: h
|
|
233
228
|
};
|
|
234
229
|
return l`
|
|
235
230
|
<div
|
|
236
|
-
role="${
|
|
237
|
-
data-test-id="${
|
|
238
|
-
class="${
|
|
239
|
-
<div class="${
|
|
240
|
-
<div class="${
|
|
241
|
-
${this.variantHasIcon(
|
|
231
|
+
role="${t === "error" ? "alert" : "status"}"
|
|
232
|
+
data-test-id="${o}"
|
|
233
|
+
class="${x(v)}">
|
|
234
|
+
<div class="${i}-contentArea">
|
|
235
|
+
<div class="${i}-messageArea">
|
|
236
|
+
${this.variantHasIcon(t) ? this.getVariantIcon() : d}
|
|
242
237
|
${r === "" ? d : this.renderMessage(r)}
|
|
243
238
|
</div>
|
|
244
|
-
<div class="${
|
|
245
|
-
${!
|
|
239
|
+
<div class="${i}-actionsArea">
|
|
240
|
+
${!n && (s != null && s.text) ? this.renderActionButton(s) : d}
|
|
246
241
|
${c ? this.renderCloseButton() : d}
|
|
247
242
|
</div>
|
|
248
243
|
</div>
|
|
249
|
-
${
|
|
244
|
+
${n && (s != null && s.text) ? this.renderFooter() : d}
|
|
250
245
|
</div>`;
|
|
251
246
|
}
|
|
252
247
|
};
|
|
253
|
-
e.styles =
|
|
254
|
-
|
|
248
|
+
e.styles = y(C);
|
|
249
|
+
a([
|
|
255
250
|
u({ type: String })
|
|
256
251
|
], e.prototype, "message", 2);
|
|
257
|
-
|
|
252
|
+
a([
|
|
258
253
|
u({ type: Boolean })
|
|
259
254
|
], e.prototype, "isOpen", 2);
|
|
260
|
-
|
|
255
|
+
a([
|
|
261
256
|
u({ type: String }),
|
|
262
|
-
|
|
257
|
+
A(o, _, p.variant)
|
|
263
258
|
], e.prototype, "variant", 2);
|
|
264
|
-
|
|
259
|
+
a([
|
|
265
260
|
u({ type: Boolean })
|
|
266
261
|
], e.prototype, "isStrong", 2);
|
|
267
|
-
|
|
262
|
+
a([
|
|
268
263
|
u({ type: Boolean })
|
|
269
264
|
], e.prototype, "isDismissible", 2);
|
|
270
|
-
|
|
265
|
+
a([
|
|
271
266
|
u({ type: Boolean })
|
|
272
267
|
], e.prototype, "isMultiline", 2);
|
|
273
|
-
|
|
268
|
+
a([
|
|
274
269
|
u({ type: Object })
|
|
275
270
|
], e.prototype, "leadingAction", 2);
|
|
276
|
-
|
|
271
|
+
a([
|
|
277
272
|
u({ type: Number })
|
|
278
273
|
], e.prototype, "duration", 2);
|
|
279
|
-
|
|
274
|
+
a([
|
|
280
275
|
b("pie-button")
|
|
281
276
|
], e.prototype, "actionButton", 2);
|
|
282
|
-
|
|
277
|
+
a([
|
|
283
278
|
b("pie-icon-button")
|
|
284
279
|
], e.prototype, "closeButton", 2);
|
|
285
|
-
e =
|
|
286
|
-
|
|
280
|
+
e = a([
|
|
281
|
+
w("pie-toast")
|
|
287
282
|
], e);
|
|
288
283
|
export {
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
284
|
+
O as ON_TOAST_CLOSE_EVENT,
|
|
285
|
+
T as ON_TOAST_LEADING_ACTION_CLICK_EVENT,
|
|
286
|
+
E as ON_TOAST_OPEN_EVENT,
|
|
292
287
|
e as PieToast,
|
|
293
|
-
|
|
294
|
-
|
|
288
|
+
i as componentClass,
|
|
289
|
+
o as componentSelector,
|
|
295
290
|
p as defaultProps,
|
|
296
|
-
|
|
291
|
+
_ as variants
|
|
297
292
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
import type { CSSResult } from 'lit';
|
|
3
|
-
import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
|
|
4
3
|
import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
|
|
5
4
|
import type { PropertyValues } from 'lit';
|
|
6
5
|
import * as React_2 from 'react';
|
|
7
|
-
import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
|
|
8
6
|
import type { TemplateResult } from 'lit';
|
|
9
7
|
|
|
10
8
|
export declare type ActionProps = {
|
|
@@ -55,7 +53,7 @@ export declare const PieToast: React_2.ForwardRefExoticComponent<ToastProps & Re
|
|
|
55
53
|
* @event {CustomEvent} pie-toast-open - when the toast is opened.
|
|
56
54
|
* @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
|
|
57
55
|
*/
|
|
58
|
-
declare class PieToast_2 extends
|
|
56
|
+
declare class PieToast_2 extends PieElement implements ToastProps {
|
|
59
57
|
message: string;
|
|
60
58
|
isOpen: boolean;
|
|
61
59
|
variant: "neutral" | "info" | "warning" | "success" | "error";
|
|
@@ -176,8 +174,6 @@ declare class PieToast_2 extends PieToast_base implements ToastProps {
|
|
|
176
174
|
render(): TemplateResult<1>;
|
|
177
175
|
}
|
|
178
176
|
|
|
179
|
-
declare const PieToast_base: GenericConstructor<RTLInterface> & typeof PieElement;
|
|
180
|
-
|
|
181
177
|
declare type PieToastEvents = {
|
|
182
178
|
onPieToastClose?: (event: CustomEvent) => void;
|
|
183
179
|
onPieToastOpen?: (event: CustomEvent) => void;
|
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.10.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
|
-
"@justeattakeaway/pie-css": "0.
|
|
43
|
+
"@justeattakeaway/pie-css": "0.17.0",
|
|
44
44
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-button": "1.6.
|
|
48
|
+
"@justeattakeaway/pie-button": "1.6.6",
|
|
49
49
|
"@justeattakeaway/pie-icon-button": "2.0.2",
|
|
50
50
|
"@justeattakeaway/pie-icons-webc": "1.12.0",
|
|
51
51
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
package/src/index.ts
CHANGED
|
@@ -9,7 +9,6 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
|
|
|
9
9
|
import { property, query } from 'lit/decorators.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
11
|
import {
|
|
12
|
-
RtlMixin,
|
|
13
12
|
dispatchCustomEvent,
|
|
14
13
|
safeCustomElement,
|
|
15
14
|
validPropertyValues,
|
|
@@ -45,7 +44,7 @@ export * from './defs';
|
|
|
45
44
|
* @event {CustomEvent} pie-toast-leading-action-click - when the user interacts with the leading action.
|
|
46
45
|
*/
|
|
47
46
|
@safeCustomElement('pie-toast')
|
|
48
|
-
export class PieToast extends
|
|
47
|
+
export class PieToast extends PieElement implements ToastProps {
|
|
49
48
|
@property({ type: String })
|
|
50
49
|
public message = defaultProps.message;
|
|
51
50
|
|
|
@@ -314,24 +313,19 @@ export class PieToast extends RtlMixin(PieElement) implements ToastProps {
|
|
|
314
313
|
|
|
315
314
|
render () {
|
|
316
315
|
const {
|
|
317
|
-
isOpen,
|
|
318
316
|
variant,
|
|
319
317
|
message,
|
|
320
318
|
isDismissible,
|
|
321
319
|
leadingAction,
|
|
322
320
|
isMultiline,
|
|
323
321
|
isStrong,
|
|
324
|
-
isRTL,
|
|
325
322
|
} = this;
|
|
326
323
|
|
|
327
324
|
const componentWrapperClasses = {
|
|
328
325
|
[componentClass]: true,
|
|
329
|
-
[`${componentClass}--rtl`]: isRTL,
|
|
330
326
|
[`${componentClass}--multiline`]: isMultiline,
|
|
331
327
|
[`${componentClass}--${variant}`]: true,
|
|
332
328
|
[`${componentClass}--strong`]: isStrong,
|
|
333
|
-
[`${componentClass}--animate-in`]: isOpen,
|
|
334
|
-
[`${componentClass}--animate-out`]: !isOpen,
|
|
335
329
|
};
|
|
336
330
|
|
|
337
331
|
return html`
|
package/src/toast.scss
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
|
|
3
|
+
:host {
|
|
4
|
+
display: block;
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
.c-toast {
|
|
4
8
|
--toast-border-radius: var(--dt-radius-rounded-b);
|
|
5
9
|
--toast-background-color: var(--dt-color-container-inverse);
|
|
@@ -7,8 +11,6 @@
|
|
|
7
11
|
--toast-font-size: #{p.font-size(--dt-font-body-s-size)};
|
|
8
12
|
--toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
|
|
9
13
|
--toast-icon-fill: var(--dt-color-content-default);
|
|
10
|
-
--toast-translate-start: -100%;
|
|
11
|
-
--toast-translate-end: 0;
|
|
12
14
|
|
|
13
15
|
display: flex;
|
|
14
16
|
flex-direction: column;
|
|
@@ -25,29 +27,8 @@
|
|
|
25
27
|
color: var(--toast-font-color);
|
|
26
28
|
font-size: var(--toast-font-size);
|
|
27
29
|
line-height: var(--toast-line-height);
|
|
28
|
-
transition-property: all;
|
|
29
|
-
transition-duration: var(--dt-motion-timing-100);
|
|
30
|
-
transition-timing-function: var(--dt-motion-easing-in);
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
.c-toast--rtl {
|
|
34
|
-
--toast-translate-start: 100%;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.c-toast--animate-in {
|
|
38
|
-
animation-duration: var(--dt-motion-timing-200);
|
|
39
|
-
animation-name: animate-in;
|
|
40
|
-
animation-timing-function: var(--dt-motion-easing-out);
|
|
41
|
-
transform: translateX(var(--toast-translate-end));
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.c-toast--animate-out {
|
|
45
|
-
animation-duration: var(--dt-motion-timing-100);
|
|
46
|
-
animation-name: animate-out;
|
|
47
|
-
animation-timing-function: var(--dt-motion-easing-in);
|
|
48
|
-
transform: translateX(var(--toast-translate-start));
|
|
49
|
-
opacity: 0;
|
|
50
|
-
}
|
|
51
32
|
|
|
52
33
|
.c-toast--info {
|
|
53
34
|
--toast-icon-fill: var(--dt-color-support-info-inverse);
|
|
@@ -143,24 +124,4 @@
|
|
|
143
124
|
|
|
144
125
|
.c-toast-icon {
|
|
145
126
|
color: var(--toast-icon-fill);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
@keyframes animate-in {
|
|
149
|
-
from {
|
|
150
|
-
transform: translateX(var(--toast-translate-start));
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
to {
|
|
154
|
-
transform: translateX(var(--toast-translate-end));
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
@keyframes animate-out {
|
|
159
|
-
from {
|
|
160
|
-
transform: translateX(var(--toast-translate-end));
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
to {
|
|
164
|
-
transform: translateX(var(--toast-translate-start));
|
|
165
|
-
}
|
|
166
127
|
}
|