footer refresh

bedrock/base/templates/base-protocol-mozilla.html

@@ -10,6 +10,9 @@
 
 {% block site_css %}
   {{ css_bundle('protocol-mozilla') }}
+  {% if switch('m24-footer') and LANG.startswith('en-') %}
+    {{ css_bundle('footer-refresh') }}
+  {% endif %}
 {% endblock %}
 
 {% block site_footer %}

bedrock/base/templates/base-protocol.html

@@ -73,6 +73,9 @@
     {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
       {{ css_bundle('protocol-firefox') }}
+      {% if switch('m24-footer') and LANG.startswith('en-') %}
+        {{ css_bundle('footer-refresh') }}
+      {% endif %}
     {% endblock %}
 
     {# Page-specific styles, hidden from IE9 and lower #}

bedrock/base/templates/includes/protocol/footer/footer-newsletter.html

@@ -0,0 +1,21 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ #}
+
+<div class="moz24-newsletter-container">
+  <div class="moz24-newsletter-wrapper">
+    <div class="moz24-newsletter-info">
+      <img loading="lazy" class="moz24-newsletter-image" src="{{ static('img/logos/mozilla/footer-refresh/symbol.svg') }}" alt="" width="40" height="48">
+      <p>{{ ftl('footer-refresh-find-out-about') }}</p>
+    </div>
+
+    <div class="moz24-newsletter">
+      {{ email_newsletter_form(
+        newsletters='knowledge-is-power',
+        title=None
+        )}}
+      </div>
+    </div>
+</div>

bedrock/base/templates/includes/protocol/footer/footer-refresh.html

@@ -0,0 +1,134 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ #}
+
+ <footer class="moz24-footer" id="colophon">
+  {% if show_newsletter %}
+    {% include 'includes/protocol/footer/footer-newsletter.html' %}
+  {% endif %}
+  <div class="moz24-footer-content">
+    <nav class="moz24-footer-primary">
+      <div class="moz24-footer-sections-wrapper">
+        <div class="moz24-footer-section-wrapper">
+          <section>
+            <div class="moz24-footer-refresh-social-wrapper">
+              <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-mozilla') }}</h2>
+              <ul class="moz24-footer-links-social">
+                <li><a class="twitter" href="{{ mozilla_twitter_url() }}" data-link-type="footer" data-link-text="Twitter (@mozilla)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-twitter') }}<span> (@mozilla)</span></a></li>
+                <li><a class="mastodon" href="https://mozilla.social/@Mozilla" rel="me" data-link-type="footer" data-link-text="Mastodon (@mozilla)">{{ ftl('footer-refresh-mastodon') }}<span> (@mozilla)</span></a></li>
+                <li><a class="instagram" href="{{ mozilla_instagram_url() }}" data-link-type="footer" data-link-text="Instagram (@mozilla)">{{ ftl('footer-refresh-instagram') }}<span> (@mozilla)</span></a></li>
+                <li><a class="linkedin" href="https://www.linkedin.com/company/mozilla-corporation/" data-link-type="footer" data-link-text="LinkedIn (@mozilla)">{{ ftl('footer-refresh-linkedin') }}<span> (@mozilla)</span></a></li>
+                <li><a class="tiktok" href="https://www.tiktok.com/@mozilla" data-link-type="footer" data-link-text="TikTok (@mozilla)">{{ ftl('footer-refresh-tiktok') }}<span> (@mozilla)</span></a></li>
+                <li><a class="spotify" href="https://open.spotify.com/show/0vT7LJMeVDxyQ2ZamHKu08?si=_uDRD6bRR_6M5YZyISGXgA" data-link-type="footer" data-link-text="Spotify (@mozilla)">{{ ftl('footer-refresh-spotify') }}<span> (@mozilla)</span></a></li>
+              </ul>
+            </div>
+            <div class="moz24-footer-refresh-social-wrapper">
+              <h2 class="moz24-footer-heading-social">{{ ftl('footer-refresh-follow-firefox') }}</h2>
+              <ul class="moz24-footer-links-social">
+                <li><a class="twitter" href="{{ firefox_twitter_url() }}" data-link-type="footer" data-link-text="Twitter (@firefox)">{{ ftl('footer-refresh-x-formerly-twitter', fallback='footer-refresh-twitter') }}<span> (@firefox)</span></a></li>
+                <li><a class="instagram" href="https://www.instagram.com/firefox/" data-link-type="footer" data-link-text="Instagram (@firefox)">{{ ftl('footer-refresh-instagram') }}<span> (@firefox)</span></a></li>
+                <li><a class="youtube" href="https://www.youtube.com/user/firefoxchannel" data-link-type="footer" data-link-text="YouTube (@firefoxchannel)">{{ ftl('footer-refresh-youtube') }}<span> (@firefoxchannel)</span></a></li>
+              </ul>
+            </div>
+          </section>
+        </div>
+        <div class="moz24-footer-section-wrapper moz24-links-section">
+          <section>
+            <h2 class="moz24-footer-label" data-testid="footer-heading-company">
+              {{ ftl('footer-refresh-company') }}
+            </h2>
+            <ul class="moz24-footer-primary-list" data-testid="footer-list-company">
+              <li><a href="{{ url('mozorg.about.leadership.index') }}" data-link-type="footer" data-link-text="footer-refresh-leadership = Leadership">{{ ftl('footer-refresh-leadership') }}</a></li>
+              <li><a href="https://blog.mozilla.org/category/mozilla/news/?{{ utm_params }}&utm_content=company" data-link-type="footer" data-link-text="Press Center">{{ ftl('footer-refresh-press-center') }}</a></li>
+              <li><a href="{{ url('careers.home') }}" data-link-type="footer" data-link-text="Careers">{{ ftl('footer-refresh-careers') }}</a></li>
+              <li><a href="{{ url('mozorg.contact.contact-landing') }}" data-link-type="footer" data-link-text="Contact">{{ ftl('footer-refresh-contact') }}</a></li>
+              <li>
+
+              </li>
+            {% if LANG == "de" %}
+              {# Legal requirement in Germany see issue #14240 #}
+              <li><a href="{{ url('legal.impressum') }}" data-link-type="footer" data-link-text="Impressum">Impressum</a></li>
+            {% endif %}
+            </ul>
+          </section>
+
+          <section>
+            <h2 class="moz24-footer-label" data-testid="footer-heading-support">
+              {{ ftl('footer-refresh-support') }}
+            </h2>
+            <ul class="moz24-footer-primary-list" data-testid="footer-list-support">
+              <li><a href="https://support.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Product Help">{{ ftl('footer-refresh-product-help', fallback='footer-refresh-support') }}</a></li>
+              <li><a href="https://bugzilla.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="File a Bug">{{ ftl('footer-refresh-file-a-bug') }}</a></li>
+              <li><a href="https://pontoon.mozilla.org/?{{ utm_params }}&utm_content=support" data-link-type="footer" data-link-text="Localise Mozilla">{{ ftl('footer-refresh-localize-mozilla') }}</a></li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 class="moz24-footer-label" data-testid="footer-heading-resources">
+              {{ ftl('footer-refresh-resources') }}
+            </h2>
+            <ul class="moz24-footer-primary-list" data-testid="footer-list-resources">
+              <li><a href="https://www.mozilla.org/advertising/" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
+              <li><a href="https://mozilla.design/?{{ utm_params }}&utm_content=resources" data-link-type="footer" data-link-text="Brand Standards">{{ ftl('footer-refresh-brand-standards') }}</a></li>
+              <li><a href="/firefox/{{ latest_firefox_version }}/releasenotes/" data-link-type="footer" data-link-text="Firefox Release Notes">{{ ftl('footer-refresh-firefox-release-notes') }}</a></li>
+            </ul>
+          </section>
+
+          <section>
+            <h2 class="moz24-footer-label" data-testid="footer-heading-developers">
+              {{ ftl('footer-refresh-developers') }}
+            </h2>
+            <ul class="moz24-footer-primary-list" data-testid="footer-list-developers">
+              <li><a href="{{ url('firefox.developer.index') }}" data-link-type="footer" data-link-text="Firefox Developer Edition">{{ ftl('footer-refresh-developer-edition') }}</a></li>
+              <li><a href="{{ url('firefox.enterprise.index') }}" data-link-type="footer" data-link-text="Firefox for Enterprise">{{ ftl('footer-refresh-enterprise') }}</a></li>
+              <li><a href="https://firefox-source-docs.mozilla.org/devtools-user/?{{ utm_params }}&utm_content=developers" rel="external" data-link-type="footer" data-link-text="Tools">{{ ftl('footer-refresh-tools') }}</a></li>
+              <li><a href="https://developer.mozilla.org/?{{ utm_params }}" data-link-type="footer" data-link-text="MDN">{{ ftl('footer-refresh-mdn') }}</a></li>
+            </ul>
+          </section>
+        </div>
+      </div>
+    </nav>
+    <div class="moz24-footer-actions">
+      <a class="moz24-footer-donate" href="{{ donate_url(location='moco-donate-footer') }}" data-link-type="button" data-link-text="Donate">
+        <span class="mzp-c-button-icon-start">
+          <svg height="640" viewBox="0 0 896.173 896.173" width="640" xmlns="http://www.w3.org/2000/svg"><switch><path d="m415.586 381.044v-65.006h65.001v65.006zm151.61-179.868c-34.105 0-63.39 12.422-86.609 27.824v87.038c4.788-5.861 12.53-14.509 22.611-22.98 21.228-17.838 42.76-26.882 63.998-26.882 47.765 0 86.625 40.383 86.625 90.02 0 72.488-58.765 143.314-108.062 189.965-37.953 35.915-76.426 63.436-97.672 77.68-21.246-14.244-59.72-41.765-97.673-77.68-49.297-46.651-108.062-117.477-108.062-189.964 0-49.638 38.86-90.021 86.625-90.021 21.239 0 42.77 9.044 63.998 26.882 10.082 8.472 17.823 17.119 22.611 22.98v-87.038c-23.218-15.402-52.503-27.824-86.609-27.824-83.606 0-151.625 69.542-151.625 155.02 0 43.355 14.14 88.366 42.027 133.784 21.258 34.62 50.627 69.704 87.29 104.273 61.41 57.902 122.133 94.58 124.688 96.112l7.735 4.632h17.989l7.735-4.632c2.555-1.533 63.278-38.21 124.687-96.112 36.664-34.57 66.033-69.652 87.29-104.273 27.888-45.418 42.028-90.429 42.028-133.783 0-85.479-68.019-155.021-151.625-155.021"/></switch></svg>
+        </span>
+        <span class="mzp-c-button-icon-text">{{ ftl('footer-refresh-donate') }}</span>
+      </a>
+      <div class="moz24-footer-language">
+        {% include 'includes/protocol/lang-switcher-refresh.html' %}
+       </div>
+    </div>
+    <nav class="moz24-footer-secondary">
+      <div class="moz24-footer-legal">
+        <p class="moz24-footer-license" rel="license">
+          {% set moco_link = 'href="%s" data-link-type="footer" data-link-text="Mozilla Corporation"'|safe|format(url('mozorg.home')) %}
+          {% set mofo_link = 'href="https://foundation.mozilla.org/?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=footer" rel="external noopener" data-link-type="footer" data-link-text="Mozilla Foundation"'|safe %}
+          {{ ftl('footer-refresh-visit-mozilla-corporations', moco_link=moco_link, mofo_link=mofo_link) }}<br>
+          {{ ftl('footer-refresh-portions-of-this-content', url=url('foundation.licensing.website-content'), current_year=current_year|string) }}
+        </p>
+        <ul class="moz24-footer-terms">
+          <li><a href="{{ url('privacy.notices.websites') }}" data-link-type="footer" data-link-text="Privacy">{{ ftl('footer-refresh-websites-privacy-notice') }}</a></li>
+          <li>
+            {# Link to /privacy/websites/cookie-settings/ is a legal requirement and should not be removed. It must be present on every page (Issue 14213). #}
+            <a href="{{ url('privacy.cookie-settings') }}" data-link-type="footer" data-link-text="Cookies">{{ ftl('footer-refresh-websites-cookies') }}</a>
+          </li>
+          <li><a href="{{ url('legal.index') }}" data-link-type="footer" data-link-text="Legal">{{ ftl('footer-refresh-websites-legal') }}</a></li>
+          <li><a href="{{ url('mozorg.about.governance.policies.participation') }}" data-link-type="footer" data-link-text="Community Participation Guidelines">{{ ftl('footer-refresh-community-participation-guidelines') }}</a></li>
+          {% if ftl_has_messages('footer-about-this-site') %}
+            <li><a href="{{ url('mozorg.about.this-site') }}" data-link-type="footer" data-link-text="About this site">{{ ftl('footer-refresh-about-this-site') }}</a></li>
+          {% endif %}
+        </ul>
+      </div>
+    </nav>
+    <img loading="lazy" class="moz24-footer-logo-image-bottom" src="{{ static('img/logos/mozilla/footer-refresh/mozilla-in-white.svg') }}" alt="" width="1376" height="285">
+  </div>
+</footer>
+
+{% block footer_js %}
+  {% if show_newsletter %}
+    {{ js_bundle('newsletter') }}
+  {% endif %}
+{% endblock %}

bedrock/base/templates/includes/protocol/footer/footer.html

@@ -6,6 +6,9 @@
 
 {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=footer' %}
 
+{% if switch('m24-footer')  and LANG.startswith('en-') %}
+  {% include 'includes/protocol/footer/footer-refresh.html' %}
+{% else %}
 <footer class="mzp-c-footer {% if theme_class %}{{ theme_class }}{% endif %}" id="colophon">
   <div class="mzp-l-content">
     <nav class="mzp-c-footer-primary">
@@ -123,3 +126,4 @@ <h5 class="mzp-c-footer-heading-social">{{ ftl('footer-follow-firefox') }}</h5>
     </nav>
   </div>
 </footer>
+{% endif %}

bedrock/base/templates/includes/protocol/lang-switcher-refresh.html

@@ -0,0 +1,19 @@
+{#
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ #}
+
+ {% if translations|length > 1 %}
+   <form id="lang_form" class="moz24-c-language-switcher" method="get" action="#">
+    <label for="page-language-select">{{ ftl('footer-refresh-language') }}</label>
+    <a class="mzp-c-language-switcher-link" href="{{ url('mozorg.locales') }}">{{ ftl('footer-refresh-language') }}</a>
+     <select id="page-language-select" class="mzp-js-language-switcher-select" name="lang" dir="ltr" data-testid="footer-language-select">
+       {% for code, label in translations|dictsort -%}
+         {# Don't escape the label as it may include entity references
+         # like "Português (do&nbsp;Brasil)" (Bug 861149) #}
+         <option lang="{{ code }}" value="{{ code }}"{{ code|ifeq(LANG, " selected") }}>{{ label|safe|replace('English (US)', 'English') }}</option>
+       {% endfor %}
+     </select>
+   </form>
+ {% endif %}

bedrock/settings/base.py

@@ -277,6 +277,7 @@ def _put_default_lang_first(langs, default_lang=LANGUAGE_CODE):
     "brands",
     "download_button",
     "footer",
+    "footer-refresh",
     "fxa_form",
     "mozorg/about/shared",
     "navigation",

l10n/en/footer-refresh.ftl

@@ -0,0 +1,42 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+footer-refresh-find-out-about = Find out about { -brand-name-mozilla } products, initiatives, and more. We’ll never sell your email, even if presented with free pizza for life.
+footer-refresh-leadership = Leadership
+footer-refresh-advertise = Advertise with { -brand-name-mozilla }
+footer-refresh-firefox-release-notes = { -brand-name-firefox } Release Notes
+footer-refresh-mdn = MDN
+footer-refresh-follow-mozilla = Follow @{ -brand-name-mozilla }
+footer-refresh-x = X
+footer-refresh-x-formerly-twitter = X (formerly Twitter)
+footer-refresh-mastodon = Mastodon
+footer-refresh-instagram = Instagram
+footer-refresh-linkedin = LinkedIn
+footer-refresh-tiktok = TikTok
+footer-refresh-spotify = Spotify
+footer-refresh-follow-firefox = Follow @{ -brand-name-firefox }
+footer-refresh-youtube = YouTube
+footer-refresh-company = Company
+footer-refresh-press-center = Press Center
+footer-refresh-careers = Careers
+footer-refresh-contact = Contact
+footer-refresh-support = Support
+footer-refresh-product-help = Product Help
+footer-refresh-file-a-bug = File a Bug
+footer-refresh-localize-mozilla = Localize { -brand-name-mozilla }
+footer-refresh-resources = Resources
+footer-refresh-brand-standards = Brand Standards
+footer-refresh-developers = Developers
+footer-refresh-developer-edition = { -brand-name-developer-edition }
+footer-refresh-enterprise = { -brand-name-enterprise }
+footer-refresh-tools = Tools
+footer-refresh-donate = Donate
+footer-refresh-visit-mozilla-corporations = Visit <a { $moco_link }>{ -brand-name-mozilla-corporation }’s</a> not-for-profit parent, the <a { $mofo_link }>{ -brand-name-mozilla-foundation }</a>.
+footer-refresh-portions-of-this-content = Portions of this content are ©1998–{ $current_year } by individual mozilla.org contributors. Content available under a <a rel="license" { $href }>{ -brand-name-creative-commons } license</a>.
+footer-refresh-websites-privacy-notice = Website Privacy Notice
+footer-refresh-websites-cookies = Cookies
+footer-refresh-websites-legal = Legal
+footer-refresh-community-participation-guidelines = Community Participation Guidelines
+footer-refresh-about-this-site = About this site
+footer-refresh-language = Language

media/css/m24/base.scss

@@ -10,6 +10,10 @@
 @import 'vars/spacing';
 @import 'vars/text';
 @import 'vars/animation';
+@import 'vars/fonts';
+
+// Global components
+@import 'components/footer-refresh';
 
 $mobile-square-img-max-width: 363px;