MWPW-144549 CTA alignment for Text, Icon, and Media Blocks

libs/blocks/icon-block/icon-block.css

@@ -40,7 +40,7 @@
 
 .icon-block .foreground .text-content {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-content: center;
   width: 100%;
 }
@@ -104,10 +104,6 @@
   margin-bottom: 0;
 }
 
-.icon-block.inline .body-s.action-area {
-  padding-top: 24px;
-}
-
 .icon-block.inline .icon-area,
 .icon-block.inline .icon-area picture img {
   min-width: var(--icon-size-xxl);
@@ -167,6 +163,11 @@
   margin: var(--spacing-s) auto var(--spacing-xs) auto;
 }
 
+.section[class*="-up"] .icon-block .second-column {
+  display: flex;
+  flex-direction: column;
+}
+
 .icon-block.bio.center .foreground .second-column {
   margin-top: var(--spacing-s);
 }
@@ -250,6 +251,14 @@
   margin-bottom: 0;
 }
 
+.icon-block .cta-container .action-area {
+  width: 100%;
+}
+
+.section[class*="-up"] .icon-block .action-area {
+  align-self: end;
+}
+
 .icon-block.full-width .foreground .text-content .action-area {
   justify-content: center;
 }
@@ -298,6 +307,12 @@
   margin: unset; 
 }
 
+.section[class*="-up"] .icon-block .foreground {
+  display: flex;
+  align-self: stretch;
+  width: 100%;
+}
+
 [class*="-up"] .icon-block.bio.inline .foreground {
   max-width: unset;
   width: unset;
@@ -326,6 +341,23 @@
   line-height: var(--type-body-m-lh);
 }
 
+.section[class*="-up"] .icon-block {
+  display: flex;
+  align-self: stretch;
+}
+
+.icon-block .cta-container {
+  margin-top: var(--spacing-s);
+}
+
+.section[class*="-up"] .icon-block .cta-container {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+}
+
 @media screen and (min-width: 600px) and (max-width: 1200px) {
   .icon-block .foreground .icon-area {
     max-width: 234px;
@@ -428,8 +460,6 @@
   }
 
   .icon-block.vertical .foreground .text-content {
-    flex-grow: 1;
-    flex-basis: 0;
     margin-bottom: 0;
   }
 

libs/blocks/icon-block/icon-block.js

@@ -14,6 +14,7 @@
 * Icon Block - v5.1
 */
 
+import action from '../../utils/action.js';
 import { decorateBlockText, getBlockSize } from '../../utils/decorate.js';
 import { createTag } from '../../utils/utils.js';
 
@@ -75,6 +76,17 @@ function decorateContent(el) {
       if (secondColumn.children.length === 1) el.classList.add('items-center');
       el.querySelector('.foreground .text-content').append(secondColumn);
     }
+    const ctas = el.querySelectorAll('.action-area');
+    if (ctas.length) {
+      const div = createTag('div', { class: 'cta-container' });
+      const lastCta = ctas[ctas.length - 1];
+      const secondLastCta = ctas[ctas.length - 2];
+      lastCta.insertAdjacentElement('afterend', div);
+      if (secondLastCta && lastCta.previousElementSibling === secondLastCta) {
+        div.append(secondLastCta);
+      }
+      div.append(lastCta);
+    }
   }
 }
 

libs/blocks/media/media.css

@@ -70,6 +70,7 @@
   display: flex;
   gap: var(--spacing-s);
   align-items: flex-start;
+  width: 100%;
 }
 
 .media .text .icon-area {
@@ -254,6 +255,49 @@ div[class*="-up"] .media .foreground > .media-row {
   height: var(--icon-size-xxl);
 }
 
+/* Text Alignment */
+.section[class*="-up"] .media:not(.media-reverse-mobile) {
+  display: flex;
+  align-self: stretch;
+}
+
+.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground {
+  display: flex;
+  align-self: stretch;
+  width: 100%
+}
+
+.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.section[class*="-up"] .media:not(.media-reverse-mobile) .foreground .text {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="heading-"],
+.section[class*="-up"] .media:not(.media-reverse-mobile) p:not([class*="detail-"]):not(.subcopy-link),
+.section[class*="-up"] .media:not(.media-reverse-mobile) [class*="body-"] {
+  margin-bottom: 0;
+}
+
+.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) {
+  margin-top: 0;
+  margin-bottom: revert;
+}
+
+.section[class*="-up"] .media:not(.media-reverse-mobile) .cta-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 600px) {
   .media > .foreground .media-row {
     gap: var(--spacing-m);
@@ -318,6 +362,10 @@ div[class*="-up"] .media .foreground > .media-row {
   .media .icon-stack-area {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row {
+    gap: 0;
+  }
 }
 
 @media screen and (min-width: 1200px) {

libs/blocks/media/media.js

@@ -87,6 +87,15 @@ export default function init(el) {
         link.className = 'body-xxs';
       });
     }
+    const lastCta = el.querySelector('.action-area:last-of-type');
+    if (lastCta) {
+      const div = createTag('div', { class: 'cta-container' });
+      lastCta.insertAdjacentElement('afterend', div);
+      if (lastCta.previousElementSibling.className.includes('icon-stack-area')) {
+        div.append(lastCta.previousElementSibling);
+      }
+      div.append(lastCta);
+    }
     container.append(row);
   });
 

libs/blocks/text/text.css

@@ -16,6 +16,7 @@
 
 .text-block [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; }
 
+.text-block .cta-container,
 .text-block p.action-area { margin-top: var(--spacing-s); }
 
 .text-block div > *:last-child { margin-bottom: 0; }
@@ -62,6 +63,10 @@
   align-items: center;
 }
 
+.text-block .cta-container .action-area {
+  width: 100%;
+}
+
 .text-block hr {
   border-color: #e1e1e1;
   border-style: solid;
@@ -191,9 +196,39 @@
   display: none;
 }
 
+/* Text Alignment */
+.section[class*="-up"] .text-block:not(.legal, .link-farm) {
+  display: flex;
+  align-self: stretch;
+}
+
+.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground {
+  display: flex;
+  align-self: stretch;
+  width: 100%;
+}
+
+.section[class*="-up"] .text-block:not(.legal, .link-farm) .foreground > div {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.section[class*="-up"] .text-block:not(.legal, .link-farm) [class^="heading"],
+.section[class*="-up"] .text-block:not(.legal, .link-farm) p:not([class^="detail-"]),
+.section[class*="-up"] .text-block:not(.legal, .link-farm) [class^="body-"] {
+  margin-bottom: 0;
+}
+
+.section[class*="-up"] .text-block:not(.legal, .link-farm) .cta-container {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  height: 100%;
+}
+
 /* Tablet up */
 @media screen and (min-width: 600px) {
-
   .inset.text-block .foreground::before {
     display: none;
   }

libs/blocks/text/text.js

@@ -110,4 +110,10 @@ export default function init(el) {
   el.classList.add(...helperClasses);
   decorateTextOverrides(el);
   if (!hasLinkFarm) decorateMultiViewport(el);
+  const actionArea = el.querySelector('.action-area:last-of-type');
+  if (actionArea) {
+    const div = createTag('div', { class: 'cta-container' });
+    actionArea.insertAdjacentElement('afterend', div);
+    div.append(actionArea);
+  }
 }

test/blocks/icon-block/icon-block.test.js

@@ -43,4 +43,14 @@ describe('icon blocks', () => {
       expect(heading).to.not.exist;
     });
   });
+  describe('cta container', () => {
+    it('is added around the only action area', () => {
+      expect(document.querySelector('.cta-container #one-cta')).to.exist;
+    });
+    it('is added around adjacent action areas', () => {
+      const parent = document.querySelector('#adjacent-cta-1').parentElement;
+      expect(parent.className.includes('cta-container')).to.be.true;
+      expect(parent.querySelector('#adjacent-cta-2')).to.exist;
+    });
+  });
 });

test/blocks/icon-block/mocks/body.html

@@ -25,8 +25,8 @@ <h3 id="heading-xl-bold-icon-block">Heading XL Bold Icon Block</h3>
         </p>
         <h2 id="heading-l-bold-icon-block-1">Heading L Bold Icon Block</h2>
         <p>Body M Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
-        <p><em><a href="https://www.adobe.com/"><strong>Learn more</strong></a></em></p>
-        <p><a href="https://www.adobe.com/">Body M BOLD Text link</a></p>
+        <p id="adjacent-cta-1"><em><a href="https://www.adobe.com/"><strong>Learn more</strong></a></em></p>
+        <p id="adjacent-cta-2"><a href="https://www.adobe.com/">Body M BOLD Text link</a></p>
       </div>
     </div>
   </div>
@@ -42,7 +42,7 @@ <h2 id="heading-l-bold-icon-block-1">Heading L Bold Icon Block</h2>
         </p>
         <h2 id="heading-m-bold-2-up-lorem-ipsum-sit-amet">Heading M Bold 2-up Lorem ipsum sit amet</h2>
         <p>Body M Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
-        <p><em><a href="https://www.adobe.com/"><strong>Learn more</strong></a></em> <a href="https://www.adobe.com/">Body XS Text link</a></p>
+        <p id="one-cta"><em><a href="https://www.adobe.com/"><strong>Learn more</strong></a></em> <a href="https://www.adobe.com/">Body XS Text link</a></p>
       </div>
     </div>
   </div>

test/blocks/media/media.test.js

@@ -28,6 +28,10 @@ describe('media', () => {
       const blueButton = actionArea.querySelector('.con-button.blue');
       expect(blueButton).to.exist;
     });
+    it('has a cta container', () => {
+      const ctaArea = medias[0].querySelector('.cta-container .action-area');
+      expect(ctaArea).to.exist;
+    });
   });
   describe('dark media large', () => {
     it('has a heading-xl', () => {
@@ -54,6 +58,10 @@ describe('media', () => {
       const links = medias[4].querySelectorAll('h3.heading-xs ~ p.subcopy-link > a');
       expect(links.length).to.greaterThanOrEqual(2);
     });
+    it('does not have cta container around mid-body action area', () => {
+      const actionArea = medias[4].querySelector('.action-area');
+      expect(actionArea.parentElement.className.includes('cta-container')).to.be.false;
+    });
   });
   describe('media with qr-code', () => {
     it('does have qr-code image', () => {
@@ -104,4 +112,11 @@ describe('media', () => {
       expect(iconStack).to.exist;
     });
   });
+  describe('with merch variant', () => {
+    it('has a cta container around the icon stack and action area', () => {
+      const cta = medias[7].querySelector('.cta-container');
+      expect(cta.querySelector('.icon-stack-area')).to.exist;
+      expect(cta.querySelector('.action-area')).to.exist;
+    });
+  });
 });

test/blocks/media/mocks/body.html

@@ -141,4 +141,33 @@ <h2 id="heading-m-2430-media">Heading M 24/30 Media</h2>
     </div>
   </div>
 </div>
+<div class="media merch small">
+  <div>
+    <div data-valign="middle">
+      <picture>
+        <img src="">
+      </picture>
+    </div>
+    <div data-valign="middle">
+      <p><strong>Detail M 12/15</strong></p>
+      <h2 id="heading-xs-1822-media-merch-small"><strong>Heading XS 18/22 Media (merch, small)</strong></h2>
+      <p>Body S 16/24 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+      <ul>
+        <li>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img alt="mock" loading="lazy" src="">
+          </picture> <a href="https://www.adobe.com">Adobe Photoshop</a>
+        </li>
+        <li>
+          <picture>
+            <source media="(max-width: 400px)" srcset="./">
+            <img alt="mock" loading="lazy" src="">
+          </picture><a href="">Adobe Illustrator</a>
+        </li>
+      </ul>
+      <p><strong><a href="https://adobe.com/">Learn More</a></strong> <em><a href="https://adobe.com/">Watch the Video</a></em></p>
+    </div>
+  </div>
+</div>
 

test/blocks/text/mocks/body.html

@@ -185,3 +185,15 @@ <h2 id="text--full-width-large">Tablet, Desktop</h2>
     </div>
   </div>
 </div>
+
+<div class="text">
+  <div>
+    <div>
+      <h3 id="text">Text</h3>
+      <p>Section Metadata - Two-Up</p>
+      <p id="no-container"><em><a href="#learn">Learn about</a></em></p>
+      <p>Kick things off with hundreds of premium and free presets you can access with your Lightroom subscription.</p>
+      <p id="has-container"><em><a href="#learn">Learn about</a></em> <a href="#link">Body XS 14/21 Text link</a></p>
+    </div>
+  </div>
+</div>