feat: New Footer (fix #2518)

src/amo/components/Footer/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import LanguagePicker from 'amo/components/LanguagePicker';
+import translate from 'core/i18n/translate';
+import Icon from 'ui/components/Icon';
+
+import './styles.scss';
+
+
+export class FooterBase extends React.Component {
+  static propTypes = {
+    handleViewDesktop: PropTypes.func.isRequired,
+    i18n: PropTypes.object.isRequired,
+    lang: PropTypes.string.isRequired,
+    location: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { handleViewDesktop, i18n, lang, location } = this.props;
+    const homepageText = i18n.gettext("Go to Mozilla's homepage");
+
+    return (
+      <footer className="Footer">
+        <div className="Footer-language-and-links">
+          <LanguagePicker location={location}
+            ref={(ref) => { this.languagePicker = ref; }} />
+          <ul className="Footer-links">
+            <li>
+              <a href={`https://www.mozilla.org/${lang}/privacy/websites/`}
+                className="Footer-link Footer-privacy">
+                {i18n.gettext('Privacy policy')}
+              </a>
+            </li>
+            <li>
+              <a href={`https://www.mozilla.org/${lang}/about/legal/`}
+                className="Footer-link Footer-legal">
+                {i18n.gettext('Legal notices')}
+              </a>
+            </li>
+            <li>
+              <a href={'https://developer.mozilla.org/Add-ons/AMO/Policy/Contact'}
+                className="Footer-link Footer-fileissue">
+                {i18n.gettext('Report a bug')}
+              </a>
+            </li>
+            <li>
+              <a href="#desktop" className="Footer-link Footer-desktop"
+                onClick={handleViewDesktop}
+                ref={(ref) => { this.desktopLink = ref; }}>
+                {i18n.gettext('View classic desktop site')}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <a
+          className="Footer-mozilla-link"
+          href="https://mozilla.org/"
+          title={homepageText}
+        >
+          <Icon className="Footer-mozilla-logo" name="mozilla" />
+          <span className="visually-hidden">{homepageText}</span>
+        </a>
+      </footer>
+    );
+  }
+}
+
+export function mapStateToProps(state) {
+  return { lang: state.api.lang };
+}
+
+export default compose(
+  connect(mapStateToProps),
+  translate({ withRef: true }),
+)(FooterBase);

src/amo/components/Footer/styles.scss

@@ -0,0 +1,49 @@
+@import "~core/css/inc/mixins";
+@import "~amo/css/inc/vars";
+@import "~ui/css/vars";
+
+.Footer {
+  background: $footer-base-color;
+  color: $white;
+  padding: 20px;
+
+  @include respond-to(medium) {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.Footer-language-and-links {
+  max-width: 220px;
+  width: 100%;
+}
+
+.Footer-links {
+  list-style: none;
+  margin: 20px 0 0;
+  padding: 0;
+}
+
+.Footer-link,
+.Footer-link:link {
+  color: $white;
+  display: block;
+  margin: 0 0 10px;
+  text-decoration: none;
+
+  &:active,
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.Footer-mozilla-link {
+  display: inline-block;
+  margin-top: 10px;
+
+  @include respond-to(medium) {
+    @include margin-end(10px);
+
+    margin-top: auto;
+  }
+}

src/amo/components/LanguagePicker.scss

@@ -1,6 +1,5 @@
 @import "~amo/css/inc/vars";
-
-$selector-padding: 10px;
+@import "~ui/css/vars";
 
 .LanguagePicker-header {
   margin: 0 0 5px;
@@ -9,25 +8,26 @@ $selector-padding: 10px;
 .LanguagePicker-selector {
   appearance: none;
   background:
-    url('../img/icons/globe.svg') no-repeat #{$selector-padding} 50%,
-    $base-color url('../img/icons/triangle-down.svg')
-    no-repeat calc(100% - #{$selector-padding}) 50%;
-  background-size: 20px 20px, 15px 15px;
+    url('~ui/components/Icon/globe.svg') no-repeat 10px 50%,
+    $neutral-base-color url('~ui/components/Icon/triangle-down.svg')
+    no-repeat calc(100% - 10px) 50%;
+  background-size: 16px, 12px;
   border: 0;
   border-radius: $border-radius-default;
-  color: $link-color;
+  color: $white;
   display: block;
   font-size: $font-size-s;
   line-height: 1;
-  padding: $selector-padding $selector-padding #{$selector-padding - 1} #{$selector-padding * 3};
+  max-width: 220px;
+  padding: 5px 15px 3.5px 30px;
   width: 100%;
 
   [dir=rtl] & {
     background:
-      url('../img/icons/globe.svg') no-repeat calc(100% - #{$selector-padding}) 50%,
-      $base-color url('../img/icons/triangle-down.svg')
-      no-repeat #{$selector-padding} 50%;
-    background-size: 20px 20px, 15px 15px;
-    padding: $selector-padding #{$selector-padding * 3} #{$selector-padding - 1} $selector-padding;
+      url('~ui/components/Icon/globe.svg') no-repeat calc(100% - 10px) 50%,
+      $neutral-base-color url('~ui/components/Icon/triangle-down.svg')
+      no-repeat 10px 50%;
+    background-size: 16px, 12px;
+    padding: 5px 30px 3.5px 15px;
   }
 }

src/ui/components/Icon/styles.scss

@@ -33,6 +33,13 @@
   background-size: cover;
 }
 
+.Icon-mozilla {
+  background: url('./mozilla.svg') center no-repeat;
+  background-size: contain;
+  height: 32px;
+  width: 112px;
+}
+
 .Icon-user {
   background: url('./user.svg') center no-repeat;
   background-size: contain;