From 0d60b64c392b4aca469210e491084bf477497551 Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Fri, 20 Sep 2019 14:40:49 -0400
Subject: [PATCH 1/2] Add a prop to Modal that allows you to hide the close
 button. Set it to show by default and have the standalone join flow page set
 it to hidden.

---
 src/components/modal/base/modal.jsx | 29 ++++++++++++++----------
 src/components/modal/join/modal.jsx |  4 +++-
 src/views/join/join.jsx             |  2 ++
 test/unit/components/modal.test.jsx | 34 +++++++++++++++++++++++++++++
 4 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 test/unit/components/modal.test.jsx

diff --git a/src/components/modal/base/modal.jsx b/src/components/modal/base/modal.jsx
index 7353b9080..0203a0f41 100644
--- a/src/components/modal/base/modal.jsx
+++ b/src/components/modal/base/modal.jsx
@@ -49,17 +49,20 @@ class Modal extends React.Component {
                 }}
                 {...omit(this.props, ['className', 'overlayClassName'])}
             >
-                <div
-                    className="modal-content-close"
-                    onClick={this.handleRequestClose}
-                >
-                    <img
-                        alt="close-icon"
-                        className="modal-content-close-img"
-                        draggable="false"
-                        src="/svgs/modal/close-x.svg"
-                    />
-                </div>
+
+                {this.props.showCloseButton && (
+                    <div
+                        className="modal-content-close"
+                        onClick={this.handleRequestClose}
+                    >
+                        <img
+                            alt="close-icon"
+                            className="modal-content-close-img"
+                            draggable="false"
+                            src="/svgs/modal/close-x.svg"
+                        />
+                    </div>
+                )}
                 {this.props.children}
             </ReactModal>
         );
@@ -70,7 +73,11 @@ Modal.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     overlayClassName: PropTypes.string,
+    showCloseButton: PropTypes.bool,
     useStandardSizes: PropTypes.bool
 };
 
+Modal.defaultProps = {
+    showCloseButton: true
+};
 module.exports = Modal;
diff --git a/src/components/modal/join/modal.jsx b/src/components/modal/join/modal.jsx
index 287e6b31e..bd17ac6ab 100644
--- a/src/components/modal/join/modal.jsx
+++ b/src/components/modal/join/modal.jsx
@@ -12,6 +12,7 @@ const JoinModal = ({
 }) => (
     <Modal
         isOpen
+        showCloseButton
         useStandardSizes
         className="mod-join"
         shouldCloseOnOverlayClick={false}
@@ -26,7 +27,8 @@ const JoinModal = ({
 
 JoinModal.propTypes = {
     onCompleteRegistration: PropTypes.func,
-    onRequestClose: PropTypes.func
+    onRequestClose: PropTypes.func,
+    showCloseButton: PropTypes.bool
 };
 
 module.exports = JoinModal;
diff --git a/src/views/join/join.jsx b/src/views/join/join.jsx
index ebb4019fc..3064ec08b 100644
--- a/src/views/join/join.jsx
+++ b/src/views/join/join.jsx
@@ -6,11 +6,13 @@ const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx'
 const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
 
 const openModal = true;
+const showCloseButton = false;
 const Register = () => (
     <ErrorBoundary>
         <JoinModal
             isOpen={openModal}
             key="scratch3registration"
+            showCloseButton={showCloseButton}
         />
     </ErrorBoundary>
 );
diff --git a/test/unit/components/modal.test.jsx b/test/unit/components/modal.test.jsx
new file mode 100644
index 000000000..6c427dc2f
--- /dev/null
+++ b/test/unit/components/modal.test.jsx
@@ -0,0 +1,34 @@
+const React = require('react');
+const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
+const Modal = require('../../../src/components/modal/base/modal.jsx');
+
+describe('Modal', () => {
+    test('Close button not shown when showCloseButton false', () => {
+        const showClose = true;
+        const component = shallowWithIntl(
+            <Modal
+                showCloseButton={showClose}
+            />
+        );
+        expect(component.find('div.modal-content-close').exists()).toBe(true);
+        expect(component.find('img.modal-content-close-img').exists()).toBe(true);
+    });
+    test('Close button shown by default', () => {
+        const component = shallowWithIntl(
+            <Modal />
+        );
+        expect(component.find('div.modal-content-close').exists()).toBe(true);
+        expect(component.find('img.modal-content-close-img').exists()).toBe(true);
+    });
+
+    test('Close button shown when showCloseButton true', () => {
+        const showClose = false;
+        const component = shallowWithIntl(
+            <Modal
+                showCloseButton={showClose}
+            />
+        );
+        expect(component.find('div.modal-content-close').exists()).toBe(false);
+        expect(component.find('img.modal-content-close-img').exists()).toBe(false);
+    });
+});

From 1a580957821e21c9e6199b8b4e1543f64094ffb5 Mon Sep 17 00:00:00 2001
From: picklesrus <picklesrus@users.noreply.github.com>
Date: Mon, 23 Sep 2019 16:15:20 -0400
Subject: [PATCH 2/2] Put values directly in render props.

---
 src/views/join/join.jsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/views/join/join.jsx b/src/views/join/join.jsx
index 3064ec08b..60379fd86 100644
--- a/src/views/join/join.jsx
+++ b/src/views/join/join.jsx
@@ -5,14 +5,12 @@ const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx'
 // Require this even though we don't use it because, without it, webpack runs out of memory...
 const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
 
-const openModal = true;
-const showCloseButton = false;
 const Register = () => (
     <ErrorBoundary>
         <JoinModal
-            isOpen={openModal}
+            isOpen
             key="scratch3registration"
-            showCloseButton={showCloseButton}
+            showCloseButton={false}
         />
     </ErrorBoundary>
 );