From 5611d32653dde46da6ffa1768fadbef1e16152a5 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 21 Oct 2019 02:05:35 +0200
Subject: [PATCH] Allow extra elements to be injected into Overlay header

---
 client/modules/App/components/Overlay.jsx | 14 ++++++++++----
 client/styles/components/_overlay.scss    |  6 +++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/modules/App/components/Overlay.jsx b/client/modules/App/components/Overlay.jsx
index 3a70242d..58587a5c 100644
--- a/client/modules/App/components/Overlay.jsx
+++ b/client/modules/App/components/Overlay.jsx
@@ -64,7 +64,8 @@ class Overlay extends React.Component {
     const {
       ariaLabel,
       title,
-      children
+      children,
+      actions,
     } = this.props;
     return (
       <div className="overlay">
@@ -77,9 +78,12 @@ class Overlay extends React.Component {
           >
             <header className="overlay__header">
               <h2 className="overlay__title">{title}</h2>
-              <button className="overlay__close-button" onClick={this.close} >
-                <InlineSVG src={exitUrl} alt="close overlay" />
-              </button>
+              <div className="overlay__actions">
+                {actions}
+                <button className="overlay__close-button" onClick={this.close} >
+                  <InlineSVG src={exitUrl} alt="close overlay" />
+                </button>
+              </div>
             </header>
             {children}
           </section>
@@ -91,6 +95,7 @@ class Overlay extends React.Component {
 
 Overlay.propTypes = {
   children: PropTypes.element,
+  actions: PropTypes.element,
   closeOverlay: PropTypes.func,
   title: PropTypes.string,
   ariaLabel: PropTypes.string,
@@ -99,6 +104,7 @@ Overlay.propTypes = {
 
 Overlay.defaultProps = {
   children: null,
+  actions: null,
   title: 'Modal',
   closeOverlay: null,
   ariaLabel: 'modal',
diff --git a/client/styles/components/_overlay.scss b/client/styles/components/_overlay.scss
index 58602f5b..c8eafd1b 100644
--- a/client/styles/components/_overlay.scss
+++ b/client/styles/components/_overlay.scss
@@ -34,11 +34,15 @@
   flex: 1 0 auto;
 }
 
+.overlay__actions {
+  display: flex;
+}
+
 .overlay__title {
   font-size: #{21 / $base-font-size}rem;
 }
 
 .overlay__close-button {
   @include icon();
-  padding: #{3 / $base-font-size}rem 0;
+  padding: #{3 / $base-font-size}rem 0 #{3 / $base-font-size}rem #{10 / $base-font-size}rem;
 }