How to use bpk-component-banner-alert - 10 common examples

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,

render(): Node {
    return (
      <div>
        
        
      </div>
    );
  }
}

}

const components = [
  {
    id: 'default',
    title: 'Default',
    blurb: [
      
        Banner alerts come in four styles to indicate success, warning or error,
        or some neutral information.
      ,
    ],
    examples: [
      ,
      ,
      ,
      ,
      ,
    ],
  },
  {
    id: 'expandable',
    title: 'Expandable',
    blurb: [
      
        They can be configured to display further information to the user in the
        form of an expandable panel.
      ,
    ],
    examples: [

examples: [
      
        {longMessage}
      ,
      
        {longMessage}
      ,
      
        {longMessage}
      ,
      
        {longMessage}
      ,
    ],
  },
  {
    id: 'dismissable',
    title: 'Dismissable',
    blurb: [

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,
    };
  }

<option value="business">Business class</option>
          <option value="first">First class</option>
        
      ,
    ],
    readme: selectReadme,
  },
  {
    id: 'docked-inputs-and-selects',
    title: 'Docked inputs &amp; selects',
    blurb:
      'Both inputs and selects can be docked together to build a one-line form.',
    examples: [
      <div>
        
      </div>,
      <form>
        <div>
          
            From
          
          
            To
          
          
            Depart
          
          
            Return</div></form>

,
      
        {longMessage}
      ,
      
        {longMessage}
      ,
      
        {longMessage}
      ,
    ],
  },
  {
    id: 'dismissable',
    title: 'Dismissable',
    blurb: [
      
        Banner alerts can be configured to include a close icon so that the user
        can dismiss them.
      ,
    ],
    examples: [

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,
    };
  }

,
    ],
  },
  {
    id: 'expandable',
    title: 'Expandable',
    blurb: [
      
        They can be configured to display further information to the user in the
        form of an expandable panel.
      ,
    ],
    examples: [
      
        {longMessage}
      ,
      
        {longMessage}
      ,
      
        {longMessage}
      ,

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,
      },