diff --git a/platform/ui/doczrc.js b/platform/ui/doczrc.js index a52552d35..f20e1bd53 100644 --- a/platform/ui/doczrc.js +++ b/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'], }; diff --git a/platform/ui/index.js b/platform/ui/index.js index f683f8bdf..67d7bdc80 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -27,6 +27,7 @@ export { Label, MeasurementTable, NavBar, + Notification, Select, SegmentationTable, SidePanel, diff --git a/platform/ui/src/assets/icons/info.svg b/platform/ui/src/assets/icons/info.svg new file mode 100644 index 000000000..8874e2a8d --- /dev/null +++ b/platform/ui/src/assets/icons/info.svg @@ -0,0 +1,3 @@ + diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index 4ac89ce9e..44b8c90e4 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/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, diff --git a/platform/ui/src/components/Notification/Notification.jsx b/platform/ui/src/components/Notification/Notification.jsx new file mode 100644 index 000000000..87dec9b73 --- /dev/null +++ b/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 ( +