feat: Viewport Notification

platform/ui/src/components/Notification/Notification.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { Icon } from '@ohif/ui';
+
+const Notification = ({ type, text, actionButtons }) => {
+  const iconsByType = {
+    error: {
+      icon: 'info',
+      color: 'text-red-700',
+    },
+    warning: {
+      icon: 'info',
+      color: 'text-yellow-500',
+    },
+    info: {
+      icon: 'info',
+      color: 'text-primary-main',
+    },
+    success: {
+      icon: 'info',
+      color: 'text-green-500',
+    },
+  };
+
+  const getIconData = () => {
+    return (
+      iconsByType[type] || {
+        icon: '',
+        color: '',
+      }
+    );
+  };
+
+  const { icon, color } = getIconData();
+
+  return (
+    <div className="p-2 flex flex-col lg:flex-row lg:items-center bg-common-bright rounded">
+      <div className="flex flex-grow">
+        <Icon name={icon} className={classnames('w-5', color)} />
+        <span className="text-base text-black ml-2">{text}</span>
+      </div>
+      <div className="flex justify-end mt-2 lg:mt-0">{actionButtons}</div>
+    </div>
+  );
+};
+
+Notification.defaultProps = {
+  type: 'info',
+};
+
+Notification.propTypes = {
+  type: PropTypes.string,
+  text: PropTypes.string.isRequired,
+  actionButtons: PropTypes.node.isRequired,
+};
+
+export default Notification;

platform/ui/src/components/Notification/Notification.mdx

@@ -0,0 +1,50 @@
+---
+name: Notification
+menu: Feedback
+route: components/notification
+---
+
+import { Playground, Props } from 'docz';
+import { Notification, Button } from '@ohif/ui';
+
+# Notification
+
+A notification displays a short message in a way that attracts the user's
+attention without interrupting the user's task.
+
+## Import
+
+```javascript
+import { Notification } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  {() => {
+    const actionButtons = () => {
+      return (
+        <div>
+          <Button>No</Button>
+          <Button className="ml-2">No, do not ask again</Button>
+          <Button className="ml-2" color="primary">
+            Yes
+          </Button>
+        </div>
+      );
+    };
+    return (
+      <div className="p-4">
+        <Notification
+          text="Track all measurement for this series?"
+          type="info"
+          actionButtons={actionButtons()}
+        />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={Notification} />

platform/ui/src/components/Notification/index.js

@@ -0,0 +1,2 @@
+import Notification from './Notification';
+export default Notification;