Icon cards #119

.github/release.yml

@@ -3,7 +3,7 @@
 changelog:
   exclude:
     labels:
-      - ignore-for-release
+      - Ignore for release
   categories:
     - title: Functional requirements
       labels:

blocks/cards/cards.js

@@ -16,12 +16,13 @@ const updateListElements = (ul, isDarkVar = false, isCTABlock = false) => {
       const buttons = li.querySelectorAll('.cards-card-body .button-container');
       const { length } = buttons;
       if (length === 0) return;
-      const tempLink = [...buttons].at(-1).firstChild;
-      const newLink = createElement('a', '', {
+      // Last button is the one we want to use at card level
+      const tempLink = [...buttons].at(-1).querySelector('a');
+      const newLink = createElement('a', {
         props: { href: tempLink.href, title: tempLink.title },
       });
 
-      buttons[length - 1].remove();
+      buttons[length - 1].remove(); // remove last button
       newLink.innerHTML = li.innerHTML;
       li.textContent = '';
       li.appendChild(newLink);

blocks/dealer-locator/dealer-locator.css

@@ -5,6 +5,11 @@
     font-family: var(--ff-body);
 }
 
+/* cookie button position fix */
+#onetrust-consent-sdk #ot-sdk-btn-floating.ot-floating-button {
+    bottom: 30px;
+}
+
 main .section.dealer-locator-container > div {
     margin: 0;
 }
@@ -711,18 +716,19 @@ main .section.dealer-locator-container > div {
     width: 100%
 }
 
+.dealer-locator #map .gmnoprint + .gm-style-cc,
 .dealer-locator #map .gmnoprint {
     top: 0;
     margin-top: 45px
 }
 
 @media (max-width: 992px) {
-    .dealer-locator #map .gmnoprint {
-        display:none
+    .dealer-locator #map .gm-bundled-control {
+        display: none;
     }
 
     .dealer-locator #map {
-        height: calc(50% - 39px);
+        height: calc(50% - 41px)
     }
 }
 

blocks/embed/embed.js

@@ -1,19 +1,32 @@
 import {
   selectVideoLink, addPlayIcon, showVideoModal, isLowResolutionVideoUrl, createIframe,
-  createLowResolutionBanner,
+  createLowResolutionBanner, videoTypes,
 } from '../../scripts/video-helper.js';
 
 export default function decorate(block) {
+  const { youtube, local, both } = videoTypes;
   const isAutoplay = block.classList.contains('autoplay');
   const isLoopedVideo = block.classList.contains('loop');
   const isFullWidth = block.classList.contains('full-width');
+  const isYoutubeOnly = block.classList.contains('youtube-only');
+  const isLocalOnly = block.classList.contains('local-only');
+  const isBothOrDefault = block.classList.contains('both') || (!isYoutubeOnly && !isLocalOnly);
   const videoWrapper = document.createElement('div');
   // removing classes to avoid collision with other css
   block.classList.remove('loop', 'autoplay', 'full-width');
   videoWrapper.classList.add('embed-video');
 
+  let videoType;
+  if (isBothOrDefault) {
+    videoType = both;
+  } else if (isYoutubeOnly) {
+    videoType = youtube;
+  } else if (isLocalOnly) {
+    videoType = local;
+  }
+
   const links = block.querySelectorAll('a');
-  const selectedLink = selectVideoLink(links, isFullWidth ? 'local' : 'auto');
+  const selectedLink = selectVideoLink(links, isFullWidth ? 'local' : 'auto', videoType);
   const video = document.createElement('video');
   const source = document.createElement('source');
 
@@ -66,7 +79,7 @@ export default function decorate(block) {
       });
     }
 
-    if (!isFullWidth) {
+    if (!isFullWidth && !isLocalOnly) {
       const banner = createLowResolutionBanner();
       videoWrapper.prepend(banner);
     }

blocks/v2-columns/v2-columns.css

@@ -67,43 +67,6 @@
   margin: 5px 0 0;
 }
 
-.v2-columns--info .v2-columns__column {
-  gap: 8px;
-}
-
-.v2-columns--info .icon {
-  margin-bottom: 8px;
-}
-
-.v2-columns--info .v2-columns__heading {
-  margin: 0;
-}
-
-.v2-columns--info .v2-columns__body {
-  margin: 0 0 22px;
-}
-
-.v2-columns--info .v2-columns__column--info-main {
-  gap: 24px;
-}
-
-.v2-columns--info .v2-columns__column--info-main .v2-columns__heading {
-  padding-top: 24px;
-  margin: 0;
-}
-
-.v2-columns--info .v2-columns__column--with-text {
-  padding: 0;
-}
-
-.v2-columns--info .v2-columns__row {
-  gap: 40px;
-}
-
-.v2-columns--info .v2-columns__button {
-  margin-bottom: 16px;
-}
-
 @media (min-width: 744px) {
   .v2-columns {
     width: 100%;
@@ -123,42 +86,16 @@
     order: unset;
   }
 
-  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text {
+  .v2-columns .v2-columns__column--with-text {
     padding: 0 56px;
   }
 
-  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text .v2-columns__heading {
+  .v2-columns .v2-columns__column--with-text .v2-columns__heading {
     margin: 24px 0 12px;
     font-size: var(--headline-1-font-size);
   }
 
   .v2-columns__column--with-text .v2-columns__body {
     margin: 0 0 14px;
   }
-
-  .v2-columns--info .v2-columns__row {
-    justify-content: space-between;
-    align-items: flex-start;
-  }
-
-  .v2-columns--info .v2-columns__body:last-child {
-    margin: 0;
-  }
-
-  .v2-columns--info .v2-columns__column {
-    max-width: 245px;
-  }
-
-  .v2-columns--info .v2-columns__column--info-main {
-    align-self: center;
-    max-width: 329px;
-    width: 100%;
-  }
-}
-
-@media (min-width: 1200px) {
-  .v2-columns--info {
-    padding: 20px 40px;
-    background: var(--c-primary-white);
-  }
 }

blocks/v2-columns/v2-columns.js

@@ -1,9 +1,7 @@
-import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
+import { createElement } from '../../scripts/common.js';
 
 export default async function decorate(block) {
   const blockName = 'v2-columns';
-  const variantClasses = ['info'];
-  variantsClassesToBEM(block.classList, variantClasses, blockName);
 
   const rows = [...block.querySelectorAll(':scope > div')];
   const columns = [...block.querySelectorAll(':scope > div > div')];
@@ -64,35 +62,4 @@ export default async function decorate(block) {
       prevEl.replaceWith(pretitle);
     }
   });
-
-  // logic for info variant
-  if (block.classList.contains(`${blockName}--info`)) {
-    const headings = [...block.querySelectorAll('h3, h4, h5, h6')];
-    const h2List = [...block.querySelectorAll('h2')];
-
-    headings.forEach((h) => {
-      h.classList.add('h5');
-      h.classList.remove('h2');
-    });
-
-    h2List.forEach((h) => {
-      h.classList.add('with-marker', 'h2');
-      h.classList.remove('h1');
-      h.closest(`.${blockName}__column`)?.classList.add(`${blockName}__column--info-main`);
-    });
-
-    // replacing headings (h3, h4, h5, h6) with strong so the block will not break semantic
-    // (example breaking semantic: col 1 -> h5, col 2 -> h2)
-    headings.forEach((heading) => {
-      const newHeadingEl = createElement('strong', { classes: [...heading.classList] });
-      newHeadingEl.innerHTML = heading.innerHTML;
-      heading.replaceWith(newHeadingEl);
-    });
-
-    const buttons = [...block.querySelectorAll('.button-container a')];
-    buttons.forEach((button) => {
-      button.classList.add('standalone-link', `${blockName}__button`);
-      button.classList.remove('button', 'button--primary', 'button--large');
-    });
-  }
 }