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/modal/modal-content | |
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/modal/modal-content')
4 files changed, 96 insertions, 0 deletions
diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js new file mode 100644 index 000000000..733cfb3b8 --- /dev/null +++ b/ui/app/components/modal/modal-content/index.js @@ -0,0 +1 @@ +export { default } from './modal-content.component' diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss new file mode 100644 index 000000000..560505b84 --- /dev/null +++ b/ui/app/components/modal/modal-content/index.scss @@ -0,0 +1,19 @@ +.modal-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + padding: 16px 0; + + &__title { + font-size: 1.5rem; + font-weight: 500; + padding: 16px 0; + text-align: center; + } + + &__description { + text-align: center; + font-size: .875rem; + } +} diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js new file mode 100644 index 000000000..ecec0ee5b --- /dev/null +++ b/ui/app/components/modal/modal-content/modal-content.component.js @@ -0,0 +1,32 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' + +export default class ModalContent extends PureComponent { + static propTypes = { + title: PropTypes.string, + description: PropTypes.string, + } + + render () { + const { title, description } = this.props + + return ( + <div className="modal-content"> + { + title && ( + <div className="modal-content__title"> + { title } + </div> + ) + } + { + description && ( + <div className="modal-content__description"> + { description } + </div> + ) + } + </div> + ) + } +} diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js new file mode 100644 index 000000000..17af09f45 --- /dev/null +++ b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js @@ -0,0 +1,44 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import ModalContent from '../modal-content.component' + +describe('ModalContent Component', () => { + it('should render a title', () => { + const wrapper = shallow( + <ModalContent + title="Modal Title" + /> + ) + + assert.equal(wrapper.find('.modal-content__title').length, 1) + assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title') + assert.equal(wrapper.find('.modal-content__description').length, 0) + }) + + it('should render a description', () => { + const wrapper = shallow( + <ModalContent + description="Modal Description" + /> + ) + + assert.equal(wrapper.find('.modal-content__title').length, 0) + assert.equal(wrapper.find('.modal-content__description').length, 1) + assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description') + }) + + it('should render both a title and a description', () => { + const wrapper = shallow( + <ModalContent + title="Modal Title" + description="Modal Description" + /> + ) + + assert.equal(wrapper.find('.modal-content__title').length, 1) + assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title') + assert.equal(wrapper.find('.modal-content__description').length, 1) + assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description') + }) +}) |