update old call-out instances to new callout

mozilla · Jan 16, 2024 · 6045d04 · 6045d04
1 parent 57c6468
commit 6045d04
Show file tree

Hide file tree

Showing 23 changed files with 95 additions and 74 deletions.
diff --git a/bedrock/base/templates/macros-protocol.html b/bedrock/base/templates/macros-protocol.html
@@ -115,20 +115,26 @@
 {#
   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 %}
+  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.
 #}
-{% macro call_out(title, desc=None, class=None, include_cta=False, heading_level=2) -%}
-<section class="mzp-c-call-out {% if class %}{{ class }}{% endif %}">
+{% macro call_out(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) -%}
+<section class="mzp-c-callout {% if class %}{{ class }}{% endif %}">
   <div class="mzp-l-content">
-    <h{{ heading_level }} class="mzp-c-call-out-title">{{ title }}</h{{ heading_level }}>
+    {% 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 +145,28 @@
 
 
 {#
-  Call Out (compact): https://protocol.mozilla.org/components/detail/compact-call-out--default.html
+  Call Out (compact): https://protocol.mozilla.org/components/detail/compact-callout--default.html
   HTML import: {% from "macros-protocol.html" import call_out with context %}
-  CSS bundle: {% block page_css %} {{ css_bundle('protocol-call-out') }} {% endblock %}
+  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 %}">
+<section class="mzp-c-callout mzp-l-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 }}>
+    <div class="mzp-c-callout-content">
+      <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>

diff --git a/bedrock/careers/templates/careers/position.html b/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">
+<section id="why" class="mzp-c-callout">
   <div class="mzp-l-content">
-    <h2 class="mzp-c-call-out-title">Why Mozilla?</h2>
-    <p class="mzp-c-call-out-desc">
+    <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

diff --git a/bedrock/firefox/templates/firefox/browsers/browser-history.html b/bedrock/firefox/templates/firefox/browsers/browser-history.html
@@ -15,7 +15,7 @@
 {% endblock %}
 
 {% block page_css %}
-  {{ css_bundle('protocol-call-out') }}
+  {{ css_bundle('protocol-callout') }}
   {{ css_bundle('protocol-article') }}
   {{ css_bundle('browser-history') }}
 {% endblock %}

diff --git a/bedrock/firefox/templates/firefox/installer-help.html b/bedrock/firefox/templates/firefox/installer-help.html
@@ -16,7 +16,7 @@
 {% block page_css %}
   {{ css_bundle('protocol-card') }}
   {{ css_bundle('installer_help') }}
-  {{ css_bundle('protocol-call-out') }}
+  {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% block site_header %}
@@ -43,10 +43,10 @@
 
 {% block content %}
 <main class="mzp-l-content">
-  <section class="mzp-c-call-out mzp-t-hero installer-call-out">
+<section class="mzp-c-callout mzp-t-hero installer-callout">
     <div class="mzp-l-content">
-      <h1 class="mzp-c-call-out-title">{{ ftl('installer-help-page-title') }}</h1>
-      <p class="mzp-c-call-out-desc">
+      <h1 class="mzp-c-callout-title">{{ ftl('installer-help-page-title') }}</h1>
+      <p class="mzp-c-callout-desc">
         {{ ftl('installer-help-main-tagline') }}
         <span>{{ call_out_desc }}</span>
       </p>

diff --git a/bedrock/firefox/templates/firefox/testflight.html b/bedrock/firefox/templates/firefox/testflight.html
@@ -20,18 +20,23 @@
 
 {% block page_css %}
   {{ css_bundle('protocol-newsletter') }}
-  {{ css_bundle('protocol-call-out')}}
+  {{ css_bundle('protocol-callout')}}
   {{ css_bundle('protocol-emphasis-box') }}
   {{ css_bundle('firefox_ios_testflight') }}
 {% endblock %}
 
 {% block content %}
 <main>
+
   {% call call_out(
   title='Help shape the future <br>of Firefox for iOS'|safe,
   desc='Sign up to test pre-release versions to make Firefox even better.',
-  class='mzp-t-firefox mzp-t-dark mzp-t-product-firefox mzp-t-hero',
-  heading_level=1) %}
+  class='mzp-t-firefox mzp-t-dark mzp-t-hero',
+  heading_level=1,
+  brand=True,
+  brand_product='firefox',
+  brand_type='logo',
+  brand_size='lg') %}
   {% endcall %}
 
   <section class="mzp-l-content mzp-t-content-sm">

diff --git a/bedrock/firefox/templates/firefox/welcome/page1.html b/bedrock/firefox/templates/firefox/welcome/page1.html
@@ -26,7 +26,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% set _entrypoint = 'mozilla.org-firefox-welcome-1' %}

diff --git a/bedrock/firefox/templates/firefox/welcome/page2.html b/bedrock/firefox/templates/firefox/welcome/page2.html
@@ -16,7 +16,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% set _source = 'ffwelcome2' %}

diff --git a/bedrock/firefox/templates/firefox/welcome/page4.html b/bedrock/firefox/templates/firefox/welcome/page4.html
@@ -19,7 +19,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% set _entrypoint = 'mozilla.org-firefox-welcome-4' %}

diff --git a/bedrock/firefox/templates/firefox/welcome/page6.html b/bedrock/firefox/templates/firefox/welcome/page6.html
@@ -22,7 +22,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% block content_intro %}

diff --git a/bedrock/firefox/templates/firefox/welcome/page7.html b/bedrock/firefox/templates/firefox/welcome/page7.html
@@ -17,7 +17,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% block content_intro %}

diff --git a/bedrock/firefox/templates/firefox/welcome/page8.html b/bedrock/firefox/templates/firefox/welcome/page8.html
@@ -35,7 +35,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 {% block experiments %}
@@ -77,10 +77,10 @@
       </p>
     {% endcall %}
   {% elif variation == 'image' %}
-    <section class="mzp-c-call-out mzp-t-hero mzp-t-firefox mzp-t-dark" id="hero-image">
+    <section class="mzp-c-callout mzp-t-hero mzp-t-firefox mzp-t-dark" id="hero-image">
       <div class="mzp-l-content">
-        <div class="mzp-c-call-out-body">
-          <h1 class="mzp-c-call-out-title">{{ ftl('welcome-page8-your-privacy-respected') }}</h1>
+        <div class="mzp-c-callout-body">
+          <h1 class="mzp-c-callout-title">{{ ftl('welcome-page8-your-privacy-respected') }}</h1>
           <div class="image-container">
             <div class="image-wrapper">
               <img src="{{ static('img/firefox/welcome/trackers-magnify.svg') }}" alt="stop trackers from watching you">
@@ -106,10 +106,10 @@ <h1 class="mzp-c-call-out-title">{{ ftl('welcome-page8-your-privacy-respected')
       </div>
     </section>
   {% elif variation == 'animation' %}
-    <section class="mzp-c-call-out mzp-t-firefox mzp-t-dark mzp-t-hero" id="hero-animation">
+    <section class="mzp-c-callout mzp-t-firefox mzp-t-dark mzp-t-hero" id="hero-animation">
       <div class="mzp-l-content">
-        <div class="mzp-c-call-out-body">
-          <h1 class="mzp-c-call-out-title">{{ ftl('welcome-page8-your-privacy-respected') }}</h1>
+        <div class="mzp-c-callout-body">
+          <h1 class="mzp-c-callout-title">{{ ftl('welcome-page8-your-privacy-respected') }}</h1>
           <div class="image-container">
             <video autoplay loop playsinline muted>
               <source src="https://assets.mozilla.net/video/tracker-blocking.webm" type="video/webm">

diff --git a/bedrock/firefox/templates/firefox/welcome/page9.de.html b/bedrock/firefox/templates/firefox/welcome/page9.de.html
@@ -22,7 +22,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 
@@ -37,7 +37,7 @@
     heading_level=1
   ) %}
 
-  <p class="mzp-c-call-out-desc">Schnell, zuverlässig und extra sicher mit 30 Tage Geld-zurück-Garantie.</p>
+  <p class="mzp-c-callout-desc">Schnell, zuverlässig und extra sicher mit 30 Tage Geld-zurück-Garantie.</p>
 
   <p class="primary-cta">
     <a href="{{ url('products.vpn.landing') }}{{ _source }}" class="mzp-c-button mzp-t-product mzp-t-xl" data-cta-text="Get Mozilla VPN" data-cta-type="button">Hol dir Mozilla VPN</a>

diff --git a/bedrock/firefox/templates/firefox/welcome/page9.fr.html b/bedrock/firefox/templates/firefox/welcome/page9.fr.html
@@ -22,7 +22,7 @@
 
 {%block page_css %}
  {{ super()}}
- {{ css_bundle('protocol-call-out') }}
+ {{ css_bundle('protocol-callout') }}
 {% endblock %}
 
 
@@ -37,7 +37,7 @@
     heading_level=1
   ) %}
 
-  <p class="mzp-c-call-out-desc">Rapide, fiable et ultra sécurisé avec une garantie de remboursement de 30 jours.</p>
+  <p class="mzp-c-callout-desc">Rapide, fiable et ultra sécurisé avec une garantie de remboursement de 30 jours.</p>
 
   <p class="primary-cta">
     <a href="{{ url('products.vpn.landing') }}{{ _source }}" class="mzp-c-button mzp-t-product mzp-t-xl" data-cta-text="Get Mozilla VPN" data-cta-type="button">Installer Mozilla VPN</a>

diff --git a/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html b/bedrock/mozorg/templates/mozorg/about/policy/lean-data/build-security.html
@@ -20,7 +20,7 @@
 {% block page_css %}
   {{ css_bundle('protocol-split') }}
   {{ css_bundle('protocol-card') }}
-  {{ css_bundle('protocol-call-out') }}
+  {{ css_bundle('protocol-callout') }}
   {{ css_bundle('lean-data') }}
 {% endblock %}
 
@@ -163,15 +163,15 @@ <h3 class="mzp-c-card-title">Engage Your Users</h3>
   </div>
 </section>
 
-<aside class="contact mzp-c-call-out-compact">
-  <div class="mzp-l-content mzp-t-content-md">
-    <div class="mzp-c-call-out-content">
-      <div class="mzp-c-call-out-container">
-        <h3 class="mzp-c-call-out-title">Drive the conversation in your organization.</h3>
+<aside class="contact mzp-c-callout mzp-l-compact mzp-t-background-tertiary">
+  <div class="mzp-l-content mzp-t-content-xl">
+    <div class="mzp-c-callout-content">
+      <div class="mzp-c-callout-container">
+        <h3 class="mzp-c-callout-title">Drive the conversation in your organization.</h3>
       </div>
     </div>
-    <div class="mzp-c-call-out-cta">
-      <p class="mzp-c-call-out-cta-container">
+    <div class="mzp-c-callout-cta">
+      <p class="mzp-c-callout-cta-container">
         <a id="contact-button" href="https://docs.google.com/forms/d/191_0cQHpvBAutNRFZSkUjeeHfVRadKPa_v8Ct9x5mDQ/" class="mzp-c-button">Contact Us</a>
       </p>
     </div>

diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss
@@ -15,7 +15,7 @@
 
 @use '~@mozilla-protocol/core/protocol/css/components/modal';
 @use '~@mozilla-protocol/core/protocol/css/components/video';
-@use '~@mozilla-protocol/core/protocol/css/components/call-out';
+@use '~@mozilla-protocol/core/protocol/css/components/callout';
 @use '~@mozilla-protocol/core/protocol/css/templates/card-layout';
 @use '../protocol/components/custom-menu-list';
 

diff --git a/media/css/firefox/channel.scss b/media/css/firefox/channel.scss
@@ -23,11 +23,11 @@ $image-path: '/media/protocol/img';
 // * -------------------------------------------------------------------------- */
 // Call-outs
 
-.mzp-c-call-out {
+.mzp-c-callout {
     background-color: $color-marketing-gray-20;
 }
 
-.mzp-c-call-out-compact {
+.mzp-c-callout-compact {
     background: transparent;
 
     @media #{$mq-md} {
@@ -36,7 +36,7 @@ $image-path: '/media/protocol/img';
         &.mzp-t-product-developer,
         &.mzp-t-product-nightly,
         &.mzp-t-product-focus {
-            .mzp-c-call-out-content {
+            .mzp-c-callout-content {
                 @include background-size($layout-xl $layout-xl);
                 @include bidi(((padding, 0 0 0 $layout-2xl, 0 $layout-2xl 0 0),));
             }

diff --git a/media/css/firefox/installer-help.scss b/media/css/firefox/installer-help.scss
@@ -36,7 +36,7 @@ $image-path: '/media/protocol/img';
     }
 }
 
-.mzp-c-call-out.mzp-t-hero.installer-call-out {
+.mzp-c-call-out.mzp-t-hero.installer-callout {
     background-color: #fff;
 
     .mzp-l-content {

diff --git a/media/css/firefox/testflight.scss b/media/css/firefox/testflight.scss
@@ -6,11 +6,13 @@ $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
+@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
 
 // * -------------------------------------------------------------------------- */
 // Call-out
 
-.mzp-c-call-out.mzp-t-hero {
+.mzp-c-callout.mzp-t-hero {
     background-color: $color-ink-80;
 }