diff options
Diffstat (limited to 'ui/app/components/modal')
-rw-r--r-- | ui/app/components/modal/index.js | 2 | ||||
-rw-r--r-- | ui/app/components/modal/index.scss | 62 | ||||
-rw-r--r-- | ui/app/components/modal/modal-content/index.js | 1 | ||||
-rw-r--r-- | ui/app/components/modal/modal-content/index.scss | 19 | ||||
-rw-r--r-- | ui/app/components/modal/modal-content/modal-content.component.js | 32 | ||||
-rw-r--r-- | ui/app/components/modal/modal-content/tests/modal-content.component.test.js | 44 | ||||
-rw-r--r-- | ui/app/components/modal/modal.component.js | 83 | ||||
-rw-r--r-- | ui/app/components/modal/tests/modal.component.test.js | 133 |
8 files changed, 0 insertions, 376 deletions
diff --git a/ui/app/components/modal/index.js b/ui/app/components/modal/index.js deleted file mode 100644 index 58309abbe..000000000 --- a/ui/app/components/modal/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './modal.component' -export { default as ModalContent } from './modal-content' diff --git a/ui/app/components/modal/index.scss b/ui/app/components/modal/index.scss deleted file mode 100644 index 2beb14633..000000000 --- a/ui/app/components/modal/index.scss +++ /dev/null @@ -1,62 +0,0 @@ -@import './modal-content/index'; - -.modal-container { - width: 100%; - height: 100%; - background-color: #fff; - display: flex; - flex-flow: column; - border-radius: 8px; - - @media screen and (max-width: 575px) { - max-height: 450px; - } - - &__content { - overflow-y: auto; - flex: 1; - padding: 16px 32px; - - @media screen and (max-width: 575px) { - justify-content: center; - padding: 28px 20px; - } - } - - &__header { - position: relative; - display: flex; - padding: 12px; - justify-content: center; - border-bottom: 1px solid #d2d8dd; - flex: 0 0 auto; - } - - &__header-close::after { - content: '\00D7'; - font-size: 40px; - color: $dusty-gray; - position: absolute; - top: -5px; - right: 10px; - cursor: pointer; - } - - &__footer { - display: flex; - flex-flow: row; - justify-content: center; - border-top: 1px solid #d2d8dd; - padding: 16px; - flex: 0 0 auto; - - &-button { - min-width: 0; - margin-right: 16px; - - &:last-of-type { - margin-right: 0; - } - } - } -} diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js deleted file mode 100644 index 733cfb3b8..000000000 --- a/ui/app/components/modal/modal-content/index.js +++ /dev/null @@ -1 +0,0 @@ -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 deleted file mode 100644 index 560505b84..000000000 --- a/ui/app/components/modal/modal-content/index.scss +++ /dev/null @@ -1,19 +0,0 @@ -.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 deleted file mode 100644 index ecec0ee5b..000000000 --- a/ui/app/components/modal/modal-content/modal-content.component.js +++ /dev/null @@ -1,32 +0,0 @@ -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 deleted file mode 100644 index 17af09f45..000000000 --- a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js +++ /dev/null @@ -1,44 +0,0 @@ -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') - }) -}) diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js deleted file mode 100644 index c73f8d903..000000000 --- a/ui/app/components/modal/modal.component.js +++ /dev/null @@ -1,83 +0,0 @@ -import React, { PureComponent } from 'react' -import PropTypes from 'prop-types' -import Button from '../button' - -export default class Modal extends PureComponent { - static propTypes = { - children: PropTypes.node, - // Header text - headerText: PropTypes.string, - onClose: PropTypes.func, - // Submit button (right button) - onSubmit: PropTypes.func, - submitType: PropTypes.string, - submitText: PropTypes.string, - submitDisabled: PropTypes.bool, - // Cancel button (left button) - onCancel: PropTypes.func, - cancelType: PropTypes.string, - cancelText: PropTypes.string, - } - - static defaultProps = { - submitType: 'primary', - cancelType: 'default', - } - - render () { - const { - children, - headerText, - onClose, - onSubmit, - submitType, - submitText, - submitDisabled, - onCancel, - cancelType, - cancelText, - } = this.props - - return ( - <div className="modal-container"> - { - headerText && ( - <div className="modal-container__header"> - <div className="modal-container__header-text"> - { headerText } - </div> - <div - className="modal-container__header-close" - onClick={onClose} - /> - </div> - ) - } - <div className="modal-container__content"> - { children } - </div> - <div className="modal-container__footer"> - { - onCancel && ( - <Button - type={cancelType} - onClick={onCancel} - className="modal-container__footer-button" - > - { cancelText } - </Button> - ) - } - <Button - type={submitType} - onClick={onSubmit} - disabled={submitDisabled} - className="modal-container__footer-button" - > - { submitText } - </Button> - </div> - </div> - ) - } -} diff --git a/ui/app/components/modal/tests/modal.component.test.js b/ui/app/components/modal/tests/modal.component.test.js deleted file mode 100644 index 2ced3f32d..000000000 --- a/ui/app/components/modal/tests/modal.component.test.js +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react' -import assert from 'assert' -import { mount, shallow } from 'enzyme' -import sinon from 'sinon' -import Modal from '../modal.component' -import Button from '../../button' - -describe('Modal Component', () => { - it('should render a modal with a submit button', () => { - const wrapper = shallow(<Modal />) - - assert.equal(wrapper.find('.modal-container').length, 1) - const buttons = wrapper.find(Button) - assert.equal(buttons.length, 1) - assert.equal(buttons.at(0).props().type, 'primary') - }) - - it('should render a modal with a cancel and a submit button', () => { - const handleCancel = sinon.spy() - const handleSubmit = sinon.spy() - const wrapper = shallow( - <Modal - onCancel={handleCancel} - cancelText="Cancel" - onSubmit={handleSubmit} - submitText="Submit" - /> - ) - - const buttons = wrapper.find(Button) - assert.equal(buttons.length, 2) - const cancelButton = buttons.at(0) - const submitButton = buttons.at(1) - - assert.equal(cancelButton.props().type, 'default') - assert.equal(cancelButton.props().children, 'Cancel') - assert.equal(handleCancel.callCount, 0) - cancelButton.simulate('click') - assert.equal(handleCancel.callCount, 1) - - assert.equal(submitButton.props().type, 'primary') - assert.equal(submitButton.props().children, 'Submit') - assert.equal(handleSubmit.callCount, 0) - submitButton.simulate('click') - assert.equal(handleSubmit.callCount, 1) - }) - - it('should render a modal with different button types', () => { - const wrapper = shallow( - <Modal - onCancel={() => {}} - cancelText="Cancel" - cancelType="secondary" - onSubmit={() => {}} - submitText="Submit" - submitType="confirm" - /> - ) - - const buttons = wrapper.find(Button) - assert.equal(buttons.length, 2) - assert.equal(buttons.at(0).props().type, 'secondary') - assert.equal(buttons.at(1).props().type, 'confirm') - }) - - it('should render a modal with children', () => { - const wrapper = shallow( - <Modal - onCancel={() => {}} - cancelText="Cancel" - onSubmit={() => {}} - submitText="Submit" - > - <div className="test-child" /> - </Modal> - ) - - assert.ok(wrapper.find('.test-class')) - }) - - it('should render a modal with a header', () => { - const handleCancel = sinon.spy() - const handleSubmit = sinon.spy() - const wrapper = shallow( - <Modal - onCancel={handleCancel} - cancelText="Cancel" - onSubmit={handleSubmit} - submitText="Submit" - headerText="My Header" - onClose={handleCancel} - /> - ) - - assert.ok(wrapper.find('.modal-container__header')) - assert.equal(wrapper.find('.modal-container__header-text').text(), 'My Header') - assert.equal(handleCancel.callCount, 0) - assert.equal(handleSubmit.callCount, 0) - wrapper.find('.modal-container__header-close').simulate('click') - assert.equal(handleCancel.callCount, 1) - assert.equal(handleSubmit.callCount, 0) - }) - - it('should disable the submit button if submitDisabled is true', () => { - const handleCancel = sinon.spy() - const handleSubmit = sinon.spy() - const wrapper = mount( - <Modal - onCancel={handleCancel} - cancelText="Cancel" - onSubmit={handleSubmit} - submitText="Submit" - submitDisabled={true} - headerText="My Header" - onClose={handleCancel} - /> - ) - - const buttons = wrapper.find(Button) - assert.equal(buttons.length, 2) - const cancelButton = buttons.at(0) - const submitButton = buttons.at(1) - - assert.equal(handleCancel.callCount, 0) - cancelButton.simulate('click') - assert.equal(handleCancel.callCount, 1) - - assert.equal(submitButton.props().disabled, true) - assert.equal(handleSubmit.callCount, 0) - submitButton.simulate('click') - assert.equal(handleSubmit.callCount, 0) - }) -}) |