MWPW-186818 [Project Lingo] Segment Merch card variant in M@S Studio

[bozojovicic]

Resolves https://jira.corp.adobe.com/browse/MWPW-186818
QA Checklist: https://wiki.corp.adobe.com/display/adobedotcom/M@S+Engineering+QA+Use+Cases

MAS Studio https://mwpw-186818--mas--adobecom.aem.live/studio.html#fragmentId=e51014d2-4a03-4e69-8b44-417d315d43a5&page=fragment-editor&path=sandbox
Cards on Milo pages :
Collection https://main--milo--adobecom.aem.page/drafts/bozo/pr/segment-coll?maslibs=mwpw-186818
Single cards https://main--milo--adobecom.aem.page/drafts/bozo/pr/segment-cards?maslibs=mwpw-186818
Milo example from prod : https://main--cc--adobecom.aem.page/cc-shared/fragments/merch/products/dreamweaver/merch-card/segment-blade?maslibs=mwpw-186818

No figma for this card, I implemented it as on kitchen sink, see the bottom of the page
https://stage--milo--adobecom.aem.page/merch/kitchen-sink?martech=off

Please do the steps below before submitting your PR for a code review or QA

• C1. Cover code with Unit Tests
• C2. Add a Nala test (double check with #fishbags if nala test is needed)
• C3. Verify all Checks are green (unit tests, nala tests)
• C4. PR description contains working Test Page link where the feature can be tested
• C5: you are ready to do a demo from Test Page in PR (bonus: write a working demo script that you'll use on Thursday, you can eventually put in your PR)
• C.6 read your Jira one more time to validate that you've addressed all AC's and nothing is missing

🧪 Nala E2E Tests

Nala tests run automatically when you open this PR.

To run Nala tests again:

1. Add the run nala label to this PR (in the right sidebar)
2. Tests will run automatically on the current commit
3. Any future commits will also trigger tests as long as the label remains

To stop automatic Nala tests:

• Remove the run nala label

Note: Tests only run on commits if the run nala label is present. Add the label whenever you need tests to run on new changes.

Test URLs:

• Before: https://main--mas--adobecom.aem.live/
• After: https://mwpw-186818--mas--adobecom.aem.live/

[aem-code-sync]

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

• Re-sync branch

Commits

• 4a065d8 ✅ (latest)
• a92139a ✅
• 0919042 ✅
• a496991 ✅
• dce0789 ✅
• 802e83d ✅
• 55e37cd ✅
• 3db304f ✅
• f8a33e4 ✅
• 74d9405 ✅
• 72e4194 ✅
• 6824979 ✅

[Roycethan]

@bozojovicic Plz review these:
https://main--milo--adobecom.aem.page/drafts/bozo/pr/segment-coll?maslibs=mwpw-186818

1. Theres hardly no padding below the heading or above the price element in Milo example:
   https://main--cc--adobecom.aem.page/products/dreamweaver
   In current we have a padding.

2)Is it not better have a font weight of 400 for Badge text ? as in Plans variant.

3. Links on Production have color: rgb(44, 44, 44) and in current its rgb(39, 77, 234)

4)Tooltip for callout text is always visible, ideally it should be on hover over and should not go outside the card border

5)Observed some Accessibility issues:
The Links and buttons should have unique/descriptive aria-labels and daa-ll values:
Expected like in Milo:
aria-label="See what's included in Creative Cloud Pro"
daa-ll="See what s included-1--Creative Cloud ProUS 69 99 mo"
aria-label="Buy now - Creative Cloud Pro - Individuals"
daa-ll="Buy now-3--Creative Cloud ProUS 69 99 mo"

6)On android I see this overlapping of badge: