Merge pull request #2791 from mozilla/add-privacy-policy-to-disco-2789

fix: Add Privacy Policy to disco pane (fix #2789)

src/disco/components/Footer/index.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { compose } from 'redux';
+
+import translate from 'core/i18n/translate';
+
+import './styles.scss';
+
+
+export class FooterBase extends React.Component {
+  static propTypes = {
+    i18n: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { i18n } = this.props;
+
+    return (
+      <footer className="Footer">
+        <a
+          className="Footer-privacy-link"
+          href="https://www.mozilla.org/privacy/websites/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          {i18n.gettext('Privacy Policy')}
+        </a>
+      </footer>
+    );
+  }
+}
+
+export default compose(
+  translate(),
+)(FooterBase);

src/disco/components/Footer/styles.scss

@@ -0,0 +1,10 @@
+@import "~disco/css/inc/vars";
+
+.Footer {
+  text-align: center;
+}
+
+.Footer-privacy-link {
+  color: $header-copy-font-color;
+  font-size: 12px;
+}

src/disco/containers/App.js

@@ -5,9 +5,11 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import classNames from 'classnames';
 
-import 'disco/css/App.scss';
 import DefaultErrorPage from 'core/components/ErrorPage';
 import translate from 'core/i18n/translate';
+import Footer from 'disco/components/Footer';
+
+import 'disco/css/App.scss';
 
 
 export class AppBase extends React.Component {
@@ -36,6 +38,7 @@ export class AppBase extends React.Component {
         <ErrorPage>
           {children}
         </ErrorPage>
+        <Footer />
       </div>
     );
   }

tests/unit/disco/components/TestFooter.js

@@ -0,0 +1,34 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { FooterBase } from 'disco/components/Footer';
+import { getFakeI18nInst } from 'tests/unit/helpers';
+
+
+function shallowRender(props = {}) {
+  return shallow(<FooterBase i18n={getFakeI18nInst()} {...props} />);
+}
+
+describe('Footer', () => {
+  it('renders a footer', () => {
+    const root = shallowRender();
+
+    expect(root.find('.Footer')).toHaveLength(1);
+  });
+
+  it('renders the privacy policy link', () => {
+    const root = shallowRender();
+
+    expect(root.find('.Footer-privacy-link'))
+      .toHaveProp('href', 'https://www.mozilla.org/privacy/websites/');
+    expect(root.find('.Footer-privacy-link')).toIncludeText('Privacy Policy');
+  });
+
+  it('renders opens the privacy policy in a new window', () => {
+    const root = shallowRender();
+
+    expect(root.find('.Footer-privacy-link'))
+      .toHaveProp('rel', 'noopener noreferrer');
+    expect(root.find('.Footer-privacy-link')).toHaveProp('target', '_blank');
+  });
+});