Product carousel card - V1 #14946
Product carousel card - V1 #14946
Conversation
- initial build of the card + a storybook - trying to ruse the product card buttons which required an override to be added as we want a different label on the button
… the page when wired up - Additional tweaks so the card is more aligned with the Figma designs - Added logic when there is no heading to put the product and brand name under the image on seperate lines - Added logic to handle when the product/brand name is longer than one line and needs to wrap - Using the ProductCardImage instead of Picture for consistency across these elements but happy to change it back again or discuss further - Added more storybooks
oliverabrahams
left a comment
oliverabrahams
left a comment
There was a problem hiding this comment.
I know this is still in draft but made some changes when looking into the scrollable carousel - let me know if you want to chat about any of them
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
Co-authored-by: Oliver Abrahams <[email protected]>
…letteDeclarations Add width to storybook so it always shows at 280x regardless of the breakpoint
github-actions
bot
removed
the
run_chromatic
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
dotcom-rendering/src/components/ProductCarouselCard.stories.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| export const ProductCardButtons = ({ | ||
| productCtas, | ||
| buttonLabelOverride, |
There was a problem hiding this comment.
Would it make sense to pass through a isBuyAt: boolean parameter instead which defaults to false. As this would not work for more than one button or not use this component and directly use the ProductLinkButton.
There was a problem hiding this comment.
As chatted about offline we're going to use the ProductLinkButton so we don't need this change now
…ng to be one CTA in the carosuel for now and also keeps the logic simpler in the ProductCardButtons
oliverabrahams
left a comment
oliverabrahams
left a comment
There was a problem hiding this comment.
LGTM - just one small tweak
github-actions
bot
removed
the
run_chromatic
|
Seen on PROD (merged by @charleycampbell 9 minutes ago) Please check your changes! |
First iteration of the product card which will sit in the carousel in place of the 'At a Glance' section at the top of Filter articles.
These cards will be used in the carosuel which is being built as part of this PR
Note: This is the first iteration as there may be follow up cards which tweak/add to the logic
Screenshots
Default card
Dark Mode Default Card
