Moving close button for Privacy modal to Message

This allow any Message to have a configurable close button. It also
makes the styling more robust

src/components/Header/__snapshots__/test.js.snap

@@ -16,16 +16,9 @@ exports[`Header closing the Privacy Policy modal 1`] = `
     shouldFocusAfterRender={true}
     shouldReturnFocusAfterClose={true}
   >
-    <LoadNamespace(PrivacyPolicy) />
+    <LoadNamespace(PrivacyPolicy)
-    <button
+      onClose={[Function]}
-      className="modalClose"
-      onClick={[Function]}
-    >
-      <XSquare
-        color="currentColor"
-        size="24"
     />
-    </button>
   </Modal>
   <header
     className="header"
@@ -95,16 +88,9 @@ exports[`Header closing the Privacy Policy modal 2`] = `
     shouldFocusAfterRender={true}
     shouldReturnFocusAfterClose={true}
   >
-    <LoadNamespace(PrivacyPolicy) />
+    <LoadNamespace(PrivacyPolicy)
-    <button
+      onClose={[Function]}
-      className="modalClose"
-      onClick={[Function]}
-    >
-      <XSquare
-        color="currentColor"
-        size="24"
     />
-    </button>
   </Modal>
   <header
     className="header"
@@ -174,16 +160,9 @@ exports[`Header opening the Privacy Policy modal 1`] = `
     shouldFocusAfterRender={true}
     shouldReturnFocusAfterClose={true}
   >
-    <LoadNamespace(PrivacyPolicy) />
+    <LoadNamespace(PrivacyPolicy)
-    <button
+      onClose={[Function]}
-      className="modalClose"
-      onClick={[Function]}
-    >
-      <XSquare
-        color="currentColor"
-        size="24"
     />
-    </button>
   </Modal>
   <header
     className="header"
@@ -253,16 +232,9 @@ exports[`Header rendering 1`] = `
     shouldFocusAfterRender={true}
     shouldReturnFocusAfterClose={true}
   >
-    <LoadNamespace(PrivacyPolicy) />
+    <LoadNamespace(PrivacyPolicy)
-    <button
+      onClose={[Function]}
-      className="modalClose"
-      onClick={[Function]}
-    >
-      <XSquare
-        color="currentColor"
-        size="24"
     />
-    </button>
   </Modal>
   <header
     className="header"
@@ -332,16 +304,9 @@ exports[`Header rendering with no banner 1`] = `
     shouldFocusAfterRender={true}
     shouldReturnFocusAfterClose={true}
   >
-    <LoadNamespace(PrivacyPolicy) />
+    <LoadNamespace(PrivacyPolicy)
-    <button
+      onClose={[Function]}
-      className="modalClose"
-      onClick={[Function]}
-    >
-      <XSquare
-        color="currentColor"
-        size="24"
     />
-    </button>
   </Modal>
   <header
     className="header"

src/components/Header/index.js

@@ -5,7 +5,6 @@ import { Link } from 'gatsby';
 import { withNamespaces, Trans } from 'react-i18next';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
-import CloseIcon from 'react-feather/dist/icons/x-square';
 
 import LocaleSwitcher from 'components/LocaleSwitcher';
 import InstallPrompt from 'components/InstallPrompt';
@@ -46,12 +45,7 @@ class Header extends React.PureComponent {
       <Modal
         isOpen={ showModal }
         onRequestClose={ this.handleClose }>
-        <PrivacyPolicy />
+        <PrivacyPolicy onClose={ this.handleClose } />
-        <button
-          className={ style.modalClose }
-          onClick={ this.handleClose }>
-          <CloseIcon />
-        </button>
       </Modal>
       <header
         className={ style.header }

src/components/Header/style.module.css

@@ -66,27 +66,3 @@
     }
   }
 }
-
-.modalClose {
-  position: absolute;
-  top: 3rem;
-  right: 2rem;
-  line-height: 2.8rem;
-  padding: 1rem;
-  margin: 0;
-  border: 0 none;
-  background: transparent;
-  color: inherit;
-
-  &:hover svg,
-  &:active svg {
-    color: var(--color-white);
-  }
-
-  & svg {
-    display: inline-block;
-    width: 2.8rem;
-    height: 2.8rem;
-    vertical-align: middle;
-  }
-}

src/components/Message/__snapshots__/test.js.snap

@@ -21,6 +21,36 @@ exports[`Message rendering 1`] = `
 </div>
 `;
 
+exports[`Message rendering with a close button 1`] = `
+<div
+  className="message"
+>
+  <div
+    className="header"
+  >
+    <h2>
+      Testing
+    </h2>
+    <button
+      onClick={[MockFunction]}
+    >
+      <XSquare
+        color="currentColor"
+        size="24"
+      />
+       Close
+    </button>
+  </div>
+  <div
+    className="content"
+  >
+    <p>
+      Message content
+    </p>
+  </div>
+</div>
+`;
+
 exports[`Message rendering with icon 1`] = `
 <div
   className="message"

src/components/Message/index.js

@@ -6,6 +6,7 @@ import style from './style.module.css';
 import InfoIcon from 'react-feather/dist/icons/info';
 import ErrorIcon from 'react-feather/dist/icons/alert-octagon';
 import WarningIcon from 'react-feather/dist/icons/alert-triangle';
+import CloseIcon from 'react-feather/dist/icons/x-square';
 
 const iconTypes = {
   info: InfoIcon,
@@ -23,7 +24,7 @@ const renderIcon = (type, icon) => {
   return <Icon />;
 };
 
-const Message = ({ type, icon, heading, children }) => (
+const Message = ({ type, icon, heading, onClose, children }) => (
   <div className={ [
     style.message,
     type && style[type]
@@ -31,6 +32,9 @@ const Message = ({ type, icon, heading, children }) => (
     <div className={ style.header }>
       { renderIcon(type, icon) }
       <h2>{ heading }</h2>
+      { onClose && <button onClick={ onClose }>
+        <CloseIcon /> Close
+      </button> }
     </div>
     <div className={ style.content }>
       { children }
@@ -49,6 +53,7 @@ Message.propTypes = {
     PropTypes.func
   ]),
   heading: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node

src/components/Message/style.module.css

@@ -24,6 +24,22 @@
     width: 2.8rem;
     vertical-align: bottom;
   }
+
+  & button {
+    padding: 0;
+    margin: 0;
+    border: 0 none;
+    background: transparent;
+    color: var(--color-tan);
+    cursor: pointer;
+    float: right;
+    font-size: 0;
+
+    &:hover,
+    &:active {
+      color: var(--color-white);
+    }
+  }
 }
 
 .content {
@@ -56,7 +72,7 @@
   & .header {
     background: var(--color-orange);
 
-    & svg {
+    & > svg {
       background: var(--color-black);
       color: var(--color-orange);
     }
@@ -68,7 +84,7 @@
     background: var(--color-blue);
     color: var(--color-white);
 
-    & svg {
+    & > svg {
       background: var(--color-white);
       color: var(--color-blue);
     }

src/components/Message/test.js

@@ -31,4 +31,13 @@ describe('Message', () => {
     );
     expect(component).toMatchSnapshot();
   });
+
+  test('rendering with a close button', () => {
+    const component = shallow(
+      <Message heading="Testing" onClose={ jest.fn() }>
+        <p>Message content</p>
+      </Message>
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

src/components/PrivacyPolicy/__snapshots__/test.js.snap

@@ -3,6 +3,7 @@
 exports[`PrivacyPolicy rendering 1`] = `
 <Message
   heading="TRANSLATE(Privacy Policy)"
+  onClose={[MockFunction]}
   type="info"
 >
   <WithMergedOptions(TransComponent)

src/components/PrivacyPolicy/index.js

@@ -4,8 +4,8 @@ import { withNamespaces, Trans } from 'react-i18next';
 
 import Message from 'components/Message';
 
-export const PrivacyPolicy = ({ t }) => (
+export const PrivacyPolicy = ({ t, ...props }) => (
-  <Message type="info" heading={ t('Privacy Policy') }>
+  <Message type="info" heading={ t('Privacy Policy') } { ...props }>
     <Trans i18nKey="Privacy policy copy">
       <p>
         Regexper and the tools used to create it are all open source. If you are

src/components/PrivacyPolicy/test.js

@@ -7,7 +7,7 @@ import { PrivacyPolicy } from 'components/PrivacyPolicy';
 describe('PrivacyPolicy', () => {
   test('rendering', () => {
     const component = shallow(
-      <PrivacyPolicy t={ mockT } />
+      <PrivacyPolicy onClose={ jest.fn() } t={ mockT } />
     );
     expect(component).toMatchSnapshot();
   });