MWPW-158053: CCD Slice Card [Merch card] #2878

Axelcureno · 2024-09-13T20:10:25Z

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

LTR:

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-slice.test.html to see the 2 options (standard size and wide)

Test URLs:

- move from merch-card.js code each layout code related to a given variant under variants/<variant> class - move from global.css.js css related to a given variant under variants/<variant>.css.js - move from merch-card.css.js wc css related to a given variant under variants/<variant>.variantStyle - uses variants/variants as an index to get related class from related variant, and wc style too, - uses variants/VariantLayout, superclass of all variants, to insert css if card is used, and hold common code

to something independent of the layout (not initialized when used at first in collections)

AEM Code Sync · 2024-09-13T20:10:29Z

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

ae57a05 ✅ (latest)
95698c4 ✅
afaf7ff ✅
ed4137a ✅
950c3ae ✅
49b3acd ✅
bc3ae26 ✅
9aa3eee ✅
5ad2935 ✅
6c3cb8f ✅
6df1623 ✅
b9580d5 ✅
a8ab869 ✅
7ead9eb ✅
03778dd ✅

AEM Code Sync · 2024-09-13T20:10:53Z

	Page	Scores	Audits	Google
📱	/?martech=off
🖥️	/?martech=off

GitHub Actions · 2024-09-13T20:11:01Z

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.

GitHub Actions · 2024-09-13T20:11:02Z

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.

GitHub Actions · 2024-09-13T20:11:03Z

libs/features/mas/web-components/src/variants/variants.js

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

GitHub Actions · 2024-09-13T20:11:04Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js

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

Codecov · 2024-09-13T20:12:00Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.91%. Comparing base (6fa9558) to head (ae57a05).
Report is 17 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2878      +/-   ##
==========================================
- Coverage   96.25%   95.91%   -0.35%     
==========================================
  Files         238      172      -66     
  Lines       54310    46390    -7920     
==========================================
- Hits        52276    44493    -7783     
+ Misses       2034     1897     -137

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

GitHub Actions · 2024-09-16T16:57:08Z

libs/features/mas/web-components/src/merch-datasource.js

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

GitHub Actions · 2024-09-17T01:11:30Z

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.

3ch023 · 2024-09-17T12:01:55Z

Hi @Axelcureno, just a suggestion, but if we wait for #2894 we can add a test page showcasing the CCD cards you've implemented

3ch023

we might not need the images for unit tests, as discussed before with Milo core team.
rest looks good to me.
p.s. for PSI check - we can create a test page with odin resources, once #2894 is ready

npeltier · 2024-09-18T05:16:11Z

libs/features/mas/web-components/src/variants/ccd-slice.css.js

+    grid-template-columns: var(--consonant-merch-card-ccd-slice-width);
+}
+
+merch-card[variant="ccd-slice"] [slot='body-s'] {


i wonder if we shouldn't try to move slot styling if possible into variantStyles? cc @yesil

I agree, anything that can stay in the shadowRoot should go in variantStyles.

npeltier · 2024-09-18T05:16:46Z

libs/features/mas/web-components/src/variants/ccd-slice.js

+  constructor(card) {
+    super(card);
+  }


this can go away :)

npeltier · 2024-09-18T05:18:15Z

libs/features/mas/web-components/test/img/creative-cloud.png

we are still under discussion (well not tracked atm) with milo-core team wrt to images in repository, waiting for this, let's not add new ones. Do you think you can handle it with the one we have? (even if they are not square)?

I will create a discussion, thanks @npeltier !

yesil · 2024-09-18T07:49:01Z

libs/features/mas/web-components/src/variants/ccd-slice.css.js

+  align-self: center;
+}
+
+@media screen and ${TABLET_UP} {


These styles are needed to display the variant in the responsive grid. However afaik, CCD is not going to use our responsive grid but put a merch-card in their own container.
In order to keep our codebase as simple as possible, I suggest to remove these styles. (lines 45-64 and 12-18)

yesil · 2024-09-18T07:50:25Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html

+        }
+
+        @media screen and (min-width: 1440px) {
+            #sidenav {


let's remove sidenav, and keep this as simple as possible.

yesil · 2024-09-18T07:50:49Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html.js

+    mockLana();
+    await mockFetch(withWcs);
+    await mas();
+    appendMiloStyles();


we should remove appendMiloStyles, since mas is in milo now. Someone needs to remove it all together.

3ch023 · 2024-09-18T14:03:06Z

Created https://author-p22655-e155390.adobeaemcloud.com/editor.html/content/dam/mas/docs/ccd-slice-creative-cloud-photography in docs folder

yesil · 2024-09-18T20:30:05Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html

+<body>
+    <script type="module" src="./merch-card.ccd-slice.test.html.js"></script>
+    <main>
+        <div class="one-merch-card ccd-slice">


I think we don't need this div neither since we do not add responsive grid styles for CCD cards.

yesil · 2024-09-18T20:30:10Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html

+            </merch-card
+          >
+</div>
+<div class="one-merch-card ccd-slice-wide">


I think we don't need this div neither since we do not add responsive grid styles for CCD cards.

yesil · 2024-09-18T20:30:21Z

libs/features/mas/web-components/test/merch-card.ccd-slice.test.html

+            padding-top: 80px;
+        }
+
+        main>div {


probably not needed neither.

yesil

@npeltier until the discussion actually happens, I would like to proceed with merging the PR.
Test images have no impact on Milo's performance or stability and dev preferences should not be a reason to block PRs.

yesil · 2024-09-18T20:45:37Z

@Axelcureno please check MAS Unit Tests, they are green but reported as failure.

npeltier and others added 10 commits August 31, 2024 00:18

MWPW-156612 changing title selector

7ead9eb

to something independent of the layout (not initialized when used at first in collections)

MWPW-156612 forking style insertion

a8ab869

MWPW-156612 styles fixes

b9580d5

MWPW-156612 review comments

6df1623

Merge branch 'stage' of github.com:adobecom/milo into MWPW-156612

6c3cb8f

MWPW-156612 fixing unit tests

5ad2935

initial commit

9aa3eee

Merge branch 'stage' into MWPW-158053

bc3ae26

MWPW-158053: CCD Slide Card

49b3acd

Axelcureno added commerce needs-verification PR requires E2E testing by a reviewer merch card labels Sep 13, 2024

Axelcureno self-assigned this Sep 13, 2024

Axelcureno requested a review from a team as a code owner September 13, 2024 20:10

GitHub Actions bot reviewed Sep 13, 2024

View reviewed changes

RTL alignment

950c3ae

AEM Code Sync bot temporarily deployed to MWPW-158053 September 16, 2024 16:21 Inactive

ccd slice card added to merch-datasource libs

ed4137a

AEM Code Sync bot temporarily deployed to MWPW-158053 September 16, 2024 16:56 Inactive

GitHub Actions bot reviewed Sep 16, 2024

View reviewed changes

3ch023 approved these changes Sep 17, 2024

View reviewed changes

npeltier requested changes Sep 18, 2024

View reviewed changes

yesil requested changes Sep 18, 2024

View reviewed changes

review comments addressed

afaf7ff

AEM Code Sync bot temporarily deployed to MWPW-158053 September 18, 2024 19:49 Inactive

so long, milo styles

95698c4

yesil reviewed Sep 18, 2024

View reviewed changes

decluttered html test page

ae57a05

yesil approved these changes Sep 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MWPW-158053: CCD Slice Card [Merch card] #2878

MWPW-158053: CCD Slice Card [Merch card] #2878

Axelcureno commented Sep 13, 2024 •

edited

Loading

AEM Code Sync bot commented Sep 13, 2024 •

edited

Loading

AEM Code Sync bot commented Sep 13, 2024 •

edited

Loading

GitHub Actions bot Sep 13, 2024

GitHub Actions bot Sep 13, 2024

GitHub Actions bot Sep 13, 2024

GitHub Actions bot Sep 13, 2024

Codecov bot commented Sep 13, 2024 •

edited

Loading

GitHub Actions bot Sep 16, 2024

GitHub Actions bot commented Sep 17, 2024

3ch023 commented Sep 17, 2024

3ch023 left a comment •

edited

Loading

npeltier Sep 18, 2024

yesil Sep 18, 2024

npeltier Sep 18, 2024

npeltier Sep 18, 2024

narcis-radu Sep 18, 2024

yesil Sep 18, 2024

yesil Sep 18, 2024

yesil Sep 18, 2024

Axelcureno Sep 18, 2024

3ch023 commented Sep 18, 2024

yesil Sep 18, 2024

yesil Sep 18, 2024

yesil Sep 18, 2024

yesil left a comment

yesil commented Sep 18, 2024

MWPW-158053: CCD Slice Card [Merch card] #2878

Are you sure you want to change the base?

MWPW-158053: CCD Slice Card [Merch card] #2878

Conversation

Axelcureno commented Sep 13, 2024 • edited Loading

AEM Code Sync bot commented Sep 13, 2024 • edited Loading

AEM Code Sync bot commented Sep 13, 2024 • edited Loading

GitHub Actions bot Sep 13, 2024

Choose a reason for hiding this comment

GitHub Actions bot Sep 13, 2024

Choose a reason for hiding this comment

GitHub Actions bot Sep 13, 2024

Choose a reason for hiding this comment

GitHub Actions bot Sep 13, 2024

Choose a reason for hiding this comment

Codecov bot commented Sep 13, 2024 • edited Loading

Codecov Report

GitHub Actions bot Sep 16, 2024

Choose a reason for hiding this comment

GitHub Actions bot commented Sep 17, 2024

3ch023 commented Sep 17, 2024

3ch023 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

3ch023 commented Sep 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yesil left a comment

Choose a reason for hiding this comment

yesil commented Sep 18, 2024

Axelcureno commented Sep 13, 2024 •

edited

Loading

AEM Code Sync bot commented Sep 13, 2024 •

edited

Loading

AEM Code Sync bot commented Sep 13, 2024 •

edited

Loading

Codecov bot commented Sep 13, 2024 •

edited

Loading

3ch023 left a comment •

edited

Loading