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}
  />
);

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 />
);

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>