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 ( +
+
+ + {text} +
+
{actionButtons}
+
+ ); +}; + +Notification.defaultProps = { + type: 'info', +}; + +Notification.propTypes = { + type: PropTypes.string, + text: PropTypes.string.isRequired, + actionButtons: PropTypes.node.isRequired, +}; + +export default Notification; diff --git a/platform/ui/src/components/Notification/Notification.mdx b/platform/ui/src/components/Notification/Notification.mdx new file mode 100644 index 000000000..b31bcd4fd --- /dev/null +++ b/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 + + + {() => { + const actionButtons = () => { + return ( +
+ + + +
+ ); + }; + return ( +
+ +
+ ); + }} +
+ +## Properties + + diff --git a/platform/ui/src/components/Notification/index.js b/platform/ui/src/components/Notification/index.js new file mode 100644 index 000000000..60d326ffd --- /dev/null +++ b/platform/ui/src/components/Notification/index.js @@ -0,0 +1,2 @@ +import Notification from './Notification'; +export default Notification; diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index 3e9ec6efd..6199bc9ca 100644 --- a/platform/ui/src/components/index.js +++ b/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,