Table update

src/components/Table/table-utils.tsx

@@ -15,9 +15,9 @@ export const buildColumnHeaders = (
         if (typeof column === 'object') {
           content = column.header;
 
-          if (column.alignRight) cnames.push('o-table_cell--right-align');
+          if (column.isAlignRight) cnames.push('o-table__cell--right-align');
           if (column.width) cnames.push(`u-w${column.width}pct`);
-          if (!column.headerWordWrap) cnames.push('white-space-nowrap');
+          if (!column.isHeaderWordWrap) cnames.push('white-space-nowrap');
         } else {
           content = column;
         }
@@ -42,9 +42,9 @@ const getCellProperties = (column: TableColumn): object => {
   }
 
   const cellCnames = [''];
-  if (column.alignRight) cellCnames.push('o-table_cell--right-align');
-  if (column.cellDisableWordWrap) cellCnames.push('white-space-nowrap');
-  if (!column.cellDisableWordWrap && column.cellWordBreak)
+  if (column.isAlignRight) cellCnames.push('o-table__cell--right-align');
+  if (column.isCellDisableWordWrap) cellCnames.push('white-space-nowrap');
+  if (!column.isCellDisableWordWrap && column.isCellWordBreak)
     cellCnames.push('word-break-break-all');
 
   return {

src/components/Table/table.stories.tsx

@@ -6,6 +6,17 @@ const meta: Meta<typeof Table> = {
   title: 'Components (Verified)/Tables',
   tags: ['autodocs'],
   component: Table,
+  argTypes: {
+    columns: {
+      description:
+        'Accepts strings or column config objects: { header, isAlignRight, width, isCellWordBreak, isCellDisableWordWrap, isHeaderWordWrap }.',
+      table: {
+        type: {
+          summary: 'Array<string | TableColumnConfiguration>',
+        },
+      },
+    },
+  },
 };
 
 export default meta;
@@ -103,7 +114,7 @@ export const RightAligned: Story = {
     columns: [
       { header: 'Col 1' },
       'Col 2',
-      { header: 'Right-aligned column', alignRight: true },
+      { header: 'Right-aligned column', isAlignRight: true },
     ],
     rows: [
       ['Row A', 'Cell A2', '$1.00'],
@@ -159,12 +170,55 @@ export const LongCharacterSets: Story = {
   name: 'Long Character Sets ',
   args: {
     columns: [
-      { header: 'Column 1', cellDisableWordWrap: true, headerWordWrap: false },
-      { header: 'Column 2', cellWordBreak: true },
-      { header: 'Column 3', cellWordBreak: true },
-      { header: 'Column 4', cellWordBreak: true },
+      {
+        header: 'Column 1',
+        isCellDisableWordWrap: true,
+        isHeaderWordWrap: false,
+      },
+      { header: 'Column 2', isCellWordBreak: true },
+      { header: 'Column 3', isCellWordBreak: true },
+      { header: 'Column 4', isCellWordBreak: true },
     ],
     rows: maxUidTestRows,
     isScrollableHorizontal: false,
   },
 };
+
+export const ColumnConfiguration: Story = {
+  name: 'Column configuration options',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns accept objects with: `header`, `isAlignRight`, `width` (percent as string), `isCellWordBreak`, `isCellDisableWordWrap`, `isHeaderWordWrap`.\n\n`width` maps to CFPB width utility classes (u-w{n}pct). \n\nValid values: 100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 75, 65, 25, 15, 66, 33.\n\nSee https://cfpb.github.io/design-system/development/helper-classes-and-mixins#width-utilities-helper-classes.',
+      },
+    },
+  },
+  args: {
+    columns: [
+      { header: 'Header (default)', width: '25' },
+      { header: 'Align right', isAlignRight: true, width: '25' },
+      { header: 'Word break', isCellWordBreak: true, width: '25' },
+      {
+        header: 'No wrap header',
+        isHeaderWordWrap: false,
+        isCellDisableWordWrap: true,
+        width: '25',
+      },
+    ],
+    rows: [
+      [
+        'Standard text',
+        '$12,345.67',
+        'SUPERLONGIDENTIFIERSTRINGWITHOUTSPACES',
+        'Long cell value should stay on one line',
+      ],
+      [
+        'Row 2',
+        '$0.99',
+        'ANOTHERLONGIDENTIFIERSTRINGWITHOUTSPACES',
+        'Another long cell value without wrapping',
+      ],
+    ],
+  },
+};

src/components/Table/table.test.tsx

@@ -26,7 +26,7 @@ const columnsWithConfiguration = [
   { header: 'Col 1', width: 30 },
   'Col 2',
   'Col 3',
-  { header: 'Right Aligned', width: 40, alignRight: true },
+  { header: 'Right Aligned', width: 40, isAlignRight: true },
 ];
 
 describe('<Table />', () => {
@@ -88,7 +88,7 @@ describe('<Table />', () => {
     );
 
     const cell = screen.queryByText('Right Aligned');
-    expect(cell?.classList.contains('o-table_cell--right-align')).toBe(true);
+    expect(cell?.classList.contains('o-table__cell--right-align')).toBe(true);
     expect(cell?.classList.contains('u-w40pct')).toBe(true);
   });
 

src/components/Table/table.tsx

@@ -23,11 +23,11 @@ const Caption = ({
 
 export interface TableColumnConfiguration {
   header: string; // Column heading
-  alignRight?: boolean | undefined; // Align content to the right?
+  isAlignRight?: boolean | undefined; // Align content to the right?
   width?: WidthPercent; // Fixed percentage of table width for column to consume
-  cellWordBreak?: boolean; // Allows the td (cells) to break upon limit space
-  cellDisableWordWrap?: boolean; // Overrides 'cellWordBreak' and explicitly forces wrapping to be disabled in the td (cell)
-  headerWordWrap?: boolean; // Allows wrapping in the th (header), by default -- header fields are set to no-wrap
+  isCellWordBreak?: boolean; // Allows the td (cells) to break upon limit space
+  isCellDisableWordWrap?: boolean; // Overrides 'cellWordBreak' and explicitly forces wrapping to be disabled in the td (cell)
+  isHeaderWordWrap?: boolean; // Allows wrapping in the th (header), by default -- header fields are set to no-wrap
 }
 
 export type TableColumn = TableColumnConfiguration | string;
@@ -127,7 +127,7 @@ export const Table = forwardRef<
       return (
         <div
           data-testid='table-simple-scrollable'
-          className='o-table o-table-wrapper--scrolling'
+          className='o-table o-table--scrolling'
           ref={reference ?? divRef}
         >
           {tableContent}