Create ActionBar React component - Closes #541

src/components/actionBar/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from 'react-toolbox/lib/button';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+
+const ActionBar = props => (
+  <section style={{ margin: '0' }}
+    className={`${grid.row} ${grid['between-xs']}`} >
+    <Button label={props.secondaryButton.label || 'Cancel'}
+      className={props.secondaryButton.className || 'cancel-button'}
+      onClick={props.secondaryButton.onClick} />
+    <Button primary={true} raised={true}
+      label={props.primaryButton.label}
+      className={props.primaryButton.className || 'submit-button'}
+      disabled={props.primaryButton.disabled}
+      onClick={props.primaryButton.onClick}/>
+  </section>
+);
+
+export default ActionBar;

src/components/actionBar/index.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import { mount } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import ActionBar from './';
+import * as accountApi from '../../utils/api/account';
+
+
+chai.use(sinonChai);
+chai.use(chaiEnzyme());
+
+describe('ActionBar', () => {
+  let wrapper;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      secondaryButton: {
+        label: 'Test cancel',
+        onClick: sinon.spy(),
+      },
+      primaryButton: {
+        label: 'Test confirm',
+        disabled: false,
+        onClick: sinon.spy(),
+      },
+    };
+    wrapper = mount(<ActionBar {...props} />);
+  });
+
+  it('renders two Button components', () => {
+    expect(wrapper.find('Button')).to.have.length(2);
+  });
+
+  it('binds props.secondaryButton.label to first button label', () => {
+    expect(wrapper.find('Button').at(0).props().label).to.equal(props.secondaryButton.label);
+  });
+
+  it('binds props.primaryButton.label to second button label', () => {
+    expect(wrapper.find('Button').at(1).props().label).to.equal(props.primaryButton.label);
+  });
+
+  it('binds props.primaryButton.disabled to second button disabled', () => {
+    expect(wrapper.find('Button').at(1).props().disabled).to.equal(props.primaryButton.disabled);
+  });
+
+  it('binds props.secondaryButton.onClick to first button onClick', () => {
+    wrapper.find('Button').at(0).simulate('click');
+    expect(props.secondaryButton.onClick).to.have.been.calledWith();
+  });
+
+  it('binds props.primaryButton.onClick to second button onClick', () => {
+    wrapper.find('Button').at(1).simulate('click');
+    expect(props.primaryButton.onClick).to.have.been.calledWith();
+  });
+});

src/components/passphrase/passphrase.css

@@ -29,9 +29,3 @@ hr {
 :global .box {
     box-shadow: none !important;
 }
-.cancel {
-    margin-left: 8px;
-}
-.approve {
-    margin-right: 8px;
-}

src/components/passphrase/passphrase.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import Button from 'react-toolbox/lib/button';
 import Input from 'react-toolbox/lib/input';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './passphrase.css';
 import InfoParagraph from '../infoParagraph';
 import PassphraseGenerator from './passphraseGenerator';
 import PassphraseConfirmator from './passphraseConfirmator';
+import ActionBar from '../actionBar';
 import steps from './steps';
 
 class Passphrase extends React.Component {
@@ -60,18 +60,18 @@ class Passphrase extends React.Component {
             </div>
           </div>
         </section>
-        <section className={`${grid.row} ${grid['between-xs']}`}>
-          <Button label={this.state.steps[this.state.currentStep].cancelButton.title}
-            className={`${styles.cancel} cancel-button`}
-            onClick={this.state.steps[this.state.currentStep].cancelButton.onClick.bind(this)} />
-
-          <Button label={this.state.steps[this.state.currentStep].confirmButton.title}
-            primary={true} raised={true}
-            className={`${styles.approve} next-button`}
-            disabled={(this.state.currentStep === 'generate' && !this.state.passphrase) ||
-              (this.state.currentStep === 'confirm' && !this.state.answer)}
-            onClick={this.state.steps[this.state.currentStep].confirmButton.onClick.bind(this)}/>
-        </section>
+        <ActionBar
+          secondaryButton={{
+            label: this.state.steps[this.state.currentStep].cancelButton.title,
+            onClick: this.state.steps[this.state.currentStep].cancelButton.onClick.bind(this),
+          }}
+          primaryButton={{
+            label: this.state.steps[this.state.currentStep].confirmButton.title,
+            className: 'next-button',
+            disabled: (this.state.currentStep === 'generate' && !this.state.passphrase) ||
+              (this.state.currentStep === 'confirm' && !this.state.answer),
+            onClick: this.state.steps[this.state.currentStep].confirmButton.onClick.bind(this),
+          }} />
       </div>
     );
   }

src/components/send/send.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Input from 'react-toolbox/lib/input';
-import Button from 'react-toolbox/lib/button';
 import { IconMenu, MenuItem } from 'react-toolbox/lib/menu';
-import grid from 'flexboxgrid/dist/flexboxgrid.css';
 
 import { send } from '../../utils/api/account';
 import { fromRawLsk, toRawLsk } from '../../utils/lsk';
+import ActionBar from '../actionBar';
 
 import styles from './send.css';
 
@@ -114,15 +113,19 @@ class Send extends React.Component {
             caption='Set maximum amount'
             className='send-maximum-amount'/>
         </IconMenu>
-        <section className={`${grid.row} ${grid['between-xs']}`}>
-          <Button label='Cancel' className='cancel-button' onClick={this.props.closeDialog} />
-          <Button label='Send'
-            className='submit-button'
-            primary={true} raised={true}
-            disabled={!!this.state.recipient.error || !!this.state.amount.error ||
-              !this.state.recipient.value || !this.state.amount.value}
-            onClick={this.send.bind(this)}/>
-        </section>
+        <ActionBar
+          secondaryButton={{
+            onClick: this.props.closeDialog,
+          }}
+          primaryButton={{
+            label: 'Send',
+            disabled: (
+              !!this.state.recipient.error ||
+              !!this.state.amount.error ||
+              !this.state.recipient.value ||
+              !this.state.amount.value),
+            onClick: this.send.bind(this),
+          }} />
       </div>
     );
   }

src/components/signVerify/signMessageComponent.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Input from 'react-toolbox/lib/input';
-import Button from 'react-toolbox/lib/button';
 import Lisk from 'lisk-js';
-import grid from 'flexboxgrid/dist/flexboxgrid.css';
 
 import InfoParagraph from '../infoParagraph';
 import SignVerifyResult from './signVerifyResult';
+import ActionBar from '../actionBar';
 
 
 class SignMessageComponent extends React.Component {
@@ -56,14 +55,16 @@ class SignMessageComponent extends React.Component {
           </section>
           {this.state.resultIsShown ?
             <SignVerifyResult result={this.state.result} title='Result' /> :
-            <section className={`${grid.row} ${grid['between-xs']}`}>
-              <Button label='Cancel' className='cancel-button' onClick={this.props.closeDialog} />
-              <Button label='Sign and copy result to clipboard'
-                className='sign-button'
-                primary={true} raised={true}
-                disabled={!this.state.result || this.state.resultIsShown}
-                onClick={this.showResult.bind(this)}/>
-          </section>
+            <ActionBar
+              secondaryButton={{
+                onClick: this.props.closeDialog,
+              }}
+              primaryButton={{
+                label: 'Sign and copy result to clipboard',
+                className: 'sign-button',
+                disabled: !this.state.result || this.state.resultIsShown,
+                onClick: this.showResult.bind(this),
+              }} />
           }
       </div>
     );