Rename components to match designs (#15429) (#15449)

mozilla · Nov 6, 2024 · 9cd76c9 · 9cd76c9
1 parent 585c704
commit 9cd76c9
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 92 deletions.
diff --git a/bedrock/base/templates/macros-m24.html b/bedrock/base/templates/macros-m24.html
@@ -28,18 +28,18 @@
   link_url=None,
   title=''
 ) -%}
-<div class="m24-c-grid-tile{% if class %} {{ class }}{% endif %}">
-  <a href="{{ link_url }}" class="m24-c-grid-tile-link"{% if link_attributes %} {{ link_attributes|safe }}{% endif %}>
+<div class="m24-c-gallery-tile{% if class %} {{ class }}{% endif %}">
+  <a href="{{ link_url }}" class="m24-c-gallery-tile-link"{% if link_attributes %} {{ link_attributes|safe }}{% endif %}>
     {% if image %}
-    <div class="m24-c-grid-tile-image">{{ image|safe }}</div>
+    <div class="m24-c-gallery-tile-image">{{ image|safe }}</div>
     {% endif %}
-    <div class="m24-c-grid-tile-content">
-      <h{{ heading_level }} class="m24-c-grid-tile-title"><span>{{ title }}</span></h{{ heading_level }}>
+    <div class="m24-c-gallery-tile-content">
+      <h{{ heading_level }} class="m24-c-gallery-tile-title"><span>{{ title }}</span></h{{ heading_level }}>
       {% if desc %}
-      <p class="m24-c-grid-tile-desc">{{ desc }}</p>
+      <p class="m24-c-gallery-tile-desc">{{ desc }}</p>
       {% endif %}
       {% if cta_text %}
-      <p class="m24-c-grid-tile-cta">
+      <p class="m24-c-gallery-tile-cta">
         <span>{{ cta_text }}</span>
       </p>
       {% endif %}

diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html
@@ -8,11 +8,11 @@
 {% from "macros-m24.html" import grid_tile with context %}
 
 <section class="m24-c-content">
-    <header class="m24-c-copy">
-      <h2 class="m24-c-copy-title">News and notes from our community</h2>
+    <header class="m24-c-intro">
+      <h2 class="m24-c-intro-title">News and notes from our community</h2>
     </header>
 
-    <div class="m24-c-grid-container">
+    <div class="m24-c-gallery-container">
       {{ grid_tile(
         image=resp_img(
           url="img/m24/todo-27-1.svg",
@@ -30,7 +30,7 @@ <h2 class="m24-c-copy-title">News and notes from our community</h2>
       ) }}
     </div>
 
-    <div class="m24-c-grid-container m24-l-grid-pair">
+    <div class="m24-c-gallery-container m24-l-grid-pair">
       {{ grid_tile(
         image=resp_img(
           url="img/m24/news-rise25-4-5.png",

diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/careers.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/careers.html
@@ -13,16 +13,16 @@
 </picture>
 {%- endmacro %}
 
-<div class="m24-c-consider">
-  <h2 class="m24-c-consider-title">Join us and make a difference</h2>
-  <div class="m24-c-consider-media">
+<div class="m24-c-careers">
+  <h2 class="m24-c-careers-title">Join us and make a difference</h2>
+  <div class="m24-c-careers-media">
     {{ career_pic('careers1-2-3', 'careers1-1-1') }}
     {{ career_pic('careers2-2-3', 'careers2-1-1') }}
     {{ career_pic('careers3-2-3', 'careers3-1-1') }}
     {{ career_pic('careers4-2-3', 'careers4-1-1') }}
   </div>
   <p class="m24-consider-cta-info">Join our team and push the boundaries of what's possible — without compromising on what matters.</p>
-  <div class="m24-c-consider-cta">
+  <div class="m24-c-careers-cta">
     <a href="{{ url('careers.home') }}" class="m24-c-cta" data-cta-text="See open positions">See open positions</a>
   </div>
 </div>
diff --git a/bedrock/mozorg/templates/mozorg/about/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/about/includes/m24/hero.html
@@ -7,9 +7,9 @@
 {% from "macros-protocol.html" import picto with context %}
 
 <section class="m24-c-hero">
-  <div class="m24-c-copy">
-    <div class="m24-c-copy-wrapper">
-      <h1 class="m24-c-copy-title m24-t-2xl">Reclaim the internet with us</h1>
+  <div class="m24-c-intro">
+    <div class="m24-c-intro-wrapper">
+      <h1 class="m24-c-intro-title m24-t-2xl">Reclaim the internet with us</h1>
       <p>Mozilla is working to put control of the internet back in the hands of the people using it.</p>
     </div>
   </div>

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html
@@ -8,12 +8,12 @@
 
 <section class="m24-section-ai m24-t-dark m24-t-transition-01 m24-t-transition-next">
   <div class="m24-c-content">
-    <header class="m24-c-copy">
-      <h2 class="m24-c-copy-title">Join the movement: <br>AI for the people</h2>
+    <header class="m24-c-intro">
+      <h2 class="m24-c-intro-title">Join the movement: <br>AI for the people</h2>
       <p>Our mission is to make it easy for people to build with and collaborate on open-source, trustworthy AI.</p>
     </header>
 
-    <div class="m24-c-grid-container">
+    <div class="m24-c-gallery-container">
       {{ grid_tile(
         class='m24-l-grid-half',
         image=resp_img(

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -5,11 +5,11 @@
 #}
 
 <section class="m24-c-hero">
-  <div class="m24-c-copy">
-    <div class="m24-c-copy-wrapper">
-      <h1 class="m24-c-copy-title m24-t-2xl">Welcome to Mozilla</h1>
+  <div class="m24-c-intro">
+    <div class="m24-c-intro-wrapper">
+      <h1 class="m24-c-intro-title m24-t-2xl">Welcome to Mozilla</h1>
       <p>From ethical tech to policies that defend your digital rights, we put you first—always.</p>
-      <p class="m24-c-copy-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
+      <p class="m24-c-intro-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta" data-cta-text="Learn about us">Learn about us</a></p>
     </div>
   </div>
 

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/products.html
@@ -6,46 +6,46 @@
 
 <div class="m24-c-products m24-t-transition-01">
   <section class="m24-c-content">
-    <div class="m24-c-copy">
-      <h2 class="m24-c-copy-title">Love the internet again</h2>
+    <div class="m24-c-intro">
+      <h2 class="m24-c-intro-title">Love the internet again</h2>
       <p>Break free from big tech—our products put you in control of a safer, more private internet experience.</p>
     </div>
 
-    <ul class="m24-c-spring">
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-firefox" href="{{ url('firefox') }}" data-cta-text="Firefox" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Firefox</strong>
-          <span class="m24-c-spring-info">The gold-standard for browsing with speed, privacy and control.</span>
+    <ul class="m24-c-launchpad">
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-firefox" href="{{ url('firefox') }}" data-cta-text="Firefox" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Firefox</strong>
+          <span class="m24-c-launchpad-info">The gold-standard for browsing with speed, privacy and control.</span>
         </a>
       </li>
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-thunderbird" href="https://www.thunderbird.net/{{ utm_params }}" data-cta-text="Thunderbird" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Thunderbird</strong>
-          <span class="m24-c-spring-info">The email and productivity app that maximizes your freedoms.</span>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-thunderbird" href="https://www.thunderbird.net/{{ utm_params }}" data-cta-text="Thunderbird" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Thunderbird</strong>
+          <span class="m24-c-launchpad-info">The email and productivity app that maximizes your freedoms.</span>
         </a>
       </li>
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Fakespot</strong>
-          <span class="m24-c-spring-info">Spot fake reviews, products, and maybe one day, even fake laughs ;)</span>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-fakespot" href="https://www.fakespot.com/{{ utm_params }}" data-cta-text="Fakespot" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Fakespot</strong>
+          <span class="m24-c-launchpad-info">Spot fake reviews, products, and maybe one day, even fake laughs ;)</span>
         </a>
       </li>
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-pocket" href="https://getpocket.com/signup{{ utm_params }}" data-cta-text="Pocket" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Pocket</strong>
-          <span class="m24-c-spring-info">Save the internet’s best content on any device — because who has time to read everything now?</span>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-pocket" href="https://getpocket.com/signup{{ utm_params }}" data-cta-text="Pocket" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Pocket</strong>
+          <span class="m24-c-launchpad-info">Save the internet’s best content on any device — because who has time to read everything now?</span>
         </a>
       </li>
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-vpn" href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Mozilla VPN</strong>
-          <span class="m24-c-spring-info">Keep your location and online adventures private — stream like a local, anywhere.</span>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-vpn" href="{{ url('products.vpn.landing') }}" data-cta-text="VPN" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Mozilla VPN</strong>
+          <span class="m24-c-launchpad-info">Keep your location and online adventures private — stream like a local, anywhere.</span>
         </a>
       </li>
-      <li class="m24-c-spring-item">
-        <a class="m24-c-spring-link m24-t-product-monitor" href="https://monitor.mozilla.org/{{ utm_params }}" data-cta-text="Monitor" data-cta-position="product-list">
-          <strong class="m24-c-spring-title">Mozilla Monitor</strong>
-          <span class="m24-c-spring-info">Get a heads-up if your personal info is at risk and lock it down like a pro.</span>
+      <li class="m24-c-launchpad-item">
+        <a class="m24-c-launchpad-link m24-t-product-monitor" href="https://monitor.mozilla.org/{{ utm_params }}" data-cta-text="Monitor" data-cta-position="product-list">
+          <strong class="m24-c-launchpad-title">Mozilla Monitor</strong>
+          <span class="m24-c-launchpad-info">Get a heads-up if your personal info is at risk and lock it down like a pro.</span>
         </a>
       </li>
     </ul>

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html
@@ -7,9 +7,9 @@
 {% from "macros-m24.html" import grid_tile with context %}
 
 <section class="m24-c-content m24-t-transition-next">
-  <h2 class="m24-c-copy-title">Explore issues shaping the future of the internet</h2>
+  <h2 class="m24-c-intro-title">Explore issues shaping the future of the internet</h2>
 
-  <div class="m24-c-grid-container">
+  <div class="m24-c-gallery-container">
     {{ grid_tile(
       class='m24-l-grid-half',
       image=resp_img(

diff --git a/media/css/m24/base.scss b/media/css/m24/base.scss
@@ -14,13 +14,13 @@
 @import 'vars/text';
 
 // components
-@import 'consider';
-@import 'copy';
+@import 'careers';
+@import 'intro';
 @import 'donate';
-@import 'grid';
+@import 'gallery';
 @import 'hero';
 @import 'showcase';
-@import 'spring';
+@import 'launchpad';
 @import 'theme';
 @import 'transition';
 

diff --git a/media/css/m24/consider.scss → media/css/m24/careers.scss b/media/css/m24/consider.scss → media/css/m24/careers.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 
-.m24-c-consider {
+.m24-c-careers {
     @include container;
     color: $m24-color-black;
     background-color: $m24-color-white;
@@ -14,13 +14,13 @@
     }
 }
 
-.m24-c-consider-title {
+.m24-c-careers-title {
     font-size: $alias-text-title-h2;
     padding-bottom: $spacer-xl;
     text-wrap-style: balance;
 }
 
-.m24-c-consider-media {
+.m24-c-careers-media {
     @include grid;
     padding-bottom: $spacer-xl;
 
@@ -39,29 +39,29 @@
     font-size: $alias-text-title-h4;
 }
 
-.m24-c-consider-cta {
+.m24-c-careers-cta {
     padding-top: $spacer-lg;
     text-align: right;
 }
 
 @media #{$mq-md} {
-    .m24-c-consider-media {
+    .m24-c-careers-media {
         display: flex;
         gap: $grid-gutter;
     }
 }
 
 @media #{$mq-lg} {
-    .m24-c-consider {
+    .m24-c-careers {
         @include grid;
     }
 
-    .m24-c-consider-title {
+    .m24-c-careers-title {
         grid-column: 1/-1;
         padding-bottom: $spacer-xl;
     }
 
-    .m24-c-consider-media {
+    .m24-c-careers-media {
         grid-column: 1/-1;
         grid-row: 2/4;
         padding: 0;
@@ -75,7 +75,7 @@
         grid-column: 1/7;
     }
 
-    .m24-c-consider-cta {
+    .m24-c-careers-cta {
         grid-column: 7/-1;
         padding: 0;
         place-self: end;

diff --git a/media/css/m24/grid.scss → media/css/m24/gallery.scss b/media/css/m24/grid.scss → media/css/m24/gallery.scss
@@ -9,7 +9,7 @@
 @import 'vars/spacing';
 @import 'vars/text';
 
-.m24-c-grid-container {
+.m24-c-gallery-container {
     @media #{$mq-md} {
         gap: $spacer-xl $grid-gutter;
         display: grid;
@@ -26,24 +26,24 @@
     }
 }
 
-.m24-c-grid-tile {
+.m24-c-gallery-tile {
     margin-bottom: $spacer-xl;
 
-    .m24-c-grid-tile-content > :last-child {
+    .m24-c-gallery-tile-content > :last-child {
         margin-bottom: 0;
     }
 
-    .m24-c-grid-tile-image {
+    .m24-c-gallery-tile-image {
         margin-bottom: $spacer-sm;
     }
 
-    .m24-c-grid-tile-title {
+    .m24-c-gallery-tile-title {
         font-size: $text-title-md;
         text-decoration: underline 0.075em transparent;
         transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out;
     }
 
-    .m24-c-grid-tile-cta > span {
+    .m24-c-gallery-tile-cta > span {
         font-size: $text-body-lg;
         font-weight: bold;
         text-decoration: underline 0.075em transparent;
@@ -80,24 +80,24 @@
     }
 }
 
-.m24-c-grid-tile-link {
+.m24-c-gallery-tile-link {
     text-decoration: none;
     color: inherit;
 
-    .m24-c-grid-tile-image > * {
+    .m24-c-gallery-tile-image > * {
         outline: $border-width solid transparent;
         transition: outline-color 150ms ease-in-out;
     }
 
     &:hover,
     &:focus,
     &:active {
-        .m24-c-grid-tile-image > * {
+        .m24-c-gallery-tile-image > * {
             outline-color: $m24-color-dark-green;
         }
 
-        .m24-c-grid-tile-title,
-        .m24-c-grid-tile-cta > span {
+        .m24-c-gallery-tile-title,
+        .m24-c-gallery-tile-cta > span {
             text-decoration-color: $m24-color-dark-green;
             color: $m24-color-dark-green;
         }

diff --git a/media/css/m24/hero.scss b/media/css/m24/hero.scss
@@ -6,11 +6,11 @@
 .m24-c-hero {
     padding-top: $spacer-lg;
 
-    .m24-c-copy {
+    .m24-c-intro {
         padding: $spacing-2xl $spacer-md;
         max-width: none;
 
-        .m24-c-copy-wrapper {
+        .m24-c-intro-wrapper {
             max-width: $content-max;
             margin: auto;
         }