@outbook/webcomponents-notification-alert

This package provides a customizable notification alert web component.

Installation

npm install @outbook/webcomponents-notification-alert

Usage

As a Lit Element (using the wrapper function)

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.

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

<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.