MWPW-183500 - [Prod] AH | Try/Buy Widget M@S card is not appearing properly in Dark mode compared to other two cards

[honstar]

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

• adjusted background color to match figma for AH dark mode
• added gradient border color option and support

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-165518--mas--adobecom.aem.live/web-components/docs/adobe-home.html?theme=dark

[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

• d80ef78 ✅ (latest)
• 425eac7 ✅
• 035ae0f ✅
• 96332ca ✅
• 52f8c16 ✅
• e14a8eb ✅
• 9d3d435 ✅
• a2189cc ✅
• 28aabf6 ✅
• 9399a3d ✅
• 0c3672c ✅

[seanchoi-dev]

For code, looks good in overall.
Please take a look the failing check.

[honstar]

For code, looks good in overall. Please take a look the failing check.

Thanks for the review @seanchoi-dev . The test failure is being addressed in the milo repository, see adobecom/milo#5230. This fix is already on stage, the failures will disappear once it goes to prod.

[mirafedas]

@honstar Could you please link this Jira in the PR description: https://jira.corp.adobe.com/browse/MWPW-183500 ?
The one that is linked now appears as Done: https://jira.corp.adobe.com/browse/MWPW-165518

[honstar]

@honstar Could you please link this Jira in the PR description: https://jira.corp.adobe.com/browse/MWPW-183500 ? The one that is linked now appears as Done: https://jira.corp.adobe.com/browse/MWPW-165518

Thanks, I must have accidentally copied the wrong JIRA link while checking the history of the AH try-buy-widget variant! I've updated the PR title and description with the correct link.

[honstar]

For QA: please use https://mwpw-165518--mas--adobecom.aem.live/web-components/docs/adobe-home.html?theme=dark and ignore the wrong JIRA ticket branch name, my mistake.

The new gradient border card on this docs page can be inspected here: https://mwpw-165518--mas--adobecom.aem.live/studio.html#fragmentId=df508462-c9bd-4ec8-8b8a-70e502228c18&page=fragment-editor&path=nala

[afmicka]

@honstar please check the styling for the new gradient fragment in the light mode. The label is not visible (white) on the black CTA

https://mwpw-165518--mas--adobecom.aem.live/web-components/docs/adobe-home.html?theme=light

[honstar]

@afmicka : the issue with the black cta not showing the label has been fixed (thanks to @yesil 👍 ): https://mwpw-165518--mas--adobecom.aem.live/web-components/docs/adobe-home.html?theme=light