fix: adjust data attributes pattern on multiple components

[heitorado]

What's the purpose of this pull request?

This PR implements the patterns mentioned below on a few components that (I think) were not following them. I'm not sure if my interpretation of the patterns is 100% correct, especially when the components are compound, so everything here is open for discussion. Test were also updated accordingly, and a possible future work for a PR is to enforce the same pattern on all tests (some of them test for the presence of correct data attributes/values, and some of them do not).

How it works?

It enforces the following patterns:

Names for data attributes

The data attribute for the outermost component/element must be in the format data-store-my-attribute-name-kebab-case. All other data attributes for the inner components/elements must be in the format data-my-attribute-name-kebab-case.

Example:
GOOD:

<Component data-store-component>
  <InnerComponent data-component >
    <InsideInnerComponent data-inside-inner />
  <InnerComponent />
  <OtherInnerComponent data-other-attribute />
<Component/>

[data-store-component]
[data-component]
[data-inside-inner]
[data-other-attribute]

BAD:

<Component data-store-component>
  <InnerComponent data-store-component >
    <InsideInnerComponent data-store-inside-inner />
  <InnerComponent />
  <OtherInnerComponent data-store-other-attribute />
<Component/>

[data-store-component]
[data-store-component]
[data-store-inside-inner]
[data-store-other-attribute]

Values for data attributes

For data attributes that can hold multiple values, the values should be assigned to the data attribute itself instead of creating another data attribute to represent the value.

Example:
GOOD:

<Component data-component />
<Component data-component="one-value" />
<Component data-component="other-value" />

[data-component]
[data-component='(one-value|other-value)']

BAD:

<Component data-component />
<Component data-component data-one-value />
<Component data-component  data-other-value />

[data-component]
[data-component][data-one-value]
[data-component][data-other-value]

How to test it?

yarn test

References

Faststore design principles
@igorbrasileiro

[netlify]

✔️ Deploy Preview for faststoreui ready!

🔨 Explore the source changes: a32eb01

🔍 Inspect the deploy log: https://app.netlify.com/sites/faststoreui/deploys/61ce30e7f75e52000735bd4a

😎 Browse the preview: https://deploy-preview-1093--faststoreui.netlify.app

[netlify]

✔️ Deploy Preview for faststore ready!

🔨 Explore the source changes: a32eb01

🔍 Inspect the deploy log: https://app.netlify.com/sites/faststore/deploys/61ce30e7c8ffb8000887e5a8

😎 Browse the preview: https://deploy-preview-1093--faststore.netlify.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a32eb01:

Sandbox	Source
Store UI Typescript	Configuration

[hellofanny]

uhuull! Niceee 🚀