update nav to remove existing nav styles (#15222)

* update nav to remove existing nav styles * add missing space Co-authored-by: Alex Gibson <[email protected]> * update test locator prefix Co-authored-by: Alex Gibson <[email protected]> * remove redundant function and import --------- Co-authored-by: Alex Gibson <[email protected]>
mozilla · Oct 10, 2024 · 29f50b5 · 29f50b5
1 parent 3052bea
commit 29f50b5
Show file tree

Hide file tree

Showing 10 changed files with 1,230 additions and 491 deletions.
diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html
@@ -138,9 +138,13 @@
       <!--[if !IE]><!-->
         {# Standard site JS bundles served to all evergreen browsers plus IE 10 and above. #}
         {{ js_bundle('lib') }}
-        {{ js_bundle('ui') }}
         {{ js_bundle('fxa') }}
         {{ js_bundle('data') }}
+        {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
+          {{ js_bundle('m24-ui') }}
+        {% else %}
+          {{ js_bundle('ui') }}
+        {% endif %}
       <!--<![endif]-->
 
       <!--[if IE 9]>

diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/about-us.html
@@ -4,57 +4,57 @@
   file, You can obtain one at https://mozilla.org/MPL/2.0/.
  #}
 
- <li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
-   <a class="c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="c-menu-panel-about" data-testid="navigation-link-about-us">{{ ftl('navigation-refresh-about-us') }}</a>
-   <div class="c-menu-panel" id="c-menu-panel-about" data-testid="navigation-menu-about-us">
-     <div class="c-menu-panel-container">
-       <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-refresh-close-about-us-menu') }}</button>
-       <div class="c-menu-panel-content">
-         <ul class="mzp-l-content">
+ <li class="m24-c-menu-category mzp-has-drop-down mzp-js-expandable">
+   <a class="m24-c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="m24-c-menu-panel-about" data-testid="m24-navigation-link-about-us">{{ ftl('navigation-refresh-about-us') }}</a>
+   <div class="m24-c-menu-panel" id="m24-c-menu-panel-about" data-testid="m24-navigation-menu-about-us">
+     <div class="m24-c-menu-panel-container">
+       <button class="m24-c-menu-button-close" type="button" aria-controls="m24-c-menu-panel-about">{{ ftl('navigation-refresh-close-about-us-menu') }}</button>
+       <div class="m24-c-menu-panel-content">
+         <ul class="m24-mzp-l-content">
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="{{ url('mozorg.about.index') }}" data-link-text="About us" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-about-us') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="{{ url('mozorg.about.index') }}" data-link-text="About us" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-about-us') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla manifesto" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-manifesto') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla manifesto" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-manifesto') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="https://foundation.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Foundation" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-mozilla-foundation') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="https://foundation.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Foundation" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-mozilla-foundation') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-get-involved') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-get-involved') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-innovation-projects') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="https://future.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Innovation Projects" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-innovation-projects') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item">
-              <a class="c-menu-item-link" href="https://blog.mozilla.org/?{{ utm_params }}" data-link-text="Blog" data-link-position="topnav - about">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-blog') }}</h4>
+            <section class="m24-c-menu-item">
+              <a class="m24-c-menu-item-link" href="https://blog.mozilla.org/?{{ utm_params }}" data-link-text="Blog" data-link-position="topnav - about">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-blog') }}</h4>
               </a>
             </section>
           </li>
          </ul>
        </div>
-     </div><!-- close .c-menu-panel-container -->
-   </div><!-- close .c-menu-panel -->
+     </div><!-- close .m24-c-menu-panel-container -->
+   </div><!-- close .m24-c-menu-panel -->
  </li><!-- close about us -->
diff --git a/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html b/bedrock/base/templates/includes/protocol/navigation/menus-refresh/firefox.html
@@ -6,58 +6,58 @@
 
  {% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=firefox' %}
 
- <li class="c-menu-category mzp-has-drop-down mzp-js-expandable c-menu-category-has-icon">
-  <a class="c-menu-title" href="{{ url('firefox') }}" aria-haspopup="true" aria-controls="c-menu-panel-firefox" data-testid="navigation-link-firefox">
-    <img class="c-menu-title-icon" loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="16" height="16" alt="">
+ <li class="m24-c-menu-category mzp-has-drop-down mzp-js-expandable m24-c-menu-category-has-icon">
+  <a class="m24-c-menu-title" href="{{ url('firefox') }}" aria-haspopup="true" aria-controls="m24-c-menu-panel-firefox" data-testid="m24-navigation-link-firefox">
+    <img class="m24-c-menu-title-icon" loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="m24-c-menu-item-icon" width="16" height="16" alt="">
     {{ ftl('navigation-refresh-firefox-browsers') }}
   </a>
-  <div class="c-menu-panel" id="c-menu-panel-firefox">
-    <div class="c-menu-panel-container" data-testid="navigation-menu-firefox">
-      <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-firefox">{{ ftl('navigation-refresh-close-firefox-browsers-menu') }}</button>
-      <div class="c-menu-panel-content">
-        <ul class="mzp-l-content">
+  <div class="m24-c-menu-panel" id="m24-c-menu-panel-firefox">
+    <div class="m24-c-menu-panel-container" data-testid="m24-navigation-menu-firefox">
+      <button class="m24-c-menu-button-close" type="button" aria-controls="m24-c-menu-panel-firefox">{{ ftl('navigation-refresh-close-firefox-browsers-menu') }}</button>
+      <div class="m24-c-menu-panel-content">
+        <ul class="m24-mzp-l-content">
           <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-position="topnav - firefox" data-testid="navigation-menu-link-firefox-desktop">
-                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-desktop') }}</h4>
+            <section class="m24-c-menu-item mzp-has-icon">
+              <a class="m24-c-menu-item-link" href="{{ url('firefox.new') }}" data-link-text="Firefox Desktop Browser" data-link-position="topnav - firefox" data-testid="m24-navigation-menu-link-firefox-desktop">
+                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-desktop') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.ios') }}" data-link-text="Firefox for iOS" data-link-position="topnav - firefox">
-                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-ios') }}</h4>
+            <section class="m24-c-menu-item mzp-has-icon">
+              <a class="m24-c-menu-item-link" href="{{ url('firefox.browsers.mobile.ios') }}" data-link-text="Firefox for iOS" data-link-position="topnav - firefox">
+                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-ios') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.android') }}" data-link-text="Firefox for Android" data-link-position="topnav - firefox">
-                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-android') }}</h4>
+            <section class="m24-c-menu-item mzp-has-icon">
+              <a class="m24-c-menu-item-link" href="{{ url('firefox.browsers.mobile.android') }}" data-link-text="Firefox for Android" data-link-position="topnav - firefox">
+                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-for-android') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="{{ url('firefox.browsers.mobile.focus') }}" data-link-text="Firefox Focus" data-link-position="topnav - firefox">
-                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/focus/logo.svg') }}" class="c-menu-item-icon" width="32" height="32" alt="">
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-focus') }}</h4>
+            <section class="m24-c-menu-item mzp-has-icon">
+              <a class="m24-c-menu-item-link" href="{{ url('firefox.browsers.mobile.focus') }}" data-link-text="Firefox Focus" data-link-position="topnav - firefox">
+                <img loading="lazy" src="{{ static('protocol/img/logos/firefox/browser/focus/logo.svg') }}" class="m24-c-menu-item-icon" width="32" height="32" alt="">
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-focus') }}</h4>
               </a>
             </section>
           </li>
           <li>
-            <section class="c-menu-item mzp-has-icon">
-              <a class="c-menu-item-link" href="https://blog.mozilla.org/firefox/?{{ utm_params }}" data-link-text="Firefox Blog" data-link-position="topnav - firefox">
-                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M21.1 7.5c-.2-.2-.2-.5 0-.7l.5-.5c.8-.8 2.1-.8 2.9 0l1.2 1.2c.8.8.8 2.1 0 2.9l-.5.5c-.2.2-.5.2-.7 0l-3.4-3.4zm2.3 4.5c.2.2.2.5 0 .7L12.7 23.4c-.2.2-.4.3-.6.4l-5.7 2.4c-.3.1-.6 0-.7-.3-.1-.1-.1-.3 0-.4L8.1 20c.1-.2.3-.5.4-.6L19.2 8.6c.2-.2.5-.2.7 0l3.5 3.4zM11.5 22.7l-3.9 1.7 1.7-3.9c0-.1.1-.2.2-.2l2.3 2.3c-.1 0-.2.1-.3.1z"></path></svg>
-                <h4 class="c-menu-item-title">{{ ftl('navigation-refresh-firefox-blog') }}</h4>
+            <section class="m24-c-menu-item mzp-has-icon">
+              <a class="m24-c-menu-item-link" href="https://blog.mozilla.org/firefox/?{{ utm_params }}" data-link-text="Firefox Blog" data-link-position="topnav - firefox">
+                <svg class="m24-c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M21.1 7.5c-.2-.2-.2-.5 0-.7l.5-.5c.8-.8 2.1-.8 2.9 0l1.2 1.2c.8.8.8 2.1 0 2.9l-.5.5c-.2.2-.5.2-.7 0l-3.4-3.4zm2.3 4.5c.2.2.2.5 0 .7L12.7 23.4c-.2.2-.4.3-.6.4l-5.7 2.4c-.3.1-.6 0-.7-.3-.1-.1-.1-.3 0-.4L8.1 20c.1-.2.3-.5.4-.6L19.2 8.6c.2-.2.5-.2.7 0l3.5 3.4zM11.5 22.7l-3.9 1.7 1.7-3.9c0-.1.1-.2.2-.2l2.3 2.3c-.1 0-.2.1-.3.1z"></path></svg>
+                <h4 class="m24-c-menu-item-title">{{ ftl('navigation-refresh-firefox-blog') }}</h4>
               </a>
             </section>
           </li>
         </ul>
       </div>
-    </div><!-- close .c-menu-panel-container -->
-  </div><!-- close .c-menu-panel -->
+    </div><!-- close .m24-c-menu-panel-container -->
+  </div><!-- close .m24-c-menu-panel -->
 </li><!-- close firefox -->