-
Notifications
You must be signed in to change notification settings - Fork 60
Create priced button component - Closes #583 #585
Changes from 3 commits
9140892
7678e16
90bfb50
2fd1c3d
49f2878
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import Button from 'react-toolbox/lib/button'; | ||
import { fromRawLsk } from '../../utils/lsk'; | ||
import styles from './pricedButton.css'; | ||
|
||
const PricedButton = ({ | ||
balance, fee, label, customClassName, onClick, disabled, | ||
}) => { | ||
const hasFunds = balance >= fee; | ||
return ( | ||
<div className='primary-button'> | ||
{ | ||
fee && | ||
(<span className={`${styles.fee} ${hasFunds ? '' : styles.error}`}> | ||
{ | ||
hasFunds ? `Fee: ${fromRawLsk(fee)} LSK` : | ||
`Insufficient funds for ${fromRawLsk(fee)} LSK fee` | ||
} | ||
</span>) | ||
} | ||
<Button | ||
label={label} | ||
primary={true} | ||
raised={true} | ||
className={`next-button ${customClassName}`} | ||
disabled={disabled || (fee && !hasFunds)} | ||
onClick={onClick.bind(this)} /> | ||
</div> | ||
); | ||
}; | ||
|
||
export default PricedButton; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react'; | ||
import chai, { expect } from 'chai'; | ||
import sinonChai from 'sinon-chai'; | ||
import sinon from 'sinon'; | ||
import { shallow } from 'enzyme'; | ||
import chaiEnzyme from 'chai-enzyme'; | ||
import Button from 'react-toolbox/lib/button'; | ||
import PricedButton from './index'; | ||
|
||
chai.use(sinonChai); | ||
chai.use(chaiEnzyme()); | ||
|
||
describe('DialogElement', () => { | ||
let wrapper; | ||
const props = { | ||
fee: 5e8, | ||
onClick: sinon.spy(), | ||
}; | ||
const insufficientBalance = 4.9999e8; | ||
const sufficientBalance = 6e8; | ||
|
||
it('renders <Button /> component from react-toolbox', () => { | ||
wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />); | ||
expect(wrapper.find(Button)).to.have.length(1); | ||
}); | ||
|
||
describe('Sufficient funds', () => { | ||
beforeEach(() => { | ||
wrapper = shallow(<PricedButton {...props} balance={sufficientBalance} />); | ||
}); | ||
|
||
it('renders a span saying "Fee: 5 LSK"', () => { | ||
expect(wrapper.find('span').text()).to.be.equal('Fee: 5 LSK'); | ||
}); | ||
|
||
it('allows to click on Button', () => { | ||
wrapper.find(Button).simulate('click'); | ||
expect(props.onClick).to.have.been.calledWith(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Prefer There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This component is not supposed to pass anything to it's click handler. what's the difference? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This component is not passing anything. this is about the difference of calling with different arguments. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. replaced with |
||
}); | ||
}); | ||
|
||
describe('Insufficient funds', () => { | ||
beforeEach(() => { | ||
wrapper = shallow(<PricedButton {...props} balance={insufficientBalance} />); | ||
}); | ||
|
||
it('renders a span saying "Insufficient funds for 5 LSK fee"', () => { | ||
expect(wrapper.find('span').text()).to.be.equal('Insufficient funds for 5 LSK fee'); | ||
}); | ||
|
||
it('sets the disabled attribute of the button', () => { | ||
const buttonProps = wrapper.find(Button).props(); | ||
expect(buttonProps.disabled).to.be.equal(true); | ||
}); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
.fee { | ||
font-size: 12px; | ||
line-height: 14px; | ||
color: grey; | ||
text-align: right; | ||
margin: 0 16px; | ||
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Space between selectors. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
|
||
.error { | ||
color: #dd2c00 !important; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is there a way to avoid the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need. Preferred is that states override modules. https://smacss.com/ |
||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export default { | ||
setSecondPassphrase: 5e8, | ||
send: 1e7, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Prefer There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
registerDelegate: 25e8, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. added |
||
vote: 1e8, | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you guys do this in every file?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#589