Revert "MWPW-144549 CTA alignment for Text, Icon, and Media Blocks" (#…

…2207) Revert "MWPW-144549 CTA alignment for Text, Icon, and Media Blocks (#2098)" This reverts commit 95d6ad6.
adobecom · Apr 25, 2024 · 1332031 · 1332031
1 parent 8c8834f
commit 1332031
Show file tree

Hide file tree

Showing 12 changed files with 8 additions and 229 deletions.
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
@@ -36,12 +36,11 @@
 .icon-block .foreground {
   position: relative;
   text-align: center;
-  width: 100%;
 }
 
 .icon-block .foreground .text-content {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-content: center;
   width: 100%;
 }
@@ -168,11 +167,6 @@
   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);
 }
@@ -252,18 +246,10 @@
   margin-bottom: var(--spacing-s);
 }
 
-.icon-block.bio .cta-container {
-  margin-top: 0;
-}
-
 .icon-block .foreground .text-content p.body-m.action-area {
   margin-bottom: 0;
 }
 
-.icon-block .cta-container .action-area {
-  width: 100%;
-}
-
 .icon-block.full-width .foreground .text-content .action-area {
   justify-content: center;
 }
@@ -312,11 +298,6 @@
   margin: unset; 
 }
 
-.section[class*="-up"] .icon-block .foreground {
-  display: flex;
-  align-self: stretch;
-}
-
 [class*="-up"] .icon-block.bio.inline .foreground {
   max-width: unset;
   width: unset;
@@ -345,27 +326,6 @@
   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);
-}
-
-.icon-block.inline .cta-container .body-s.action-area {
-  padding-top: 0;
-}
-
-.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;
@@ -468,6 +428,8 @@
   }
 
   .icon-block.vertical .foreground .text-content {
+    flex-grow: 1;
+    flex-basis: 0;
     margin-bottom: 0;
   }
 

diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js
@@ -75,15 +75,6 @@ function decorateContent(el) {
       if (secondColumn.children.length === 1) el.classList.add('items-center');
       el.querySelector('.foreground .text-content').append(secondColumn);
     }
-    const lastActionArea = el.querySelector('.action-area:last-of-type');
-    if (lastActionArea) {
-      const div = createTag('div', { class: 'cta-container' });
-      lastActionArea.insertAdjacentElement('afterend', div);
-      if (lastActionArea.previousElementSibling.className.includes('action-area')) {
-        div.append(lastActionArea.previousElementSibling);
-      }
-      div.append(lastActionArea);
-    }
   }
 }
 

diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
@@ -70,7 +70,6 @@
   display: flex;
   gap: var(--spacing-s);
   align-items: flex-start;
-  width: 100%;
 }
 
 .media .text .icon-area {
@@ -255,49 +254,6 @@ div[class*="-up"] .media .foreground > .media-row {
   height: var(--icon-size-xxl);
 }
 
-/* Text Alignment */
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) {
-  display: flex;
-  align-self: stretch;
-}
-
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground {
-  display: flex;
-  align-self: stretch;
-  width: 100%
-}
-
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground > div.media-row {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground .text {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="heading-"],
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) p:not([class*="detail-"]):not(.subcopy-link),
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="body-"] {
-  margin-bottom: 0;
-}
-
-.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile, .qr-code) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) {
-  margin-top: 0;
-  margin-bottom: revert;
-}
-
-.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .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);
@@ -362,10 +318,6 @@ 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) {

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

diff --git a/libs/blocks/text/text.css b/libs/blocks/text/text.css
@@ -16,7 +16,6 @@
 
 .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; }
@@ -63,10 +62,6 @@
   align-items: center;
 }
 
-.text-block .cta-container .action-area {
-  width: 100%;
-}
-
 .text-block hr {
   border-color: #e1e1e1;
   border-style: solid;
@@ -196,39 +191,9 @@
   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;
   }

diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js
@@ -110,11 +110,4 @@ export default function init(el) {
   el.classList.add(...helperClasses);
   decorateTextOverrides(el);
   if (!hasLinkFarm) decorateMultiViewport(el);
-
-  const lastActionArea = el.querySelector('.action-area:last-of-type');
-  if (lastActionArea) {
-    const div = createTag('div', { class: 'cta-container' });
-    lastActionArea.insertAdjacentElement('afterend', div);
-    div.append(lastActionArea);
-  }
 }
diff --git a/test/blocks/icon-block/icon-block.test.js b/test/blocks/icon-block/icon-block.test.js
@@ -43,14 +43,4 @@ 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;
-    });
-  });
 });
diff --git a/test/blocks/icon-block/mocks/body.html b/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 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>
+        <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>
       </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 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>
+        <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>
       </div>
     </div>
   </div>

diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js
@@ -28,10 +28,6 @@ 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', () => {
@@ -58,10 +54,6 @@ 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', () => {
@@ -112,11 +104,4 @@ 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;
-    });
-  });
 });
diff --git a/test/blocks/media/mocks/body.html b/test/blocks/media/mocks/body.html
@@ -141,33 +141,4 @@ <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>
 
diff --git a/test/blocks/text/mocks/body.html b/test/blocks/text/mocks/body.html
@@ -185,15 +185,3 @@ <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>