Fee card component (#9169)

* Fee card component

* Clean up

* Style lint fixes

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../ui/app/components/**/*.stories.js'],
+  stories: ['../ui/app/**/*.stories.js'],
   addons: [
     '@storybook/addon-knobs',
     '@storybook/addon-actions',

ui/app/pages/index.scss

@@ -12,3 +12,4 @@
 @import 'confirm-approve/index';
 @import 'permissions-connect/index';
 @import 'asset/asset';
+@import 'token/index';

ui/app/pages/token/fee-card/fee-card.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function FeeCard ({
+  onFeeRowClick = null,
+  feeRowText,
+  feeRowLinkText = '',
+  primaryFee,
+  secondaryFee = '',
+  onSecondRowClick = null,
+  secondRowText = '',
+  secondRowLinkText = '',
+  hideSecondRow = false,
+}) {
+  return (
+    <div className="fee-card">
+      <div className="fee-card__main">
+        <div className="fee-card__row-header" onClick={() => onFeeRowClick && onFeeRowClick()}>
+          <div>
+            <div className="fee-card__row-header-text">
+              {feeRowText}
+            </div>
+            {onFeeRowClick && (
+              <div className="fee-card__link">
+                {feeRowLinkText}
+              </div>
+            )}
+          </div>
+          <div>
+            <div className="fee-card__row-header-secondary">
+              {primaryFee}
+            </div>
+            {secondaryFee && (
+              <div className="fee-card__row-header-primary">
+                {secondaryFee}
+              </div>
+            )}
+          </div>
+        </div>
+        {!hideSecondRow && secondRowText && (
+          <div className="fee-card__row">
+            <div className="fee-card__row-label">
+              <div className="fee-card__row-text">
+                {secondRowText}
+              </div>
+              {secondRowLinkText && (
+                <div className="fee-card__link" onClick={() => onSecondRowClick && onSecondRowClick()}>
+                  {secondRowLinkText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+FeeCard.propTypes = {
+  onFeeRowClick: PropTypes.func,
+  feeRowText: PropTypes.string.isRequired,
+  feeRowLinkText: PropTypes.string,
+  primaryFee: PropTypes.string.isRequired,
+  secondaryFee: PropTypes.string,
+  onSecondRowClick: PropTypes.func,
+  secondRowText: PropTypes.string,
+  secondRowLinkText: PropTypes.string,
+  hideSecondRow: PropTypes.bool,
+}

ui/app/pages/token/fee-card/fee-card.stories.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import FeeCard from './fee-card.js'
+import { action } from '@storybook/addon-actions'
+import { text } from '@storybook/addon-knobs/react'
+
+const containerStyle = {
+  width: '300px',
+}
+
+export default {
+  title: 'FeeCard',
+}
+
+export const WithSecondRow = () => {
+  return (
+    <div style={containerStyle}>
+      <FeeCard
+        onFeeRowClick={action('Fee row link clicked')}
+        feeRowText={text('feeRowText', 'Network fees')}
+        feeRowLinkText={text('feeRowLinkText', 'Edit')}
+        primaryFee={text('primaryFee', '1 ETH')}
+        secondaryFee={text('secondaryFee', '$300.57')}
+        onSecondRowClick={action('Second row link clicked')}
+        secondRowText={text('secondRowText', 'This calls a contract')}
+        secondRowLinkText={text('secondRowLinkText', 'Learn More')}
+      />
+    </div>
+  )
+}
+
+export const WithoutSecondRow = () => {
+  return (
+    <div style={containerStyle}>
+      <FeeCard
+        onFeeRowClick={action('Fee row link clicked')}
+        feeRowText={text('feeRowText', 'Network fees')}
+        feeRowLinkText={text('feeRowLinkText', 'Edit')}
+        primaryFee={text('primaryFee', '1 ETH')}
+        secondaryFee={text('secondaryFee', '$300.57')}
+        onSecondRowClick={action('Second row link clicked')}
+        secondRowText={text('secondRowText', 'This calls a contract')}
+        secondRowLinkText={text('secondRowLinkText', 'Learn More')}
+        hideSecondRow
+      />
+    </div>
+  )
+}

ui/app/pages/token/fee-card/index.js

@@ -0,0 +1 @@
+export { default } from './fee-card'

ui/app/pages/token/fee-card/index.scss

@@ -0,0 +1,102 @@
+.fee-card {
+  border-radius: 8px;
+  border: 1px solid $Grey-100;
+  width: 100%;
+  margin-top: auto;
+  margin-bottom: 8px;
+
+  @include H7;
+
+  &__main {
+    padding: 16px 16px 12px 16px;
+  }
+
+  &__row-header {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+    justify-content: space-between;
+
+    @media screen and (min-width: 576px) {
+      @include H6;
+    }
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__row-header-text {
+    font-weight: bold;
+    margin-right: 8px;
+    cursor: pointer;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+  }
+
+  &__row-label {
+    display: flex;
+    align-items: center;
+
+    img {
+      height: 10px;
+      width: 10px;
+      margin-left: 4px;
+      cursor: pointer;
+    }
+  }
+
+  &__row-text {
+    margin-right: 8px;
+  }
+
+  &__row-fee {
+    margin-right: 4px;
+  }
+
+  &__link {
+    color: $Blue-500;
+    cursor: pointer;
+  }
+
+  &__total-box {
+    border-top: 1px solid $Grey-100;
+    padding: 12px 16px 16px 16px;
+  }
+
+  &__total-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: bold;
+  }
+
+  &__total-secondary {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    font-weight: bold;
+    color: $Grey-500;
+    margin-top: 4px;
+  }
+
+  &__row-header-secondary {
+    color: $Grey-500;
+    margin-right: 20px;
+  }
+
+  &__row-header-primary {
+    font-weight: bold;
+    color: $Grey-500;
+  }
+}

ui/app/pages/token/index.scss

@@ -0,0 +1 @@
+@import 'fee-card/index';