From addbf4c62af0049a31c69aa488e5dad4915ecbc1 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Thu, 2 Apr 2020 14:43:50 -0300
Subject: [PATCH] Add footer to Popover (#8291)

There were two existing cases where a footer was added to a popover by
putting it in the popover contents. This has been refactored to place
the footer in the popover instead, so that styles common to all
popover footers could be shared.

The popover now has a `section` element instead, giving the `header`
and `footer` elements a correct section context.
---
 ui/app/components/ui/popover/index.scss       | 12 +++++
 .../ui/popover/popover.component.js           | 32 ++++++++---
 .../components/ui/popover/popover.stories.js  |  1 +
 .../connected-sites.component.js              | 54 +++++++++----------
 ui/app/pages/connected-sites/index.scss       | 17 ++----
 5 files changed, 66 insertions(+), 50 deletions(-)

diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss
index a552a6fe4..533ba938d 100644
--- a/ui/app/components/ui/popover/index.scss
+++ b/ui/app/components/ui/popover/index.scss
@@ -95,4 +95,16 @@
     align-items: center;
     z-index: 1050;
   }
+
+  &-footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    border-top: 1px solid #D2D8DD;
+    padding: 16px 24px 24px;
+
+    & :only-child {
+      margin: 0 auto;
+    }
+  }
 }
diff --git a/ui/app/components/ui/popover/popover.component.js b/ui/app/components/ui/popover/popover.component.js
index d04443173..a3d8aaf6c 100644
--- a/ui/app/components/ui/popover/popover.component.js
+++ b/ui/app/components/ui/popover/popover.component.js
@@ -1,14 +1,15 @@
 import React, { PureComponent, useContext } from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { I18nContext } from '../../../contexts/i18n'
 
-const Popover = ({ title, subtitle, children, onBack, onClose }) => {
+const Popover = ({ title, subtitle, children, footer, footerClassName, onBack, onClose }) => {
   const t = useContext(I18nContext)
   return (
     <div className="popover-container">
       <div className="popover-bg" onClick={onClose} />
-      <div className="popover-wrap">
+      <section className="popover-wrap">
         <header className="popover-header">
           <div className="popover-header__title">
             <h2 title={title}>
@@ -33,10 +34,25 @@ const Popover = ({ title, subtitle, children, onBack, onClose }) => {
           </div>
           <p className="popover-header__subtitle">{subtitle}</p>
         </header>
-        <div className="popover-content">
-          {children}
-        </div>
-      </div>
+        {
+          children
+            ? (
+              <div className="popover-content">
+                {children}
+              </div>
+            )
+            : null
+        }
+        {
+          footer
+            ? (
+              <footer className={classnames('popover-footer', footerClassName)}>
+                {footer}
+              </footer>
+            )
+            : null
+        }
+      </section>
     </div>
   )
 }
@@ -44,7 +60,9 @@ const Popover = ({ title, subtitle, children, onBack, onClose }) => {
 Popover.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  footer: PropTypes.node,
+  footerClassName: PropTypes.string,
   onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 }
diff --git a/ui/app/components/ui/popover/popover.stories.js b/ui/app/components/ui/popover/popover.stories.js
index 45e5da5cc..a7b0aef9b 100644
--- a/ui/app/components/ui/popover/popover.stories.js
+++ b/ui/app/components/ui/popover/popover.stories.js
@@ -24,6 +24,7 @@ export const approve = () => (
       title={text('title', 'Approve spend limit')}
       subtitle={text('subtitle', 'This is the new limit')}
       onClose={action('clicked')}
+      footer={<button>Example Footer</button>}
     >
       <main style={mainWrapperStyle}>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper eget duis at tellus at urna condimentum. Posuere urna nec tincidunt praesent semper. Arcu dictum varius duis at. A lacus vestibulum sed arcu. Orci porta non pulvinar neque laoreet suspendisse interdum. Pretium fusce id velit ut. Ut consequat semper viverra nam libero justo laoreet sit. In ante metus dictum at tempor commodo ullamcorper a lacus. Posuere morbi leo urna molestie at elementum eu facilisis sed. Libero enim sed faucibus turpis in eu mi bibendum neque. Amet massa vitae tortor condimentum lacinia quis. Pretium viverra suspendisse potenti nullam ac. Pellentesque elit eget gravida cum sociis natoque penatibus. Proin libero nunc consequat interdum varius sit amet. Est ultricies integer quis auctor elit sed vulputate. Ornare arcu odio ut sem nulla pharetra. Eget nullam non nisi est sit. Leo vel fringilla est ullamcorper eget nulla.</p>
diff --git a/ui/app/pages/connected-sites/connected-sites.component.js b/ui/app/pages/connected-sites/connected-sites.component.js
index 7dfb769b5..c019f9a4e 100644
--- a/ui/app/pages/connected-sites/connected-sites.component.js
+++ b/ui/app/pages/connected-sites/connected-sites.component.js
@@ -56,38 +56,15 @@ export default class ConnectSites extends Component {
   }
 
   renderConnectedSites () {
-    const { tabToConnect, legacyExposeAccount } = this.props
-    const { t } = this.context
     return (
-      <>
-        <ConnectedSitesList
-          onDisconnectSite={this.setSitePendingDisconnect}
-        />
-        { tabToConnect ? (
-          <footer className="connected-sites__add-site-manually">
-            <a onClick={legacyExposeAccount}>{ t('connectManually') }</a>
-          </footer>
-        ) : null }
-      </>
-    )
-  }
-
-  renderDisconnectConfirmation () {
-    const { t } = this.context
-    return (
-      <div className="connected-sites__confirmation">
-        <Button type="secondary" onClick={this.clearSitePendingDisconnect}>
-          { t('cancel') }
-        </Button>
-        <Button type="primary" onClick={this.disconnect}>
-          { t('disconnect') }
-        </Button>
-      </div>
+      <ConnectedSitesList
+        onDisconnectSite={this.setSitePendingDisconnect}
+      />
     )
   }
 
   render () {
-    const { accountLabel, history } = this.props
+    const { accountLabel, history, legacyExposeAccount, tabToConnect } = this.props
     const { t } = this.context
     const { sitePendingDisconnect } = this.state
     return (
@@ -97,15 +74,32 @@ export default class ConnectSites extends Component {
             title={t('disconnectSite', [sitePendingDisconnect.domainName])}
             subtitle={t('disconnectAccountConfirmationDescription')}
             onClose={() => history.push(DEFAULT_ROUTE)}
-          >
-            {this.renderDisconnectConfirmation()}
-          </Popover>
+            footer={(
+              <>
+                <Button type="secondary" onClick={this.clearSitePendingDisconnect}>
+                  { t('cancel') }
+                </Button>
+                <Button type="primary" onClick={this.disconnect}>
+                  { t('disconnect') }
+                </Button>
+              </>
+            )}
+            footerClassName="connected-sites__confirmation"
+          />
         )
         : (
           <Popover
             title={t('connectedSites')}
             subtitle={t('connectedSitesDescription', [accountLabel])}
             onClose={() => history.push(DEFAULT_ROUTE)}
+            footer={
+              tabToConnect
+                ? (
+                  <a onClick={legacyExposeAccount}>{ t('connectManually') }</a>
+                )
+                : null
+            }
+            footerClassName="connected-sites__add-site-manually"
           >
             {this.renderConnectedSites()}
           </Popover>
diff --git a/ui/app/pages/connected-sites/index.scss b/ui/app/pages/connected-sites/index.scss
index e99191b32..9c97fde2d 100644
--- a/ui/app/pages/connected-sites/index.scss
+++ b/ui/app/pages/connected-sites/index.scss
@@ -1,28 +1,19 @@
 .connected-sites {
   &__confirmation {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-top: 30px;
-    border-top: 1px solid #D2D8DD;
-    padding: 16px 24px 16px;
-
     button:first-child {
       margin-right: 24px;
     }
   }
 
   &__add-site-manually {
-    position: sticky;
-    bottom: 0;
-    background: white;
-    border-top: 1px solid #D2D8DD;
     margin-top: -1px;
-    padding: 16px 24px 24px 24px;
-    border-radius: 0 0 10px 10px;
     font-size: 14px;
     line-height: 20px;
 
+    & :only-child {
+      margin: 0;
+    }
+
     a, a:hover {
       cursor: pointer;
       color: #037DD6;