Merge pull request #236 from fedspendingtransparency/mod/12430

Mod/12430

Author: nick-torres

components/table/Table.jsx

@@ -36,7 +36,7 @@ const propTypes = {
     onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    subAward: PropTypes.bool,
+    highlightedColumns: PropTypes.object,
     atMaxLevel: PropTypes.bool
 };
 
@@ -58,7 +58,10 @@ const Table = ({
     onClickHandler,
     isMobile,
     stickyFirstColumn = false,
-    subAward,
+    highlightedColumns = {
+        standardColumns: 9,
+        highlightedColumns: 7
+    },
     atMaxLevel = false
 }) => {
     const stackedClass = isStacked ? `usa-dt-table__stacked` : '';
@@ -116,7 +119,7 @@ const Table = ({
                 onClickHandler={onClickHandler}
                 isMobile={isMobile}
                 stickyFirstColumn={stickyFirstColumn}
-                subAward={subAward}
+                highlightedColumns={highlightedColumns}
                 isStacked={isStacked}
                 atMaxLevel={atMaxLevel} />
         );
@@ -138,11 +141,11 @@ const Table = ({
                 {screenReaderCaption && (
                     <caption className="usa-dt-sr-only">{screenReaderCaption}</caption>
                 )}
-                {subAward
+                {highlightedColumns
                 && (
                     <colgroup>
-                        <col span={4} />
-                        <col span={4} className="usda-table__body-special-color" />
+                        <col span={highlightedColumns.standardColumns} />
+                        <col span={highlightedColumns.highlightedColumns} className="usda-table__body-special-color" />
                     </colgroup>
                 )}
                 <thead className="usda-table__head">
@@ -153,7 +156,7 @@ const Table = ({
                                 currentSort={currentSort}
                                 updateSort={updateSort}
                                 stickyFirstColumn={stickyFirstColumn}
-                                subAward={subAward}
+                                highlightedColumns={highlightedColumns}
                                 index={index}
                                 {...col} />
                         ))}

components/table/TableData.jsx

@@ -21,7 +21,7 @@ const propTypes = {
     isMobile: PropTypes.bool,
     atMaxLevel: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
-    subAward: PropTypes.bool,
+    highlightedColumns: PropTypes.object,
     isStacked: PropTypes.bool
 };
 
@@ -35,7 +35,7 @@ const TableData = ({
     isMobile,
     atMaxLevel,
     stickyFirstColumn = false,
-    subAward,
+    highlightedColumns,
     isStacked
 }) => {
     const [firstClick, setFirstClick] = useState(false);
@@ -102,7 +102,7 @@ const TableData = ({
                                 localClickHandler(row, i);
                             }
                         }}
-                        className={`usda-table__row-item usda-table__row${oddClass} ${rowIndexForMessage === i ? 'selected-row' : ''} ${subAward ? 'special-hover-color' : ''}`}
+                        className={`usda-table__row-item usda-table__row${oddClass} ${rowIndexForMessage === i ? 'selected-row' : ''} ${highlightedColumns ? `special-hover-color-${highlightedColumns.highlightedColumns}` : ''}`}
                         style={{ height: rowHeight }}>
                         {row.map((data, j) => (
                             columns[j]?.bodyHeader

components/table/TableHeader.jsx

@@ -69,7 +69,7 @@ const propTypes = {
     bodyHeader: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
     columnWidth: PropTypes.number,
-    subAward: PropTypes.bool,
+    highlightedColumns: PropTypes.object,
     index: PropTypes.number
 };
 
@@ -87,7 +87,7 @@ const TableHeaderCell = ({
     bodyHeader = false,
     stickyFirstColumn = false,
     columnWidth,
-    subAward,
+    highlightedColumns,
     index
 }) => {
     const handleClickedSort = (e, sortOn = title) => {
@@ -102,7 +102,7 @@ const TableHeaderCell = ({
     return (
         <th
             className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} 
-            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''}`}
+            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${highlightedColumns ? `table-header__subaward-color-${highlightedColumns.highlightedColumns}` : ''}`}
             style={{ minWidth: columnWidth }}
             colSpan={columnWidth ? '' : columnSpan}
             rowSpan={rowsSpan()}