opc-notification-drawer Component 👋

!Version
!Build Status

Opc-Notification-drawer is a special drawer web component developed using Lit elements for the Red Hat One Platform. It's used for providing notification lists to users.

Prerequisites

Opc-Notification-drawer is implement under Red Hat design guidelines. Therefore the component uses Red Hat official font. This can be easily imported with google cdn at the top of HTML document.

``html


href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
rel="stylesheet"
/>
href="https://fonts.googleapis.com/css2?family=Red+Hat+Text&display=swap"
rel="stylesheet"
/>
`

Guidelines

Opc-notification-drawer contains two components.

- opc-notification-drawer: It's a simple drawer component, as a container for notifications.

- opc-notification-item: A customizable notification component that has styles based on variants of success, danger, warn.

Slots

$3

- default slot: The body of opc-notification-drawer component.

- header : Container component for the header that contains title and menu buttons.

- header-menu: Menu buttons for the drawer on right to title.

- footer: Footer component of the drawer.

$3

- default slot: The contents inside the notification item

- header : Container component for the header that contains notification title and close button.

- header-actions:Container component of the menu actions of the notification.

Attributes

$3

- title
- Type: String
- Default value: notifications

`html

`

$3

- isOpen
- Type: Boolean
- Default value: false

`js
document.querySelector('opc-notification-drawer').isOpen;
`

- open
- Description: To open the drawer.

`js
document.querySelector('opc-notification-drawer').open();
`

- close
- Description: To close the drawer.

`js
document.querySelector('opc-notification-drawer').close();
`

- toggle
- Description: To toggle the drawer states.

`js
document.querySelector('opc-notification-drawer').toggle();
`

$3

- variant
- Type: 'success'| 'info' | 'danger' | 'warn'
- Default value: info

`html

`

- title
- Type: String
- Default value:

`html

`

- key
- Type: String

`html

`

Events

$3

There are two events emitted by opc-notification-drawer emitter when drawer state changes.

1. opc-notification-drawer:open

Dispatched when drawer opens.

Example:

`js
document
.querySelector('opc-notification-drawer')
.addEventListener('opc-notification-drawer:open', function (event) {
alert('drawer opened');
});
`

1. opc-notification-drawer:close

Dispatched when drawer closed.

Example:

`js
document
.querySelector('opc-notification-drawer')
.addEventListener('opc-notification-drawer:close', function (event) {
alert('drawer closed');
});
`

$3

1. opc-notification-item:close

Dispatched on clicking close button. It contains the payload of { key:string, title: string,}

Example:

`js
document
.querySelector('opc-notification-item')
.addEventListener('opc-notification-item:close', (e) => {
alert(JSON.stringify(e.detail));
});
`

CSS Variables

| CSS Variable name | Value |
| -------------------------------------------------- | ----------------- |
| --opc-notification-drawer__backdrop-color | #00000060 |
| --opc-notification-drawer__z-index | 9 |
| --opc-notification-drawer__width | 360px |
| --opc-notification-drawer__top | 0px |
| --opc-notification-drawer__right | #000 |
| --opc-notification-drawer__transition--default | 120ms ease-in-out |
| --opc-notification-item__variant--success | #f2faf2 |
| --opc-notification-item__variant--success-header | #1e4f18 |
| --opc-notification-item__variant--danger | #ee00001a |
| --opc-notification-item__variant--danger-header | #ee0000 |
| --opc-notification-item__variant--info | #316dc11a |
| --opc-notification-item__variant--info-header | #316dc1 |
| --opc-notification-item__variant--warn | #f9e0a2 |
| --opc-notification-item__variant--warn-header | #795600 |

Themes/Variants

$3

| color | hex |
| ------- | --------- |
| success | #f2faf2 |
| danger | #ee00001a |
| info | #316dc11a |
| warn | #f9e0a2 |

Install

`sh
npm install
`

Usage

$3

`sh
npm install --save @one-platform/opc-notification-drawer
`

$3

- Import component

`js
import '@one-platform/opc-notification-drawer/dist/opc-notification-drawer';
`

- Add component in html

`html

`

$3

- In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component

`js
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-notification-drawer/dist/opc-notification-drawer';

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`

- Add component in any component html template

`html

`

$3

- Import the component in App.js

`js
import '@one-platform/opc-notification-drawer/dist/opc-notification-drawer';
`

- Add component in any component html render

`html

`

$3

- Run development server

`sh
npm run dev opc-notification-drawer
`

$3

`sh
npm run build opc-notification-drawer
`

Run tests

`sh
npm run test
``

🤝 Contributors

👤 akhilmhdh