Add product Element #14454
Draft
Add product Element #14454
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
- minor tweaks to left col card so its more aligned with the figma - removed retailer from the price row (TBC) - reworded cta (this TBC) - updated storybooks to reflect the likes/dislikes of product
- removed retailer from the price row (TBC) - reworded cta (this TBC) - updated storybook to reflect the likes/dislikes of product - added url cleaner
| <div css={productInfoContainer}>{children}</div> | ||
| ); | ||
|
|
||
| const stripHtml = (html: string) => html.replace(/<[^>]+>/g, ''); |
Check failure
Code scanning / CodeQL
Incomplete multi-character sanitization High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 2 days ago
General fix approach:
The best way to fix the incomplete multi-character sanitization problem is to use a well-tested library like sanitize-html to strip out HTML tags correctly, as hand-rolled regex-based HTML removal is error-prone and inherently incomplete.
Detailed fix for this code:
- Replace the current
stripHtmlimplementation with a call tosanitize-html, configured to remove all HTML tags and escape content. - Add an import for
sanitize-htmlat the top. - Optionally, if external libraries are undesirable, repeatedly apply the regular expression replacement in a loop until the string no longer changes (but this is discouraged in favor of a library).
- No other parts of the file need to change.
Specific changes to apply:
- Add
import sanitizeHtml from 'sanitize-html';at the top of the file. - Replace the implementation of
stripHtmlwith a function that callssanitizeHtml(html, { allowedTags: [], allowedAttributes: {} }), which removes all HTML tags.
Suggested changeset
1
dotcom-rendering/src/components/InlineProductCard.tsx
| @@ -1,4 +1,5 @@ | ||
| import { css } from '@emotion/react'; | ||
| import sanitizeHtml from 'sanitize-html'; | ||
| import { | ||
| from, | ||
| headlineMedium20, | ||
| @@ -101,7 +102,7 @@ | ||
| <div css={productInfoContainer}>{children}</div> | ||
| ); | ||
|
|
||
| const stripHtml = (html: string) => html.replace(/<[^>]+>/g, ''); | ||
| const stripHtml = (html: string) => sanitizeHtml(html, { allowedTags: [], allowedAttributes: {} }); | ||
|
|
||
| export const InlineProductCard = ({ | ||
| format, |
Copilot is powered by AI and may make mistakes. Always verify output.
| <div css={productInfoContainer}>{children}</div> | ||
| ); | ||
|
|
||
| const stripHtml = (html: string) => html.replace(/<[^>]+>/g, ''); |
Check failure
Code scanning / CodeQL
Polynomial regular expression used on uncontrolled data High
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
co-authored by @charleycampbell
What does this change?
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
