notification

Notifications variations:

Notification bar (default) for inline display
Notification banner
Notification text shown in form fields

Notifications types:

neutral (default)
success
warning
error

For the notification text variant, go to Form field and look at the API example.

The notification banner and default variants are showcased here. Banner notifications do have a JS API which is described at the bottom of this page.

The neutral level does have an optional Icon, the other three levels uses the outlined icons from the icon-font as showcased here.

For accessibility reasons, a keyboard trap is highly recommended in this component. However, to prevent some unpredictable side effects (the page freezing, the user is stuck in an infinite loop, etc.), the keyboard trap was not set for this page to work correctly. Therefore it needs to be set by the developer.

table of content

description
component variations
additional content
demo code
style scss

component variations

Bar (default notification)

Open on blank page

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea Link sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet

<div class="a-notification -neutral" role="alert">
  <div
    id="notification-label-id-bar-default-notification-neutral"
    class="a-notification__content"
  >
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea
    <a href="/" target="_self"><span>Link sanctus</span></a>
    est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
  </div>
</div>

Bar with icon

Open on blank page

<div class="a-notification -neutral" role="alert">
  <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
  <div
    id="notification-label-id-bar-with-icon-neutral"
    class="a-notification__content"
  >
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea
    <a href="/" target="_self"><span>Link sanctus</span></a>
    est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
  </div>
</div>

Bar success

Open on blank page

<div class="a-notification -success" role="alert">
  <i class="a-icon ui-ic-alert-success"></i>
  <div
    id="notification-label-id-bar-success-success"
    class="a-notification__content"
  >
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea
    <a href="/" target="_self"><span>Link sanctus</span></a>
    est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
  </div>
</div>

Bar warning

Open on blank page

<div class="a-notification -warning" role="alert">
  <i class="a-icon ui-ic-alert-warning"></i>
  <div
    id="notification-label-id-bar-warning-warning"
    class="a-notification__content"
  >
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea
    <a href="/" target="_self"><span>Link sanctus</span></a>
    est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
  </div>
</div>

Bar error

Open on blank page

<div class="a-notification -error" role="alert">
  <i class="a-icon ui-ic-alert-error"></i>
  <div
    id="notification-label-id-bar-error-error"
    class="a-notification__content"
  >
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea
    <a href="/" target="_self"><span>Link sanctus</span></a>
    est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores
    et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
  </div>
</div>

Open on blank page

<div
  class="frontend-kit-example_banner-notification"
  data-frok-notification="banner-example-01"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">Click here</span>
  </button>
  <div
    class="a-notification a-notification--banner -neutral"
    id="frontend-kit-notification-banner-example-01"
    role="alert"
  >
    <div id="banner-example-01-label" class="a-notification__content">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea
      <a href="/" target="_self"><span>Link sanctus</span></a>
      est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
    </div>
    <button
      type="button"
      class="a-button a-button--integrated -without-label"
      data-frok-action="close"
      aria-label="close banner"
    >
      <i class="a-icon a-button__icon ui-ic-close"></i>
    </button>
  </div>
</div>

Open on blank page

<div
  class="frontend-kit-example_banner-notification"
  data-frok-notification="banner-example-02"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">Click here</span>
  </button>
  <div
    class="a-notification a-notification--banner -neutral"
    id="frontend-kit-notification-banner-example-02"
    role="alert"
  >
    <i class="a-icon boschicon-bosch-ic-emoji-happy"></i>
    <div id="banner-example-02-label" class="a-notification__content">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea
      <a href="/" target="_self"><span>Link sanctus</span></a>
      est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
    </div>
    <button
      type="button"
      class="a-button a-button--integrated -without-label"
      data-frok-action="close"
      aria-label="close banner"
    >
      <i class="a-icon a-button__icon ui-ic-close"></i>
    </button>
  </div>
</div>

Open on blank page

<div
  class="frontend-kit-example_banner-notification"
  data-frok-notification="banner-example-03"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">Click here</span>
  </button>
  <div
    class="a-notification a-notification--banner -success"
    id="frontend-kit-notification-banner-example-03"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-success"></i>
    <div id="banner-example-03-label" class="a-notification__content">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea
      <a href="/" target="_self"><span>Link sanctus</span></a>
      est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
    </div>
    <button
      type="button"
      class="a-button a-button--integrated -without-label"
      data-frok-action="close"
      aria-label="close banner"
    >
      <i class="a-icon a-button__icon ui-ic-close"></i>
    </button>
  </div>
</div>

Open on blank page

<div
  class="frontend-kit-example_banner-notification"
  data-frok-notification="banner-example-04"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">Click here</span>
  </button>
  <div
    class="a-notification a-notification--banner -warning"
    id="frontend-kit-notification-banner-example-04"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-warning"></i>
    <div id="banner-example-04-label" class="a-notification__content">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea
      <a href="/" target="_self"><span>Link sanctus</span></a>
      est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
    </div>
    <button
      type="button"
      class="a-button a-button--integrated -without-label"
      data-frok-action="close"
      aria-label="close banner"
    >
      <i class="a-icon a-button__icon ui-ic-close"></i>
    </button>
  </div>
</div>

Open on blank page

<div
  class="frontend-kit-example_banner-notification"
  data-frok-notification="banner-example-05"
>
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">Click here</span>
  </button>
  <div
    class="a-notification a-notification--banner -error"
    id="frontend-kit-notification-banner-example-05"
    role="alert"
  >
    <i class="a-icon ui-ic-alert-error"></i>
    <div id="banner-example-05-label" class="a-notification__content">
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
      gubergren, no sea
      <a href="/" target="_self"><span>Link sanctus</span></a>
      est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo
      dolores et ea rebum. Stet clita kasd gubergren, lorem ipsum dolor sit amet
    </div>
    <button
      type="button"
      class="a-button a-button--integrated -without-label"
      data-frok-action="close"
      aria-label="close banner"
    >
      <i class="a-icon a-button__icon ui-ic-close"></i>
    </button>
  </div>
</div>

additional content

Static API

The static API is available under window.boschFrontendKit.Notification. Please note that this API is only usable for banner-type notifications.

Method	Description
`Notification.notificationId(id: string): string`	Will return the corresponding DOM id for the given notification id, i.e. `frontend-kit-notification-${id}`
`Notification.findNotification(id: string): string`	Will find a modal element with the DOM id as returned by `Notification.notificationId` and return the element, if found.
`Notification.showNotification(id)`	Will show the notification identified by the given notification id, if found.
`Notification.hideNotification(id)`	Will hide the notification identified by the given notification id, if found.

Instance API

The instance API can be accessed by the component property of the notification element.

Method	Description
`show()`	Will show this notification.
`hide()`	Will hide this notification.

Event API

Event handlers can be registered by calling component.addEventListener(name, callback). They can be removed by calling component.removeEventListener(name, callback) with the same arguments. Also, addEventListener returns an unsubscription function that, once called, achieves the same.

Event name	Parameters	Description
`private static events = ['closeClicked'];`	none	Will be triggered when the close button is clicked.

demo

import WindowWithFrontendKit from '../../WindowWithFrontendKit';

export default (): void => {
  const { boschFrontendKit } = (window as unknown) as WindowWithFrontendKit;

  const examples = document.querySelectorAll(
    '.frontend-kit-example_banner-notification',
  );
  [...examples].forEach(container => {
    const notificationId = container.getAttribute('data-frok-notification');

    const notificationElement = boschFrontendKit.Notification.findNotification(
      notificationId,
    );
    const notification = notificationElement.component;

    const trigger = container.querySelector('[data-frok-action="show"]');

    trigger.addEventListener('click', () =>
      boschFrontendKit.Notification.showNotification(notificationId),
    );
    notification.addEventListener('closeClicked', () => notification.hide());
  });
};

styles SCSS

.a-notification {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  color: var(--minor-signal-neutral__enabled__front__default);
  background-color: var(--minor-signal-neutral__enabled__fill__default);

  .a-icon {
    margin-left: -0.25rem;
  }

  // banner variants will always be shown on the bottom of the screen
  &--banner {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;

    // the margins are different here - 8px is the smallest margin (for the close button)
    padding: 0.5rem;

    // don't show the banner by default
    /* stylelint-disable a11y/no-display-none */
    &:not(.-show) {
      display: none;
    }

    > .a-icon {
      font-size: 2rem;
      // the icons add some more margins; 8px from above + 8px here = 16px from spec
      margin-top: 0.5rem;
      margin-left: 0.5rem;
      margin-bottom: 0.5rem;

      + .a-notification__content {
        // with an icon, the margins are set by the icon
        // if not (see below) the content will bring it's own margin
        margin-left: 0;
      }
    }
  }

  &--banner .a-button--integrated {
    justify-self: flex-end;
    margin-left: auto;
  }

  /* stylelint-disable no-descending-specificity */
  &--banner &__content {
    // margin to the close button
    margin-right: 2.375rem;
    // 8px padding + 12px margin = 20px distance to border
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;

    // default case: no icon, so the distance has to come from the content
    // 8px padding + 24px margin = 30px distance to the border
    margin-left: 1.5rem;
    max-width: 80rem;
  }

  // links inherit the type colors
  a,
  a:visited,
  a:hover,
  a:focus {
    color: inherit;
    text-decoration: underline;
  }

  // the icon-to-content distance
  > .a-icon {
    margin-right: 0.75rem;
    flex-shrink: 0;
  }

  &.-success {
    color: var(--minor-signal-success__enabled__front__default);
    background-color: var(--minor-signal-success__enabled__fill__default);
  }

  &.-warning {
    color: var(--minor-signal-warning__enabled__front__default);
    background-color: var(--minor-signal-warning__enabled__fill__default);
  }

  &.-error {
    color: var(--minor-signal-error__enabled__front__default);
    background-color: var(--minor-signal-error__enabled__fill__default);
  }

  &--text {
    padding: 0.25rem 1rem;

    .a-icon {
      margin-right: 0.375rem;
    }
  }
}

notification

component variations

Bar (default notification)

Bar with icon

Bar success

Bar warning

Bar error

Banner info without icon

Banner info

Banner success

Banner warning

Banner error

additional content

Static API

Instance API

Event API

demo

styles SCSS