Update to Protocol v.19.0.0

[reemhamz]

One-line summary

We've updated Protocol to the latest version of 19.0.0.
There are some significant changes, mentioned here: https://github.com/mozilla/protocol/releases/tag/v19.0.0

Things to highlight:

• Updated old call-out and call-out compact components to be the new combined Callout component
  • call_out macro changed to callout
  • call_out_compact macro changed to callout_compact
  • New macro parameters have been placed for both macros and can be found in the macros-protocol.html file
• Removed instanced of the old Picto Card component (remnants only found in /careers/internships template), refer to highlighted Note section below for more info
• Updated Newsletter component to reflect the new submissions that post directly to Basket
  • 💡Make sure to test using something like [email protected]. Avoid using [email protected] as that won't POST properly on localhost

---

Important

Since the newly rebuilt Callout component does not feature integrated brand logos, I ran into some trouble trying to smoothly add logos on templates that originally had a logo appear with the Callout component (elements were getting wonky), so I created some macro parameters we could use to make adding a brand element easier.

i.e.

{% if brand %}<div class="mzp-t-callout-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}"></div>{% endif %} 

See code changes here: https://github.com/mozilla/bedrock/pull/14084/files#diff-af818836bf22e910767dd7aa9aa7e8b11ee8ae65a1de8561b46d542351e23008R125-R134

---

Note

I removed the old internships.html template (and its relative internships.scss file) since it's been deprecated for over a year now, and it contained a lot of references to the old Picto Card component we've officially deprecated with this release. I tried to update the component references to Picto, but there were too many references + extra CSS bugs to fix on the page and didn't think it would be useful since we'll probably be looking into updating the content of the page completely.

---

Testing

You can view a demo of this branch in Demo 5: https://www-demo5.allizom.org/en-US/

• Ran integration tests ✅ 👉🏼 https://github.com/mozilla/bedrock/actions/runs/7649900686

Updatedcall-out references to callout

• http://localhost:8000/en-US/careers/position/gh/5137999/
• http://localhost:8000/en-US/firefox/installer-help/
• http://localhost:8000/en-US/firefox/channel/desktop/
• http://localhost:8000/en-US/firefox/welcome/1/
• http://localhost:8000/en-US/firefox/welcome/2/
• http://localhost:8000/en-US/firefox/welcome/4/
• http://localhost:8000/en-US/firefox/welcome/6/
• http://localhost:8000/en-US/firefox/welcome/7/
• http://localhost:8000/en-US/firefox/welcome/8/
• http://localhost:8000/de/firefox/welcome/9/
• http://localhost:8000/fr/firefox/welcome/9/
• http://localhost:8000/en-US/firefox/pocket/
• http://localhost:8000/en-US/firefox/nightly/firstrun/
• http://localhost:8000/en-US/firefox/privacy/
• http://localhost:8000/en-US/firefox/privacy/book/
• http://localhost:8000/en-US/firefox/118.0/releasenotes/
• http://localhost:8000/en-US/firefox/set-as-default/?v=2
• http://localhost:8000/en-US/firefox/set-as-default/thanks/
• http://localhost:8000/en-US/foundation/reimagine-open/
• http://localhost:8000/en-US/advertising/
• http://localhost:8000/en-US/about/
• http://localhost:8000/en-US/about/policy/lean-data/
• http://localhost:8000/en-US/about/webvision/
• http://localhost:8000/es-ES/firefox/99.0a1/whatsnew/?geo=es
• http://localhost:8000/en-US/firefox/privacy/products/

Updated the separatecompact call-out component to a variant of callout

• http://localhost:8000/en-US/about/policy/lean-data/build-security/
• http://localhost:8000/en-US/firefox/features/tips/ (I updated the callout from the Firefox Family logo to the Mozilla logo, since it seems this was missed during the Mozilla Accounts update a few months ago)
• http://localhost:8000/en-US/firefox/browsers/best-browser/
• http://localhost:8000/en-US/firefox/browsers/incognito-browser/
• http://localhost:8000/en-US/firefox/browsers/update-your-browser/
• http://localhost:8000/en-US/firefox/browsers/windows-64-bit/
• http://localhost:8000/en-US/firefox/facebookcontainer/
• http://localhost:8000/en-US/firefox/more/misinformation/
• http://localhost:8000/en-US/firefox/channel/desktop/
• http://localhost:8000/en-US/firefox/channel/android/
• http://localhost:8000/en-US/firefox/channel/ios/
• http://localhost:8000/en-US/firefox/119.0beta/system-requirements/
• http://localhost:8000/en-US/about/policy/lean-data/engage-users/
• http://localhost:8000/en-US/about/policy/lean-data/stay-lean/

Updated the Newsletter component to highlight integrated Basket posting:

✍🏼 Note: Newsletter updates weren't done individually for pages, but just a few changes on JS files and the static bundle, which in effect changed everything uniformly on all newsletter components around bedrock. I didn't list all of them, but here are some pages that contain the Newsletter component.

💡Make sure to test using something like [email protected]. Avoid using [email protected] as that won't POST properly on localhost

• http://localhost:8000/en-US/
• http://localhost:8000/en-US/firefox/ios/testflight/
• http://localhost:8000/en-US/firefox/channel/desktop/

[alexgibson]

@reemhamz heads up - it looks like this was missed off the migration notes, but mozilla/protocol#905 is another large-ish change that will require some updates and careful testing in bedrock.

We should hopefully now be able to remove the newsletter JS and tests from bedrock, and pages that feature the newsletter component can now post directly to basket (see code examples in the docs here). We'll need to do a bit of testing to make sure things are still working as expected before merging.

[reemhamz]

Thanks for the heads-up @alexgibson! I'll be sure to note those changes down in this PR :)

[alexgibson]

I used a relay email alias to signed up for a bunch of newsletters on https://www-demo5.allizom.org/en-US/ from various pages, and I can successfully see those subscriptions when I query the email in basket. Things seem good there from a testing perspective! 👍

[alexgibson]

I only tested the newsletter logic but it looks good to me, r+wc!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9b06488) 77.12% compared to head (c401910) 76.92%.
Report is 20 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #14084      +/-   ##
==========================================
- Coverage   77.12%   76.92%   -0.20%     
==========================================
  Files         145      145              
  Lines        7899     7835      -64     
==========================================
- Hits         6092     6027      -65     
- Misses       1807     1808       +1     

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

[alexgibson]

Newsletter JS changes look good to me r+ 🥇

[craigcook]

Whew, that's a lot! I only spotted a few small issues. Nice work. We should also push this to the run-integration-tests branch before it merges, just to be safe.