feat(store-ui): Table Molecule

[victorhmp]

What's the purpose of this pull request?

This PR creates adds a Table molecule to @vtex/store-ui.

Closes #840.

How it works?

The Table component simply takes children and renders them. But to aid in the construction of tables, individual components that should be placed inside of a Table component were also created in this branch:

• TableBody, renders a <tbody> tag.
• TableHead, renders a <thead> tag.
• TableRow, renders a <tr> tag.
• TableFooter, renders a <tfoot> tag.
• TableCell, can render a <th> or <td> tag, according to a variation prop that supports values "header" and "data".

All of those components expect to receive children, and render them out.

Here's an example of a table and the JSX markup that generates it:

    <TableComponent>
      <TableHead>
        <TableRow>
          <TableCell scope="col" variant="header">
            Installments
          </TableCell>
          <TableCell scope="col" variant="header">
            Amount
          </TableCell>
          <TableCell scope="col" variant="header">
            Total
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {options.map((option) => (
          <TableRow key={option.numberOfInstallments}>
            <TableCell>{option.numberOfInstallments}x</TableCell>
            <TableCell>
              <Price formatter={priceFormatter} value={option.monthlyPayment} />
            </TableCell>
            <TableCell>
              <Price formatter={priceFormatter} value={option.total} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </TableComponent>

How to test it?

You can check it out in the Storybook linked below.

Here's also a base.store preview with this table: https://sfj-b961b7e--base.preview.vtex.app/small-messenger-bag-with-double-g-70/p.

References

For inspiration:

• https://mui.com/api/table/
• https://docs.storefrontui.io/?path=/story/components-organisms-table--common

References about HTML tables and a11y:

• https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/table
• https://www.w3.org/WAI/curricula/developer-modules/tables/

[netlify]

✔️ Deploy Preview for storeui ready!

🔨 Explore the source changes: 35a85ac

🔍 Inspect the deploy log: https://app.netlify.com/sites/storeui/deploys/616db5d1a1ea8c0007ddff34

😎 Browse the preview: https://deploy-preview-987--storeui.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 35a85ac:

Sandbox	Source
Store UI Typescript	Configuration

[igorbrasileiro]

Also, take a look at this problem on the docs page.

[victorhmp]

Also, take a look at this problem on the docs page.

@igorbrasileiro solved it here: #989 ;)

[lariciamota]

👏

[lariciamota]

Any reason for not be calling it "Table"?

[victorhmp]

Just because I wanted the story name to also be Table 😅 And to do so, I have to export a Table variable.