MWPW-148054: Mnemonics list in a text block

libs/blocks/text/text.js

@@ -1,5 +1,5 @@
 import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides } from '../../utils/decorate.js';
-import { createTag, loadStyle, getConfig } from '../../utils/utils.js';
+import { createTag, loadStyle, getConfig, loadBlock } from '../../utils/utils.js';
 
 // size: [heading, body, ...detail]
 const blockTypeSizes = {
@@ -76,7 +76,7 @@ function decorateLinkFarms(el) {
   });
 }
 
-export default function init(el) {
+export default async function init(el) {
   el.classList.add('text-block', 'con-block');
   let rows = el.querySelectorAll(':scope > div');
   if (rows.length > 1) {
@@ -117,4 +117,11 @@ export default function init(el) {
     lastActionArea.insertAdjacentElement('afterend', div);
     div.append(lastActionArea);
   }
+
+  const mnemonicList = el.querySelector('.mnemonic-list');
+  const foreground = mnemonicList?.closest('.foreground');
+  if (foreground) {
+    mnemonicList.querySelectorAll('p').forEach((product) => product.removeAttribute('class'));
+    await loadBlock(mnemonicList);
+  }
 }

test/blocks/text/mocks/body.html

@@ -197,3 +197,26 @@ <h3 id="text">Text</h3>
     </div>
   </div>
 </div>
+
+<div id="mnemonics" class="text quiet medium light center xxl-spacing mnemonic-list text-block con-block has-bg">
+  <div class="background"></div>
+  <div class="foreground">
+     <div data-valign="middle">
+        <h2 id="get-20-creative-cloud-for-less-than-the-price-of-3-apps" class="heading-l">Get 20+ creative cloud for less than the price of 3 apps.</h2>
+        <p class="body-m">The All Apps plan includes 20+ apps and services plus 20,000 fonts, storage, templates, and tutorials for less than the price of acrobat, photoshop, and premiere pro sold separately.</p>
+        <div class="mnemonic-list" data-path="/fragments/mirafedas/includes">
+           <div>
+              <div data-valign="middle">
+                 <p class="body-m"><strong>Includes:</strong></p>
+                 <p class="body-m"><strong>Acrobat</strong></p>
+                 <p class="body-m"><strong>Photoshop</strong></p>
+                 <p class="body-m"><strong>Premiere Pro</strong></p>
+                 <p class="body-m"><strong>Illustrator</strong></p>
+                 <p class="body-m"><strong>Adobe Express</strong></p>
+                 <p class="body-m"><strong>Lightroom</strong></p>
+              </div>
+           </div>
+        </div>
+     </div>
+  </div>
+</div>

test/blocks/text/text.test.js

@@ -1,5 +1,12 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
+
+const conf = {
+  codeRoot: '/libs',
+  contentRoot: `${window.location.origin}`,
+};
+setConfig(conf);
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/text/text.js');
@@ -78,4 +85,16 @@ describe('text block', () => {
       expect(actionArea.parentElement.className.includes('cta-container')).to.be.false;
     });
   });
+  describe('text block with mnemonics list', () => {
+    it('renders mnemonics list', async () => {
+      const textBlockWithMnemonics = document.querySelector('#mnemonics');
+      await init(textBlockWithMnemonics);
+      const mnemonicsList = textBlockWithMnemonics.querySelector('.mnemonic-list');
+      const productList = mnemonicsList?.querySelector('.product-list');
+      const productItems = productList?.querySelectorAll('.product-item');
+      expect(mnemonicsList).to.exist;
+      expect(productList).to.exist;
+      expect(productItems.length).to.equal(7);
+    });
+  });
 });