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

@@ -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;
+    }
+  }
 }

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}
+          children
-        </div>
+            ? (
-      </div>
+              <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,
 }

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>

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
-        <ConnectedSitesList
+        onDisconnectSite={this.setSitePendingDisconnect}
-          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>
     )
   }
 
   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)}
-          >
+            footer={(
-            {this.renderDisconnectConfirmation()}
+              <>
-          </Popover>
+                <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>

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;