@cdc/core 4.24.5 → 4.24.9

package/components/NestedDropdown/NestedDropdown.tsx

@@ -1,16 +1,16 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import './nesteddropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
+import { VizFilter } from '../../types/VizFilter'
 
 const Options: React.FC<{
   currentOptions: (string | number)[]
   label: string
-  handleSecondTierSelect: Function
-  userSelectedTierTwoLabel: string
+  handleSubGroupSelect: Function
+  userSelectedLabel: string
   userSearchTerm: string
-}> = ({ currentOptions, label, handleSecondTierSelect, userSelectedTierTwoLabel, userSearchTerm }) => {
+}> = ({ currentOptions = [], label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
-
   const checkMark = <>&#10004;</>
 
   useEffect(() => {
@@ -29,23 +29,24 @@ const Options: React.FC<{
       if (currentItem.className === 'selectable-item') currentItem.parentNode.parentNode.focus()
       setIsTierOneExpanded(false)
     } else if (e.key === 'Enter') {
-      currentItem.className === 'selectable-item' ? handleSecondTierSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
+      currentItem.className === 'selectable-item' ? handleSubGroupSelect(currentItem.dataset.value) : setIsTierOneExpanded(!isTierOneExpanded)
     }
   }
 
   return (
     <>
       <li role='treeitem' key={label} tabIndex={0} aria-label={label} onClick={handleGroupClick} onKeyUp={handleKeyUp} className='nested-dropdown-group'>
-        <span id={label}>{label} </span>
+        <span className={'font-weight-bold'}>{label} </span>
         {
           <span className='list-arrow' aria-hidden='true'>
             {isTierOneExpanded ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
           </span>
         }
         <ul aria-expanded={isTierOneExpanded} role='group' tabIndex={-1} aria-labelledby={label} className={isTierOneExpanded ? '' : 'hide'}>
-          {currentOptions.map(tierTwo => {
+          {currentOptions.map((tierTwo, tierTwoIndex) => {
             const regionID = label + tierTwo
-            let isSelected = regionID === userSelectedTierTwoLabel
+            const isSelected = regionID === userSelectedLabel
+
             return (
               <li
                 key={regionID}
@@ -56,10 +57,16 @@ const Options: React.FC<{
                 aria-selected={isSelected}
                 data-value={tierTwo}
                 onClick={e => {
-                  handleSecondTierSelect(tierTwo)
+                  handleSubGroupSelect(tierTwo)
                 }}
               >
-                {isSelected ? <span aria-hidden='true'>{checkMark}</span> : ''}
+                {isSelected ? (
+                  <span className='check-mark' aria-hidden='true'>
+                    {checkMark}
+                  </span>
+                ) : (
+                  ''
+                )}
 
                 {tierTwo}
               </li>
@@ -72,42 +79,43 @@ const Options: React.FC<{
 }
 
 interface NestedDropdownProps {
-  data: Record<string, string | number>[]
-  tiers: [string, string] // index 0  is the parent index 1 is the child
+  isEditor?: boolean
+  currentFilter: VizFilter
   listLabel: string
   handleSelectedItems: Function
 }
 
-const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTierLabel, secondTierLabel], listLabel, handleSelectedItems }) => {
-  const optsMemo: Record<string, (string | number)[]> = {}
-
-  data.forEach(value => {
-    const tierOne = value[firstTierLabel]
-    const tierTwo = value[secondTierLabel]
-    if (optsMemo[tierOne]) {
-      optsMemo[tierOne].push(tierTwo)
-    } else {
-      optsMemo[tierOne] = [tierTwo]
-    }
-  })
+type OptionsMemo = [string, (string | number)[]][]
+
+const NestedDropdown: React.FC<NestedDropdownProps> = ({ currentFilter, listLabel, handleSelectedItems }) => {
+  const optsMemo: OptionsMemo = useMemo(() => {
+    // keep custom ordered value order
+    const values = currentFilter.orderedValues?.filter(value => currentFilter.values.includes(value)) || currentFilter.values
+    return values.map(value => {
+      if (!currentFilter.subGrouping) return [value, []]
+      const { orderedValues, values } = currentFilter.subGrouping.valuesLookup[value]
+      const subFilterValues = orderedValues?.filter(value => values.includes(value)) || values
+      return [value, subFilterValues]
+    })
+  }, [currentFilter, currentFilter.subGrouping])
+  const groupFilterActive = currentFilter.active
+  const subGroupFilterActive = currentFilter.subGrouping?.active ?? ''
 
-  const [userSelectedTierTwoLabel, setUserSelectedTierTwoLabel] = useState(null)
   const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useState(subGroupFilterActive !== '' ? `${groupFilterActive} - ${subGroupFilterActive}` : 'Select an Option')
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
 
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
-  const chooseSelectedSecondTier = (tierOne: string, tierTwo: string) => {
+  const chooseSelectedSubGroup = (tierOne: string, tierTwo: string) => {
     searchInput.current.focus()
-    const selectedItemValue = tierTwo
-    setUserSelectedTierTwoLabel(tierOne + tierTwo)
+    const selectedItemValue = `${tierOne} - ${tierTwo}`
     setUserSearchTerm('')
     setIsListOpened(false)
     setInputValue(selectedItemValue)
-    handleSelectedItems(tierOne, tierTwo)
+    handleSelectedItems([tierOne, tierTwo])
   }
 
   const handleKeyUp = e => {
@@ -182,25 +190,12 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTier
     }
   }
 
-  const filterOptions: Record<string, (string | number)[]> = useMemo(() => {
+  const filterOptions: OptionsMemo = useMemo(() => {
     if (!userSearchTerm) return optsMemo
-    const newOptions: Record<string, (string | number)[]> = {}
     const newRegex = new RegExp(`^${userSearchTerm}`, 'i')
-    for (const tierOne in optsMemo) {
-      if (tierOne.match(newRegex)) {
-        newOptions[tierOne] = [...optsMemo[tierOne]]
-      } else {
-        const newSecondTierOptions = optsMemo[tierOne].filter(tierTwo => String(tierTwo).match(newRegex))
-        if (newSecondTierOptions.length > 0) {
-          newOptions[tierOne] = newSecondTierOptions
-        }
-      }
-    }
-    return newOptions
+    return optsMemo.filter(([tierOne, tierTwo]) => tierOne.match(newRegex) || tierTwo.some(value => String(value).match(newRegex)))
   }, [userSearchTerm])
 
-  const filterOptionsKeys = Object.keys(filterOptions)
-
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
     setIsListOpened(true)
@@ -233,16 +228,16 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({ data, tiers: [firstTier
           </span>
         </div>
         <ul role='tree' key={listLabel} tabIndex={-1} aria-labelledby='main-nested-dropdown' aria-expanded={isListOpened} ref={searchDropdown} className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}>
-          {filterOptions && filterOptionsKeys.length > 0
-            ? filterOptionsKeys.map((tierOne: string) => {
+          {filterOptions?.length
+            ? filterOptions.map(([groupName, options]) => {
                 return (
                   <Options
-                    currentOptions={filterOptions[tierOne]}
-                    label={tierOne}
-                    handleSecondTierSelect={(tierTwo: string) => {
-                      chooseSelectedSecondTier(tierOne, tierTwo)
+                    currentOptions={options}
+                    label={groupName}
+                    handleSubGroupSelect={(subGroupValue: string) => {
+                      chooseSelectedSubGroup(groupName, subGroupValue)
                     }}
-                    userSelectedTierTwoLabel={userSelectedTierTwoLabel}
+                    userSelectedLabel={groupFilterActive + subGroupFilterActive}
                     userSearchTerm={userSearchTerm}
                   />
                 )

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -1,11 +1,6 @@
 .nested-dropdown {
-  li {
+  .nested-dropdown-group {
     list-style: none;
-    cursor: pointer;
-
-    &:focus {
-      border: 2px solid var(--orange);
-    }
   }
 
   .search-input {
@@ -25,11 +20,24 @@
     cursor: pointer;
   }
 
-  .selectable-item:hover {
-    background-color: var(--lightGray);
+  .selectable-item {
+    list-style: none;
+    padding-left: 20px;
+    position: relative;
+    font-weight: normal;
+    white-space: nowrap;
+
+    & .check-mark {
+      position: absolute;
+      left: 0px;
+    }
+
+    &:hover {
+      background-color: var(--lightGray);
+    }
   }
 
-  & > div {
+  .nested-dropdown-input-container {
     position: relative;
     & > span.list-arrow {
       position: absolute;
@@ -42,26 +50,12 @@
     }
   }
 
-  & > ul {
+  & .main-nested-dropdown-container {
     max-height: 375px;
     overflow-y: scroll;
     position: absolute;
     z-index: 3;
-    width: 375px;
-
-    & > li {
-      font-weight: bold;
-
-      & > ul > li {
-        position: relative;
-        font-weight: normal;
-        white-space: nowrap;
-        & > span {
-          position: absolute;
-          left: -20px;
-        }
-      }
-    }
+    width: 325px;
   }
 
   .hide {

package/components/Table/Table.tsx

@@ -3,6 +3,7 @@ import Row from './components/Row'
 import GroupRow from './components/GroupRow'
 import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
+import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 
 type TableProps = {
   childrenMatrix: CellMatrix | GroupCellMatrix
@@ -21,13 +22,15 @@ type TableProps = {
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
   fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  preliminaryData?: PreliminaryDataItem[]
 }
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport }: TableProps) => {
+const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport, preliminaryData }: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
+
   return (
     <table {...tableOptions}>
       <caption className='visually-hidden'>{caption}</caption>
@@ -39,7 +42,7 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               const rows = childrenMatrix[groupName].map((row, i) => {
                 colSpan = row.length
                 const key = `${tableName}-${groupName}-row-${i}`
-                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
               })
               return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
             })
@@ -49,17 +52,17 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               if (hasRowType) rowType = childRowCopy.shift()
               const key = `${tableName}-row-${i}`
               if (rowType === undefined) {
-                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
               } else {
                 switch (rowType) {
                   case RowType.row_group:
                     return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
                   case RowType.total:
-                    return <Row key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                   case RowType.row_group_total:
                     return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
                   default:
-                    return <Row key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                 }
               }
             })}

package/components/Table/components/Cell.tsx

@@ -1,6 +1,6 @@
-const Cell = ({ children, style, isBold = false }) => {
+const Cell = ({ children, style, isBold = false, ariaLabel }) => {
   return (
-    <td tabIndex={0} role='gridcell' style={style}>
+    <td aria-label={ariaLabel} tabIndex={0} role='gridcell' style={style}>
       {isBold ? <strong>{children}</strong> : children}
     </td>
   )

package/components/Table/components/Row.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react'
+import { ReactNode, FC } from 'react'
 import Cell from './Cell'
+import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 
 type RowProps = {
   childRow: ReactNode[]
@@ -9,20 +10,37 @@ type RowProps = {
   cellMinWidth?: number
   fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  style?: object
+  preliminaryData?: PreliminaryDataItem[]
 }
 
-const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport }: RowProps) => {
+const Row: FC<RowProps> = props => {
+  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport, preliminaryData } = props
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
   const fontSizes = { small: 16, medium: 18, large: 20 }
   const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
+
   return (
     <tr>
-      {childRow.map((child, i) => (
-        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth, fontSize: cellFontSize }} isBold={isTotal}>
-          {child}
-        </Cell>
-      ))}
+      {childRow.map((child, i) => {
+        const style =
+          (preliminaryData?.some(
+            pd => pd.type === 'suppression' && child === pd.iconCode && pd.displayGray && pd.displayTable
+          ) && { color: '#777772' }) ||
+          {}
+
+        return (
+          <Cell
+            ariaLabel={style?.color ? 'suppressed data' : ''}
+            key={rowKey + '__' + i}
+            style={{ whiteSpace, minWidth, fontSize: cellFontSize, ...style }}
+            isBold={isTotal}
+          >
+            {child}
+          </Cell>
+        )
+      })}
     </tr>
   )
 }

package/components/_stories/Footnotes.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Footnotes from '../Footnotes'
+
+const meta: Meta<typeof Footnotes> = {
+  title: 'Components/Organisms/Footnotes',
+  component: Footnotes
+}
+
+export default meta
+
+type Story = StoryObj<typeof Footnotes>
+
+export const Primary: Story = {
+  args: {
+    footnotes: [{ symbol: '*', text: 'This is a footnote' }, { symbol: '†', text: 'This is another footnote' }, { text: 'This is a third footnote' }]
+  }
+}

package/components/_stories/Layout.Debug.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import './styles.scss'
+import CdcChart from '@cdc/chart'
+import CdcMap from '@cdc/map'
+import CdcMarkupInclude from '@cdc/markup-include'
+import CdcFilteredText from '@cdc/filtered-text'
+import CdcDashboard from '@cdc/dashboard'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import config from './../../../chart/src/_stories/_mock/bar-chart-suppressed.json'
+import mapConfig from './../../../map/examples/default-usa.json'
+import markupConfig from './../../../markup-include/src/data/initial-state.js'
+import filteredTextConfig from './_mocks/filtered-text-config.json'
+import waffleChartConfig from './../../../waffle-chart/examples/gallery/count.json'
+import dashboardConfig from './../../../dashboard/examples/full-dashboard.json'
+
+// Determine the component based on config.type
+const getComponent = config => {
+  switch (config.type) {
+    case 'map':
+      return CdcMap
+    case 'chart':
+      return CdcChart
+    case 'markup-include':
+      return CdcMarkupInclude
+    case 'waffle-chart':
+      return CdcWaffleChart
+    case 'dashboard':
+      return CdcDashboard
+    default:
+      return () => <div>Unknown component type</div>
+  }
+}
+
+const meta = {
+  title: 'Components/Templates/Layout/Debug',
+  component: args => {
+    const Component = getComponent(args.config)
+    return (
+      <div className=''>
+        <Component {...args} />
+      </div>
+    )
+  }
+} as Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Chart: Story = {
+  args: {
+    config,
+    isEditor: true
+  }
+}
+
+export const Map: Story = {
+  args: {
+    config: mapConfig,
+    isEditor: true
+  }
+}
+
+export const MarkupInclude: StoryObj<typeof CdcMarkupInclude> = {
+  args: {
+    config: markupConfig,
+    isEditor: true
+  }
+}
+
+export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
+  args: {
+    config: waffleChartConfig,
+    isEditor: true
+  }
+}
+
+export const Dashboard: StoryObj<typeof CdcDashboard> = {
+  args: {
+    config: dashboardConfig,
+    isEditor: true
+  }
+}
+
+// export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
+//   args: {
+//     config: waffleChartConfig,
+//     isEditor: true
+//   }
+// }