diff --git a/package.json b/package.json index 4b8cad0f9..fc0c1c863 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "test:e2e:dist": "lerna run test:e2e:dist --stream", "test:e2e:serve": "lerna run test:e2e:serve --stream", "see-changed": "lerna changed", + "docs:preview": "lerna run docs:preview --stream", "docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh", "release": "yarn run lerna:version && yarn run lerna:publish", "lerna:version": "npx lerna version prerelease --force-publish", diff --git a/platform/ui/src/assets/icons/chevron-left.svg b/platform/ui/src/assets/icons/chevron-left.svg new file mode 100644 index 000000000..ea9cf51a1 --- /dev/null +++ b/platform/ui/src/assets/icons/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/platform/ui/src/assets/icons/tool-zoom.svg b/platform/ui/src/assets/icons/tool-zoom.svg new file mode 100644 index 000000000..cdd1b3b87 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-zoom.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index 3fcd0daac..7c68b86e3 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/platform/ui/src/components/Icon/getIcon.jsx @@ -6,6 +6,7 @@ import seriesInactive from './../../assets/icons/series-inactive.svg'; import calendar from './../../assets/icons/calendar.svg'; import cancel from './../../assets/icons/cancel.svg'; import chevronDown from './../../assets/icons/chevron-down.svg'; +import chevronLeft from './../../assets/icons/chevron-left.svg'; import chevronRight from './../../assets/icons/chevron-right.svg'; import infoLink from './../../assets/icons/info-link.svg'; import launchArrow from './../../assets/icons/launch-arrow.svg'; @@ -18,6 +19,9 @@ import sorting from './../../assets/icons/sorting.svg'; import sortingActiveDown from './../../assets/icons/sorting-active-down.svg'; import sortingActiveUp from './../../assets/icons/sorting-active-up.svg'; +/** Tools */ +import toolZoom from './../../assets/icons/tool-zoom.svg'; + const ICONS = { 'arrow-down': arrowDown, 'series-active': seriesActive, @@ -25,6 +29,7 @@ const ICONS = { calendar: calendar, cancel: cancel, 'chevron-down': chevronDown, + 'chevron-left': chevronLeft, 'chevron-right': chevronRight, 'info-link': infoLink, 'launch-arrow': launchArrow, @@ -36,6 +41,9 @@ const ICONS = { 'sorting-active-down': sortingActiveDown, 'sorting-active-up': sortingActiveUp, sorting: sorting, + + /** Tools */ + 'tool-zoom': toolZoom, }; /** diff --git a/platform/ui/src/components/IconButton/IconButton.jsx b/platform/ui/src/components/IconButton/IconButton.jsx index c080363ae..bd01ee349 100644 --- a/platform/ui/src/components/IconButton/IconButton.jsx +++ b/platform/ui/src/components/IconButton/IconButton.jsx @@ -87,6 +87,7 @@ const IconButton = ({ disabled = defaults.disabled, type = defaults.type, fullWidth = defaults.fullWidth, + onClick, className, ...rest }) => { @@ -94,8 +95,8 @@ const IconButton = ({ const handleOnClick = (e) => { buttonElement.current.blur(); - if (rest.onClick) { - rest.onClick(e); + if (onClick) { + onClick(e); } }; @@ -138,6 +139,7 @@ IconButton.propTypes = { disabled: PropTypes.bool, type: PropTypes.string, className: PropTypes.node, + onClick: PropTypes.func, }; export default IconButton; diff --git a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js index d5dbcb84f..a98b6a9f7 100644 --- a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js +++ b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js @@ -39,7 +39,7 @@ export const Sidebar = React.forwardRef((props, ref) => { 'Data Display', 'Other', ], - Examples: ['Views'], + Examples: ['Study List', 'Toolbar Header'], System: ['Colors'], }; diff --git a/platform/ui/src/views/Colors/BackgroundColor.jsx b/platform/ui/src/pages/Colors/BackgroundColor.jsx similarity index 86% rename from platform/ui/src/views/Colors/BackgroundColor.jsx rename to platform/ui/src/pages/Colors/BackgroundColor.jsx index df8c8233a..c9f0ee047 100644 --- a/platform/ui/src/views/Colors/BackgroundColor.jsx +++ b/platform/ui/src/pages/Colors/BackgroundColor.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import PropTypes from 'prop-types'; import classnames from 'classnames'; import tailwindConfig from '../../../tailwind.config'; @@ -8,7 +9,6 @@ const BackgroundColor = ({ color }) => { const { colors } = tailwindConfig.theme; return colors[currentColor[0]][currentColor[1]]; }; - console.log(tailwindConfig); return (
{ ); }; +BackgroundColor.propTypes = { + color: PropTypes.string, +}; + export default BackgroundColor; diff --git a/platform/ui/src/views/Colors/Colors.mdx b/platform/ui/src/pages/Colors/Colors.mdx similarity index 100% rename from platform/ui/src/views/Colors/Colors.mdx rename to platform/ui/src/pages/Colors/Colors.mdx diff --git a/platform/ui/src/views/StudyList/StudyList.mdx b/platform/ui/src/views/StudyList/StudyList.mdx index 52aa4c905..3847abd18 100644 --- a/platform/ui/src/views/StudyList/StudyList.mdx +++ b/platform/ui/src/views/StudyList/StudyList.mdx @@ -1,11 +1,10 @@ --- name: Study List -menu: Views -route: views/studyList +route: examples/studyList --- import { useState } from 'react'; -import { Playground, Props } from 'docz'; +import { Playground } from 'docz'; import { StudyList, utils, @@ -27,17 +26,10 @@ import { getMockedStudies } from '../../utils/'; import classnames from 'classnames'; import moment from 'moment'; -# StudyList +# Study List -Description... - -## Import - -```javascript -import { StudyList } from '@ohif/ui'; -``` - -## StudyList +This example shows you how you can build a Study List page using the available +components. {() => { diff --git a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx new file mode 100644 index 000000000..11a097fb6 --- /dev/null +++ b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx @@ -0,0 +1,174 @@ +--- +name: Toolbar Header +route: examples/toolbarHeader +--- + +import { useState } from 'react'; +import { Playground } from 'docz'; +import classnames from 'classnames'; +import { NavBar, Typography, Svg, Icon, IconButton } from '@ohif/ui'; + +# Toolbar Header + +This example shows you how you can build a Study List page using the available +components. + +## Basic usage + + + {() => { + const [activeTool, setActiveTool] = useState('Zoom'); + const [showTooltip, setShowTooltip] = useState('Zoom'); + const tools = [ + { + id: 'Zoom', + label: 'Zoom', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Zoom' }, + }, + { + id: 'Wwwc', + label: 'Levels', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Wwwc' }, + }, + { + id: 'Pan', + label: 'Pan', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Pan' }, + }, + { + id: 'Wwwc', + label: 'Levels', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Wwwc' }, + }, + { + id: 'Wwwc', + label: 'Levels', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Wwwc' }, + }, + ]; + const collapsedTools = [ + { + id: 'Zoom', + label: 'Zoom', + icon: 'tool-zoom', + type: null, + commandName: 'setToolActive', + commandOptions: { toolName: 'Zoom' }, + }, + ]; + const renderToolbar = () => { + return tools.map((tool, i) => { + const isActive = activeTool === tool.id; + const shouldShowTooltip = showTooltip === tool.id; + return ( +
+ { + setActiveTool(tool.id); + }} + onMouseOver={() => setShowTooltip(tool.id)} + onMouseOut={() => setShowTooltip(null)} + key={tool.id} + > + + +
+ {tool.label} + + + +
+
+ ); + }); + }; + return ( +
+ +
+
+
+ alert('Navigate to previous page')} + /> + + + +
+
+
+
+ {renderToolbar()} + + +
+
+
+ + FOR INVESTIGATIONAL USE ONLY + + {}} + > + + + + +
+
+ +
+ ); + }} + + +## Properties + + diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js index 6671c436b..66fb7d97d 100644 --- a/platform/ui/tailwind.config.js +++ b/platform/ui/tailwind.config.js @@ -313,6 +313,7 @@ module.exports = { inset: { '0': '0', auto: 'auto', + full: '100%', }, letterSpacing: { tighter: '-0.05em',