MWPW-186041 and MWPW-185791 Spectrum icon library for card badge and what's included

[bozojovicic]

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

What is implemented here? For plans pages, now we can add the spectrum icon to the card badge and also the section "What's included" is extended with bullet points where we can set spectrum icons instead of product icons. In both places the new "spectrum icon library" is used with Spectrum 1 icons. It will be extended in the future with more icons for other components.

For bullet points in "What's included" we also need to add the text for every bullet and that text can contain links, that's why RTE is used. We can still use SVG files and the URL can be set in the URL tab in the icon library.

Test pages :
https://mwpw-186041--mas--adobecom.aem.live/studio.html#fragmentId=167a3618-d5fd-42c3-a2ff-9cb7bc601638&page=fragment-editor&path=sandbox
https://mwpw186041--milo--bozojovicic.aem.page/drafts/bozo/icon/icons-coll?maslibs=MWPW-186041

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-186041--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

• c1c5ef6 ✅ (latest)
• 57d71d3 ✅
• 7a2db3c ✅
• 1c6b976 ✅
• 8c9f107 ✅
• 78057e5 ✅
• b055ebb ✅
• 9e6d728 ✅
• 964c677 ✅
• 9b9f6c4 ✅
• fbdd81c ✅
• d571cc7 ✅
• 5a542f1 ✅
• bbd41e8 ✅
• 3126d48 ✅
• bc45f3a ✅
• 40e0688 ✅
• 7667c11 ✅
• cd950f6 ✅
• 861f6e8 ✅

[Roycethan]

@bozojovicic

1. Plz resolve the conflicts.
2. Plz confirm on the mobile design which i commented here if its good or not
   https://jira.corp.adobe.com/browse/MWPW-185791?focusedId=52447863&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-52447863

[bozojovicic]

@Roycethan I'm waiting for an answer from Lucy/Fred regarding that "see more" on mobile. Once they decide how that should work I will fix it and also fix the conflicts.