Genesis Foundation UI Notifications

Usage

• The App need to create notification-listener at top of the component tree.

• Any child under notification-listener component can dispatch custom NotificationEvent event

• The custom event is handled by notification-listener component and based on event payload it displays notification component according to payload

Current Implementation support following Notification Components

• Alert
• Toast
• Banner
• Snack bar
• Dialog

Creating and dispatching Notification Events

Creating and dispatching Notification event with payload to show in Toast component

$emit(
  NotificationEvent.NOTIFICATION_EVENT,
  {
    title: 'Important message',
    body: 'Lorem ipsum',
    config: {
      toast: {
        autoClose: true,
        closeTimeout: notificationCloseTimeout,
        type: 'warning',
      },
    },
  } as NotificationStructure,
)

Creating individual notifications of various types

To create individual notifications of various types, there are functions that will allow you to display and provide the structure.

showNotificationAlert({ title: 'Important message', body: 'Lorem ipsum' });

showNotificationBanner(
  {
    body: 'Lorem ipsum',
    banner: {
      confirmingActions: [{ label: 'Confirm', action: () => console.log('Lorem ipsum') }],
      dismissingAction: {
        label: 'Dismiss',
        action: () => console.log('Lorem ipsum'),
      },
    },
  },
  'zero',
);

showNotificationDialog(
  {
    title: 'Important message',
    body: 'Lorem ipsum',
    dialog: {
      confirmingActions: [{ label: 'Confirm', action: () => console.log('Lorem ipsum') }],
      dismissingAction: {
        label: 'Dismiss',
        action: () => console.log('Lorem ipsum'),
      },
    },
  },
  'zero',
);

showNotificationSnackbar(
  {
    body: 'Lorem ipsum',
    snackbar: {
    confirmingActions: [
      { label: 'Confirm', action: () => console.log('Lorem ipsum') },
    ],
    type: 'error',
    },
  },
  'zero',
);

showNotificationToast(
  {
    title: 'Important message',
    body: 'Lorem ipsum',
    toast: {
      autoClose: true,
      closeTimeout: 3000,
      type: 'success',
    },
  },
  'zero',
);

Installation

To enable this module in your application, follow the steps below.

1. Add @genesislcap/foundation-notifications as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.

{
  ...
  "dependencies": {
    ...
    "@genesislcap/foundation-notifications": "latest"
    ...
  },
  ...
}

API Docs

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform