[MWPW-158927] Countdown Timer feedbacks incorporated (adobecom#2955)

* Fix RTL issues with Countdown Timer * UT fix * review comment * review comment * review comment * font fixes * do not reverse * Revert "UT fix" This reverts commit c7e4d1d. * added CDT in notifications standard variant * ends in vertical positioning fix * review comments * UT added for cdt in notification * lint * css fixes * minor fix * lint * css * update timer for instant query param * narcis review feedback incorporated from PR adobecom#2928 * minor refactoring * fix CDT alignment in media and modal block --------- Co-authored-by: Rohit Sahu <[email protected]>
jenssingler · Oct 7, 2024 · 1dba100 · 1dba100
1 parent a859020
commit 1dba100
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 29 deletions.
diff --git a/libs/blocks/media/media.js b/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);
   }
 }
diff --git a/libs/blocks/notification/notification.js b/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);

diff --git a/libs/features/cdt/cdt.css b/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;
 }
 

diff --git a/libs/features/cdt/cdt.js b/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);

diff --git a/libs/utils/decorate.js b/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' });
   }
 }
diff --git a/test/blocks/notification/mocks/body.html b/test/blocks/notification/mocks/body.html
@@ -495,5 +495,49 @@ <h3 id="desktop-content"><strong>Desktop content</strong></h3>
     </div>
   </div>
 </div>
-
+<div>
+  <h3 id="banner-notifications-default">Banner Notifications (default) with Countdown countdown-timer</h3>
+  <p>notification</p>
+  <div class="notification countdown-timer">
+    <div>
+      <div>
+        <picture>
+          <source media="(max-width: 400px)" srcset="./">
+          <img alt="mock" loading="lazy" src="">
+        </picture>
+      </div>
+      <div>
+        <picture>
+          <source media="(max-width: 400px)" srcset="./">
+          <img alt="mock" loading="lazy" src="">
+        </picture>
+      </div>
+      <div>
+        <picture>
+          <source media="(max-width: 400px)" srcset="./">
+          <img alt="mock" loading="lazy" src="">
+        </picture>
+      </div>
+    </div>
+    <div>
+      <div>
+        <h3 id="heading-m-2430-lorem-ipsum-dolor-sit-amet-consetetur-sadis-elitr">Heading M 24/30 Lorem ipsum dolor sit amet, consetetur sadis elitr.</h3>
+        <p>Body M 18/27 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius. <a href="https://usc-word-edit.officeapps.live.com/we/wordeditorframe.aspx?ui=en%2DUS&#x26;rs=en%2DUS&#x26;wopisrc=https%3A%2F%2Fadobe.sharepoint.com%2Fsites%2Fadobecom%2F_vti_bin%2Fwopi.ashx%2Ffiles%2F3de33d38f15646ef97bcba87d26c1aeb&#x26;wdenableroaming=1&#x26;mscc=1&#x26;hid=0CDF68A0-90AA-D000-70F9-F912044D2A2F&#x26;wdorigin=Other&#x26;jsapi=1&#x26;jsapiver=v1&#x26;newsession=1&#x26;corrid=7bf09044-0a00-45c1-8cdd-5ab811dd1859&#x26;usid=7bf09044-0a00-45c1-8cdd-5ab811dd1859&#x26;sftc=1&#x26;cac=1&#x26;mtf=1&#x26;sfp=1&#x26;instantedit=1&#x26;wopicomplete=1&#x26;wdredirectionreason=Unified_SingleFlush&#x26;rct=Medium&#x26;ctp=LeastProtected">See terms</a>.</p>
+        <p><em><a href="https://www.adobe.com/">Call to action</a></em> <strong><a href="https://www.adobe.com/">Call to action</a></strong></p>
+      </div>
+      <div>
+        <picture>
+          <source media="(max-width: 400px)" srcset="./">
+          <img alt="mock" loading="lazy" src="">
+        </picture>
+      </div>
+    </div>
+  </div>
+  <div class="section-metadata">
+    <div>
+      <div data-valign="middle">style</div>
+      <div data-valign="middle"><strong>l spacing</strong></div>
+    </div>
+  </div>
+</div>
 <div></div>
diff --git a/test/blocks/notification/notification.test.js b/test/blocks/notification/notification.test.js
@@ -1,13 +1,16 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
-import { setConfig } from '../../../libs/utils/utils.js';
+import { setConfig, getConfig } from '../../../libs/utils/utils.js';
+
+const mockBody = await readFile({ path: './mocks/body.html' });
+const { default: init } = await import('../../../libs/blocks/notification/notification.js');
 
 const locales = { '': { ietf: 'en-US', tk: 'hah7vzn.css' } };
-const conf = { locales };
+const conf = { locales, miloLibs: 'http://localhost:2000/libs' };
 setConfig(conf);
+getConfig().locale.contentRoot = '/test/blocks/notification/mocks';
 
-const mockBody = await readFile({ path: './mocks/body.html' });
-const { default: init } = await import('../../../libs/blocks/notification/notification.js');
+document.head.innerHTML = '<link rel="stylesheet" href="../../../libs/blocks/notification/notification.css"><meta name="countdown-timer" content="2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST">';
 
 describe('notification', async () => {
   let notifs;
@@ -45,6 +48,9 @@ describe('notification', async () => {
       const border = notifs[2].querySelector(':scope > .border');
       expect(border).to.exist;
     });
+    it('has a cdt', () => {
+      expect(notifs[15].querySelectorAll('.timer-label')).to.have.lengthOf(1);
+    });
   });
 
   describe('ribbon notifications', () => {