Refresh: make grid tiles block links

bedrock/base/templates/macros-m24.html

@@ -10,38 +10,40 @@
   CSS Import: @import '[path to]/m24/grid';
   Macro Parameters:
     class: String providing modifier class(es) to the tile component.
-    cta_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped.
-    cta_link: String or url helper function provides href value for cta link.
-    cta_text: String indicating link text (usually a translation id wrapped in an ftl function).
+    cta_text: String indicating CTA text (usually a translation id wrapped in an ftl function).
     desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
     heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
-    title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
     image: Image to be used in the tile. Can pass an <img> element, resp_img or picture Python helpers.
+    link_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped.
+    link_url (Required): String or url helper function provides href value for the tile link.
+    title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
 #}
 {% macro grid_tile(
   class=None,
-  cta_attributes=None,
-  cta_link=None,
   cta_text=None,
   desc=None,
   heading_level=3,
   image=None,
+  link_attributes=None,
+  link_url=None,
   title=''
 ) -%}
 <div class="m24-c-grid-tile{% if class %} {{ class }}{% endif %}">
-  {% if image %}
-  <div class="m24-c-grid-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 }}>
-    {% if desc %}
-    <p class="m24-c-grid-tile-desc">{{ desc }}</p>
-    {% endif %}
-    {% if cta_text and cta_link %}
-    <p class="m24-c-grid-tile-cta">
-      <a class="m24-cta m24-t-small" href="{{ cta_link }}" {% if cta_attributes %}{{ cta_attributes|safe }}{% endif %}>{{ cta_text }}</a>
-    </p>
+  <a href="{{ cta_link }}" class="m24-c-grid-tile-link"{% if link_attributes %} {{ link_attributes|safe }}{% endif %}>
+    {% if image %}
+    <div class="m24-c-grid-tile-image">{{ image|safe }}</div>
     {% endif %}
-  </div>
+    <div class="m24-c-grid-tile-content">
+      <h{{ heading_level }} class="m24-c-grid-tile-title"><span>{{ title }}</span></h{{ heading_level }}>
+      {% if desc %}
+      <p class="m24-c-grid-tile-desc">{{ desc }}</p>
+      {% endif %}
+      {% if cta_text %}
+      <p class="m24-c-grid-tile-cta">
+        <span>{{ cta_text }}</span>
+      </p>
+      {% endif %}
+    </div>
+  </a>
 </div>
 {%- endmacro %}

bedrock/mozorg/templates/mozorg/about/includes/m24/amplify.html

@@ -26,7 +26,7 @@ <h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
         ),
         title='Lorem ipsum dolor sit amet',
         desc='Placeat voluptate ab asperiores est corporis velit dolorem ipsum dicta illo omnis.',
-        cta_link='#',
+        link_url='#',
         cta_text='Call to action',
       ) }}
 
@@ -42,7 +42,7 @@ <h2 class="m24-c-copy-title">Lorem ipsum dolor sit amet</h2>
         ),
         title='Amet sit dolor ipsum lorem',
         desc='Adipisci nihil odit expedita ipsum? Libero assumenda enim architecto optio?',
-        cta_link='#',
+        link_url='#',
         cta_text='Call to action',
       ) }}
     </div>

bedrock/mozorg/templates/mozorg/home/includes/m24/ai-grid.html

@@ -26,7 +26,7 @@ <h2 class="m24-c-copy-title">AI for the people</h2>
       ),
       title='Llamafile',
       desc='Run large language models (LLMs) easily on your computer Llamafile – no installation needed, and your data stays safe on your device.',
-      cta_link='#',
+      link_url='#',
       cta_text='Visit',
     ) }}
 
@@ -43,7 +43,7 @@ <h2 class="m24-c-copy-title">AI for the people</h2>
       ),
       title='Lumigator',
       desc='Find the “just right” LLM for your needs, use case, and data – like Goldilocks, but with sharper teeth.',
-      cta_link='#',
+      link_url='#',
       cta_text='Visit',
     ) }}
 
@@ -57,7 +57,7 @@ <h2 class="m24-c-copy-title">AI for the people</h2>
         }
       ),
       title='Data Futures Lab',
-      cta_link='#',
+      link_url='#',
       cta_text='Visit',
     ) }}
 
@@ -71,7 +71,7 @@ <h2 class="m24-c-copy-title">AI for the people</h2>
         }
       ),
       title='Trustworthy AI Fellow',
-      cta_link='#',
+      link_url='#',
       cta_text='Visit',
     ) }}
 
@@ -85,7 +85,7 @@ <h2 class="m24-c-copy-title">AI for the people</h2>
         }
       ),
       title='Mozilla Builders',
-      cta_link='#',
+      link_url='#',
       cta_text='Visit',
     ) }}
   </div>

bedrock/mozorg/templates/mozorg/home/includes/m24/resources-grid.html

@@ -20,9 +20,9 @@
       ),
       title='Privacy Not Included',
       desc='Search our reviews to see which tech gadgets and apps are stealthily sneaking your data.',
-      cta_link='https://foundation.mozilla.org/privacynotincluded/',
+      link_url='https://foundation.mozilla.org/privacynotincluded/',
       cta_text='Search now',
-      cta_attributes='rel="external" target="_blank" data-link-type="link" data-link-text="Search now"',
+      link_attributes='rel="external" target="_blank" data-link-type="link" data-link-text="Search now"',
     ) }}
 
     {{ grid_tile(
@@ -37,9 +37,9 @@
       ),
       title='IRL Podcast',
       desc='Our multi-award winning podcast introduces the change-makers working to make the internet safer and AI more trustworthy.',
-      cta_link='https://irlpodcast.org/',
+      link_url='https://irlpodcast.org/',
       cta_text='Listen',
-      cta_attributes='rel="external" data-link-type="link" data-link-text="Listen"',
+      link_attributes='rel="external" data-link-type="link" data-link-text="Listen"',
     ) }}
   </div>
 </section>

media/css/m24/grid.scss

@@ -35,6 +35,15 @@
 
     .m24-c-grid-tile-title {
         font-size: var(--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 {
+        font-size: var(--text-body-lg);
+        font-weight: bold;
+        text-decoration: underline 0.075em transparent;
+        transition: text-decoration-color 150ms ease-in-out, color 150ms ease-in-out;
     }
 
     @media #{$mq-lg} {
@@ -66,3 +75,27 @@
         }
     }
 }
+
+.m24-c-grid-tile-link {
+    text-decoration: none;
+    color: inherit;
+
+    .m24-c-grid-tile-image > * {
+        outline: 2px solid transparent;
+        transition: outline-color 150ms ease-in-out;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        .m24-c-grid-tile-image > * {
+            outline-color: $m24-color-dark-green;
+        }
+
+        .m24-c-grid-tile-title,
+        .m24-c-grid-tile-cta > span {
+            text-decoration-color: $m24-color-dark-green;
+            color: $m24-color-dark-green;
+        }
+    }
+}