Add data attribute to checkbox

[julixC]

What is the purpose of this pull request?

Adding the following data attribute to the checkbox component for collection data on activity-flow.
This attributes are specifically added for usage

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Requires change to documentation, which has been updated accordingly.

How to test this change?

1. Download this project and link it on VTEX IO to an account that uses the checkbox component.
   (I am using hering, testing the filter's checkbox)

2. Create your project with the checkbox component — or download one that already uses it — and link it to VTEX IO.
   (I am using the search-result react app and altering the FacetItem component)

3. Add the desired attributes within the checkbox component following the template:

// Atribute will show as data-is-clicked
isClicked={YourValue}

// Atribute will show as data-facet-key
facetKey={YourValue}

// Atribute will show as data-query-text
queryText={YourValue}

// Atribute will show as data-query-category
queryCategory={YourValue}

!!! Important information !!!
All values should be of type String

Example of full code:

4. After reloading the web page, right-click on the checkbox and select "Inspect"
5. Your values should show within the data attributes like in the following example:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
styleguide	❌ Failed (Inspect)		Feb 26, 2025 5:26pm

[ataideverton]

Bom atualizar os testes em react/components/Checkbox/index.test.js para ter pelo menos um usando essa prop nova.

[ataideverton]

Qual o cenário onde o isClicked é necessário se existe o checked e o onChange?

[julixC]

Nós vamos coletar os dados da tag html usando activity-flow. O atributo "checked", apesar de ter a informação que queremos, determina somente a aparência do checkbox e não consta no HTML (como mostrado na imagem abaixo). Portanto, para conseguir coletar a informação se o usuário está acionando ou desativando um facet, nós precisamos desse atributo isClicked.