@cdc/core 4.24.12 → 4.25.2-25

package/components/MediaControls.jsx

@@ -42,13 +42,30 @@ const generateMedia = (state, type, elementToCapture) => {
   // Apparently some packages use state.title where others use state.general.title
   const handleFileName = state => {
     // dashboard titles
-    if (state?.dashboard?.title) return state.dashboard.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.dashboard?.title)
+      return (
+        state.dashboard.title.replace(/\s+/g, '-').toLowerCase() +
+        '-' +
+        date.getDate() +
+        date.getMonth() +
+        date.getFullYear()
+      )
 
     // map titles
-    if (state?.general?.title) return state.general.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.general?.title)
+      return (
+        state.general.title.replace(/\s+/g, '-').toLowerCase() +
+        '-' +
+        date.getDate() +
+        date.getMonth() +
+        date.getFullYear()
+      )
 
     // chart titles
-    if (state?.title) return state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.title)
+      return (
+        state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+      )
 
     return 'no-title'
   }
@@ -59,7 +76,10 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {ignoreElements: el => el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1}).then(canvas => {
+      html2canvas(baseSvg, {
+        ignoreElements: el =>
+          el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1
+      }).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return
@@ -98,9 +118,14 @@ const handleTheme = state => {
 
 // Download CSV
 const Button = ({ state, text, type, title, elementToCapture }) => {
-  const buttonClasses = ['btn', 'btn-download', `${handleTheme(state)}`]
+  const buttonClasses = ['btn', 'btn-primary']
   return (
-    <button className={buttonClasses.join(' ')} title={title} onClick={() => generateMedia(state, type, elementToCapture)} style={{ lineHeight: '1.4em' }}>
+    <button
+      className={buttonClasses.join(' ')}
+      title={title}
+      onClick={() => generateMedia(state, type, elementToCapture)}
+      style={{ lineHeight: '1.4em' }}
+    >
       {buttonText[type]}
     </button>
   )
@@ -108,7 +133,7 @@ const Button = ({ state, text, type, title, elementToCapture }) => {
 
 // Link to CSV/JSON data
 const Link = ({ config, dashboardDataConfig }) => {
-  let dataConfig = dashboardDataConfig || config;
+  let dataConfig = dashboardDataConfig || config
   // Handles Maps & Charts
   if (dataConfig.dataFileSourceType === 'url' && dataConfig.dataFileName && config.table.showDownloadUrl) {
     return (
@@ -126,7 +151,6 @@ const Link = ({ config, dashboardDataConfig }) => {
   ) : null
 }
 
-// TODO: convert to standardized COVE section
 const Section = ({ children, classes }) => {
   return (
     <section className={classes.join(' ')}>

package/components/NestedDropdown/NestedDropdown.tsx

@@ -6,12 +6,13 @@ import Loader from '../Loader'
 
 const Options: React.FC<{
   subOptions: ValueTextPair[]
+  handleBlur: React.FocusEventHandler<HTMLLIElement>
   filterIndex: number
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ subOptions, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
+}> = ({ subOptions, handleBlur, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
   const checkMark = <>&#10004;</>
 
@@ -45,6 +46,7 @@ const Options: React.FC<{
         tabIndex={0}
         aria-label={label}
         onClick={handleGroupClick}
+        onBlur={handleBlur}
         onKeyUp={handleKeyUp}
         className={`nested-dropdown-group-${filterIndex}`}
       >
@@ -124,25 +126,22 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
 }) => {
   const dropdownId = useId()
 
-  const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState('')
+  const [userSearchTerm, setUserSearchTerm] = useState(null)
 
-  const initialInputValue = useMemo(() => {
+  const inputValue = useMemo(() => {
     // value from props
     return activeSubGroup ? `${activeGroup} - ${activeSubGroup}` : ''
-  }, [activeSubGroup])
+  }, [activeGroup, activeSubGroup])
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
-
+  const nestedDropdownRef = useRef(null)
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
   const chooseSelectedSubGroup = (tierOne: string | number, tierTwo: string | number) => {
     searchInput.current.focus()
-    const selectedItemValue = `${tierOne} - ${tierTwo}`
-    setUserSearchTerm('')
+    setUserSearchTerm(null)
     setIsListOpened(false)
-    setInputValue(selectedItemValue)
     handleSelectedItems([String(tierOne), String(tierTwo)])
   }
 
@@ -220,34 +219,43 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
   }
 
   const filterOptions = useMemo(() => {
-    return filterSearchTerm(userSearchTerm, options)
+    return filterSearchTerm(userSearchTerm || '', options)
   }, [userSearchTerm, options])
 
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
     setIsListOpened(true)
     setUserSearchTerm(newSearchTerm)
-    setInputValue(newSearchTerm)
   }
 
-  const handleOnBlur = e => {
+  const handleOnBlur = (e: React.FocusEvent<HTMLLIElement, Element>): void => {
     if (
       e.relatedTarget === null ||
       ![
         `nested-dropdown-${filterIndex}`,
         `nested-dropdown-group-${filterIndex}`,
-        `selectable-item-${filterIndex}`
+        `selectable-item-${filterIndex}`,
+        `main-nested-dropdown-container-${filterIndex}`
       ].includes(e.relatedTarget.className)
     ) {
       setInputHasFocus(false)
       setIsListOpened(false)
+    } else {
+      ;(e.relatedTarget as HTMLElement).focus()
     }
   }
 
+  function handleBlur(nestedDropdown, handleOnBlur) {
+    nestedDropdown?.addEventListener('blur', handleOnBlur)
+  }
+  handleBlur(searchInput.current, e => handleOnBlur(e))
+  handleBlur(searchDropdown.current, e => handleOnBlur(e))
+
   return (
     <>
       <div
         id={dropdownId}
+        ref={nestedDropdownRef}
         className={`nested-dropdown nested-dropdown-${filterIndex} ${isListOpened ? 'open-filter' : ''}`}
         onKeyUp={handleKeyUp}
       >
@@ -265,7 +273,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             aria-haspopup='true'
             aria-hidden='false'
             tabIndex={0}
-            value={inputValue || initialInputValue}
+            value={userSearchTerm !== null ? userSearchTerm : inputValue}
             onChange={handleSearchTermChange}
             placeholder={loading ? 'Loading...' : '- Select -'}
             disabled={loading || !options.length}
@@ -273,7 +281,6 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
             onFocus={() => setInputHasFocus(true)}
-            onBlur={e => handleOnBlur(e)}
           />
           <span className='list-arrow' aria-hidden={true}>
             <Icon display='caretDown' />
@@ -287,7 +294,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
           aria-labelledby='main-nested-dropdown'
           aria-expanded={isListOpened}
           ref={searchDropdown}
-          className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}
+          className={`main-nested-dropdown-container-${filterIndex}${isListOpened ? '' : ' hide'}`}
         >
           {filterOptions.length
             ? filterOptions.map(([group, subgroup], index) => {
@@ -296,6 +303,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                 return (
                   <Options
                     key={groupTextValue + '_' + index}
+                    handleBlur={handleOnBlur}
                     subOptions={subgroup}
                     filterIndex={filterIndex}
                     label={groupTextValue}
@@ -303,7 +311,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                       chooseSelectedSubGroup(groupValue, subGroupValue)
                     }}
                     userSelectedLabel={activeGroup + activeSubGroup}
-                    userSearchTerm={userSearchTerm}
+                    userSearchTerm={userSearchTerm || ''}
                   />
                 )
               })

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -10,23 +10,31 @@
     list-style: none;
   }
 
+  * {
+    font-family: var(--app-font-secondary) !important;
+    font-size: var(--filter-select-font-size) !important;
+  }
+
   .search-input {
+    color: var(--cool-gray-90);
+    font-weight: 300;
+
     border: none;
     position: relative;
     display: inline-block;
     width: 100%;
     padding: 0;
     &::placeholder {
-      color: var(--darkGray);
+      color: var(--cool-gray-90);
     }
   }
 
-  .main-nested-dropdown-container,
+  [class^='main-nested-dropdown-container-'],
   .nested-dropdown-input-container {
-    border: 1px solid var(--lightGray);
+    border: 1px solid var(--cool-gray-10);
     min-width: 200px;
     cursor: pointer;
-    padding: 0.375rem 0.75rem;
+    padding: 0.4rem 0.75rem;
     font-size: 1em;
   }
 
@@ -53,7 +61,6 @@
     border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
-      color: var(--mediumGray);
       position: absolute;
       top: 9px;
       right: 1px;
@@ -63,13 +70,12 @@
     &.disabled {
       background-color: var(--lightestGray);
       & > :is(input) {
-        color: var(--darkGray);
         background-color: var(--lightestGray);
       }
     }
   }
 
-  & .main-nested-dropdown-container {
+  & [class^='main-nested-dropdown-container-'] {
     max-height: 375px;
     overflow-y: scroll;
     position: absolute;

package/components/Table/Table.tsx

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react'
 import Row from './components/Row'
 import GroupRow from './components/GroupRow'
-import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
+import { CellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
 import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 import _ from 'lodash'
 
 type TableProps = {
-  childrenMatrix: CellMatrix | GroupCellMatrix
+  childrenMatrix: CellMatrix | Map<string, CellMatrix>
   noData?: boolean
   tableName: string
   caption: string
@@ -22,9 +22,9 @@ type TableProps = {
   }
   wrapColumns?: boolean
   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[]
+  rightAlignedCols: object
 }
 
 type Position = 'sticky'
@@ -39,9 +39,9 @@ const Table = ({
   tableOptions,
   wrapColumns,
   hasRowType,
-  fontSize,
   viewport,
-  preliminaryData
+  preliminaryData,
+  rightAlignedCols
 }: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
@@ -58,9 +58,9 @@ const Table = ({
           <thead style={headStyle}>{headContent}</thead>
           <tbody>
             {isGroupedMatrix
-              ? Object.keys(childrenMatrix).flatMap(groupName => {
+              ? Array.from(childrenMatrix.keys()).flatMap(groupName => {
                   let colSpan = 0
-                  const rows = childrenMatrix[groupName].map((row, i) => {
+                  const rows = childrenMatrix.get(groupName).map((row, i) => {
                     colSpan = row.length
                     const key = `${tableName}-${groupName}-row-${i}`
                     return (
@@ -71,8 +71,8 @@ const Table = ({
                         childRow={row}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
                       />
                     )
                   })
@@ -92,8 +92,8 @@ const Table = ({
                         childRow={childRow}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
                       />
                     )
                   } else {
@@ -110,8 +110,8 @@ const Table = ({
                             isTotal={true}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
                           />
                         )
                       case RowType.row_group_total:
@@ -125,8 +125,8 @@ const Table = ({
                             childRow={childRowCopy}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
                           />
                         )
                     }

package/components/Table/components/Row.tsx

@@ -8,18 +8,25 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
-  fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   style?: object
   preliminaryData?: PreliminaryDataItem[]
+  rightAlignedCols: object
 }
 
 const Row: FC<RowProps> = props => {
-  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport, preliminaryData } = props
+  const {
+    childRow,
+    rowKey,
+    wrapColumns,
+    cellMinWidth = 0,
+    isTotal,
+    viewport,
+    preliminaryData,
+    rightAlignedCols
+  } = props
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
-  const fontSizes = { small: 16, medium: 18, large: 20 }
-  const cellFontSize = ['xs', 'xxs'].includes(viewport) ? '12px' : `${fontSizes[fontSize]}px`
 
   return (
     <tr>
@@ -30,11 +37,13 @@ const Row: FC<RowProps> = props => {
           ) && { color: '#777772' }) ||
           {}
 
+        const textAlign = rightAlignedCols && rightAlignedCols[i] ? 'right' : ''
+
         return (
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, fontSize: cellFontSize, ...style }}
+            style={{ whiteSpace, minWidth, textAlign, ...style }}
             isBold={isTotal}
           >
             {child}

package/components/_stories/DataTable.stories.tsx

@@ -45,8 +45,7 @@ export const CityState: Story = {
     tabbingId: '#asdf',
     columns: CityStateExample.columns,
     applyLegendToRow: () => ['#000'],
-    displayGeoName,
-    displayDataAsText: d => d
+    displayGeoName
   }
 }
 

package/components/elements/Button.jsx

@@ -5,25 +5,41 @@ import LoadSpin from '../ui/LoadSpin'
 
 import '../../styles/v2/components/button.scss'
 
-const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false, loadingText = 'Loading...', flexCenter, active = false, onClick, children, ...attributes }) => {
+const Button = ({
+  style,
+  role,
+  hoverStyle = {},
+  fluid = false,
+  loading = false,
+  loadingText = 'Loading...',
+  flexCenter,
+  active = false,
+  onClick,
+  children,
+  ...attributes
+}) => {
   const buttonRef = useRef(null)
 
-  const [ buttonState, setButtonState ] = useState('out')
-  const [ customStyles, setCustomStyles ] = useState({ ...style })
-  const [ childrenWidth, setChildrenWidth ] = useState()
-  const [ loadtextWidth, setLoadtextWidth ] = useState()
+  const [buttonState, setButtonState] = useState('out')
+  const [customStyles, setCustomStyles] = useState({ ...style })
+  const [childrenWidth, setChildrenWidth] = useState()
+  const [loadtextWidth, setLoadtextWidth] = useState()
 
   const attributesObj = {
     ...attributes,
     style: customStyles,
-    className: 'cove-button' + (flexCenter || 'loader' === role ? ' cove-button--flex-center' : '') + (fluid ? ' fluid' : '') + (loading ? ' loading' : '') + (attributes.className ? ' ' + attributes.className : ''),
+    className:
+      'cove-button' +
+      (flexCenter || 'loader' === role ? ' cove-button--flex-center' : '') +
+      (fluid ? ' fluid' : '') +
+      (loading ? ' loading' : '') +
+      (attributes.className ? ' ' + attributes.className : ''),
     onMouseOver: () => setButtonState('in'),
     onMouseOut: () => setButtonState('out'),
     onFocus: () => setButtonState('in'),
     onBlur: () => setButtonState('out')
   }
 
-
   useEffect(() => {
     if ('loader' === role && buttonRef.current) {
       //Create ghost object and text nodes for children
@@ -54,9 +70,8 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
       buttonRef.current.parentNode.removeChild(ghostSpan)
       buttonRef.current.parentNode.removeChild(ghostLoaderSpan)
     }
-    return () => {
-    }
-  }, [ buttonRef, children, loadingText, role ])
+    return () => {}
+  }, [buttonRef, children, loadingText, role])
 
   useEffect(() => {
     //Adjust button styles depending on cursor, focus, and active, states
@@ -64,9 +79,10 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
 
     // If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
     if (buttonState === 'out')
-      // If button state is out, and not 'active', reset display styles back to default
-      if (!active) setCustomStyles({ ...style })
-  }, [ buttonState, active, style ])
+      if (!active)
+        // If button state is out, and not 'active', reset display styles back to default
+        setCustomStyles({ ...style })
+  }, [buttonState, active, style])
 
   return (
     <button
@@ -82,16 +98,19 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
         <>
           {'loader' === role && (
             <>
-              <span className="cove-button__text" style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}>
-                <div className="cove-button__text--loading" style={loading ? { opacity: 1 } : null}>
+              <span
+                className='cove-button__text'
+                style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}
+              >
+                <div className='cove-button__text--loading' style={loading ? { opacity: 1 } : null}>
                   {loadingText}
                 </div>
-                <div className="cove-button__text--children" style={loading ? { opacity: 0 } : null}>
+                <div className='cove-button__text--children' style={loading ? { opacity: 0 } : null}>
                   {children}
                 </div>
               </span>
-              <div className="cove-button__load-spin" style={loading ? { width: '28px', opacity: 1 } : null}>
-                <LoadSpin className="ml-1" size={20}/>
+              <div className='cove-button__load-spin' style={loading ? { width: '28px', opacity: 1 } : null}>
+                <LoadSpin className='ms-1' size={20} />
               </div>
             </>
           )}
@@ -104,7 +123,7 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
 
 Button.propTypes = {
   /** Specify special role type for button */
-  role: PropTypes.oneOf([ 'loader' ]),
+  role: PropTypes.oneOf(['loader']),
   /** Provide object with styles that overwrite base styles when hovered */
   hoverStyle: PropTypes.object,
   /** Enables button to stretch to the full width of the content */

package/components/elements/Confirm.tsx

@@ -0,0 +1,45 @@
+import Button from './Button.jsx'
+import React from 'react'
+import { missingRequiredSections } from '../../helpers/missingRequiredSections.js'
+const Confirm = props => {
+  const { updateConfig, config } = props
+  const confirmDone = e => {
+    if (e) {
+      e.preventDefault()
+    }
+
+    let newConfig = { ...config }
+    delete newConfig.newViz
+
+    updateConfig(newConfig)
+  }
+
+  const styles: React.CSSProperties = {
+    position: 'relative',
+    height: '100vh',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridArea: 'content'
+  }
+
+  return (
+    <section className='waiting' style={styles}>
+      <section className='waiting-container'>
+        <h3>Finish Configuring</h3>
+        <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+        <Button
+          className='btn btn-primary'
+          style={{ margin: '1em auto' }}
+          disabled={missingRequiredSections(config)}
+          onClick={e => confirmDone(e)}
+        >
+          I'm Done
+        </Button>
+      </section>
+    </section>
+  )
+}
+
+export default Confirm

package/components/elements/Error.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+const Error = ({ errorMessage }) => {
+  const styles: React.CSSProperties = {
+    position: 'absolute',
+    background: 'white',
+    zIndex: '999',
+    height: '100vh',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridArea: 'content'
+  }
+  return (
+    <section className='waiting' style={styles}>
+      <section className='waiting-container'>
+        <h3>Error With Configuration</h3>
+        <p>{errorMessage}</p>
+      </section>
+    </section>
+  )
+}
+
+export default Error