What does this component do?

This agnostic component is a Category tag inserted into the product page. When clicked, this tag redirects the user to the product category page.

If the product is part of a specific collection, you can also enable a collection tag that will appear next to the category tag.

Download the package

using

• npm i @acctglobal/product-tags

or

• yarn add @acctglobal/product-tags

Usage examples

Import the component in your file:

• import {ProductTags} from '@acctglobal/product-tags

Declare the component and pass your LinkComponent inside of the CustomTagComponent prop.

• <ProductTags
    tagCategoryLabel="Category"
    urlCategory="/category"
    tagCollectionLabel="Collection"
    urlCollection="/collection"
    CustomTagComponent={Link}
  />

CSS example

• [data-tags-container] {
    display: flex;
    gap: 12px;
  }
  
  [data-tag-category] {
      background-color: #94E7AD;
      border: 2px solid #40AA60;
      border-radius: 50px;
      padding: 4px 11px 4px 10px;
      text-decoration: none;
      color: #2A7641;
      font-weight: 700;
  }
  
  [data-tag-collection] {
      background-color: #FF8E8E;
      border: 2px solid #FF5050;
      border-radius: 50px;
      padding: 4px 11px 4px 10px;
      text-decoration: none;
      color: black;
      font-weight: 700;
  }

Result

Props

| Prop | Value | Description | | :----------------- | :------------------------: | :---------------------------------------------------: | | tagCategoryLabel | string | Mandatory. Set the title of the tag | | urlCategory | string | Mandatory. Set the url to your category page | | tagCollectionLabel | string | Optional. Set the title of the tag | | urlCollection | string | Optional. Set the url to your collection page | | tagStyles | React.CSSProperties | Optional. Set the tag styles | | CustomTagComponent | ComponentType< ButtonTag > | Mandatory. Set the Link component for the tags |

ButtonTag

| Prop | Value | Description | | :------- | :-----------: | :-----------------------------------------------------------------------------------: | | to | string | Mandatory. Set the url | | style | CSSProperties | Optional. Pass styles as props | | children | ReactNode | Optional. It represents anything that can be set as children of a ReactElement |

| Identifier | Description | | :------------------ | :---------------------------------------------: | | data-tags-container | styles the container that wraps the component. | | data-tag-category | styles the category tag of the component. | | data-tag-collection | styles the collection tag of the the component. |