@aurodesignsystem-dev/auro-alert 0.0.0-pr109.1 → 0.0.0-pr110.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/demo/api.md +27 -25
- package/dist/index.d.ts +202 -42
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -108,7 +108,7 @@ import { AuroAlert } from '@aurodesignsystem/auro-alert/class';
|
|
|
108
108
|
AuroAlert.register('custom-alert');
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
-
This will create a new custom element
|
|
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
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
113
113
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
114
114
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
package/demo/api.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
| hiddenAudible | hiddenAudible | | boolean | | If present, the component will be hidden from screen readers, but seen visually |
|
|
12
12
|
| hiddenVisually | hiddenVisually | | boolean | | If present, the component will be hidden visually, but still read by screen readers |
|
|
13
13
|
| noIcon | noIcon | | boolean | | Removes icon from alert UI when `type` attribute is set |
|
|
14
|
-
| type | type | |
|
|
14
|
+
| type | type | | `information` \| `error` \| `success` \| `warning` | | Component will render visually based on which type value is set |
|
|
15
15
|
|
|
16
16
|
### Methods
|
|
17
17
|
|
|
@@ -135,18 +135,19 @@ Use the `noIcon` attribute to remove the icon from the alert UI when the `type`
|
|
|
135
135
|
</div>
|
|
136
136
|
<auro-accordion alignRight>
|
|
137
137
|
<span slot="trigger">See code</span>
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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
|
+
|
|
141
|
+
```html
|
|
142
|
+
<auro-alert noIcon type="error">Transaction failed.</auro-alert>
|
|
143
|
+
<br />
|
|
144
|
+
<auro-alert noIcon type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
|
|
145
|
+
<br />
|
|
146
|
+
<auro-alert noIcon type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
|
|
147
|
+
<br />
|
|
148
|
+
<auro-alert noIcon type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
|
|
149
|
+
```
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
151
|
</auro-accordion>
|
|
151
152
|
|
|
152
153
|
### Type
|
|
@@ -167,18 +168,19 @@ Use the `type` attribute to apply an icon and border color that match the alert
|
|
|
167
168
|
</div>
|
|
168
169
|
<auro-accordion alignRight>
|
|
169
170
|
<span slot="trigger">See code</span>
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
171
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/type.html) -->
|
|
172
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/type.html -->
|
|
173
|
+
|
|
174
|
+
```html
|
|
175
|
+
<auro-alert type="error">Transaction failed.</auro-alert>
|
|
176
|
+
<br />
|
|
177
|
+
<auro-alert type="information">You are confirmed on Flight 20 to Aruba.</auro-alert>
|
|
178
|
+
<br />
|
|
179
|
+
<auro-alert type="success">Your status with flight 20 to Aruba had been updated.</auro-alert>
|
|
180
|
+
<br />
|
|
181
|
+
<auro-alert type="warning">Warning. Session timed out. Look for a confirmation email to verify your transaction.</auro-alert>
|
|
182
|
+
```
|
|
183
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
182
184
|
</auro-accordion>
|
|
183
185
|
|
|
184
186
|
## Common Usage Patterns & Functional Examples
|
package/dist/index.d.ts
CHANGED
|
@@ -1,42 +1,202 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
|
|
2
|
+
import type { AuroAlertWCA } from "scripts/wca/auro-alert.js";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* This type can be used to create scoped tags for your components.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import type { ScopedElements } from "path/to/library/jsx-integration";
|
|
11
|
+
*
|
|
12
|
+
* declare module "my-library" {
|
|
13
|
+
* namespace JSX {
|
|
14
|
+
* interface IntrinsicElements
|
|
15
|
+
* extends ScopedElements<'test-', ''> {}
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
|
|
21
|
+
*/
|
|
22
|
+
export type ScopedElements<
|
|
23
|
+
Prefix extends string = "",
|
|
24
|
+
Suffix extends string = ""
|
|
25
|
+
> = {
|
|
26
|
+
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
type BaseProps<T extends HTMLElement> = {
|
|
30
|
+
|
|
31
|
+
/** Content added between the opening and closing tags of the element */
|
|
32
|
+
children?: any;
|
|
33
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
34
|
+
class?: string;
|
|
35
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
|
|
38
|
+
classList?: Record<string, boolean | undefined>;
|
|
39
|
+
/** Specifies the text direction of the element. */
|
|
40
|
+
dir?: "ltr" | "rtl";
|
|
41
|
+
/** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
|
|
42
|
+
exportparts?: string;
|
|
43
|
+
/** For <label> and <output>, lets you associate the label with some control. */
|
|
44
|
+
htmlFor?: string;
|
|
45
|
+
/** Specifies whether the element should be hidden. */
|
|
46
|
+
hidden?: boolean | string;
|
|
47
|
+
/** A unique identifier for the element. */
|
|
48
|
+
id?: string;
|
|
49
|
+
/** Keys tell React which array item each component corresponds to */
|
|
50
|
+
key?: string | number;
|
|
51
|
+
/** Specifies the language of the element. */
|
|
52
|
+
lang?: string;
|
|
53
|
+
/** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
|
|
54
|
+
part?: string;
|
|
55
|
+
/** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
|
|
56
|
+
ref?: T | ((e: T) => void);
|
|
57
|
+
/** Adds a reference for a custom element slot */
|
|
58
|
+
slot?: string;
|
|
59
|
+
/** Prop for setting inline styles */
|
|
60
|
+
style?: Record<string, string | number>;
|
|
61
|
+
/** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** Specifies the tooltip text for the element. */
|
|
64
|
+
title?: string;
|
|
65
|
+
/** Passing 'no' excludes the element content from being translated. */
|
|
66
|
+
translate?: "yes" | "no";
|
|
67
|
+
/** The popover global attribute is used to designate an element as a popover element. */
|
|
68
|
+
popover?: "auto" | "hint" | "manual";
|
|
69
|
+
/** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
|
|
70
|
+
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
71
|
+
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
72
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
+
|
|
74
|
+
} ;
|
|
75
|
+
|
|
76
|
+
type BaseEvents = {
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
export type AuroAlertWCAProps = {
|
|
84
|
+
/** If present, the component will be hidden both visually and from screen readers */
|
|
85
|
+
"hidden"?: AuroAlertWCA['hidden'];
|
|
86
|
+
/** If present, the component will be hidden from screen readers, but seen visually */
|
|
87
|
+
"hiddenAudible"?: AuroAlertWCA['hiddenAudible'];
|
|
88
|
+
/** If present, the component will be hidden visually, but still read by screen readers */
|
|
89
|
+
"hiddenVisually"?: AuroAlertWCA['hiddenVisually'];
|
|
90
|
+
/** */
|
|
91
|
+
"iconTag"?: AuroAlertWCA['iconTag'];
|
|
92
|
+
/** Removes icon from alert UI when `type` attribute is set */
|
|
93
|
+
"noIcon"?: AuroAlertWCA['noIcon'];
|
|
94
|
+
/** */
|
|
95
|
+
"role"?: AuroAlertWCA['role'];
|
|
96
|
+
/** Component will render visually based on which type value is set */
|
|
97
|
+
"type"?: AuroAlertWCA['type'];
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export type CustomElements = {
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
*
|
|
107
|
+
*
|
|
108
|
+
* ## Attributes & Properties
|
|
109
|
+
*
|
|
110
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
111
|
+
*
|
|
112
|
+
* - `hidden`: If present, the component will be hidden both visually and from screen readers
|
|
113
|
+
* - `hiddenAudible`: If present, the component will be hidden from screen readers, but seen visually
|
|
114
|
+
* - `hiddenVisually`: If present, the component will be hidden visually, but still read by screen readers
|
|
115
|
+
* - `iconTag`: undefined
|
|
116
|
+
* - `noIcon`: Removes icon from alert UI when `type` attribute is set
|
|
117
|
+
* - `role`: undefined
|
|
118
|
+
* - `type`: Component will render visually based on which type value is set
|
|
119
|
+
*
|
|
120
|
+
* ## Slots
|
|
121
|
+
*
|
|
122
|
+
* Areas where markup can be added to the component.
|
|
123
|
+
*
|
|
124
|
+
* - `(default)`: Provide text for the alert. If using multiple lines, separate each line with `<p>` tags.
|
|
125
|
+
*
|
|
126
|
+
* ## Methods
|
|
127
|
+
*
|
|
128
|
+
* Methods that can be called to access component functionality.
|
|
129
|
+
*
|
|
130
|
+
* - `register(name?: string = "auro-alert") => void`: This will register this element with the browser.
|
|
131
|
+
*
|
|
132
|
+
* ## CSS Parts
|
|
133
|
+
*
|
|
134
|
+
* Custom selectors for styling elements within the component.
|
|
135
|
+
*
|
|
136
|
+
* - `alert`: Use for customizing the style of the alert container
|
|
137
|
+
* - `alert-content`: Use for customizing the style of the alert content
|
|
138
|
+
*/
|
|
139
|
+
"auro-alert": Partial<AuroAlertWCAProps & BaseProps<AuroAlertWCA> & BaseEvents>;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
export type CustomCssProperties = {
|
|
143
|
+
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
declare module 'react' {
|
|
148
|
+
namespace JSX {
|
|
149
|
+
interface IntrinsicElements extends CustomElements {}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
declare module 'preact' {
|
|
155
|
+
namespace JSX {
|
|
156
|
+
interface IntrinsicElements extends CustomElements {}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
declare module '@builder.io/qwik' {
|
|
162
|
+
namespace JSX {
|
|
163
|
+
interface IntrinsicElements extends CustomElements {}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
declare module '@stencil/core' {
|
|
169
|
+
namespace JSX {
|
|
170
|
+
interface IntrinsicElements extends CustomElements {}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
declare module 'hono/jsx' {
|
|
176
|
+
namespace JSX {
|
|
177
|
+
interface IntrinsicElements extends CustomElements {}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
declare module 'react-native' {
|
|
183
|
+
namespace JSX {
|
|
184
|
+
interface IntrinsicElements extends CustomElements {}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
declare global {
|
|
190
|
+
namespace JSX {
|
|
191
|
+
interface IntrinsicElements extends CustomElements {}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
}
|
|
195
|
+
declare global {
|
|
196
|
+
namespace svelteHTML {
|
|
197
|
+
interface IntrinsicElements extends CustomElements {}
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
export { AuroAlert } from "./index.js";
|
package/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"================================================================================"
|
|
9
9
|
],
|
|
10
10
|
"name": "@aurodesignsystem-dev/auro-alert",
|
|
11
|
-
"version": "0.0.0-
|
|
11
|
+
"version": "0.0.0-pr110.1",
|
|
12
12
|
"description": "auro-alert HTML custom element",
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"lit": "^3.3.1"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@aurodesignsystem/auro-cli": "^3.
|
|
28
|
+
"@aurodesignsystem/auro-cli": "^3.4.1",
|
|
29
29
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
30
30
|
"@aurodesignsystem/auro-icon": "^9.1.1",
|
|
31
31
|
"@aurodesignsystem/auro-library": "^5.5.4",
|