Merge pull request #205 from fedspendingtransparency/mod/10888-dtui-c…

…olors-for-prime-awards-columns

10888 - added subawards prop to Table.jsx and TableHeader.jsx; added …

components/table/Table.jsx

@@ -35,7 +35,8 @@ const propTypes = {
     screenReaderCaption: PropTypes.string,
     onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool,
-    stickyFirstColumn: PropTypes.bool
+    stickyFirstColumn: PropTypes.bool,
+    subAward: PropTypes.bool
 };
 
 const defaultProps = {
@@ -107,6 +108,13 @@ const Table = (props) => {
                 {props.screenReaderCaption && (
                     <caption className="usa-dt-sr-only">{props.screenReaderCaption}</caption>
                 )}
+                {props.subAward
+                && (
+                    <colgroup>
+                        <col span={6} />
+                        <col span={2} className="usda-table__body-special-color" />
+                    </colgroup>
+                )}
                 <thead className="usda-table__head">
                     <tr className="usda-table__row" style={{ height: props.headerRowHeight }}>
                         {props.columns.map((col, index) => (
@@ -115,6 +123,7 @@ const Table = (props) => {
                                 currentSort={props.currentSort}
                                 updateSort={props.updateSort}
                                 stickyFirstColumn={props.stickyFirstColumn}
+                                subAward={props.subAward}
                                 index={index}
                                 {...col} />
                         ))}

components/table/TableData.jsx

@@ -20,7 +20,8 @@ const propTypes = {
     onClickHandler: PropTypes.func,
     isMobile: PropTypes.bool,
     atMaxLevel: PropTypes.bool,
-    stickyFirstColumn: PropTypes.bool
+    stickyFirstColumn: PropTypes.bool,
+    subAward: PropTypes.bool
 };
 
 const TableData = ({
@@ -32,7 +33,8 @@ const TableData = ({
     onClickHandler,
     isMobile,
     atMaxLevel,
-    stickyFirstColumn = false
+    stickyFirstColumn = false,
+    subAward
 }) => {
     const [firstClick, setFirstClick] = useState(false);
     const [rowIndexForMessage, setRowIndexForMessage] = useState();
@@ -86,8 +88,7 @@ const TableData = ({
                                 localClickHandler(row, i);
                             }
                         }}
-                        className={`usda-table__row-item usda-table__row${oddClass}`}
-                        style={{ height: rowHeight }}>
+                        className={`usda-table__row-item usda-table__row${oddClass} ${subAward ? 'special-hover-color' : ''}`} style={{ height: rowHeight }}>
                         {row.map((data, j) => (
                             columns[j]?.bodyHeader
                                 ? (

components/table/TableHeader.jsx

@@ -71,6 +71,7 @@ const propTypes = {
     bodyHeader: PropTypes.bool,
     stickyFirstColumn: PropTypes.bool,
     columnWidth: PropTypes.number,
+    subAward: PropTypes.bool,
     index: PropTypes.number
 };
 
@@ -88,6 +89,7 @@ const TableHeaderCell = ({
     bodyHeader = false,
     stickyFirstColumn = false,
     columnWidth,
+    subAward,
     index
 }) => {
     const handleClickedSort = (e, sortOn = title) => {
@@ -101,7 +103,8 @@ const TableHeaderCell = ({
     };
     return (
         <th
-            className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} `}
+            className={`${className} table-header${bodyHeader ? ' table-header_body-header' : ''} 
+            ${stickyFirstColumn && index === 0 ? ' stickyColumn' : ''} ${subAward ? 'table-header__subaward-color' : ''} `}
             style={{ minWidth: columnWidth }}
             colSpan={columnWidth ? '' : columnSpan}
             rowSpan={rowsSpan()}
@@ -124,5 +127,4 @@ const TableHeaderCell = ({
 };
 
 TableHeaderCell.propTypes = propTypes;
-
 export default TableHeaderCell;