diff --git a/packages/storybook/stories/va-table-uswds.stories.jsx b/packages/storybook/stories/va-table-uswds.stories.jsx index 6dd2b8698..8515666e5 100644 --- a/packages/storybook/stories/va-table-uswds.stories.jsx +++ b/packages/storybook/stories/va-table-uswds.stories.jsx @@ -47,6 +47,7 @@ const Template = args => { sortable, columns, scrollable, + striped, } = args; return ( @@ -56,6 +57,7 @@ const Template = args => { stacked={args.stacked} table-type={tableType} sortable={!!sortable} + striped={striped} > {columns.map((col, i) => ( @@ -406,6 +408,15 @@ Sortable.args = { 'scrollable': true, }; +export const Striped = Template.bind(null); +Striped.args = { + 'table-title': 'This is a striped table.', + 'rows': data, + 'columns': defaultColumns, + 'striped': true, + 'table-type': 'bordered', +}; + export const Scrollable = Template.bind(null); Scrollable.args = { 'table-title': 'This is a scrollable table.', @@ -414,4 +425,15 @@ Scrollable.args = { 'scrollable': true, 'stacked': false, }; + +export const ScrollableWithStripes = Template.bind(null); +ScrollableWithStripes.args = { + 'table-title': 'This is a striped table that is also scrollable.', + 'rows': data, + 'columns': defaultColumns, + 'striped': true, + 'table-type': 'bordered', + 'scrollable': true, +}; + Default.argTypes = propStructure(vaTableDocs); diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 213f73b1e..21d2d9295 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -1583,6 +1583,10 @@ export namespace Components { * Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted */ "stacked"?: boolean; + /** + * When active, the table will display alternating row background colors. + */ + "striped": boolean; /** * The title of the table */ @@ -1615,6 +1619,10 @@ export namespace Components { * If true convert to a stacked table when screen size is small */ "stacked"?: boolean; + /** + * When active, the table will display alternating row background colors. + */ + "striped": boolean; /** * The title of the table */ @@ -5012,6 +5020,10 @@ declare namespace LocalJSX { * Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted */ "stacked"?: boolean; + /** + * When active, the table will display alternating row background colors. + */ + "striped"?: boolean; /** * The title of the table */ @@ -5048,6 +5060,10 @@ declare namespace LocalJSX { * If true convert to a stacked table when screen size is small */ "stacked"?: boolean; + /** + * When active, the table will display alternating row background colors. + */ + "striped"?: boolean; /** * The title of the table */ diff --git a/packages/web-components/src/components/va-table/test/va-table.e2e.ts b/packages/web-components/src/components/va-table/test/va-table.e2e.ts index 8ffb29562..29d66a10c 100644 --- a/packages/web-components/src/components/va-table/test/va-table.e2e.ts +++ b/packages/web-components/src/components/va-table/test/va-table.e2e.ts @@ -1,9 +1,10 @@ import { newE2EPage } from '@stencil/core/testing'; -function getTableMarkup(): string { - return ` +function getTableMarkup(props = {}): string { + const defaultProps = {...props, 'table-title': 'My table'}; + return ` `${key}="${value}"`) + .join(' ')}> Document title @@ -62,23 +63,18 @@ function getTableMarkup(): string { `; } -describe('V1 table', () => { - - - it('renders a V1 va-table-inner with va-table-rows inside', async () => { +describe('renders header row', () => { + it('renders a va-table-inner with va-table-rows inside', async () => { const page = await newE2EPage(); await page.setContent(getTableMarkup()); const headerRow = await page.find('va-table-inner >>> va-table-row'); expect(headerRow).toBeDefined(); }); - }); - -describe('V3 table', () => { - - it('renders a V3 va-table-inner with an HTML table inside', async () => { +describe('renders table element', () => { + it('renders a va-table-inner with an HTML table inside', async () => { const page = await newE2EPage(); await page.setContent(getTableMarkup()); const element = await page.find('va-table-inner >>> table'); @@ -88,66 +84,7 @@ describe('V3 table', () => { it('is not stacked by when attribute is set to false', async () => { const page = await newE2EPage(); - await page.setContent(` - - - Document title - - - Description - - - Year - - - - - Declaration of Independence - - - Statement adopted by the Continental Congress declaring independence from the British Empire - - - 1776 - - - - - Bill of Rights - - - The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms - - - 1791 - - - - - Declaration of Sentiments - - - A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. - - - 1848 - - - - - Emancipation Proclamation - - - An executive order granting freedom to slaves in designated southern states. - - - 1863 - - - `); + await page.setContent(getTableMarkup({stacked: 'false'})); const element = await page.find('va-table-inner >>> table'); expect(element).not.toHaveClass('usa-table--stacked'); diff --git a/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts b/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts index 65cf42c86..8bb494a02 100644 --- a/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts +++ b/packages/web-components/src/components/va-table/va-table-inner/test/va-table-inner.e2e.ts @@ -6,8 +6,11 @@ import { dateSort } from '../../sort/date'; import { _getCompareFunc } from '../../sort/utils'; describe('va-table', () => { - function makeTable() { - return ` + function makeTable(props = {}) { + const defaultProps = {...props, 'table-title': 'this is a caption'}; + return ` `${key}="${value}"`) + .join(' ')}> One Two @@ -61,19 +64,7 @@ describe('va-table', () => { it('is scrollable when attribute is set to true', async () => { const page = await newE2EPage(); - await page.setContent(` - - One - Two - Three - - - - Dog - Cat - Mouse - - `); + await page.setContent(makeTable({scrollable: 'true'})); const table = await page.find('va-table-inner >>> div'); expect(table.getAttribute('tabindex')).toEqual('0'); expect(table).toHaveClass('usa-table-container--scrollable'); @@ -81,19 +72,7 @@ describe('va-table', () => { it('is not stacked by when attribute is set to false', async () => { const page = await newE2EPage(); - await page.setContent(` - - One - Two - Three - - - - Dog - Cat - Mouse - - `); + await page.setContent(makeTable({stacked: 'false'})); const table = await page.find('va-table-inner >>> table'); expect(table).not.toHaveClass('usa-table--stacked'); }); @@ -123,6 +102,20 @@ describe('va-table', () => { expect(columnHeader.getAttribute('scope')).toEqual('col'); expect(rowHeader.getAttribute('scope')).toEqual('row'); }); + + it('is not striped by default', async () => { + const page = await newE2EPage(); + await page.setContent(makeTable()); + const table = await page.find('va-table-inner >>> .usa-table'); + expect(table).not.toHaveClass('usa-table--striped'); + }); + + it('has the USWDS striped class when striped is true', async () => { + const page = await newE2EPage(); + await page.setContent(makeTable({striped: 'true'})); + const table = await page.find('va-table-inner >>> .usa-table'); + expect(table).toHaveClass('usa-table--striped'); + }); }); describe('sorted va-table ', () => { diff --git a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx index 105507d98..a808fe4cb 100644 --- a/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx +++ b/packages/web-components/src/components/va-table/va-table-inner/va-table-inner.tsx @@ -65,6 +65,11 @@ export class VaTableInner { */ @Prop() scrollable?: boolean = false; + /** + * When active, the table will display alternating row background colors. + */ + @Prop() striped: boolean = false; + /** * If sortable is true, the direction of next sort for the column that was just sorted */ @@ -325,11 +330,12 @@ export class VaTableInner { } render() { - const { tableTitle, tableType, stacked, scrollable } = this; + const { tableTitle, tableType, stacked, scrollable, striped } = this; const classes = classnames({ 'usa-table': true, 'usa-table--stacked': stacked, 'usa-table--borderless': tableType === 'borderless', + 'usa-table--striped': striped, }); return (