diff --git a/CHANGELOG.md b/CHANGELOG.md index d659d4820..302345fb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Option to display a "Sponsored" tag above product name + ## [3.169.5] - 2023-10-05 diff --git a/docs/ProductName.md b/docs/ProductName.md index ff07a40d6..3d4b19050 100644 --- a/docs/ProductName.md +++ b/docs/ProductName.md @@ -51,6 +51,8 @@ The `product-name` block is responsible for displaying a product name along with | `showBrandName` | `boolean` | Displays the brand name. | `false`| | `showProductReference` | `boolean` | Displays the product reference code. | `false`| | `showSku` | `boolean` | Displays the SKU value. | `false` | +| `showSponsoredBadge` | `boolean` | Displays a sponsored badge above the product's name. | `false` | +| `sponsoredBadgeLabel` | `string` | Text of the sponsored badge if it's rendered. | `""` | | `tag` | `string` | Defines the HTML tag of the product container. Possible values are: `div`, `h1`, `h2`, `h3`. | `div` | ## Customization @@ -66,3 +68,4 @@ To apply CSS customizations in this and other blocks, follow the [Using CSS hand | `productNameSkuLoader` | | `productReference` | | `productSku` | +| `sponsoredBadge` | diff --git a/react/ProductName.tsx b/react/ProductName.tsx index 8553b8ce7..f1b4fc035 100644 --- a/react/ProductName.tsx +++ b/react/ProductName.tsx @@ -5,9 +5,11 @@ import ContentLoader from 'react-content-loader' import { useCssHandles } from 'vtex.css-handles' import type { CssHandlesTypes } from 'vtex.css-handles' import { Link } from 'vtex.render-runtime' +import { IOMessage } from 'vtex.native-types' const CSS_HANDLES = [ 'productNameContainer', + 'sponsoredBadge', 'productBrand', 'productSku', 'productReference', @@ -47,6 +49,10 @@ type Props = { showProductReference?: boolean /** Show brand name */ showBrandName?: boolean + /** Show sponsored badge */ + showSponsoredBadge?: boolean + /** Label to display in the sponsored badge */ + sponsoredBadgeLabel?: string /** Classes to be applied to root element */ className?: string /** Classes to be applied to brandName element */ @@ -116,6 +122,8 @@ function ProductName({ showSku = false, showBrandName = false, showProductReference = false, + showSponsoredBadge = false, + sponsoredBadgeLabel, tag: Wrapper = 'div', classes, name, @@ -168,6 +176,11 @@ function ProductName({ className={`${handles.productNameLink} pointer c-link hover-c-link active-c-link no-underline underline-hover`} linkProps={linkProps} > + {showSponsoredBadge && ( + + + + )} {name} {showBrandName && brandName && `- ${brandName}`} diff --git a/react/__tests__/components/ProductName.test.js b/react/__tests__/components/ProductName.test.js index 407a63b64..ba2ba5ab4 100644 --- a/react/__tests__/components/ProductName.test.js +++ b/react/__tests__/components/ProductName.test.js @@ -65,6 +65,15 @@ describe('', () => { expect(asFragment()).toMatchSnapshot() }) + it('should match the snapshot with Name and Sponsored Badge', () => { + const { asFragment } = renderComponent({ + sponsoredBadgeLabel: 'sponsoredBadgeTest', + showSponsoredBadge: true, + }) + + expect(asFragment()).toMatchSnapshot() + }) + it('should match the snapshot with all options', () => { const { asFragment } = renderComponent({ skuName: 'ProductSkuName', diff --git a/react/__tests__/components/__snapshots__/ProductName.test.js.snap b/react/__tests__/components/__snapshots__/ProductName.test.js.snap index 242a60fc6..049cafdb4 100644 --- a/react/__tests__/components/__snapshots__/ProductName.test.js.snap +++ b/react/__tests__/components/__snapshots__/ProductName.test.js.snap @@ -66,6 +66,25 @@ exports[` should match the snapshot with Name and SkuName 1`] = ` `; +exports[` should match the snapshot with Name and Sponsored Badge 1`] = ` + +

+ + sponsoredBadgeTest + + + ProductTest + +

+
+`; + exports[` should match the snapshot with all options 1`] = `