diff options
Diffstat (limited to 'ui/app/components/page-container')
3 files changed, 64 insertions, 21 deletions
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss index 61434cbcf..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 { 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 5e5dbf00b..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 @@ -25,6 +25,17 @@ describe('Page 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) }) @@ -65,5 +76,4 @@ describe('Page Footer', () => { assert.equal(onSubmit.callCount, 1) }) }) - }) |