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:
parent
23aabcca6f
commit
2e5a09e28c
@ -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;
|
||||
|
@ -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>
|
||||
)
|
||||
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user