@kbn/announcement-banner - Kibana

An announcement banner component with optional media, actions and dismiss button.

Usage

jsx

// Minimal usage
<AnnouncementBanner title="This is a title" media={} />

// With body text
<AnnouncementBanner
  title="This is a title"
  text="Announcement body text"
  media={}
/>

// With actions
<AnnouncementBanner
  title="This is a title"
  text="Announcement body text"
  media={}
  actionProps={{
    primary: { children: 'Primary action' onClick: () => {} },
    secondary: { children: 'Secondary action' onClick: () => {} }
  }}
/>

// With dismiss button
<AnnouncementBanner
  title="This is a title"
  text="Announcement body text"
  media={}
  onDismiss={() => {}}
/>

Development

Install dependencies:

bash

yarn kbn bootstrap

Start Storybook:

bash

yarn storybook shared_ux

Open http://localhost:9001 to view the application.

Testing

The project includes comprehensive test coverage using Jest and RTL.

Run tests with:

bash

yarn test:jest src/platform/packages/shared/shared-ux/display/kbn-announcement-banner              # Run all tests
yarn test:jest src/platform/packages/shared/shared-ux/display/kbn-announcement-banner --watch      # Run in watch mode