@aurodesignsystem-dev/auro-toast 0.0.0-pr102.1 → 0.0.0-pr106.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.
Files changed (13) hide show
  1. package/README.md +54 -77
  2. package/demo/api.js +12 -4
  3. package/demo/api.md +216 -113
  4. package/demo/api.min.js +64 -3
  5. package/demo/{auro-toaster.min.js → basic.min.js} +55 -20
  6. package/demo/index.js +1 -8
  7. package/demo/index.md +22 -266
  8. package/demo/index.min.js +3 -104
  9. package/dist/{auro-toaster-iuKVlBCD.js → auro-toaster-Ce-Gohhk.js} +2 -2
  10. package/dist/index.d.ts +201 -111
  11. package/dist/index.js +1 -1
  12. package/dist/registered.js +1 -1
  13. package/package.json +17 -10
package/README.md CHANGED
@@ -30,17 +30,21 @@ The `<auro-toaster>` wrapper-element is a [HTML custom element](https://develope
30
30
  <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
31
31
  <!-- AURO-GENERATED-CONTENT:END -->
32
32
 
33
- ## UI development browser support
33
+ ## Use Cases
34
34
 
35
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
36
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
36
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
37
+ The `<auro-toast>` use cases include:
37
38
 
39
+ * Sending an error push notification
40
+ * Sending a success push notification
41
+ * Sending any type of push notification
38
42
  <!-- AURO-GENERATED-CONTENT:END -->
39
43
 
40
44
  ## Install
41
45
 
42
46
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
43
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-toast/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-toast/actions/workflows/testPublish.yml)
47
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-toast/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-toast/actions/workflows/release.yml)
44
48
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-toast?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-toast)
45
49
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-toast?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
46
50
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -51,17 +55,10 @@ $ npm i @aurodesignsystem/auro-toast
51
55
 
52
56
  <!-- AURO-GENERATED-CONTENT:END -->
53
57
 
54
- ### Design Token CSS Custom Property dependency
55
-
56
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
57
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
58
-
59
- <!-- AURO-GENERATED-CONTENT:END -->
60
-
61
- ### Define dependency in project component
58
+ ### Define Dependency in Project
62
59
 
63
60
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
64
- Defining the component dependency within each component that is using the `<auro-toast>` component.
61
+ Defining the dependency within each project that is using the `<auro-toast>` component.
65
62
 
66
63
  <!-- AURO-GENERATED-CONTENT:END -->
67
64
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -71,29 +68,8 @@ import "@aurodesignsystem/auro-toast";
71
68
  ```
72
69
 
73
70
  <!-- AURO-GENERATED-CONTENT:END -->
74
- **Reference component in HTML**
75
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
76
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
77
71
 
78
- ```html
79
- <!-- icon variant -->
80
- <auro-button id="basicToastBtn">
81
- Show default notification
82
- </auro-button>
83
- <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
84
- Default notification with no error type
85
- </auro-toast>
86
- <!-- no icon variant -->
87
- <auro-button id="basicToast-noIconBtn">
88
- Show default notification with no icon
89
- </auro-button>
90
- <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
91
- Default notification with no error type
92
- </auro-toast>
93
- ```
94
- <!-- AURO-GENERATED-CONTENT:END -->
95
-
96
- ## Use CDN
72
+ ### Use CDN
97
73
 
98
74
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
99
75
  In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
@@ -104,67 +80,68 @@ In cases where the project is not able to process JS assets, there are pre-proce
104
80
 
105
81
  <!-- AURO-GENERATED-CONTENT:END -->
106
82
 
107
- ## auro-toast use cases
108
-
109
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
110
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
111
- The `<auro-toast>` use cases include:
112
-
113
- * Sending an error push notification
114
- * Sending a success push notification
115
- * Sending any type of push notification
116
- <!-- AURO-GENERATED-CONTENT:END -->
117
-
118
- ## API Code Examples
119
-
120
- ### Default auro-toast
83
+ ## Basic Example
121
84
 
122
85
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
123
86
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
124
87
 
125
88
  ```html
126
- <!-- icon variant -->
127
89
  <auro-button id="basicToastBtn">
128
90
  Show default notification
129
- </auro-button>
91
+ </auro-button>
130
92
  <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
131
93
  Default notification with no error type
132
94
  </auro-toast>
133
- <!-- no icon variant -->
134
- <auro-button id="basicToast-noIconBtn">
135
- Show default notification with no icon
136
- </auro-button>
137
- <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
138
- Default notification with no error type
139
- </auro-toast>
140
95
  ```
141
96
  <!-- AURO-GENERATED-CONTENT:END -->
142
97
 
143
- ## Development
98
+ ## Custom Component Registration for Version Management
144
99
 
145
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
146
- In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
100
+ There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
101
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
147
102
 
148
- Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
103
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
149
104
 
150
- <!-- AURO-GENERATED-CONTENT:END -->
151
-
152
- ### Start development environment
105
+ However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
153
106
 
154
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
155
- Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
107
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
156
108
 
157
- ```shell
158
- $ npm run dev
109
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
110
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
111
+
112
+ ```js
113
+ // Import the class only
114
+ import { AuroToast } from '@aurodesignsystem/auro-toast/class';
115
+
116
+ // Register with a custom name if desired
117
+ AuroToast.register('custom-toast');
159
118
  ```
160
119
 
161
- Open [localhost:8000](http://localhost:8000/)
162
-
120
+ This will create a new custom element `<custom-toast>` that behaves exactly like `<auro-toast>`, allowing both to coexist on the same page without interfering with each other.
163
121
  <!-- AURO-GENERATED-CONTENT:END -->
122
+ <div class="exampleWrapper exampleWrapper--flex">
123
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
124
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
125
+ <auro-button id="customToastBtn">
126
+ Show default notification
127
+ </auro-button>
128
+ <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
129
+ Default notification with no error type
130
+ </custom-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/custom.html) -->
136
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
164
137
 
165
- ### Testing
166
-
167
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
168
- Automated tests are required for every Auro component. See `.\test\auro-toast.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
169
-
170
- <!-- AURO-GENERATED-CONTENT:END -->
138
+ ```html
139
+ <auro-button id="customToastBtn">
140
+ Show default notification
141
+ </auro-button>
142
+ <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
143
+ Default notification with no error type
144
+ </custom-toast>
145
+ ```
146
+ <!-- AURO-GENERATED-CONTENT:END -->
147
+ </auro-accordion>
package/demo/api.js CHANGED
@@ -1,7 +1,11 @@
1
- import { initNoIconExample } from "../apiExamples/noIcon";
2
- import { initTimeTilHideExample } from "../apiExamples/timeTilHide";
1
+ import { initBasicExample } from "../apiExamples/basic";
2
+ import { initDisableAutoHideExample } from "../apiExamples/disable-auto-hide";
3
+ import { initNoIconExample } from "../apiExamples/no-icon";
4
+ import { initTimeTilHideExample } from "../apiExamples/time-til-hide";
3
5
  import { initVariantToastsExample } from "../apiExamples/variant";
6
+ import { initCustomToastExample } from "../apiExamples/custom-toast";
4
7
  import { initVisibleExample } from "../apiExamples/visible";
8
+ import { initMultipleToastsExample } from "../apiExamples/multiple-toasts";
5
9
 
6
10
  import "../src/registered";
7
11
  /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
@@ -12,10 +16,14 @@ export function initExamples(initCount) {
12
16
 
13
17
  try {
14
18
  // javascript example function calls to be added here upon creation to test examples
15
- initVisibleExample();
16
- initVariantToastsExample();
19
+ initBasicExample();
20
+ initDisableAutoHideExample();
17
21
  initNoIconExample();
18
22
  initTimeTilHideExample();
23
+ initVariantToastsExample();
24
+ initCustomToastExample();
25
+ initVisibleExample();
26
+ initMultipleToastsExample();
19
27
  } catch (_err) {
20
28
  if (initCount <= 20) {
21
29
  // setTimeout handles issue where content is sometimes loaded after the functions get called
package/demo/api.md CHANGED
@@ -3,81 +3,155 @@
3
3
 
4
4
  # auro-toast
5
5
 
6
- The auro-toast element provides users a way to display short, temporary messages.
6
+ The `auro-toast` element provides users a way to display short, temporary messages.
7
7
 
8
- ## Properties
8
+ ### Properties & Attributes
9
9
 
10
- | Property | Attribute | Type | Description |
11
- |-------------------|-------------------|-----------|--------------------------------------------------|
12
- | [disableAutoHide](#disableAutoHide) | `disableAutoHide` | `Boolean` | Prevents the toast from auto-hiding on the default time. |
13
- | [noIcon](#noIcon) | `noIcon` | `Boolean` | Removes icon from the toast UI |
14
- | [timeTilHide](#timeTilHide) | `timeTilHide` | `Number` | Sets the time in milliseconds until the toast hides. |
15
- | [variant](#variant) | `variant` | `String` | Component will render visually based on which variant value is set; currently supports `error`, `success`, `custom` |
16
- | [visible](#visible) | `visible` | `Boolean` | Sets state of toast to visible |
10
+ | Properties | Attributes | Modifiers | Type | Default | Description |
11
+ | --------------- | --------------- | --------- | -------------------------------- | ------- | ------------------------------------------------------------------- |
12
+ | disableAutoHide | disableAutoHide | | boolean | | Prevents the toast from auto-hiding on the default time. |
13
+ | noIcon | noIcon | | boolean | | Removes icon from the toast UI. |
14
+ | timeTilHide | timeTilHide | | number | | Sets the time in milliseconds until the toast hides. |
15
+ | variant | variant | | `error` \| `success` \| `custom` | | Component will render visually based on which variant value is set. |
16
+ | visible | visible | | boolean | | Sets state of toast to visible |
17
17
 
18
- ## Events
18
+ ### Methods
19
19
 
20
- | Event | Type | Description |
21
- |----------------|----------|-----------------------------------------|
22
- | [onToastClose](#onToastClose) | `object` | Notifies that the toast has been closed |
20
+ | Name | Parameters | Return | Description |
21
+ | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
22
+ | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
23
23
 
24
- ## CSS Shadow Parts
24
+ ### Events
25
25
 
26
- | Part | Description |
27
- |----------------|-------------------------------------|
28
- | `close-button` | Apply css to the toast close button |
29
- | `type-icon` | Apply css to the toast type icon |
26
+ | Name | Description |
27
+ | ------------ | --------------------------------------- |
28
+ | onToastClose | Notifies that the toast has been closed |
29
+
30
+ ### CSS Shadow Parts
31
+
32
+ | Name | Description |
33
+ | ------------ | ----------------------------------- |
34
+ | close-button | Apply css to the toast close button |
35
+ | type-icon | Apply css to the toast type icon |
30
36
  <!-- AURO-GENERATED-CONTENT:END -->
31
37
 
32
- ## API Examples
38
+ ## Basic
39
+
40
+ <div class="exampleWrapper">
41
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
42
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
43
+ <auro-button id="basicToastBtn">
44
+ Show default notification
45
+ </auro-button>
46
+ <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
47
+ Default notification with no error type
48
+ </auro-toast>
49
+ <!-- AURO-GENERATED-CONTENT:END -->
50
+ </div>
51
+ <auro-accordion alignRight>
52
+ <span slot="trigger">See code</span>
53
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
54
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
55
+
56
+ ```html
57
+ <auro-button id="basicToastBtn">
58
+ Show default notification
59
+ </auro-button>
60
+ <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
61
+ Default notification with no error type
62
+ </auro-toast>
63
+ ```
64
+ <!-- AURO-GENERATED-CONTENT:END -->
65
+ </auro-accordion>
33
66
 
34
- ### Property Examples
67
+ ## Property & Attribute Examples
35
68
 
36
- #### visible
69
+ ### Disable Auto Hide
37
70
 
38
- State of the push notification which determines if it is `visible`.
71
+ Use the `disableAutoHide` attribute to prevent the toast from automatically dismissing itself.
39
72
 
40
73
  <div class="exampleWrapper">
41
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/visible.html) -->
42
- <!-- The below content is automatically added from ./../apiExamples/visible.html -->
43
- <auro-button id="visibleToastBtn">
44
- Set visible to true
45
- </auro-button>
46
- <auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
47
- Default toast
74
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disable-auto-hide.html) -->
75
+ <!-- The below content is automatically added from ./../apiExamples/disable-auto-hide.html -->
76
+ <auro-button id="disableHideToastBtn">
77
+ Show default notification
78
+ </auro-button>
79
+ <auro-toast style="display: block; margin: 0.5rem 0;" id="disableHideToast">
80
+ Default notification with no error type
48
81
  </auro-toast>
49
82
  <!-- AURO-GENERATED-CONTENT:END -->
50
- </div>
83
+ </div>
51
84
  <auro-accordion alignRight>
52
85
  <span slot="trigger">See code</span>
53
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/visible.html) -->
54
- <!-- The below code snippet is automatically added from ./../apiExamples/visible.html -->
86
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disable-auto-hide.html) -->
87
+ <!-- The below code snippet is automatically added from ./../apiExamples/disable-auto-hide.html -->
55
88
 
56
89
  ```html
57
- <auro-button id="visibleToastBtn">
58
- Set visible to true
59
- </auro-button>
60
- <auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
61
- Default toast
90
+ <auro-button id="disableHideToastBtn">
91
+ Show default notification
92
+ </auro-button>
93
+ <auro-toast style="display: block; margin: 0.5rem 0;" id="disableHideToast">
94
+ Default notification with no error type
62
95
  </auro-toast>
63
96
  ```
64
97
  <!-- AURO-GENERATED-CONTENT:END -->
65
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
66
- <!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
98
+ </auro-accordion>
67
99
 
68
- ```js
69
- export function showToast(toastID) {
70
- const toast = document.querySelector(toastID);
100
+ ### No Icon
71
101
 
72
- if (!toast.hasAttribute("visible")) {
73
- toast.setAttribute("visible", true);
74
- }
75
- }
76
- ```
102
+ Using the `noIcon` attribute will set no icon to be visible in the notification.
103
+
104
+ <div class="exampleWrapper">
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-icon.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/no-icon.html -->
107
+ <auro-button id="noIconBtn"> Show toast with no icon </auro-button>
108
+ <auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
109
+ <!-- AURO-GENERATED-CONTENT:END -->
110
+ </div>
111
+ <auro-accordion alignRight>
112
+ <span slot="trigger">See code</span>
113
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-icon.html) -->
114
+ <!-- The below code snippet is automatically added from ./../apiExamples/no-icon.html -->
115
+
116
+ ```html
117
+ <auro-button id="noIconBtn"> Show toast with no icon </auro-button>
118
+ <auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
119
+ ```
77
120
  <!-- AURO-GENERATED-CONTENT:END -->
78
121
  </auro-accordion>
79
122
 
80
- #### variant
123
+ ### Time Until Hide
124
+
125
+ Using the `timeTilHide` attribute will set a timer in milliseconds for how long the notification will be visible before it automatically hides. The default is `5000` milliseconds.
126
+
127
+ <div class="exampleWrapper">
128
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/time-til-hide.html) -->
129
+ <!-- The below content is automatically added from ./../apiExamples/time-til-hide.html -->
130
+ <auro-button id="timeTilHideToastBtn">
131
+ Show default notification
132
+ </auro-button>
133
+ <auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
134
+ Default notification with no error type
135
+ </auro-toast>
136
+ <!-- AURO-GENERATED-CONTENT:END -->
137
+ </div>
138
+ <auro-accordion alignRight>
139
+ <span slot="trigger">See code</span>
140
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/time-til-hide.html) -->
141
+ <!-- The below code snippet is automatically added from ./../apiExamples/time-til-hide.html -->
142
+
143
+ ```html
144
+ <auro-button id="timeTilHideToastBtn">
145
+ Show default notification
146
+ </auro-button>
147
+ <auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
148
+ Default notification with no error type
149
+ </auro-toast>
150
+ ```
151
+ <!-- AURO-GENERATED-CONTENT:END -->
152
+ </auro-accordion>
153
+
154
+ ### Variant
81
155
 
82
156
  What the component will render visually based on which variant value is set; currently supports `error`, `success`.
83
157
 
@@ -130,104 +204,133 @@ What the component will render visually based on which variant value is set; cur
130
204
  </auro-toast>
131
205
  ```
132
206
  <!-- AURO-GENERATED-CONTENT:END -->
133
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
134
- <!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
135
-
136
- ```js
137
- export function showToast(toastID) {
138
- const toast = document.querySelector(toastID);
139
-
140
- if (!toast.hasAttribute("visible")) {
141
- toast.setAttribute("visible", true);
142
- }
143
- }
144
- ```
145
- <!-- AURO-GENERATED-CONTENT:END -->
146
207
  </auro-accordion>
147
208
 
148
- #### noIcon
209
+ #### Customizing Toast Notifications
149
210
 
150
- Using the `noIcon` attribute will set no icon to be visible in the notification.
211
+ The toast notification can be customized in several ways.
212
+
213
+ - 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.
214
+ - You may recolor the toast notification using the tier 3 theme tokens.
215
+ - You may disable the auto hide behavior of the toast by applying the `disableAutoHide` attribute.
216
+ - You may programmatically show the toast by applying the `visible` attribute. (e.g. if you want the toast to show on load)
151
217
 
152
218
  <div class="exampleWrapper">
153
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noIcon.html) -->
154
- <!-- The below content is automatically added from ./../apiExamples/noIcon.html -->
155
- <auro-button id="noIconBtn"> Show toast with no icon </auro-button>
156
- <auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
157
- <!-- AURO-GENERATED-CONTENT:END -->
158
- </div>
219
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-toast.html) -->
220
+ <!-- The below content is automatically added from ../apiExamples/custom-toast.html -->
221
+ <!-- icon variant -->
222
+ <auro-button id="customizedToastBtn">
223
+ Show customized notification
224
+ </auro-button>
225
+ <auro-toast
226
+ id="customizedToast"
227
+ variant="custom"
228
+ visible
229
+ disableAutoHide
230
+ style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
231
+ Did you know you can create a price alert for this route?
232
+ <br />
233
+ <auro-button variant="tertiary">Create Alert</auro-button>
234
+ <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>
235
+ </auro-toast>
236
+ <!-- AURO-GENERATED-CONTENT:END -->
237
+ </div>
159
238
  <auro-accordion alignRight>
160
239
  <span slot="trigger">See code</span>
161
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noIcon.html) -->
162
- <!-- The below code snippet is automatically added from ./../apiExamples/noIcon.html -->
240
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-toast.html) -->
241
+ <!-- The below code snippet is automatically added from ../apiExamples/custom-toast.html -->
163
242
 
164
243
  ```html
165
- <auro-button id="noIconBtn"> Show toast with no icon </auro-button>
166
- <auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
244
+ <!-- icon variant -->
245
+ <auro-button id="customizedToastBtn">
246
+ Show customized notification
247
+ </auro-button>
248
+ <auro-toast
249
+ id="customizedToast"
250
+ variant="custom"
251
+ visible
252
+ disableAutoHide
253
+ style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
254
+ Did you know you can create a price alert for this route?
255
+ <br />
256
+ <auro-button variant="tertiary">Create Alert</auro-button>
257
+ <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>
258
+ </auro-toast>
167
259
  ```
168
260
  <!-- AURO-GENERATED-CONTENT:END -->
169
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
170
- <!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
171
-
172
- ```js
173
- export function showToast(toastID) {
174
- const toast = document.querySelector(toastID);
175
-
176
- if (!toast.hasAttribute("visible")) {
177
- toast.setAttribute("visible", true);
178
- }
179
- }
180
- ```
181
- <!-- AURO-GENERATED-CONTENT:END -->
182
261
  </auro-accordion>
183
262
 
184
- #### timeTilHide
263
+ ### Visible
185
264
 
186
- Using the `timeTilHide` attribute will set a timer in milliseconds for how long the notification will be visible before it automatically hides. The default is `5000` milliseconds.
265
+ State of the push notification which determines if it is `visible`.
187
266
 
188
267
  <div class="exampleWrapper">
189
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/timeTilHide.html) -->
190
- <!-- The below content is automatically added from ./../apiExamples/timeTilHide.html -->
191
- <auro-button id="timeTilHideToastBtn">
192
- Show default notification
268
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/visible.html) -->
269
+ <!-- The below content is automatically added from ./../apiExamples/visible.html -->
270
+ <auro-button id="visibleToastBtn">
271
+ Set visible to true
193
272
  </auro-button>
194
- <auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
195
- Default notification with no error type
273
+ <auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
274
+ Default toast
196
275
  </auro-toast>
197
276
  <!-- AURO-GENERATED-CONTENT:END -->
198
- </div>
277
+ </div>
199
278
  <auro-accordion alignRight>
200
279
  <span slot="trigger">See code</span>
201
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/timeTilHide.html) -->
202
- <!-- The below code snippet is automatically added from ./../apiExamples/timeTilHide.html -->
280
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/visible.html) -->
281
+ <!-- The below code snippet is automatically added from ./../apiExamples/visible.html -->
203
282
 
204
283
  ```html
205
- <auro-button id="timeTilHideToastBtn">
206
- Show default notification
284
+ <auro-button id="visibleToastBtn">
285
+ Set visible to true
207
286
  </auro-button>
208
- <auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
209
- Default notification with no error type
287
+ <auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
288
+ Default toast
210
289
  </auro-toast>
211
290
  ```
212
291
  <!-- AURO-GENERATED-CONTENT:END -->
213
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
214
- <!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
292
+ </auro-accordion>
215
293
 
216
- ```js
217
- export function showToast(toastID) {
218
- const toast = document.querySelector(toastID);
294
+ ## Common Usage Patterns & Functional Examples
295
+
296
+ ### Multiple Toasts
219
297
 
220
- if (!toast.hasAttribute("visible")) {
221
- toast.setAttribute("visible", true);
222
- }
223
- }
224
- ```
298
+ The multi-notification use case requires the use of the `<auro-toaster>` component. Toaster will render the toasts at the bottom right of a page.
299
+
300
+ <div class="exampleWrapper">
301
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiple-toasts.html) -->
302
+ <!-- The below content is automatically added from ./../apiExamples/multiple-toasts.html -->
303
+ <auro-button id="multiToastBtn-default">Show default toast</auro-button>
304
+ <auro-button id="multiToastBtn-error">Show error toast</auro-button>
305
+ <auro-button id="multiToastBtn-success">Show success toast</auro-button>
306
+ <auro-toaster>
307
+ <auro-toast id="multiToast-default">Default toast</auro-toast>
308
+ <auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
309
+ <auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
310
+ </auro-toaster>
311
+ <!-- AURO-GENERATED-CONTENT:END -->
312
+ </div>
313
+ <auro-accordion alignRight>
314
+ <span slot="trigger">See code</span>
315
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiple-toasts.html) -->
316
+ <!-- The below code snippet is automatically added from ./../apiExamples/multiple-toasts.html -->
317
+
318
+ ```html
319
+ <auro-button id="multiToastBtn-default">Show default toast</auro-button>
320
+ <auro-button id="multiToastBtn-error">Show error toast</auro-button>
321
+ <auro-button id="multiToastBtn-success">Show success toast</auro-button>
322
+ <auro-toaster>
323
+ <auro-toast id="multiToast-default">Default toast</auro-toast>
324
+ <auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
325
+ <auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
326
+ </auro-toaster>
327
+ ```
225
328
  <!-- AURO-GENERATED-CONTENT:END -->
226
329
  </auro-accordion>
227
330
 
228
- ### Theme Support
331
+ ## Restyle Component with CSS Variables
229
332
 
230
- The component may be restyled using the following code sample and changing the values of the following token(s).
333
+ The component may be restyled by changing the values of the following token(s).
231
334
 
232
335
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
233
336
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->