Update to Protocol v.19.0.0 (#14084)

* update old call-out instances to new callout
* removed deprecated internships page
* updated newsletter component
* updated instances of call_out macro to callout
* added classname to callout compact for styling
* added analytics events in newsletter

bedrock/base/templates/macros-protocol.html

@@ -114,21 +114,28 @@
 
 {#
   Call Out: https://protocol.mozilla.org/components/detail/call-out--default.html
-  HTML import: {% from "macros-protocol.html" import call_out with context %}
-  CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %}
+  HTML import: {% from "macros-protocol.html" import callout with context %}
+  CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
   Macro parameters:
     title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
     desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
     class: String adding class(es) to the section tag.
     include_cta: Boolean indicating whether or not to include the body of the macro call (usually a mix of text and html).
     heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
+    brand: Boolean indicating whether or not to display a Mozilla product logo or wordmark.
+    brand_product: String indicating what Mozilla product is to be displayed.
+    brand_type: String for choosing whether a logo or a wordmark is to be displayed.
+    brand_size: String to indicate size of the logo or wordmark to be added.
+    brand_text: String naming the branding's product. Used for accessibility purposes. Is optional as it depends on if the logo/wordmark used is for decorative purposes or not.
+    content_width: String to declare size of the container using Protocol's content width classes (i.e. mzp-t-content-md / mzp-t-content-lg). When using this macro, only declare the T-shirt sizing strings we have in place (i.e. 'sm', 'md', 'lg', 'xl'). Content width of the Callout container's macro is defaulted to mzp-t-content-lg.
 #}
-{% macro call_out(title, desc=None, class=None, include_cta=False, heading_level=2) -%}
-<section class="mzp-c-call-out {% if class %}{{ class }}{% endif %}">
-  <div class="mzp-l-content">
-    <h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}>
+{% macro callout(title, desc=None, class=None, include_cta=False, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None, content_width=None) -%}
+<section class="mzp-c-callout {% if class %}{{ class }}{% endif %}">
+  <div class="mzp-l-content {% if content_width %}mzp-t-content-{{content_width}} {% else %} mzp-t-content-lg {% endif %}">
+    {% if brand %}<div class="mzp-t-callout-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}">{{ brand_text }}</div>{% endif %}
+    <h{{ heading_level }} class="mzp-c-callout-title">{{ title }}</h{{ heading_level }}>
     {% if desc %}
-    <p class="mzp-c-call-out-desc">{{ desc }}</p>
+    <p class="mzp-c-callout-desc">{{ desc }}</p>
     {% endif %}
     {% if include_cta %}
       {{ caller() }}
@@ -139,28 +146,30 @@
 
 
 {#
-  Call Out (compact): https://protocol.mozilla.org/components/detail/compact-call-out--default.html
-  HTML import: {% from "macros-protocol.html" import call_out with context %}
-  CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %}
+  Call Out (compact): https://protocol.mozilla.org/components/detail/compact-callout--default.html
+  HTML import: {% from "macros-protocol.html" import callout with context %}
+  CSS bundle: {% block page_css %} {{ css_bundle('protocol-callout') }} {% endblock %}
   Marco Parameters:
     title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
     desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
     class: tring adding class(es) to the section tag.
     heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
 #}
-{% macro call_out_compact(title, desc=None, class=None, heading_level=2) -%}
-<section class="mzp-c-call-out-compact {% if class %}{{ class }}{% endif %}">
-  <div class="mzp-l-content">
-    <div class="mzp-c-call-out-content">
-      <div class="mzp-c-call-out-container">
-        <h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}>
+{% macro callout_compact(title, desc=None, class=None, heading_level=2, brand=False, brand_product=None, brand_type=None, brand_size=None, brand_text=None) -%}
+<section class="mzp-c-callout mzp-l-compact {% if class %}{{ class }}{% endif %}">
+
+  <div class="mzp-l-content mzp-t-content-lg">
+    <div class="mzp-c-callout-content {% if brand %}mzp-c-callout-content-has-brand{% endif %}">
+      {% if brand %}<div class="mzp-t-callout-compact-brand mzp-c-{{ brand_type }} mzp-t-{{ brand_type }}-{{ brand_size }} mzp-t-product-{{ brand_product }}">{{ brand_text }}</div>{% endif %}
+      <div class="mzp-c-callout-container">
+        <h{{ heading_level }} class="mzp-c-callout-title">{{ title }}</h{{ heading_level }}>
         {% if desc %}
-        <p class="mzp-c-call-out-desc">{{ desc }}</p>
+        <p class="mzp-c-callout-desc">{{ desc }}</p>
         {% endif %}
       </div>
     </div>
-    <div class="mzp-c-call-out-cta">
-      <div class="mzp-c-call-out-cta-container">
+    <div class="mzp-c-callout-cta">
+      <div class="mzp-c-callout-cta-container">
         {{ caller() }}
       </div>
     </div>

bedrock/careers/templates/careers/position.html

@@ -68,10 +68,10 @@ <h3 class="mzp-c-menu-list-title">Apply Now</h3>
 </section>
 </div>
 
-<section id="why" class="mzp-c-call-out">
-  <div class="mzp-l-content">
-    <h2 class="mzp-c-call-out-title">Why Mozilla?</h2>
-    <p class="mzp-c-call-out-desc">
+<section id="why" class="mzp-c-callout">
+  <div class="mzp-l-content mzp-t-content-md">
+    <h2 class="mzp-c-callout-title">Why Mozilla?</h2>
+    <p class="mzp-c-callout-desc">
       At Mozilla, we’re serving humanity—by maintaining a safe, open internet—while also
       helping the individual humans employed here to reach their personal and
       professional goals. With a relatively small team serving hundreds of millions of

bedrock/careers/views.py

@@ -57,10 +57,6 @@ class LocationsView(L10nTemplateView):
     template_name = "careers/locations.html"
 
 
-class InternshipsView(L10nTemplateView):
-    template_name = "careers/internships.html"
-
-
 class BenefitsView(L10nTemplateView):
     template_name = "careers/benefits.html"
 

bedrock/contentful/templates/includes/contentful/all.html

@@ -5,12 +5,12 @@
 #}
 
 
-{% from "macros-protocol.html" import call_out_compact, card, split, picto with context %}
+{% from "macros-protocol.html" import callout_compact, card, split, picto with context %}
 
 {% for entry in entries -%}
     {% if entry.component == 'callout' %}
 
-      {% call call_out_compact(
+      {% call callout_compact(
         title=entry.title,
         desc=entry.body|external_html,
         class=entry.theme_class + ' ' + entry.product_class,

bedrock/firefox/templates/firefox/browsers/best-browser.html

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% from "macros-protocol.html" import call_out_compact with context %}
+{% from "macros-protocol.html" import callout_compact with context %}
 
 {% extends "firefox/base/base-protocol.html" %}
 
@@ -16,7 +16,7 @@
 
 {% block page_css %}
   {{ css_bundle('protocol-article') }}
-  {{ css_bundle('protocol-call-out') }}
+  {{ css_bundle('protocol-callout') }}
   {{ css_bundle('best-browser') }}
 {% endblock %}
 
@@ -118,9 +118,13 @@ <h2>{{ ftl('best-browser-a-browser-that-minds') }}</h2>
   </article>
 </div>
 
-{% call call_out_compact(
+{% call callout_compact(
   title=ftl('best-browser-take-control-of-your'),
-  class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark'
+  class='mzp-t-product-firefox mzp-t-firefox mzp-t-dark',
+  brand=True,
+  brand_product='firefox',
+  brand_type='logo',
+  brand_size='lg',
 ) %}
 <div class="download-firefox">
   {{ download_firefox(dom_id='safebrowser-bottom-download', download_location='secondary cta') }}