From 73272124b3ea6b8e20d4ac3d5874672e01087d8e Mon Sep 17 00:00:00 2001
From: Brad Decker <git@braddecker.dev>
Date: Wed, 13 May 2020 16:19:14 -0500
Subject: [PATCH] broaden usage options for list-item (#8587)

---
 ui/app/components/ui/list-item/index.js       |   3 +-
 ui/app/components/ui/list-item/index.scss     |  28 +--
 .../ui/list-item/list-item.component.js       | 173 +++++-------------
 .../ui/list-item/list-item.stories.js         |  70 +++++--
 4 files changed, 107 insertions(+), 167 deletions(-)

diff --git a/ui/app/components/ui/list-item/index.js b/ui/app/components/ui/list-item/index.js
index 7916294cf..569abb954 100644
--- a/ui/app/components/ui/list-item/index.js
+++ b/ui/app/components/ui/list-item/index.js
@@ -1,3 +1,2 @@
-import ListItem from './list-item.component'
+export { default } from './list-item.component'
 
-export default ListItem
diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss
index 7b8e4509a..0c245e5b1 100644
--- a/ui/app/components/ui/list-item/index.scss
+++ b/ui/app/components/ui/list-item/index.scss
@@ -1,25 +1,27 @@
 .list-item {
   width: 100%;
-  min-width: 374px;
   min-height: 86px;
-  margin: 0 20px;
+  margin: 0;
   background: #FFFFFF;
   padding: 24px 16px;
   @extend %font;
   border-top: 1px solid $mercury;
   border-bottom: 1px solid $mercury;
-  color: $Grey-500;
+  color: $Black-100;
 
   display: flex;
   justify-content: flex-start;
   align-items: stretch;
 
-  &__icon {
+  &__icon > * {
     margin: 8px 14px 0 0;
   }
 
   &__col {
     align-self: flex-start;
+    &-main {
+      flex-grow: 1;
+    }
   }
 
   &__heading {
@@ -40,24 +42,10 @@
   &__subheading {
     font-size: 12px;
     line-height: 14px;
+    color: $Grey-500;
   }
 
-  &__status {
-    &--unapproved {
-      color: $flamingo;
-    }
-    &--failed {
-      color: $valencia;
-    }
-  }
-
-  &__approved {
-    .list-item__heading {
-      color: $shark;
-    }
-  }
-
-  &__amount {
+  &__rightContent {
     margin: 0 0 0 auto;
     text-align: right;
   }
diff --git a/ui/app/components/ui/list-item/list-item.component.js b/ui/app/components/ui/list-item/list-item.component.js
index b70586c7f..46826b82a 100644
--- a/ui/app/components/ui/list-item/list-item.component.js
+++ b/ui/app/components/ui/list-item/list-item.component.js
@@ -1,138 +1,51 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import Approve from '../icon/approve-icon.component'
-import Interaction from '../icon/interaction-icon.component'
-import Preloader from '../icon/preloader'
-import Send from '../icon/send-icon.component'
 import classnames from 'classnames'
 
-const SendIcon = () => (
-  <Send
-    className="list-item__icon"
-    size={28}
-    color="#2F80ED"
-  />
-)
+export default function ListItem ({ title, subtitle, onClick, subtitleStatus, children, titleIcon, icon, rightContent, className }) {
+  const primaryClassName = classnames('list-item', className)
 
-const InteractionIcon = () => (
-  <Interaction
-    className="list-item__icon"
-    size={28}
-    color="#2F80ED"
-  />
-)
-
-const ApproveIcon = () => (
-  <Approve
-    className="list-item__icon"
-    size={28}
-    color="#2F80ED"
-  />
-)
-
-const FailIcon = () => (
-  <Interaction
-    className="list-item__icon"
-    size={28}
-    color="#D73A49"
-  />
-)
-
-export default class ListItem extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  static propTypes = {
-    className: PropTypes.string,
-    status: PropTypes.string,
-    title: PropTypes.string.isRequired,
-    subtitle: PropTypes.string,
-    children: PropTypes.node,
-    primaryCurrency: PropTypes.string,
-    secondaryCurrency: PropTypes.string,
-  }
-
-  static defaultProps = {
-    status: 'pending',
-  }
-
-  render () {
-    const {
-      className,
-      status,
-      title,
-      subtitle,
-      children,
-      primaryCurrency,
-      secondaryCurrency,
-    } = this.props
-    const { t } = this.context
-
-    const isApproved = status === 'approved'
-    const isUnapproved = status === 'unapproved'
-    const isPending = status === 'pending'
-    const isFailed = status === 'failed'
-
-    let icon = <InteractionIcon />
-    if (isApproved) {
-      icon = <ApproveIcon />
-    } else if (isPending) {
-      icon = <SendIcon />
-    } else if (isFailed) {
-      icon = <FailIcon />
-    }
-
-    let subtitleStatus = null
-    if (isUnapproved) {
-      subtitleStatus = (
-        <span><span className="list-item__status--unapproved">{t('unapproved')}</span> · </span>
-      )
-    } else if (isFailed) {
-      subtitleStatus = (
-        <span><span className="list-item__status--failed">{t('failed')}</span> · </span>
-      )
-    }
-
-    return (
-      <div className={className}>
-        <div className="list-item__col">
-          { icon }
+  return (
+    <div className={primaryClassName} onClick={onClick}>
+      {icon && (
+        <div className="list-item__col list-item__icon">
+          {icon}
         </div>
-        <div
-          className={classnames('list-item__col', {
-            'list-item__approved': isApproved,
-          })}
-        >
-          <h2 className="list-item__heading">
-            { title } {isPending && (
-              <span className="list-item__heading-wrap">
-                <Preloader
-                  size={16}
-                  color="#D73A49"
-                />
-              </span>
-            )}
-          </h2>
-          <h3 className="list-item__subheading">
-            {subtitleStatus}
-            {subtitle}
-          </h3>
-          {children && (
-            <div className="list-item__more">
-              { children }
-            </div>
+      )}
+      <div className="list-item__col list-item__col-main">
+        <h2 className="list-item__heading">
+          { title } {titleIcon && (
+            <span className="list-item__heading-wrap">
+              {titleIcon}
+            </span>
           )}
-        </div>
-        <div
-          className={classnames('list-item__col list-item__amount', {
-            'list-item__approved': isApproved,
-          })}
-        >
-          <h2 className="list-item__heading">{primaryCurrency}</h2>
-          <h3 className="list-item__subheading">{secondaryCurrency}</h3>
-        </div>
+        </h2>
+        <h3 className="list-item__subheading">
+          {subtitleStatus}{subtitle}
+        </h3>
+        {children && (
+          <div className="list-item__more">
+            { children }
+          </div>
+        )}
       </div>
-    )
-  }
+      {rightContent && (
+        <div className="list-item__col list-item__rightContent">
+          {rightContent}
+        </div>
+      )}
+    </div>
+  )
+}
+
+ListItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  titleIcon: PropTypes.node,
+  subtitle: PropTypes.string,
+  subtitleStatus: PropTypes.node,
+  children: PropTypes.node,
+  icon: PropTypes.node,
+  rightContent: PropTypes.node,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
 }
diff --git a/ui/app/components/ui/list-item/list-item.stories.js b/ui/app/components/ui/list-item/list-item.stories.js
index 237efcfba..c26015c34 100644
--- a/ui/app/components/ui/list-item/list-item.stories.js
+++ b/ui/app/components/ui/list-item/list-item.stories.js
@@ -1,51 +1,91 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ListItem from './list-item.component'
 import { text } from '@storybook/addon-knobs/react'
+import Send from '../icon/send-icon.component'
+import Interaction from '../icon/interaction-icon.component'
+import Approve from '../icon/approve-icon.component'
+import Receive from '../icon/receive-icon.component'
+import Preloader from '../icon/preloader'
+import Button from '../button'
 
 export default {
   title: 'ListItem',
 }
 
+function Currencies ({ primary, secondary }) {
+  return (
+    <div>
+      <div>{primary}</div>
+      <div>{secondary}</div>
+    </div>
+  )
+}
+
+Currencies.propTypes = {
+  primary: PropTypes.string,
+  secondary: PropTypes.string,
+}
+
+const okColor = '#2F80ED'
+const failColor = '#D73A49'
+
 export const send = () => (
   <ListItem
+    icon={<Send color={okColor} size={28} />}
+    titleIcon={ (
+      <Preloader
+        size={16}
+        color="#D73A49"
+      />
+    )}
     title={text('title', 'Send DAI')}
     className="list-item"
-    status="pending"
     subtitle={text('subtitle', 'Sept 20 · To: 00X4...3058')}
-    primaryCurrency={text('primaryCurrency', '- 0.0732 DAI')}
-    secondaryCurrency={text('secondaryCurrency', '- $6.04 USD')}
-  />
+    rightContent={<Currencies primary={text('primaryCurrency', '- 0.0732 DAI')} secondary={text('secondaryCurrency', '- $6.04 USD')} />}
+  >
+    <div style={{ display: 'flex', marginTop: 8 }}>
+      <Button
+        type="secondary"
+        style={{ marginRight: 16, maxWidth: 150 }}
+      >
+        { text('button1', 'Speed Up')}
+      </Button>
+      <Button style={{ maxWidth: 150 }}>
+        { text('button2', 'Cancel') }
+      </Button>
+    </div>
+  </ListItem>
 )
 
 export const pending = () => (
   <ListItem
+    icon={<Interaction color={failColor} size={28} />}
     title={text('title', 'Hatch Turtles')}
     className="list-item"
-    status="unapproved"
+    subtitleStatus={<span><span style={{ color: '#F56821' }}>Unapproved</span> · </span>}
     subtitle={text('subtitle', 'Turtlefarm.com')}
-    primaryCurrency={text('primaryCurrency', '- 0.0732 ETH')}
-    secondaryCurrency={text('secondaryCurrency', '- $6.00 USD')}
+    rightContent={<Currencies primary={text('primaryCurrency', '- 0.0732 ETH')} secondary={text('secondaryCurrency', '- $6.00 USD')} />}
   />
 )
 
+
 export const approve = () => (
   <ListItem
+    icon={<Approve color={okColor} size={28} />}
     title={text('title', 'Approve spend limit')}
     className="list-item"
-    status="approved"
     subtitle={text('subtitle', 'Sept 20 · oxuniverse.com')}
-    primaryCurrency={text('primaryCurrency', '0.00070 DAI')}
-    secondaryCurrency={text('secondaryCurrency', '$0.02 USD')}
+    rightContent={<Currencies primary={text('primaryCurrency', '- 0 ETH')} secondary={text('secondaryCurrency', '- $0.00 USD')} />}
   />
 )
 
-export const failed = () => (
+export const receive = () => (
   <ListItem
+    icon={<Receive color={okColor} size={28} />}
     title={text('title', 'Hatch Turtles')}
     className="list-item"
-    status="failed"
-    subtitle={text('subtitle', 'Turtlefarm.com')}
-    primaryCurrency={text('primaryCurrency', '- 0.0732 ETH')}
-    secondaryCurrency={text('secondaryCurrency', '- $6.00 USD')}
+    subtitle={text('subtitle', 'Sept 20 · From: 00X4...3058')}
+    rightContent={<Currencies primary={text('primaryCurrency', '7.5 ETH')} secondary={text('secondaryCurrency', '$1,425.00 USD')} />}
   />
 )