@aurodesignsystem-dev/auro-toast 0.0.0-pr86.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/CHANGELOG.md +279 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +170 -0
- package/demo/api.html +54 -0
- package/demo/api.js +27 -0
- package/demo/api.md +245 -0
- package/demo/api.min.js +98 -0
- package/demo/auro-toaster.min.js +614 -0
- package/demo/index.html +61 -0
- package/demo/index.js +35 -0
- package/demo/index.md +313 -0
- package/demo/index.min.js +142 -0
- package/dist/auro-toaster-DSkkaFZi.js +104 -0
- package/dist/index.d.ts +111 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +85 -0
package/demo/index.html
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/index.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-toast</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-toast's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./index.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
53
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
|
|
55
|
+
|
|
56
|
+
<script type="module" data-demo-script="true">
|
|
57
|
+
import { initExamples } from "./index.min.js"
|
|
58
|
+
initExamples();
|
|
59
|
+
</script>
|
|
60
|
+
</body>
|
|
61
|
+
</html>
|
package/demo/index.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
2
|
+
|
|
3
|
+
import { AuroToast, AuroToaster } from "../src/index";
|
|
4
|
+
|
|
5
|
+
import { initBasicExample } from "../apiExamples/basic";
|
|
6
|
+
import { initCustomExample } from "../apiExamples/customToast";
|
|
7
|
+
import { initErrorExample } from "../apiExamples/error";
|
|
8
|
+
import { initMultipleToastsExample } from "../apiExamples/multipleToasts";
|
|
9
|
+
import { initSuccessExample } from "../apiExamples/success";
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
AuroToast.register(); // registering to `auro-toast`
|
|
13
|
+
AuroToaster.register(); // registering to `auro-toaster`
|
|
14
|
+
AuroToast.register("custom-toast");
|
|
15
|
+
|
|
16
|
+
export function initExamples(initCount) {
|
|
17
|
+
// biome-ignore lint/style/noParameterAssign: legacy code, don't want to refactor right now
|
|
18
|
+
initCount = initCount || 0;
|
|
19
|
+
|
|
20
|
+
try {
|
|
21
|
+
// javascript example function calls to be added here upon creation to test examples
|
|
22
|
+
initBasicExample();
|
|
23
|
+
initCustomExample();
|
|
24
|
+
initErrorExample();
|
|
25
|
+
initSuccessExample();
|
|
26
|
+
initMultipleToastsExample();
|
|
27
|
+
} catch (_err) {
|
|
28
|
+
if (initCount <= 20) {
|
|
29
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
30
|
+
setTimeout(() => {
|
|
31
|
+
initExamples(initCount + 1);
|
|
32
|
+
}, 100);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
package/demo/index.md
ADDED
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
The index.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
README.md is created by running `npm run build:docs`.
|
|
4
|
+
This file is generated based on a template fetched from `./docs/partials/index.md`
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
# Toast
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
|
+
The `<auro-toast>` element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of sending an unobtrusive toast (or push) notification to your visitors.
|
|
12
|
+
|
|
13
|
+
The `<auro-toaster>` wrapper-element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of managing a series of notifications at the bottom of the screen using the `<auro-toast>` element.
|
|
14
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
15
|
+
|
|
16
|
+
## Component use cases
|
|
17
|
+
|
|
18
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
19
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
20
|
+
The `<auro-toast>` use cases include:
|
|
21
|
+
|
|
22
|
+
* Sending an error push notification
|
|
23
|
+
* Sending a success push notification
|
|
24
|
+
* Sending any type of push notification
|
|
25
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
26
|
+
|
|
27
|
+
### The setup
|
|
28
|
+
Triggering the toasts relies on setting the `visible` property to `true`. See the following example to see how this code is used in an example.
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
showToast = (toastID) => {
|
|
32
|
+
const toast = document.querySelector(toastID);
|
|
33
|
+
|
|
34
|
+
if (!toast.hasAttribute('visible')) {
|
|
35
|
+
toast.setAttribute('visible', true);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Default push notifications
|
|
41
|
+
|
|
42
|
+
The following demo illustrates the `default` notification using the `<auro-toast>` element. This push notification will automatically dismiss after five seconds. The user may also dismiss it manually. The toast is **NOT** removed from the DOM. The visible property is set to `false`, which will hide the toast on the UI.
|
|
43
|
+
|
|
44
|
+
Also notice in this demo the use of the `noIcon` attribute. this attribute removes the use of the default `information` icon.
|
|
45
|
+
|
|
46
|
+
<div class="exampleWrapper">
|
|
47
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
48
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
49
|
+
<!-- icon variant -->
|
|
50
|
+
<auro-button id="basicToastBtn">
|
|
51
|
+
Show default notification
|
|
52
|
+
</auro-button>
|
|
53
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
54
|
+
Default notification with no error type
|
|
55
|
+
</auro-toast>
|
|
56
|
+
<!-- no icon variant -->
|
|
57
|
+
<auro-button id="basicToast-noIconBtn">
|
|
58
|
+
Show default notification with no icon
|
|
59
|
+
</auro-button>
|
|
60
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
|
|
61
|
+
Default notification with no error type
|
|
62
|
+
</auro-toast>
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
64
|
+
</div>
|
|
65
|
+
<auro-accordion alignRight>
|
|
66
|
+
<span slot="trigger">See code</span>
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
68
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<!-- icon variant -->
|
|
72
|
+
<auro-button id="basicToastBtn">
|
|
73
|
+
Show default notification
|
|
74
|
+
</auro-button>
|
|
75
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
76
|
+
Default notification with no error type
|
|
77
|
+
</auro-toast>
|
|
78
|
+
<!-- no icon variant -->
|
|
79
|
+
<auro-button id="basicToast-noIconBtn">
|
|
80
|
+
Show default notification with no icon
|
|
81
|
+
</auro-button>
|
|
82
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
|
|
83
|
+
Default notification with no error type
|
|
84
|
+
</auro-toast>
|
|
85
|
+
```
|
|
86
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
87
|
+
</auro-accordion>
|
|
88
|
+
|
|
89
|
+
## Single notification
|
|
90
|
+
|
|
91
|
+
Aside from the `default` notification, the `<auro-toast>` supports multiple variations, `success` and `error`. See below for more information on these variants.
|
|
92
|
+
|
|
93
|
+
### Error notification
|
|
94
|
+
|
|
95
|
+
The error push notification using the `<auro-toast>` element will **NOT** automatically dismiss itself. The user **MUST** dismiss the notification manually. When the notification is dismissed, it is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.
|
|
96
|
+
|
|
97
|
+
<div class="exampleWrapper">
|
|
98
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
|
|
99
|
+
<!-- The below content is automatically added from ./../apiExamples/error.html -->
|
|
100
|
+
<auro-button id="errorToastBtn">Show error notification</auro-button>
|
|
101
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again </auro-toast>
|
|
102
|
+
<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
|
|
103
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast-noIcon" noIcon> Unable to add lap infant. Please try again </auro-toast>
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
105
|
+
</div>
|
|
106
|
+
<auro-accordion alignRight>
|
|
107
|
+
<span slot="trigger">See code</span>
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
|
|
109
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<auro-button id="errorToastBtn">Show error notification</auro-button>
|
|
113
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again </auro-toast>
|
|
114
|
+
<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
|
|
115
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast-noIcon" noIcon> Unable to add lap infant. Please try again </auro-toast>
|
|
116
|
+
```
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
118
|
+
</auro-accordion>
|
|
119
|
+
|
|
120
|
+
### Success notification
|
|
121
|
+
|
|
122
|
+
The success push notification using the `<auro-toast>` element will automatically dismiss after five seconds if the user does not manually dismiss it. In this case, the notification is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.
|
|
123
|
+
|
|
124
|
+
<div class="exampleWrapper">
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success.html) -->
|
|
126
|
+
<!-- The below content is automatically added from ./../apiExamples/success.html -->
|
|
127
|
+
<auro-button id="successToastBtn">Show success toast</auro-button>
|
|
128
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant </auro-toast>
|
|
129
|
+
<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
|
|
130
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast-noIcon" noIcon> Successfully added lap infant </auro-toast>
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
132
|
+
</div>
|
|
133
|
+
<auro-accordion alignRight>
|
|
134
|
+
<span slot="trigger">See code</span>
|
|
135
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success.html) -->
|
|
136
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/success.html -->
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<auro-button id="successToastBtn">Show success toast</auro-button>
|
|
140
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant </auro-toast>
|
|
141
|
+
<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
|
|
142
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast-noIcon" noIcon> Successfully added lap infant </auro-toast>
|
|
143
|
+
```
|
|
144
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
145
|
+
</auro-accordion>
|
|
146
|
+
|
|
147
|
+
## Multiple toasts
|
|
148
|
+
|
|
149
|
+
The multi-notification use case requires the use of the `<auro-toaster>` component. Toaster will render the toasts
|
|
150
|
+
at the bottom right of a page.
|
|
151
|
+
|
|
152
|
+
<div class="exampleWrapper">
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multipleToasts.html) -->
|
|
154
|
+
<!-- The below content is automatically added from ./../apiExamples/multipleToasts.html -->
|
|
155
|
+
<auro-button id="multiToastBtn-default">Show default toast</auro-button>
|
|
156
|
+
<auro-button id="multiToastBtn-error">Show error toast</auro-button>
|
|
157
|
+
<auro-button id="multiToastBtn-success">Show success toast</auro-button>
|
|
158
|
+
<auro-toaster>
|
|
159
|
+
<auro-toast id="multiToast-default">Default toast</auro-toast>
|
|
160
|
+
<auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
|
|
161
|
+
<auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
|
|
162
|
+
</auro-toaster>
|
|
163
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
164
|
+
</div>
|
|
165
|
+
<auro-accordion alignRight>
|
|
166
|
+
<span slot="trigger">See code</span>
|
|
167
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multipleToasts.html) -->
|
|
168
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/multipleToasts.html -->
|
|
169
|
+
|
|
170
|
+
```html
|
|
171
|
+
<auro-button id="multiToastBtn-default">Show default toast</auro-button>
|
|
172
|
+
<auro-button id="multiToastBtn-error">Show error toast</auro-button>
|
|
173
|
+
<auro-button id="multiToastBtn-success">Show success toast</auro-button>
|
|
174
|
+
<auro-toaster>
|
|
175
|
+
<auro-toast id="multiToast-default">Default toast</auro-toast>
|
|
176
|
+
<auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
|
|
177
|
+
<auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
|
|
178
|
+
</auro-toaster>
|
|
179
|
+
```
|
|
180
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
181
|
+
</auro-accordion>
|
|
182
|
+
|
|
183
|
+
## Dynamic toasts
|
|
184
|
+
|
|
185
|
+
If you choose to implement push notifications dynamically, the following is an example of how to implement dynamic `<auro-toast>` elements using Vue.
|
|
186
|
+
|
|
187
|
+
```js
|
|
188
|
+
import { v4 as uuidv4 } from 'uuid';
|
|
189
|
+
|
|
190
|
+
interface ToastEvent {
|
|
191
|
+
variant: string,
|
|
192
|
+
message: string
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
interface Toast {
|
|
196
|
+
id: string
|
|
197
|
+
variant: string,
|
|
198
|
+
message: string,
|
|
199
|
+
visible: boolean
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
const toasts = ref<Array<Toast>>([]);
|
|
203
|
+
|
|
204
|
+
// Function that adds toasts to the toasts array, which will trigger the toast to be visible
|
|
205
|
+
handleToastEvent(e: ToastEvent) {
|
|
206
|
+
toast.id = uuidv4();
|
|
207
|
+
toast.visible = true;
|
|
208
|
+
toast.variant = e.variant;
|
|
209
|
+
toast.message = e.message
|
|
210
|
+
toasts.value.push(toast);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Function that removes the toast from the DOM
|
|
214
|
+
handleOnToastClose(event) {
|
|
215
|
+
// In event.detail comes the ID of the auro-toast that was closed (visible was set to false)
|
|
216
|
+
const id = event.detail.id;
|
|
217
|
+
toasts.value = toasts.filter((t) => t.id !== id)
|
|
218
|
+
}
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
The following example is for the HTML template.
|
|
222
|
+
|
|
223
|
+
```html
|
|
224
|
+
<auro-toaster>
|
|
225
|
+
<auro-toast
|
|
226
|
+
v-for="(toast, i) in toasts"
|
|
227
|
+
:id="toast.id"
|
|
228
|
+
:visible="toast.visible"
|
|
229
|
+
:variant="toast.variant"
|
|
230
|
+
@on-toast-close="handleOnToastClose">
|
|
231
|
+
</auro-toast>
|
|
232
|
+
<auro-toaster>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
## Customizing Toast Notifications
|
|
236
|
+
|
|
237
|
+
The toast notification can be customized in several ways.
|
|
238
|
+
|
|
239
|
+
- By applying the `variant="custom"` attribute value, you may pass in custom svg to use in place of the defaults assigned to the other variants.
|
|
240
|
+
- You may recolor the toast notification using the tier 3 theme tokens.
|
|
241
|
+
- You may disable the auto hide behavior of the toast by applying the `disableAutoHide` attribute.
|
|
242
|
+
- You may programmatically show the toast by applying the `visible` attribute. (e.g. if you want the toast to show on load)
|
|
243
|
+
|
|
244
|
+
<div class="exampleWrapper">
|
|
245
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customToast.html) -->
|
|
246
|
+
<!-- The below content is automatically added from ../apiExamples/customToast.html -->
|
|
247
|
+
<!-- icon variant -->
|
|
248
|
+
<auro-button id="customizedToastBtn">
|
|
249
|
+
Show customized notification
|
|
250
|
+
</auro-button>
|
|
251
|
+
<auro-toast
|
|
252
|
+
id="customizedToast"
|
|
253
|
+
variant="custom"
|
|
254
|
+
visible
|
|
255
|
+
disableAutoHide
|
|
256
|
+
style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
|
|
257
|
+
Did you know you can create a price alert for this route?
|
|
258
|
+
<br />
|
|
259
|
+
<auro-button variant="tertiary">Create Alert</auro-button>
|
|
260
|
+
<svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
|
|
261
|
+
</auro-toast>
|
|
262
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
263
|
+
</div>
|
|
264
|
+
<auro-accordion alignRight>
|
|
265
|
+
<span slot="trigger">See code</span>
|
|
266
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customToast.html) -->
|
|
267
|
+
<!-- The below code snippet is automatically added from ../apiExamples/customToast.html -->
|
|
268
|
+
|
|
269
|
+
```html
|
|
270
|
+
<!-- icon variant -->
|
|
271
|
+
<auro-button id="customizedToastBtn">
|
|
272
|
+
Show customized notification
|
|
273
|
+
</auro-button>
|
|
274
|
+
<auro-toast
|
|
275
|
+
id="customizedToast"
|
|
276
|
+
variant="custom"
|
|
277
|
+
visible
|
|
278
|
+
disableAutoHide
|
|
279
|
+
style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
|
|
280
|
+
Did you know you can create a price alert for this route?
|
|
281
|
+
<br />
|
|
282
|
+
<auro-button variant="tertiary">Create Alert</auro-button>
|
|
283
|
+
<svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
|
|
284
|
+
</auro-toast>
|
|
285
|
+
```
|
|
286
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
287
|
+
</auro-accordion>
|
|
288
|
+
|
|
289
|
+
## Recommended Use and Version Control
|
|
290
|
+
|
|
291
|
+
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-toast` custom element is defined automatically.
|
|
292
|
+
|
|
293
|
+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroToast.register(name)` method and pass in a unique name.
|
|
294
|
+
|
|
295
|
+
```js
|
|
296
|
+
import { AuroToast } from '@aurodesignsystem/auro-toast/class'
|
|
297
|
+
|
|
298
|
+
AuroToast.register('custom-toast');
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.
|
|
302
|
+
|
|
303
|
+
<div class="exampleWrapper">
|
|
304
|
+
<custom-toast variant="error" visible>Salutations World!</custom-toast>
|
|
305
|
+
</div>
|
|
306
|
+
<auro-accordion alignRight>
|
|
307
|
+
<span slot="trigger">See code</span>
|
|
308
|
+
|
|
309
|
+
```html
|
|
310
|
+
<custom-toast variant="error" visible>Salutations World!</custom-toast>
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
</auro-accordion>
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { A as AuroToast, a as AuroToaster } from './auro-toaster.min.js';
|
|
2
|
+
|
|
3
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
4
|
+
|
|
5
|
+
function initBasicExample() {
|
|
6
|
+
const btn = document.querySelector("#basicToastBtn");
|
|
7
|
+
const toast = document.querySelector("#basicToast");
|
|
8
|
+
|
|
9
|
+
btn.addEventListener("click", () => {
|
|
10
|
+
if (!toast.hasAttribute("visible")) {
|
|
11
|
+
toast.setAttribute("visible", true);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
const btnTwo = document.querySelector("#basicToast-noIconBtn");
|
|
16
|
+
const toastTwo = document.querySelector("#basicToast-noIcon");
|
|
17
|
+
|
|
18
|
+
btnTwo.addEventListener("click", () => {
|
|
19
|
+
if (!toastTwo.hasAttribute("visible")) {
|
|
20
|
+
toastTwo.setAttribute("visible", true);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
26
|
+
|
|
27
|
+
function initCustomExample() {
|
|
28
|
+
const btn = document.querySelector("#customizedToastBtn");
|
|
29
|
+
const toast = document.querySelector("#customizedToast");
|
|
30
|
+
|
|
31
|
+
btn.addEventListener("click", () => {
|
|
32
|
+
if (!toast.hasAttribute("visible")) {
|
|
33
|
+
toast.setAttribute("visible", true);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
39
|
+
|
|
40
|
+
function initErrorExample() {
|
|
41
|
+
const btn = document.querySelector("#errorToastBtn");
|
|
42
|
+
const toast = document.querySelector("#errorToast");
|
|
43
|
+
|
|
44
|
+
btn.addEventListener("click", () => {
|
|
45
|
+
if (!toast.hasAttribute("visible")) {
|
|
46
|
+
toast.setAttribute("visible", true);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
const btnTwo = document.querySelector("#errorToast-noIconBtn");
|
|
51
|
+
const toastTwo = document.querySelector("#errorToast-noIcon");
|
|
52
|
+
|
|
53
|
+
btnTwo.addEventListener("click", () => {
|
|
54
|
+
if (!toastTwo.hasAttribute("visible")) {
|
|
55
|
+
toastTwo.setAttribute("visible", true);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
61
|
+
|
|
62
|
+
function initMultipleToastsExample() {
|
|
63
|
+
const btn = document.querySelector("#multiToastBtn-default");
|
|
64
|
+
const toast = document.querySelector("#multiToast-default");
|
|
65
|
+
|
|
66
|
+
btn.addEventListener("click", () => {
|
|
67
|
+
if (!toast.hasAttribute("visible")) {
|
|
68
|
+
toast.setAttribute("visible", true);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
const btnTwo = document.querySelector("#multiToastBtn-error");
|
|
73
|
+
const toastTwo = document.querySelector("#multiToast-error");
|
|
74
|
+
|
|
75
|
+
btnTwo.addEventListener("click", () => {
|
|
76
|
+
if (!toastTwo.hasAttribute("visible")) {
|
|
77
|
+
toastTwo.setAttribute("visible", true);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const btnThree = document.querySelector("#multiToastBtn-success");
|
|
82
|
+
const toastThree = document.querySelector("#multiToast-success");
|
|
83
|
+
|
|
84
|
+
btnThree.addEventListener("click", () => {
|
|
85
|
+
if (!toastThree.hasAttribute("visible")) {
|
|
86
|
+
toastThree.setAttribute("visible", true);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
92
|
+
|
|
93
|
+
function initSuccessExample() {
|
|
94
|
+
const btn = document.querySelector("#successToastBtn");
|
|
95
|
+
const toast = document.querySelector("#successToast");
|
|
96
|
+
|
|
97
|
+
btn.addEventListener("click", () => {
|
|
98
|
+
if (!toast.hasAttribute("visible")) {
|
|
99
|
+
toast.setAttribute("visible", true);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
const btnTwo = document.querySelector("#successToast-noIconBtn");
|
|
104
|
+
const toastTwo = document.querySelector("#successToast-noIcon");
|
|
105
|
+
|
|
106
|
+
btnTwo.addEventListener("click", () => {
|
|
107
|
+
if (!toastTwo.hasAttribute("visible")) {
|
|
108
|
+
toastTwo.setAttribute("visible", true);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
AuroToast.register(); // registering to `auro-toast`
|
|
118
|
+
AuroToaster.register(); // registering to `auro-toaster`
|
|
119
|
+
AuroToast.register("custom-toast");
|
|
120
|
+
|
|
121
|
+
function initExamples(initCount) {
|
|
122
|
+
// biome-ignore lint/style/noParameterAssign: legacy code, don't want to refactor right now
|
|
123
|
+
initCount = initCount || 0;
|
|
124
|
+
|
|
125
|
+
try {
|
|
126
|
+
// javascript example function calls to be added here upon creation to test examples
|
|
127
|
+
initBasicExample();
|
|
128
|
+
initCustomExample();
|
|
129
|
+
initErrorExample();
|
|
130
|
+
initSuccessExample();
|
|
131
|
+
initMultipleToastsExample();
|
|
132
|
+
} catch (_err) {
|
|
133
|
+
if (initCount <= 20) {
|
|
134
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
135
|
+
setTimeout(() => {
|
|
136
|
+
initExamples(initCount + 1);
|
|
137
|
+
}, 100);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export { initExamples };
|