npm package: @outbook/webcomponents-notification-alert
Description: Web components notification-alert
Author: Antonio Rodríguez
Latest version: 1.1.2

# @outbook/webcomponents-notification-alert

This package provides a customizable notification alert web component.

## Installation

```bash
npm install @outbook/webcomponents-notification-alert
```

## Usage

### As a Lit Element (using the wrapper function)

```javascript
import {html} from 'lit';
import {NotificationAlert} from '@outbook/webcomponents-notification-alert';

function render() {
  return html`
    ${NotificationAlert({
    type: 'info',
    text: 'This is an informational message.',
  })}
    ${NotificationAlert({
    type: 'success',
    text: 'Operation completed successfully!',
  })}
    ${NotificationAlert({
    type: 'error',
    text: 'An error occurred.',
  })}
    ${NotificationAlert({
    type: 'warning',
    text: 'Proceed with caution.',
    size: 'small',
  })}
  `;
}
```

### Direct HTML Usage

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.

```javascript
import '@outbook/webcomponents-notification-alert';
```

```html
<outbook-notification-alert
  type="info"
  text="This is an informational message."
></outbook-notification-alert>
<outbook-notification-alert
  type="success"
  text="Operation completed successfully!"
></outbook-notification-alert>
<outbook-notification-alert
  type="error"
  text="An error occurred."
></outbook-notification-alert>
<outbook-notification-alert
  type="warning"
  text="Proceed with caution."
  size="small"
></outbook-notification-alert>
```

## Component: `outbook-notification-alert`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Attributes and Properties

| Attribute      | Property     | Type      | Default     | Description                                                     |
|----------------|--------------|-----------|-------------|-----------------------------------------------------------------|
| `text`         | `text`       | `String`  | `''`        | The text to display in the alert.                               |
| `type`         | `type`       | `String`  | `'info'`    | The type of the alert (`info`, `success`, `error`, `warning`).  |
| `size`         | `size`       | `String`  | `'medium'`  | The size of the alert (`small`, `medium`).                      |
| `test-id`      | `testId`     | `String`  | `null`      | A test identifier for testing purposes (`data-test-id`).        |

### Wrapper Function Properties

The `NotificationAlert` wrapper function has these additional properties:

| Property        | Type       | Default     | Description                                     |
|-----------------|------------|-------------|-------------------------------------------------|
| `extraClasses`  | `String`   | `undefined` | Classes to add to the host element.             |
| `descriptionId` | `String`   | `undefined` | The `id` attribute for the alert's description. |

### Styling

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.

## License

This component is licensed under the Apache-2.0 License.