Update bedrock to Protocol V22

[stephaniehobson]

One-line summary

Update bedrock to Protocol V22

Significant changes and points to review

V22 changelog

• new colours
• new icons
• new breadcrumb component
• new rich text component
• unless they were throwing errors I left the Firefox pages alone

Issue / Bugzilla link

mozilla/protocol#1074
#13462

Testing

Color token changes:

• http://localhost:8000/en-US/products/vpn/ (green gaurentee writing)
• http://localhost:8000/en-US/products/vpn/resource-center/what-is-an-ip-address/ (up/down helpful buttons)
• http://localhost:8000/en-US/contribute/ (underneath the images in the 4 cards across) (border around the "problems with this webpage" call out)
• http://localhost:8000/en-US/foundation/reimagine-open/

Breadcrumbs/subnav:

• http://localhost:8000/en-US/products/vpn/resource-center/what-is-an-ip-address/
• http://localhost:8000/en-US/privacy/websites/cookie-settings/
• http://localhost:8000/en-US/products/monitor/digital-footprint/

caret -> arrow icon updates (mostly modal navigation):

• header navigation, desktop and mobile
• http://localhost:8000/en-US/diversity/2021/who-we-are/#pride-month
• http://localhost:8000/en-US/foundation/annualreport/2019/#victory-has-a-ring-to-it
• http://localhost:8000/en-US/careers/#anna-y
• http://localhost:8000/en-US/foundation/annualreport/2021/#carlos-torres
• http://localhost:8000/en-US/about/policy/transparency/2024/

rich text & icon updates

• http://localhost:8000/en-US/about/leadership/

Integration test run

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.70%. Comparing base (a59a279) to head (bb9d627).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #16586   +/-   ##
=======================================
  Coverage   79.70%   79.70%           
=======================================
  Files         159      159           
  Lines        8534     8534           
=======================================
  Hits         6802     6802           
  Misses       1732     1732           

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[maureenlholland]

code review is r+wc, going to do browser review tomorrow morning

the non-blocking requested change is to use @use instead of @import

[janbrasna]

Thanks for the play/pause icons, the skip pixel of yesteryear was obnoxious;]

There's also two icons on products.landing that are outdated now:

bedrock/bedrock/products/templates/products/landing.html

Lines 38 to 39 in a59a279

{% set icon_external = '<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"><path d="M13 4h7v7M12 12l8-8M8 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-1"/></g></svg></span>' %}

{% set icon_download ='<span class="mzp-c-button-icon-end"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M8 13c.2 0 .4-.1.5-.2l4.4-4.4-1.1-1.1-3.1 3.1V1H7.2v9.4L4.1 7.3l-1 1.1 4.4 4.4c.1.1.3.2.5.2z" /><path d="M13.5 12v2c0 .3-.2.5-.5.5H3c-.3 0-.5-.2-.5-.5v-2H1v2c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2h-1.5z" /></svg></span>' %}

Some random notes:

[janbrasna]

Seems the title here inside the SVG got removed?

BTW, the download attribute does something?

[janbrasna]

Okay this makes sense (I wish there was also a way to trigger the nav/footer from that time) — but wondering if that needs a comment, or a documentation somewhere?

(I remember learning about the xv=legacy at some point, seemingly within ftl file comments; but can't find that any longer. Wondering where was the learning curve for this.)

NB: the experience value for mozorg/home is something different than the firefox/download already documented in mkdocs.

[janbrasna]

IIUC this is extra, when history state is empty?

[janbrasna]

(Hmm here too, for some reason, was that for long vs. short title?)

[janbrasna]

OK can't find this any longer — it would have to come from CMS somehow.