MWPW-158473: CCD Suggested Card [Merch card]

[Axelcureno]

Introduces Creative Cloud Desktop 'Suggested' Card to the list of web components as part of M@S v2 initiative.

LTR:

RTL:

Dark theme (RTL):

Notes:
This card is not part of Milo block library and is part of a CCD integration.
To test this card, run npm run test from web-components folder and select debug, then select the option test/merch-card.ccd-suggested.test.html to see the 3 variations (top to bottom of screenshot): standard, wide strip background and small strip background.

Resolves: MWPW-158473

URL for testing:

• https://mwpw-158473--milo--adobecom.hlx.page/

[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

• 54dd79d ✅ (latest)
• cd61ece ✅
• d07b721 ✅
• b2e797e ✅
• 521ac4e ✅
• 0aa1042 ✅
• a7ac03d ✅
• 48d5fc4 ✅
• fed743d ✅
• d1ba823 ✅
• d8eb9e9 ✅
• bdd6322 ✅
• d2b50c4 ✅
• bdf845d ✅
• 5302051 ✅
• eb156cc ✅
• 5e5924d ✅
• 1dd8ea9 ✅
• 59285a0 ✅
• 937713f ✅
• 254ef7a ✅
• f545c53 ✅
• e20123a ✅
• 0b1aef8 ✅
• 329be3a ✅
• eb40fb4 ✅
• 1894a7a ✅
• d47b6ff ✅
• cd361b9 ✅
• 29a16b0 ✅

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.34%. Comparing base (6cdc02a) to head (2ddea92).
Report is 10 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2927      +/-   ##
==========================================
- Coverage   96.37%   96.34%   -0.03%     
==========================================
  Files         243      245       +2     
  Lines       55122    55458     +336     
==========================================
+ Hits        53122    53432     +310     
- Misses       2000     2026      +26     

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

[github-actions]

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

[npeltier]

more or less same comments as i did for the other PR ;)

[3ch023]

@Axelcureno I noticed that you use strip-background field, does it mean we need to add it as a separate field in Odin?
maybe we could reuse the 'background-image'?

[Axelcureno]

@Axelcureno I noticed that you use strip-background field, does it mean we need to add it as a separate field in Odin? maybe we could reuse the 'background-image'?

Yes, we talked about this item on a previous tech discussion and agreed to reuse background-image to avoid using multiple models in Odin.

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

eslint

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/inline-price.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/literals.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/log.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/mas-commerce-service.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/mas-element.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/price.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/settings.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/utilities.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/src/wcs.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/checkout.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/literals.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/mas-commerce-service.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/price.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/settings.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/utilities.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/utilities.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/commerce/test/wcs.test.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/mas/dist/mas.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/mas/src/mas.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/aem-fragment.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/constants.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/hydrate.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/merch-offer.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/variants/ccd-slice.css.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/src/variants/ccd-slice.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/aem-fragment.test.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/mas.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-card.catalog.test.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-card.mini-compare.mobile.test.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-card.special-offer.test.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-card.test.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-twp-d2p.utils.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/merch-whats-included.html.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/mas/web-components/test/utils.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/spectrum-web-components/dist/themes/dark.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/spectrum-web-components/dist/themes/light.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/spectrum-web-components/src/themes/dark.js

---

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

https://github.com/adobecom/milo/blob/619f690f0c068e65531372afc78db8bd1d586475/libs/features/spectrum-web-components/src/themes/light.js

---

🚫 [eslint] <no-unused-vars> _{reported by reviewdog 🐶}
'expect' is defined but never used.

milo/test/blocks/notification/notification.test.js

Line 2 in 619f690

import { expect } from '@esm-bundle/chai';

---

🚫 [eslint] <spaced-comment> _{reported by reviewdog 🐶}
Expected exception block, space or tab after '/*' in comment.

milo/test/blocks/notification/notification.test.js

Lines 30 to 94 in 619f690

	/*describe('banner notifications (default)', () => {
	it('has a heading-m', () => {
	const heading = notifs[0].querySelector('.heading-m');
	expect(heading).to.exist;
	});
	it('has a body-m', () => {
	const body = notifs[0].querySelector('.body-m');
	expect(body).to.exist;
	});
	it('has CTAs', () => {
	const ctas = notifs[0].querySelector('.action-area > a');
	expect(ctas).to.exist;
	});
	it('has an image', () => {
	const img = notifs[0].querySelector('.foreground .image img');
	expect(img).to.exist;
	});
	it('supports a bottom border', () => {
	const border = notifs[2].querySelector(':scope > .border');
	expect(border).to.exist;
	});
	it('has a cdt', () => {
	expect(notifs[15].querySelectorAll('.timer-label')).to.have.lengthOf(1);
	});
	});
	describe('ribbon notifications', () => {
	let ribbons;
	beforeEach(() => {
	ribbons = [...notifs].filter((e) => e.classList.contains('ribbon'));
	});
	it('supports multiple icons', () => {
	const icons = ribbons[0].querySelectorAll('.icon-area picture');
	expect(icons.length).to.be.greaterThan(1);
	});
	it('has large buttons by default', () => {
	const btn = ribbons[0].querySelector('a.con-button');
	expect(btn.classList.contains('button-l')).to.be.true;
	});
	it('can be closed', () => {
	const close = ribbons[0].querySelector('button.close');
	close.dispatchEvent(new MouseEvent('click'));
	expect(close.closest('.notification').style.display).to.equal('none');
	});
	});
	describe('pill notifications', () => {
	let pills;
	beforeEach(() => {
	pills = [...notifs].filter((e) => e.classList.contains('pill'));
	});
	it('supports variant without a close button', () => {
	const close = pills[2].querySelector('button.close');
	expect(close).to.not.exist;
	});
	it('has large buttons by default', () => {
	const btn = pills[0].querySelector('a.con-button');
	expect(btn.classList.contains('button-l')).to.be.true;
	});
	it('can be closed', () => {
	const close = pills[0].querySelector('button.close');
	close.dispatchEvent(new MouseEvent('click'));
	expect(close.closest('.notification').style.display).to.equal('none');
	});
	});*/

---

🚫 [eslint] <spaced-comment> _{reported by reviewdog 🐶}
Expected space or tab before '*/' in comment.

milo/test/blocks/notification/notification.test.js

Lines 30 to 94 in 619f690

	/*describe('banner notifications (default)', () => {
	it('has a heading-m', () => {
	const heading = notifs[0].querySelector('.heading-m');
	expect(heading).to.exist;
	});
	it('has a body-m', () => {
	const body = notifs[0].querySelector('.body-m');
	expect(body).to.exist;
	});
	it('has CTAs', () => {
	const ctas = notifs[0].querySelector('.action-area > a');
	expect(ctas).to.exist;
	});
	it('has an image', () => {
	const img = notifs[0].querySelector('.foreground .image img');
	expect(img).to.exist;
	});
	it('supports a bottom border', () => {
	const border = notifs[2].querySelector(':scope > .border');
	expect(border).to.exist;
	});
	it('has a cdt', () => {
	expect(notifs[15].querySelectorAll('.timer-label')).to.have.lengthOf(1);
	});
	});
	describe('ribbon notifications', () => {
	let ribbons;
	beforeEach(() => {
	ribbons = [...notifs].filter((e) => e.classList.contains('ribbon'));
	});
	it('supports multiple icons', () => {
	const icons = ribbons[0].querySelectorAll('.icon-area picture');
	expect(icons.length).to.be.greaterThan(1);
	});
	it('has large buttons by default', () => {
	const btn = ribbons[0].querySelector('a.con-button');
	expect(btn.classList.contains('button-l')).to.be.true;
	});
	it('can be closed', () => {
	const close = ribbons[0].querySelector('button.close');
	close.dispatchEvent(new MouseEvent('click'));
	expect(close.closest('.notification').style.display).to.equal('none');
	});
	});
	describe('pill notifications', () => {
	let pills;
	beforeEach(() => {
	pills = [...notifs].filter((e) => e.classList.contains('pill'));
	});
	it('supports variant without a close button', () => {
	const close = pills[2].querySelector('button.close');
	expect(close).to.not.exist;
	});
	it('has large buttons by default', () => {
	const btn = pills[0].querySelector('a.con-button');
	expect(btn.classList.contains('button-l')).to.be.true;
	});
	it('can be closed', () => {
	const close = pills[0].querySelector('button.close');
	close.dispatchEvent(new MouseEvent('click'));
	expect(close.closest('.notification').style.display).to.equal('none');
	});
	});*/

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

[github-actions]

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.