Merge pull request #3357 from picklesrus/join-modal-x-button

One approach to hiding the close button in the modal.
scratchfoundation · Sep 24, 2019 · 036937b · 036937b
2 parents c609d99 + 1a58095
commit 036937b
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 deletions.
diff --git 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
@@ -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
@@ -5,12 +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 Register = () => (
     <ErrorBoundary>
         <JoinModal
-            isOpen={openModal}
+            isOpen
             key="scratch3registration"
+            showCloseButton={false}
         />
     </ErrorBoundary>
 );

diff --git a/test/unit/components/modal.test.jsx 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);
+    });
+});