feat: add statuses to Teaser

- add statuses array - add fixed height - implement 3 rows architecture where: 1. `title` + `location` 2. `subTitle` (or `details` if no `subTitle`) 3. `details` (if there is `subTitle`) + statuses (always on the last row in the right)
textkernel · Oct 26, 2020 · d9826b9 · d9826b9
1 parent fd28bb7
commit d9826b9
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 40 deletions.
diff --git a/src/components/Teaser/Teaser.scss b/src/components/Teaser/Teaser.scss
@@ -2,10 +2,22 @@
     min-width: 0;
     margin: 0;
     display: flex;
+    flex: 1;
     flex-direction: column;
+    height: 63px;
 
-    &__titleLine {
+    &__line {
         display: flex;
+        flex: 1;
+        align-items: center;
+        padding-bottom: var(--spacing-2x);
+    }
+
+    &__lastLine {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: flex-end;
     }
 
     &__title {
@@ -28,8 +40,14 @@
         text-overflow: ellipsis;
     }
 
-    &__titleLine:not(:last-child),
-    &__subTitle:not(:last-child) {
-        padding-bottom: var(--spacing-2x);
+    &__details {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__statuses {
+        padding-left: var(--spacing-2x);
     }
 }
diff --git a/src/components/Teaser/Teaser.tsx b/src/components/Teaser/Teaser.tsx
@@ -1,8 +1,14 @@
 import * as React from 'react';
 import { bem } from '../../utils';
 import { Text } from '../Text';
+import { Tooltip } from '../Tooltip';
 import styles from './Teaser.scss';
 
+type Status = {
+    label: string;
+    tooltip: string;
+};
+
 interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     /** The title of entity */
     title: SingleReactNode;
@@ -12,16 +18,18 @@ interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     location?: SingleReactNode;
     /** Details related to the entity */
     details?: SingleReactNode;
+    /** Statuses of entity containing status label and tooltip message */
+    statuses?: Status[];
 }
 
 const { block, elem } = bem('Teaser', styles);
 
 export const Teaser: React.FC<Props> = (props) => {
-    const { title, subTitle, location, details, ...rest } = props;
+    const { title, subTitle, location, details, statuses, ...rest } = props;
 
     return (
         <div {...rest} {...block(props)}>
-            <div {...elem('titleLine', props)}>
+            <div {...elem('line', props)}>
                 <Text inline context="brand" {...elem('title', props)}>
                     {title}
                 </Text>
@@ -31,16 +39,43 @@ export const Teaser: React.FC<Props> = (props) => {
                     </Text>
                 )}
             </div>
-            {subTitle && (
-                <Text inline context="accent" {...elem('subTitle', props)}>
-                    {subTitle}
-                </Text>
-            )}
-            {details && (
-                <Text inline context="muted">
-                    {details}
-                </Text>
-            )}
+            <div {...elem('line', props)}>
+                {subTitle && (
+                    <Text inline context="accent" {...elem('subTitle', props)}>
+                        {subTitle}
+                    </Text>
+                )}
+                {!subTitle && details && (
+                    <Text inline context="muted" {...elem('details', props)}>
+                        {details}
+                    </Text>
+                )}
+            </div>
+            <div {...elem('lastLine', props)}>
+                {subTitle && details && (
+                    <Text inline context="muted" {...elem('details', props)}>
+                        {details}
+                    </Text>
+                )}
+                {statuses && statuses.length > 0 && (
+                    <div {...elem('statuses', props)}>
+                        {statuses.map(({ label, tooltip }, index) => (
+                            <span key={label}>
+                                <Tooltip content={tooltip}>
+                                    <Text inline context="muted" size="small">
+                                        {label}
+                                    </Text>
+                                </Tooltip>
+                                {index < statuses.length - 1 && (
+                                    <Text inline context="muted" size="small">
+                                        {' & '}
+                                    </Text>
+                                )}
+                            </span>
+                        ))}
+                    </div>
+                )}
+            </div>
         </div>
     );
 };

diff --git a/src/components/Teaser/__tests__/Teaser.spec.js b/src/components/Teaser/__tests__/Teaser.spec.js
@@ -15,6 +15,16 @@ describe('Teaser', () => {
                 location="location"
                 subTitle="Organization"
                 details="details about this job"
+                statuses={[
+                    {
+                        label: 'Viewed',
+                        tooltip: 'Viewed two days ago',
+                    },
+                    {
+                        label: 'Imported',
+                        tooltip: 'Imported five days ago',
+                    },
+                ]}
             />
         );
 

diff --git a/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.js.snap b/src/components/Teaser/__tests__/__snapshots__/Teaser.spec.js.snap
@@ -11,7 +11,7 @@ exports[`Teaser should render correctly with just a title 1`] = `
     className="Teaser"
   >
     <div
-      className="Teaser__titleLine"
+      className="Teaser__line"
     >
       <Text
         className="Teaser__title"
@@ -26,6 +26,12 @@ exports[`Teaser should render correctly with just a title 1`] = `
         </span>
       </Text>
     </div>
+    <div
+      className="Teaser__line"
+    />
+    <div
+      className="Teaser__lastLine"
+    />
   </div>
 </Teaser>
 `;
@@ -34,14 +40,26 @@ exports[`Teaser should render with all props defined 1`] = `
 <Teaser
   details="details about this job"
   location="location"
+  statuses={
+    Array [
+      Object {
+        "label": "Viewed",
+        "tooltip": "Viewed two days ago",
+      },
+      Object {
+        "label": "Imported",
+        "tooltip": "Imported five days ago",
+      },
+    ]
+  }
   subTitle="Organization"
   title="A job title"
 >
   <div
     className="Teaser"
   >
     <div
-      className="Teaser__titleLine"
+      className="Teaser__line"
     >
       <Text
         className="Teaser__title"
@@ -68,29 +86,131 @@ exports[`Teaser should render with all props defined 1`] = `
         </span>
       </Text>
     </div>
-    <Text
-      className="Teaser__subTitle"
-      context="accent"
-      inline={true}
-      size="normal"
+    <div
+      className="Teaser__line"
     >
-      <span
-        className="Text--context_accent Teaser__subTitle"
+      <Text
+        className="Teaser__subTitle"
+        context="accent"
+        inline={true}
+        size="normal"
       >
-        Organization
-      </span>
-    </Text>
-    <Text
-      context="muted"
-      inline={true}
-      size="normal"
+        <span
+          className="Text--context_accent Teaser__subTitle"
+        >
+          Organization
+        </span>
+      </Text>
+    </div>
+    <div
+      className="Teaser__lastLine"
     >
-      <span
-        className="Text--context_muted"
+      <Text
+        className="Teaser__details"
+        context="muted"
+        inline={true}
+        size="normal"
+      >
+        <span
+          className="Text--context_muted Teaser__details"
+        >
+          details about this job
+        </span>
+      </Text>
+      <div
+        className="Teaser__statuses"
       >
-        details about this job
-      </span>
-    </Text>
+        <span
+          key="Viewed"
+        >
+          <Tooltip
+            animation="shift-toward"
+            content="Viewed two days ago"
+          >
+            <ForwardRef(TippyWrapper)
+              animation="shift-toward"
+              content="Viewed two days ago"
+            >
+              <Tippy
+                animation="shift-toward"
+                content="Viewed two days ago"
+              >
+                <Text
+                  context="muted"
+                  inline={true}
+                  size="small"
+                >
+                  <span
+                    className="Text--context_muted Text--size_small"
+                  >
+                    Viewed
+                  </span>
+                </Text>
+                <Portal
+                  containerInfo={
+                    <div>
+                      Viewed two days ago
+                    </div>
+                  }
+                >
+                  Viewed two days ago
+                </Portal>
+              </Tippy>
+            </ForwardRef(TippyWrapper)>
+          </Tooltip>
+          <Text
+            context="muted"
+            inline={true}
+            size="small"
+          >
+            <span
+              className="Text--context_muted Text--size_small"
+            >
+               & 
+            </span>
+          </Text>
+        </span>
+        <span
+          key="Imported"
+        >
+          <Tooltip
+            animation="shift-toward"
+            content="Imported five days ago"
+          >
+            <ForwardRef(TippyWrapper)
+              animation="shift-toward"
+              content="Imported five days ago"
+            >
+              <Tippy
+                animation="shift-toward"
+                content="Imported five days ago"
+              >
+                <Text
+                  context="muted"
+                  inline={true}
+                  size="small"
+                >
+                  <span
+                    className="Text--context_muted Text--size_small"
+                  >
+                    Imported
+                  </span>
+                </Text>
+                <Portal
+                  containerInfo={
+                    <div>
+                      Imported five days ago
+                    </div>
+                  }
+                >
+                  Imported five days ago
+                </Portal>
+              </Tippy>
+            </ForwardRef(TippyWrapper)>
+          </Tooltip>
+        </span>
+      </div>
+    </div>
   </div>
 </Teaser>
 `;