How to use the bpk-component-banner-alert.ALERT_TYPES.SUCCESS function in bpk-component-banner-alert

To help you get started, we’ve selected a few bpk-component-banner-alert examples, based on popular ways it is used in public projects.

github Skyscanner / backpack / packages / bpk-docs / src / pages / WebBannerAlertsPage / BannerAlertsPage.js View on Github external
constructor() {
    super();

    this.bannerAlerts = [
      {
        show: true,
        message: 'Neutral alert with dismiss option.',
        type: ALERT_TYPES.NEUTRAL,
      },
      {
        show: true,
        message: 'Successful alert with dismiss option.',
        type: ALERT_TYPES.SUCCESS,
      },
      {
        show: true,
        message: 'Warn alert with dismiss option.',
        type: ALERT_TYPES.WARN,
      },
      {
        show: true,
        message: 'Error alert with dismiss option.',
        type: ALERT_TYPES.ERROR,
      },
    ];

    this.state = {
      bannerAlerts: JSON.parse(JSON.stringify(this.bannerAlerts)),
      dirty: false,
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebBannerAlertsPage / BannerAlertsPage.js View on Github external
render(): Node {
    return (
      <div className={this.props.className}>
        <BpkCheckBox
          name="show"
          label="show"
          checked={this.state.show}
          onChange={this.toggle}
        />
        <BpkBannerAlert
          bannerClassName={componentClassName}
          message={this.state.show ? 'show = true' : 'show = false'}
          type={ALERT_TYPES.SUCCESS}
          show={this.state.show}
          animateOnEnter
          animateOnLeave
        />
      </div>
    );
  }
}
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebBannerAlertsPage / BannerAlertsPage.js View on Github external
}

const components = [
  {
    id: 'default',
    title: 'Default',
    blurb: [
      <Paragraph>
        Banner alerts come in four styles to indicate success, warning or error,
        or some neutral information.
      </Paragraph>,
    ],
    examples: [
      <BannerAlert message="Neutral alert." type={ALERT_TYPES.NEUTRAL} />,
      <BannerAlert message="Successful alert." type={ALERT_TYPES.SUCCESS} />,
      <BannerAlert message={richMessage} type={ALERT_TYPES.SUCCESS} />,
      <BannerAlert message="Warn alert." type={ALERT_TYPES.WARN} />,
      <BannerAlert message="Error alert." type={ALERT_TYPES.ERROR} />,
    ],
  },
  {
    id: 'expandable',
    title: 'Expandable',
    blurb: [
      <Paragraph>
        They can be configured to display further information to the user in the
        form of an expandable panel.
      </Paragraph>,
    ],
    examples: [
      <BannerAlertExpandable
        message="Neutral alert with more information."

bpk-component-banner-alert

Backpack banner alert component.

Apache-2.0
Latest version published 6 days ago

Package Health Score

85 / 100
Full package analysis

Similar packages