Merge pull request #40 from fedspendingtransparency/mod/dev-5293-tabl…

…e-without-sorting DEV-5293 table without sorting
fedspendingtransparency · Jun 15, 2020 · 9c98086 · 9c98086
2 parents 53feced + 224d016
commit 9c98086
Show file tree

Hide file tree

Showing 33 changed files with 468 additions and 415 deletions.
diff --git a/.storybook/misc.jsx b/.storybook/misc.jsx
@@ -141,3 +141,31 @@ export const TableWrapper = (props) => {
     </div>
   );
 }
+
+// For the table without sorting
+export const BasicTableWrapper = (props) => {
+  const columns = [
+    {
+        title: 'name',
+        displayName: 'Budget Function'
+    },
+    {
+        title: 'amount',
+        displayName: 'Amount'
+    },
+    {
+        title: 'percent',
+        displayName: '% of Total Amount',
+        right: true
+    }
+  ];
+
+  return (
+    <div className="story__container table-story">
+        {React.cloneElement(props.children, {
+          columns,
+          ...props.children.props
+        })}
+    </div>
+  );
+}
diff --git a/.storybook/stories/table.stories.mdx b/.storybook/stories/table.stories.mdx
@@ -4,7 +4,7 @@ import { withA11y } from '@storybook/addon-a11y';
 import { withActions, actions } from '@storybook/addon-actions';
 
 import Table from '../../components/table/Table';
-import { TableWrapper } from "../misc";
+import { TableWrapper, BasicTableWrapper } from "../misc";
 
 <Meta
     title="Table"
@@ -59,7 +59,64 @@ direction
 </Preview>
 
 <Preview>
-    <Story name='Expandable Table'>
+    <Story name='Table without Sorting'>
+        <BasicTableWrapper>
+            <Table
+                rows={[
+                    [<a href="/">Link</a>, 'mock data', '25%'],
+                    [<React.Fragment><strong>jsx</strong> content</React.Fragment>, 1234, 'mock data']
+                ]} />
+        </BasicTableWrapper>
+    </Story>
+</Preview>
+
+<Preview>
+    <Story name='Expandable Table without Divider'>
+        <TableWrapper>
+            <Table
+                rows={[
+                    {
+                        name: 'Transportation',
+                        amount: '$100',
+                        percent: '20%'
+                    },
+                    {
+                        name: 'Health',
+                        amount: '$150',
+                        percent: '30%',
+                        children: [
+                            {
+                                name: 'Health care services',
+                                amount: '$150',
+                                percent: '30%'
+                            }
+                        ]
+                    },
+                    {
+                        name: 'General Science',
+                        amount: '$250',
+                        percent: '50%',
+                        children: [
+                            {
+                                name: 'Space flight',
+                                amount: '$200',
+                                percent: '40%'
+                            },
+                            {
+                                name: 'Basic research',
+                                amount: '$50',
+                                percent: '10%'
+                            }
+                        ]
+                    }
+                ]}
+                expandable />
+        </TableWrapper>
+    </Story>
+</Preview>
+
+<Preview>
+    <Story name='Expandable Table with Divider'>
         <TableWrapper>
             <Table
                 rows={[
@@ -112,4 +169,3 @@ Answers the question, where is this component used?
 ### USASpending
 - [x] Agency Profile v2
 - [x] COVID-19 Page
-
diff --git a/components/table/ExpandableRow.jsx b/components/table/ExpandableRow.jsx
@@ -26,6 +26,15 @@ const ExpandableRow = ({
     const toggleExpand = () => {
         setExpanded(!expanded);
     };
+    const dividerRow = (
+        <tr className={`usda-table__child-row usda-table__child-row_divider${oddClass}`}>
+            <td colSpan={columns.length} className="usda-table__cell usda-table__cell_child">
+                <div className="usda-table__child-cell-content">
+                    {divider}
+                </div>
+            </td>
+        </tr>
+    );
     return (
         <>
             <tr className={`usda-table__row${oddClass} usda-table__row_expandable`}>
@@ -55,13 +64,7 @@ const ExpandableRow = ({
             </tr>
             {data.children && expanded ? (
                 <>
-                    <tr className={`usda-table__child-row usda-table__child-row_divider${oddClass}`}>
-                        <td colSpan={columns.length} className="usda-table__cell usda-table__cell_child">
-                            <div className="usda-table__child-cell-content">
-                                {divider}
-                            </div>
-                        </td>
-                    </tr>
+                    {divider && dividerRow}
                     {data.children.map((childRow, j) => {
                         const lastClass = j === data.children.length - 1 ? ' usda-table__child-row_last' : '';
                         return (

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -11,13 +11,13 @@ import ExpandableRow from './ExpandableRow';
 require('../../styles/components/table/_table.scss');
 
 const propTypes = {
-    columns: PropTypes.arrayOf(PropTypes.object),
-    rows: PropTypes.arrayOf(oneOfType([PropTypes.array, PropTypes.object])),
+    columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+    rows: PropTypes.arrayOf(oneOfType([PropTypes.array, PropTypes.object])).isRequired,
     currentSort: shape({
         direction: oneOf(['asc', 'desc']),
         field: PropTypes.string
     }),
-    updateSort: PropTypes.func.isRequired,
+    updateSort: PropTypes.func,
     expandable: PropTypes.bool,
     divider: PropTypes.string
 };
@@ -31,7 +31,7 @@ const Table = (props) => (
                         key={col.title}
                         currentSort={props.currentSort}
                         updateSort={props.updateSort}
-                        isActive={props.currentSort.field === col.title}
+                        isActive={props.currentSort?.field === col.title}
                         {...col} />
                 ))}
             </tr>

diff --git a/components/table/TableHeader.jsx b/components/table/TableHeader.jsx
@@ -7,7 +7,6 @@ import React from 'react';
 import PropTypes, { shape, oneOf } from 'prop-types';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-
 const propTypes = {
     isActive: PropTypes.bool,
     title: PropTypes.string.isRequired,
@@ -16,7 +15,7 @@ const propTypes = {
         direction: oneOf(['asc', 'desc']),
         field: PropTypes.string
     }),
-    updateSort: PropTypes.func.isRequired
+    updateSort: PropTypes.func
 };
 
 const TableHeaderCell = (props) => {
@@ -25,35 +24,39 @@ const TableHeaderCell = (props) => {
     };
 
     // highlight the active arrow
-    const activeAsc = (props.isActive && props.currentSort.direction === 'asc')
+    const activeAsc = (props.isActive && props.currentSort?.direction === 'asc')
         ? ' table-header__icon_active' : '';
-    const activeDesc = (props.isActive && props.currentSort.direction === 'desc')
+    const activeDesc = (props.isActive && props.currentSort?.direction === 'desc')
         ? ' table-header__icon_active' : '';
 
+    const sort = (
+        <div className="table-header__sort">
+            <button
+                onClick={clickedSort}
+                className={`table-header__icon${activeAsc}`}
+                value="asc"
+                title={`Sort table by ascending ${props.displayName}`}
+                aria-label={`Sort table by ascending ${props.displayName}`}>
+                <FontAwesomeIcon size="2x" icon="caret-up" />
+            </button>
+            <button
+                onClick={clickedSort}
+                className={`table-header__icon${activeDesc}`}
+                value="desc"
+                title={`Sort table by descending ${props.displayName}`}
+                aria-label={`Sort table by descending ${props.displayName}`}>
+                <FontAwesomeIcon size="2x" icon="caret-down" />
+            </button>
+        </div>
+    );
+
     return (
         <th className="table-header">
             <div className="table-header__content">
                 <div className="table-header__label">
                     {props.displayName}
                 </div>
-                <div className="table-header__sort">
-                    <button
-                        onClick={clickedSort}
-                        className={`table-header__icon${activeAsc}`}
-                        value="asc"
-                        title={`Sort table by ascending ${props.displayName}`}
-                        aria-label={`Sort table by ascending ${props.displayName}`}>
-                        <FontAwesomeIcon size="2x" icon="caret-up" />
-                    </button>
-                    <button
-                        onClick={clickedSort}
-                        className={`table-header__icon${activeDesc}`}
-                        value="desc"
-                        title={`Sort table by descending ${props.displayName}`}
-                        aria-label={`Sort table by descending ${props.displayName}`}>
-                        <FontAwesomeIcon size="2x" icon="caret-down" />
-                    </button>
-                </div>
+                {props.updateSort && sort}
             </div>
         </th>
     );