feat: Viewport Notification

platform/ui/doczrc.js

@@ -4,11 +4,11 @@ export default {
     'Getting Started',
     // COMPONENTS ARE DEFINED JUST TO CUSTOMIZE THEIR SORTING
     'General',
+    'Data Display',
+    'Feedback',
     'Form',
     'Navigation',
-    // 'Feedback',
     // 'Other',
-    'Data Display',
   ],
   ignore: ['README.md'],
 };

platform/ui/index.js

@@ -27,6 +27,7 @@ export {
   Label,
   MeasurementTable,
   NavBar,
+  Notification,
   Select,
   SegmentationTable,
   SidePanel,

platform/ui/src/assets/icons/info.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="currentColor" d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/>
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -12,6 +12,7 @@ import chevronRight from './../../assets/icons/chevron-right.svg';
 import eyeVisible from './../../assets/icons/eye-visible.svg';
 import eyeHidden from './../../assets/icons/eye-hidden.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
+import info from './../../assets/icons/info.svg';
 import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
 import launchInfo from './../../assets/icons/launch-info.svg';
@@ -52,6 +53,7 @@ const ICONS = {
   'eye-visible': eyeVisible,
   'eye-hidden': eyeHidden,
   'group-layers': groupLayers,
+  info: info,
   'info-link': infoLink,
   'launch-arrow': launchArrow,
   'launch-info': launchInfo,

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;

platform/ui/src/components/index.js

@@ -13,6 +13,7 @@ import InputText from './InputText';
 import Label from './Label';
 import MeasurementTable from './MeasurementTable';
 import NavBar from './NavBar';
+import Notification from './Notification';
 import Select from './Select';
 import SegmentationTable from './SegmentationTable';
 import SidePanel from './SidePanel';
@@ -50,6 +51,7 @@ export {
   Label,
   MeasurementTable,
   NavBar,
+  Notification,
   Select,
   SegmentationTable,
   SidePanel,