feat: Notification bar.

[mturoci]

Demo

#1007 (comment)

Working in Chrome / Safari / FF.

Unified ui.message_bar styling to match the notification_bar + added support for buttons to keep consistency

API review

/**
 * Create a notification bar.
 *
 * A notification bar is an area at the edge of a primary view that displays relevant status information.
 * You can use a notification bar to tell the user about a result of an action, e.g. "Data has been successfully saved".
 */
export interface NotificationBar {
  /** The text displayed on the notification bar. */
  text: S
  /** The icon and color of the notification bar. Defaults to 'info'. */
  type?: 'info' | 'error' | 'warning' | 'success' | 'danger' | 'blocked'
  /** When should the notification bar disappear in seconds. Defaults to 5. */
  timeout?: U
  /** Specify one or more action buttons. */
  buttons?: Component[]
  /** Specify the location of notification. Defaults to 'top-right'. */
  position?: 'top-right' | 'bottom-right' | 'bottom-center' | 'bottom-left' | 'top-left' | 'top-center'
  /** The events to capture on this notification bar. */
  events?: S[]
}

/**
 * Create a message bar.
 *
 * A message bar is an area at the top of a primary view that displays relevant status information.
 * You can use a message bar to tell the user about a situation that does not require their immediate attention and
 * therefore does not need to block other activities.
 */
export interface MessageBar {
  /** The icon and color of the message bar. */
  type?: 'info' | 'error' | 'warning' | 'success' | 'danger' | 'blocked'
  /** The text displayed on the message bar. */
  text?: S
  /** An identifying name for this component. */
  name?: S
  /** Specify one or more action buttons. */
  buttons?: Component[]
  /** The width of the message bar, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
}

Closes #1007

[lo5]

Looks great - minor comments. Thanks @mturoci!