@cdc/core 4.24.1 → 4.24.3

package/components/MultiSelect/multiselect.styles.css

@@ -1,39 +1,56 @@
 .cove-multiselect {
   position: relative;
-  .selected {
-    border: 1px solid #ccc;
-    padding: 5px;
-    min-height: 40px;
-    :is(button) {
-      border: none;
-      background: none;
-    }
-    :is(div) {
+  .cove-input__label {
+    display: block;
+  }
+  .wrapper {
+    display: inline-flex;
+    align-items: center;
+    .selected {
+      border: 1px solid var(--lightGray);
+      padding: 5px;
+      min-height: 40px;
+      min-width: 200px;
       display: inline-block;
-      padding: 0 0 0 5px;
-      margin-right: 5px;
-      margin-bottom: 2px;
-      background: #ccc;
+      :is(button) {
+        border: none;
+        background: none;
+      }
+      :is(div) {
+        display: inline-block;
+        padding: 0 0 0 5px;
+        margin-right: 5px;
+        margin-bottom: 2px;
+        background: var(--lightGray);
+        border-radius: 5px;
+      }
+      .expand {
+        padding: 0 5px;
+        border-radius: 5px;
+        background: var(--lightGray);
+        float: right;
+      }
       border-radius: 5px;
     }
-    .expand {
-      padding: 0 5px;
-      border-radius: 5px;
-      background: #ccc;
-      float: right;
+    .cove-tooltip__content {
+      position: absolute;
+      min-width: 120px;
+      :is(p) {
+        margin-bottom: 0;
+      }
     }
-    border-radius: 5px;
   }
   .dropdown {
     background: white;
     position: absolute;
     margin-top: 5px;
-    border: 1px solid #ccc;
-    padding: 0;
+    border: 1px solid var(--lightGray);
+    padding-left: 0;
     min-height: 40px;
-    overflow: scroll;
     max-height: 200px;
-    z-index: 1;
+    overflow-y: scroll;
+    min-width: 200px;
+    z-index: 4;
     &.hide {
       display: none;
     }
@@ -41,10 +58,10 @@
     :is(li) {
       cursor: pointer;
       list-style: none;
-      padding-left: 10px;
+      padding: 0 10px;
       &:hover {
-        background: #ccc;
-      } 
+        background: var(--lightGray);
+      }
     }
   }
-}
+}

package/components/NestedDropdown/NestedDropdown.tsx

@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef, useMemo } from 'react'
+import './nesteddropdown.styles.css'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const Options: React.FC<{
+  currentOptions: (string | number)[]
+  label: string
+  handleSecondTierSelect: Function
+  userSelectedTierTwoLabel: string
+  userSearchTerm: string
+}> = ({ currentOptions, label, handleSecondTierSelect, userSelectedTierTwoLabel, userSearchTerm }) => {
+  const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
+
+  const checkMark = <>&#10004;</>
+
+  useEffect(() => {
+    setIsTierOneExpanded(userSearchTerm.length > 0 ? true : isTierOneExpanded)
+  }, [userSearchTerm])
+
+  const handleGroupClick = e => {
+    const leaveExpanded = e.target.className === 'selectable-item' ? true : !isTierOneExpanded
+    setIsTierOneExpanded(leaveExpanded)
+  }
+
+  const handleKeyUp = e => {
+    const currentItem = e.target
+    if (e.key === 'ArrowRight') setIsTierOneExpanded(true)
+    else if (e.key === 'ArrowLeft') {
+      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)
+    }
+  }
+
+  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='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 => {
+            const regionID = label + tierTwo
+            let isSelected = regionID === userSelectedTierTwoLabel
+            return (
+              <li
+                key={regionID}
+                className='selectable-item'
+                tabIndex={0}
+                role='treeitem'
+                aria-label={regionID}
+                aria-selected={isSelected}
+                data-value={tierTwo}
+                onClick={e => {
+                  handleSecondTierSelect(tierTwo)
+                }}
+              >
+                {isSelected ? <span aria-hidden='true'>{checkMark}</span> : ''}
+
+                {tierTwo}
+              </li>
+            )
+          })}
+        </ul>
+      </li>
+    </>
+  )
+}
+
+interface NestedDropdownProps {
+  data: Record<string, string | number>[]
+  tiers: [string, string] // index 0  is the parent index 1 is the child
+  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]
+    }
+  })
+
+  const [userSelectedTierTwoLabel, setUserSelectedTierTwoLabel] = useState(null)
+  const [userSearchTerm, setUserSearchTerm] = useState('')
+  const [inputValue, setInputValue] = useState('')
+  const [inputHasFocus, setInputHasFocus] = useState(false)
+  const [isListOpened, setIsListOpened] = useState(false)
+
+  const searchInput = useRef(null)
+  const searchDropdown = useRef(null)
+
+  const chooseSelectedSecondTier = (tierOne: string, tierTwo: string) => {
+    searchInput.current.focus()
+    const selectedItemValue = tierTwo
+    setUserSelectedTierTwoLabel(tierOne + tierTwo)
+    setUserSearchTerm('')
+    setIsListOpened(false)
+    setInputValue(selectedItemValue)
+    handleSelectedItems(tierOne, tierTwo)
+  }
+
+  const handleKeyUp = e => {
+    const { nodeName, className, parentNode, nextSibling, lastChild, previousSibling } = e.target
+    const Dropdown = searchDropdown.current
+    switch (e.key) {
+      case 'ArrowDown': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+          // Move focus from Input to top of dropdown
+          Dropdown.firstChild.focus()
+        } else if (className === 'selectable-item') {
+          // Move focus to next item on list: next Tier Two item or the next Tier One or SearchInput
+          const itemToFocusOnAfterKeyUp = nextSibling ?? parentNode.parentNode.nextSibling ?? searchInput.current
+          itemToFocusOnAfterKeyUp.focus()
+        } else if (lastChild.className === 'hide') {
+          // If Tier One is collapsed, move to next Tier One or move focus back to the top Input
+          const itemToFocusOnAfterKeyUp = nextSibling ?? searchInput.current
+          itemToFocusOnAfterKeyUp.focus()
+        } else {
+          // If Tier One is open, move focus to Tier Two
+          lastChild?.firstChild?.focus()
+        }
+        break
+      }
+
+      case 'ArrowUp': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+          if (Dropdown.lastChild.lastChild.className === 'hide') {
+            // Move focus from Input textbox to the last collapsed Tier Two in dropdown
+            Dropdown.lastChild.focus()
+          } else {
+            // Move focus to last item of the last collapsed Tier Two in dropdown
+            Dropdown.lastChild.lastChild.lastChild.focus()
+          }
+        } else if (className === 'selectable-item') {
+          // Move focus to previous Tier Two or Move focus to current Tier One
+          const itemToFocusOnAfterKeyUp = previousSibling ?? parentNode.parentNode
+          itemToFocusOnAfterKeyUp.focus()
+        } else if (previousSibling) {
+          // Move focus to previous collapsed Tier One or Move focus from Tier One to the last of the previous Tier Two's items
+          const itemToFocusOnAfterKeyUp = previousSibling.lastChild.className === 'hide' ? previousSibling : previousSibling.lastChild.lastChild
+          itemToFocusOnAfterKeyUp.focus()
+        } else {
+          // Move focus from top of the dropdown to Input
+          searchInput?.current.focus()
+        }
+        break
+      }
+
+      case 'ArrowLeft': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(false)
+        }
+        break
+      }
+
+      case 'ArrowRight': {
+        if (nodeName === 'INPUT') {
+          setIsListOpened(true)
+        }
+        break
+      }
+
+      case 'Escape':
+        {
+          setIsListOpened(false)
+          searchInput.current.focus()
+        }
+        break
+    }
+  }
+
+  const filterOptions: Record<string, (string | number)[]> = 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
+  }, [userSearchTerm])
+
+  const filterOptionsKeys = Object.keys(filterOptions)
+
+  const handleSearchTermChange = e => {
+    const newSearchTerm = e.target.value
+    setIsListOpened(true)
+    setUserSearchTerm(newSearchTerm)
+    setInputValue(newSearchTerm)
+  }
+
+  return (
+    <>
+      <div id='nested-dropdown-container' className='nested-dropdown' onKeyUp={handleKeyUp}>
+        <div className='nested-dropdown-input-container' aria-label='searchInput' role='textbox'>
+          <input
+            className='search-input'
+            ref={searchInput}
+            aria-label='searchInput'
+            aria-haspopup='true'
+            aria-hidden='false'
+            tabIndex={0}
+            value={inputValue}
+            onChange={handleSearchTermChange}
+            placeholder={'Select or type to search'}
+            onClick={() => {
+              if (inputHasFocus) setIsListOpened(!isListOpened)
+            }}
+            onFocus={() => setInputHasFocus(true)}
+            onBlur={() => setInputHasFocus(false)}
+          />
+          <span className='list-arrow' aria-hidden={true}>
+            {isListOpened ? <Icon display='caretFilledUp' /> : <Icon display='caretFilledDown' />}
+          </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) => {
+                return (
+                  <Options
+                    currentOptions={filterOptions[tierOne]}
+                    label={tierOne}
+                    handleSecondTierSelect={(tierTwo: string) => {
+                      chooseSelectedSecondTier(tierOne, tierTwo)
+                    }}
+                    userSelectedTierTwoLabel={userSelectedTierTwoLabel}
+                    userSearchTerm={userSearchTerm}
+                  />
+                )
+              })
+            : 'There are no matching items'}
+        </ul>
+      </div>
+    </>
+  )
+}
+
+export default NestedDropdown

package/components/NestedDropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './NestedDropdown'

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -0,0 +1,70 @@
+.nested-dropdown {
+  li {
+    list-style: none;
+    cursor: pointer;
+
+    &:focus {
+      border: 2px solid var(--orange);
+    }
+  }
+
+  .search-input {
+    border: none;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .main-nested-dropdown-container,
+  .nested-dropdown-input-container {
+    padding: 7px 15px;
+    background: #fff;
+    border: 1px solid var(--lightGray);
+    border-radius: 5px;
+    width: 325px;
+    cursor: pointer;
+  }
+
+  .selectable-item:hover {
+    background-color: var(--lightGray);
+  }
+
+  & > div {
+    position: relative;
+    & > span.list-arrow {
+      position: absolute;
+      font-size: 10px;
+      top: 4px;
+      right: 12px;
+      padding: 9px;
+      background: #fff;
+      pointer-events: none;
+    }
+  }
+
+  & > ul {
+    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;
+        }
+      }
+    }
+  }
+
+  .hide {
+    display: none;
+  }
+}

package/components/Table/Table.tsx

@@ -24,7 +24,7 @@ type TableProps = {
 type Position = 'sticky'
 
 const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType }: TableProps) => {
-  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 999 } : {}
+  const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
   return (
     <table {...tableOptions}>

package/components/_stories/MultiSelect.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react'
 
 import MultiSelect from '../MultiSelect'
+import { userEvent, within } from '@storybook/testing-library'
 
 const meta: Meta<typeof MultiSelect> = {
   title: 'Components/Molecules/MultiSelect',
@@ -14,10 +15,18 @@ export const Primary: Story = {
     options: [
       { value: '1', label: 'One' },
       { value: '2', label: 'Two' },
-      { value: '3', label: 'Three' }
+      { value: '3', label: 'Three' },
+      { value: '4', label: 'This is a really long option' }
     ],
+    selected: ['1', '2'],
+    limit: 3,
     label: 'MultiSelect',
     updateField: (section, subsection, fieldName, value) => {}
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const questionMark = canvas.getByRole('dialog')
+    await userEvent.hover(questionMark)
   }
 }
 

package/components/_stories/NestedDropdown.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import NestedDropdown from '../NestedDropdown'
+
+const meta: Meta<typeof NestedDropdown> = {
+  title: 'Components/Molecules/NestedDropdown',
+  component: NestedDropdown
+}
+
+type Story = StoryObj<typeof NestedDropdown>
+
+export const Primary: Story = {
+  args: {
+    data: [
+      {
+        country: 'USA',
+        region: 'Region1'
+      },
+      {
+        country: 'USA',
+        region: 'Florida'
+      },
+      {
+        country: 'USA',
+        region: 'Iowa'
+      },
+      {
+        country: 'Country2',
+        region: 'Region1'
+      },
+      {
+        country: 'Country2',
+        region: 'Region2'
+      },
+      {
+        country: 'Country2',
+        region: 'Region3'
+      },
+      {
+        country: 'Italy',
+        region: 'Region1'
+      },
+      {
+        country: 'Italy',
+        region: 'Naples'
+      },
+      {
+        country: 'Italy',
+        region: 'Region3'
+      }
+    ],
+    tiers: ['country', 'region'],
+    listLabel: 'Countries of the World',
+    handleSelectedItems: console.log
+  }
+}
+
+export default meta

package/components/createBarElement.jsx

@@ -0,0 +1,117 @@
+export default function createBarElement(props) {
+  const { config, index, id, className, background, borderColor, borderWidth, width, height, x, y, onMouseOver, onMouseLeave, onClick, tooltipHtml, tooltipId, styleOverrides, seriesHighlight } = props
+
+  const isHorizontal = config.orientation === 'horizontal'
+  const isRounded = config.barStyle === 'rounded'
+  const isStacked = config.visualizationSubType === 'stacked'
+  const tipRounding = config.tipRounding
+  const comboBarSeriesCount = config.visualizationType === 'Combo' && config.runtime?.barSeriesKeys?.length
+  const barSeriesCount = config.runtime.seriesKeys.length
+  const isolateSeriesCount = config.visualizationType === 'Bar' && config.legend.axisAlign && seriesHighlight?.length ? seriesHighlight?.length : 0
+  const stackCount = comboBarSeriesCount ? comboBarSeriesCount : isolateSeriesCount ? isolateSeriesCount : barSeriesCount
+
+  let radius = config.roundingStyle === 'standard' ? 8 : config.roundingStyle === 'shallow' ? 5 : config.roundingStyle === 'finger' ? 15 : 0
+  if (radius > width / 2 || radius > height / 2) {
+    radius = Math.min(width / 2, height / 2)
+  }
+
+  const roundTop = () => {
+    return `M${x},${y + height}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + width - radius},${y}
+      Q${x + width},${y} ${x + width},${y + radius}
+      L${x + width},${y + height}
+      L${x},${y + height}`
+  }
+
+  const roundRight = () => {
+    return `M${x},${y + height}
+      L${x},${y}
+      L${x + width - radius},${y}
+      Q${x + width},${y} ${x + width},${y + radius}
+      L${x + width},${y + height - radius}
+      Q${x + width},${y + height} ${x + width - radius},${y + height}
+      L${x},${y + height}`
+  }
+
+  const roundBottom = () => {
+    return `M${x + radius},${y + height}
+      Q${x},${y + height} ${x},${y + height - radius}
+      L${x},${y}
+      L${x + width},${y}
+      L${x + width},${y + height - radius}
+      Q${x + width},${y + height} ${x + width - radius},${y + height}
+      L${x + radius},${y + height}`
+  }
+
+  const roundLeft = () => {
+    return `M${x + radius},${y + height}
+      Q${x},${y + height} ${x},${y + height - radius}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + width},${y}
+      L${x + width},${y + height}
+      L${x + radius},${y + height}`
+  }
+
+  const roundFull = () => {
+    return `M${x + radius},${y + height}
+      Q${x},${y + height} ${x},${y + height - radius}
+      L${x},${y + radius}
+      Q${x},${y} ${x + radius},${y}
+      L${x + width - radius},${y}
+      Q${x + width},${y} ${x + width},${y + radius}
+      L${x + width},${y + height - radius}
+      Q${x + width},${y + height} ${x + width - radius},${y + height}
+      L${x + radius},${y + height}`
+  }
+
+  const nonRounded = () => {
+    return `M${x},${y}
+      L${x + width},${y}
+      L${x + width},${y + height}
+      L${x},${y + height}
+      L${x},${y}`
+  }
+
+  let path
+  if (index === undefined || index === null || !isRounded) {
+    path = nonRounded()
+  } else {
+    path = nonRounded()
+
+    if ((isStacked && index + 1 === stackCount) || !isStacked) {
+      path = isHorizontal ? roundRight() : roundTop()
+    }
+    if (!isStacked && index === -1) {
+      path = isHorizontal ? roundLeft() : roundBottom()
+    }
+    if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
+      path = isHorizontal ? roundLeft() : roundBottom()
+    }
+    if (tipRounding === 'full' && ((isStacked && index === 0 && stackCount === 1) || !isStacked)) {
+      path = roundFull()
+    }
+  }
+
+  return (
+    <path
+      id={id}
+      className={className}
+      d={path}
+      fill={background}
+      stroke={borderColor}
+      strokeWidth={borderWidth}
+      onMouseOver={onMouseOver}
+      onMouseLeave={onMouseLeave}
+      onClick={onClick}
+      data-tooltip-html={tooltipHtml}
+      data-tooltip-id={tooltipId}
+      style={{
+        transition: 'all 0.2s linear',
+        ...styleOverrides
+      }}
+    ></path>
+  )
+}

package/components/elements/ScreenReaderText.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+const ScreenReaderText = (props: PropsWithChildren<{ as: keyof JSX.IntrinsicElements; children?: ReactNode }>) => {
+  const Component = props.as
+  return <Component className='cdcdataviz-sr-only'>{props.children}</Component>
+}
+
+export default ScreenReaderText

package/components/elements/SkipTo.tsx

@@ -0,0 +1,14 @@
+type SkipToProps = {
+  // id to skip to
+  skipId: string
+  // focusable text output, screen reader message
+  skipMessage: string
+}
+
+const SkipTo: React.FC<SkipToProps> = ({ skipId, skipMessage }) => (
+  <a id='skip-nav' className='cdcdataviz-sr-only-focusable' href={`#${skipId}`}>
+    {skipMessage}
+  </a>
+)
+
+export default SkipTo

package/components/ui/Icon.tsx

@@ -31,6 +31,8 @@ import iconText from '../../assets/icon-filtered-text.svg'
 import iconDropdowns from '../../assets/icon-filter-dropdowns.svg'
 import iconPlus from '../../assets/icon-plus.svg'
 import iconMinus from '../../assets/icon-minus.svg'
+import iconTable from '../../assets/icon-table.svg'
+import iconSankey from '../../assets/icon-sankey.svg'
 
 import '../../styles/v2/components/icon.scss'
 
@@ -64,7 +66,9 @@ const iconHash = {
   plus: iconPlus,
   minus: iconMinus,
   'filtered-text': iconText,
-  'filter-dropdowns': iconDropdowns
+  'filter-dropdowns': iconDropdowns,
+  table: iconTable,
+  sankey: iconSankey
 }
 
 export const ICON_TYPES = Object.keys(iconHash)