Nucleus - The Freshworks Design System

ember install @freshworks/banner

Banners display information at the top of the screen and alert the user about effects on further usage of the product due to a particular activity, functionality or product-wide status information.

Usage

Add {{nucleus-banner}} to your application.hbs.

1. Simple banners:

import Component from '@ember/component';
import { inject } from '@ember/service';
import { get } from '@ember/object'

export default Component.extend({
  nucleusBanner: inject(),
  actions: {
    addItem(type) {
      const nucleusBanner = get(this, 'nucleusBanner');
      nucleusBanner.add({
        title: 'Lorem ipsum dolor sit amet chrisy, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        type
      });
    },
    addItemWithLink(type) {
      const nucleusBanner = get(this, 'nucleusBanner');
      nucleusBanner.add({
        title: 'Lorem ipsum dolor sit amet chrisy, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        type,
        isDismissible: true,
        content: {
          linkText: "Click here",
          linkAction: this.testAction.bind(this) 
        }
      });
    }
  },
  testAction() {
    alert("Undo clicked!");
  }
});

2. Custom component banners:

This makes use of the component helper, allowing the template that ultimately renders the banner to be dynamic:

import Component from '@ember/component';
import { inject } from '@ember/service';
import { get } from '@ember/object'

export default Component.extend({
  nucleusBanner: inject(),
  actions: {
    addItem(type) {
      const nucleusBanner = get(this, 'nucleusBanner');
      nucleusBanner.add({
        type,
        componentName: 'dummy-comp/demo-2-helper'
      });
    }
  }
});

Guidelines

✅Do's

When more than one notification, use inline messages instead stacking multiple banners (Refer the image above)

🚫Dont's

Don’t use banners for success messages. Refer notifications section for such scenarios.

Edit this page

Button

Inline Banner