How to use the bpk-component-banner-alert.ALERT_TYPES.WARN 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
examples: [
      <BannerAlertExpandable
        message="Neutral alert with more information."
        type={ALERT_TYPES.NEUTRAL}
      >
        {longMessage}
      </BannerAlertExpandable>,
      <BannerAlertExpandable
        message="Successful alert with more information."
        type={ALERT_TYPES.SUCCESS}
      >
        {longMessage}
      </BannerAlertExpandable>,
      <BannerAlertExpandable
        message="Warn alert with more information."
        type={ALERT_TYPES.WARN}
      >
        {longMessage}
      </BannerAlertExpandable>,
      <BannerAlertExpandable
        message="Error alert with more information."
        type={ALERT_TYPES.ERROR}
      >
        {longMessage}
      </BannerAlertExpandable>,
    ],
  },
  {
    id: 'dismissable',
    title: 'Dismissable',
    blurb: [
      <Paragraph>
github Skyscanner / backpack / packages / bpk-docs / src / pages / WebBannerAlertsPage / BannerAlertsPage.js View on Github external
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 / FormsPage / FormsPage.js View on Github external
<option value="business">Business class</option>
          <option value="first">First class</option>
        </InputContainer>
      </form>,
    ],
    readme: selectReadme,
  },
  {
    id: 'docked-inputs-and-selects',
    title: 'Docked inputs & selects',
    blurb:
      'Both inputs and selects can be docked together to build a one-line form.',
    examples: [
      <div className={getClassName('bpkdocs-forms-page__viewport-alert')}>
        <BpkBannerAlert
          type={ALERT_TYPES.WARN}
          message="These are only suitable for larger viewports - try viewing on a desktop device."
        />
      </div>,
      <form className={containerClassName}>
        <div>
          <BpkLabel htmlFor="input_origin" className={placeClassName}>
            From
          </BpkLabel>
          <BpkLabel htmlFor="input_destination" className={placeClassName}>
            To
          </BpkLabel>
          <BpkLabel htmlFor="input_outbound" className={dateClassName}>
            Depart
          </BpkLabel>
          <BpkLabel htmlFor="input_inbound" className={dateClassName}>
            Return

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