Add support for CDT in media block

adobecom · Sep 20, 2024 · 6274f78 · 6274f78
1 parent 9eea2ee
commit 6274f78
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 46 deletions.
diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
@@ -33,7 +33,7 @@ function decorateQr(el) {
   qrImage.classList.add('qr-code-img');
 }
 
-export default function init(el) {
+export default async function init(el) {
   if (el.className.includes('rounded-corners')) {
     const { miloLibs, codeRoot } = getConfig();
     const base = miloLibs || codeRoot;
@@ -105,4 +105,15 @@ export default function init(el) {
   const mediaRowReversed = el.querySelector(':scope > .foreground > .media-row > div').classList.contains('text');
   if (mediaRowReversed) el.classList.add('media-reverse-mobile');
   decorateTextOverrides(el);
+
+  if (el.classList.contains('countdown-timer')) {
+    const { default: initCDT } = await import('../../features/cdt/cdt.js');
+    const classesToAdd = [];
+    if (el.classList.contains('dark')) {
+      classesToAdd.push('dark');
+    } else {
+      classesToAdd.push('light');
+    }
+    await initCDT(container, classesToAdd);
+  }
 }
diff --git a/test/blocks/hero-marquee/hero-marquee.test.js b/test/blocks/hero-marquee/hero-marquee.test.js
@@ -13,9 +13,7 @@ setConfig(conf);
 describe('Hero Marquee', () => {
   before(async () => {
     document.body.innerHTML = await readFile({ path: './mocks/body.html' });
-    const meta = document.createElement('meta');
-    meta.name = 'countdown-timer';
-    meta.content = '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST';
+    const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' });
     document.head.appendChild(meta);
     const { default: init } = await import('../../../libs/blocks/hero-marquee/hero-marquee.js');
     const marquees = document.querySelectorAll('.hero-marquee');
@@ -40,8 +38,8 @@ describe('Hero Marquee', () => {
     expect(hr).to.exist;
   });
 
-  describe('Embedding countdown-timer inside hero-marquee', () => {
-    const marquee = document.getElementById('hero-all-cdt');
+  it('Embedding countdown-timer inside hero-marquee', async () => {
+    const marquee = document.getElementById('hero-cdt');
     expect(marquee.getElementsByClassName('timer-label')).to.exist;
   });
 });
diff --git a/test/blocks/hero-marquee/mocks/body.html b/test/blocks/hero-marquee/mocks/body.html
@@ -118,27 +118,13 @@ <h1 id="row-cell---text-right-2">Hero w/ Adobe.tv link</h1>
   </div>
 </div>
 
-<div id="hero-all-cdt" class="hero-marquee xxxl-heading"></div>
+<div id="hero-cdt" class="hero-marquee xxxl-heading countdown-timer">
   <div>
     <div>
       <picture>
         <img loading="lazy" alt="" src="./" width="100" height="100">
       </picture>
     </div>
-    <div>
-      <picture>
-        <img loading="lazy" alt="" src="./" width="100" height="100">
-      </picture>
-    </div>
-    <div>
-      <picture>
-        <img loading="lazy" alt="" src="./" width="100" height="100">
-      </picture>
-    </div>
-  </div>
-  <div>
-    <div>con-block-row-lockup (xl-icon-size)</div>
-    <div><picture><img loading="lazy" src="./"></picture> <strong>XL Icon Size</strong></div>
   </div>
   <div>
     <div>
@@ -163,19 +149,6 @@ <h2 id="this-hero-has-all-row-types">This Hero has all row types</h2>
   <div>
     <div>--- white</div>
   </div>
-  <div>
-    <div data-valign="middle">con-block-row-qrcode</div>
-    <div>
-      <p><a href="/drafts/rparrish/assets/qr-adobe-com.svg">https://main--milo--adobecom.hlx.page/drafts/rparrish/assets/qr-adobe-com.svg</a></p>
-      <p><a href="https://www.adobe.com/">Google play</a></p>
-      <p><a href="https://www.adobe.com/">Apple store</a></p>
-    </div>
-  </div>
-  <div>
-    <div data-valign="middle">con-block-row-qrcode</div>
-    <!-- intentionally left empty for test case-->
-    <div></div>
-  </div>
   <div>
     <div>con-block-row-text (xs-body, m-button)</div>
     <div>See plans for <a href="#teach">students and teachers</a> or <a href="#biz">small and medium business.</a></div>
@@ -184,12 +157,4 @@ <h2 id="this-hero-has-all-row-types">This Hero has all row types</h2>
     <div>con-block-row-text (body-m)</div>
     <div>Text with no button class</div>
   </div>
-  <div>
-    <div>con-block-row-bgcolor</div>
-    <div>#fafafa</div>
-  </div>
-  <div>
-    <div>con-block-row-supplemental</div>
-    <div>sup text</div>
-  </div>
 </div>
diff --git a/test/blocks/marquee/marquee.test.js b/test/blocks/marquee/marquee.test.js
@@ -16,9 +16,7 @@ const video = await readFile({ path: './mocks/video.html' });
 const multipleIcons = await readFile({ path: './mocks/multiple-icons.html' });
 
 describe('marquee', () => {
-  const meta = document.createElement('meta');
-  meta.name = 'countdown-timer';
-  meta.content = '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST';
+  const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' });
   document.head.appendChild(meta);
   const marquees = document.querySelectorAll('.marquee');
   marquees.forEach((marquee) => {

diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js
@@ -5,6 +5,8 @@ document.head.innerHTML = "<link rel='stylesheet' href='../../../libs/blocks/med
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/media/media.js');
 describe('media', () => {
+  const meta = Object.assign(document.createElement('meta'), { name: 'countdown-timer', content: '2024-08-26 12:00:00 PST,2026-08-30 00:00:00 PST' });
+  document.head.appendChild(meta);
   const medias = document.querySelectorAll('.media');
   medias.forEach((media) => {
     init(media);
@@ -132,5 +134,8 @@ describe('media', () => {
       const detail = medias[8].querySelector('.detail-l');
       expect(detail).to.exist;
     });
+    it('has a cdt', () => {
+      expect(medias[8].getElementsByClassName('timer-label')).to.exist;
+    });
   });
 });
diff --git a/test/blocks/media/mocks/body.html b/test/blocks/media/mocks/body.html
@@ -170,7 +170,7 @@ <h2 id="heading-xs-1822-media-merch-small"><strong>Heading XS 18/22 Media (merch
     </div>
   </div>
 </div>
-<div class="media medium-compact">
+<div class="media medium-compact countdown-timer">
   <div>
     <div data-valign="middle">
       <picture>

diff --git a/test/blocks/media/mocks/placeholders.json b/test/blocks/media/mocks/placeholders.json
@@ -0,0 +1,24 @@
+{
+  "total": 21,
+  "offset": 0,
+  "limit": 21,
+  "data": [
+    {
+      "key": "cdt-ends-in",
+      "value": "ENDS IN"
+    },
+    {
+      "key": "cdt-days",
+      "value": "days"
+    },
+    {
+      "key": "cdt-hours",
+      "value": "hours"
+    },
+    {
+      "key": "cdt-mins",
+      "value": "mins"
+    }
+  ],
+  ":type": "sheet"
+}