1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Have PageContainerFooter take children node

This commit is contained in:
Whymarrh Whitby 2018-09-24 00:47:54 -02:30
parent 23aabcca6f
commit 2e5a09e28c
3 changed files with 63 additions and 20 deletions

View File

@ -43,10 +43,9 @@
&__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,
@ -55,6 +54,30 @@
}
}
&__footer-header {
display: flex;
flex-flow: row;
justify-content: center;
padding: 16px;
flex: 0 0 auto;
}
&__footer-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 {
height: 55px;
font-size: 1rem;

View File

@ -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>
<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>
<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>
)

View File

@ -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)
})
})
})