Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mwpw 164093: Adobe Home 'Pricing Widget' merch card #3384

Open
wants to merge 8 commits into
base: MWPW-163479
Choose a base branch
from

Conversation

Copy link
Contributor

aem-code-sync bot commented Dec 16, 2024

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

Copy link
Contributor

aem-code-sync bot commented Dec 16, 2024

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/deps/mas/merch-subscription-panel.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/deps/mas/merch-twp-d2p.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/deps/mas/merch-whats-included.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/docs/spectrum.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/global.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/merch-card.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/merch-card.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/merch-icon.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/catalog.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/ccd-suggested.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/ccd-suggested.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/pricing-widget.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/pricing-widget.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/variant-layout.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/src/variants/variants.js


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

https://github.com/adobecom/milo/blob/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/test/hydrate.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/test/merch-card.ccd-suggested.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/529173772a0c3a1efa4dcabb3caaf9bf2ffead5f/libs/features/mas/test/merch-card.pricing-widget.test.html.js

Copy link

codecov bot commented Dec 16, 2024

Codecov Report

Attention: Patch coverage is 98.65772% with 2 lines in your changes missing coverage. Please review.

Project coverage is 96.48%. Comparing base (69cfa63) to head (ea4a0e4).

Files with missing lines Patch % Lines
libs/features/mas/src/hydrate.js 75.00% 2 Missing ⚠️
Additional details and impacted files
@@              Coverage Diff              @@
##           MWPW-163479    #3384    +/-   ##
=============================================
  Coverage        96.47%   96.48%            
=============================================
  Files              254      256     +2     
  Lines            59090    59239   +149     
=============================================
+ Hits             57006    57154   +148     
- Misses            2084     2085     +1     

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

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/catalog.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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/ccd-suggested.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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/ccd-suggested.js


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

https://github.com/adobecom/milo/blob/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/pricing-widget.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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/pricing-widget.js


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

https://github.com/adobecom/milo/blob/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/variant-layout.js


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

https://github.com/adobecom/milo/blob/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/src/variants/variants.js


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

https://github.com/adobecom/milo/blob/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/test/hydrate.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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/test/merch-card.ccd-suggested.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/fcf026e7d29f6386ea98c2b217fb2115b07891f1/libs/features/mas/test/merch-card.pricing-widget.test.html.js

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Axelcureno Axelcureno changed the base branch from stage to MWPW-163479 December 16, 2024 21:29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tend to put test code for variants in the same .test.html file since there is not much code.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will do this

<sp-button size="s" variant="accent">Buy</sp-button>
</div>
</merch-card>
<merch-card class="" tabindex="0" variant="pricing-widget">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is empty class="" needed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing..

<body>
<script type="module" src="./merch-card.pricing-widget.test.html.js"></script>
<main>
<sp-theme color="light" scale="medium" dir="ltr">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if Adobe Home goes with Spectrum CSS, we should probably update this file for Spectrum CSS instead of SWC, to be checked with AH.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we assume in the meantime that we are going with Spectrum CSS?

Copy link
Member Author

@Axelcureno Axelcureno Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have dark theme yet in Figma, will wait for design specs to implement Dark theme. c @npeltier @3ch023

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you try to confirm with AH team?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

file name is too generic, can we prefix with ah ? Also IMOwidget is not needed in the name.
suggestion: ah-pricing

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree with 'ah' prefix idea, even if it will be used on other surface its good to 'mark' original card owner.

for POC imo ah-pricing-widget is ok, later AH should come up with the final name for this card. In the call with their dev he mentioned that they might want to name it after the page its used on, similar to how we have a catalog or plans card, lets wait for their feedback

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-12-17 at 9 44 43 AM
Oh ok, I used this name because that's how it's referred in Figma, but I will add ah- prefix to our files as requested.

flex-direction: column;
font-size: 12px;
line-height: 18px;
color: var(--spectrum-gray-800);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we struggled with CCD colors, can you set colors using RGB values via the CSS variables?

e.g: https://github.com/adobecom/milo/pull/3289/files#diff-eacc4c59009ac5159e7ce2a208d373c829866d1c0965e51778720ee628bb0c11R80-R84

@@ -0,0 +1,36 @@
export const CSS = `
:root {
--merch-card-pricing-widget-width: 132px;
Copy link
Contributor

@yesil yesil Dec 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default values for pricing variant specific variables, can be defined at https://github.com/adobecom/milo/pull/3384/files#diff-e60be84bbf9d85ac9cd9234dec52df2fedf7fa167bd8eb18a9f67886c84086b9R40

:root is the top scope, and we don't need to define these variables there.

color: var(--spectrum-gray-800);
}

merch-card[variant="pricing-widget"] [slot="body-xxs"] {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we duplicating all the styles here?
if the only thing that changes is the color, we can redefine the color variables here.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this particular card slot, there is a requirement to trim the text and display ellipsis when the content length is bigger than the space available 54px.

Copy link
Contributor

@3ch023 3ch023 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Axelcureno could you please add an Adobe Home gallery html and nala test for it?
just one card gallery and some simple minimal test would be good

otherwise looks good to me, thank you

@npeltier
Copy link
Contributor

@Axelcureno @yesil @3ch023 should we create an AH branch once this is accepted so they can start playing around?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Axelcureno Axelcureno requested review from 3ch023 and yesil December 17, 2024 22:00
@Axelcureno
Copy link
Member Author

Axelcureno commented Dec 17, 2024

@Axelcureno could you please add an Adobe Home gallery html and nala test for it? just one card gallery and some simple minimal test would be good

otherwise looks good to me, thank you

Sure, I have created new gallery page for Adobe Home (and addressed all other comments): https://mwpw-164093--milo--adobecom.hlx.page/libs/features/mas/docs/adobe-home.html
All is pending is dark theme, will wait for figma design to implement the colors.
cc @npeltier @yesil

@@ -82,6 +82,12 @@ export function processSubtitle(fields, merchCard, subtitleConfig) {
}
}

export function processBackgroundColor(fields, merchCard, allowedColors) {
if (allowedColors?.includes(fields.backgroundColor)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not fail fast?

max-height: 54px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about Firefox?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants