[Release] Stage to Main (adobecom#2980)

libs/blocks/chart/chart.js

@@ -163,7 +163,7 @@ export const donutTooltipFormatter = ({
   name,
   percent,
 } = {}, unit = '') => (
-  `${marker} ${name}<br />${data[value[0]]}${unit} ${percent}%<i class="tooltip-icon"></i>`
+  `${marker} ${name}<br />${data[value[0]]}${unit}${unit !== '%' ? ` ${percent}%` : ''}<i class="tooltip-icon"></i>`
 );
 
 export const pieTooltipFormatter = ({

libs/blocks/global-navigation/global-navigation.js

@@ -43,8 +43,8 @@ import {
 import { replaceKey, replaceKeyArray } from '../../features/placeholders.js';
 
 function getHelpChildren() {
-  const { unavHelpChildren } = getConfig();
-  return unavHelpChildren || [
+  const { unav } = getConfig();
+  return unav?.unavHelpChildren || [
     { type: 'Support' },
     { type: 'Community' },
   ];
@@ -101,12 +101,19 @@ export const CONFIG = {
       appswitcher: { name: 'app-switcher' },
       notifications: {
         name: 'notifications',
-        attributes: { notificationsConfig: { applicationContext: { appID: 'adobecom' } } },
+        attributes: { notificationsConfig: { applicationContext: { appID: getConfig().unav?.uncAppId || 'adobecom' } } },
       },
       help: {
         name: 'help',
         attributes: { children: getHelpChildren() },
       },
+      jarvis: {
+        name: 'jarvis',
+        attributes: {
+          appid: getConfig().jarvis?.id,
+          callbacks: getConfig().jarvis?.callbacks,
+        },
+      },
     },
   },
 };
@@ -625,6 +632,7 @@ class Gnav {
         onAnalyticsEvent,
       },
       children: getChildren(),
+      isSectionDividerRequired: getConfig()?.unav?.showSectionDivider,
     });
 
     // Exposing UNAV config for consumers

libs/blocks/media/media.js

@@ -114,6 +114,7 @@ export default async function init(el) {
   decorateTextOverrides(el);
 
   if (el.classList.contains('countdown-timer')) {
-    await loadCDT(container, el.classList);
+    const textBlock = container.querySelector('.text');
+    if (textBlock) await loadCDT(textBlock, el.classList);
   }
 }

libs/blocks/notification/notification.js

@@ -14,7 +14,7 @@
 * Notification - v1.2
 */
 
-import { decorateBlockText, decorateBlockBg, decorateTextOverrides, decorateMultiViewport } from '../../utils/decorate.js';
+import { decorateBlockText, decorateBlockBg, decorateTextOverrides, decorateMultiViewport, loadCDT } from '../../utils/decorate.js';
 import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
 
 const { miloLibs, codeRoot } = getConfig();
@@ -135,6 +135,9 @@ async function decorateLockup(lockupArea, el) {
 async function decorateForegroundText(el, container) {
   const text = container?.querySelector('h1, h2, h3, h4, h5, h6, p')?.closest('div');
   text?.classList.add('text');
+  if (el.classList.contains('countdown-timer') && !el.classList.contains('pill') && !el.classList.contains('ribbon')) {
+    await loadCDT(text, el.classList);
+  }
   const iconArea = text?.querySelector('p:has(picture)');
   iconArea?.classList.add('icon-area');
   if (iconArea?.textContent.trim()) await decorateLockup(iconArea, el);

libs/blocks/region-nav/region-nav.js

@@ -1,21 +1,26 @@
 import { getConfig } from '../../utils/utils.js';
 
-/* c8 ignore next 11 */
-function handleEvent(prefix, link) {
+function setInternational(prefix) {
   const domain = window.location.host.endsWith('.adobe.com') ? 'domain=adobe.com' : '';
   const maxAge = 365 * 24 * 60 * 60; // max-age in seconds for 365 days
   document.cookie = `international=${prefix};max-age=${maxAge};path=/;${domain}`;
   sessionStorage.setItem('international', prefix);
+}
+
+function handleEvent({ prefix, link, callback } = {}) {
+  if (typeof callback !== 'function') return;
+
   fetch(link.href, { method: 'HEAD' }).then((resp) => {
     if (!resp.ok) throw new Error('request failed');
-    window.location.assign(link.href);
+    callback(link.href);
   }).catch(() => {
     const prefixUrl = prefix ? `/${prefix}` : '';
-    window.location.assign(`${prefixUrl}/`);
+    callback(`${prefixUrl}/`);
   });
 }
 
-function decorateLink(link, config, path) {
+function decorateLink(link, path) {
+  let hrefAdapted;
   let pathname = link.getAttribute('href');
   if (pathname.startsWith('http')) {
     try { pathname = new URL(pathname).pathname; } catch (e) { /* href does not contain domain */ }
@@ -25,10 +30,33 @@ function decorateLink(link, config, path) {
   let { href } = link;
   if (href.endsWith('/')) href = href.slice(0, -1);
   link.href = `${href}${path}`;
+
+  link.addEventListener('mouseover', () => {
+    setTimeout(() => {
+      if (link.matches(':hover') && !hrefAdapted) {
+        handleEvent({
+          prefix,
+          link,
+          callback: (newHref) => {
+            link.href = newHref;
+            hrefAdapted = true;
+          },
+        });
+      }
+    }, 100);
+  });
+
   link.addEventListener('click', (e) => {
-    /* c8 ignore next 2 */
+    setInternational(prefix);
+    if (hrefAdapted) return;
     e.preventDefault();
-    handleEvent(prefix, link, config);
+    handleEvent({
+      prefix,
+      link,
+      callback: (newHref) => {
+        window.open(newHref, e.ctrlKey || e.metaKey ? '_blank' : '_self');
+      },
+    });
   });
 }
 
@@ -40,5 +68,5 @@ export default function init(block) {
   if (!links.length) return;
   const { prefix } = config.locale;
   const path = window.location.href.replace(`${window.location.origin}${prefix}`, '').replace('#langnav', '');
-  links.forEach((l) => decorateLink(l, config, path));
+  links.forEach((link) => decorateLink(link, path));
 }

libs/blocks/tag-selector/tag-selector.js

@@ -3,14 +3,23 @@ import Picker from '../../ui/controls/TagSelectPicker.js';
 import { loadCaasTags } from '../caas/utils.js';
 
 const CAAS_LABEL = 'CaaS';
+const TAG_KEYS = ['Type', 'Name'];
 
-async function fetchData(url) {
+async function fetchTags(url) {
   const resp = await fetch(url.toLowerCase());
 
   if (!resp.ok) throw new Error('Network error');
 
-  const json = await resp.json();
-  return json;
+  const { data } = await resp.json();
+
+  if (!Array.isArray(data)) throw new Error('Could not parse data');
+
+  return data.map((item) => {
+    const tag = Object.create(null);
+    TAG_KEYS.forEach((key) => { tag[key] = item[key]; });
+
+    return tag;
+  });
 }
 
 const TagPreview = ({ selectedTags = [] }) => {
@@ -93,9 +102,12 @@ const TagSelector = ({ consumerUrls = [] }) => {
 
     const fetchConsumer = () => {
       consumerUrls.forEach(({ title, url }) => {
-        fetchData(url).then((json) => {
-          const tags = getConsumerTags(json.data);
+        fetchTags(url).then((data) => {
+          const tags = getConsumerTags(data);
           setTagSelectorTags((prevConsumerTags) => ({ [title]: tags, ...prevConsumerTags }));
+        }).catch((e) => {
+          /* c8 ignore next 2 */
+          window.lana.log(`Tag Selector. Error fetching consumer tags: ${e.message}`, { tags: 'tag-selector', errorType: 'i' });
         });
       });
     };

libs/deps/mas/merch-card.js

@@ -1645,7 +1645,7 @@ merch-card [slot='callout-content'] > div > div {
 
 merch-card [slot='callout-content'] > div > div > div {
     display: inline-block;
-    text-align: left;
+    text-align: start;
     font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) var(--body-font-family, 'Adobe Clean');
     letter-spacing: var(--consonant-merch-card-callout-letter-spacing);
     color: var(--consonant-merch-card-callout-font-color);

libs/features/cdt/cdt.css

@@ -16,10 +16,7 @@
 .timer-label {
   font-size: var(--type-body-s-size);
   font-weight: 700;
-  height: 27px;
-}
-
-.light .timer-label {
+  line-height: var(--type-body-xxl-size);
   color: #000;
 }
 
@@ -28,15 +25,20 @@
 }
 
 .horizontal .timer-label {
-  margin: 0 2px 27px;
+  margin: 0 2px var(--type-body-xxl-size);
 }
 
-.timer-block {
-  display: flex;
+.timer-separator {
+  margin: 0px 2px;
+  line-height: var(--type-body-xxl-size);
 }
 
 .horizontal .timer-block {
-  margin-left: 10px;
+  margin-inline-start: 10px;
+}
+
+.timer-block {
+  display: flex;
 }
 
 .timer-fragment {
@@ -46,15 +48,13 @@
 }
 
 .timer-box {
-  padding: 0 9px;
-  width: 10px;
+  padding: 0 calc(var(--font-size-multiplier, 1) * 9px);
+  width: var(--type-detail-s-size);
   border-radius: 5px;
   font-size: var(--type-body-m-size);
   font-weight: 700;
   text-align: center;
-}
-
-.light .timer-box {
+  line-height: var(--type-body-xxl-size);
   background-color: #222;
   color: #FFF;
 }
@@ -64,6 +64,10 @@
   color: #1D1D1D;
 }
 
+html[dir="rtl"] .timer-unit-container {
+  flex-direction: row-reverse;
+}
+
 .timer-unit-container {
   display: flex;
   column-gap: 2px;
@@ -75,9 +79,7 @@
   font-size: var(--type-body-xs-size);
   font-weight: 400;
   text-align: start;
-}
-
-.light .timer-unit-label {
+  line-height: var(--type-body-xxl-size);
   color: #464646;
 }
 

libs/features/cdt/cdt.js

@@ -11,6 +11,10 @@ function loadCountdownTimer(
 ) {
   let isVisible = false;
   let interval;
+  const oneMinuteinMs = 60000;
+
+  const instant = new URL(window.location.href)?.searchParams?.get('instant');
+  let currentTime = instant ? Date.parse(instant) : Date.now();
 
   function appendTimerBox(parent, value, label) {
     const fragment = createTag('div', { class: 'timer-fragment' }, null, { parent });
@@ -52,9 +56,6 @@ function loadCountdownTimer(
   }
 
   function updateCountdown() {
-    const instant = new URL(window.location.href)?.searchParams?.get('instant');
-    const currentTime = instant ? new Date(instant) : Date.now();
-
     for (let i = 0; i < timeRangesEpoch.length; i += 2) {
       const startTime = timeRangesEpoch[i];
       const endTime = timeRangesEpoch[i + 1];
@@ -66,6 +67,7 @@ function loadCountdownTimer(
         const hoursLeft = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
         const minutesLeft = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60));
         render(daysLeft, hoursLeft, minutesLeft);
+        currentTime += oneMinuteinMs;
         return;
       }
     }
@@ -76,7 +78,6 @@ function loadCountdownTimer(
   }
 
   function startCountdown() {
-    const oneMinuteinMs = 60000;
     updateCountdown();
     interval = setInterval(updateCountdown, oneMinuteinMs);
   }
@@ -108,13 +109,14 @@ export default async function initCDT(el, classList) {
     const parsedTime = Date.parse(time?.trim());
     return Number.isNaN(parsedTime) ? null : parsedTime;
   });
+
   if (timeRangesEpoch.includes(null)) {
     throw new Error('Invalid format for countdown timer range');
   }
 
   const cdtDiv = createTag('div', { class: 'countdown-timer' }, null, { parent: el });
   cdtDiv.classList.add(isMobile() ? 'vertical' : 'horizontal');
-  cdtDiv.classList.add(classList.contains('dark') ? 'dark' : 'light');
+  if (classList.contains('dark')) cdtDiv.classList.add('dark');
   if (classList.contains('center')) cdtDiv.classList.add('center');
 
   loadCountdownTimer(cdtDiv, cdtLabel, cdtDays, cdtHours, cdtMins, timeRangesEpoch);

libs/features/mas/web-components/src/global.css.js

@@ -233,7 +233,7 @@ merch-card [slot='callout-content'] > div > div {
 
 merch-card [slot='callout-content'] > div > div > div {
     display: inline-block;
-    text-align: left;
+    text-align: start;
     font: normal normal normal var(--consonant-merch-card-callout-font-size)/var(--consonant-merch-card-callout-line-height) var(--body-font-family, 'Adobe Clean');
     letter-spacing: var(--consonant-merch-card-callout-letter-spacing);
     color: var(--consonant-merch-card-callout-font-color);

libs/navigation/navigation.js

@@ -4,7 +4,7 @@ const blockConfig = [
     name: 'global-navigation',
     targetEl: 'header',
     appendType: 'prepend',
-    params: ['imsClientId', 'searchEnabled', 'unavHelpChildren', 'customLinks'],
+    params: ['imsClientId', 'searchEnabled', 'unav', 'customLinks', 'jarvis'],
   },
   {
     key: 'footer',
@@ -45,6 +45,7 @@ export default async function loadBlock(configs, customLib) {
   const branch = new URLSearchParams(window.location.search).get('navbranch');
   const miloLibs = branch ? `https://${branch}--milo--adobecom.hlx.page` : customLib || envMap[env];
   if (!header && !footer) {
+    // eslint-disable-next-line no-console
     console.error('Global navigation Error: header and footer configurations are missing.');
     return;
   }
@@ -72,7 +73,7 @@ export default async function loadBlock(configs, customLib) {
       if (configBlock) {
         await bootstrapBlock(`${miloLibs}/libs`, {
           ...block,
-          ...(block.key === 'header' && { unavComponents: configBlock.unavComponents, redirect: configBlock.redirect }),
+          ...(block.key === 'header' && { unavComponents: configBlock.unav?.unavComponents, redirect: configBlock.redirect }),
         });
         configBlock.onReady?.();
       }

libs/utils/decorate.js

@@ -323,6 +323,6 @@ export async function loadCDT(el, classList) {
         .then(({ default: initCDT }) => initCDT(el, classList)),
     ]);
   } catch (error) {
-    window.lana?.log(`Failed to load countdown timer module: ${error}`, { tags: 'countdown-timer' });
+    window.lana?.log(`WARN: Failed to load countdown timer: ${error}`, { tags: 'errorType=warn,module=countdown-timer' });
   }
 }