Have PageContainerFooter take children node

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..b7bf1b8b5 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -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;
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)
     })
   })
-
 })