Volvo trucks PDP Resource gallery #87

blocks/v2-resources-gallery/v2-resources-gallery.css

@@ -0,0 +1,189 @@
+.v2-resources-gallery {
+  display: flex;
+  gap: 40px;
+  flex-flow: column;
+}
+
+.v2-resources-gallery__heading-wrapper {
+  margin-bottom: 0;
+  display: flex;
+  flex-flow: column;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.v2-resources-gallery__button {
+  display: flex;
+  font-size: var(--f-button-font-size);
+  background: none;
+  outline: none;
+  align-self: flex-start;
+}
+
+.v2-resources-gallery__button .icon-minus {
+  display: none;
+}
+
+.v2-resources-gallery__button[aria-expanded="true"] .icon-minus {
+  display: block;
+}
+
+.v2-resources-gallery__button[aria-expanded="true"] .icon-plus {
+  display: none;
+}
+
+.v2-resources-gallery__heading {
+  font: var(--f-heading-5-font-size) / var(--f-heading-5-line-height) var(--ff-volvo-novum-medium);
+  letter-spacing: 0.25px;
+  margin-bottom: 0;
+}
+
+.v2-resources-gallery__heading-wrapper .v2-resources-gallery__heading {
+  text-transform: capitalize;
+}
+
+.v2-resources-gallery__video-list {
+  display: grid;
+  list-style-type: none;
+  gap: 8px;
+  grid-template-columns: repeat(6, calc(100% - 100px));
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  scroll-snap-align: start;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.v2-resources-gallery__video-list::-webkit-scrollbar {
+  display: none;
+}
+
+.v2-resources-gallery__video-list-item {
+  flex: none;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+}
+
+.v2-resources-gallery__video-title {
+  font: var(--f-body-2-font-size) / var(--f-body-2-line-height) var(--ff-volvo-novum);
+  letter-spacing: var(--f-body-2-letter-spacing);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 96%;
+  margin-bottom: 8px;
+}
+
+.v2-resources-gallery__video-list p {
+  font: var(--f-body-font-size) / var(--f-body-line-height) var(--ff-volvo-novum);
+  letter-spacing: var(--f-body-letter-spacing);
+  color: var(--text-subtle);
+  margin: 0;
+}
+
+.v2-resources-gallery__video-list .v2-resources-gallery__video-image {
+  margin: 0 0 16px;
+}
+
+.v2-resources-gallery__video-image img {
+  border-radius: 8px;
+  aspect-ratio: 255/143;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.v2-resources-gallery__document-list {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 40px 32px;
+}
+
+.v2-resources-gallery__document-link-wrapper {
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  margin: 0;
+}
+
+.v2-resources-gallery__document-list a.button.standalone-link {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-transform: capitalize;
+  display: flex;
+  gap: 8px;
+}
+
+.v2-resources-gallery__heading-wrapper button.v2-resources-gallery__button.tertiary:hover {
+  background-color: transparent;
+  outline: none;
+}
+
+.v2-resources-gallery__document-link-wrapper p {
+  margin: 0;
+  color: var(--text-subtle);
+  padding-left: 32px;
+}
+
+.v2-resources-gallery__document-list-item--hide,
+.v2-resources-gallery__video-list-item--hide {
+  display: none;
+}
+
+.v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
+  grid-template-columns: 1fr;
+  grid-auto-flow: row;
+  grid-row-gap: 40px;
+}
+
+.v2-resources-gallery__list--expand .v2-resources-gallery__document-list-item--hide, 
+.v2-resources-gallery__list--expand .v2-resources-gallery__video-list-item--hide {
+  display: flex;
+}
+
+@media (min-width: 744px) {
+  .v2-resources-gallery__heading-wrapper {
+    flex-flow: row;
+    gap: 40px;
+    align-items: center;
+  }
+
+  .v2-resources-gallery__heading {
+    flex: 1;
+  }
+
+  .v2-resources-gallery__video-list {
+    grid-template-columns: repeat(6, calc(100% / 2.80));
+    gap:16px;
+  }
+
+  .v2-resources-gallery__document-list {
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: inherit;
+  }
+
+  .v2-resources-gallery__list--expand .v2-resources-gallery__video-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1200px) {
+  .v2-resources-gallery__video-list {
+    grid-template-columns: repeat(3, 1fr);
+    overflow-x: unset;
+    grid-auto-flow: row;
+  }
+
+  .v2-resources-gallery__document-link-wrapper {
+    flex-flow: row;
+    align-items: center;
+  }
+
+  .v2-resources-gallery__document-link-wrapper p {
+    padding-left: 0;
+  }
+}
+

blocks/v2-resources-gallery/v2-resources-gallery.js

@@ -0,0 +1,123 @@
+import {
+  wrapImageWithVideoLink,
+  selectVideoLink,
+  isVideoLink,
+  addVideoShowHandler,
+} from '../../scripts/video-helper.js';
+import { createElement, getTextLabel, unwrapDivs } from '../../scripts/common.js';
+
+const blockName = 'v2-resources-gallery';
+
+export default function decorate(block) {
+  const blockHeading = block.querySelector('div:first-child');
+  blockHeading.classList.add(`${blockName}__heading-wrapper`);
+  const title = blockHeading.querySelector('h4');
+  title?.classList.add(`${blockName}__heading`);
+  unwrapDivs(blockHeading);
+
+  const viewAllButton = createElement('button', {
+    classes: [`${blockName}__button`, 'tertiary'],
+    props: { 'aria-expanded': false },
+  });
+  viewAllButton.innerHTML = `
+    <span class="icon-plus">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.5C12.5 3.22386 12.2761 3 12 3C11.7239 3 11.5 3.22386 11.5 3.5V11.5H3.5C3.22386 11.5 3 11.7239 3 12C3 12.2761 3.22386 12.5 3.5 12.5H11.5V20.5C11.5 20.7761 11.7239 21 12 21C12.2761 21 12.5 20.7761 12.5 20.5V12.5H20.5C20.7761 12.5 21 12.2761 21 12C21 11.7239 20.7761 11.5 20.5 11.5H12.5V3.5Z" fill="#141414"/>
+      </svg>
+    </span>
+    <span class="icon-minus">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11.5C3.22386 11.5 3 11.7239 3 12C3 12.2761 3.22386 12.5 3.5 12.5H20.5C20.7761 12.5 21 12.2761 21 12C21 11.7239 20.7761 11.5 20.5 11.5H3.5Z" fill="#141414"/>
+      </svg>
+    </span>
+    <span class="${blockName}__button-text"> ${getTextLabel('view all')} </span>
+  `;
+
+  blockHeading.append(viewAllButton);
+
+  const videoWrapper = createElement('ul', { classes: `${blockName}__video-list` });
+  const documentWrapper = createElement('ul', { classes: `${blockName}__document-list` });
+  const rows = block.querySelectorAll(':scope > div > div');
+
+  rows.forEach((row) => {
+    const picture = row.querySelector('picture');
+    const document = row.querySelector('.icon-documents');
+
+    if (picture) {
+      const listEle = createElement('li', { classes: `${blockName}__video-list-item` });
+      listEle.innerHTML = row.innerHTML;
+
+      const videos = [...listEle.querySelectorAll('a')].filter((link) => isVideoLink(link));
+
+      if (videos.length) {
+        // display image as link with play icon
+        const selectedLink = selectVideoLink(videos);
+        if (selectedLink) {
+          addVideoShowHandler(selectedLink);
+          wrapImageWithVideoLink(selectedLink, picture);
+          selectedLink.parentElement.classList.add(`${blockName}__video-image`, 'image');
+        }
+
+        if (videoWrapper.children.length > 5) {
+          listEle.classList.add(`${blockName}__video-list-item--hide`);
+          listEle.setAttribute('aria-hidden', true);
+        }
+
+        const videoTitle = listEle.querySelector('h3');
+        videoTitle.classList.add(`${blockName}__video-title`);
+
+        // remove all the videos links and exclude the selected one
+        videos.forEach((link) => link !== selectedLink && link.parentElement.remove());
+
+        videoWrapper.append(listEle);
+        listEle.firstElementChild.remove();
+        row.innerHTML = '';
+      }
+    } else if (document) {
+      const item = createElement('li', { classes: `${blockName}__document-list-item` });
+      item.innerHTML = row.innerHTML;
+      const links = item.querySelectorAll('a');
+      [...links].forEach((link) => {
+        link.classList.add('standalone-link');
+        link.classList.remove('primary');
+        const wrapper = link.parentElement;
+        wrapper.className = `${blockName}__document-link-wrapper`;
+        wrapper.append(wrapper.nextElementSibling);
+      });
+
+      if (documentWrapper.children.length > 5) {
+        item.classList.add(`${blockName}__document-list-item--hide`);
+        item.setAttribute('aria-hidden', true);
+      }
+
+      documentWrapper.append(item);
+      row.innerHTML = '';
+    }
+  });
+
+  block.append(videoWrapper);
+  block.append(documentWrapper);
+
+  function toggleListEle(ariaValue) {
+    [...block.querySelectorAll(`li[aria-hidden="${ariaValue}"]`)].forEach((li) => {
+      li.setAttribute('aria-hidden', !ariaValue);
+    });
+  }
+
+  viewAllButton.addEventListener('click', () => {
+    const buttonText = viewAllButton.lastElementChild;
+    if (viewAllButton.ariaExpanded === 'true') {
+      viewAllButton.ariaExpanded = 'false';
+      buttonText.innerText = getTextLabel('view all');
+      block.classList.remove(`${blockName}__list--expand`);
+      toggleListEle(false);
+    } else {
+      viewAllButton.ariaExpanded = 'true';
+      buttonText.innerText = getTextLabel('view less');
+      block.classList.add(`${blockName}__list--expand`);
+      toggleListEle(true);
+    }
+  });
+
+  unwrapDivs(block);
+}

placeholder.json

@@ -150,6 +150,18 @@
     {
       "Key": "Copied",
       "Text": "Copied!"
+    }, 
+    {
+      "Key": "view all",
+      "Text": "View all"
+    },
+    {
+      "Key": "toggle list",
+      "Text": "Toggle resources list"
+    },
+    {
+      "Key": "view less",
+      "Text": "View less"
     }
   ],
   ":type": "sheet"

scripts/video-helper.js

@@ -97,18 +97,22 @@ export function addSoundcloudShowHandler(link) {
 }
 
 export function addPlayIcon(parent) {
-  const iconWrapper = createElement('div', { classes: 'video-icon-wrapper' });
-  const icon = createElement('i', { classes: ['fa', 'fa-play', 'video-icon'] });
-  iconWrapper.appendChild(icon);
-  parent.appendChild(iconWrapper);
+  const playButton = document.createRange().createContextualFragment(`
+    <span class="icon icon-play-video">
+      <svg width="27" height="27" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="36" cy="36" r="30" fill="white"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M49.3312 35.9998L29.3312 24.4528L29.3312 47.5468L49.3312 35.9998ZM44.3312 35.9998L31.8312 28.7829L31.8312 43.2167L44.3312 35.9998Z" fill="#141414"/>
+      </svg>
+    </span>`);
+
+  parent.appendChild(playButton);
 }
 
 export function wrapImageWithVideoLink(videoLink, image) {
   videoLink.innerText = '';
   videoLink.appendChild(image);
   videoLink.classList.add('link-with-video');
   videoLink.classList.remove('button', 'primary', 'text-link-with-video');
-
   addPlayIcon(videoLink);
 }