ITP Alert component
Usage
$ npm install @inthepocket/itp-rcc-alert
Import (Typescript)
import { default as Alert } from '@inthepocket/itp-rcc-alert';Import (ES)
import Alert from '@inthepocket/itp-rcc-alert';JSX
<Alert>
<p>Alert content</p>
</Alert>API documentation
Alert
<Alert>
<p>Alert content</p>
</Alert>| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| dismissButtonAriaLabel | ARIA label text for dismiss button (requires hasDismissButton to be true) | string | 'Dismiss' | No |
| dismissIcon | Icon for dismiss button (requires hasDismissButton to be true) | string / ReactNode | × | No |
| hasDismissButton | Show dismiss button | Boolean | false | No |
| onDismiss | Dismiss button click handler (requires hasDismissButton to be true) | Function | nulla | No |
| prefixCss | Prefix for css classNames | string | 'alert' | No |
| styles | imported css module (if passed, prefixed classNames will be disabled), see styles property | object | null | No |
| type | 'default', 'success', 'danger', 'warning' or 'info' | string | 'primary' | No |
Styles property
| Property | Description | Type | Default | Required |
|---|---|---|---|---|
| alert | string | - | Yes | |
| button | string | - | No | |
| dismissButton | string | - | No | |
| typeDanger | string | - | No | |
| typeDefault | string | - | No | |
| typeInfo | string | - | No | |
| typeSuccess | string | - | No | |
| typeWarning | string | - | No |
The css module should look like this:
.alert { ... }
.button { ... }
.dismissButton { ... }
.typeDanger { ... }
.typeDefault { ... }
.typeInfo { ... }
.typeSuccess { ... }
.typeWarning { ... }Development
Installation
$ npm install
Test
$ npm run test
Build
Compiles the TypeScript source to ES5.
$ npm run build