diff options
Diffstat (limited to 'ui/app/components/transaction-breakdown/transaction-breakdown-row')
4 files changed, 85 insertions, 0 deletions
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js new file mode 100644 index 000000000..557bf75fb --- /dev/null +++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.js @@ -0,0 +1 @@ +export { default } from './transaction-breakdown-row.component' diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss new file mode 100644 index 000000000..8c73be1a6 --- /dev/null +++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/index.scss @@ -0,0 +1,19 @@ +.transaction-breakdown-row { + font-size: .75rem; + color: $scorpion; + display: flex; + justify-content: space-between; + padding: 8px 0; + + &:not(:last-child) { + border-bottom: 1px solid #d8d8d8; + } + + &__title { + padding-right: 8px; + } + + &__value { + min-width: 0; + } +} diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js new file mode 100644 index 000000000..c19399dbb --- /dev/null +++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/tests/transaction-breakdown-row.component.test.js @@ -0,0 +1,39 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import TransactionBreakdownRow from '../transaction-breakdown-row.component' +import Button from '../../../button' + +describe('TransactionBreakdownRow Component', () => { + it('should render text properly', () => { + const wrapper = shallow( + <TransactionBreakdownRow + title="test" + className="test-class" + > + Test + </TransactionBreakdownRow>, + { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } + ) + + assert.ok(wrapper.hasClass('transaction-breakdown-row')) + assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test') + assert.equal(wrapper.find('.transaction-breakdown-row__value').text(), 'Test') + }) + + it('should render components properly', () => { + const wrapper = shallow( + <TransactionBreakdownRow + title="test" + className="test-class" + > + <Button onClick={() => {}} >Button</Button> + </TransactionBreakdownRow>, + { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } } + ) + + assert.ok(wrapper.hasClass('transaction-breakdown-row')) + assert.equal(wrapper.find('.transaction-breakdown-row__title').text(), 'test') + assert.ok(wrapper.find('.transaction-breakdown-row__value').find(Button)) + }) +}) diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js new file mode 100644 index 000000000..c11ff8efa --- /dev/null +++ b/ui/app/components/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.js @@ -0,0 +1,26 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' + +export default class TransactionBreakdownRow extends PureComponent { + static propTypes = { + title: PropTypes.string, + children: PropTypes.node, + className: PropTypes.string, + } + + render () { + const { title, children, className } = this.props + + return ( + <div className={classnames('transaction-breakdown-row', className)}> + <div className="transaction-breakdown-row__title"> + { title } + </div> + <div className="transaction-breakdown-row__value"> + { children } + </div> + </div> + ) + } +} |