Feature: add sponsored badge option

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
 
 

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` |

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 && (
+          <span className={`${handles.sponsoredBadge} db c-muted-1 t-mini-s`}>
+            <IOMessage id={sponsoredBadgeLabel} />
+          </span>
+        )}
         <span className={`${handles.productBrand} ${brandNameClass ?? ''}`}>
           {name} {showBrandName && brandName && `- ${brandName}`}
         </span>

react/__tests__/components/ProductName.test.js

@@ -65,6 +65,15 @@ describe('<ProductName />', () => {
     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',

react/__tests__/components/__snapshots__/ProductName.test.js.snap

@@ -66,6 +66,25 @@ exports[`<ProductName /> should match the snapshot with Name and SkuName 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<ProductName /> should match the snapshot with Name and Sponsored Badge 1`] = `
+<DocumentFragment>
+  <h1
+    class="productNameContainer mv0 t-heading-4"
+  >
+    <span
+      class="sponsoredBadge db c-muted-1 t-mini-s"
+    >
+      sponsoredBadgeTest
+    </span>
+    <span
+      class="productBrand "
+    >
+      ProductTest 
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
 exports[`<ProductName /> should match the snapshot with all options 1`] = `
 <DocumentFragment>
   <h1