@aurodesignsystem-dev/auro-alert 0.0.0-pr104.4 → 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 +140 -183
  3. package/demo/auro-alert.min.js +18 -63
  4. package/demo/index.html +1 -1
  5. package/demo/index.md +162 -9
  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,268 +3,225 @@
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 -->
43
- </div>
44
- <auro-accordion alignRight>
45
- <span slot="trigger">See code</span>
46
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
47
- <!-- The below content is automatically added from ./../apiExamples/basic.html -->
48
- <auro-alert>This is a default error with no error type specified.</auro-alert>
49
- <!-- AURO-GENERATED-CONTENT:END -->
50
- </auro-accordion>
51
-
52
- ## Property & Attribute Examples
53
-
54
- ### Hidden
55
-
56
- Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
57
-
58
- <div class="exampleWrapper">
59
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden.html) -->
60
- <!-- The below content is automatically added from ./../apiExamples/hidden.html -->
61
- <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
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>
62
60
  <!-- AURO-GENERATED-CONTENT:END -->
63
61
  </div>
64
62
  <auro-accordion alignRight>
65
63
  <span slot="trigger">See code</span>
66
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
67
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
64
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
65
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
68
66
 
69
67
  ```html
70
- <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
68
+ <auro-alert>This is a default error with no error type specified.</auro-alert>
71
69
  ```
72
- <!-- AURO-GENERATED-CONTENT:END -->
73
- </auro-accordion>
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 -->
74
73
 
75
- ### Hidden Audibly
76
-
77
- Use the `hiddenAudible` attribute to hide the `auro-alert` component from the screenreader only.
78
-
79
- <div class="exampleWrapper">
80
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-audible.html) -->
81
- <!-- The below content is automatically added from ./../apiExamples/hidden-audible.html -->
82
- <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
83
- <!-- AURO-GENERATED-CONTENT:END -->
84
- </div>
85
- <auro-accordion alignRight>
86
- <span slot="trigger">See code</span>
87
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-audible.html) -->
88
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden-audible.html -->
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 -->
89
80
 
90
81
  ```html
91
- <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
82
+ <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
92
83
  ```
93
- <!-- AURO-GENERATED-CONTENT:END -->
94
- </auro-accordion>
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 -->
95
87
 
96
- ### Hidden Visually
97
-
98
- Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
99
-
100
- <div class="exampleWrapper">
101
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-visually.html) -->
102
- <!-- The below content is automatically added from ./../apiExamples/hidden-visually.html -->
103
- <auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
104
- <!-- AURO-GENERATED-CONTENT:END -->
105
- </div>
106
- <auro-accordion alignRight>
107
- <span slot="trigger">See code</span>
108
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-visually.html) -->
109
- <!-- The below code snippet is automatically added from ./../apiExamples/hidden-visually.html -->
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 -->
110
94
 
111
95
  ```html
112
- <auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
96
+ <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
113
97
  ```
114
98
  <!-- AURO-GENERATED-CONTENT:END -->
115
99
  </auro-accordion>
116
100
 
117
- ### No Icon
101
+ ### `noIcon`
118
102
 
119
- Use the `noIcon` attribute to remove the icon from the alert UI when the `type` attribute is set.
103
+ The following `<auro-alert>` example illustrates using the `noIcon` attribute.
120
104
 
121
105
  <div class="exampleWrapper">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type-noicon.html) -->
123
- <!-- The below content is automatically added from ./../apiExamples/type-noicon.html -->
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 -->
124
108
  <auro-alert noIcon type="error">Transaction failed.</auro-alert>
125
- <br />
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 -->
126
113
  <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
127
- <br />
128
- <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
129
- <br />
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 -->
130
118
  <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
131
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>
124
+ <!-- AURO-GENERATED-CONTENT:END -->
125
+ <br>
132
126
  </div>
133
127
  <auro-accordion alignRight>
134
128
  <span slot="trigger">See code</span>
135
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type-noicon.html) -->
136
- <!-- The below content is automatically added from ./../apiExamples/type-noicon.html -->
137
- <auro-alert noIcon type="error">Transaction failed.</auro-alert>
138
- <br />
139
- <auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
140
- <br />
141
- <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
142
- <br />
143
- <auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
144
- <!-- AURO-GENERATED-CONTENT:END -->
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 -->
152
+
153
+ ```html
154
+ <auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
155
+ ```
156
+ <!-- AURO-GENERATED-CONTENT:END -->
145
157
  </auro-accordion>
146
158
 
147
- ### Type
159
+ ### `hidden`
148
160
 
149
- 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`.
161
+ Use the `hidden` attribute to hide the `auro-alert` component from the user and screenreader.
150
162
 
151
163
  <div class="exampleWrapper">
152
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type.html) -->
153
- <!-- The below content is automatically added from ./../apiExamples/type.html -->
154
- <auro-alert type="error">Transaction failed.</auro-alert>
155
- <br />
156
- <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
157
- <br />
158
- <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
159
- <br />
160
- <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</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>
161
167
  <!-- AURO-GENERATED-CONTENT:END -->
162
168
  </div>
163
169
  <auro-accordion alignRight>
164
170
  <span slot="trigger">See code</span>
165
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/type.html) -->
166
- <!-- The below content is automatically added from ./../apiExamples/type.html -->
167
- <auro-alert type="error">Transaction failed.</auro-alert>
168
- <br />
169
- <auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
170
- <br />
171
- <auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
172
- <br />
173
- <auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
174
- <!-- AURO-GENERATED-CONTENT:END -->
175
- </auro-accordion>
171
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden.html) -->
172
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden.html -->
176
173
 
177
- ## Common Usage Patterns & Functional Examples
174
+ ```html
175
+ <auro-alert hidden type="error">This content will be hidden visually and from screen readers.</auro-alert>
176
+ ```
177
+ <!-- AURO-GENERATED-CONTENT:END -->
178
+ </auro-accordion>
178
179
 
179
- ### Multi-line Alert
180
+ ### `hiddenVisually`
180
181
 
181
- If you need to present multiple lines in the same alert, wrap each line in a `<p>` tag.
182
+ Use the `hiddenVisually` attribute to visually hide the `auro-alert` component from the user only.
182
183
 
183
184
  <div class="exampleWrapper">
184
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiline.html) -->
185
- <!-- The below content is automatically added from ./../apiExamples/multiline.html -->
186
- <auro-alert type="error">
187
- <p>This is error message 1.</p>
188
- <p>This is error message 2.</p>
189
- </auro-alert>
185
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/hidden-visually.html) -->
186
+ <!-- The below content is automatically added from ./../apiExamples/hidden-visually.html -->
187
+ <auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
190
188
  <!-- AURO-GENERATED-CONTENT:END -->
191
189
  </div>
192
190
  <auro-accordion alignRight>
193
191
  <span slot="trigger">See code</span>
194
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiline.html) -->
195
- <!-- The below code snippet is automatically added from ./../apiExamples/multiline.html -->
192
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/hidden-visually.html) -->
193
+ <!-- The below code snippet is automatically added from ./../apiExamples/hidden-visually.html -->
196
194
 
197
195
  ```html
198
- <auro-alert type="error">
199
- <p>This is error message 1.</p>
200
- <p>This is error message 2.</p>
201
- </auro-alert>
196
+ <auro-alert hiddenVisually type="error">This content will be hidden visually, but screen readers will still pick it up.</auro-alert>
202
197
  ```
203
198
  <!-- AURO-GENERATED-CONTENT:END -->
204
199
  </auro-accordion>
205
200
 
206
- ### Customize content
201
+ ### `hiddenAudible`
207
202
 
208
- 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.
209
204
 
210
205
  <div class="exampleWrapper">
211
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom-content.html) -->
212
- <!-- The below content is automatically added from ./../apiExamples/custom-content.html -->
213
- <auro-alert type="information">
214
- <style>
215
- .contentWrapper { padding-top: .25rem; }
216
- .contentWrapper * { line-height: 1.2 !important; font-size: var(--ds-text-body-size-sm); }
217
- .leanPara { margin: 0 0 var(--ds-size-xs) 0 !important; }
218
- .unstyled { padding-left: 20px; }
219
- </style>
220
- <div class="contentWrapper leanPara">
221
- <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>
222
- <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>
223
- <ul class="unstyled">
224
- <li>Varius sit amet mattis vulputate enim. </li>
225
- <li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
226
- </ul>
227
- <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>
228
- <p class="fineprint" style="margin: 0;">
229
- * 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.
230
- </p>
231
- </div>
232
- </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>
233
209
  <!-- AURO-GENERATED-CONTENT:END -->
234
210
  </div>
235
211
  <auro-accordion alignRight>
236
212
  <span slot="trigger">See code</span>
237
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom-content.html) -->
238
- <!-- 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 -->
239
215
 
240
216
  ```html
241
- <auro-alert type="information">
242
- <style>
243
- .contentWrapper { padding-top: .25rem; }
244
- .contentWrapper * { line-height: 1.2 !important; font-size: var(--ds-text-body-size-sm); }
245
- .leanPara { margin: 0 0 var(--ds-size-xs) 0 !important; }
246
- .unstyled { padding-left: 20px; }
247
- </style>
248
- <div class="contentWrapper leanPara">
249
- <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>
250
- <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>
251
- <ul class="unstyled">
252
- <li>Varius sit amet mattis vulputate enim. </li>
253
- <li>Amet risus nullam eget felis eget nunc. Id consectetur purus ut faucibus pulvinar.</li>
254
- </ul>
255
- <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>
256
- <p class="fineprint" style="margin: 0;">
257
- * 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.
258
- </p>
259
- </div>
260
- </auro-alert>
217
+ <auro-alert hiddenAudible type="error">This content will be hidden from screen readers.</auro-alert>
261
218
  ```
262
219
  <!-- AURO-GENERATED-CONTENT:END -->
263
220
  </auro-accordion>
264
221
 
265
- ## Restyle Component with CSS Variables
222
+ ### Theme Support
266
223
 
267
- 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).
268
225
 
269
226
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
270
227
  <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->