@aurodesignsystem-dev/auro-alert 0.0.0-pr104.5 → 0.0.0-pr105.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 +56 -42
  2. package/demo/api.md +134 -184
  3. package/demo/auro-alert.min.js +18 -63
  4. package/demo/index.html +1 -1
  5. package/demo/index.md +155 -5
  6. package/dist/auro-alert-DOBbqg8s.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 +8 -10
  11. package/dist/auro-alert-C5hNY0oc.js +0 -35
package/README.md CHANGED
@@ -21,26 +21,24 @@ 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 inline notifications with automatic styling based on the alert type.
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.
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
- ## Use Cases
31
+ ## UI development browser support
32
32
 
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:
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)
36
35
 
37
- * To communicate important, time-sensitive or state-changing information to users
38
36
  <!-- AURO-GENERATED-CONTENT:END -->
39
37
 
40
38
  ## Install
41
39
 
42
40
  <!-- 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-alert/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-alert/actions/workflows/release.yml)
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)
44
42
  [![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)
45
43
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-alert?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
46
44
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -51,10 +49,17 @@ $ npm i @aurodesignsystem/auro-alert
51
49
 
52
50
  <!-- AURO-GENERATED-CONTENT:END -->
53
51
 
54
- ### Define Dependency in Project
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
55
60
 
56
61
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
57
- Defining the dependency within each project that is using the `<auro-alert>` component.
62
+ Defining the component dependency within each component that is using the `<auro-alert>` component.
58
63
 
59
64
  <!-- AURO-GENERATED-CONTENT:END -->
60
65
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -63,9 +68,17 @@ Defining the dependency within each project that is using the `<auro-alert>` com
63
68
  import "@aurodesignsystem/auro-alert";
64
69
  ```
65
70
 
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
+ ```
66
79
  <!-- AURO-GENERATED-CONTENT:END -->
67
80
 
68
- ### Use CDN
81
+ ## Use CDN
69
82
 
70
83
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
71
84
  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.
@@ -76,7 +89,20 @@ In cases where the project is not able to process JS assets, there are pre-proce
76
89
 
77
90
  <!-- AURO-GENERATED-CONTENT:END -->
78
91
 
79
- ## Basic Example
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
80
106
 
81
107
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
82
108
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -86,43 +112,31 @@ In cases where the project is not able to process JS assets, there are pre-proce
86
112
  ```
87
113
  <!-- AURO-GENERATED-CONTENT:END -->
88
114
 
89
- ## Custom Component Registration for Version Management
115
+ ## Development
90
116
 
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.
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.
93
119
 
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.
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.
95
121
 
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.
97
-
98
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
99
-
100
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
101
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
122
+ <!-- AURO-GENERATED-CONTENT:END -->
102
123
 
103
- ```js
104
- // Import the class only
105
- import { AuroAlert } from '@aurodesignsystem/auro-alert/class';
124
+ ### Start development environment
106
125
 
107
- // Register with a custom name if desired
108
- AuroAlert.register('custom-alert');
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**.
128
+
129
+ ```shell
130
+ $ npm run dev
109
131
  ```
110
132
 
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.
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 -->
133
+ Open [localhost:8000](http://localhost:8000/)
123
134
 
124
- ```html
125
- <custom-alert type="warning">Salutations World!</custom-alert>
126
- ```
127
135
  <!-- AURO-GENERATED-CONTENT:END -->
128
- </auro-accordion>
136
+
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 -->
package/demo/api.md CHANGED
@@ -3,43 +3,61 @@
3
3
 
4
4
  # auro-alert
5
5
 
6
- ### Properties & Attributes
6
+ ## Properties
7
7
 
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 |
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` |
15
15
 
16
- ### Methods
16
+ ## Slots
17
17
 
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. |
18
+ | Name | Description |
19
+ |------|--------------------------------------------------|
20
+ | | Provide text for the alert. If using multiple lines, separate each line with `<p>` tags. |
21
21
 
22
- ### Slots
22
+ ## CSS Shadow Parts
23
23
 
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 |
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 |
34
28
  <!-- AURO-GENERATED-CONTENT:END -->
35
29
 
36
- ## Basic
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`.
37
35
 
38
36
  <div class="exampleWrapper">
39
37
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
40
38
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
41
39
  <auro-alert>This is a default error with no error type specified.</auro-alert>
42
40
  <!-- 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 -->
43
61
  </div>
44
62
  <auro-accordion alignRight>
45
63
  <span slot="trigger">See code</span>
@@ -49,54 +67,117 @@
49
67
  ```html
50
68
  <auro-alert>This is a default error with no error type specified.</auro-alert>
51
69
  ```
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
+ ```
52
98
  <!-- AURO-GENERATED-CONTENT:END -->
53
99
  </auro-accordion>
54
100
 
55
- ## Property & Attribute Examples
56
-
57
- ### Hidden
101
+ ### `noIcon`
58
102
 
59
- Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
103
+ The following `<auro-alert>` example illustrates using the `noIcon` attribute.
60
104
 
61
105
  <div class="exampleWrapper">
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>
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>
65
124
  <!-- AURO-GENERATED-CONTENT:END -->
125
+ <br>
66
126
  </div>
67
127
  <auro-accordion alignRight>
68
128
  <span slot="trigger">See code</span>
69
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
70
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
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 -->
71
131
 
72
132
  ```html
73
- <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
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 -->
152
+
153
+ ```html
154
+ <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
74
155
  ```
75
156
  <!-- AURO-GENERATED-CONTENT:END -->
76
157
  </auro-accordion>
77
158
 
78
- ### Hidden Audibly
159
+ ### `hidden`
79
160
 
80
- Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
161
+ Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
81
162
 
82
163
  <div class="exampleWrapper">
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>
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>
86
167
  <!-- AURO-GENERATED-CONTENT:END -->
87
168
  </div>
88
169
  <auro-accordion alignRight>
89
170
  <span slot="trigger">See code</span>
90
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
91
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->
171
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
172
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
92
173
 
93
174
  ```html
94
- <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
175
+ <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
95
176
  ```
96
177
  <!-- AURO-GENERATED-CONTENT:END -->
97
178
  </auro-accordion>
98
179
 
99
- ### Hidden Visually
180
+ ### `hiddenVisually`
100
181
 
101
182
  Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
102
183
 
@@ -117,161 +198,30 @@ Use the `hiddenVisually` attribute to visually hide the `auro-alert` component f
117
198
  <!-- AURO-GENERATED-CONTENT:END -->
118
199
  </auro-accordion>
119
200
 
120
- ### No Icon
121
-
122
- Use the `noIcon` attribute to remove the icon from the alert UI when the `type` attribute is set.
123
-
124
- <div class="exampleWrapper">
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>
134
- <!-- AURO-GENERATED-CONTENT:END -->
135
- </div>
136
- <auro-accordion alignRight>
137
- <span slot="trigger">See code</span>
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 -->
203
-
204
- ```html
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
201
+ ### `hiddenAudible`
214
202
 
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.
203
+ Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
216
204
 
217
205
  <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>
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>
240
209
  <!-- AURO-GENERATED-CONTENT:END -->
241
210
  </div>
242
211
  <auro-accordion alignRight>
243
212
  <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 -->
213
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
214
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->
246
215
 
247
216
  ```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>
217
+ <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
268
218
  ```
269
219
  <!-- AURO-GENERATED-CONTENT:END -->
270
220
  </auro-accordion>
271
221
 
272
- ## Restyle Component with CSS Variables
222
+ ### Theme Support
273
223
 
274
- The component may be restyled by changing the values of the following token(s).
224
+ The component may be restyled using the following code sample and changing the values of the following token(s).
275
225
 
276
226
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
277
227
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->