Fix issue51

src/Components/Banner/index.js

@@ -2,11 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import './Banner.css'
 
-const Banner = ({
-  title,
-  linkTo,
-  children
-}) => (
+const Banner = ({ title, linkTo, children }) => (
   <div className='dispute-resolution-banner'>
     <div className='banner-container'>
       <Link to={linkTo}>&#x2190; Go back to the list</Link>

src/Components/ContractsTable/Grid/index.js

@@ -1,10 +1,7 @@
 import React from 'react'
 import './Grid.css'
 
-const Grid = ({
-  className,
-  children
-}) => (
+const Grid = ({ className, children }) => (
   <div className={`Grid-container ${className}`}>
     <div className='grid'>
       <div className='header'>
@@ -13,9 +10,8 @@ const Grid = ({
         <div className='item header-party-b'>Address Party B</div>
         <div className='item header-rule'>Rule</div>
       </div>
-      { children }
+      {children}
     </div>
-
   </div>
 )
 

src/Components/ExpandableTable/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+
 import './ExpandableTable.css'
 
 class ExpandableTable extends Component {
@@ -13,26 +14,32 @@ class ExpandableTable extends Component {
   }
 
   render () {
-    const rowLimit = this.state.expand ? this.props.rows.length : this.props.rowLimit
+    const rowLimit = this.state.expand
+      ? this.props.rows.length
+      : this.props.rowLimit
     const rows = this.props.rows.slice(0, rowLimit)
     let actionDiv
 
     if (this.props.rows.length > this.props.rowLimit) {
       if (this.state.expand) {
         actionDiv = (
-          <div className='actionDiv' onClick={this.toggleMore}>{this.props.lessMessage} &and;</div>
+          <div className='actionDiv' onClick={this.toggleMore}>
+            {this.props.lessMessage} &and;
+          </div>
         )
       } else {
         actionDiv = (
-          <div className='actionDiv' onClick={this.toggleMore}>{this.props.moreMessage} &or;</div>
+          <div className='actionDiv' onClick={this.toggleMore}>
+            {this.props.moreMessage} &or;
+          </div>
         )
       }
     }
 
     return (
       <div className={`ExpandableTable ${this.props.theme}`}>
-        { rows }
-        { actionDiv }
+        {rows}
+        {actionDiv}
       </div>
     )
   }

src/Components/Home/MetroCard/index.js

@@ -3,6 +3,7 @@ import _ from 'lodash'
 import { connect } from 'react-redux'
 import { withRouter, Link } from 'react-router-dom'
 import 'babel-polyfill'
+
 import { getContracts } from '../../../redux/contracts/action-creators'
 import { truncateText } from '../../../helpers/truncateText'
 import Identicon from '../../Identicon'
@@ -39,36 +40,33 @@ class MetroCard extends Component {
 
     return (
       <div className='MetroCard-container'>
-        {
-          _.isEmpty(contracts) &&
-          <div className='no-contracts'>
-            You have no contracts.
-          </div>
-        }
-        {
-          contractsLast3Elements.map(contract =>
-            <div className='card'>
-              <Link key={contract.address} to={`contract-summary/${contract.address}`}>
-                <div className='card-content'>
-                  <div className='card-icon'>
-                    <Identicon seed={contract.address} />
+        {_.isEmpty(contracts) && (
+          <div className='no-contracts'>You have no contracts.</div>
+        )}
+        {contractsLast3Elements.map(contract => (
+          <div className='card'>
+            <Link
+              key={contract.address}
+              to={`contract-summary/${contract.address}`}>
+              <div className='card-content'>
+                <div className='card-icon'>
+                  <Identicon seed={contract.address} />
+                </div>
+                <div className='card-details'>
+                  <div className='card-details-item'>
+                    <b>{truncateText(contract.address, 20)}</b>
                   </div>
-                  <div className='card-details'>
-                    <div className='card-details-item'>
-                      <b>{truncateText(contract.address, 20)}</b>
-                    </div>
-                    <div className='card-details-item'>
-                      Party A: {truncateText(contract.partyA, 20)}
-                    </div>
-                    <div className='card-details-item'>
-                      Party B: {truncateText(contract.partyB, 20)}
-                    </div>
+                  <div className='card-details-item'>
+                    Party A: {truncateText(contract.partyA, 20)}
+                  </div>
+                  <div className='card-details-item'>
+                    Party B: {truncateText(contract.partyB, 20)}
                   </div>
                 </div>
-              </Link>
-            </div>
-          )
-        }
+              </div>
+            </Link>
+          </div>
+        ))}
       </div>
     )
   }
@@ -88,4 +86,6 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MetroCard))
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(MetroCard)
+)

src/Components/Icon/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import _ from 'lodash'
+
 import './Icon.css'
 
 class Icon extends Component {
@@ -9,7 +10,9 @@ class Icon extends Component {
   }
 
   componentDidMount = async () => {
-    let iconPicturePath = await import(`../../assets/icons/${this.props.name}.svg`)
+    let iconPicturePath = await import(`../../assets/icons/${
+      this.props.name
+    }.svg`)
 
     if (!_.isUndefined(iconPicturePath)) {
       this.setState({
@@ -21,7 +24,7 @@ class Icon extends Component {
 
   render () {
     if (this.state.isLoading) {
-      return (<div>Icon not found...</div>)
+      return <div>Icon not found...</div>
     }
 
     return (

src/Components/Input/index.js

@@ -9,16 +9,15 @@ const Input = ({
   placeholder,
   children,
   value,
-  meta = {touched: false, error: false},
+  meta = { touched: false, error: false },
   ...rest
 }) => {
   // FIXME hack. Can't specify both value and defaultValue
   if (input && !input.value) delete input.value
-
   return (
     <div className={`Input-container ${className}`}>
       {children}
-      { (() => {
+      {(() => {
         switch (type) {
           case 'textarea':
             return (
@@ -49,7 +48,7 @@ const Input = ({
                 {...input}
               />
             )
-          default :
+          default:
             return (
               <input
                 className={innerClassName}
@@ -60,11 +59,14 @@ const Input = ({
               />
             )
         }
-      })() }
-      {
-        meta.touched && meta.error &&
-          <span className='input_error'><br />{ meta.error }</span>
-      }
+      })()}
+      {meta.touched &&
+        meta.error && (
+          <span className='input_error'>
+            <br />
+            {meta.error}
+          </span>
+        )}
     </div>
   )
 }

src/Components/Layout/index.js

@@ -1,39 +1,22 @@
 import React from 'react'
+
 import Sidebar from '../Sidebar'
 import { APP_VIEWS } from '../../constants'
+
 import './Layout.css'
 
-const Layout = ({
-  className,
-  address,
-  view,
-  children
-}) => {
+const Layout = ({ className, address, view, children }) => {
   let items = []
   if (view === APP_VIEWS.JUROR) {
-    items = [
-      'disputes',
-      'jury',
-      'decisions',
-      'settings'
-    ]
+    items = ['disputes', 'jury', 'decisions', 'settings']
   } else if (view === APP_VIEWS.PARTY) {
-    items = [
-      'disputes',
-      'contracts',
-      'decisions',
-      'settings'
-    ]
+    items = ['disputes', 'contracts', 'decisions', 'settings']
   }
 
   return (
     <div className={`Layout-container ${className}`}>
-      <Sidebar
-        items={items}
-        address={address}
-        balancePNK={242}
-      />
-      { children }
+      <Sidebar items={items} address={address} balancePNK={242} />
+      {children}
     </div>
   )
 }

src/stories/index.js

@@ -5,9 +5,9 @@ import StoryRouter from 'storybook-router'
 import { Provider } from 'react-redux'
 import store from '../bootstrap/store'
 
+import Sidebar from '../Components/Sidebar'
 import ShortProfile from '../Components/Sidebar/ShortProfile'
 import MenuSidebar from '../Components/Sidebar/MenuSidebar'
-import Sidebar from '../Components/Sidebar'
 import ItemMenuSidebar from '../Components/Sidebar/MenuSidebar/ItemMenuSidebar'
 
 import Identicon from '../Components/Identicon'
@@ -18,6 +18,9 @@ import Input from '../Components/Input'
 import TruncatedTextBox from '../Components/TruncatedTextBox'
 import Grid from '../Components/ContractsTable/Grid'
 
+import Banner from '../Components/Banner'
+import MetroCard from '../Components/Home/MetroCard'
+
 import '../bootstrap/index.css'
 
 /** *************** Icon *****************/
@@ -146,3 +149,18 @@ storiesOf('Grid', module)
       <Icon name='Disputes' theme='dark' />
     </Grid>
   ))
+
+/** *************** Banner ****************/
+
+storiesOf('Banner', module)
+  .addDecorator(StoryRouter())
+  .add('default', () => <Banner title='Banner Title' linkTo='/example' />)
+
+/** *************** MetroCard ****************/
+
+storiesOf('MetroCard', module)
+  .addDecorator(StoryRouter())
+  .addDecorator(setStoryStore => (
+    <Provider store={store}>{setStoryStore()}</Provider>
+  ))
+  .add('default', () => <MetroCard />)