Banner

Usage

A Banner is an organism-level component used to draw attention to important information or application-wide notifications. Banners typically appear at or near the top of an interface, ensuring users can see and act on crucial messages. They can incorporate various elements from the Design System—such as buttons, links, and icons—to highlight calls to action or supplementary information. Banners can display short or detailed text, optionally include an icon that signifies the message type, and provide one or more actions (e.g., an Update button, a Dismiss button). They remain on the screen until dismissed or resolved, making them ideal for surfacing updates, warnings, or status changes that users should not miss.

Types

There is single type of Banner but with configurable content.

Anathomy and Behaviour

A Banner can consist of several elements from our Design System, combined to meet use-case needs:

• Container – The Banner’s background area that sets it apart from the rest of the UI. Its color scheme is determined by the Banner type (Info, Error, etc.).
• Status Icon (optional) – An icon indicating the nature or severity of the message (e.g., alert symbol for errors, info icon for informational messages).
• Title – A concise, high-level description of the message (e.g., “Something happened!”).
• Description text – Additional text offering more details, instructions, or contextual information. It can go to 3 lines only. Everything else should be hidden behind “See more” link and only then expanded down.
• Action Buttons – One or more buttons allowing users to perform immediate actions (e.g., “Update,” “More Information”).
• Close Button - for user to actively dismiss and close the notification.
• Icon Buttons (optional) – icon-based actions for further configuring the Banner (e.g. an overflow “⋮” menu for more actions and similar).
• Links (optional) – Hyperlinks to additional pages or external resources, if needed.
• Pagination (optional) – May be included if the Banner needs to display multiple pages of content or lead the user through progressive steps.

Note: Designers and developers are free to add more elements and configure the Banner component when necessary. The structure proposed here is just an example common template.

Behaviour

• Visibility and Timing: Banners typically appear when triggered by certain events (e.g., after a successful update or when an error occurs). They remain visible until dismissed by the user or until a certain condition is met.
• Dismissal: A Banner can be dismissible (via a dedicated close button) or persistent if the information is critical. The Banner type often informs how easily dismissible it should be (e.g., critical errors may require acknowledgment rather than a simple close).
• Action Handling: Clicking on a Banner’s button or link should execute the associated action immediately (e.g., navigating, updating, or opening a modal).
• Responsive Behavior: On smaller screens, the Banner may wrap text or stack actions vertically to preserve readability. Large icons and spacing may also scale down.

States

The Banner component supports five distinct states, each tailored to a specific communication need. In the case of multiple pages within a Banner, each page can convey a different type of message and therefore have its own distinct state.

1. Info:
   • Conveys informational messages or general announcements (e.g., version updates).
2. Error:
   • Informs users of critical issues or failures (e.g., form submission errors).
3. Warning:
   • Alerts users to potential problems or cautions (e.g., unsaved changes, deadlines).
4. Success:
   • Confirms successful operations (e.g., saved settings, completed tasks).
5. Subtle:
   • Delivers mild or non-intrusive information (e.g., background notifications).
   • Uses low-contrast tones to minimize disruption to the overall interface.

Gaps and Sizes

• Container width: min. 30% and max. 50% of the viewport (in case of messages within dialog boxes).
• Container height: Adapts to the content.
• Container padding: L
• Alignment: Top - center viewport including dialog when used in dialog boxes.
• Top offset from viewport edge: M
• Status Icon width and height: M plus
• Action button group spacing: M
• Gaps among Title, Description text and Action buttons: S
• Gap between Close button and Icon button: 2XS
• Container border radius: XS

Developer Notes

BannerItemsProps Interface:

Props:

• bannerItems: An array of BannerItemsProps objects, each defining a banner item.

export type BannerItemsProps = {
  statusIcon: IconName;
  state: BannerState;
  title: string;
  description?: string;
  iconButton?: IconButtonProps;
  disabled?: boolean;
  buttons?: [] | AppButtonProps[];
  links?: [] | LinkProps[];
};

Usage:

• The bannerItems prop is an array of objects that define the content and actions for each banner.
• Each banner item can have a statusIcon, state, title, description, iconButton, buttons, and links.
• The component uses a pagination component to navigate through the banner items.
• The state property of each banner item determines the background color and border of the banner.
• Event handlers are provided to manage button clicks, icon button clicks, close button clicks, and link clicks.
• The component dynamically adjusts the pagination color based on the current banner item's state.
• the prop autoSlide set to true will make the banner items slide automatically,
• autoSlide_interval is by default set to 5000 but the value can be modified, setting the value to 0 will make the autoSlide not work

<template>
  <Banner 
    :bannerItems="testBannerItems"
    :autoSlide=true
    :autoSlide_interval: 5000
    @buttonClick="handleBannerButtonClick"
    @iconButtonClick="handleBannerIconButtonClick"
    @closeButtonClick="handleBannerCloseButtonClick"
    @linkClick="handleBannerLinkClick"
  ></Banner>
</template>

<script>

// This is an example of part of the  testBannerItems 
// to produce the first Information Banner in the example following

const testBannerItems = [
   {
    statusIcon: 'alert',
    state: 'info',
    title: 'Information Banner',
    description: 'This is an informational banner.',
    disabled: false,
    iconButton: {
      icon: 'more_options'
    },
    buttons: [{
      icon: "info",
      text: "Button 1",
      disabled: false,
    }],
    links:[{
      text:"Felix's Link",
    },
    {
      text:"Link2",
    },
    {
      text:"Link3",
    },
    ],
  },
]


// clicking on Buttons and Links will emit information but not handle any behavior. 
//  all of the actions and logic should be handled in the project like this:

const handleBannerButtonClick = ({ button, index }) => {
  console.log('Button Clicked:', button.text, index); // Add your logic here
};

const handleBannerIconButtonClick = ({ item, index }) => {
    console.log('icon Button Clicked:', item.iconButton.icon, index);// Add your logic here
};

const handleBannerCloseButtonClick = () => {
    console.log('close Button Clicked');// Add your logic here
};

const handleBannerLinkClick = ({link, index}) => {
    console.log('link clicked:', link.text, index);// Add your logic here
};

</script>

The Banner component displays a series of banner items with optional actions and pagination.

Information Banner

This is an informational banner.

Emitted Events:

• buttonClick: Emitted when a button within a banner item is clicked. The payload includes the button object, the item object, and the index of the button.
• iconButtonClick: Emitted when the icon button within a banner item is clicked. The payload includes the item object and its index.
• closeButtonClick: Emitted when the close button within a banner item is clicked. The payload includes the item object and its index.
• linkClick: Emitted when a link within a banner item is clicked. The payload includes the link object, the item object, and the index of the link.