@outbook/webcomponents-notification-alert 1.1.0 → 1.1.2
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/LICENSE +2 -4
- package/README.md +97 -2
- package/_lib/icon-list.js +5 -5
- package/_style/notification-alert.style.js +4 -0
- package/notification-alert.js +1 -1
- package/package.json +9 -9
- package/_lib/_notification-alert.style.js +0 -4
package/LICENSE
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Apache License
|
|
1
|
+
Apache License
|
|
3
2
|
Version 2.0, January 2004
|
|
4
3
|
http://www.apache.org/licenses/
|
|
5
4
|
|
|
@@ -199,5 +198,4 @@
|
|
|
199
198
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
200
199
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
201
200
|
See the License for the specific language governing permissions and
|
|
202
|
-
limitations under the License.
|
|
203
|
-
|
|
201
|
+
limitations under the License.
|
package/README.md
CHANGED
|
@@ -1,3 +1,98 @@
|
|
|
1
|
-
# notification-alert
|
|
1
|
+
# @outbook/webcomponents-notification-alert
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This package provides a customizable notification alert web component.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @outbook/webcomponents-notification-alert
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### As a Lit Element (using the wrapper function)
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
import {html} from 'lit';
|
|
17
|
+
import {NotificationAlert} from '@outbook/webcomponents-notification-alert';
|
|
18
|
+
|
|
19
|
+
function render() {
|
|
20
|
+
return html`
|
|
21
|
+
${NotificationAlert({
|
|
22
|
+
type: 'info',
|
|
23
|
+
text: 'This is an informational message.',
|
|
24
|
+
})}
|
|
25
|
+
${NotificationAlert({
|
|
26
|
+
type: 'success',
|
|
27
|
+
text: 'Operation completed successfully!',
|
|
28
|
+
})}
|
|
29
|
+
${NotificationAlert({
|
|
30
|
+
type: 'error',
|
|
31
|
+
text: 'An error occurred.',
|
|
32
|
+
})}
|
|
33
|
+
${NotificationAlert({
|
|
34
|
+
type: 'warning',
|
|
35
|
+
text: 'Proceed with caution.',
|
|
36
|
+
size: 'small',
|
|
37
|
+
})}
|
|
38
|
+
`;
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Direct HTML Usage
|
|
43
|
+
|
|
44
|
+
You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import '@outbook/webcomponents-notification-alert';
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<outbook-notification-alert
|
|
52
|
+
type="info"
|
|
53
|
+
text="This is an informational message."
|
|
54
|
+
></outbook-notification-alert>
|
|
55
|
+
<outbook-notification-alert
|
|
56
|
+
type="success"
|
|
57
|
+
text="Operation completed successfully!"
|
|
58
|
+
></outbook-notification-alert>
|
|
59
|
+
<outbook-notification-alert
|
|
60
|
+
type="error"
|
|
61
|
+
text="An error occurred."
|
|
62
|
+
></outbook-notification-alert>
|
|
63
|
+
<outbook-notification-alert
|
|
64
|
+
type="warning"
|
|
65
|
+
text="Proceed with caution."
|
|
66
|
+
size="small"
|
|
67
|
+
></outbook-notification-alert>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Component: `outbook-notification-alert`
|
|
71
|
+
|
|
72
|
+
This is the underlying web component. It can be used directly in HTML or in any framework.
|
|
73
|
+
|
|
74
|
+
### Attributes and Properties
|
|
75
|
+
|
|
76
|
+
| Attribute | Property | Type | Default | Description |
|
|
77
|
+
|----------------|--------------|-----------|-------------|-----------------------------------------------------------------|
|
|
78
|
+
| `text` | `text` | `String` | `''` | The text to display in the alert. |
|
|
79
|
+
| `type` | `type` | `String` | `'info'` | The type of the alert (`info`, `success`, `error`, `warning`). |
|
|
80
|
+
| `size` | `size` | `String` | `'medium'` | The size of the alert (`small`, `medium`). |
|
|
81
|
+
| `test-id` | `testId` | `String` | `null` | A test identifier for testing purposes (`data-test-id`). |
|
|
82
|
+
|
|
83
|
+
### Wrapper Function Properties
|
|
84
|
+
|
|
85
|
+
The `NotificationAlert` wrapper function has these additional properties:
|
|
86
|
+
|
|
87
|
+
| Property | Type | Default | Description |
|
|
88
|
+
|-----------------|------------|-------------|-------------------------------------------------|
|
|
89
|
+
| `extraClasses` | `String` | `undefined` | Classes to add to the host element. |
|
|
90
|
+
| `descriptionId` | `String` | `undefined` | The `id` attribute for the alert's description. |
|
|
91
|
+
|
|
92
|
+
### Styling
|
|
93
|
+
|
|
94
|
+
This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
This component is licensed under the Apache-2.0 License.
|
package/_lib/icon-list.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { error, info, check, warning } from '@outbook/icons/material';
|
|
2
2
|
|
|
3
3
|
export const ICON_LIST = {
|
|
4
|
-
error
|
|
5
|
-
info
|
|
6
|
-
success:
|
|
7
|
-
warning
|
|
4
|
+
error,
|
|
5
|
+
info,
|
|
6
|
+
success: check,
|
|
7
|
+
warning
|
|
8
8
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import { css } from 'lit';
|
|
3
|
+
|
|
4
|
+
export default css`:host{display:block;--_font-size: 1.25rem;--_line-height: 2rem;--_icon-size: 2rem;--_color: light-dark( oklch(20.5% 0 0deg), oklch(92.2% 0 0deg) )}:host([type=info]){--_color: light-dark( oklch(39.1% 0.09 240.876deg), oklch(90.1% 0.058 230.902deg) )}:host([type=success]){--_color: light-dark( oklch(39.3% 0.095 152.535deg), oklch(92.5% 0.084 155.995deg) )}:host([type=error]){--_color: light-dark( oklch(39.6% 0.141 25.723deg), oklch(88.5% 0.062 18.334deg) )}:host([type=warning]){--_color: light-dark( oklch(41.4% 0.112 45.904deg), oklch(92.4% 0.12 95.746deg) )}:host([size=small]){--_font-size: 1rem;--_line-height: 1.5rem;--_icon-size: 1.5rem}.notification-alert{display:flex;box-sizing:border-box}.notification-alert__icon{width:var(--_icon-size);height:var(--_icon-size);margin-right:0.5rem}.notification-alert__text{font-size:var(--_font-size);line-height:var(--_line-height);margin:0}.notification-alert__icon,.notification-alert__text{color:var(--_color)}`;
|
package/notification-alert.js
CHANGED
|
@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
4
4
|
import { TypeIcon } from '@outbook/webcomponents-type-icon/shadow';
|
|
5
5
|
import { ICON_LIST } from './_lib/icon-list.js';
|
|
6
6
|
import { SIZE_LIST } from './_lib/constants.js';
|
|
7
|
-
import styleComponent from './
|
|
7
|
+
import styleComponent from './_style/notification-alert.style.js';
|
|
8
8
|
|
|
9
9
|
class ComponentNotificationAlert extends LitElement {
|
|
10
10
|
static properties = {
|
package/package.json
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@outbook/webcomponents-notification-alert",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"main": "notification-alert.js",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
7
7
|
"scripts": {},
|
|
8
8
|
"bugs": {
|
|
9
|
-
"url": "https://gitlab.com/arr2019/
|
|
9
|
+
"url": "https://gitlab.com/arr2019/outbook-toolkit/issues"
|
|
10
10
|
},
|
|
11
|
-
"homepage": "https://gitlab.com/arr2019/web-components/
|
|
11
|
+
"homepage": "https://gitlab.com/arr2019/outbook-toolkit/pkg/web-components/notification-alert#readme",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
14
|
-
"url": "git+https://gitlab.com/arr2019/
|
|
15
|
-
"folder": "pkg/notification-alert"
|
|
14
|
+
"url": "git+https://gitlab.com/arr2019/outbook-toolkit.git",
|
|
15
|
+
"folder": "pkg/web-components/notification-alert"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
|
-
"registry": "https://registry.npmjs.
|
|
18
|
+
"registry": "https://registry.npmjs.com/"
|
|
19
19
|
},
|
|
20
20
|
"author": "Antonio Rodríguez",
|
|
21
21
|
"license": "Apache-2.0",
|
|
22
22
|
"description": "Web components notification-alert",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@outbook/webcomponents-type-icon": ">=1.1.
|
|
24
|
+
"@outbook/webcomponents-type-icon": ">=1.1.3"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@outbook/colorful": ">=1.1.
|
|
28
|
-
"@outbook/design-decisions": ">=1.1.
|
|
27
|
+
"@outbook/colorful": ">=1.1.4",
|
|
28
|
+
"@outbook/design-decisions": ">=1.1.7"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"sass": "^1.97.2",
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
|
-
import { css } from 'lit';
|
|
3
|
-
|
|
4
|
-
export default css`:host{display:block;--alert--font-size: 1.25rem;--alert--line-height: 2rem;--alert--icon-size: 2rem;--alert--color: light-dark( oklch(20.5% 0 0deg), oklch(92.2% 0 0deg) )}:host([type=info]){--alert--color: light-dark( oklch(39.1% 0.09 240.876deg), oklch(90.1% 0.058 230.902deg) )}:host([type=success]){--alert--color: light-dark( oklch(39.3% 0.095 152.535deg), oklch(92.5% 0.084 155.995deg) )}:host([type=error]){--alert--color: light-dark( oklch(39.6% 0.141 25.723deg), oklch(88.5% 0.062 18.334deg) )}:host([type=warning]){--alert--color: light-dark( oklch(41.4% 0.112 45.904deg), oklch(92.4% 0.12 95.746deg) )}:host([size=small]){--alert--font-size: 1rem;--alert--line-height: 1.5rem;--alert--icon-size: 1.5rem}.notification-alert{display:flex;box-sizing:border-box}.notification-alert__icon{width:var(--alert--icon-size);height:var(--alert--icon-size);margin-right:0.5rem}.notification-alert__text{font-size:var(--alert--font-size);line-height:var(--alert--line-height);margin:0}.notification-alert__icon,.notification-alert__text{color:var(--alert--color)}`;
|