feat: Update Table to 2.10.0 implementation

src/components/Table/Table.stories.tsx

@@ -15,6 +15,25 @@ Source: https://designsystem.digital.gov/components/table/
       },
     },
   },
+  argTypes: {
+    bordered: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    striped: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    stackedStyle: {
+      control: {
+        type: 'select',
+        options: ['default', 'headers'],
+      },
+      defaultValue: 'default',
+    },
+  },
 }
 
 const testContent = (
@@ -63,8 +82,138 @@ const testContent = (
   </>
 )
 
+const scrollableTestContent = (
+  <>
+    <thead>
+      <tr>
+        <th rowSpan={2}>
+          Federal Budget <br /> Baseline Projections
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          2017
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          2018
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          2019
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          2020
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          2021
+        </th>
+        <th colSpan={2} scope="colgroup" className="text-center">
+          Hist. Avg.
+        </th>
+      </tr>
+      <tr>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+        <th scope="col" className="text-right">
+          %GDP
+        </th>
+        <th scope="col" className="text-right">
+          USD*
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">Revenue</th>
+        <td className="font-mono-sm text-tabular text-right">17.2%</td>
+        <td className="font-mono-sm text-tabular text-right">3,316</td>
+        <td className="font-mono-sm text-tabular text-right">16.4%</td>
+        <td className="font-mono-sm text-tabular text-right">3,338</td>
+        <td className="font-mono-sm text-tabular text-right">16.3%</td>
+        <td className="font-mono-sm text-tabular text-right">3,490</td>
+        <td className="font-mono-sm text-tabular text-right">16.7%</td>
+        <td className="font-mono-sm text-tabular text-right">3,678</td>
+        <td className="font-mono-sm text-tabular text-right">16.7%</td>
+        <td className="font-mono-sm text-tabular text-right">3,827</td>
+        <td className="font-mono-sm text-tabular text-right">17.4%</td>
+        <td className="font-mono-sm text-tabular text-right">3,381</td>
+      </tr>
+      <tr>
+        <th scope="row">Outlays</th>
+        <td className="font-mono-sm text-tabular text-right">20.6%</td>
+        <td className="font-mono-sm text-tabular text-right">3,982</td>
+        <td className="font-mono-sm text-tabular text-right">20.2%</td>
+        <td className="font-mono-sm text-tabular text-right">4,142</td>
+        <td className="font-mono-sm text-tabular text-right">21.0%</td>
+        <td className="font-mono-sm text-tabular text-right">4,470</td>
+        <td className="font-mono-sm text-tabular text-right">21.3%</td>
+        <td className="font-mono-sm text-tabular text-right">4,685</td>
+        <td className="font-mono-sm text-tabular text-right">21.6%</td>
+        <td className="font-mono-sm text-tabular text-right">4,949</td>
+        <td className="font-mono-sm text-tabular text-right">20.3%</td>
+        <td className="font-mono-sm text-tabular text-right">4,198</td>
+      </tr>
+      <tr>
+        <th scope="row">Budget Deficit</th>
+        <td className="font-mono-sm text-tabular text-right">-3.5%</td>
+        <td className="font-mono-sm text-tabular text-right">-665</td>
+        <td className="font-mono-sm text-tabular text-right">-3.8%</td>
+        <td className="font-mono-sm text-tabular text-right">-804</td>
+        <td className="font-mono-sm text-tabular text-right">-4.6%</td>
+        <td className="font-mono-sm text-tabular text-right">-981</td>
+        <td className="font-mono-sm text-tabular text-right">-4.6%</td>
+        <td className="font-mono-sm text-tabular text-right">-1,008</td>
+        <td className="font-mono-sm text-tabular text-right">-4.9%</td>
+        <td className="font-mono-sm text-tabular text-right">-1,123</td>
+        <td className="font-mono-sm text-tabular text-right">-2.9%</td>
+        <td className="font-mono-sm text-tabular text-right">-483</td>
+      </tr>
+      <tr>
+        <th scope="row">Debt Held by Public</th>
+        <td className="font-mono-sm text-tabular text-right">76.0%</td>
+        <td className="font-mono-sm text-tabular text-right">14,665</td>
+        <td className="font-mono-sm text-tabular text-right">77.4%</td>
+        <td className="font-mono-sm text-tabular text-right">15,688</td>
+        <td className="font-mono-sm text-tabular text-right">79.2%</td>
+        <td className="font-mono-sm text-tabular text-right">16,762</td>
+        <td className="font-mono-sm text-tabular text-right">80.9%</td>
+        <td className="font-mono-sm text-tabular text-right">17,872</td>
+        <td className="font-mono-sm text-tabular text-right">83.1%</td>
+        <td className="font-mono-sm text-tabular text-right">18,998</td>
+        <td className="font-mono-sm text-tabular text-right">41.7%</td>
+        <td className="font-mono-sm text-tabular text-right">8,065</td>
+      </tr>
+    </tbody>
+  </>
+)
+
 export const bordered = (): React.ReactElement => (
-  <Table bordered={true}>{testContent}</Table>
+  <Table bordered>{testContent}</Table>
 )
 
 export const borderless = (): React.ReactElement => (
@@ -84,9 +233,7 @@ export const borderlessWithCaption = (): React.ReactElement => (
 )
 
 export const contentWidth = (): React.ReactElement => (
-  <Table
-    bordered={true}
-    caption="This table demonstrates the default layout (width)">
+  <Table bordered caption="This table demonstrates the default layout (width)">
     <thead>
       <tr>
         <th scope="col">Document title</th>
@@ -116,9 +263,9 @@ export const contentWidth = (): React.ReactElement => (
 
 export const fullWidth = (): React.ReactElement => (
   <Table
-    bordered={true}
+    bordered
     caption="This table uses the fullWidth prop to increase to 100% width"
-    fullWidth={true}>
+    fullWidth>
     <thead>
       <tr>
         <th scope="col">Document title</th>
@@ -148,10 +295,10 @@ export const fullWidth = (): React.ReactElement => (
 
 export const fixed = (): React.ReactElement => (
   <Table
-    bordered={true}
+    bordered
     caption="This table uses the fixed prop to force equal width columns"
-    fullWidth={true}
-    fixed={true}>
+    fullWidth
+    fixed>
     <thead>
       <tr>
         <th scope="col">Document title</th>
@@ -178,3 +325,70 @@ export const fixed = (): React.ReactElement => (
     </tbody>
   </Table>
 )
+
+export const scrollable = (): React.ReactElement => (
+  <>
+    <Table scrollable bordered striped caption="This is a scrollable table">
+      {scrollableTestContent}
+    </Table>
+    <p>* in billions of dollars. Data for illustration purposes only.</p>
+  </>
+)
+
+export const striped = (argTypes): React.ReactElement => (
+  <Table striped bordered={argTypes.bordered} caption="This is a striped table">
+    {testContent}
+  </Table>
+)
+
+export const compact = (argTypes): React.ReactElement => (
+  <Table
+    compact
+    bordered={argTypes.bordered}
+    striped={argTypes.striped}
+    caption="This is a compact table">
+    {testContent}
+  </Table>
+)
+
+export const stackedStylesDemo = (argTypes): React.ReactElement => (
+  <Table
+    bordered={argTypes.bordered}
+    stackedStyle={argTypes.stackedStyle}
+    caption="This is a stacked table (when on a mobile-width screen)">
+    <thead>
+      <tr>
+        <th scope="col">Document title</th>
+        <th scope="col">Description</th>
+        <th scope="col">Year</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th data-label="Document title" scope="row">
+          Declaration of Independence
+        </th>
+        <td data-label="Description">
+          Statement adopted by the Continental Congress declaring independence
+          from the British Empire.
+        </td>
+        <td data-label="Year">1776</td>
+      </tr>
+      <tr>
+        <th data-label="Document title" scope="row">
+          Bill of Rights
+        </th>
+        <td data-label="Description">
+          The first ten amendments of the U.S. Constitution guaranteeing rights
+          and freedoms.
+        </td>
+        <td data-label="Year">1791</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+stackedStylesDemo.parameters = {
+  viewport: {
+    defaultViewport: 'iphone6',
+  },
+}

src/components/Table/Table.test.tsx

@@ -51,7 +51,50 @@ const testContent = (
 
 describe('Table component', () => {
   it('renders without errors', () => {
-    const { queryByTestId } = render(<Table>{testContent}</Table>)
-    expect(queryByTestId('table')).toBeInTheDocument()
+    const { getByRole } = render(<Table>{testContent}</Table>)
+
+    expect(getByRole('table')).toBeInTheDocument()
+  })
+
+  it('renders striped table', () => {
+    const { getByRole } = render(<Table striped>{testContent}</Table>)
+
+    expect(getByRole('table')).toHaveClass('usa-table usa-table--striped')
+  })
+
+  it('renders compact table', () => {
+    const { getByRole } = render(<Table compact>{testContent}</Table>)
+
+    expect(getByRole('table')).toHaveClass('usa-table usa-table--compact')
+  })
+
+  it('renders scrollable table', () => {
+    const { queryByTestId } = render(<Table scrollable>{testContent}</Table>)
+
+    expect(queryByTestId('scrollable-table-container')).toHaveClass(
+      'usa-table-container--scrollable'
+    )
+  })
+
+  it('renders borderless stacked table', () => {
+    const { getByRole } = render(
+      <Table stackedStyle="default">{testContent}</Table>
+    )
+
+    expect(getByRole('table')).toHaveClass(
+      'usa-table usa-table--borderless usa-table--stacked'
+    )
+  })
+
+  it('renders stacked table with border and headers', () => {
+    const { getByRole } = render(
+      <Table stackedStyle="headers" bordered>
+        {testContent}
+      </Table>
+    )
+
+    expect(getByRole('table')).toHaveClass(
+      'usa-table usa-table--stacked-header'
+    )
   })
 })

src/components/Table/Table.tsx

@@ -9,6 +9,10 @@ interface TableProps {
   children: React.ReactNode
   fullWidth?: boolean
   fixed?: boolean
+  scrollable?: boolean
+  striped?: boolean
+  compact?: boolean
+  stackedStyle?: 'none' | 'default' | 'headers'
 }
 
 export const Table = ({
@@ -17,19 +21,47 @@ export const Table = ({
   children,
   fullWidth,
   fixed,
+  scrollable,
+  striped,
+  compact,
+  stackedStyle = 'none',
 }: TableProps): React.ReactElement => {
   const classes = classnames('usa-table', {
     'usa-table--borderless': !bordered,
     [`${styles.fullwidth}`]: fullWidth,
     [`${styles.fixed}`]: fixed,
+    'usa-table--striped': striped,
+    'usa-table--compact': compact,
+    'usa-table--stacked': stackedStyle === 'default',
+    'usa-table--stacked-header': stackedStyle === 'headers',
   })
 
-  return (
+  if (compact && stackedStyle !== 'none') {
+    console.warn(
+      'USWDS states that compact styling is not suitable for use with stacked variants. See USWDS Table component, Table variants for more information: https://designsystem.digital.gov/components/table'
+    )
+  }
+
+  const table = (
     <table className={classes} data-testid="table">
       {caption && <caption>{caption}</caption>}
       {children}
     </table>
   )
+
+  return (
+    <>
+      {scrollable ? (
+        <div
+          data-testid="scrollable-table-container"
+          className="usa-table-container--scrollable">
+          {table}
+        </div>
+      ) : (
+        table
+      )}
+    </>
+  )
 }
 
 export default Table