@justeattakeaway/pie-toast 0.9.2 → 0.9.4
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 +81 -16
- package/custom-elements.json +7 -7
- package/dist/index.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,37 +1,102 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-toast
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-toast) | [Design Documentation](https://pie.design/components/toast) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-toast)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-toast">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-toast.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-toast` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-toast` is a Web Component built using the Lit library. It offers a simple and accessible toast 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
|
+
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|------------------|---------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
36
|
+
| `isOpen` | `true`, `false` | When true, the toast is set to be open and visible. | `false` |
|
|
37
|
+
| `variant` | `"neutral"`, `"info"`, `"warning"`, `"success"`, `"error"` | Sets the variant of the toast. | `"neutral"` |
|
|
38
|
+
| `isStrong` | `true`, `false` | When true, the toast is displayed with a strong visual style. | `false` |
|
|
39
|
+
| `isDismissible` | `true`, `false` | When true, allows dismissing the toast by clicking on the close button. | `false` |
|
|
40
|
+
| `message` | `string` | The message content of the toast. | `""` |
|
|
41
|
+
| `isMultiline` | `true`, `false` | Allows the message content to be displayed as multiline, limited to three rows. | `false` |
|
|
42
|
+
| `leadingAction` | `{ text: string, ariaLabel?: string }` | The leading action for the toast. | `undefined` |
|
|
43
|
+
| `duration` | `number`, `null` | Sets the duration of the toast in milliseconds before it auto-dismisses. `null` disables auto-dismiss. Defaults to 5 seconds if not specified. | `5000` |
|
|
44
|
+
|
|
45
|
+
### Slots
|
|
46
|
+
This component does not have any slots. All content is controlled through properties.
|
|
47
|
+
|
|
48
|
+
### CSS Variables
|
|
49
|
+
This component does not expose any CSS variables for style overrides.
|
|
50
|
+
|
|
51
|
+
### Events
|
|
52
|
+
|
|
53
|
+
| Event | Type | Description |
|
|
54
|
+
|-----------------------------------|---------------|--------------------------------------------------------------------------------------------------|
|
|
55
|
+
| `pie-toast-close` | `CustomEvent` | Triggered when the user interacts with the close icon or when the toast auto dismiss. |
|
|
56
|
+
| `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. |
|
|
21
58
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-toast
|
|
59
|
+
## Usage Examples
|
|
24
60
|
|
|
25
|
-
|
|
61
|
+
> ⚠️ By default, the toast will auto-dismiss in five seconds. To disable the auto-dismiss functionality, you must set the `duration` property to `null`.
|
|
62
|
+
|
|
63
|
+
**For HTML:**
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
// import as module into a js file e.g. main.js
|
|
67
|
+
import '@justeattakeaway/pie-webc/components/toast.js'
|
|
26
68
|
```
|
|
27
69
|
|
|
28
|
-
|
|
70
|
+
```html
|
|
71
|
+
<!-- pass js file into <script> tag -->
|
|
72
|
+
<pie-toast message="Message"></pie-toast>
|
|
73
|
+
<script type="module" src="/main.js"></script>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
77
|
+
|
|
78
|
+
```js
|
|
79
|
+
// Vue templates (using Nuxt 3)
|
|
80
|
+
import '@justeattakeaway/pie-webc/components/toast.js';
|
|
29
81
|
|
|
30
|
-
|
|
82
|
+
<pie-toast message="Message"></pie-toast>
|
|
83
|
+
// or with duration set to null to disable auto-dismiss
|
|
84
|
+
<pie-toast message="Message" duration={null}></pie-toast>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**For React Applications:**
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
90
|
+
import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
|
|
91
|
+
|
|
92
|
+
<PieToast message="Message"></PieToast>
|
|
93
|
+
// or with duration set to null to disable auto-dismiss
|
|
94
|
+
<PieToast message="Message" duration={null}></PieToast>
|
|
95
|
+
```
|
|
31
96
|
|
|
32
|
-
## Questions
|
|
97
|
+
## Questions and Support
|
|
33
98
|
|
|
34
|
-
|
|
99
|
+
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
100
|
|
|
36
101
|
## Contributing
|
|
37
102
|
|
package/custom-elements.json
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"type": {
|
|
61
61
|
"text": "DefaultProps"
|
|
62
62
|
},
|
|
63
|
-
"default": "{\
|
|
63
|
+
"default": "{\n message: '',\n isOpen: true,\n variant: 'neutral',\n isStrong: false,\n isDismissible: false,\n isMultiline: false,\n duration: 5000,\n}"
|
|
64
64
|
}
|
|
65
65
|
],
|
|
66
66
|
"exports": [
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
"kind": "method",
|
|
227
227
|
"name": "abortAndCleanEventListeners",
|
|
228
228
|
"privacy": "private",
|
|
229
|
-
"description": "If the _abortController is set, it aborts all event\
|
|
229
|
+
"description": "If the _abortController is set, it aborts all event\nlisteners in this controller and the controller turns into null."
|
|
230
230
|
},
|
|
231
231
|
{
|
|
232
232
|
"kind": "method",
|
|
@@ -268,7 +268,7 @@
|
|
|
268
268
|
"kind": "method",
|
|
269
269
|
"name": "createAutoDismissEventListeners",
|
|
270
270
|
"privacy": "private",
|
|
271
|
-
"description": "It creates all event listeners to handle the auto-dismiss capability\
|
|
271
|
+
"description": "It creates all event listeners to handle the auto-dismiss capability\nas well the controller responsible to remove the events when needed."
|
|
272
272
|
},
|
|
273
273
|
{
|
|
274
274
|
"kind": "method",
|
|
@@ -300,7 +300,7 @@
|
|
|
300
300
|
"kind": "method",
|
|
301
301
|
"name": "renderFooter",
|
|
302
302
|
"privacy": "private",
|
|
303
|
-
"description": "Template for the footer area.\
|
|
303
|
+
"description": "Template for the footer area.\nIt should display only when isMultiline is true as well if has action button.\nCalled within the main render function."
|
|
304
304
|
},
|
|
305
305
|
{
|
|
306
306
|
"kind": "method",
|
|
@@ -311,7 +311,7 @@
|
|
|
311
311
|
"text": "TemplateResult"
|
|
312
312
|
}
|
|
313
313
|
},
|
|
314
|
-
"description": "Template for the close button element. Called within the\
|
|
314
|
+
"description": "Template for the close button element. Called within the\nmain render function."
|
|
315
315
|
},
|
|
316
316
|
{
|
|
317
317
|
"kind": "method",
|
|
@@ -331,13 +331,13 @@
|
|
|
331
331
|
"description": "The message to be displayed."
|
|
332
332
|
}
|
|
333
333
|
],
|
|
334
|
-
"description": "Template for the toast message. Called within the\
|
|
334
|
+
"description": "Template for the toast message. Called within the\nmain render function."
|
|
335
335
|
},
|
|
336
336
|
{
|
|
337
337
|
"kind": "method",
|
|
338
338
|
"name": "closeToastComponent",
|
|
339
339
|
"privacy": "private",
|
|
340
|
-
"description": "Util method responsible to close the component.\
|
|
340
|
+
"description": "Util method responsible to close the component.\nIt handles the action when user clicks in the close button and triggers an event when is executed."
|
|
341
341
|
},
|
|
342
342
|
{
|
|
343
343
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ const h = class h extends x {
|
|
|
14
14
|
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
15
15
|
}
|
|
16
16
|
};
|
|
17
|
-
h.v = "0.9.
|
|
17
|
+
h.v = "0.9.4";
|
|
18
18
|
let f = h;
|
|
19
19
|
const E = "*,*: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))}}", T = ["neutral", "info", "warning", "success", "error"], i = "pie-toast", s = "c-toast", k = `${i}-close`, L = `${i}-open`, B = `${i}-leading-action-click`, p = {
|
|
20
20
|
message: "",
|
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.9.
|
|
4
|
+
"version": "0.9.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@justeattakeaway/pie-button": "1.6.
|
|
49
|
-
"@justeattakeaway/pie-icon-button": "1.5.
|
|
50
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
48
|
+
"@justeattakeaway/pie-button": "1.6.3",
|
|
49
|
+
"@justeattakeaway/pie-icon-button": "1.5.3",
|
|
50
|
+
"@justeattakeaway/pie-icons-webc": "1.11.1",
|
|
51
51
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
52
52
|
},
|
|
53
53
|
"volta": {
|