bpk-component-banner-alert

Backpack banner alert component.

Installation

npm install bpk-component-banner-alert --save-dev

Usage

Default

import React from 'react';
import BpkBannerAlert, { ALERT_TYPES } from 'bpk-component-banner-alert';

export default () => (
  <BpkBannerAlert
    message="Successful alert with more information."
    type={ALERT_TYPES.SUCCESS}
  />
);

Dismissable

import React, { Component } from 'react';
import { ALERT_TYPES, BpkBannerAlertDismissable } from 'bpk-component-banner-alert';

class DismissableBpkBannerAlert extends Component {
  constructor() {
    super();


    this.state = {
      show: true,
    };
  }

  setDismissed = () => {
    this.setState({
      show: false,
    });
  }

  render() {
    return (
      <BpkBannerAlertDismissable
        message="Successful alert with dismiss option."
        type={ALERT_TYPES.SUCCESS}
        onDismiss={this.setDismissed}
        show={this.state.show}
        dismissButtonLabel="Dismiss"
      />
    );
  }
}

export default () => (
  <DismissableBpkBannerAlert />
);

withBannerAlertState(BpkBannerAlert)

import React, { Component } from 'react';
import { ALERT_TYPES, withBannerAlertState, BpkBannerAlertDismissable, BpkBannerAlertExpandable } from 'bpk-component-banner-alert';

const BannerAlertDismissableState = withBannerAlertState(BpkBannerAlertDismissable);
const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable);

<BannerAlertDismissableState
  dismissButtonLabel="Dismiss"
  message="Successful alert with dismiss option."
  type={ALERT_TYPES.SUCCESS}
/>

<BannerAlertDismissableState
  message="Successful alert that will disappear after 5 seconds."
  hideAfter={5}
  type={ALERT_TYPES.SUCCESS}
/>

<BannerAlertExpandableState
  message="Successful alert with expandable option."
  type={ALERT_TYPES.SUCCESS}
  toggleButtonLabel="View more"
>
  Lorem ipsum dolor sit amet.
</BannerAlertExpandableState>

Props

BpkBannerAlert

| Property | PropType | Required | Default Value | | ------------------ | ---------------------- | -------- | ------------- | | type | ALERT_TYPES (one of) | true | - | | message | node | true | - | | animateOnEnter | bool | false | false | | animateOnLeave | bool | false | false | | bannerClassName | string | false | null | | icon | BpkIcon | false | null | | show | bool | false | true |

BpkBannerAlertDismissable

| Property | PropType | Required | Default Value | | ------------------ | ---------------------- | -------- | ------------- | | type | ALERT_TYPES (one of) | true | - | | message | node | true | - | | animateOnEnter | bool | false | false | | animateOnLeave | bool | false | false | | bannerClassName | string | false | null | | dismissButtonLabel | string | false | null | | icon | BpkIcon | false | null | | onDismiss | func | false | null | | show | bool | false | true |

BpkBannerAlertExpandable

| Property | PropType | Required | Default Value | | ------------------ | ---------------------- | -------- | ------------- | | type | ALERT_TYPES (one of) | true | - | | message | node | true | - | | animateOnEnter | bool | false | false | | animateOnLeave | bool | false | false | | bannerClassName | string | false | null | | expanded | bool | false | false | | icon | BpkIcon | false | null | | onExpandToggle | func | false | null | | show | bool | false | true | | toggleButtonLabel | string | false | null |

withBannerAlertState(BpkBannerAlert)

| Property | PropType | Required | Default Value | | --------- | -------- | -------- | ------------- | | hideAfter | number | false | null | | onHide | func | false | null |

Theme Props

• bannerAlertPrimaryColor
• bannerAlertSuccessColor
• bannerAlertWarnColor
• bannerAlertErrorColor