Mwpw 132409 - Optional Headings for Link Farms (adobecom#866)

* MWPW-132409-Optional Headings use case * Review changes * Changes as per review comments * Unit Tests * MWPW-132409-Optional Headings use case * Review changes * Changes as per review comments * Unit Tests * changed from id to class * combining slectors in test file --------- Co-authored-by: Drashti Modasara <[email protected]>
depanshu357 · Jun 21, 2023 · 097eafb · 097eafb
1 parent 45cebae
commit 097eafb
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 1 deletion.
diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css
@@ -141,6 +141,10 @@
   line-height: var(--type-heading-xs-lh);
 }
 
+.link-farm.text-block .no-heading {
+  margin: 0;
+}
+
 .link-farm.text-block h2 {
   margin: 0 0 var(--spacing-m);
 }
@@ -181,10 +185,15 @@
   .inset.text-block .foreground > div {
     padding-left: var(--spacing-l);
   }
-  
+
   .link-farm.text-block .foreground {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .link-farm.text-block .no-heading {
+    height: var(--type-heading-m-size);
+    margin: 0 0 var(--spacing-l);
+  }
 }
 
 /* Desktop up */

diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js
@@ -1,4 +1,5 @@
 import { decorateBlockBg, decorateBlockText, getBlockSize, decorateTextOverrides } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 // size: [heading, body, ...detail]
 const blockTypeSizes = {
@@ -50,6 +51,16 @@ export default function init(el) {
     const elAction = el.querySelector('.action-area');
     if (elAction) elAction.classList.add('body-s');
   }
+  if (el.classList.contains('link-farm')) {
+    const foregroundDiv = el.querySelectorAll('.foreground')[1];
+    const count = foregroundDiv.querySelectorAll('h3').length;
+    foregroundDiv.querySelectorAll('div').forEach(divElem => {
+      if (!divElem.querySelector('h3') && count) {
+        const headingElem = createTag('h3', { class: 'no-heading'});
+        divElem.insertBefore(headingElem, divElem.firstChild);
+      }
+    });
+  }
   el.classList.add(...helperClasses);
   decorateTextOverrides(el);
 }
diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html
@@ -99,3 +99,41 @@ <h3 id="text-vertical-1">Text (vertical)</h3>
     </div>
   </div>
 </div>
+<div class="text link-farm">
+  <div>
+    <div data-valign="middle">#fff</div>
+  </div>
+  <div>
+    <div data-valign="middle">
+      <h2 id="more-photography-tips-and-techniques-optional-headings">More photography tips and techniques (Optional headings)</h2>
+    </div>
+  </div>
+  <div>
+    <div data-valign="middle">
+      <h3 id="tips-for">Tips for...</h3>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/astrophotography.html">Astrophotography</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/headshot-photography.html">Headshot photography</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/photoshop-vs-gimp.html">Photoshop vs. Gimp</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/newborn-photography-props.html">Newborn photography props</a></p>
+    </div>
+    <div data-valign="middle">
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/portrait-lighting.html">Portrait lighting</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/pet-photography.html">Pet photography</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/photoshop-ideas.html">Photoshop Ideas</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/product-photography-props.html">Product photography props</a></p>
+    </div>
+    <div data-valign="middle">
+      <h3 id="how-to">How to...</h3>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/motion-blur-effect.html">Create a motion blur effect</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/duotone-effect.html">Create a duotone effect</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/neon-effect.html">Create a neon effect</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/maternity-photo-poses.html">Maternity photo poses</a></p>
+    </div>
+    <div data-valign="middle">
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/add-text-to-photos.html">Add text to photos</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/compress-image.html">Compress an image</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/photo-touch-up.html">Retouch a photo</a></p>
+      <p><a href="https://www.adobe.com/creativecloud/photography/discover/shutter-priority-mode.html">Shutter priority mode</a></p>
+    </div>
+  </div>
+</div>
diff --git a/test/blocks/text/text.test.js b/test/blocks/text/text.test.js
@@ -31,4 +31,26 @@ describe('text block', () => {
       expect(body).to.exist;
     });
   });
+
+  describe('Link Farm', () => {
+    it('is present', () => {
+      const element = document.querySelector('.link-farm');
+      expect(element).to.exist;
+    });
+
+    it('adds h3 elements when necessary', () => {
+      const headingElements = document.querySelectorAll('.link-farm .foreground h3');
+      expect(headingElements.length).to.equal(4);
+    });
+    it('adds no-heading class to the h3 element', () => {
+      const headingElem = document.querySelector('.link-farm .foreground .no-heading');
+      expect(headingElem).to.exist;
+    });
+    it('adds h3 as the first element in the div', () => {
+      const divElements = document.querySelectorAll('.link-farm .foreground:nth-child(2) div');
+      divElements.forEach(div => {
+        expect(div.children[0].tagName).to.equal('H3');
+      });
+    })
+  });
 });