footer refresh

[wen-2018]

One-line summary

Significant changes and points to review

Issue / Bugzilla link

#14830

Testing

To enable newsletter sign up form in the footer for a page, add the following:

{% block site_footer %}
  {% with show_newsletter=True %}
    {% include 'includes/protocol/footer/footer.html' %}
  {% endwith %}
{% endblock %}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.84%. Comparing base (d39708b) to head (79580fb).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #14967   +/-   ##
=======================================
  Coverage   77.84%   77.84%           
=======================================
  Files         162      162           
  Lines        8464     8464           
=======================================
  Hits         6589     6589           
  Misses       1875     1875           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[alexgibson]

I know this is still a draft, but I left a few suggestions / comments that I hope might be helpful. Happy to chat further if you have any questions :)

[alexgibson]

Updates are looking good! I took a closer pass at the CSS / styling and noted a few visual issues. Please let me know if anything I've said doesn't make sense!

[alexgibson]

Updates are looking good!

In addition to the comments below, there are a few integration tests for the footer that will need updating:

• https://github.com/mozilla/bedrock/blob/main/tests/playwright/specs/footer.spec.js
• https://github.com/mozilla/bedrock/blob/main/tests/playwright/specs/a11y/components.spec.js#L131-L177

If we're only targeting en- languages to begin with, then I'd suggest updating the tests to target the /de/ locale instead of /en-US/ for the time being. Once the footer is enabled in production we can then update the tests later. Does that make sense? Happy to lend a hand here if helpful - just let me know.

[alexgibson]

Issue: this line of copy needs to be changed

[wen-2018]

Waiting on decision with the new copy at the moment

[alexgibson]

This line of copy also needs updating now that it points to the Firefox newsletter, not the Mozilla newsletter.

[wen-2018]

I have flagged this for Emma. Hopefully we will get the new copy that is appropriate for the Firefox newsletter soon

[alexgibson]

I also noticed that the footer styling on all Firefox pages seems to be broken currently (I think because the CSS is only loaded in the Mozilla base template)

http://localhost:8000/en-US/firefox/

[alexgibson]

Other than the outstanding comments I think code-wise, this is in good shape. Nice work! ⭐

[alexgibson]

Looks like this needs a rebase since the home page PR merged

[alexgibson]

Since Stephanie's PR merged and the new fonts now load I see some visual regressions:

• All the links are bold (hard to distinguish between headings and links)
• On hover, active links disappear

[alexgibson]

At smaller viewports, things also get very tight (have the breakpoints changed?)

[alexgibson]

r+

[wen-2018]

The bundle issue will be tackled separately in this issue: #15120