diff options
Diffstat (limited to 'ui/app/components/page-container/page-container-footer')
2 files changed, 39 insertions, 19 deletions
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..5e99d2a26 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> + <div className="page-container__footer-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> + </div> + + {children && ( + <div className="page-container__footer-footer"> + {children} + </div> + )} </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 5e5dbf00b..75ee09fba 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 @@ -25,6 +25,17 @@ describe('Page Footer', () => { assert.equal(wrapper.find('.page-container__footer').length, 1) }) + it('should render a page-container__footer-footer class 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) }) @@ -65,5 +76,4 @@ describe('Page Footer', () => { assert.equal(onSubmit.callCount, 1) }) }) - }) |