@aurodesignsystem-dev/auro-alert 0.0.0-pr105.0 → 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 (11) hide show
  1. package/README.md +42 -56
  2. package/demo/api.md +184 -134
  3. package/demo/auro-alert.min.js +63 -18
  4. package/demo/index.html +1 -1
  5. package/demo/index.md +5 -155
  6. package/dist/auro-alert-C5hNY0oc.js +35 -0
  7. package/dist/index.d.ts +10 -10
  8. package/dist/index.js +1 -1
  9. package/dist/registered.js +1 -1
  10. package/package.json +10 -8
  11. package/dist/auro-alert-DOBbqg8s.js +0 -35
package/README.md CHANGED
@@ -21,24 +21,26 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- The `auro-alert` component renders errors, warnings, and other inline notifications with automated styling elements. Simply add the `type` attribute the corresponding value. If you need to present multiple lines in the same alert wrapper, use p tags for each line.
24
+ The `auro-alert` component renders inline notifications with automatic styling based on the alert type.
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
28
28
  <!-- 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. -->
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
 
31
- ## UI development browser support
31
+ ## Use Cases
32
32
 
33
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
+ The `auro-alert` element should be used:
35
36
 
37
+ * To communicate important, time-sensitive or state-changing information to users
36
38
  <!-- AURO-GENERATED-CONTENT:END -->
37
39
 
38
40
  ## Install
39
41
 
40
42
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
41
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-alert/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-alert/actions/workflows/testPublish.yml)
43
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-alert/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-alert/actions/workflows/release.yml)
42
44
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-alert?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-alert)
43
45
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-alert?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
46
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +51,10 @@ $ npm i @aurodesignsystem/auro-alert
49
51
 
50
52
  <!-- AURO-GENERATED-CONTENT:END -->
51
53
 
52
- ### Design Token CSS Custom Property dependency
53
-
54
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
55
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
56
-
57
- <!-- AURO-GENERATED-CONTENT:END -->
58
-
59
- ### Define dependency in project component
54
+ ### Define Dependency in Project
60
55
 
61
56
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
62
- Defining the component dependency within each component that is using the `<auro-alert>` component.
57
+ Defining the dependency within each project that is using the `<auro-alert>` component.
63
58
 
64
59
  <!-- AURO-GENERATED-CONTENT:END -->
65
60
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,17 +63,9 @@ Defining the component dependency within each component that is using the `<auro
68
63
  import "@aurodesignsystem/auro-alert";
69
64
  ```
70
65
 
71
- <!-- AURO-GENERATED-CONTENT:END -->
72
- **Reference component in HTML**
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
74
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
75
-
76
- ```html
77
- <auro-alert>This is a default error with no error type specified.</auro-alert>
78
- ```
79
66
  <!-- AURO-GENERATED-CONTENT:END -->
80
67
 
81
- ## Use CDN
68
+ ### Use CDN
82
69
 
83
70
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
84
71
  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.
@@ -89,20 +76,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
89
76
 
90
77
  <!-- AURO-GENERATED-CONTENT:END -->
91
78
 
92
- ## auro-alert use cases
93
-
94
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
95
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
96
- The `auro-alert` use cases include:
97
-
98
- * Error messages
99
- * Warning messages
100
- * Informational messages
101
- <!-- AURO-GENERATED-CONTENT:END -->
102
-
103
- ## API Code Examples
104
-
105
- ### Default auro-alert
79
+ ## Basic Example
106
80
 
107
81
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
108
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -112,31 +86,43 @@ The `auro-alert` use cases include:
112
86
  ```
113
87
  <!-- AURO-GENERATED-CONTENT:END -->
114
88
 
115
- ## Development
89
+ ## Custom Component Registration for Version Management
116
90
 
117
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
118
- 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.
91
+ 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.
92
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
119
93
 
120
- 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.
94
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
121
95
 
122
- <!-- AURO-GENERATED-CONTENT:END -->
123
-
124
- ### Start development environment
96
+ 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.
125
97
 
126
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
127
- 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**.
98
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
128
99
 
129
- ```shell
130
- $ npm run dev
100
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
101
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
102
+
103
+ ```js
104
+ // Import the class only
105
+ import { AuroAlert } from '@aurodesignsystem/auro-alert/class';
106
+
107
+ // Register with a custom name if desired
108
+ AuroAlert.register('custom-alert');
131
109
  ```
132
110
 
133
- Open [localhost:8000](http://localhost:8000/)
134
-
111
+ This will create a new custom element <custom-alert> that behaves exactly like <auro-alert>, allowing both to coexist on the same page without interfering with each other.
135
112
  <!-- AURO-GENERATED-CONTENT:END -->
113
+ <div class="exampleWrapper exampleWrapper--flex">
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
115
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
116
+ <custom-alert type="warning">Salutations World!</custom-alert>
117
+ <!-- AURO-GENERATED-CONTENT:END -->
118
+ </div>
119
+ <auro-accordion alignRight>
120
+ <span slot="trigger">See code</span>
121
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
122
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
136
123
 
137
- ### Testing
138
-
139
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
140
- Automated tests are required for every Auro component. See `.\test\auro-alert.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.
141
-
142
- <!-- AURO-GENERATED-CONTENT:END -->
124
+ ```html
125
+ <custom-alert type="warning">Salutations World!</custom-alert>
126
+ ```
127
+ <!-- AURO-GENERATED-CONTENT:END -->
128
+ </auro-accordion>
package/demo/api.md CHANGED
@@ -3,61 +3,43 @@
3
3
 
4
4
  # auro-alert
5
5
 
6
- ## Properties
6
+ ### Properties & Attributes
7
7
 
8
- | Property | Attribute | Type | Description |
9
- |------------------|------------------|-----------|--------------------------------------------------|
10
- | [hidden](#hidden) | `hidden` | `Boolean` | If present, the component will be hidden both visually and from screen readers |
11
- | [hiddenAudible](#hiddenAudible) | `hiddenAudible` | `Boolean` | If present, the component will be hidden from screen readers, but seen visually |
12
- | [hiddenVisually](#hiddenVisually) | `hiddenVisually` | `Boolean` | If present, the component will be hidden visually, but still read by screen readers |
13
- | [noIcon](#noIcon) | `noIcon` | `Boolean` | Removes icon from alert UI |
14
- | [type](#type) | `type` | `String` | Component will render visually based on which type value is set; currently supports `error`, `warning`, `success`, `information` |
8
+ | Properties | Attributes | Modifiers | Type | Default | Description |
9
+ | -------------- | -------------- | --------- | -------------------------------------------------- | ------- | ----------------------------------------------------------------------------------- |
10
+ | hidden | hidden | | boolean | | If present, the component will be hidden both visually and from screen readers |
11
+ | hiddenAudible | hiddenAudible | | boolean | | If present, the component will be hidden from screen readers, but seen visually |
12
+ | hiddenVisually | hiddenVisually | | boolean | | If present, the component will be hidden visually, but still read by screen readers |
13
+ | noIcon | noIcon | | boolean | | Removes icon from alert UI when `type` attribute is set |
14
+ | type | type | | 'information' \| 'error' \| 'success' \| 'warning' | | Component will render visually based on which type value is set |
15
15
 
16
- ## Slots
16
+ ### Methods
17
17
 
18
- | Name | Description |
19
- |------|--------------------------------------------------|
20
- | | Provide text for the alert. If using multiple lines, separate each line with `<p>` tags. |
18
+ | Name | Parameters | Return | Description |
19
+ | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
20
+ | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
21
21
 
22
- ## CSS Shadow Parts
22
+ ### Slots
23
23
 
24
- | Part | Description |
25
- |-----------------|--------------------------------------------------|
26
- | [alert](#alert) | Use for customizing the style of the alert container |
27
- | `alert-content` | Use for customizing the style of the alert content |
24
+ | Name | Description |
25
+ | --------- | ---------------------------------------------------------------------------------------- |
26
+ | (default) | Provide text for the alert. If using multiple lines, separate each line with `<p>` tags. |
27
+
28
+ ### CSS Shadow Parts
29
+
30
+ | Name | Description |
31
+ | ------------- | ---------------------------------------------------- |
32
+ | alert | Use for customizing the style of the alert container |
33
+ | alert-content | Use for customizing the style of the alert content |
28
34
  <!-- AURO-GENERATED-CONTENT:END -->
29
35
 
30
- ## Alert API Examples
31
-
32
- ### `type`
33
-
34
- The `type` attribute of the `<auro-alert>` element supports the following values, `error`, `warning`, `information` and `success`.
36
+ ## Basic
35
37
 
36
38
  <div class="exampleWrapper">
37
39
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
38
40
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
39
41
  <auro-alert>This is a default error with no error type specified.</auro-alert>
40
42
  <!-- AURO-GENERATED-CONTENT:END -->
41
- <br>
42
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
43
- <!-- The below content is automatically added from ./../apiExamples/error.html -->
44
- <auro-alert type="error">Transaction failed.</auro-alert>
45
- <!-- AURO-GENERATED-CONTENT:END -->
46
- <br>
47
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/warning.html) -->
48
- <!-- The below content is automatically added from ./../apiExamples/warning.html -->
49
- <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
50
- <!-- AURO-GENERATED-CONTENT:END -->
51
- <br>
52
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/information.html) -->
53
- <!-- The below content is automatically added from ./../apiExamples/information.html -->
54
- <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
55
- <!-- AURO-GENERATED-CONTENT:END -->
56
- <br>
57
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success.html) -->
58
- <!-- The below content is automatically added from ./../apiExamples/success.html -->
59
- <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
60
- <!-- AURO-GENERATED-CONTENT:END -->
61
43
  </div>
62
44
  <auro-accordion alignRight>
63
45
  <span slot="trigger">See code</span>
@@ -67,117 +49,54 @@ The `type` attribute of the `<auro-alert>` element supports the following values
67
49
  ```html
68
50
  <auro-alert>This is a default error with no error type specified.</auro-alert>
69
51
  ```
70
- <!-- AURO-GENERATED-CONTENT:END -->
71
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
72
- <!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
73
-
74
- ```html
75
- <auro-alert type="error">Transaction failed.</auro-alert>
76
- ```
77
- <!-- AURO-GENERATED-CONTENT:END -->
78
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/warning.html) -->
79
- <!-- The below code snippet is automatically added from ./../apiExamples/warning.html -->
80
-
81
- ```html
82
- <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
83
- ```
84
- <!-- AURO-GENERATED-CONTENT:END -->
85
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/information.html) -->
86
- <!-- The below code snippet is automatically added from ./../apiExamples/information.html -->
87
-
88
- ```html
89
- <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
90
- ```
91
- <!-- AURO-GENERATED-CONTENT:END -->
92
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success.html) -->
93
- <!-- The below code snippet is automatically added from ./../apiExamples/success.html -->
94
-
95
- ```html
96
- <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
97
- ```
98
52
  <!-- AURO-GENERATED-CONTENT:END -->
99
53
  </auro-accordion>
100
54
 
101
- ### `noIcon`
55
+ ## Property & Attribute Examples
56
+
57
+ ### Hidden
102
58
 
103
- The following `<auro-alert>` example illustrates using the `noIcon` attribute.
59
+ Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
104
60
 
105
61
  <div class="exampleWrapper">
106
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error-no-icon.html) -->
107
- <!-- The below content is automatically added from ./../apiExamples/error-no-icon.html -->
108
- <auro-alert noIcon type="error">Transaction failed.</auro-alert>
109
- <!-- AURO-GENERATED-CONTENT:END -->
110
- <br>
111
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/information-no-icon.html) -->
112
- <!-- The below content is automatically added from ./../apiExamples/information-no-icon.html -->
113
- <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
114
- <!-- AURO-GENERATED-CONTENT:END -->
115
- <br>
116
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/warning-no-icon.html) -->
117
- <!-- The below content is automatically added from ./../apiExamples/warning-no-icon.html -->
118
- <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
119
- <!-- AURO-GENERATED-CONTENT:END -->
120
- <br>
121
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success-no-icon.html) -->
122
- <!-- The below content is automatically added from ./../apiExamples/success-no-icon.html -->
123
- <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
62
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
63
+ <!-- The below content is automatically added from ./../apiExamples/hidden.html -->
64
+ <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
124
65
  <!-- AURO-GENERATED-CONTENT:END -->
125
- <br>
126
66
  </div>
127
67
  <auro-accordion alignRight>
128
68
  <span slot="trigger">See code</span>
129
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error-no-icon.html) -->
130
- <!-- The below code snippet is automatically added from ./../apiExamples/error-no-icon.html -->
131
-
132
- ```html
133
- <auro-alert noIcon type="error">Transaction failed.</auro-alert>
134
- ```
135
- <!-- AURO-GENERATED-CONTENT:END -->
136
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/information-no-icon.html) -->
137
- <!-- The below code snippet is automatically added from ./../apiExamples/information-no-icon.html -->
138
-
139
- ```html
140
- <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
141
- ```
142
- <!-- AURO-GENERATED-CONTENT:END -->
143
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/warning-no-icon.html) -->
144
- <!-- The below code snippet is automatically added from ./../apiExamples/warning-no-icon.html -->
145
-
146
- ```html
147
- <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
148
- ```
149
- <!-- AURO-GENERATED-CONTENT:END -->
150
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success-no-icon.html) -->
151
- <!-- The below code snippet is automatically added from ./../apiExamples/success-no-icon.html -->
69
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
70
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
152
71
 
153
72
  ```html
154
- <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
73
+ <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
155
74
  ```
156
75
  <!-- AURO-GENERATED-CONTENT:END -->
157
76
  </auro-accordion>
158
77
 
159
- ### `hidden`
78
+ ### Hidden Audibly
160
79
 
161
- Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
80
+ Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
162
81
 
163
82
  <div class="exampleWrapper">
164
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
165
- <!-- The below content is automatically added from ./../apiExamples/hidden.html -->
166
- <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
83
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-audible.html) -->
84
+ <!-- The below content is automatically added from ./../apiExamples/hidden-audible.html -->
85
+ <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
167
86
  <!-- AURO-GENERATED-CONTENT:END -->
168
87
  </div>
169
88
  <auro-accordion alignRight>
170
89
  <span slot="trigger">See code</span>
171
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
172
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
90
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
91
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->
173
92
 
174
93
  ```html
175
- <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
94
+ <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
176
95
  ```
177
96
  <!-- AURO-GENERATED-CONTENT:END -->
178
97
  </auro-accordion>
179
98
 
180
- ### `hiddenVisually`
99
+ ### Hidden Visually
181
100
 
182
101
  Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
183
102
 
@@ -198,30 +117,161 @@ Use the `hiddenVisually` attribute to visually hide the `auro-alert` component f
198
117
  <!-- AURO-GENERATED-CONTENT:END -->
199
118
  </auro-accordion>
200
119
 
201
- ### `hiddenAudible`
120
+ ### No Icon
202
121
 
203
- Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
122
+ Use the `noIcon` attribute to remove the icon from the alert UI when the `type` attribute is set.
204
123
 
205
124
  <div class="exampleWrapper">
206
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-audible.html) -->
207
- <!-- The below content is automatically added from ./../apiExamples/hidden-audible.html -->
208
- <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
125
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type-noicon.html) -->
126
+ <!-- The below content is automatically added from ./../apiExamples/type-noicon.html -->
127
+ <auro-alert noIcon type="error">Transaction failed.</auro-alert>
128
+ <br />
129
+ <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
130
+ <br />
131
+ <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
132
+ <br />
133
+ <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
209
134
  <!-- AURO-GENERATED-CONTENT:END -->
210
135
  </div>
211
136
  <auro-accordion alignRight>
212
137
  <span slot="trigger">See code</span>
213
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
214
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->
138
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type-noicon.html) -->
139
+ <!-- The below code snippet is automatically added from ./../apiExamples/type-noicon.html -->
140
+ ```html
141
+ <auro-alert noIcon type="error">Transaction failed.</auro-alert>
142
+ <br />
143
+ <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
144
+ <br />
145
+ <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
146
+ <br />
147
+ <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
148
+ ```
149
+ <!-- AURO-GENERATED-CONTENT:END -->
150
+ </auro-accordion>
151
+
152
+ ### Type
153
+
154
+ Use the `type` attribute to apply an icon and border color that match the alert’s purpose. It supports the following values: `error`, `information`, `success`, and `warning`.
155
+
156
+ <div class="exampleWrapper">
157
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type.html) -->
158
+ <!-- The below content is automatically added from ./../apiExamples/type.html -->
159
+ <auro-alert type="error">Transaction failed.</auro-alert>
160
+ <br />
161
+ <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
162
+ <br />
163
+ <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
164
+ <br />
165
+ <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
166
+ <!-- AURO-GENERATED-CONTENT:END -->
167
+ </div>
168
+ <auro-accordion alignRight>
169
+ <span slot="trigger">See code</span>
170
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type.html) -->
171
+ <!-- The below code snippet is automatically added from ./../apiExamples/type.html -->
172
+ ```html
173
+ <auro-alert type="error">Transaction failed.</auro-alert>
174
+ <br />
175
+ <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
176
+ <br />
177
+ <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
178
+ <br />
179
+ <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
180
+ ```
181
+ <!-- AURO-GENERATED-CONTENT:END -->
182
+ </auro-accordion>
183
+
184
+ ## Common Usage Patterns & Functional Examples
185
+
186
+ ### Multi-line Alert
187
+
188
+ If you need to present multiple lines in the same alert, wrap each line in a `<p>` tag.
189
+
190
+ <div class="exampleWrapper">
191
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline.html) -->
192
+ <!-- The below content is automatically added from ./../apiExamples/multiline.html -->
193
+ <auro-alert type="error">
194
+ <p>This is error message 1.</p>
195
+ <p>This is error message 2.</p>
196
+ </auro-alert>
197
+ <!-- AURO-GENERATED-CONTENT:END -->
198
+ </div>
199
+ <auro-accordion alignRight>
200
+ <span slot="trigger">See code</span>
201
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiline.html) -->
202
+ <!-- The below code snippet is automatically added from ./../apiExamples/multiline.html -->
215
203
 
216
204
  ```html
217
- <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
205
+ <auro-alert type="error">
206
+ <p>This is error message 1.</p>
207
+ <p>This is error message 2.</p>
208
+ </auro-alert>
209
+ ```
210
+ <!-- AURO-GENERATED-CONTENT:END -->
211
+ </auro-accordion>
212
+
213
+ ### Customize content
214
+
215
+ While Auro components, `auro-alert` included, come with a pre-defined UI opinion, another feature that is fully supported is a user's ability to customize any content in the slot. The following example illustrates how a user can completely customize the content in the `<slot>` of the element, while not needing to recreate the `auro-alert` UI.
216
+
217
+ <div class="exampleWrapper">
218
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-content.html) -->
219
+ <!-- The below content is automatically added from ./../apiExamples/custom-content.html -->
220
+ <auro-alert type="information">
221
+ <style>
222
+ .contentWrapper { padding-top: .25rem; }
223
+ .contentWrapper * { line-height: 1.2 !important; font-size: var(--ds-text-body-size-sm); }
224
+ .leanPara { margin: 0 0 var(--ds-size-xs) 0 !important; }
225
+ .unstyled { padding-left: 20px; }
226
+ </style>
227
+ <div class="contentWrapper leanPara">
228
+ <p class="leanPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum varius sit amet mattis vulputate.</p>
229
+ <p>Eu nisl nunc mi ipsum faucibus vitae. Tristique senectus et netus et malesuada fames ac turpis. Nunc sed velit dignissim sodales ut. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem. Vitae sapien pellentesque habitant morbi tristique senectus et. </p>
230
+ <ul class="unstyled">
231
+ <li>Varius sit amet mattis vulputate enim. </li>
232
+ <li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
233
+ </ul>
234
+ <p class="leanPara">Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Porttitor rhoncus dolor purus non enim. Sit amet nulla facilisi morbi tempus iaculis urna id. Nec ullamcorper sit amet risus nullam eget felis.</p>
235
+ <p class="fineprint" style="margin: 0;">
236
+ * Non arcu risus quis varius quam quisque id. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nec feugiat nisl pretium fusce id velit ut tortor.
237
+ </p>
238
+ </div>
239
+ </auro-alert>
240
+ <!-- AURO-GENERATED-CONTENT:END -->
241
+ </div>
242
+ <auro-accordion alignRight>
243
+ <span slot="trigger">See code</span>
244
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-content.html) -->
245
+ <!-- The below code snippet is automatically added from ./../apiExamples/custom-content.html -->
246
+
247
+ ```html
248
+ <auro-alert type="information">
249
+ <style>
250
+ .contentWrapper { padding-top: .25rem; }
251
+ .contentWrapper * { line-height: 1.2 !important; font-size: var(--ds-text-body-size-sm); }
252
+ .leanPara { margin: 0 0 var(--ds-size-xs) 0 !important; }
253
+ .unstyled { padding-left: 20px; }
254
+ </style>
255
+ <div class="contentWrapper leanPara">
256
+ <p class="leanPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Interdum varius sit amet mattis vulputate.</p>
257
+ <p>Eu nisl nunc mi ipsum faucibus vitae. Tristique senectus et netus et malesuada fames ac turpis. Nunc sed velit dignissim sodales ut. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula. Vel pharetra vel turpis nunc eget lorem. Vitae sapien pellentesque habitant morbi tristique senectus et. </p>
258
+ <ul class="unstyled">
259
+ <li>Varius sit amet mattis vulputate enim. </li>
260
+ <li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
261
+ </ul>
262
+ <p class="leanPara">Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Porttitor rhoncus dolor purus non enim. Sit amet nulla facilisi morbi tempus iaculis urna id. Nec ullamcorper sit amet risus nullam eget felis.</p>
263
+ <p class="fineprint" style="margin: 0;">
264
+ * Non arcu risus quis varius quam quisque id. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Nec feugiat nisl pretium fusce id velit ut tortor.
265
+ </p>
266
+ </div>
267
+ </auro-alert>
218
268
  ```
219
269
  <!-- AURO-GENERATED-CONTENT:END -->
220
270
  </auro-accordion>
221
271
 
222
- ### Theme Support
272
+ ## Restyle Component with CSS Variables
223
273
 
224
- The component may be restyled using the following code sample and changing the values of the following token(s).
274
+ The component may be restyled by changing the values of the following token(s).
225
275
 
226
276
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
227
277
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->