Add product Element #14454
Add product Element #14454
Conversation
github-actions
bot
removed
the
run_chromatic
github-actions
bot
removed
the
run_chromatic
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. |
github-actions
bot
removed
the
run_chromatic
|
Could we squash the commits into a smaller number of self contained and explanatory commits please? |
| isCardOnly: false, | ||
| }; | ||
|
|
||
| export const Default = () => <InlineProductCard {...sampleProductCard} />; |
There was a problem hiding this comment.
We're updating existing stories to Component Story Format 3 and any new stories should use this format. You'll find a lot of examples in the codebase such as Pill.stories.tsx. It's a bit more concise and removes some of the boilerplate as in a lot of cases you can use the default render function and not have to explicitly render the component.
There was a problem hiding this comment.
🤦 I remember this from last time...
| gap: ${space[1]}px; | ||
| ${textSans20}; | ||
|
|
||
| ${until.mobileLandscape} { |
There was a problem hiding this comment.
I'd make textSans17 the default and swap this to from so it's consistent with the other media queries. (ie. the mobile styles are the defaults)
| label={productCta.label} | ||
| url={productCta.url} | ||
| priority={index === 0 ? 'primary' : 'tertiary'} | ||
| cssOverrides={ |
There was a problem hiding this comment.
Given ProductLinkButton is a new component specifically added for Filter articles, does it need to support cssOverrides as it's a bit of an anti-pattern? Could this be achieved by adding props to apply these styles instead? (eg. fullWidth or similar)
|
|
||
| const primaryHeading = css` | ||
| ${headlineMedium24}; | ||
| ${until.mobileLandscape} { |
There was a problem hiding this comment.
should change this also -> mobile first then ${from.``}
co-authored by @charleycampbell
co-authored by @emma-imber
What does this change?
We are adding a new Product Element to be displayed on filter articles. https://github.com/guardian/flexible-model/discussions/81
We're introducing two new product card components,
InlineProductCardandLeftColProductCard, along with supporting changes to styling, image handling, and schema updates.These components are designed to display product information inline and in the left column of articles, with different layouts and palette colours. The changes also include updates to the image sizing logic for product cards and enhancements to the button styling for product links.
New Product Card Components:
InlineProductCardandLeftColProductCardcomponents to display product information, including brand, product name, image, pricing, retailer links, CTAs, and statistics. Each component has its own layout and styling for different breakpoints.Styling and Palette Enhancements:
Image Handling:
Picturecomponent to support a newproductCardrole type, with tailored image sizing logic for product cards at different breakpoints.Schema Updates:
elementIdforLinkBlockElement, ensuring unique identification and improved data integrity for product-related links. This was already coming from FE but was missing from the model in DCR. This is a fix and allows us to directly copy elements from FE forProductElement.stories.tsxWhy?
We are adding in a new element called
Product. This product element will help structure the product data and also the ability to display product reviews as part of the new designs. This is the RFCScreenshots -
LeftCol product card (only on Wide)
Inline product card (from Left Col)