[Release] Stage to Main (#2414)

libs/blocks/card/cardUtils.js

@@ -32,19 +32,18 @@ export const addFooter = (links, container, merch) => {
   const linksArr = Array.from(links);
   const linksLeng = linksArr.length;
   const hrTag = merch ? '<hr>' : '';
-  let footer = `<div class="consonant-CardFooter">${hrTag}<div class="consonant-CardFooter-row" data-cells="1">`;
-  footer = linksArr.reduce(
-    (combined, link, index) => (
-      `${combined}<div class="consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}">${link.outerHTML}</div>`),
-    footer,
-  );
-  footer += '</div></div>';
-
-  container.insertAdjacentHTML('beforeend', footer);
-  links.forEach((link) => {
+  const footer = createTag('div', { class: 'consonant-CardFooter' }, hrTag);
+  const row = createTag('div', { class: 'consonant-CardFooter-row', 'data-cells': '1' });
+  linksArr.forEach((link, index) => {
     const { parentElement } = link;
     if (parentElement && document.body.contains(parentElement)) parentElement.remove();
+    const holder = createTag('div', { class: `consonant-CardFooter-cell consonant-CardFooter-cell--${(linksLeng === 2 && index === 0) ? 'left' : 'right'}` });
+    holder.append(link);
+    row.append(holder);
   });
+
+  footer.append(row);
+  container.insertAdjacentElement('beforeend', footer);
 };
 
 export const addWrapper = (el, section, cardType) => {

libs/blocks/quiz-entry/quizoption.js

@@ -1,4 +1,5 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
+import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -44,17 +45,13 @@ export const GetQuizOption = ({
 }) => {
   const [index, setIndex] = useState(0);
   const [visibleCount, setVisibleCount] = useState(6);
+  const [slideWidth, setSlideWidth] = useState(0);
+
   setVisibleCount(window.innerWidth >= 600 ? 6 : 3);
 
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
 
-  useEffect(() => {
-    const handleResize = () => setVisibleCount(window.innerWidth >= 600 ? 6 : 3);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const next = () => {
+  const next = async () => {
     if (index + visibleCount < options.data.length) {
       setIndex(index + 1);
     }
@@ -66,6 +63,62 @@ export const GetQuizOption = ({
     }
   };
 
+  useEffect(() => {
+    const slide = document.querySelector('.quiz-option');
+    if (slide) {
+      setSlideWidth(slide.offsetWidth);
+    }
+  }, [options, slideWidth, setSlideWidth]);
+
+  useEffect(() => {
+    const handleResize = () => setVisibleCount(window.innerWidth >= 600 ? 6 : 3);
+    const el = document.querySelector('.quiz-options-container');
+
+    window.addEventListener('resize', handleResize);
+
+    const swipe = { xMin: 50 };
+
+    const handleTouchStart = (event) => {
+      const touch = event.touches[0];
+      swipe.xStart = touch.screenX;
+    };
+
+    const handleTouchMove = (event) => {
+      const touch = event.touches[0];
+      swipe.xEnd = touch.screenX;
+    };
+
+    const handleTouchEnd = () => {
+      const swipeDistance = {};
+      swipeDistance.xDistance = getSwipeDistance(swipe.xStart, swipe.xEnd);
+      const direction = getSwipeDirection(swipe, swipeDistance);
+
+      swipe.xStart = 0;
+      swipe.xEnd = 0;
+
+      if (swipeDistance.xDistance > swipe.xMin) {
+        if (direction === 'left') {
+          next();
+        } else if (direction === 'right') {
+          prev();
+        }
+      }
+    };
+
+    el.addEventListener('touchstart', handleTouchStart);
+    el.addEventListener('touchmove', handleTouchMove);
+    el.addEventListener('touchend', handleTouchEnd);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+
+      el.removeEventListener('touchstart', handleTouchStart);
+      el.removeEventListener('touchmove', handleTouchMove);
+      el.removeEventListener('touchend', handleTouchEnd);
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, visibleCount, options.data.length]);
+
   const handleKey = (e) => {
     if (e.key === 'ArrowRight') {
       e.preventDefault();

libs/blocks/table/table.css

@@ -600,7 +600,7 @@ header.global-navigation {
   .table,
   .table.merch {
     margin: 0 2px;
-    min-width: 395px;
+    min-width: 100%;
   }
 
   .table.merch .col-merch .col-merch-content {

libs/scripts/scripts.js

@@ -106,7 +106,7 @@ const locales = {
   si: { ietf: 'sl-SI', tk: 'qxw8hzm.css' },
   sk: { ietf: 'sk-SK', tk: 'qxw8hzm.css' },
   th_en: { ietf: 'en', tk: 'hah7vzn.css' },
-  th_th: { ietf: 'th', tk: 'qxw8hzm.css' },
+  th_th: { ietf: 'th', tk: 'lqo2bst.css' },
   tr: { ietf: 'tr-TR', tk: 'qxw8hzm.css' },
   tw: { ietf: 'zh-TW', tk: 'jay0ecd' },
   ua: { ietf: 'uk-UA', tk: 'qxw8hzm.css' },

libs/styles/styles.css

@@ -160,6 +160,10 @@
   --body-font-family: adobe-clean-han-traditional, 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
 }
 
+:root:lang(th) {
+  --body-font-family: adobe-clean-thai, 'Adobe Clean', adobe-clean, 'Trebuchet MS', sans-serif;
+}
+
 @media (min-width: 1200px) {
   :root {
     --spacing-xl: 56px;

libs/utils/image-video-link.js

@@ -12,11 +12,12 @@ export default function init(el, a, btnFormat) {
   const playBtnFormat = btnFormat.split(':')[1];
   const btnSize = playBtnFormat.includes('-') ? `btn-${playBtnFormat.split('-')[1]}` : 'btn-large';
   const pic = el.querySelector('picture');
-  const playIcon = createTag('div', { class: 'play-icon-container', 'aria-label': 'play', role: 'button' }, PLAY_ICON_SVG);
+  const playIcon = createTag('div', { class: 'play-icon-container' }, PLAY_ICON_SVG);
   const imgLinkContainer = createTag('span', { class: 'modal-img-link' });
   el.insertBefore(imgLinkContainer, pic);
   if (btnSize) a.classList.add(btnSize);
   a.classList.add('consonant-play-btn');
+  a.setAttribute('aria-label', 'play');
   a.append(playIcon);
   imgLinkContainer.append(pic, a);
 }

libs/utils/utils.js

@@ -626,6 +626,15 @@ export function decorateLinks(el) {
         rdx.push(a);
       }
     }
+    // Custom action links
+    const loginEvent = '#_evt-login';
+    if (a.href.includes(loginEvent)) {
+      a.href = a.href.replace(loginEvent, '');
+      a.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.adobeIMS?.signIn();
+      });
+    }
     return rdx;
   }, []);
 }

test/utils/mocks/body.html

@@ -30,6 +30,8 @@
     <p><a class="disable-autoblock" href="https://www.instagram.com/#_dnb">Disable Autoblock</a></p>
     <!-- Auto Block -->
     <p><a class="autoblock" href="https://twitter.com/Adobe#_dnb">Auto Block</a></p>
+    <!-- Custom actions -->
+    <p><a class="login-action" href="https://www.adobe.com/#_evt-login"></a></p>
   </div>
   <div class="quote borders contained hide-block">
     <div>

test/utils/utils.test.js

@@ -87,6 +87,15 @@ describe('Utils', () => {
       });
     });
 
+    describe('Custom Link Actions', () => {
+      it('Implements a login action', async () => {
+        await waitForElement('.login-action');
+        const login = document.querySelector('.login-action');
+        utils.decorateLinks(login);
+        expect(login.href).to.equal('https://www.adobe.com/');
+      });
+    });
+
     describe('Fragments', () => {
       it('fully unwraps a fragment', () => {
         const fragments = document.querySelectorAll('.link-block.fragment');