Merge branch 'develop'

Netcentric · Jan 5, 2024 · 0c320dd · 0c320dd
2 parents 8f4267a + e8cc072
commit 0c320dd
Show file tree

Hide file tree

Showing 26 changed files with 1,145 additions and 236 deletions.
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -158,27 +158,38 @@
   display: inline-block;
 }
 
-.v2-scroll-to-top {
+.scroll-to-top-container {
+  padding: 24px;
+  display: block;
+  position: absolute;
+  top: calc(100vh - 1px);
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
+a.scroll-to-top {
   background-color: var(--c-white);
   border-radius: 50%;
   border: 1px solid var(--c-grey-400);
-  bottom: 20px;
+  display: block;
   box-shadow: 0 4px 70px 0 rgb(0 0 0 / 20%);
   color: var(--c-main-black);
   cursor: pointer;
-  display: none;
   padding: 12px;
-  position: fixed;
-  right: 30px;
+  position: sticky;
+  top: calc(100vh - 24px - 50px);
   z-index: 99;
 }
 
-.v2-scroll-to-top:hover {
+a.scroll-to-top:hover {
   background-color: var(--c-grey-50);
+  color: var(--c-main-black);
 }
 
-.v2-scroll-to-top:active {
+a.scroll-to-top:active {
   background-color: var(--c-grey-100);
+  color: var(--c-main-black);
 }
 
 .footer-list .footer__title:not(.expand):focus,
@@ -187,17 +198,17 @@
   outline: 2px solid var(--border-focus);
 }
 
-button.v2-scroll-to-top:focus {
+a.scroll-to-top:focus {
   outline: 0;
 }
 
-.v2-scroll-to-top:focus-visible {
+.scroll-to-top:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: 1px;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
-.v2-scroll-to-top svg {
+.scroll-to-top svg {
   display: block;
 }
 

diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -1,39 +1,17 @@
 import { readBlockConfig, decorateIcons, getMetadata } from '../../scripts/lib-franklin.js';
-import { createElement, getLanguagePath } from '../../scripts/common.js';
+import { createElement, getLanguagePath, getTextLabel } from '../../scripts/common.js';
 /* eslint-disable no-use-before-define */
 
-function displayScrollToTop(buttonEl) {
-  if (document.body.scrollTop > 160 || document.documentElement.scrollTop > 160) {
-    buttonEl.style.display = 'block';
-  } else {
-    buttonEl.style.display = 'none';
-  }
-}
-
-function goToTopFunction() {
-  let timeOut;
-  if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
-    window.scrollBy(0, -50);
-    timeOut = setTimeout(goToTopFunction, 10);
-  } else {
-    clearTimeout(timeOut);
-  }
-}
-
 function addScrollToTopButton(mainEl) {
-  const scrollToTopButton = createElement('button', {
-    classes: 'v2-scroll-to-top',
-    props: {
-      title: 'Go to the top of the page',
-    },
-  });
-  scrollToTopButton.addEventListener('click', goToTopFunction);
-  window.addEventListener('scroll', () => displayScrollToTop(scrollToTopButton));
-  const svgIcon = document.createRange().createContextualFragment(`
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 20C11.7237 20 11.4999 19.7761 11.4999 19.5L11.4999 5.70711L6.35341 10.8536C6.15815 11.0488 5.84157 11.0488 5.6463 10.8536C5.45104 10.6583 5.45104 10.3417 5.6463 10.1464L11.6463 4.14645C11.8416 3.95119 12.1581 3.95118 12.3534 4.14644L18.3535 10.1464C18.5488 10.3417 18.5488 10.6583 18.3536 10.8535C18.1583 11.0488 17.8417 11.0488 17.6465 10.8536L12.4999 5.70709L12.4999 19.5C12.4999 19.7761 12.276 20 11.9999 20Z" fill="currentColor"/>
-    </svg>`);
-  scrollToTopButton.append(...svgIcon.children);
+  const scrollToTopButton = document.createRange().createContextualFragment(`
+    <div class="scroll-to-top-container">
+      <a href="#" class="scroll-to-top" title=${getTextLabel('go to top')}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 20C11.7237 20 11.4999 19.7761 11.4999 19.5L11.4999 5.70711L6.35341 10.8536C6.15815 11.0488 5.84157 11.0488 5.6463 10.8536C5.45104 10.6583 5.45104 10.3417 5.6463 10.1464L11.6463 4.14645C11.8416 3.95119 12.1581 3.95118 12.3534 4.14644L18.3535 10.1464C18.5488 10.3417 18.5488 10.6583 18.3536 10.8535C18.1583 11.0488 17.8417 11.0488 17.6465 10.8536L12.4999 5.70709L12.4999 19.5C12.4999 19.7761 12.276 20 11.9999 20Z" fill="currentColor"/>
+        </svg>
+      </a>
+    </div>
+  `);
   mainEl.append(scrollToTopButton);
 }
 
@@ -57,7 +35,7 @@ export default async function decorate(block) {
 
   // for custom footer we don't need the external link section,
   // so check if columns block exist
-  const coulmnsWrapper = footer.querySelector('.columns');
+  const columnsWrapper = footer.querySelector('.columns');
   let footerBar = footer.children[1];
   let footerCopyright = footer.children[2];
   let mainLinkWrapper;
@@ -67,8 +45,8 @@ export default async function decorate(block) {
 
   openExternalLinksInNewTab(footer);
 
-  if (coulmnsWrapper) {
-    mainLinkWrapper = coulmnsWrapper.parentElement;
+  if (columnsWrapper) {
+    mainLinkWrapper = columnsWrapper.parentElement;
     wrapSocialMediaLinks(mainLinkWrapper);
     mainLinkWrapper.classList.add('footer-links-wrapper');
     // in Word, it is edited like a column block, but we style it differently

diff --git a/blocks/v2-content-card/v2-content-card.js b/blocks/v2-content-card/v2-content-card.js
@@ -2,7 +2,7 @@ import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
 import {
   adjustPretitle, createElement, removeEmptyTags, variantsClassesToBEM,
 } from '../../scripts/common.js';
-import { createVideo, isVideoLink } from '../../scripts/video-helper.js';
+import { createVideo, getDynamicVideoHeight, isVideoLink } from '../../scripts/video-helper.js';
 
 const variantClasses = ['images-grid', 'images-grid-masonry', 'editorial'];
 
@@ -63,23 +63,7 @@ export default async function decorate(block) {
       parentElement.style.position = 'relative';
       parentElement.append(playbackControls);
 
-      // Get the element's height(use requestAnimationFrame to get actual height instead of 0)
-      requestAnimationFrame(() => {
-        const height = newVideo.offsetHeight - 60;
-        playbackControls.style.top = `${height.toString()}px`;
-      });
-
-      // Get the element's height on resize
-      const getVideoHeight = (entries) => {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const entry of entries) {
-          const height = entry.target.offsetHeight - 60;
-          playbackControls.style.top = `${height.toString()}px`;
-        }
-      };
-
-      const resizeObserver = new ResizeObserver(getVideoHeight);
-      resizeObserver.observe(newVideo);
+      getDynamicVideoHeight(newVideo, playbackControls);
     }
 
     // Add wrapper around the text content

diff --git a/blocks/v2-content-carousel/v2-content-carousel.css b/blocks/v2-content-carousel/v2-content-carousel.css
@@ -0,0 +1,201 @@
+.v2-content-carousel {
+  --content-carousel-row-gap: 24px;
+  --content-carousel-list-gap: 8px;
+  --content-carousel-col-gap: 16px;
+  --content-carousel-container-margin: 16px;
+  --static-content-card-width: 85%;
+}
+
+.v2-content-carousel__row {
+  display: flex;
+  flex-flow: column;
+  gap: var(--content-carousel-row-gap);
+}
+
+.v2-content-carousel__col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--content-carousel-col-gap);
+}
+
+.v2-content-carousel__text-col {
+  padding-right: 32px;
+}
+
+.v2-content-carousel__images-list-col {
+  margin-left: calc(var(--content-carousel-container-margin) * -1);
+  margin-right: calc(var(--content-carousel-container-margin) * -1);
+}
+
+.v2-content-carousel__images-list {
+  list-style-type: none;
+  display: flex;
+  overflow: scroll;
+  scroll-behavior: smooth;
+  scroll-snap-align: start;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  gap: var(--content-carousel-list-gap);
+}
+
+.v2-content-carousel__images-list::before,
+.v2-content-carousel__images-list::after {
+  content: '';
+  display: block;
+  flex: 0 0 var(--content-carousel-container-margin);
+  min-height: 1px;
+}
+
+.v2-content-carousel__images-list::after {
+  flex: 0 0 calc(var(--content-carousel-container-margin) / 2);
+}
+
+.v2-content-carousel__images-list::-webkit-scrollbar {
+  display: none;
+}
+
+.v2-content-carousel__images-list-item {
+  scroll-margin: 0 var(--content-carousel-container-margin);
+  scroll-snap-align: start;
+  flex: 0 0 var(--static-content-card-width);
+}
+
+.v2-content-carousel__heading {
+  font: var(--f-heading-5-font-size)/var(--f-heading-5-line-height) var(--ff-volvo-novum-medium);
+  letter-spacing: 0.25px;
+}
+
+.v2-content-carousel__text {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.v2-content-carousel__figure {
+  margin: 0;
+}
+
+.v2-content-carousel__figure img {
+  border-radius: var(--border-radius);
+  aspect-ratio: 574/474;
+}
+
+.v2-content-carousel__figure-text {
+  padding-top: 16px;
+  font: var(--f-overline-font-size)/var(--f-overline-line-height) var(--font-family-body);
+  letter-spacing: var(--f-overline-letter-spacing);
+}
+
+ul.v2-content-carousel__arrowcontrols {
+  margin-left: var(--content-carousel-container-margin);
+  list-style-type: none;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.v2-content-carousel__button {
+  padding: 0;
+}
+
+.v2-content-carousel__button:focus {
+  outline: 0;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-content-carousel__button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 1px;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-content-carousel__button,
+.v2-content-carousel__button:disabled,
+.v2-content-carousel__button:disabled:hover {
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+}
+
+.v2-content-carousel__button .icon-arrow-left svg,
+.v2-content-carousel__button .icon-arrow-right svg {
+  width: 48px;
+  height: 48px;
+}
+
+.v2-content-carousel__button:disabled .icon-arrow-right svg path,
+.v2-content-carousel__button:disabled .icon-arrow-left svg path {
+  fill: var(--c-grey-2)
+}
+
+@media screen and (min-width: 744px) {
+  .v2-content-carousel {
+    --content-carousel-row-gap: 32px;
+    --content-carousel-list-gap: 20px;
+    --content-carousel-col-gap: 24px;
+    --content-carousel-container-margin: 32px;
+    --static-content-card-width: clamp(506px, 68%, calc((100% - var(--content-carousel-list-gap))/1.25));
+  }
+
+  .v2-content-carousel__images-list-col {
+    gap: 32px;
+  }
+
+  p.v2-content-carousel__text {
+    font-size: var(--f-body-2-font-size);
+    letter-spacing: var(--f-subtitle-2-letter-spacing);
+    line-height: var(--f-caption-line-height);
+    max-width: var(--text-block-max-width);
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .section.v2-content-carousel-container .v2-content-carousel-wrapper {
+    max-width: 1440px;
+    padding-left: 64px;
+    width: 100%;
+    padding-right: 20px;
+  }
+
+  .v2-content-carousel {
+    --content-carousel-row-gap: 72px;
+    --content-carousel-container-margin: 20px;
+    --static-content-card-width: calc((100% - var(--content-carousel-list-gap))/1.80);
+  }
+
+  .v2-content-carousel__col {
+    min-width: 21rem;
+  }
+
+  .v2-content-carousel__row {
+    flex-direction: row;
+  }
+
+  .v2-content-carousel__text-col {
+    align-self: center;
+    padding-right: 0;
+  }
+
+  .v2-content-carousel__heading {
+    font-size: var(--f-heading-4-font-size);
+  }
+
+  .v2-content-carousel__figure-text {
+    font: var(--f-body-font-size)/var(--f-body-line-height) var(--font-family-body);
+    letter-spacing: var(--f-body-letter-spacing);
+  }
+
+  .v2-content-carousel__images-list-col {
+    position: relative;
+  }
+
+  .v2-content-carousel__images-list-col::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: var(--content-carousel-container-margin);
+    background: var(--background-color);
+  }
+}
diff --git a/...nt-carousel/v2-static-content-carousel.js → ...2-content-carousel/v2-content-carousel.js b/...nt-carousel/v2-static-content-carousel.js → ...2-content-carousel/v2-content-carousel.js
@@ -2,7 +2,7 @@ import { createElement, adjustPretitle } from '../../scripts/common.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 import { smoothScrollHorizontal } from '../../scripts/motion-helper.js';
 
-const blockName = 'v2-static-content-carousel';
+const blockName = 'v2-content-carousel';
 
 const updateActiveClass = (elements, targetElement, carousel) => {
   elements.forEach((el, index) => {
@@ -23,12 +23,6 @@ const updateActiveClass = (elements, targetElement, carousel) => {
       if (arrowControl) {
         arrowControl.disabled = true;
       }
-
-      if (index !== el.parentNode.children.length - 1) {
-        carousel.parentElement.classList.add(`${blockName}__images-list-col--gradient`);
-      } else {
-        carousel.parentElement.classList.remove(`${blockName}__images-list-col--gradient`);
-      }
     } else {
       el.classList.remove('active');
     }