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

Have PageContainerFooter take children node

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/app/components/page-container/index.scss
View File

@ -43,10 +43,9 @@
&__footer { &__footer {
display: flex; display: flex;
flex-flow: row; flex-flow: column;
justify-content: center; justify-content: center;
border-top: 1px solid $geyser; border-top: 1px solid $geyser;
padding: 16px;
flex: 0 0 auto; flex: 0 0 auto;
.btn-default, .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 { &__footer-button {
height: 55px; height: 55px;
font-size: 1rem; font-size: 1rem;

44
ui/app/components/page-container/page-container-footer/page-container-footer.component.js
View File

@ -5,6 +5,7 @@ import Button from '../../button'
export default class PageContainerFooter extends Component { export default class PageContainerFooter extends Component {
static propTypes = { static propTypes = {
children: PropTypes.node,
onCancel: PropTypes.func, onCancel: PropTypes.func,
cancelText: PropTypes.string, cancelText: PropTypes.string,
onSubmit: PropTypes.func, onSubmit: PropTypes.func,
@ -19,6 +20,7 @@ export default class PageContainerFooter extends Component {
render () { render () {
const { const {
children,
onCancel, onCancel,
cancelText, cancelText,
onSubmit, onSubmit,
@ -30,24 +32,32 @@ export default class PageContainerFooter extends Component {
return ( return (
<div className="page-container__footer"> <div className="page-container__footer">
<Button <div className="page-container__footer-header">
type="default" <Button
large type="default"
className="page-container__footer-button" large
onClick={e => onCancel(e)} className="page-container__footer-button"
> onClick={e => onCancel(e)}
{ cancelText || this.context.t('cancel') } >
</Button> { cancelText || this.context.t('cancel') }
</Button>
<Button <Button
type={submitButtonType || 'primary'} type={submitButtonType || 'primary'}
large large
className="page-container__footer-button" className="page-container__footer-button"
disabled={disabled} disabled={disabled}
onClick={e => onSubmit(e)} onClick={e => onSubmit(e)}
> >
{ submitText || this.context.t('next') } { submitText || this.context.t('next') }
</Button> </Button>
</div>
{children && (
<div className="page-container__footer-footer">
{children}
</div>
)}
</div> </div>
) )

12
ui/app/components/page-container/page-container-footer/tests/page-container-footer.component.test.js
View File

@ -25,6 +25,17 @@ describe('Page Footer', () => {
assert.equal(wrapper.find('.page-container__footer').length, 1) 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', () => { it('renders two button components', () => {
assert.equal(wrapper.find(Button).length, 2) assert.equal(wrapper.find(Button).length, 2)
}) })
@ -65,5 +76,4 @@ describe('Page Footer', () => {
assert.equal(onSubmit.callCount, 1) assert.equal(onSubmit.callCount, 1)
}) })
}) })
}) })