Notifications

A component to easily alert users to new notifications.

Overview

The Notification Component provides an easy way to message the user when an action that is relevant to them happens within an application.

View all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThe Notification component.

Usage

Only one Notification component should be used per page. It should exist in a fixed location throughout the application, in either the Sidebar or the Masthead.

Anatomy

2TriggerView all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TS341NotificationsAll Notifications LinkThe Notification anatomy.

The Notification component has two main sections - the Trigger and the main Notification Sheet.

  1. Container. The container wraps the entire notification sheet. By default it is hidden.
  2. Trigger. The Trigger is the only part of the Notification Component that is visible by default. Clicking on it will trigger the Notification Sheet.
  3. Notifications. Each Notification provides an overview of the action involving the user.
  4. All Notifications. This link will navigate the user to a Notification screen.

Sizing & Spacing

The Notification is only available in 1 size. It is tied into the Masthead and the Sidebar, so cannot be used independently of these components.

States

View all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThe Notification states.

The Notification Component has two states: hidden and visible. By default, the Notification Sheet is hidden - clicking on the Trigger will make the sheet appear besides the bell icon.

Hierarchy & Placement

The Notification Sheet should only be used in the Sidebar or Masthead.

Basic Usage

View all notifications
<Notifications href="notifications">
  <Notification
    href="notifications/1"
    name="Thomas Stephens"
    action="added a new comment to your"
    on="review"
    when={new Date('2019-11-05T10:57:00.000Z')}
    description="A long description that will be shortened"
  />
  <Notification
    href="notifications/2"
    name="Thomas Stephens"
    action="added a new comment to your"
    on="review"
    when={new Date('2019-11-04T10:23:00.000Z')}
    description="A long description that will be shortened again"
  />
</Notifications>

Notifications Properties

NameTypeRequiredDefaultDescription
linkReact.ReactElement<LinkTypes>Truen/aFor linking to a list of all notifications.
childrenReact.ReactElement<NotificationProps>[]Truen/aAn array of notifications.

Notification Properties

NameTypeRequiredDefaultDescription
linkReact.ReactElement<LinkTypes>Truen/aFor linking to the notification.
namestringTruen/aName of the person who did the action.
isReadbooleanFalseFalseShows the read indicator next to the notification. If the notification has been read then the value needs to be set to True.
actionstringTruen/aWhat the person specified with Name did.
onstringTruen/aThe object the person acted on.
whenDateTruen/aDate that the action happened.
descriptionstringTruen/aMore information about the notification which will be shortened.