diff options
Diffstat (limited to 'ui/app/components/page-container')
4 files changed, 216 insertions, 20 deletions
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index 14cdbacd3..6742e3082 100644 --- a/ui/app/components/page-container/index.scss +++ b/ui/app/components/page-container/index.scss @@ -43,16 +43,39 @@ &__footer { display: flex; - flex-flow: row; + flex-flow: column; justify-content: center; border-top: 1px solid $geyser; - padding: 16px; flex: 0 0 auto; .btn-default, .btn-confirm { font-size: 1rem; } + + header { + display: flex; + flex-flow: row; + justify-content: center; + padding: 16px; + flex: 0 0 auto; + } + + footer { + display: flex; + flex-flow: row; + justify-content: space-around; + padding: 0 16px 16px; + flex: 0 0 auto; + + a, a:hover { + text-decoration: none; + cursor: pointer; + font-size: 0.75rem; + text-transform: uppercase; + color: #2f9ae0; + } + } } &__footer-button { @@ -182,5 +205,7 @@ max-height: 82vh; min-height: 570px; flex: 0 0 auto; + margin-right: auto; + margin-left: auto; } } diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js index 3d15df294..773fe1f56 100644 --- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js +++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js @@ -5,6 +5,7 @@ import Button from '../../button' export default class PageContainerFooter extends Component { static propTypes = { + children: PropTypes.node, onCancel: PropTypes.func, cancelText: PropTypes.string, onSubmit: PropTypes.func, @@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component { render () { const { + children, onCancel, cancelText, onSubmit, @@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component { return ( <div className="page-container__footer"> - <Button - type="default" - large - className="page-container__footer-button" - onClick={e => onCancel(e)} - > - { cancelText || this.context.t('cancel') } - </Button> - - <Button - type={submitButtonType || 'primary'} - large - className="page-container__footer-button" - disabled={disabled} - onClick={e => onSubmit(e)} - > - { submitText || this.context.t('next') } - </Button> + <header> + <Button + type="default" + large + className="page-container__footer-button" + onClick={e => onCancel(e)} + > + { cancelText || this.context.t('cancel') } + </Button> + + <Button + type={submitButtonType || 'primary'} + large + className="page-container__footer-button" + disabled={disabled} + onClick={e => onSubmit(e)} + > + { submitText || this.context.t('next') } + </Button> + </header> + + {children && ( + <footer> + {children} + </footer> + )} </div> ) diff --git a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js index e69de29bb..64efabab0 100644 --- a/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js +++ b/ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js @@ -0,0 +1,79 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import Button from '../../../button' +import PageFooter from '../page-container-footer.component' + +describe('Page Footer', () => { + let wrapper + const onCancel = sinon.spy() + const onSubmit = sinon.spy() + + beforeEach(() => { + wrapper = shallow(<PageFooter + onCancel = {onCancel} + onSubmit = {onSubmit} + cancelText = {'Cancel'} + submitText = {'Submit'} + disabled = {false} + submitButtonType = {'Test Type'} + />) + }) + + it('renders page container footer', () => { + assert.equal(wrapper.find('.page-container__footer').length, 1) + }) + + it('should render a footer inside page-container__footer when given children', () => { + const wrapper = shallow( + <PageFooter> + <div>Works</div> + </PageFooter>, + { context: { t: sinon.spy((k) => `[${k}]`) } } + ) + + assert.equal(wrapper.find('.page-container__footer footer').length, 1) + }) + + it('renders two button components', () => { + assert.equal(wrapper.find(Button).length, 2) + }) + + describe('Cancel Button', () => { + + it('has button type of default', () => { + assert.equal(wrapper.find('.page-container__footer-button').first().prop('type'), 'default') + }) + + it('has children text of Cancel', () => { + assert.equal(wrapper.find('.page-container__footer-button').first().prop('children'), 'Cancel') + }) + + it('should call cancel when click is simulated', () => { + wrapper.find('.page-container__footer-button').first().prop('onClick')() + assert.equal(onCancel.callCount, 1) + }) + + }) + + describe('Submit Button', () => { + + it('assigns button type based on props', () => { + assert.equal(wrapper.find('.page-container__footer-button').last().prop('type'), 'Test Type') + }) + + it('has disabled prop', () => { + assert.equal(wrapper.find('.page-container__footer-button').last().prop('disabled'), false) + }) + + it('has children text when submitText prop exists', () => { + assert.equal(wrapper.find('.page-container__footer-button').last().prop('children'), 'Submit') + }) + + it('should call submit when click is simulated', () => { + wrapper.find('.page-container__footer-button').last().prop('onClick')() + assert.equal(onSubmit.callCount, 1) + }) + }) +}) diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js index e69de29bb..59304b2bd 100644 --- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js +++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js @@ -0,0 +1,82 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import sinon from 'sinon' +import PageContainerHeader from '../page-container-header.component' + +describe('Page Container Header', () => { + let wrapper, style, onBackButtonClick, onClose + + beforeEach(() => { + style = {test: 'style'} + onBackButtonClick = sinon.spy() + onClose = sinon.spy() + + wrapper = shallow(<PageContainerHeader + showBackButton = {true} + onBackButtonClick = {onBackButtonClick} + backButtonStyles = {style} + title = {'Test Title'} + subtitle = {'Test Subtitle'} + tabs = {'Test Tab'} + onClose = {onClose} + />) + }) + + describe('Render Header Row', () => { + + it('renders back button', () => { + assert.equal(wrapper.find('.page-container__back-button').length, 1) + assert.equal(wrapper.find('.page-container__back-button').text(), 'Back') + }) + + it('ensures style prop', () => { + assert.equal(wrapper.find('.page-container__back-button').props().style, style) + }) + + it('should call back button when click is simulated', () => { + wrapper.find('.page-container__back-button').prop('onClick')() + assert.equal(onBackButtonClick.callCount, 1) + }) + }) + + describe('Render', () => { + let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab + + beforeEach(() => { + header = wrapper.find('.page-container__header--no-padding-bottom') + headerRow = wrapper.find('.page-container__header-row') + pageTitle = wrapper.find('.page-container__title') + pageSubtitle = wrapper.find('.page-container__subtitle') + pageClose = wrapper.find('.page-container__header-close') + pageTab = wrapper.find('.page-container__tabs') + }) + + it('renders page container', () => { + assert.equal(header.length, 1) + assert.equal(headerRow.length, 1) + assert.equal(pageTitle.length, 1) + assert.equal(pageSubtitle.length, 1) + assert.equal(pageClose.length, 1) + assert.equal(pageTab.length, 1) + }) + + it('renders title', () => { + assert.equal(pageTitle.text(), 'Test Title') + }) + + it('renders subtitle', () => { + assert.equal(pageSubtitle.text(), 'Test Subtitle') + }) + + it('renders tabs', () => { + assert.equal(pageTab.text(), 'Test Tab') + }) + + it('should call close when click is simulated', () => { + pageClose.prop('onClick')() + assert.equal(onClose.callCount, 1) + }) + }) + +}) |