TCI-1129: fix support for multiple card sections (#869)

source/_patterns/03-organisms/cards/cards.js

@@ -0,0 +1,43 @@
+/*
+ * Function to display consistent image height for mixed card widths.
+ */
+function setConsistentMediaHeight(cards) {
+  cards.forEach(function(cardset) {
+    const medias = Array.from(cardset.getElementsByClassName("usa-card__media"));
+
+    if (medias.length > 0) {
+      // Reset media height to default.
+      medias.forEach(function(media) {
+        let image = media.getElementsByTagName("img");
+        media.removeAttribute("style");
+        image[0].removeAttribute("style");
+      });
+
+      // Determine max height from smallest media found.
+      let maxHeight = medias[0].offsetHeight;
+      medias.forEach(function(media) {
+        maxHeight = Math.min(maxHeight, media.offsetHeight);
+      });
+
+      // Adjust all container and image heights to max allowed.
+      medias.forEach(function(media) {
+        let mediaHeight = maxHeight / 16 + "rem";
+        let image = media.getElementsByTagName("img");
+        media.style.height = mediaHeight;
+        image[0].setAttribute("style", "height: " + mediaHeight + ";");
+      });
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  // Detect any mixed card widths.
+  const cards = Array.from(document.querySelectorAll(".jcc-cards--2-60-40-cols, .jcc-cards--2-75-25-cols"));
+
+  if (cards) {
+    setConsistentMediaHeight(cards);
+    window.onresize = function() {
+      setConsistentMediaHeight(cards);
+    };
+  }
+});

source/_patterns/03-organisms/cards/cards~media-background-with-color-overlay.yml

@@ -9,7 +9,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://placeimg.com/350/250/nature"
+        src: "https://source.unsplash.com/random/350x250/?nature"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -19,7 +19,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>In torquent consequat quam vulputate himenaeos semper ut aliquam at, iaculis ac platea laoreet ridiculus mattis sagittis volutpat hendrerit, vehicula orci dictum dictumst nunc scelerisque lacus auctor.</p>"
       media:
-        src: "https://placeimg.com/350/250/animals"
+        src: "https://source.unsplash.com/random/350x250/?animals"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -30,7 +30,7 @@ cards:
       title: "Visual Hover"
       body: "<p>The selected overlay color will appear 90% opaque on hover. Habitasse nec dui adipiscing massa magna mollis morbi netus malesuada, odio varius id eu integer felis tellus at feugiat.</p>"
       media:
-        src: "https://placeimg.com/350/250/people"
+        src: "https://source.unsplash.com/random/350x250/?people"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"
@@ -40,7 +40,7 @@ cards:
       title: "Posuere et ornare"
       body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
       media:
-        src: "https://placeimg.com/350/250/tech"
+        src: "https://source.unsplash.com/random/350x250/?tech"
         alt: "Cupidatat non proident, sunt in culpa qui"
       link:
         url: "#"

source/_patterns/03-organisms/cards/cards~media-two-75-25.yml

@@ -0,0 +1,25 @@
+cards:
+  heading:
+    title: "Cards"
+    lead: "<p>Ipsum velit bibendum class id sit justo, at fermentum suscipit rhoncus hac sociis blandit, ante tincidunt imperdiet himenaeos felis.</p>"
+  num_cols: "2-75-25"
+  items:
+    - style: "media-top"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://source.unsplash.com/random/350x250/?people"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+    - style: "media-top"
+      title: "Posuere et ornare"
+      body: "<p>Tellus justo ornare, ipsum pulvinar praesent viverra luctus sociosqu eu, dolor blandit cum vel tempus volutpat.</p>"
+      media:
+        src: "https://source.unsplash.com/random/350x250/?face"
+        alt: "green"
+      link:
+        url: "#"
+        text: "Luctus nunc quam"
+