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

[meganthecoder]

• Align CTAs of Text, Icon, and Media blocks in "-up" sections

Resolves: MWPW-144549

Test URLs:
Before: https://main--milo--adobecom.hlx.page/drafts/methomas/text-alignment
After: https://methomas-text-alignment--milo--adobecom.hlx.page/drafts/methomas/text-alignment?martech=off

Bacom:

• Before: https://main--bacom--adobecom.hlx.live/products/experience-manager/assets/pricing
• After: https://main--bacom--adobecom.hlx.live/products/experience-manager/assets/pricing?milolibs=methomas-text-alignment
• Before: https://main--bacom--adobecom.hlx.live/
• After: https://main--bacom--adobecom.hlx.live/?milolibs=methomas-text-alignment

Kitchen sink:

• Text: https://methomas-text-alignment--milo--adobecom.hlx.page/docs/library/kitchen-sink/text
• Icon: https://methomas-text-alignment--milo--adobecom.hlx.page/docs/library/kitchen-sink/icon-block
• Media: https://methomas-text-alignment--milo--adobecom.hlx.page/docs/library/kitchen-sink/media

Edge cases and regression:

• https://methomas-text-alignment--milo--adobecom.hlx.page/drafts/methomas/text-alignment-all

UAR:

• Before: https://main--cc--adobecom.hlx.live/cc-shared/fragments/uar/marquee/marquee-plan/cci-cct
• After: https://main--cc--adobecom.hlx.live/cc-shared/fragments/uar/marquee/marquee-plan/cci-cct?milolibs=methomas-text-alignment

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• f5ceb07 ✅ (latest)
• 2c13359 ✅
• c14f44c ✅

[aem-code-sync]

Page	Scores	Audits	Google
/docs/library/kitchen-sink/icon-block
/docs/library/kitchen-sink/media
/docs/library/kitchen-sink/text
/drafts/methomas/text-alignment-all
/drafts/methomas/text-alignment?martech=off

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.65%. Comparing base (9c1339b) to head (f5ceb07).

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2209      +/-   ##
==========================================
+ Coverage   95.64%   95.65%   +0.01%     
==========================================
  Files         166      166              
  Lines       43871    43896      +25     
==========================================
+ Hits        41961    41990      +29     
+ Misses       1910     1906       -4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[meganthecoder]

This is the only update from the previous PR #2098

[meganthecoder]

@JasonHowellSlavin @Ruchika4 @ryanmparrish @elan-tbx

I'd appreciate your re-review on this. The only new code is in text.css, lines 170-171.

You've previously reviewed this PR (here: #2098) but there was an issue found during stage testing (here: #2203 (comment)). It was found in the UAR quiz and applies to all Text block inline-icon variants.

I've added that variant to the text-alignment-all page and you can also see it in the fragment from the UAR quiz on CC: https://main--cc--adobecom.hlx.live/cc-shared/fragments/uar/marquee/marquee-plan/cci-cct?milolibs=methomas-text-alignment

Thanks!

CC @JackySun9 @Brandon32

[github-actions]

This PR is currently in the needs-verification state. Please assign a QA engineer to verify the changes.

[robert-bogos]

Looks good 👍 I just added a few possible improvements

[robert-bogos]

Nit: We can turn this into a one liner by not caching ctaArea.
You can just do: expect(medias[0].querySelector('.cta-container .action-area')).to.exist;

[meganthecoder]

In general I agree but I think it improves readability of the tests so I'll keep them as is.