Refresh: Add springboard component (Fix #15305)

Add a component to display the list of links to blogs, videos, and podcasts.

bedrock/base/templates/macros-m24.html

@@ -47,3 +47,38 @@
   </a>
 </div>
 {%- endmacro %}
+
+
+{#
+  Springboard Item
+  HTML Import: {% from "macros-m24.html" import springboard_item with context %}
+  CSS Import: @import '[path to]/m24/foo';
+  Macro Parameters:
+    link_url (Required):
+    class: String providing modifier class(es) to the tile component.
+
+#}
+{% macro springboard_item(
+  author=None,
+  category=None,
+  class=None,
+  date=None,
+  heading_level=3,
+  icon='',
+  image=None,
+  link_attributes=None,
+  link_url=None,
+  preview=None,
+  type=None
+) -%}
+<tr class="m24-c-springboard-item">
+  <td class="m24-c-springboard-type"><span class="m24-c-springboard-icon m24-c-springboard-icon-{{ type|lower }}"></span>{{ type }}</td>
+  <td class="m24-c-springboard-date">{{ date }}</td>
+  <td class="m24-c-springboard-cat">{{ category }}</td>
+  <td class="m24-c-springboard-author">{{ author }}</td>
+  <td class="m24-c-springboard-preview"><a href="{{ link_url }}" class="m24-c-springboard-link">{{ preview }}</a></td>
+  <td class="m24-c-springboard-thumb">
+    {{ image }}
+  </td>
+</tr>
+{%- endmacro %}

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -53,3 +53,7 @@
     {% include 'includes/protocol/footer/footer.html' %}
   {% endwith %}
 {% endblock %}
+
+{% block js %}
+  {{ js_bundle('m24-springboard') }}
+{% endblock %}

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

@@ -4,15 +4,14 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% from "macros-m24.html" import grid_tile with context %}
+{% from "macros-m24.html" import grid_tile, springboard_item with context %}
 
 <section class="m24-section-ai m24-t-dark m24-t-transition-01 m24-t-transition-next">
-  <div class="m24-c-content">
+  <section class="m24-c-content">
     <header class="m24-c-copy">
       <h2 class="m24-c-copy-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">
       {{ grid_tile(
         class='m24-l-grid-half',
@@ -90,7 +89,130 @@
         cta_text='Visit',
       ) }}
     </div>
-
     <p class="m24-c-section-cta"><a href="#" class="m24-c-cta" data-cta-text="Explore Mozilla AI">Explore Mozilla AI</a></p>
-  </div>
+  </section>
-</section>
+  <section class="m24-c-content" id="media">
+    <header class="m24-c-copy">
+      <h2 class="m24-c-copy-title">You, AI and the internet — what’s really going on?</h2>
+    </header>
+
+    <table class="m24-c-springboard" id="ai-media">
+        <thead class="m24-c-springboard-head">
+            <tr>
+              <th>Media</th>
+              <th>Date</th>
+              <th>Category</th>
+              <th>Author</th>
+              <th>Preview</th>
+            </tr>
+        </thead>
+        <tbody>
+        {{ springboard_item(
+          link_url='https://blog.mozilla.org/en/mozilla/mozilla-anonym-raising-the-bar-for-privacy-preserving-digital-advertising/',
+          type='Article',
+          date='06.11.24',
+          category='Artificial Intelligence',
+          author='Laura Chambers',
+          preview='Introducing Anonym: Raising the bar for privacy-preserving digital advertising.',
+          image=resp_img(
+            url="img/home/2024/media/chambers.png",
+            srcset={'img/home/2024/media/chambers-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url='https://blog.mozilla.org/en/mozilla/keeping-genai-technologies-secure-is-a-shared-responsibility/',
+          type='Article',
+          date='06.01.24',
+          category='Privacy & Security',
+          author='Saoud Khalifah',
+          preview='Keeping GenAI technologies secure is a shared responsibility.',
+          image=resp_img(
+            url="img/home/2024/media/khalifah.png",
+            srcset={'img/home/2024/media/khalifah-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url="https://irlpodcast.org/season7/episode5/",
+          type='Podcast',
+          date='05.23.24',
+          category='Artificial Intelligence',
+          author='IRL Podcast',
+          preview='From Hollywood to Hip Hop, artists are negotiating consent for use of AI in the creative industries. Bridget Todd speaks to artists who are pushing the boundaries.',
+          image=resp_img(
+            url="img/home/2024/media/irl-green.png",
+            srcset={'img/home/2024/media/irl-green-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url="https://blog.mozilla.org/en/products/firefox/new-mozilla-docuseries-firefox-presents-launch/",
+          type='Video',
+          date='05.01.24',
+          category='News',
+          author='Rebecca Smith',
+          preview='Mozilla celebrates groundbreaking creators in new docuseries ‘Firefox Presents’.',
+          image=resp_img(
+            url="img/home/2024/media/smith.png",
+            srcset={'img/home/2024/media/smith-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url="https://irlpodcast.org/season7/episode4/",
+          type='Podcast',
+          date='28.07.22',
+          category='Artificial Intelligence',
+          author='IRL Podcast',
+          preview='Big tech’s power over language, means power over people. Bridget Todd talks to language community leaders paving the way for voice AI in their own languages and dialects.',
+          image=resp_img(
+            url="img/home/2024/media/irl-pink.png",
+            srcset={'img/home/2024/media/irl-pink-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url="https://irlpodcast.org/season7/episode3/",
+          type='Podcast',
+          date='07.11.23',
+          category='Artificial Intelligence',
+          author='IRL Podcast',
+          preview='Why does it so often feel like we’re part of a mass AI experiment? What is the responsible way to test new technologies? Bridget Todd explores what it means to live with unproven AI systems that impact millions of people as they roll out across public life.',
+          image=resp_img(
+            url="img/home/2024/media/irl-orange.png",
+            srcset={'img/home/2024/media/irl-orange-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+        {{ springboard_item(
+          link_url="https://blog.mozilla.org/en/internet-culture/kids-mental-health-screen-time-technology/",
+          type='Article',
+          date='16.06.22',
+          category='Privacy & Security',
+          author='Kristina Bravo',
+          preview='Kids are growing up in a very online world. What’s a concerned parent to do?',
+          image=resp_img(
+            url="img/home/2024/media/bravo.png",
+            srcset={'img/home/2024/media/bravo-high-res.png': '2x'},
+            optional_attributes={
+              "loading": "lazy",
+              "alt": ""
+            })
+        ) }}
+      </tbody>
+    </table>
+  </section>
+</div>

media/css/m24/base.scss

@@ -21,6 +21,7 @@
 @import 'hero';
 @import 'showcase';
 @import 'spring';
+@import 'springboard';
 @import 'theme';
 @import 'transition';
 

media/css/m24/springboard.scss

@@ -0,0 +1,212 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+@property --border-edge {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: transparent;
+}
+
+.m24-c-springboard {
+    position: relative;
+    display: grid;
+    margin: 0 calc($container-padding * -1);
+}
+
+.m24-c-springboard-head {
+    @include visually-hidden;
+}
+
+.m24-c-springboard-item {
+    --border-edge: #{$m24-color-white};
+    background-color: $m24-color-white;
+    background-image: linear-gradient(90deg, var(--border-edge) $container-padding, $m24-color-black $container-padding, $m24-color-black calc(100% - $container-padding), var(--border-edge) calc(100% - $container-padding));
+    background-repeat: no-repeat;
+    background-size: auto $border-width;
+    color: $m24-color-black;
+    display: grid;
+    gap: $spacer-md;
+    grid-template:
+        "type cat cat"
+        "summary summary summary"
+        "date author author";
+    padding: calc($spacer-md + 2px) $container-padding $spacer-md;
+    transition: all 0.3s ease-in-out, --border-edge 0.3s ease-in-out;
+
+    tbody > &:first-child {
+        border-top: 0;
+    }
+
+    :link,
+    :visited {
+        color: $m24-color-black;
+        text-decoration: none;
+    }
+
+    :link:hover {
+        text-decoration: underline;
+    }
+
+    &.m24-is-clickable {
+        &:hover,
+        &:focus-within {
+            --border-edge: #{$m24-color-black};
+            background-color: $m24-color-black;
+            color: $m24-color-white;
+            cursor: pointer;
+
+            & + .m24-c-springboard-item {
+                --border-edge: #{$m24-color-black};
+            }
+
+            :link,
+            :visited {
+                color: $m24-color-white;
+            }
+
+            :link:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+}
+
+.m24-c-springboard-type {
+    grid-area: type;
+    font-weight: bold;
+}
+
+.m24-c-springboard-icon {
+    @include bidi(((margin-right, $spacer-xs, margin-left, 0),));
+    display: inline-block;
+    height: 24px;
+    vertical-align: middle;
+    width: 24px;
+    background-size: 24px 24px;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.m24-c-springboard-cat {
+    font-weight: bold;
+    grid-area: cat;
+    text-align: end;
+}
+
+.m24-c-springboard-preview {
+    color: $m24-color-functional-gray;
+    grid-area: summary;
+
+    a:hover & {
+        color: $m24-color-black;
+    }
+}
+
+.m24-c-springboard-date {
+    grid-area: date;
+}
+
+.m24-c-springboard-author {
+    grid-area: author;
+    text-align: end;
+}
+
+.m24-c-springboard-thumb {
+    display: none;
+}
+
+.m24-c-springboard-link {
+    // this makes the text more legible when the focus ring is around it
+    display: block;
+}
+
+@media #{$mq-lg} {
+    .m24-c-springboard {
+        display: table;
+        border-collapse: collapse;
+    }
+
+    .m24-c-springboard-item {
+        display: table-row;
+
+        > td {
+            @include bidi(((padding, calc($spacer-sm + 2px) $spacer-lg $spacer-sm 0, calc($spacer-sm + 2px) 0 $spacer-sm $spacer-lg),));
+            display: table-cell;
+            vertical-align: top;
+            text-wrap: nowrap;
+        }
+
+        &:first-child > td {
+            border-top: 0;
+        }
+
+        &:hover,
+        &:focus-within {
+            .m24-c-springboard-thumb {
+                opacity: 1;
+            }
+        }
+
+        .m24-c-springboard-type {
+            @include bidi(((padding-left, $container-padding, padding-right, 0),));
+        }
+
+        .m24-c-springboard-preview {
+            @include bidi(((padding-right, $container-padding, padding-left, 0),));
+            text-wrap: wrap;
+        }
+
+        .m24-c-springboard-thumb {
+            @include bidi(((right, 0, left, auto),));
+            border: 0;
+            bottom: calc(100% + #{$spacer-sm});
+            display: block;
+            opacity: 0;
+            position: absolute;
+            transition: opacity 0.3s ease-in-out;
+            width: 152px;
+        }
+    }
+
+    .m24-c-springboard-author,
+    .m24-c-springboard-cat {
+        text-align: start;
+    }
+}
+
+// icons
+.m24-c-springboard-item,
+.m24-t-dark .m24-c-springboard-item.m24-is-clickable:hover,
+.m24-t-dark .m24-c-springboard-item.m24-is-clickable:focus-within {
+    .m24-c-springboard-icon-article {
+        background-image: url('/media/img/icons/m24-small/glasses.svg');
+    }
+
+    .m24-c-springboard-icon-podcast {
+        background-image: url('/media/img/icons/m24-small/headphones.svg');
+        background-size: 18px 18px;
+    }
+
+    .m24-c-springboard-icon-video {
+        background-image: url('/media/img/icons/m24-small/arrow-right.svg');
+        background-size: 16px 16px;
+    }
+}
+
+.m24-c-springboard-item.m24-is-clickable:hover,
+.m24-c-springboard-item.m24-is-clickable:focus-within,
+.m24-t-dark .m24-c-springboard-item {
+    .m24-c-springboard-icon-article {
+        background-image: url('/media/img/icons/m24-small/glasses-white.svg');
+    }
+
+    .m24-c-springboard-icon-podcast {
+        background-image: url('/media/img/icons/m24-small/headphones-white.svg');
+    }
+
+    .m24-c-springboard-icon-video {
+        background-image: url('/media/img/icons/m24-small/arrow-right-white.svg');
+    }
+}

media/css/m24/vars/_spacing.scss

@@ -12,6 +12,9 @@ $spacer-sm: var(--spacer-sm);
 $spacer-xs: var(--spacer-xs);
 $spacer-2xs: var(--spacer-2xs);
 
+// border
+$border-width: 2px;
+
 // container
 $container-padding: var(--container-padding);
 

media/img/icons/m24-small/download-white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M19.5 17.31v2.13H4.72v-2.13h-2.6v4.73H22.1v-4.73h-2.6z" style="fill: rgb(255, 255, 255);"/>
+  <path d="M21.44 7.09h-8.03V2.06h-2.6v5.03H2.78l9.33 11.09 9.33-11.09Zm-5.59 2.59-3.74 4.46-3.74-4.46h7.48Z" style="fill: rgb(255, 255, 255);"/>
+</svg>

media/img/icons/m24-small/download.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M19.5 17.31v2.13H4.72v-2.13h-2.6v4.73H22.1v-4.73h-2.6z"/>
+  <path d="M21.44 7.09h-8.03V2.06h-2.6v5.03H2.78l9.33 11.09 9.33-11.09Zm-5.59 2.59-3.74 4.46-3.74-4.46h7.48Z"/>
+</svg>

media/img/icons/m24-small/glasses-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.26 10.47v-.15c0-1.22-.99-2.22-2.22-2.22h-3.36c-1.15 0-2.1.89-2.21 2.02h-.96A2.22 2.22 0 0 0 9.3 8.1H5.94c-1.22 0-2.22.99-2.22 2.22v.15H1.97v1.75h1.75c.11 2.05 1.82 3.68 3.9 3.68s3.9-1.75 3.9-3.9v-.13h.94V12c0 2.15 1.75 3.9 3.9 3.9s3.78-1.63 3.9-3.68h1.75v-1.75h-1.75ZM9.78 12c0 1.19-.96 2.15-2.15 2.15-1.11 0-2.03-.85-2.14-1.93v-1.75h-.01v-.15c0-.26.21-.47.47-.47h3.36c.26 0 .47.21.47.47V12Zm8.74-1.53v1.75a2.174 2.174 0 0 1-2.15 1.93c-1.19 0-2.15-.96-2.15-2.15v-1.68c0-.26.21-.47.47-.47h3.36c.26 0 .47.21.47.47v.15Z" style="fill:#ffffff"/></svg>

media/img/icons/m24-small/glasses.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.26 10.47v-.15c0-1.22-.99-2.22-2.22-2.22h-3.36c-1.15 0-2.1.89-2.21 2.02h-.96A2.22 2.22 0 0 0 9.3 8.1H5.94c-1.22 0-2.22.99-2.22 2.22v.15H1.97v1.75h1.75c.11 2.05 1.82 3.68 3.9 3.68s3.9-1.75 3.9-3.9v-.13h.94V12c0 2.15 1.75 3.9 3.9 3.9s3.78-1.63 3.9-3.68h1.75v-1.75h-1.75ZM9.78 12c0 1.19-.96 2.15-2.15 2.15-1.11 0-2.03-.85-2.14-1.93v-1.75h-.01v-.15c0-.26.21-.47.47-.47h3.36c.26 0 .47.21.47.47V12Zm8.74-1.53v1.75a2.174 2.174 0 0 1-2.15 1.93c-1.19 0-2.15-.96-2.15-2.15v-1.68c0-.26.21-.47.47-.47h3.36c.26 0 .47.21.47.47v.15Z" style="fill:#010101"/></svg>

media/img/icons/m24-small/headphones-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.77 13.19V9.42c0-4.24-3.45-7.62-7.7-7.62s-7.7 3.38-7.7 7.62v3.77H2.06v8.86h7.26v-8.86H7.01V9.42c0-2.79 2.27-4.98 5.06-4.98s5.06 2.19 5.06 4.98v3.77h-2.31v8.86h7.26v-8.86h-2.31ZM7.02 19.74H4.38V15.5h2.64v4.24Zm12.75 0h-2.64V15.5h2.64v4.24Z" style="fill:#ffffff"/></svg>

media/img/icons/m24-small/headphones.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.77 13.19V9.42c0-4.24-3.45-7.62-7.7-7.62s-7.7 3.38-7.7 7.62v3.77H2.06v8.86h7.26v-8.86H7.01V9.42c0-2.79 2.27-4.98 5.06-4.98s5.06 2.19 5.06 4.98v3.77h-2.31v8.86h7.26v-8.86h-2.31ZM7.02 19.74H4.38V15.5h2.64v4.24Zm12.75 0h-2.64V15.5h2.64v4.24Z" style="fill:#010101"/></svg>

media/img/icons/m24-small/plus-white.svg

@@ -1,6 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.06 10.87h-8.82V2.05h-2.38v8.82H2.04v2.37h8.82v8.82h2.38v-8.82h8.82v-2.37z" style="fill:#ffffff"/></svg>
-<svg width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732" xmlns="http://www.w3.org/2000/svg">
-  <defs/>
-  <path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)" style="fill: rgb(255, 255, 255);"/>
-  <path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)" style="fill: rgb(255, 255, 255);"/>
-</svg>

media/img/icons/m24-small/plus.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="enable-background:new 0 0 896.1732 896.1732"><path d="M3.914 9.793H.9V-.9h3.014V9.793Zm0 3.014 10.493-.126V9.793H3.914v3.014Z" transform="rotate(-90 7.654 6.753)"/><path d="m13.004 23.314-3.024.036.029-13.36h2.995v13.324Zm0-.014 10.493-.126v-2.888l-10.493-.003V23.3Z" transform="rotate(90 16.743 17.246)"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.06 10.87h-8.82V2.05h-2.38v8.82H2.04v2.37h8.82v8.82h2.38v-8.82h8.82v-2.37z" style="fill:#010101"/></svg>

media/js/base/protocol/m24-springboard.es6.js

@@ -0,0 +1,22 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+const items = document.querySelectorAll('.m24-c-springboard-item');
+
+for (let i = 0; i < items.length; ++i) {
+    const item = items[i];
+    const preview = item.querySelector('.m24-c-springboard-link');
+    item.classList.add('m24-is-clickable');
+    item.addEventListener(
+        'click',
+        () => {
+            preview.click();
+        },
+        false
+    );
+}
+
+// when row clicked, pass action through to a href? (to preserve right click functionality?)

media/static-bundles.json

@@ -1788,6 +1788,12 @@
         "js/firefox/share-page.es6.js"
       ],
       "name": "firefox_share"
+    },
+    {
+      "files": [
+        "js/base/protocol/m24-springboard.es6.js"
+      ],
+      "name": "m24-springboard"
     }
   ]
 }