MWPW-142003: Mini Compare Chart Mobile styling

[Axelcureno]

Introduces mobile styles for Mini Compare Chart card and an event listener for tab button clicks in order to trigger resize the cards not showing in the DOM.

Tacocat PR-related: https://git.corp.adobe.com/wcms/tacocat.js/pull/538

(resubmitted PR

Resolves: MWPW-142003 and MWPW-142876

Test URLs:

• Before: https://main--milo--axelcureno.hlx.page/drafts/axel/block-samples/fragments/mini-compare-chart?martech=off
• After: https://mwpw-142003--milo--axelcureno.hlx.page/drafts/axel/block-samples/fragments/mini-compare-chart?martech=off

[aem-code-sync]

Page	Scores	Audits	Google
/drafts/axel/block-samples/fragments/mini-compare-chart?martech=off

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.31%. Comparing base (7af20af) to head (37c95d3).

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #1989      +/-   ##
==========================================
+ Coverage   96.28%   96.31%   +0.03%     
==========================================
  Files         166      166              
  Lines       42324    42329       +5     
==========================================
+ Hits        40751    40769      +18     
+ Misses       1573     1560      -13     

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

[Roycethan]

@Axelcureno Reviewing https://main--dc--adobecom.hlx.page/dc-shared/fragments/merch-cards/acrobat-business?milolibs=MWPW-142003--milo--axelcureno few observations noting here:

1)Mobile: Left/Right padding for pricing text is correct ( expected: 16 px) where as for body text its 24 px and CTA its 8 px
2)Mobile:Theres additional padding below the Buy now CTA
3)Mobile: In the Pricing text the right padding is less or the string "per" is overflown
4)Mobile: In the quantity selector dropdown the the numbers are center algined - not sure if they have to be left aligned?
5)Mobile: Icons in the chat needs to be hidden in mobile view ?
Also tablet styles need to be adjusted if its applicable to this PR, didn't see picker and tabs to check re-size

[Axelcureno]

@Axelcureno Reviewing https://mwpw-142003--milo--axelcureno.hlx.page/drafts/axel/block-samples/fragments/mini-compare-chart few observations noting here:

1. Mobile: CTA text is not center aligned
   2)Mobile: Left/Right padding for pricing text is correct ( expected: 16 px) where as for body text its 24 px and CTA its 8 px
   3)Mobile:Theres additional padding below the free-trial CTA
   4)Mobile: thre's also an unwanted 16 px padding between Pricing text and promo text
   Also tablet styles need to be adjusted if its applicable to this PR, didn't see picker and tabs to check re-size

@Roycethan please make sure to refresh the page if testing in mobile or resizing the page since this card requires manual resizing by JS code.
I also recommend to test from this URL to get a more realistic view https://main--dc--adobecom.hlx.page/dc-shared/fragments/merch-cards/acrobat-business?milolibs=MWPW-142003--milo--axelcureno since milo-forked URLs do not resolve offers (CORS issue) (prices, quantity selectos and offer selectors) causing extra space to show.
Also please note that as per the requirement (mentioned in the ticket) each element inside the card should be perfectly aligned horizontally, which can cause extra space to be added in some cards. The padding values (16px or 24px) are assumed if all cards have the same lenght of content.

[Roycethan]

@Axelcureno Reviewing https://mwpw-142003--milo--axelcureno.hlx.page/drafts/axel/block-samples/fragments/mini-compare-chart few observations noting here:

1. Mobile: CTA text is not center aligned
   2)Mobile: Left/Right padding for pricing text is correct ( expected: 16 px) where as for body text its 24 px and CTA its 8 px
   3)Mobile:Theres additional padding below the free-trial CTA
   4)Mobile: thre's also an unwanted 16 px padding between Pricing text and promo text
   Also tablet styles need to be adjusted if its applicable to this PR, didn't see picker and tabs to check re-size

@Roycethan please make sure to refresh the page if testing in mobile or resizing the page since this card requires manual resizing by JS code. I also recommend to test from this URL to get a more realistic view https://main--dc--adobecom.hlx.page/dc-shared/fragments/merch-cards/acrobat-business?milolibs=MWPW-142003--milo--axelcureno since milo-forked URLs do not resolve offers (CORS issue) (prices, quantity selectos and offer selectors) causing extra space to show. Also please note that as per the requirement (mentioned in the ticket) each element inside the card should be perfectly aligned horizontally, which can cause extra space to be added in some cards. The padding values (16px or 24px) are assumed if all cards have the same lenght of content.

@Axelcureno Updated my comments based on the above url which i checked for standard mobile resolution say Iphone 12 pro 390*844 px plz review thanks

[VKniaz]

Please add tests.

[yesil]

Once the lint and unit test issues are fixed, it is good to merge for me.

[afmicka]

@Axelcureno

1. It was mentioned early on in the jira comments that mobile view looks different by specs. It seems that there should be one card per row instead of 2 very narrow (a bit weird looking) ones. :) I see that people are waiting for someone to be back from PTO next week to review the work for mobile but still.. this is kind of obvious.

Aside of that (if we want to proceed as is):
2. Padding on the right for the prices does not seem correct. The word 'per' is almost out of the card boundaries on iPhone 12 Pro.
3. Way too much padding around CTA (above and below) on the third card that ended up in the new row. Should that be like that - aligning all the paddings to the cards in the previous row?
4. Paddings are messed up on kitchen-sync on all views including desktop. Could you please review those (see screenshot)?
cc: @Roycethan

[Roycethan]

Left/right padding is fixed/ pricing alignment is fixed,
Discussed with @Axelcureno regarding additional padding around pricing and CTA's which as per him causing due to making CT's and prices in line with other cards - and the layout is being approved by stakeholders, Per this agreement approving this.