va-table: add striped variation

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}
     >
       <va-table-row>
         {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);

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
          */

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 `<va-table
-  table-title="My table"
->
+function getTableMarkup(props = {}): string {
+  const defaultProps = {...props, 'table-title': 'My table'};
+  return `<va-table ${Object.entries(defaultProps)
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ')}>
   <va-table-row slot="headers">
     <span>
       Document title
@@ -62,23 +63,18 @@ function getTableMarkup(): string {
 </va-table>`;
 }
 
-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(`<va-table
-      table-title="My table"
-      stacked="false"
-    >
-      <va-table-row slot="headers">
-        <span>
-          Document title
-        </span>
-        <span>
-          Description
-        </span>
-        <span>
-          Year
-        </span>
-      </va-table-row>
-      <va-table-row>
-        <span>
-          Declaration of Independence
-        </span>
-        <span>
-          Statement adopted by the Continental Congress declaring independence from the British Empire
-        </span>
-        <span>
-          1776
-        </span>
-      </va-table-row>
-      <va-table-row>
-        <span>
-          Bill of Rights
-        </span>
-        <span>
-          The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms
-        </span>
-        <span>
-          1791
-        </span>
-      </va-table-row>
-      <va-table-row>
-        <span>
-          Declaration of Sentiments
-        </span>
-        <span>
-          A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.
-        </span>
-        <span>
-          1848
-        </span>
-      </va-table-row>
-      <va-table-row>
-        <span>
-          Emancipation Proclamation
-        </span>
-        <span>
-          An executive order granting freedom to slaves in designated southern states.
-        </span>
-        <span>
-          1863
-        </span>
-      </va-table-row>
-    </va-table>`);
+    await page.setContent(getTableMarkup({stacked: 'false'}));
     const element = await page.find('va-table-inner >>> table');
 
     expect(element).not.toHaveClass('usa-table--stacked');

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 `<va-table table-title="this is a caption">
+  function makeTable(props = {}) {
+    const defaultProps = {...props, 'table-title': 'this is a caption'};
+    return `<va-table ${Object.entries(defaultProps)
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(' ')}>
         <va-table-row>
         <span>One</span>
         <span>Two</span>
@@ -61,39 +64,15 @@ describe('va-table', () => {
 
   it('is scrollable when attribute is set to true', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-table scrollable="true" table-title="this is a caption">
-        <va-table-row>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-      </va-table-row>
-
-      <va-table-row>
-        <span>Dog</span>
-        <span>Cat</span>
-        <span>Mouse</span>
-      </va-table-row>
-    </va-table>`);
+    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');
   });
 
   it('is not stacked by when attribute is set to false', async () => {
     const page = await newE2EPage();
-    await page.setContent(`<va-table stacked="false" table-title="this is a caption">
-        <va-table-row>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-      </va-table-row>
-
-      <va-table-row>
-        <span>Dog</span>
-        <span>Cat</span>
-        <span>Mouse</span>
-      </va-table-row>
-    </va-table>`);
+    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 ', () => {

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 (
       <div

packages/web-components/src/components/va-table/va-table.tsx

@@ -49,6 +49,11 @@ export class VaTable {
    */
   @Prop() sortable: boolean = false;
 
+  /**
+   * When active, the table will display alternating row background colors.
+   */
+  @Prop() striped: boolean = false;
+
   // The number of va-table-rows
   @State() rows: number;
 
@@ -133,6 +138,7 @@ export class VaTable {
     );
     vaTable.setAttribute('sortable', `${this.sortable}`);
     vaTable.setAttribute('scrollable', this.scrollable ? 'true' : 'false');
+    vaTable.setAttribute('striped', this.striped ? 'true' : 'false');
     // we rebuild the inner table after a sort
     if (this.sortable && sortdir && sortindex) {
       vaTable.dataset.sortdir = sortdir;