Refactor Thumbnail component

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -5,116 +5,63 @@ import classnames from 'classnames';
 import { Icon } from '@ohif/ui';
 
 const Thumbnail = ({
+  className,
+  imageSrc,
+  imageAltText,
   seriesDescription,
   seriesNumber,
   instanceNumber,
-  viewportIdentificator,
-  isTracked,
   isActive,
   onClick,
 }) => {
-  const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle';
-
   return (
     <div
-      className="flex flex-row flex-1 px-3 py-2 showExcludeButtonOnHover cursor-pointer outline-none"
+      className={classnames(
+        className,
+        'flex flex-col flex-1 px-3 cursor-pointer outline-none'
+      )}
       onClick={onClick}
       onKeyDown={onClick}
       role="button"
       tabIndex="0"
     >
-      <div className="flex flex-col flex-2 items-center">
+      <div
-        <div
+        className={classnames(
-          className={classnames(
+          'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white mb-2 min-h-32',
-            'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
+          isActive
-            isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
+            ? 'border-2 border-primary-light'
-          )}
+            : 'border border-secondary-light hover:border-blue-300'
-        >
+        )}
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
+      >
-          <div className="text-white text-xl leading-tight h-5">
+        {imageSrc ? (
-            {viewportIdentificator}
+          <img src={imageSrc} alt={imageAltText} className="min-h-32" />
-          </div>
+        ) : (
-          <div
+          <div>{imageAltText}</div>
-            className={classnames(
-              'tooltip tooltip-right bg-black border border-secondary-main text-common-light text-base rounded py-2 px-4 top-0 w-max-content hidden'
-            )}
-          >
-            <div className="flex flex-row flex-1">
-              <div className="flex flex-col flex-1 pr-4">
-                <span>
-                  Series is <span className="text-white">tracked</span>
-                </span>
-                {viewportIdentificator && (
-                  <span>
-                    in viewport
-                    <span className="ml-1 text-white">
-                      {viewportIdentificator}
-                    </span>
-                  </span>
-                )}
-              </div>
-              <div className="flex flex-2 items-center justify-center">
-                <Icon name="info-link" className="text-primary-active" />
-              </div>
-            </div>
-            <svg
-              className="absolute text-black stroke-secondary-main stroke-2"
-              style={{
-                top: 'calc(50% - 8px)',
-                left: -15,
-                transform: 'rotate(270deg)',
-              }}
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-            >
-              <path fill="currentColor" d="M24 22h-24l12-20z" />
-            </svg>
-          </div>
-        </div>
-        {isTracked && (
-          <Icon
-            name="cancel"
-            className="text-primary-active excludeButton w-4"
-          />
         )}
       </div>
-      <div className="flex flex-col flex-1 px-3">
+      <div className="flex flex-row flex-1 text-blue-300 text-base items-center">
-        <div
+        <div className="mr-4">
-          className={classnames(
+          <span className="text-primary-main font-bold">{'S: '}</span>
-            'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white mb-2',
+          {seriesNumber}
-            isActive
-              ? 'border-2 border-primary-light'
-              : 'border border-secondary-light hover:border-blue-300'
-          )}
-          style={{ minHeight: '120px' }}
-        >
-          {'Thumbnail img'}
         </div>
-        <div className="flex flex-row flex-1 text-blue-300 text-base">
+        <div className="flex flex-row items-center flex-1">
-          <div className="mr-4">
+          <Icon name="group-layers" className="w-3 mr-2" /> {instanceNumber}
-            <span className="text-primary-main font-bold">{'S: '}</span>
-            {seriesNumber}
-          </div>
-          <div className="flex flex-row items-centerflex-1">
-            <Icon name="group-layers" className="w-3 mr-2" /> {instanceNumber}
-          </div>
         </div>
-        <div className="text-white text-base">{seriesDescription}</div>
       </div>
+      <div className="text-white text-base">{seriesDescription}</div>
     </div>
   );
 };
 
 Thumbnail.propTypes = {
+  className: PropTypes.string,
+  imageSrc: PropTypes.string,
+  imageAltText: PropTypes.string,
   seriesDescription: PropTypes.string.isRequired,
   seriesNumber: PropTypes.number.isRequired,
   instanceNumber: PropTypes.number.isRequired,
   isActive: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  isTracked: PropTypes.bool,
-  viewportIdentificator: PropTypes.string,
 };
 
 export default Thumbnail;

platform/ui/src/components/Thumbnail/Thumbnail.mdx

@@ -0,0 +1,40 @@
+---
+name: Thumbnail
+menu: General
+route: components/thumbnail
+---
+
+import { Playground, Props } from 'docz';
+import { Thumbnail } from '@ohif/ui';
+
+# Thumbnail
+
+Used to expose a display set showing some information about the group of images
+and a thumbnail
+
+## Import
+
+```javascript
+import { Thumbnail } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="flex flex-1 items-center justify-center p-4">
+    <div className="w-56">
+      <Thumbnail
+        imageAltText="DisplaySet thumbnail image"
+        seriesDescription="Multiple line image series description lorem sit"
+        seriesNumber={4}
+        instanceNumber={902}
+        isActive={false}
+        onClick={() => alert('Thumbnail was clicked!')}
+      />
+    </div>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={Thumbnail} />