@cdc/core 4.24.12 → 4.25.1

package/components/Filters/Filters.tsx

@@ -41,18 +41,25 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   {
     label: 'Custom',
     value: 'cust'
-  }
+  },
+  { label: 'Order By Data Column', value: 'column' }
 ]
 
-const hasStandardFilterBehavior = ['chart', 'table']
-
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
-  const { type, data } = visualizationConfig
+  const {
+    config: visualizationConfig,
+    setConfig,
+    filteredData,
+    setFilteredData,
+    excludedData,
+    getUniqueValues,
+    standaloneMap
+  } = props
+  const { data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -72,9 +79,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type)
-      ? [...visualizationConfig.filters]
-      : [...filteredData]
+    const filtersCopy = !standaloneMap ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -86,7 +91,7 @@ export const useFilters = props => {
     // Update the filters
     filtersCopy[filterIndex] = filterItem
 
-    if (visualizationConfig.type === 'map') {
+    if (standaloneMap) {
       setFilteredData(filtersCopy)
     }
 
@@ -94,13 +99,13 @@ export const useFilters = props => {
   }
 
   const changeFilterActive = (index, value) => {
-    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
 
+    const newFilter = newFilters[index]
     if (visualizationConfig.filterBehavior === 'Apply Button') {
-      newFilters[index].queuedActive = value
+      newFilter.queuedActive = value
       setShowApplyButton(true)
     } else {
-      const newFilter = newFilters[index]
       if (newFilter.filterStyle !== 'nested-dropdown') {
         newFilter.active = value
       } else {
@@ -120,7 +125,7 @@ export const useFilters = props => {
         queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
         updateQueryString(queryParams)
       }
-      setFilteredData(newFilters[index])
+      setFilteredData(newFilters)
     }
 
     if (!visualizationConfig.dynamicSeries) {
@@ -132,15 +137,12 @@ export const useFilters = props => {
     }
 
     // Used for setting active filter, fromHash breaks the filteredData functionality.
-    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
     }
 
     // If we're on a chart and not using the apply button
-    if (
-      hasStandardFilterBehavior.includes(visualizationConfig.type) &&
-      visualizationConfig.filterBehavior === 'Filter Change'
-    ) {
+    if (!standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       const newFilteredData = filterVizData(newFilters, excludedData)
       setFilteredData(newFilteredData)
 
@@ -204,11 +206,9 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
-    }
-
-    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+    } else {
       setFilteredData(filterVizData(newFilters, excludedData))
     }
 
@@ -240,7 +240,7 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterVizData(newFilters, excludedData))
@@ -274,13 +274,12 @@ type FilterProps = {
   setFilteredData: Function
   // updating function for setting fitlerBehavior
   setConfig: Function
-  // exclusions
-  exclusions: any[]
+  standaloneMap?: boolean
 }
 
 const Filters = (props: FilterProps) => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, standaloneMap } = props
+  const { filters, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const id = useId()
@@ -363,7 +362,7 @@ const Filters = (props: FilterProps) => {
 
   const vizFiltersWithValues = useMemo(() => {
     // Here charts is using config.filters where maps is using a runtime value
-    let vizfilters = type === 'map' ? filteredData : filters
+    let vizfilters = standaloneMap ? filteredData : filters
     if (!vizfilters) return []
     if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
     return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
@@ -437,16 +436,23 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
-        'form-group mr-3',
+        'form-group',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
       const showDefaultDropdown = (filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt
+      const [nestedActiveGroup, nestedActiveSubGroup] = useMemo<string[]>(() => {
+        if (filterStyle !== 'nested-dropdown') return []
+        return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [
+          string,
+          string
+        ]
+      }, [singleFilter])
       return (
         <div className={classList.join(' ')} key={outerIndex}>
           <>
             {label && (
-              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+              <label className='font-weight-bold mb-2' htmlFor={`filter-${outerIndex}`}>
                 {label}
               </label>
             )}
@@ -464,8 +470,8 @@ const Filters = (props: FilterProps) => {
             )}
             {filterStyle === 'nested-dropdown' && (
               <NestedDropdown
-                activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
-                activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                activeGroup={nestedActiveGroup}
+                activeSubGroup={nestedActiveSubGroup}
                 filterIndex={outerIndex}
                 options={getNestedOptions(singleFilter)}
                 listLabel={label}
@@ -492,18 +498,18 @@ const Filters = (props: FilterProps) => {
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
-    const conditionalClass = type === 'map' ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
 
-    return [baseClass, conditionalClass, legendClass].filter(Boolean)
+    return [baseClass, conditionalClass, legendClass, 'w-100'].filter(Boolean)
   }
 
   return (
     <section className={getClasses().join(' ')}>
       {visualizationConfig.filterIntro && (
-        <p className='filters-section__intro-text'>{visualizationConfig.filterIntro}</p>
+        <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
+      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper'>
         {' '}
         <>
           <Style />

package/components/Filters/helpers/handleSorting.ts

@@ -7,6 +7,11 @@ export const handleSorting = singleFilter => {
     return singleFilter
   }
 
+  if (singleFilter.order === 'column') {
+    // sorting is done in the generateValuesForFilter function
+    return singleFilter
+  }
+
   const sort = (a, b) => {
     const asc = singleFilter.order !== 'desc'
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })

package/components/Footnotes/Footnotes.tsx

@@ -12,7 +12,7 @@ const Footnotes: React.FC<FootnotesProps> = ({ footnotes }) => {
         {footnotes.map((note, i) => {
           return (
             <li key={note.symbol + i} className='mb-1'>
-              {note.symbol && <span className='mr-1'>{note.symbol}</span>}
+              {note.symbol && <span className='me-1'>{note.symbol}</span>}
               {note.text}
             </li>
           )

package/components/Layout/components/Visualization/index.tsx

@@ -17,10 +17,17 @@ type VisualizationWrapper = {
 }
 
 const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) => {
-  const { config = {}, isEditor = false, currentViewport = 'lg', imageId = '', showEditorPanel = true, className } = props
+  const {
+    config = {},
+    isEditor = false,
+    currentViewport = 'lg',
+    imageId = '',
+    showEditorPanel = true,
+    className
+  } = props
 
   const getWrappingClasses = () => {
-    let classes = ['cdc-open-viz-module', `${currentViewport}`, `font-${config?.fontSize}`, `${config?.theme}`]
+    let classes = ['cdc-open-viz-module', `${currentViewport}`, `${config?.theme}`]
 
     if (className) {
       classes.push(className)
@@ -40,7 +47,7 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'filtered-text') {
-      classes.push('type-filtered-text')
+      classes.push('type-filtered-text', `font-${config.fontSize}`)
       classes = classes.filter(item => item !== 'cove-component__content')
       return classes
     }
@@ -67,7 +74,14 @@ const Visualization: React.FC<VisualizationWrapper> = forwardRef((props, ref) =>
     }
 
     if (config.type === 'waffle-chart') {
-      classes.push('cove', 'cdc-open-viz-module', 'type-waffle-chart', currentViewport, config.theme, 'font-' + config.overallFontSize)
+      classes.push(
+        'cove',
+        'cdc-open-viz-module',
+        'type-waffle-chart',
+        currentViewport,
+        config.theme,
+        'font-' + config.overallFontSize
+      )
 
       if (isEditor) {
         classes.push('is-editor')

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px 25px 0 !important;
+    padding: 0 15px 27px 0 !important;
   }
   &.isEditor {
     overflow: auto;

package/components/Legend/Legend.Gradient.tsx

@@ -92,10 +92,7 @@ const LegendGradient = ({
 
   if (style === 'gradient') {
     return (
-      <svg
-        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
-        height={newHeight}
-      >
+      <svg className={'w-100 overflow-visible'} height={newHeight}>
         {/* background border*/}
         <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}

package/components/Legend/index.tsx

@@ -28,7 +28,7 @@ const ResetButton = props => {
   if (config.runtime.disabledAmt === 0) return <></>
 
   return (
-    <button onClick={handleReset} className={legendClasses.resetButton.join(' ') || ''}>
+    <button onClick={handleReset} className={legendClasses.showAllButton.join(' ') || ''}>
       Reset
     </button>
   )

package/components/LegendShape.tsx

@@ -10,9 +10,8 @@ interface LegendShapeProps {
 const LegendShape: React.FC<LegendShapeProps> = props => {
   const { fill, borderColor, display = 'inline-block', shape = 'circle' } = props
   const dimensions = { width: '1em', height: '1em' }
-  const marginRight = ['circle', 'square'].includes(shape) ? '5px' : '0'
+  const isCircleOrSquare = ['circle', 'square'].includes(shape)
   const styles = {
-    marginRight: marginRight,
     borderRadius: shape === 'circle' ? '50%' : '0px',
     verticalAlign: 'middle',
     display: display,
@@ -22,7 +21,7 @@ const LegendShape: React.FC<LegendShapeProps> = props => {
     backgroundColor: fill
   }
 
-  return <span className='legend-item' style={styles} />
+  return <span className={`legend-item ${isCircleOrSquare ? 'me-2' : ''}`} style={styles} />
 }
 
 export default LegendShape

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

@@ -124,25 +124,21 @@ 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 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,14 +216,13 @@ 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 => {
@@ -265,7 +260,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}
@@ -303,7 +298,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,
   .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,7 +70,6 @@
     &.disabled {
       background-color: var(--lightestGray);
       & > :is(input) {
-        color: var(--darkGray);
         background-color: var(--lightestGray);
       }
     }

package/components/Table/Table.tsx

@@ -22,7 +22,6 @@ 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[]
 }
@@ -39,7 +38,6 @@ const Table = ({
   tableOptions,
   wrapColumns,
   hasRowType,
-  fontSize,
   viewport,
   preliminaryData
 }: TableProps) => {
@@ -71,7 +69,6 @@ const Table = ({
                         childRow={row}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
                       />
                     )
@@ -92,7 +89,6 @@ const Table = ({
                         childRow={childRow}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
                       />
                     )
@@ -110,7 +106,6 @@ const Table = ({
                             isTotal={true}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
                           />
                         )
@@ -125,7 +120,6 @@ const Table = ({
                             childRow={childRowCopy}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
                           />
                         )

package/components/Table/components/Row.tsx

@@ -8,18 +8,15 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
-  fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   style?: object
   preliminaryData?: PreliminaryDataItem[]
 }
 
 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 } = 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>
@@ -34,7 +31,7 @@ const Row: FC<RowProps> = props => {
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, fontSize: cellFontSize, ...style }}
+            style={{ whiteSpace, minWidth, ...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
   }
 }