• Banner specification (draft)
  • Owned by
    • Requires approval from
    • Signed off by
    • Revision history
  • Overview
  • Acceptance criteria
  • User stories
  • Functionality
    • End-user experience
    • Developer experience
    • Basic usage
    • Using available slots
  • Localization
    • Keyboard navigation
  • API
    • Properties
    • Methods
    • Slots
    • Events
    • CSS Shadow Parts
  • Test scenarios
  • Accessibility
    • ARIA
    • RTL support
  • Assumptions and limitations

Team name: Astrea

Developer name: Riva Ivanova

Designer name: Silvia Ivanova

• Radoslav Karaivanov | Date:
• Svilen Dimchevski | Date:

• Radoslav Mirchev | Date:
• Damyan Petev | Date:

The igc-banner component displays important and concise message(s) for a user to address, that is specific to a page or feature. It can also indicate actions to take based on the context of the message. Banners usually remain until dismissed by the user or if the state that caused the banner is resolved.

The igc-banner:

• must support slotting content for the main message
• must support slotting additional "leading" content such as icons, badges, avatars, etc.
• must support slotting action elements
• must be WAI-ARIA compliant

Developer stories:

As a developer I expect to be able to:

• provide a message informing users about certain state of functionality.
• provide additional information and aid through icons, badges, etc.
• have a default action with which users can confirm that they have been notified.
• provide more actions for users.
• customize the look and feel of the banner component.

End-user stories:

As an end-user I expect to be able to:

• get informed about events/states that are not crucial in a less obtrusive way.
• take actions based on the provided message context.

Design hand-off

• The banner features a default action that acknowledges user notifications. The igcClosing/igcClosed events are triggered exclusively by interacting with this default action. Inserting actions into the action slot will replace the default action, leaving the developer responsible for closing the component as per the specific use case.

<igc-banner>
  You are currently not logged in! Please, log into your account first.
</igc-banner>

<igc-banner>
  <igc-icon name="success" slot="prefix"></igc-icon>

  Build <strong>f58a1815-c069-429d-ab20-860849e96a59</strong> completed!

  <div slot="actions">
    <igc-button>OK</igc-button>
    <igc-button href="...">View log</igc-button>
  </div>
</igc-banner>

No specific points are applicable for localization.

No additional implementation is required.

Automation

1. The banner is correctly initialized and rendered both in shown/hidden states.
2. The banner passes automated WAI-ARIA tests.
3. The banner correctly renders slotted content.
4. Correct event sequence is fired for the default action of the banner component.

While there is a defined banner role, it is usually reserved for a global site header. One of the landmark, alert or status roles should be picked after testing with an accessibility tool such as NVDA.

The component should work in a Right-To-Left context without additional setup or configuration.

None applicable.