diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-09-28 14:45:16 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-09-28 14:45:16 +0800 |
commit | 59ab595b5ea6a4e24f2048d2ed43c1181bb5aa3e (patch) | |
tree | 36a9c0701cd80942c48e97cab0c4190d134980c8 /ui/app/components/card | |
parent | cb0af67f743d242afa3bdb518847f77d3c2cc260 (diff) | |
parent | bd489d358383b7556af323db78f30013459febf6 (diff) | |
download | tangerine-wallet-browser-59ab595b5ea6a4e24f2048d2ed43c1181bb5aa3e.tar.gz tangerine-wallet-browser-59ab595b5ea6a4e24f2048d2ed43c1181bb5aa3e.tar.zst tangerine-wallet-browser-59ab595b5ea6a4e24f2048d2ed43c1181bb5aa3e.zip |
Merge branch 'develop' into account-tracker-network-change
Diffstat (limited to 'ui/app/components/card')
-rw-r--r-- | ui/app/components/card/card.component.js | 25 | ||||
-rw-r--r-- | ui/app/components/card/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/card/index.scss | 11 | ||||
-rw-r--r-- | ui/app/components/card/tests/card.component.test.js | 25 |
4 files changed, 62 insertions, 0 deletions
diff --git a/ui/app/components/card/card.component.js b/ui/app/components/card/card.component.js new file mode 100644 index 000000000..bb7241da1 --- /dev/null +++ b/ui/app/components/card/card.component.js @@ -0,0 +1,25 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' + +export default class Card extends PureComponent { + static propTypes = { + className: PropTypes.string, + overrideClassName: PropTypes.bool, + title: PropTypes.string, + children: PropTypes.node, + } + + render () { + const { className, overrideClassName, title } = this.props + + return ( + <div className={classnames({ 'card': !overrideClassName }, className)}> + <div className="card__title"> + { title } + </div> + { this.props.children } + </div> + ) + } +} diff --git a/ui/app/components/card/index.js b/ui/app/components/card/index.js new file mode 100644 index 000000000..c3ca6e3f4 --- /dev/null +++ b/ui/app/components/card/index.js @@ -0,0 +1 @@ +export { default } from './card.component' diff --git a/ui/app/components/card/index.scss b/ui/app/components/card/index.scss new file mode 100644 index 000000000..bde54a15e --- /dev/null +++ b/ui/app/components/card/index.scss @@ -0,0 +1,11 @@ +.card { + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + padding: 8px; + + &__title { + border-bottom: 1px solid #d8d8d8; + padding-bottom: 4px; + text-transform: capitalize; + } +} diff --git a/ui/app/components/card/tests/card.component.test.js b/ui/app/components/card/tests/card.component.test.js new file mode 100644 index 000000000..cea05033f --- /dev/null +++ b/ui/app/components/card/tests/card.component.test.js @@ -0,0 +1,25 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import Card from '../card.component' + +describe('Card Component', () => { + it('should render a card with a title and child element', () => { + const wrapper = shallow( + <Card + title="Test" + className="card-test-class" + > + <div className="child-test-class">Child</div> + </Card> + ) + + assert.ok(wrapper.hasClass('card-test-class')) + const title = wrapper.find('.card__title') + assert.ok(title) + assert.equal(title.text(), 'Test') + const child = wrapper.find('.child-test-class') + assert.ok(child) + assert.equal(child.text(), 'Child') + }) +}) |