-
Notifications
You must be signed in to change notification settings - Fork 181
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 "Try Buy Widget" merch card #3651
Conversation
Co-Authored-By: Angelo Statescu <[email protected]>
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
Commits
|
There was a problem hiding this 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
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/commerce.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/mas.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
|
libs/deps/mas/merch-card.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this 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
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/features/mas/dist/mas.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/features/mas/src/global.css.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is not in the navigation menu(lost in previous PRs) can you add it back?
libs/features/mas/src/hydrate.js
Outdated
try { | ||
await customElements.whenDefined('checkout-button'); | ||
const CheckoutButtonEl = customElements.get('checkout-button'); | ||
const checkoutBtn = CheckoutButtonEl.createCheckoutButton({}, cta.innerHTML); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this block causes runtime errors in ah gallery:
mas.js:2370 Failed to initialize checkout-button logic: TypeError: Cannot read properties of null (reading 'setAttribute')
at mas.js:2370:30403
libs/features/mas/src/hydrate.js
Outdated
const checkoutBtn = CheckoutButtonEl.createCheckoutButton({}, cta.innerHTML); | ||
|
||
for (const attr of cta.attributes) { | ||
checkoutBtn.setAttribute(attr.name, attr.value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder why this is needed?
libs/features/mas/src/hydrate.js
Outdated
/* c8 ignore next 3 */ | ||
(async () => { | ||
try { | ||
await customElements.whenDefined('checkout-button'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it is safe to assume that checkout-button
is already defined before we hit here, if not wee need to check how mas.js is bundled.
I would avoid adding checks for web components that we know are in the bundle.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Disregard my previous comment, I found the root cause for the race condition. It was that in my test page, mas-commerce-service was actually defined after mas.js so the checkout button was not created properly since there was no service.
libs/features/mas/src/hydrate.js
Outdated
e.stopPropagation(); | ||
cta.click(); | ||
if (typeof checkoutBtn.clickHandler === 'function') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isn't checkoutBtn.click()
not enough?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, fixed
@@ -0,0 +1,34 @@ | |||
import { LitElement } from 'lit'; | |||
|
|||
export default class MatchMediaController { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this different than https://opensource.adobe.com/spectrum-web-components/tools/match-media/ ?
can we use the lit one instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We talked about it a few weeks ago. You said if MatchMediaController
from SWC is small we could use it, otherwise we can implement the logic in js. And this is it, a local implementation of the same thing.
However, it's pretty much the same as the one from SWC to be honest. Let me know if you want me to remove this and just use the one from SWC.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually since MatchMediaController
from SWC is so small we can just use that. I changed it back everywhere too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
true true, I thought this portion was from Axel and I didn't remember our discussion.
if putting MatchMediaController
doesn't explode our bundle size, let's use it as it.
libs/features/mas/src/merch-stock.js
Outdated
@@ -1,6 +1,6 @@ | |||
import { LitElement, css, html } from 'lit'; | |||
import { EVENT_MERCH_STOCK_CHANGE } from './constants.js'; | |||
import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js'; | |||
import MatchMediaController from './match-media-controller.js'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would like to understand the difference
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
See above
flex-direction: row; | ||
} | ||
:host([variant='ah-try-buy-widget']) .footer .spectrum-Button-label { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if we don't support Spectrum CSS anymore for AH, we should remove such rules.
`; | ||
} | ||
|
||
customElements.define('ah-try-buy-widget', AHTryBuyWidget); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please cleanup Spectrum CSS related rules since we switched to SWC.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed, hopefully all of them
@@ -100,7 +100,6 @@ export function CheckoutMixin(Base) { | |||
} | |||
|
|||
async render(overrides = {}) { | |||
if (!this.isConnected) return false; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is it to fix some issue? do you have more details?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@3ch023 I asked them. Since sp-button
doesn't have checkout-link capabilities, instead we will render a checkout-link but not in the DOM and just forward clicks to it.
But the DOM element must be rendered even if it is not connected to DOM which is fine IMO.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i am good if there is no impact on events we throw for CCD
libs/features/mas/src/hydrate.js
Outdated
let title = fields.cardTitle; | ||
const { maxCount } = titleConfig; | ||
if (maxCount) { | ||
const [truncatedTitle, cleanTitle] = getTruncatedTextData(fields.cardTitle, maxCount); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should have a nala card with 'too long' description and a test checking truncation on /libs/features/mas/docs/adobe-home.html
lets do it as a follow up ticket though, @Axelcureno could you create one?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, created: https://jira.corp.adobe.com/browse/MWPW-167766
Skipped 3651: "MWPW-164093: Adobe Home "Try Buy Widget" merch card" due to file "libs/deps/mas/commerce.js" overlap. Merging will be attempted in the next batch |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-icon.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-mnemonic-list.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-offer-select.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-sidenav.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-stock.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
libs/deps/mas/merch-twp-d2p.js
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
… Tab as Android (#3766) * [MWPW-159511] Create anchor (ID) elements (#3714) * [MWPW-159511] Create anchor (ID) elements * address feedback * address feedback * [MWPW-167031] top tooltip rtl fix (#3618) * [MWPW-167031] tooltip top rtl fix * [MWPW-167031] spacing corrections * [MWPW-167031] css optimization * [MWPW-167031] replaced css with js logic * [MWPW-167031] optimization * [MWPW-167031] optimization * MWPW-164492: Plans Card via MAS (#3649) * first draft * add callout * fix stock js issue * fix plans variant * remove sitemap * fix unit tests * add nala tests * MWPW-167305 [Plans Milo] Callout grey block: authoring improvement (#3663) Co-authored-by: Bozo Jovicic <[email protected]> * use consonant cta for plans * add plans.md * fix review comments * fix merge issue * revert obsolete change * fix nala tests * address review comments * merge in stage * Fix regression * fix nala tests comments --------- Co-authored-by: Bozo Jovicic <[email protected]> Co-authored-by: Bozo Jovicic <[email protected]> * MWPW-160954 Marketo Multi-step (#3671) * MWPW-160954 Marketo Multi-step * PR Changes * QA Fixes * Next button fix * Adding support for first localnav menu being a dropdown (#3693) * Adding support for localnav item being a dropdown * Fix for button text * wip * Updating title for dropdown * Updating mock for localnav * Fixing button text * Lint fix * Replacing button text after copying * Lint fix * [MWPW-162639] youtube block a tag fix (#3703) * [MWPW-162639] youtube block a tag fix * [MWPW-162639] condition update * [MWPW-162639] clause fix * [MWPW-162639] code removal * Fix(mwpw-163031): Typo fix long-form (#3710) * new event added for autoplay videos * combining the fixe for 163031 * Update adobetv.js * Upgrading standalone gnav version to 0.0.5 (#3712) Upgrading gnav version to 0.0.5 * MWPW-167455: Remove node cloning (#3715) * MWPW-167455: Remove node cloning * MWPW-167455: Remove redundant code * MWPW-167455: Remove video test * MWPW-167455: Remove unnecessary code * MWPW-167455: Change test name * Add fix for galaxy tab * [MWPW-167349] - Added a default logo for the 'A' icon displayed on the right side of GNAV. (#3728) * Added default case adobe 'A' logo on right side for GNAV(Adobe logo block) * Added default case adobe 'A' logo on right side for GNAV(Adobe logo block) --------- Co-authored-by: Dev Ashish Sardana <[email protected]> * MWPW-164660: [3-in-1][Milo] Implement a link converter for CTAs using an iFrame (#3564) * added 3-in-1 modal * moved event listener * updated tests * addressed comments * fixed unit test * moved constants.js into mas.js * added cli param * MWPW-167928 Override Marketo POI (#3702) * replace overflow x with contain layout (#3706) * replace overflow x with contain layout * add a fix for breaking mobile gnav * move fix to existing media block * [MWPW-168309] 2 small MEP button updates (#3719) * Revert "MWPW-140452 - Icon authoring in milo using the federal repo a… (#3357) Revert "MWPW-140452 - Icon authoring in milo using the federal repo and individual SVG assets (#3259)" This reverts commit 81a5770. * [Release] Stage to Main (#3497) MWPW-165774 [Mobile-GNAV] page is not scrollable in live page (#3495) * check for new nav when disabling ios scroll * shortened the check from the previous commit Co-authored-by: Raghav Sharma <[email protected]> * Initial checkin. * Remove white space. --------- Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com> Co-authored-by: Okan Sahin <[email protected]> Co-authored-by: Raghav Sharma <[email protected]> * MWPW-168334 Load georoutingv2.json and georoutingv2.js in parallel (#3720) * load georoutingv2.json in parallel with georoutingv2.js * remove performance marks * fixed unit tests * Small refactoring * fallback for the jsonPromise * fix unit tests * [MWPW-167309] - Table h tags replace (#3721) * [MWPW-167749] table h header replaced * [MWPW-167749] optimization * [MWPW-167749] naming changes * [MWPW-167749] optimization * [MWPW-167749] code optimization * [MWPW-167749] col role removal * [MWPW-167749] code style update * [MWPW-167309] code improvement * [MWPW-167309] - header role paragraph * MWPW-166176 - Stop initial tabs click propagation (#3726) * MWPW-166176 - Stop initial tabs click propagation * PR feedback --------- Co-authored-by: Ryan Clayton <[email protected]> * Fix(mwpw-168006): Viewport bug fix. (#3730) viewport bug fix * Remove file overlap condition from merge to stage workflow (#3736) Remove file overlap condition * Revert "replace overflow x with contain layout" (#3776) Revert "replace overflow x with contain layout (#3706)" This reverts commit 0f54535. * Adding a class to convert group link title to a simple header instead of a link (#3769) Adding a class to convert group link title to a simple header instead of link * MWPW-164093: Adobe Home "Try Buy Widget" merch card (#3651) * MWPW-164093: Adobe Home 'Pricing Widget' merch card Co-Authored-By: Angelo Statescu <[email protected]> * styles * cr fixes * refactored swc cta creation * wip * Revert "wip" This reverts commit ebede48. * wip * wip * wip * removed loading promise from race * tacocat update * new fragment mapping approach * typo fix * adobe home card improvements * Enhance merch card background and border color handling - Refactored background color processing to support custom color mapping - Updated border color processing to use CSS custom properties - Added more flexible color configuration for merch cards - Improved test coverage for color-related functions - Removed hardcoded color and border styling in favor of dynamic properties * truncate fixes * benchmarks duration update * truncation error handling * reubens comments * updated deps * unit test fix * data-href for event capture * Delete .cursor.zip * Update .gitignore * bubbled click event * dataset url * wip * Move SWC buttons to light DOM (#3734) * Move SWC buttons to light DOM * fix doc * css padding reset * remove .cursor rules * NALA tests * improved nala tests * lcp improvements on docs page * lcp improvements * Revert "lcp improvements" This reverts commit bb26697. * Revert "lcp improvements on docs page" This reverts commit 936cf14. * Update MAS package.json version * fixed nala tests * lint fixes * nala test title fixed * fixed test * conflicts resolved for the nth time * conflicts resolved * no source maps * right bg color for ah try card * sp-button analytics * data-analytics-id in sp-button * MWPW-169143: AH Try/Buy Widget sizing fixes * data-analytics-id on checkoutButton * version bump --------- Co-authored-by: Angelo Statescu <[email protected]> Co-authored-by: astatescu <[email protected]> Co-authored-by: Ilyas Türkben <[email protected]> Co-authored-by: Ilyas Türkben <[email protected]> * [MWPW-167752] Loop focus in modals containing iframes (#3716) * MWPW-163228: Preflight svg issue (#3725) * WIP: Pushing just for preview purposes * Added messaging to clairfy the status of the SVG * Strange issues with dev tools, removing fetch to avoid possible CORS, adding external url to show authors where content lives * Updating tags and errortype for PEP lana logs (#3731) Lana log message fix * MWPW-151376: Check sharepoint url (#3733) * [MWPW-167759] Hero marquee bg-bottom-tablet fix (#3735) * MWPW-166689 Add video support to Article Header (#3737) * MWPW-163320 Gnav Promo CTA overflowing issue - BACOM Global Nav (#3739) * MWPW-163320 Gnav Promo CTA overflowing issue - BACOM Global Nav * apply fix specific to button inside feds promo --------- Co-authored-by: Narcis Radu <[email protected]> Co-authored-by: Dušan Kosanović <[email protected]> Co-authored-by: Mariia Lukianets <[email protected]> Co-authored-by: Bozo Jovicic <[email protected]> Co-authored-by: Bozo Jovicic <[email protected]> Co-authored-by: Brandon Marshall <[email protected]> Co-authored-by: Bandana Laishram <[email protected]> Co-authored-by: sharathkannan <[email protected]> Co-authored-by: Ratko Zagorac <[email protected]> Co-authored-by: Dev Ashish Saradhana <[email protected]> Co-authored-by: Dev Ashish Sardana <[email protected]> Co-authored-by: Mira Fedas <[email protected]> Co-authored-by: Prince Patel <[email protected]> Co-authored-by: Dave Linhart <[email protected]> Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com> Co-authored-by: Okan Sahin <[email protected]> Co-authored-by: Raghav Sharma <[email protected]> Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Ryan Clayton <[email protected]> Co-authored-by: Axel Cureno Basurto <[email protected]> Co-authored-by: Angelo Statescu <[email protected]> Co-authored-by: astatescu <[email protected]> Co-authored-by: Ilyas Türkben <[email protected]> Co-authored-by: Ilyas Türkben <[email protected]> Co-authored-by: Rares Munteanu <[email protected]> Co-authored-by: Jason Slavin <[email protected]> Co-authored-by: Megan Thomas <[email protected]>
This PR introduces Adobe Home 'Pricing Widget' merch card with 3 variations:



Resolves: MWPW-164093
Test URLs:
Before: https://main--milo--adobecom.hlx.live/docs/library/kitchen-sink/merch-card?martech=off
After: https://mwpw-164093--milo--adobecom.hlx.live/docs/library/kitchen-sink/merch-card?martech=off