feat: UI v2 EmptyStudies Component

platform/ui/index.js

@@ -15,6 +15,7 @@ export {
   Button,
   ButtonGroup,
   DateRange,
+  EmptyStudies,
   Icon,
   IconButton,
   Select,

platform/ui/src/components/EmptyStudies/EmptyStudies.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon, Typography } from '@ohif/ui';
+
+const EmptyStudies = ({ className }) => {
+  return (
+    <div className={classnames('flex-col inline-flex items-center', className)}>
+      <Icon name="magnifier" className="mb-4" />
+      <Typography className="text-custom-aquaBright" variant="h5">
+        No studies available
+      </Typography>
+    </div>
+  );
+};
+
+EmptyStudies.defaultProps = {
+  className: '',
+};
+
+EmptyStudies.propTypes = {
+  className: PropTypes.string,
+};
+
+export default EmptyStudies;

platform/ui/src/components/EmptyStudies/EmptyStudies.mdx

@@ -0,0 +1,30 @@
+---
+name: Empty Studies
+menu: Components
+route: components/empty-studies
+---
+
+import { Playground, Props } from 'docz';
+import EmptyStudies from './';
+
+# Empty Studies
+
+This component can be used to display a message when there are no studies.
+
+## Import
+
+```javascript
+import { EmptyStudies } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4">
+    <EmptyStudies />
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={EmptyStudies} />

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

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

platform/ui/src/components/index.js

@@ -1,6 +1,7 @@
 import Button from './Button';
 import ButtonGroup from './ButtonGroup';
 import DateRange from './DateRange';
+import EmptyStudies from './EmptyStudies';
 import Icon from './Icon';
 import IconButton from './IconButton';
 import Input from './Input';
@@ -19,6 +20,7 @@ export {
   Button,
   ButtonGroup,
   DateRange,
+  EmptyStudies,
   Icon,
   IconButton,
   Input,

platform/ui/src/views/StudyList/components/StudyListTable.js

@@ -3,16 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { format } from 'date-fns';
-import {
+import { Button, Icon, EmptyStudies } from '@ohif/ui';
-  Button,
-  Icon,
-  Typography,
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableCell,
-} from '@ohif/ui';
 
 const getGridColClass = (filtersMeta, name) => {
   const filter = filtersMeta.find(filter => filter.name === name);
@@ -260,10 +251,7 @@ const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
   const renderEmpty = () => {
     return (
       <div className="flex flex-col items-center justify-center pt-48">
-        <Icon name="magnifier" className="mb-4" />
+        <EmptyStudies />
-        <Typography className="text-custom-aquaBright" variant="h5">
-          No studies available
-        </Typography>
       </div>
     );
   };