STCOM-1328: Add the showSortIndicator property to MLC to display a so…

…rt indicator next to the sortable column names. (#2333)

CHANGELOG.md

@@ -29,6 +29,7 @@
 * Conform `<MultiSelection>`'s internal state when the value prop changes after the initial render. Refs STCOM-1311.
 * Make `<MultiSelection>` less strict about item removal via `itemToKey` setting (`downshift`). Refs STCOM-1311.
 * Conform `<Selection>`'s internal state when dataOptions prop changes after initial render. Refs STCOM-1313.
+* Add the `showSortIndicator` property to MLC to display a sort indicator next to the sortable column names. Refs STCOM-1328.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/MultiColumnList/MCLRenderer.css

@@ -263,6 +263,16 @@
   &.mclSorted .mclHeaderInner {
     text-decoration: underline;
   }
+
+  &.mclSortIndicator .mclHeaderInner::after {
+     content: '';
+     width: var(--gutter-static);
+     height: 18px;
+     background:
+       url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%202.9l5.77%206.92-1.54%201.28L7%206.02%202.77%2011.1%201.23%209.82%207%202.9z%22/%3E%3C/svg%3E') no-repeat center top,
+       url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20fill%3D%22%23888%22%20class%3D%22stripes__icon%22%20d%3D%22M7%2011.1L1.23%204.18%202.77%202.9%207%207.98l4.23-5.08%201.54%201.28L7%2011.1z%22/%3E%3C/svg%3E') no-repeat center 8px;
+     background-size: 10px;
+  }
 }
 
 .mclHeaderOuter:active,

lib/MultiColumnList/MCLRenderer.js

@@ -253,6 +253,7 @@ class MCLRenderer extends React.Component {
     scrollToIndex: PropTypes.number,
     selectedClass: PropTypes.string,
     selectedRow: PropTypes.object,
+    showSortIndicator: PropTypes.bool,
     sortDirection: PropTypes.oneOf(['ascending', 'descending']),
     sortedColumn: PropTypes.string,
     sortOrder: PropTypes.string,
@@ -295,6 +296,7 @@ class MCLRenderer extends React.Component {
     rowUpdater: noop,
     scrollToIndex: 0,
     selectedClass: css.mclSelected,
+    showSortIndicator: false,
     striped: true,
     totalCount: 0,
     minimumRowHeight: 30.8,
@@ -1546,12 +1548,15 @@ class MCLRenderer extends React.Component {
   };
 
   getHeaderClassName = (column, sortedBy, isInteractive) => {
+    const { showSortIndicator } = this.props;
+
     return classnames(
       css.mclHeader,
       { [`${css.mclClickable}`]: isInteractive },
       { [`${css.mclSorted}`]: sortedBy },
       { [`${css.mclAscending}`]: (sortedBy && this.props.sortDirection === 'ascending') },
       { [`${css.mclDescending}`]: (sortedBy && this.props.sortDirection === 'descending') },
+      { [`${css.mclSortIndicator}`]: showSortIndicator && isInteractive && !sortedBy },
     );
   };
 

lib/MultiColumnList/readme.md

@@ -113,6 +113,7 @@ Name | type | description | default | required
 `rowUpdater` | func(`rowData`, `rowIndex`) | This function should return a shallow data structure (flattened object) or primitive (string, number) that will indicate that exterior data for a row has changed. It will receive two parameters of the `rowData` and the `rowIndex` that can be used to base return values. This result is fed directly to the data rows via props, keeping them pure. You should rarely have to use this prop, as most changes will be relayed directly in the `contentData` array itself. | `noop` |
 `selectedClass` | string | override class for the default style applied to selected rows. | built-in |
 `selectedRow` | object | **legacy API** Applies 'selected' class to the table row matching the property in the object, e.g. {id: '1224'}. | |
+`showSortIndicator` | bool | If true, an icon for sortable fields will be displayed next to the column name. It will not be displayed for the currently sorted column. | false |
 `sortedColumn` | string | Used to apply styling to the appropriate column. | |
 `sortDirection` | string | 'ascending' or 'descending' direction. | |
 `stickyFirstColumn` | bool | Pins the first column in place so that it will remain visible when scrolled out of view. | |

lib/MultiColumnList/stories/BasicMCL.js

@@ -35,6 +35,7 @@ export default class BasicMCL extends React.Component {
       <MultiColumnList
         striped
         contentData={data}
+        showSortIndicator
         sortedColumn={this.state.sorted}
         sortDirection="ascending"
         selectedRow={this.state.selected}
@@ -52,6 +53,7 @@ export default class BasicMCL extends React.Component {
         formatter={{
           active: (row) => <TextLink href="www.google.com">{row.active ? 'active' : 'inactive'}</TextLink>
         }}
+        nonInteractiveHeaders={['phone']}
       />
     );
   }