feat(Item): alignment of the Item component

wfp · Feb 3, 2021 · 6cbb4b6 · 6cbb4b6
1 parent cb25eb1
commit 6cbb4b6
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/components/Item/Item.js b/src/components/Item/Item.js
@@ -6,12 +6,14 @@ const { prefix } = settings;
 
 /** The item component can be used whenever a section should indicate that there is no content available. This can be the case for a item list table or search results. */
 export const Item = ({
+  additional,
   button,
   children,
   className,
   href,
   subText,
   icon,
+  hint,
   title,
   kind = 'large',
   ...other
@@ -27,11 +29,28 @@ export const Item = ({
     <div className={classNames} {...other}>
       <div className={`${prefix}--item__icon`}>{icon}</div>
       <div className={`${prefix}--item__content`}>
-        {title && <h2 className={`${prefix}--item__title`}>{title}</h2>}
-        {children && <div className={`${prefix}--item__text`}>{children}</div>}
-        {subText && <div className={`${prefix}--item__subtext`}>{subText}</div>}
+        {title && (
+          <h2 className={`${prefix}--item__title`}>
+            {title}
+            {additional && (
+              <div className={`${prefix}--item__additional`}>{additional}</div>
+            )}
+          </h2>
+        )}
+        <div className={`${prefix}--item__textwrapper`}>
+          <div>
+            {children && (
+              <div className={`${prefix}--item__text`}>{children}</div>
+            )}
+            {subText && (
+              <div className={`${prefix}--item__subtext`}>{subText}</div>
+            )}
+          </div>
+          <div className={`${prefix}--item__right`}>
+            {hint && <div className={`${prefix}--item__hint`}>{hint}</div>}
+          </div>
+        </div>
       </div>
-      <div className={`${prefix}--item__button`}>{button}</div>
     </div>
   );
 };

diff --git a/src/components/Item/Item.stories.js b/src/components/Item/Item.stories.js
@@ -2,6 +2,7 @@ import React from 'react';
 import markdown from './README.mdx';
 import Item from '.';
 import Button from '../Button';
+import Tag from '../Tag';
 
 export default {
   title: 'Components/UI Elements/Item',
@@ -31,15 +32,16 @@ Regular.args = {
 export const Horizontal = (args) => <Item {...args} />;
 
 Horizontal.args = {
-  title: 'No entries found',
-  children: `You haven't yet created an entry`,
-  subText: `You haven't yet created an entry`,
+  title: 'A title is shown',
+  children: `nonumy eirmod tempor invidunt`,
+  subText: `This is the subText. Lorem ipsum dolor sit amet, consetetur sadipscing elitr`,
   kind: 'horizontal',
   icon: (
     <img
       alt="Moving van"
       src="https://www.wfp.org/sites/default/files/images/27DA6743-41A0-4970-A9BA-B4B1415CDD2E_0.jpeg"
     />
   ),
-  button: <Button kind="accent">New entry</Button>,
+  additional: 'Yesterday',
+  hint: <Tag kind="wfp">Hint</Tag>,
 };
diff --git a/src/components/Item/_item.scss b/src/components/Item/_item.scss
@@ -87,6 +87,8 @@
       h2 {
         margin-bottom: $spacing-2xs;
         font-size: 1em;
+        display: flex;
+        justify-content: space-between;
       }
 
       p {
@@ -101,6 +103,17 @@
     .#{$prefix}--item__content {
       flex: 1;
     }
+    .#{$prefix}--item__right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      text-align: right;
+    }
+    .#{$prefix}--item__textwrapper {
+      display: flex;
+      justify-content: space-between;
+    }
     .#{$prefix}--item__text {
       flex: 1;
       font-size: 0.9em;