From 0887370b07108393f27f82b423dfdfebae2b8654 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Tue, 12 Oct 2021 11:41:46 -0300 Subject: [PATCH 01/22] Create Table molecule along with its children Create `Table` component as a molecule and also: - `TableBody` - `TableCell` - `TableFooter` - `TableHead` - `TableRow` --- .../store-ui/src/molecules/Table/Table.tsx | 20 +++++++++++ .../src/molecules/Table/TableBody.tsx | 20 +++++++++++ .../src/molecules/Table/TableCell.tsx | 34 +++++++++++++++++++ .../src/molecules/Table/TableFooter.tsx | 23 +++++++++++++ .../src/molecules/Table/TableHead.tsx | 20 +++++++++++ .../store-ui/src/molecules/Table/TableRow.tsx | 19 +++++++++++ .../store-ui/src/molecules/Table/index.ts | 17 ++++++++++ 7 files changed, 153 insertions(+) create mode 100644 packages/store-ui/src/molecules/Table/Table.tsx create mode 100644 packages/store-ui/src/molecules/Table/TableBody.tsx create mode 100644 packages/store-ui/src/molecules/Table/TableCell.tsx create mode 100644 packages/store-ui/src/molecules/Table/TableFooter.tsx create mode 100644 packages/store-ui/src/molecules/Table/TableHead.tsx create mode 100644 packages/store-ui/src/molecules/Table/TableRow.tsx create mode 100644 packages/store-ui/src/molecules/Table/index.ts diff --git a/packages/store-ui/src/molecules/Table/Table.tsx b/packages/store-ui/src/molecules/Table/Table.tsx new file mode 100644 index 0000000000..13e09e6e62 --- /dev/null +++ b/packages/store-ui/src/molecules/Table/Table.tsx @@ -0,0 +1,20 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +export interface TableProps extends HTMLAttributes { + testId?: string + children: React.ReactNode +} + +const Table = forwardRef(function Table( + { testId = 'store-table', children, ...rest }, + ref +) { + return ( + + {children} +
+ ) +}) + +export default Table diff --git a/packages/store-ui/src/molecules/Table/TableBody.tsx b/packages/store-ui/src/molecules/Table/TableBody.tsx new file mode 100644 index 0000000000..0b0b933a8e --- /dev/null +++ b/packages/store-ui/src/molecules/Table/TableBody.tsx @@ -0,0 +1,20 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +export interface TableBodyProps + extends HTMLAttributes { + testId?: string + children: React.ReactNode +} + +const TableBody = forwardRef( + function TableBody({ children, testId, ...rest }, ref) { + return ( + + {children} + + ) + } +) + +export default TableBody diff --git a/packages/store-ui/src/molecules/Table/TableCell.tsx b/packages/store-ui/src/molecules/Table/TableCell.tsx new file mode 100644 index 0000000000..1d8160c4f6 --- /dev/null +++ b/packages/store-ui/src/molecules/Table/TableCell.tsx @@ -0,0 +1,34 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +type TableCellVariant = 'data' | 'header' + +export interface TableCellProps extends HTMLAttributes { + testId?: string + variant?: TableCellVariant + // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope + scope?: 'col' | 'row' | 'rowgroup' | 'colgroup' +} + +const TableCell = forwardRef( + function TableCell( + { testId, children, variant = 'data', scope, ...rest }, + ref + ) { + const Cell = variant === 'header' ? 'th' : 'td' + + return ( + + {children} + + ) + } +) + +export default TableCell diff --git a/packages/store-ui/src/molecules/Table/TableFooter.tsx b/packages/store-ui/src/molecules/Table/TableFooter.tsx new file mode 100644 index 0000000000..702eb192c6 --- /dev/null +++ b/packages/store-ui/src/molecules/Table/TableFooter.tsx @@ -0,0 +1,23 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +export interface TableFooterProps + extends HTMLAttributes { + testId?: string + children: React.ReactNode +} + +const TableFooter = forwardRef( + function TableFooter( + { children, testId = 'store-table-footer', ...rest }, + ref + ) { + return ( + + {children} + + ) + } +) + +export default TableFooter diff --git a/packages/store-ui/src/molecules/Table/TableHead.tsx b/packages/store-ui/src/molecules/Table/TableHead.tsx new file mode 100644 index 0000000000..783762ebbd --- /dev/null +++ b/packages/store-ui/src/molecules/Table/TableHead.tsx @@ -0,0 +1,20 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +export interface TableHeadProps + extends HTMLAttributes { + testId?: string + children: React.ReactNode +} + +const TableHead = forwardRef( + function TableHead({ children, testId = 'store-table-head', ...rest }, ref) { + return ( + + {children} + + ) + } +) + +export default TableHead diff --git a/packages/store-ui/src/molecules/Table/TableRow.tsx b/packages/store-ui/src/molecules/Table/TableRow.tsx new file mode 100644 index 0000000000..c054e5043b --- /dev/null +++ b/packages/store-ui/src/molecules/Table/TableRow.tsx @@ -0,0 +1,19 @@ +import type { HTMLAttributes } from 'react' +import React, { forwardRef } from 'react' + +export interface TableRowProps extends HTMLAttributes { + testId?: string + children: React.ReactNode +} + +const TableRow = forwardRef( + function TableRow({ testId = 'store-table-row', children, ...rest }, ref) { + return ( + + {children} + + ) + } +) + +export default TableRow diff --git a/packages/store-ui/src/molecules/Table/index.ts b/packages/store-ui/src/molecules/Table/index.ts new file mode 100644 index 0000000000..2f53f01ac2 --- /dev/null +++ b/packages/store-ui/src/molecules/Table/index.ts @@ -0,0 +1,17 @@ +export { default as Table } from './Table' +export type { TableProps } from './Table' + +export { default as TableRow } from './TableRow' +export type { TableRowProps } from './TableRow' + +export { default as TableCell } from './TableCell' +export type { TableCellProps } from './TableCell' + +export { default as TableBody } from './TableBody' +export type { TableBodyProps } from './TableBody' + +export { default as TableHead } from './TableHead' +export type { TableHeadProps } from './TableHead' + +export { default as TableFoot } from './TableFooter' +export type { TableFooterProps } from './TableFooter' From 365af2242011de920f78d886c70ba7e3a83ee018 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Tue, 12 Oct 2021 11:42:38 -0300 Subject: [PATCH 02/22] Add first story for Table component --- .../src/molecules/Table/stories/Table.mdx | 19 +++++++ .../molecules/Table/stories/Table.stories.tsx | 56 +++++++++++++++++++ 2 files changed, 75 insertions(+) create mode 100644 packages/store-ui/src/molecules/Table/stories/Table.mdx create mode 100644 packages/store-ui/src/molecules/Table/stories/Table.stories.tsx diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx new file mode 100644 index 0000000000..be53f5314f --- /dev/null +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -0,0 +1,19 @@ +import { Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import Table from '../Table' + +# Table + + + + + +## Props + + + +## CSS Selectors + +```css +[data-store-table] { +} +``` diff --git a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx new file mode 100644 index 0000000000..56d00c2e3b --- /dev/null +++ b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx @@ -0,0 +1,56 @@ +import type { Story } from '@storybook/react' +import React from 'react' + +// import type { ComponentArgTypes } from '../../../typings/utils' +import type { TableProps } from '../Table' +import TableComponent from '../Table' +// import TableFooter from '../TableFooter' +import TableHead from '../TableHead' +import TableRow from '../TableRow' +import TableBody from '../TableBody' +import TableCell from '../TableCell' +import mdx from './Table.mdx' + +const TableTemplate: Story = () => ( + + + + + Name + + + Age + + + + + + John + 25 + + + Carter + 25 + + + +) + +export const Table = TableTemplate.bind({}) + +// const argTypes: ComponentArgTypes = { +// children: { +// control: { type: 'text' }, +// defaultValue: 'Button', +// }, +// } + +export default { + title: 'Molecules/Table', + // argTypes, + parameters: { + docs: { + page: mdx, + }, + }, +} From c7bbbcd2638e79625e23a77ffa619da19795de7a Mon Sep 17 00:00:00 2001 From: victorhmp Date: Tue, 12 Oct 2021 11:43:04 -0300 Subject: [PATCH 03/22] Add test plan for Table component --- .../src/molecules/Table/Table.test.tsx | 133 ++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 packages/store-ui/src/molecules/Table/Table.test.tsx diff --git a/packages/store-ui/src/molecules/Table/Table.test.tsx b/packages/store-ui/src/molecules/Table/Table.test.tsx new file mode 100644 index 0000000000..0c57b1236f --- /dev/null +++ b/packages/store-ui/src/molecules/Table/Table.test.tsx @@ -0,0 +1,133 @@ +import React from 'react' +import { render } from '@testing-library/react' +import { axe } from 'jest-axe' + +import Table from './Table' +// import TableFooter from '../TableFooter' +import TableHead from './TableHead' +import TableRow from './TableRow' +import TableBody from './TableBody' +import TableCell from './TableCell' + +// WAI-ARIA tests +// https://www.w3.org/WAI/tutorials/tables/ +describe('Table WAI-ARIA Specifications', () => { + describe('Tables with one header', () => { + it('should have no violations on a table with header cells in the top row only', async () => { + const { container } = render( + + + + Name + Age + + + + + John + 25 + + + Carter + 25 + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + + it('should have no violations on a table with header cells in the first column only', async () => { + const { container } = render( + + + + Date + 12 February + 24 March + 14 April + + + Event + Waltz with Strauss + The Obelisks + The What + + + Venue + Main Hall + West Wing + Main Hall + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + + // https://www.w3.org/WAI/WCAG21/Techniques/html/H63 + it('should have no violations on a table with ambiguous data, where scope should be used', async () => { + const { container } = render( + + + + + Last Name + + + First Name + + + City + + + + + + Phoenix + Imari + Henry + + + Zeki + Rome + Min + + + Apirka + Kelly + Brynn + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + }) + + describe('Tables with two headers', () => { + it.todo( + 'should have no violations on a table with header cells in the top row and first column' + ) + + it.todo( + 'should have no violations on a table with an offset column of header cells' + ) + }) + + describe('Tables with irregular headers', () => { + it.todo('should have no violations on a table with two tier headers') + it.todo( + 'should have no violations on a table with headers spanning multiple rows or columns' + ) + }) + + describe('Tables with multi-level headers', () => { + it.todo( + 'should have no violations on a table with multiple column headers in each column' + ) + }) +}) From edff9266baef1c0e760e76f4c2bf719d03867ae9 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 10:33:51 -0300 Subject: [PATCH 04/22] Add missing default values for 'testId' prop to Table components --- packages/store-ui/src/molecules/Table/TableBody.tsx | 2 +- packages/store-ui/src/molecules/Table/TableCell.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/TableBody.tsx b/packages/store-ui/src/molecules/Table/TableBody.tsx index 0b0b933a8e..9b962c09b0 100644 --- a/packages/store-ui/src/molecules/Table/TableBody.tsx +++ b/packages/store-ui/src/molecules/Table/TableBody.tsx @@ -8,7 +8,7 @@ export interface TableBodyProps } const TableBody = forwardRef( - function TableBody({ children, testId, ...rest }, ref) { + function TableBody({ children, testId = 'store-table-body', ...rest }, ref) { return ( {children} diff --git a/packages/store-ui/src/molecules/Table/TableCell.tsx b/packages/store-ui/src/molecules/Table/TableCell.tsx index 1d8160c4f6..c1beebdbf2 100644 --- a/packages/store-ui/src/molecules/Table/TableCell.tsx +++ b/packages/store-ui/src/molecules/Table/TableCell.tsx @@ -12,7 +12,7 @@ export interface TableCellProps extends HTMLAttributes { const TableCell = forwardRef( function TableCell( - { testId, children, variant = 'data', scope, ...rest }, + { testId = 'store-table-cell', children, variant = 'data', scope, ...rest }, ref ) { const Cell = variant === 'header' ? 'th' : 'td' From fe5a339fc9e64ade0ee886910a7f4f8a270069c5 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 10:34:24 -0300 Subject: [PATCH 05/22] Implement unit tests for Table component --- .../src/molecules/Table/Table.test.tsx | 142 +++++++++++++++--- 1 file changed, 122 insertions(+), 20 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/Table.test.tsx b/packages/store-ui/src/molecules/Table/Table.test.tsx index 0c57b1236f..6743e3d242 100644 --- a/packages/store-ui/src/molecules/Table/Table.test.tsx +++ b/packages/store-ui/src/molecules/Table/Table.test.tsx @@ -3,11 +3,83 @@ import { render } from '@testing-library/react' import { axe } from 'jest-axe' import Table from './Table' -// import TableFooter from '../TableFooter' import TableHead from './TableHead' import TableRow from './TableRow' import TableBody from './TableBody' import TableCell from './TableCell' +import TableFooter from './TableFooter' + +describe('Data attributes', () => { + it('should render a simple table with all expected data-attributes', () => { + const { getByTestId, queryAllByTestId } = render( + + + + Name + Age + + + + + John + 25 + + + Carter + 25 + + + + + Name + Age + + +
+ ) + + const table = getByTestId('store-table') + + expect(table).toHaveAttribute('data-store-table') + + const tableHead = getByTestId('store-table-head') + + expect(tableHead).toHaveAttribute('data-store-table-head') + + const tableBody = getByTestId('store-table-body') + + expect(tableBody).toHaveAttribute('data-store-table-body') + + const tableFooter = getByTestId('store-table-footer') + + expect(tableFooter).toHaveAttribute('data-store-table-footer') + + const tableRows = queryAllByTestId('store-table-row') + + expect(tableRows).toHaveLength(4) + tableRows.forEach((row) => { + expect(row).toHaveAttribute('data-store-table-row') + }) + + const tableCells = queryAllByTestId('store-table-cell') + + // Make sure 8 cells were rendered and all contain the + // data-store-table-cell attribute. + expect(tableCells).toHaveLength(8) + tableCells.forEach((row) => { + expect(row).toHaveAttribute('data-store-table-cell') + }) + + // Make sure that 2 header cells and 6 data cells were rendered, with their + // corresponding attributes. + expect( + table.querySelectorAll('[data-store-table-cell=header]') + ).toHaveLength(2) + expect(table.querySelectorAll('[data-store-table-cell=data]')).toHaveLength( + 6 + ) + }) +}) // WAI-ARIA tests // https://www.w3.org/WAI/tutorials/tables/ @@ -109,25 +181,55 @@ describe('Table WAI-ARIA Specifications', () => { }) describe('Tables with two headers', () => { - it.todo( - 'should have no violations on a table with header cells in the top row and first column' - ) - - it.todo( - 'should have no violations on a table with an offset column of header cells' - ) - }) - - describe('Tables with irregular headers', () => { - it.todo('should have no violations on a table with two tier headers') - it.todo( - 'should have no violations on a table with headers spanning multiple rows or columns' - ) - }) + it('should have no violations on a table with header cells in the top row and first column', async () => { + const { container } = render( + + + + + + Monday + + + Tuesday + + + Wednesday + + + Thursday + + + Friday + + + + + + + 09:00 - 11:00 + + Closed + Open + Open + Closed + Closed + + + + 11:00 - 13:00 + + Open + Open + Closed + Closed + Closed + + +
+ ) - describe('Tables with multi-level headers', () => { - it.todo( - 'should have no violations on a table with multiple column headers in each column' - ) + expect(await axe(container)).toHaveNoViolations() + }) }) }) From 2cae7e7d47d4260cd6c17aa3ac7fa0c05d830ace Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 12:07:45 -0300 Subject: [PATCH 06/22] Add CSS for Table molecule --- .../src/molecules/index.css | 3 ++- .../src/molecules/table.css | 23 +++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 themes/theme-b2c-tailwind/src/molecules/table.css diff --git a/themes/theme-b2c-tailwind/src/molecules/index.css b/themes/theme-b2c-tailwind/src/molecules/index.css index 71333119a1..0ad04b428e 100644 --- a/themes/theme-b2c-tailwind/src/molecules/index.css +++ b/themes/theme-b2c-tailwind/src/molecules/index.css @@ -4,4 +4,5 @@ @import './price-range.css'; @import "./carousel.css"; @import "./modal.css"; -@import "./accordion.css"; \ No newline at end of file +@import "./accordion.css"; +@import "./table.css"; diff --git a/themes/theme-b2c-tailwind/src/molecules/table.css b/themes/theme-b2c-tailwind/src/molecules/table.css new file mode 100644 index 0000000000..739aecdacd --- /dev/null +++ b/themes/theme-b2c-tailwind/src/molecules/table.css @@ -0,0 +1,23 @@ +[data-store-table]{ + @apply table-auto divide-y divide-gray-200; +} + +[data-store-table-head]{ + @apply bg-gray-50; +} + +[data-store-table-body] { + @apply bg-white divide-y divide-gray-200; +} + +[data-store-table-cell="header"]{ + @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; +} + +[data-store-table-cell="data"]{ + @apply px-6 py-4; +} + +[data-store-table-cell] > [data-store-price][data-selling] { + @apply text-sm font-medium text-gray-900; +} From 2b4750d22b740a197f93b49ea3a8c3cac4b178f0 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 12:08:22 -0300 Subject: [PATCH 07/22] Add simple Table story --- .../molecules/Table/stories/Table.stories.tsx | 104 ++++++++++++------ 1 file changed, 70 insertions(+), 34 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx index 56d00c2e3b..05569d2846 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx +++ b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx @@ -1,53 +1,89 @@ import type { Story } from '@storybook/react' import React from 'react' -// import type { ComponentArgTypes } from '../../../typings/utils' import type { TableProps } from '../Table' import TableComponent from '../Table' -// import TableFooter from '../TableFooter' import TableHead from '../TableHead' import TableRow from '../TableRow' import TableBody from '../TableBody' import TableCell from '../TableCell' +import Price from '../../../atoms/Price' import mdx from './Table.mdx' -const TableTemplate: Story = () => ( - - - - - Name - - - Age - - - - - - John - 25 - - - Carter - 25 - - - -) +function priceFormatter(price: number) { + const formattedPrice = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + }).format(price) -export const Table = TableTemplate.bind({}) + return formattedPrice +} -// const argTypes: ComponentArgTypes = { -// children: { -// control: { type: 'text' }, -// defaultValue: 'Button', -// }, -// } +const options = [ + { + numberOfInstallments: 1, + monthlyPayment: 200, + total: 200, + }, + { + numberOfInstallments: 2, + monthlyPayment: 100, + total: 200, + }, + { + numberOfInstallments: 3, + monthlyPayment: 68, + total: 204, + }, + { + numberOfInstallments: 4, + monthlyPayment: 52, + total: 208, + }, + { + numberOfInstallments: 5, + monthlyPayment: 43, + total: 215, + }, +] + +const TableTemplate: Story = () => { + return ( + + + + + Installments + + + Amount + + + Total + + + + + {options.map((option) => ( + + {option.numberOfInstallments}x + + + + + + + + ))} + + + ) +} + +export const Table = TableTemplate.bind({}) export default { title: 'Molecules/Table', - // argTypes, parameters: { docs: { page: mdx, From 49b49929a93f88d2a051e44a24e65bc9e5d9ece8 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 15:31:22 -0300 Subject: [PATCH 08/22] Update Table docs for Storybook --- .../src/molecules/Table/stories/Table.mdx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index be53f5314f..1a19225ca0 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -1,5 +1,6 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs' import Table from '../Table' +import TableCell from '../TableCell' # Table @@ -7,13 +8,49 @@ import Table from '../Table' +## Child components + +- `TableBody`, renders a `` tag. +- `TableHead`, renders a `` tag. +- `TableRow`, renders a `` tag. +- `TableFooter`, renders a `` tag. +- `TableCell`, can render a `` or `` tag, according to a `variation` prop that supports values `"header"` and `"data"`. + ## Props +All table-related components support all attributes also supported by their respective HTML tags. + +Besides those attributes, the following props are also supported: + +### `Table`, `TableBody`, `TableHead`, `TableRow`, `TableFooter` components + +### `TableCell` component + + + ## CSS Selectors ```css [data-store-table] { } + +[data-store-table-head] { +} + +[data-store-table-row] { +} + +[data-store-table-footer] { +} + +[data-store-table-body] { +} + +[data-store-table-cell='head'] { +} + +[data-store-table-cell='data'] { +} ``` From 58c6ae19c9b283fda5817b1c2a5ce67bf1ccba0f Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 17:59:04 -0300 Subject: [PATCH 09/22] Fix typo on Table.mdx --- packages/store-ui/src/molecules/Table/stories/Table.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index 1a19225ca0..417eb263cc 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -1,4 +1,5 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs' + import Table from '../Table' import TableCell from '../TableCell' @@ -14,7 +15,7 @@ import TableCell from '../TableCell' - `TableHead`, renders a `` tag. - `TableRow`, renders a `` tag. - `TableFooter`, renders a `` tag. -- `TableCell`, can render a `` or `` tag, according to a `variation` prop that supports values `"header"` and `"data"`. +- `TableCell`, can render a `` or `` tag, according to a `variant` prop that supports values `"header"` and `"data"`. ## Props From 148ab9ad8e7992bf6acada24374356ab72058084 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Wed, 13 Oct 2021 17:59:23 -0300 Subject: [PATCH 10/22] Remove unnecessary `return` from Table story --- .../molecules/Table/stories/Table.stories.tsx | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx index 05569d2846..d4beab7b3f 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx +++ b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx @@ -47,38 +47,36 @@ const options = [ }, ] -const TableTemplate: Story = () => { - return ( - - - - - Installments +const TableTemplate: Story = () => ( + + + + + Installments + + + Amount + + + Total + + + + + {options.map((option) => ( + + {option.numberOfInstallments}x + + - - Amount - - - Total + + - - - {options.map((option) => ( - - {option.numberOfInstallments}x - - - - - - - - ))} - - - ) -} + ))} + + +) export const Table = TableTemplate.bind({}) From f1bce00c0e223ed703d22de971475fc87fda7bb6 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Thu, 14 Oct 2021 09:41:33 -0300 Subject: [PATCH 11/22] Fix CSS selectors section on Table.mdx --- .../src/molecules/Table/stories/Table.mdx | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index 417eb263cc..5beaa76eaf 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -34,24 +34,17 @@ Besides those attributes, the following props are also supported: ## CSS Selectors ```css -[data-store-table] { -} +[data-store-table] {} -[data-store-table-head] { -} +[data-store-table-head] {} -[data-store-table-row] { -} +[data-store-table-row] {} -[data-store-table-footer] { -} +[data-store-table-footer] {} -[data-store-table-body] { -} +[data-store-table-body] {} -[data-store-table-cell='head'] { -} +[data-store-table-cell='head'] {} -[data-store-table-cell='data'] { -} +[data-store-table-cell='data'] {} ``` From 9c1eb70187529a15efe83fd53060bd6245b56165 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Fri, 15 Oct 2021 13:45:28 -0300 Subject: [PATCH 12/22] Add extra `describe` to improve test readability --- .../src/molecules/Table/Table.test.tsx | 388 +++++++++--------- 1 file changed, 195 insertions(+), 193 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/Table.test.tsx b/packages/store-ui/src/molecules/Table/Table.test.tsx index 6743e3d242..f02adea1a7 100644 --- a/packages/store-ui/src/molecules/Table/Table.test.tsx +++ b/packages/store-ui/src/molecules/Table/Table.test.tsx @@ -9,84 +9,10 @@ import TableBody from './TableBody' import TableCell from './TableCell' import TableFooter from './TableFooter' -describe('Data attributes', () => { - it('should render a simple table with all expected data-attributes', () => { - const { getByTestId, queryAllByTestId } = render( - - - - Name - Age - - - - - John - 25 - - - Carter - 25 - - - - - Name - Age - - -
- ) - - const table = getByTestId('store-table') - - expect(table).toHaveAttribute('data-store-table') - - const tableHead = getByTestId('store-table-head') - - expect(tableHead).toHaveAttribute('data-store-table-head') - - const tableBody = getByTestId('store-table-body') - - expect(tableBody).toHaveAttribute('data-store-table-body') - - const tableFooter = getByTestId('store-table-footer') - - expect(tableFooter).toHaveAttribute('data-store-table-footer') - - const tableRows = queryAllByTestId('store-table-row') - - expect(tableRows).toHaveLength(4) - tableRows.forEach((row) => { - expect(row).toHaveAttribute('data-store-table-row') - }) - - const tableCells = queryAllByTestId('store-table-cell') - - // Make sure 8 cells were rendered and all contain the - // data-store-table-cell attribute. - expect(tableCells).toHaveLength(8) - tableCells.forEach((row) => { - expect(row).toHaveAttribute('data-store-table-cell') - }) - - // Make sure that 2 header cells and 6 data cells were rendered, with their - // corresponding attributes. - expect( - table.querySelectorAll('[data-store-table-cell=header]') - ).toHaveLength(2) - expect(table.querySelectorAll('[data-store-table-cell=data]')).toHaveLength( - 6 - ) - }) -}) - -// WAI-ARIA tests -// https://www.w3.org/WAI/tutorials/tables/ -describe('Table WAI-ARIA Specifications', () => { - describe('Tables with one header', () => { - it('should have no violations on a table with header cells in the top row only', async () => { - const { container } = render( +describe('Table', () => { + describe('Data attributes', () => { + it('should render a simple table with all expected data-attributes', () => { + const { getByTestId, queryAllByTestId } = render( @@ -104,132 +30,208 @@ describe('Table WAI-ARIA Specifications', () => { 25 -
- ) - - expect(await axe(container)).toHaveNoViolations() - }) - - it('should have no violations on a table with header cells in the first column only', async () => { - const { container } = render( - - + - Date - 12 February - 24 March - 14 April + Name + Age - - Event - Waltz with Strauss - The Obelisks - The What - - - Venue - Main Hall - West Wing - Main Hall - - +
) - expect(await axe(container)).toHaveNoViolations() - }) + const table = getByTestId('store-table') - // https://www.w3.org/WAI/WCAG21/Techniques/html/H63 - it('should have no violations on a table with ambiguous data, where scope should be used', async () => { - const { container } = render( - - - - - Last Name - - - First Name - - - City - - - - - - Phoenix - Imari - Henry - - - Zeki - Rome - Min - - - Apirka - Kelly - Brynn - - -
- ) + expect(table).toHaveAttribute('data-store-table') + + const tableHead = getByTestId('store-table-head') + + expect(tableHead).toHaveAttribute('data-store-table-head') + + const tableBody = getByTestId('store-table-body') + + expect(tableBody).toHaveAttribute('data-store-table-body') + + const tableFooter = getByTestId('store-table-footer') + + expect(tableFooter).toHaveAttribute('data-store-table-footer') + + const tableRows = queryAllByTestId('store-table-row') + + expect(tableRows).toHaveLength(4) + tableRows.forEach((row) => { + expect(row).toHaveAttribute('data-store-table-row') + }) + + const tableCells = queryAllByTestId('store-table-cell') - expect(await axe(container)).toHaveNoViolations() + // Make sure 8 cells were rendered and all contain the + // data-store-table-cell attribute. + expect(tableCells).toHaveLength(8) + tableCells.forEach((row) => { + expect(row).toHaveAttribute('data-store-table-cell') + }) + + // Make sure that 2 header cells and 6 data cells were rendered, with their + // corresponding attributes. + expect( + table.querySelectorAll('[data-store-table-cell=header]') + ).toHaveLength(2) + expect( + table.querySelectorAll('[data-store-table-cell=data]') + ).toHaveLength(6) }) }) - describe('Tables with two headers', () => { - it('should have no violations on a table with header cells in the top row and first column', async () => { - const { container } = render( - - - - - - Monday - - - Tuesday - - - Wednesday - - - Thursday - - - Friday - - - - - - - 09:00 - 11:00 - - Closed - Open - Open - Closed - Closed - - - - 11:00 - 13:00 - - Open - Open - Closed - Closed - Closed - - -
- ) + // WAI-ARIA tests + // https://www.w3.org/WAI/tutorials/tables/ + describe('Table WAI-ARIA Specifications', () => { + describe('Tables with one header', () => { + it('should have no violations on a table with header cells in the top row only', async () => { + const { container } = render( + + + + Name + Age + + + + + John + 25 + + + Carter + 25 + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + + it('should have no violations on a table with header cells in the first column only', async () => { + const { container } = render( + + + + Date + 12 February + 24 March + 14 April + + + Event + Waltz with Strauss + The Obelisks + The What + + + Venue + Main Hall + West Wing + Main Hall + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + + // https://www.w3.org/WAI/WCAG21/Techniques/html/H63 + it('should have no violations on a table with ambiguous data, where scope should be used', async () => { + const { container } = render( + + + + + Last Name + + + First Name + + + City + + + + + + Phoenix + Imari + Henry + + + Zeki + Rome + Min + + + Apirka + Kelly + Brynn + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) + }) - expect(await axe(container)).toHaveNoViolations() + describe('Tables with two headers', () => { + it('should have no violations on a table with header cells in the top row and first column', async () => { + const { container } = render( + + + + + + Monday + + + Tuesday + + + Wednesday + + + Thursday + + + Friday + + + + + + + 09:00 - 11:00 + + Closed + Open + Open + Closed + Closed + + + + 11:00 - 13:00 + + Open + Open + Closed + Closed + Closed + + +
+ ) + + expect(await axe(container)).toHaveNoViolations() + }) }) }) }) From 8c7d08c8789d3fd977bd8d9d8b03919ae48c196a Mon Sep 17 00:00:00 2001 From: victorhmp Date: Fri, 15 Oct 2021 13:49:58 -0300 Subject: [PATCH 13/22] Add missing prop descriptions to Table components --- packages/store-ui/src/molecules/Table/Table.tsx | 3 +++ packages/store-ui/src/molecules/Table/TableBody.tsx | 3 +++ packages/store-ui/src/molecules/Table/TableCell.tsx | 8 +++++++- packages/store-ui/src/molecules/Table/TableFooter.tsx | 3 +++ packages/store-ui/src/molecules/Table/TableHead.tsx | 3 +++ packages/store-ui/src/molecules/Table/TableRow.tsx | 3 +++ 6 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/molecules/Table/Table.tsx b/packages/store-ui/src/molecules/Table/Table.tsx index 13e09e6e62..158046254c 100644 --- a/packages/store-ui/src/molecules/Table/Table.tsx +++ b/packages/store-ui/src/molecules/Table/Table.tsx @@ -2,6 +2,9 @@ import type { HTMLAttributes } from 'react' import React, { forwardRef } from 'react' export interface TableProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string children: React.ReactNode } diff --git a/packages/store-ui/src/molecules/Table/TableBody.tsx b/packages/store-ui/src/molecules/Table/TableBody.tsx index 9b962c09b0..563b7b742e 100644 --- a/packages/store-ui/src/molecules/Table/TableBody.tsx +++ b/packages/store-ui/src/molecules/Table/TableBody.tsx @@ -3,6 +3,9 @@ import React, { forwardRef } from 'react' export interface TableBodyProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string children: React.ReactNode } diff --git a/packages/store-ui/src/molecules/Table/TableCell.tsx b/packages/store-ui/src/molecules/Table/TableCell.tsx index c1beebdbf2..0c40c11a00 100644 --- a/packages/store-ui/src/molecules/Table/TableCell.tsx +++ b/packages/store-ui/src/molecules/Table/TableCell.tsx @@ -4,9 +4,15 @@ import React, { forwardRef } from 'react' type TableCellVariant = 'data' | 'header' export interface TableCellProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string variant?: TableCellVariant - // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope + /** + * Defines the cells that the header element (``) relates to. + * @see scope https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope + */ scope?: 'col' | 'row' | 'rowgroup' | 'colgroup' } diff --git a/packages/store-ui/src/molecules/Table/TableFooter.tsx b/packages/store-ui/src/molecules/Table/TableFooter.tsx index 702eb192c6..923dc7db20 100644 --- a/packages/store-ui/src/molecules/Table/TableFooter.tsx +++ b/packages/store-ui/src/molecules/Table/TableFooter.tsx @@ -3,6 +3,9 @@ import React, { forwardRef } from 'react' export interface TableFooterProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string children: React.ReactNode } diff --git a/packages/store-ui/src/molecules/Table/TableHead.tsx b/packages/store-ui/src/molecules/Table/TableHead.tsx index 783762ebbd..739bd6dc11 100644 --- a/packages/store-ui/src/molecules/Table/TableHead.tsx +++ b/packages/store-ui/src/molecules/Table/TableHead.tsx @@ -3,6 +3,9 @@ import React, { forwardRef } from 'react' export interface TableHeadProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string children: React.ReactNode } diff --git a/packages/store-ui/src/molecules/Table/TableRow.tsx b/packages/store-ui/src/molecules/Table/TableRow.tsx index c054e5043b..9c63fd785a 100644 --- a/packages/store-ui/src/molecules/Table/TableRow.tsx +++ b/packages/store-ui/src/molecules/Table/TableRow.tsx @@ -2,6 +2,9 @@ import type { HTMLAttributes } from 'react' import React, { forwardRef } from 'react' export interface TableRowProps extends HTMLAttributes { + /** + * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). + */ testId?: string children: React.ReactNode } From f26d74341f208c187c71267022ca320b4bdf562e Mon Sep 17 00:00:00 2001 From: victorhmp Date: Fri, 15 Oct 2021 13:51:34 -0300 Subject: [PATCH 14/22] Update Table.mdx --- packages/store-ui/src/molecules/Table/stories/Table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index 5beaa76eaf..d2f584b1b9 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -23,7 +23,7 @@ All table-related components support all attributes also supported by their resp Besides those attributes, the following props are also supported: -### `Table`, `TableBody`, `TableHead`, `TableRow`, `TableFooter` components +### `Table`, `TableBody`, `TableHead`, `TableRow` and `TableFooter` components From 9a9e5565158a1d759032f2573df4484e65829e8f Mon Sep 17 00:00:00 2001 From: victorhmp Date: Fri, 15 Oct 2021 16:46:05 -0300 Subject: [PATCH 15/22] Update Table.mdx --- packages/store-ui/src/molecules/Table/stories/Table.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index d2f584b1b9..3de20b1918 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -9,8 +9,9 @@ import TableCell from '../TableCell' -## Child components +## Components +- `Table`, renders a `` tag. - `TableBody`, renders a `` tag. - `TableHead`, renders a `` tag. - `TableRow`, renders a `` tag. From 10f1a9446d84a33207f39cec7ea19efb607feafa Mon Sep 17 00:00:00 2001 From: victorhmp Date: Fri, 15 Oct 2021 16:46:26 -0300 Subject: [PATCH 16/22] Add TableFooter to Table story example --- .../src/molecules/Table/stories/Table.stories.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx index d4beab7b3f..b2b52fb4c1 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx +++ b/packages/store-ui/src/molecules/Table/stories/Table.stories.tsx @@ -7,6 +7,7 @@ import TableHead from '../TableHead' import TableRow from '../TableRow' import TableBody from '../TableBody' import TableCell from '../TableCell' +import TableFooter from '../TableFooter' import Price from '../../../atoms/Price' import mdx from './Table.mdx' @@ -75,6 +76,13 @@ const TableTemplate: Story = () => ( ))} + + + Installments + Amount + Total + + ) From 7742c729b26037a65f2f33e7c148ef902b774a50 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 09:15:31 -0300 Subject: [PATCH 17/22] Export Table components from store-ui's index --- packages/store-ui/src/index.ts | 17 +++++++++++++++++ packages/store-ui/src/molecules/Table/index.ts | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index b7214dfc39..ac0e337795 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -72,6 +72,23 @@ export type { AccordionButtonProps } from './molecules/Accordion' export { AccordionPanel } from './molecules/Accordion' export type { AccordionPanelProps } from './molecules/Accordion' +export { + Table, + TableBody, + TableCell, + TableFooter, + TableHead, + TableRow, +} from './molecules/Table' +export type { + TableProps, + TableBodyProps, + TableCellProps, + TableFooterProps, + TableHeadProps, + TableRowProps, +} from './molecules/Table' + // Hooks export { default as useSlider } from './hooks/useSlider' export type { diff --git a/packages/store-ui/src/molecules/Table/index.ts b/packages/store-ui/src/molecules/Table/index.ts index 2f53f01ac2..aeed79e8af 100644 --- a/packages/store-ui/src/molecules/Table/index.ts +++ b/packages/store-ui/src/molecules/Table/index.ts @@ -13,5 +13,5 @@ export type { TableBodyProps } from './TableBody' export { default as TableHead } from './TableHead' export type { TableHeadProps } from './TableHead' -export { default as TableFoot } from './TableFooter' +export { default as TableFooter } from './TableFooter' export type { TableFooterProps } from './TableFooter' From bece55897950cdd623d011adc43bd4bea5cae5e8 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 09:20:02 -0300 Subject: [PATCH 18/22] Add missing props description to TableCell component --- packages/store-ui/src/molecules/Table/TableCell.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/store-ui/src/molecules/Table/TableCell.tsx b/packages/store-ui/src/molecules/Table/TableCell.tsx index 0c40c11a00..43d09f6e97 100644 --- a/packages/store-ui/src/molecules/Table/TableCell.tsx +++ b/packages/store-ui/src/molecules/Table/TableCell.tsx @@ -8,6 +8,9 @@ export interface TableCellProps extends HTMLAttributes { * ID to find this component in testing tools (e.g.: cypress, testing library, and jest). */ testId?: string + /** + * Specify if this component should be rendered as a header (` + {children} ) diff --git a/packages/store-ui/src/molecules/Table/TableCell.tsx b/packages/store-ui/src/molecules/Table/TableCell.tsx index 43d09f6e97..ba7a4b82d2 100644 --- a/packages/store-ui/src/molecules/Table/TableCell.tsx +++ b/packages/store-ui/src/molecules/Table/TableCell.tsx @@ -21,7 +21,13 @@ export interface TableCellProps extends HTMLAttributes { const TableCell = forwardRef( function TableCell( - { testId = 'store-table-cell', children, variant = 'data', scope, ...rest }, + { + testId = 'store-table-cell', + children, + variant = 'data', + scope, + ...otherProps + }, ref ) { const Cell = variant === 'header' ? 'th' : 'td' @@ -32,7 +38,7 @@ const TableCell = forwardRef( data-store-table-cell={variant} data-testid={testId} scope={scope} - {...rest} + {...otherProps} > {children} diff --git a/packages/store-ui/src/molecules/Table/TableFooter.tsx b/packages/store-ui/src/molecules/Table/TableFooter.tsx index 923dc7db20..310fef50a3 100644 --- a/packages/store-ui/src/molecules/Table/TableFooter.tsx +++ b/packages/store-ui/src/molecules/Table/TableFooter.tsx @@ -12,11 +12,16 @@ export interface TableFooterProps const TableFooter = forwardRef( function TableFooter( - { children, testId = 'store-table-footer', ...rest }, + { children, testId = 'store-table-footer', ...otherProps }, ref ) { return ( - + {children} ) diff --git a/packages/store-ui/src/molecules/Table/TableHead.tsx b/packages/store-ui/src/molecules/Table/TableHead.tsx index 739bd6dc11..ba7de08ed2 100644 --- a/packages/store-ui/src/molecules/Table/TableHead.tsx +++ b/packages/store-ui/src/molecules/Table/TableHead.tsx @@ -11,9 +11,17 @@ export interface TableHeadProps } const TableHead = forwardRef( - function TableHead({ children, testId = 'store-table-head', ...rest }, ref) { + function TableHead( + { children, testId = 'store-table-head', ...otherProps }, + ref + ) { return ( - + {children} ) diff --git a/packages/store-ui/src/molecules/Table/TableRow.tsx b/packages/store-ui/src/molecules/Table/TableRow.tsx index 9c63fd785a..b53b73ff94 100644 --- a/packages/store-ui/src/molecules/Table/TableRow.tsx +++ b/packages/store-ui/src/molecules/Table/TableRow.tsx @@ -10,9 +10,12 @@ export interface TableRowProps extends HTMLAttributes { } const TableRow = forwardRef( - function TableRow({ testId = 'store-table-row', children, ...rest }, ref) { + function TableRow( + { testId = 'store-table-row', children, ...otherProps }, + ref + ) { return ( - + {children} )
`) or as a data cell (``). + */ variant?: TableCellVariant /** * Defines the cells that the header element (``) relates to. From a8a2c61e9c8818d1eded3725b45d4d5a53cba579 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 09:23:56 -0300 Subject: [PATCH 19/22] Update exports from Accordion components --- packages/store-ui/src/index.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts index ac0e337795..d530aa434b 100644 --- a/packages/store-ui/src/index.ts +++ b/packages/store-ui/src/index.ts @@ -60,17 +60,18 @@ export type { IconButtonProps } from './molecules/IconButton' export { default as Modal } from './molecules/Modal' export type { ModalProps } from './molecules/Modal' -export { default as Accordion } from './molecules/Accordion' -export type { AccordionProps } from './molecules/Accordion' - -export { AccordionItem } from './molecules/Accordion' -export type { AccordionItemProps } from './molecules/Accordion' - -export { AccordionButton } from './molecules/Accordion' -export type { AccordionButtonProps } from './molecules/Accordion' - -export { AccordionPanel } from './molecules/Accordion' -export type { AccordionPanelProps } from './molecules/Accordion' +export { + default as Accordion, + AccordionItem, + AccordionButton, + AccordionPanel, +} from './molecules/Accordion' +export type { + AccordionProps, + AccordionItemProps, + AccordionButtonProps, + AccordionPanelProps, +} from './molecules/Accordion' export { Table, From bf7a1558c859f25fc145f588e9be7d9024c60e29 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 09:27:42 -0300 Subject: [PATCH 20/22] Add styles for TableFooter --- themes/theme-b2c-tailwind/src/molecules/table.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/themes/theme-b2c-tailwind/src/molecules/table.css b/themes/theme-b2c-tailwind/src/molecules/table.css index 739aecdacd..35072609d1 100644 --- a/themes/theme-b2c-tailwind/src/molecules/table.css +++ b/themes/theme-b2c-tailwind/src/molecules/table.css @@ -21,3 +21,11 @@ [data-store-table-cell] > [data-store-price][data-selling] { @apply text-sm font-medium text-gray-900; } + +[data-store-table-footer]{ + @apply bg-gray-50; +} + +[data-store-table-footer] [data-store-table-cell="data"]{ + @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; +} From 6a2620055733cb18c15c094f6f7dcbad5ad4534b Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 09:33:26 -0300 Subject: [PATCH 21/22] Update Table docs --- .../src/molecules/Table/stories/Table.mdx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/store-ui/src/molecules/Table/stories/Table.mdx b/packages/store-ui/src/molecules/Table/stories/Table.mdx index 3de20b1918..50ad62be14 100644 --- a/packages/store-ui/src/molecules/Table/stories/Table.mdx +++ b/packages/store-ui/src/molecules/Table/stories/Table.mdx @@ -1,7 +1,11 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs' import Table from '../Table' +import TableBody from '../TableBody' import TableCell from '../TableCell' +import TableHead from '../TableHead' +import TableRow from '../TableRow' +import TableFooter from '../TableFooter' # Table @@ -11,6 +15,8 @@ import TableCell from '../TableCell' ## Components +The `Table` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are: + - `Table`, renders a `` tag. - `TableBody`, renders a `` tag. - `TableHead`, renders a `` tag. @@ -24,10 +30,26 @@ All table-related components support all attributes also supported by their resp Besides those attributes, the following props are also supported: -### `Table`, `TableBody`, `TableHead`, `TableRow` and `TableFooter` components +### `Table` component +### `TableBody` component + + + +### `TableHead` component + + + +### `TableRow` component + + + +### `TableFooter` component + + + ### `TableCell` component From 35a85ac10a4ae86aa66e5cfc2770cab0729acc41 Mon Sep 17 00:00:00 2001 From: victorhmp Date: Mon, 18 Oct 2021 14:58:19 -0300 Subject: [PATCH 22/22] Change props spreading pattern from `...rest` to `...otherProps` on Table components --- packages/store-ui/src/molecules/Table/Table.tsx | 4 ++-- packages/store-ui/src/molecules/Table/TableBody.tsx | 12 ++++++++++-- packages/store-ui/src/molecules/Table/TableCell.tsx | 10 ++++++++-- .../store-ui/src/molecules/Table/TableFooter.tsx | 9 +++++++-- packages/store-ui/src/molecules/Table/TableHead.tsx | 12 ++++++++++-- packages/store-ui/src/molecules/Table/TableRow.tsx | 7 +++++-- 6 files changed, 42 insertions(+), 12 deletions(-) diff --git a/packages/store-ui/src/molecules/Table/Table.tsx b/packages/store-ui/src/molecules/Table/Table.tsx index 158046254c..64aae04ecd 100644 --- a/packages/store-ui/src/molecules/Table/Table.tsx +++ b/packages/store-ui/src/molecules/Table/Table.tsx @@ -10,11 +10,11 @@ export interface TableProps extends HTMLAttributes { } const Table = forwardRef(function Table( - { testId = 'store-table', children, ...rest }, + { testId = 'store-table', children, ...otherProps }, ref ) { return ( -
+
{children}
) diff --git a/packages/store-ui/src/molecules/Table/TableBody.tsx b/packages/store-ui/src/molecules/Table/TableBody.tsx index 563b7b742e..40c6066495 100644 --- a/packages/store-ui/src/molecules/Table/TableBody.tsx +++ b/packages/store-ui/src/molecules/Table/TableBody.tsx @@ -11,9 +11,17 @@ export interface TableBodyProps } const TableBody = forwardRef( - function TableBody({ children, testId = 'store-table-body', ...rest }, ref) { + function TableBody( + { children, testId = 'store-table-body', ...otherProps }, + ref + ) { return ( -