@cdc/core 4.24.9 → 4.24.10

package/components/DataTable/components/MapHeader.tsx

@@ -1,16 +1,18 @@
 import { DataTableProps } from '../DataTable'
-import { DownIcon, UpIcon } from './Icons'
 import ScreenReaderText from '../../elements/ScreenReaderText'
+import { SortIcon } from './SortIcon'
+import { getNewSortBy } from '../helpers/getNewSortBy'
 
 type MapHeaderProps = DataTableProps & {
   sortBy: { column; asc }
   setSortBy: Function
 }
 
-const ColumnHeadingText = ({ column, text, config }) => {
+const ColumnHeadingText = ({ text, config }) => {
   let notApplicableText = 'Not Applicable'
   if (text === '__series__' && config.table.indexLabel) return `${config.table.indexLabel} `
-  if (text === '__series__' && !config.table.indexLabel) return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
+  if (text === '__series__' && !config.table.indexLabel)
+    return <ScreenReaderText as='span'>{notApplicableText}</ScreenReaderText>
   return text
 }
 
@@ -21,7 +23,7 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
         .filter(column => columns[column].dataTable === true && columns[column].name)
         .map((column, index) => {
           let text
-          if (column !== 'geo') {
+          if (column && column !== 'geo') {
             text = columns[column].label ? columns[column].label : columns[column].name
           } else {
             text = config.type === 'map' ? indexTitle : config.xAxis?.dataKey
@@ -29,7 +31,8 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
           if (config.type === 'map' && (text === undefined || text === '')) {
             text = 'Location'
           }
-
+          const newSortBy = getNewSortBy(sortBy, column, index)
+          const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           return (
             <th
               key={`col-header-${column}__${index}`}
@@ -38,19 +41,25 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
               role='columnheader'
               scope='col'
               onClick={() => {
-                setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                setSortBy(newSortBy)
               }}
               onKeyDown={e => {
                 if (e.keyCode === 13) {
-                  setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
+                  setSortBy(newSortBy)
                 }
               }}
               className={sortBy.column === column ? (sortBy.asc ? 'sort sort-asc' : 'sort sort-desc') : 'sort'}
-              {...(sortBy.column === column ? (sortBy.asc ? { 'aria-sort': 'ascending' } : { 'aria-sort': 'descending' }) : null)}
+              {...(sortBy.column === column
+                ? sortBy.asc
+                  ? { 'aria-sort': 'ascending' }
+                  : { 'aria-sort': 'descending' }
+                : null)}
             >
               <ColumnHeadingText text={text} config={config} column={column} />
-              {sortBy.column === column && <span className={'sort-icon'}>{!sortBy.asc ? <UpIcon /> : <DownIcon />}</span>}
-              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
+              <SortIcon ascending={sortByAsc} />
+              <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
+                sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+              } order`}</span>
             </th>
           )
         })}

package/components/DataTable/components/SortIcon/index.tsx

@@ -0,0 +1,25 @@
+import './sort-icon.css'
+
+const UpIcon = ({ active }) => (
+  <svg className={'up' + (active ? ' active' : '')} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 5l5-5 5 5z' />
+  </svg>
+)
+const DownIcon = ({ active }) => (
+  <svg className={'down' + (active ? ' active' : '')} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'>
+    <path d='M0 0l5 5 5-5z' />
+  </svg>
+)
+
+type SortIconProps = {
+  ascending?: boolean
+}
+
+export const SortIcon: React.FC<SortIconProps> = ({ ascending }) => {
+  return (
+    <span role='button' className={'sort-icon'}>
+      <UpIcon active={ascending === true} />
+      <DownIcon active={ascending === false} />
+    </span>
+  )
+}

package/components/DataTable/components/SortIcon/sort-icon.css

@@ -0,0 +1,21 @@
+/* format the white triangle sort icon in data table headers */
+.sort-icon {
+  fill: white;
+  position: relative;
+  margin: 0 0.5rem !important;
+  :is(svg) {
+    position: absolute;
+    fill: rgba(255, 255, 255, 0.5);
+    &.active {
+      fill: white;
+    }
+    width: 1rem;
+    height: 1rem;
+  }
+  .up {
+    bottom: 0.5rem;
+  }
+  .down {
+    top: 0.5rem;
+  }
+}