@cdc/map 4.24.9-1 → 4.24.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/map",
-  "version": "4.24.9-1",
+  "version": "4.24.10",
   "description": "React component for visualizing tabular data on a map of the United States or the world.",
   "moduleName": "CdcMap",
   "main": "dist/cdcmap",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@cdc/core": "^4.24.9-1",
+    "@cdc/core": "^4.24.10",
     "@emotion/core": "^10.0.28",
     "@emotion/react": "^11.1.5",
     "@hello-pangea/dnd": "^16.2.0",
@@ -52,5 +52,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "4a77c2fa79c8fa6074da3b6dfee3d8e32f0b2586"
+  "gitHead": "a4d88d1bc91f596e1b0307d8e25c57ad8c668b75"
 }

package/src/CdcMap.tsx

@@ -30,7 +30,6 @@ import { publish } from '@cdc/core/helpers/events'
 import coveUpdateWorker from '@cdc/core/helpers/coveUpdateWorker'
 import { getQueryStringFilterValue } from '@cdc/core/helpers/queryStringUtils'
 import Title from '@cdc/core/components/ui/Title'
-import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 
 // Data
 import { countryCoordinates } from './data/country-coordinates'
@@ -1463,6 +1462,11 @@ const CdcMap = ({
       if (newData) {
         newState.data = newData
       }
+    } else if (newState.formattedData) {
+      newState.data = newState.formattedData
+    } else if (newState.dataDescription) {
+      newState.data = transform.autoStandardize(newState.data)
+      newState.data = transform.developerStandardize(newState.data, newState.dataDescription)
     }
 
     // This code goes through and adds the defaults for every property declaring in the initial state at the top.
@@ -1725,7 +1729,6 @@ const CdcMap = ({
     tooltipRef,
     topoData,
     setTopoData,
-    getTextWidth,
     mapId
   }
 
@@ -1842,7 +1845,9 @@ const CdcMap = ({
                       {'us-region' === geoType && <UsaMap.Region />}
                       {'us-county' === geoType && <UsaMap.County />}
                       {'world' === geoType && <WorldMap />}
-                      {'data' === general.type && logo && <img src={logo} alt='' className='map-logo' />}
+                      {'data' === general.type && logo && (
+                        <img src={logo} alt='' className='map-logo' style={{ maxWidth: '50px' }} />
+                      )}
                     </>
                   )}
                 </section>
@@ -1926,8 +1931,6 @@ const CdcMap = ({
 
               {state.annotations.length > 0 && <Annotation.Dropdown />}
 
-              {state.annotations.length > 0 && <Annotation.Dropdown />}
-
               {general.footnotes && <section className='footnotes'>{parse(general.footnotes)}</section>}
             </section>
           )}

package/src/_stories/CdcMap.stories.tsx

@@ -30,7 +30,8 @@ export const Equal_Number_Map: Story = {
 
 export const Scale_Based: Story = {
   args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Scale-Based-Categorical-Map-With-Special-Classes.json'
+    configUrl:
+      'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Scale-Based-Categorical-Map-With-Special-Classes.json'
   }
 }
 export const Qualitative: Story = {
@@ -86,11 +87,6 @@ export const Custom_Map_Layers: Story = {
     configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/custom-layer-map.json'
   }
 }
-export const Geocode: Story = {
-  args: {
-    configUrl: 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/example-u-s-geo-code-dat.json'
-  }
-}
 
 export const Single_State_With_Filters: Story = {
   args: {

package/src/components/Annotation/AnnotationDropdown.styles.css

@@ -1,6 +1,5 @@
 .cdc-open-viz-module {
   .annotation__dropdown-list {
-    border: 1px solid red;
     list-style: none;
   }
 

package/src/components/CityList.tsx

@@ -8,7 +8,18 @@ import { getFilterControllingStatePicked } from './UsaMap/helpers/map'
 
 import ConfigContext from '../context'
 
-const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, applyLegendToRow, titleCase, setSharedFilterValue, isFilterValueSupported, tooltipId, projection }) => {
+const CityList = ({
+  data,
+  geoClickHandler,
+  applyTooltipsToGeo,
+  displayGeoName,
+  applyLegendToRow,
+  titleCase,
+  setSharedFilterValue,
+  isFilterValueSupported,
+  tooltipId,
+  projection
+}) => {
   const [citiesData, setCitiesData] = useState({})
   const { scale, state, topoData, runtimeData, position } = useContext(ConfigContext)
   if (!projection) return
@@ -28,7 +39,9 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
 
   if (state.general.type === 'bubble') {
     const maxDataValue = Math.max(...(data ? Object.keys(data).map(key => data[key][state.columns.primary.name]) : [0]))
-    const sortedRuntimeData = Object.values(data).sort((a, b) => (a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1))
+    const sortedRuntimeData = Object.values(data).sort((a, b) =>
+      a[state.columns.primary.name] < b[state.columns.primary.name] ? 1 : -1
+    )
     if (!sortedRuntimeData) return
 
     // Set bubble sizes
@@ -84,7 +97,12 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
 
     let transform = ''
 
-    if (!geoData?.[state.columns.longitude.name] && !geoData?.[state.columns.latitude.name] && city && supportedCities[city.toUpperCase()]) {
+    if (
+      !geoData?.[state.columns.longitude.name] &&
+      !geoData?.[state.columns.latitude.name] &&
+      city &&
+      supportedCities[city.toUpperCase()]
+    ) {
       transform = `translate(${projection(supportedCities[city.toUpperCase()])})`
     }
 
@@ -96,7 +114,11 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
       needsPointer = true
     }
 
-    if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name] && state.general.geoType === 'single-state') {
+    if (
+      geoData?.[state.columns.longitude.name] &&
+      geoData?.[state.columns.latitude.name] &&
+      state.general.geoType === 'single-state'
+    ) {
       const statePicked = getFilterControllingStatePicked(state, runtimeData)
       const _statePickedData = topoData?.states?.find(s => s.properties.name === statePicked)
       // SVG ITEMS
@@ -112,8 +134,9 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
         _statePickedData
       )
       let coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
-      console.log('COORDINATES', coords)
-      transform = `translate(${newProjection(coords)}) scale(${state.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)})`
+      transform = `translate(${newProjection(coords)}) scale(${
+        state.visual.geoCodeCircleSize / (position.zoom > 1 ? position.zoom : 1)
+      })`
       needsPointer = true
     }
 
@@ -123,8 +146,20 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
 
     const styles = {
       fill: legendColors[0],
-      opacity: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] !== setSharedFilterValue ? 0.5 : 1,
-      stroke: setSharedFilterValue && isFilterValueSupported && data[city] && data[city][state.columns.geo.name] === setSharedFilterValue ? 'rgba(0, 0, 0, 1)' : 'rgba(0, 0, 0, 0.4)',
+      opacity:
+        setSharedFilterValue &&
+        isFilterValueSupported &&
+        data[city] &&
+        data[city][state.columns.geo.name] !== setSharedFilterValue
+          ? 0.5
+          : 1,
+      stroke:
+        setSharedFilterValue &&
+        isFilterValueSupported &&
+        data[city] &&
+        data[city][state.columns.geo.name] === setSharedFilterValue
+          ? 'rgba(0, 0, 0, 1)'
+          : 'rgba(0, 0, 0, 0.4)',
       '&:hover': {
         fill: legendColors[1],
         outline: 0
@@ -137,7 +172,10 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
     }
 
     // If we need to add a cursor pointer
-    if ((state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) || state.tooltips.appearanceType === 'click') {
+    if (
+      (state.columns.navigate && geoData?.[state.columns.navigate.name] && geoData[state.columns.navigate.name]) ||
+      state.tooltips.appearanceType === 'click'
+    ) {
       styles.cursor = 'pointer'
     }
 
@@ -174,8 +212,14 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
       })
 
     if (cityStyle !== undefined && cityStyle.shape) {
-      if (!geoData?.[state.columns.longitude.name] && !geoData?.[state.columns.latitude.name] && city && supportedCities[city.toUpperCase()]) {
+      if (
+        !geoData?.[state.columns.longitude.name] &&
+        !geoData?.[state.columns.latitude.name] &&
+        city &&
+        supportedCities[city.toUpperCase()]
+      ) {
         let translate = `translate(${projection(supportedCities[city.toUpperCase()])})`
+
         return (
           <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
             {cityStyleShapes[cityStyle.shape.toLowerCase()]}
@@ -186,6 +230,7 @@ const CityList = ({ data, geoClickHandler, applyTooltipsToGeo, displayGeoName, a
       if (geoData?.[state.columns.longitude.name] && geoData?.[state.columns.latitude.name]) {
         const coords = [Number(geoData?.[state.columns.longitude.name]), Number(geoData?.[state.columns.latitude.name])]
         let translate = `translate(${projection(coords)})`
+        console.log(translate, 'translate')
         return (
           <g key={i} transform={translate} style={styles} className='geo-point' tabIndex={-1}>
             {cityStyleShapes[cityStyle.shape.toLowerCase()]}

package/src/components/DataTable.tsx

@@ -13,7 +13,25 @@ import Loading from '@cdc/core/components/Loading'
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex, jsx-a11y/no-static-element-interactions */
 const DataTable = props => {
-  const { state, tableTitle, indexTitle, mapTitle, rawData, runtimeData, headerColor, expandDataTable, columns, displayDataAsText, applyLegendToRow, displayGeoName, navigationHandler, viewport, formatLegendLocation, tabbingId, setFilteredCountryCode } = props
+  const {
+    state,
+    tableTitle,
+    indexTitle,
+    mapTitle,
+    rawData,
+    runtimeData,
+    headerColor,
+    expandDataTable,
+    columns,
+    displayDataAsText,
+    applyLegendToRow,
+    displayGeoName,
+    navigationHandler,
+    viewport,
+    formatLegendLocation,
+    tabbingId,
+    setFilteredCountryCode
+  } = props
 
   const [expanded, setExpanded] = useState(expandDataTable)
   const [sortBy, setSortBy] = useState({ column: 'geo', asc: false })
@@ -140,7 +158,9 @@ const DataTable = props => {
       csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: displayGeoName(row[state.columns.geo.name]), ...row })))
     } else {
       // Unparse + Add column for full Geo name
-      csvData = Papa.unparse(rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row })))
+      csvData = Papa.unparse(
+        rawData.map(row => ({ FullGeoName: formatLegendLocation(row[state.columns.geo.name]), ...row }))
+      )
     }
 
     const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' })
@@ -154,16 +174,36 @@ const DataTable = props => {
     }
 
     return (
-      <a download={fileName} type='button' onClick={saveBlob} href={URL.createObjectURL(blob)} aria-label='Download this data in a CSV file format.' className={`${headerColor} no-border`} id={`${skipId}`} data-html2canvas-ignore role='button'>
+      <a
+        download={fileName}
+        type='button'
+        onClick={saveBlob}
+        href={URL.createObjectURL(blob)}
+        aria-label='Download this data in a CSV file format.'
+        className={`${headerColor} no-border`}
+        id={`${skipId}`}
+        data-html2canvas-ignore
+        role='button'
+      >
         Download Data (CSV)
       </a>
     )
   }, [rawData, state.table])
 
+  const TableMediaControls = ({ belowTable }) => {
+    return (
+      <MediaControls.Section classes={['download-links'] + (belowTable ? 'below-table' : '')}>
+        <MediaControls.Link config={state} />
+        {state.general.showDownloadButton && <DownloadButton />}
+      </MediaControls.Section>
+    )
+  }
+
   // Change accessibility label depending on expanded status
   useEffect(() => {
     const expandedLabel = 'Accessible data table.'
-    const collapsedLabel = 'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
+    const collapsedLabel =
+      'Accessible data table. This table is currently collapsed visually but can still be read using a screen reader.'
 
     if (expanded === true && accessibilityLabel !== expandedLabel) {
       setAccessibilityLabel(expandedLabel)
@@ -180,7 +220,10 @@ const DataTable = props => {
   const rows = Object.keys(runtimeData)
     .filter(row => applyLegendToRow(runtimeData[row]))
     .sort((a, b) => {
-      const sortVal = customSort(runtimeData[a][state.columns[sortBy.column].name], runtimeData[b][state.columns[sortBy.column].name])
+      const sortVal = customSort(
+        runtimeData[a][state.columns[sortBy.column].name],
+        runtimeData[b][state.columns[sortBy.column].name]
+      )
       if (!sortBy.asc) return sortVal
       if (sortVal === 0) return 0
       if (sortVal < 0) return 1
@@ -189,11 +232,12 @@ const DataTable = props => {
 
   return (
     <ErrorBoundary component='DataTable'>
-      <MediaControls.Section classes={['download-links']}>
-        <MediaControls.Link config={state} />
-        {state.general.showDownloadButton && <DownloadButton />}
-      </MediaControls.Section>
-      <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
+      {!state.table.showDownloadLinkBelow && <TableMediaControls />}
+      <section
+        id={tabbingId.replace('#', '')}
+        className={`data-table-container ${viewport}`}
+        aria-label={accessibilityLabel}
+      >
         <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
         <div
           className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
@@ -210,9 +254,23 @@ const DataTable = props => {
           <Icon display={expanded ? 'minus' : 'plus'} base />
           {tableTitle}
         </div>
-        <div className='table-container' style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}>
-          <table height={expanded ? null : 0} role='table' aria-live='assertive' className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'} hidden={!expanded} aria-rowcount={state?.data.length ? state.data.length : '-1'}>
-            <caption className='cdcdataviz-sr-only'>{state.dataTable.caption ? state.dataTable.caption : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}</caption>
+        <div
+          className='table-container'
+          style={{ maxHeight: state.dataTable.limitHeight && `${state.dataTable.height}px`, overflowY: 'scroll' }}
+        >
+          <table
+            height={expanded ? null : 0}
+            role='table'
+            aria-live='assertive'
+            className={expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}
+            hidden={!expanded}
+            aria-rowcount={state?.data.length ? state.data.length : '-1'}
+          >
+            <caption className='cdcdataviz-sr-only'>
+              {state.dataTable.caption
+                ? state.dataTable.caption
+                : `Datatable showing data for the ${mapLookup[state.general.geoType]} figure.`}
+            </caption>
             <thead style={{ position: 'sticky', top: 0, zIndex: 999 }}>
               <tr>
                 {Object.keys(columns)
@@ -240,11 +298,19 @@ const DataTable = props => {
                             setSortBy({ column, asc: sortBy.column === column ? !sortBy.asc : false })
                           }
                         }}
-                        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)}
+                        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)}
                       >
                         {text}
-                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'} order`}</span>
+                        <span className='cdcdataviz-sr-only'>{`Sort by ${text} in ${
+                          sortBy.column === column ? (!sortBy.asc ? 'descending' : 'ascending') : 'descending'
+                        } order`}</span>
                       </th>
                     )
                   })}
@@ -283,7 +349,17 @@ const DataTable = props => {
                         }
 
                         return (
-                          <td tabIndex='0' role='gridcell' onClick={e => (state.general.type === 'bubble' && state.general.allowMapZoom && state.general.geoType === 'world' ? setFilteredCountryCode(row) : true)}>
+                          <td
+                            tabIndex='0'
+                            role='gridcell'
+                            onClick={e =>
+                              state.general.type === 'bubble' &&
+                              state.general.allowMapZoom &&
+                              state.general.geoType === 'world'
+                                ? setFilteredCountryCode(row)
+                                : true
+                            }
+                          >
                             {cellValue}
                           </td>
                         )
@@ -295,6 +371,7 @@ const DataTable = props => {
           </table>
         </div>
       </section>
+      {state.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
       <div id={skipId} className='cdcdataviz-sr-only'>
         Skipped data table.
       </div>

package/src/components/EditorPanel/components/EditorPanel.tsx

@@ -541,6 +541,15 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
           }
         })
         break
+      case 'toggleDownloadLinkBelow':
+        setState({
+          ...state,
+          table: {
+            ...state.table,
+            showDownloadLinkBelow: !state.table.showDownloadLinkBelow
+          }
+        })
+        break
       case 'toggleDownloadPdfButton':
         setState({
           ...state,
@@ -1153,12 +1162,20 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
   function filterColorPalettes() {
     let sequential = []
     let nonSequential = []
+    let accessibleColors = []
     for (let paletteName in colorPalettes) {
       if (!isReversed) {
         if (paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
           nonSequential.push(paletteName)
         }
-        if (!paletteName.includes('qualitative') && !paletteName.endsWith('reverse')) {
+        if (paletteName.includes('colorblindsafe') && !paletteName.endsWith('reverse')) {
+          accessibleColors.push(paletteName)
+        }
+        if (
+          !paletteName.includes('qualitative') &&
+          !paletteName.includes('colorblindsafe') &&
+          !paletteName.endsWith('reverse')
+        ) {
           sequential.push(paletteName)
         }
       }
@@ -1166,15 +1183,22 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
         if (paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
           nonSequential.push(paletteName)
         }
-        if (!paletteName.includes('qualitative') && paletteName.endsWith('reverse')) {
+        if (paletteName.includes('colorblindsafe') && paletteName.endsWith('reverse')) {
+          accessibleColors.push(paletteName)
+        }
+        if (
+          !paletteName.includes('qualitative') &&
+          !paletteName.includes('colorblindsafe') &&
+          paletteName.endsWith('reverse')
+        ) {
           sequential.push(paletteName)
         }
       }
     }
 
-    return [sequential, nonSequential]
+    return [sequential, nonSequential, accessibleColors]
   }
-  const [sequential, nonSequential] = filterColorPalettes()
+  const [sequential, nonSequential, accessibleColors] = filterColorPalettes()
 
   useEffect(() => {
     let paletteName = ''
@@ -3084,6 +3108,16 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   />
                   <span className='edit-label'>Enable Image Download</span>
                 </label>
+                <label className='checkbox'>
+                  <input
+                    type='checkbox'
+                    checked={state.table.showDownloadLinkBelow}
+                    onChange={event => {
+                      handleEditorChanges('toggleDownloadLinkBelow', event.target.checked)
+                    }}
+                  />
+                  <span className='edit-label'>Show Download Link Below Table</span>
+                </label>
                 {/* <label className='checkbox'>
                       <input
                         type='checkbox'
@@ -3286,6 +3320,41 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                   )
                 })}
               </ul>
+              <span>Colorblind Safe</span>
+              <ul className='color-palette'>
+                {accessibleColors.map(palette => {
+                  const colorOne = {
+                    backgroundColor: colorPalettes[palette][2]
+                  }
+
+                  const colorTwo = {
+                    backgroundColor: colorPalettes[palette][4]
+                  }
+
+                  const colorThree = {
+                    backgroundColor: colorPalettes[palette][6]
+                  }
+
+                  // hide palettes with too few colors for region maps
+                  if (colorPalettes[palette].length <= 8 && state.general.geoType === 'us-region') {
+                    return ''
+                  }
+                  return (
+                    <li
+                      title={palette}
+                      key={palette}
+                      onClick={() => {
+                        handleEditorChanges('color', palette)
+                      }}
+                      className={state.color === palette ? 'selected' : ''}
+                    >
+                      <span style={colorOne}></span>
+                      <span style={colorTwo}></span>
+                      <span style={colorThree}></span>
+                    </li>
+                  )
+                })}
+              </ul>
               <label>
                 Geocode Settings
                 <TextField
@@ -3370,14 +3439,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                     >
                       <option value='circle'>Circle</option>
                       <option value='pin'>Pin</option>
-                      {'us-geocode' !== state.general.type && (
-                        <>
-                          <option value='square'>Square</option>
-                          <option value='triangle'>Triangle</option>
-                          <option value='diamond'>Diamond</option>
-                          <option value='star'>Star</option>
-                        </>
-                      )}
+                      <option value='square'>Square</option>
+                      <option value='triangle'>Triangle</option>
+                      <option value='diamond'>Diamond</option>
+                      <option value='star'>Star</option>
                     </select>
                   </label>
                   <TextField
@@ -3461,11 +3526,10 @@ const EditorPanel = ({ columnsRequiredChecker }) => {
                       </div>
                     )
                   })}
-                {'us-geocode' !== state.general.type && (
-                  <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
-                    Add city style
-                  </button>
-                )}
+
+                <button type='button' onClick={() => editCityStyles('add', 0, '', '')} className='btn full-width'>
+                  Add city style
+                </button>
               </>
               <label htmlFor='opacity'>
                 <TextField

package/src/components/Legend/components/Legend.tsx

@@ -38,7 +38,6 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     setRuntimeLegend,
     state,
     viewport,
-    getTextWidth,
     mapId
   } = useContext(ConfigContext)
 
@@ -278,7 +277,6 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
               dimensions={dimensions}
               currentViewport={currentViewport}
               config={state}
-              getTextWidth={getTextWidth}
             />
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
               {state.legend.style === 'gradient' ? '' : legendList()}

package/src/components/Legend/components/index.scss

@@ -1,5 +1,4 @@
-@import '@cdc/core/styles/base';
-@import '@cdc/core/styles/heading-colors';
+@import '../../../scss/mixins';
 
 .cdc-map-inner-container {
   .map-container.world aside.side {
@@ -7,7 +6,7 @@
   }
   @include breakpointClass(md) {
     .map-container.world aside.side {
-      border-top: $lightGray 1px solid;
+      border-top: var(--lightGray) 1px solid;
       position: absolute;
       box-shadow: rgba(0, 0, 0, 0.2) 0 10px 18px;
     }
@@ -16,12 +15,10 @@
   aside {
     background-color: #fff;
     z-index: 6;
-    border-top: $lightGray 1px solid;
-
+    border-top: var(--lightGray) 1px solid;
     @include breakpointClass(md) {
-      &.bottom,
-      &.top {
-        border: $lightGray 1px solid;
+      &.bottom, &.top {
+        border: var(--lightGray) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -32,7 +29,7 @@
         align-self: flex-start;
         z-index: 4;
         right: 1em;
-        border: $lightGray 1px solid;
+        border: var(--lightGray) 1px solid;
         top: 2em;
         right: 1em;
 
@@ -101,7 +98,10 @@
         list-style: none;
         padding-top: 1em;
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr;
+        @include breakpoint(md) {
+          grid-template-columns: 1fr 1fr;
+        }
 
         button {
           font-size: unset;
@@ -129,8 +129,11 @@
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
-          white-space: nowrap;
+          white-space: wrap;
           flex-grow: 1;
+          @include breakpoint(md) {
+            white-space: nowrap;
+          }
 
           &.legend-container__li--disabled {
             opacity: 0.4;
@@ -149,11 +152,14 @@
         & > li {
           margin-right: 1em;
           margin-bottom: 1em;
-          white-space: nowrap;
+          white-space: wrap;
           display: flex;
           justify-content: center;
           align-items: center;
           vertical-align: middle;
+          @include breakpoint(md) {
+            white-space: nowrap;
+          }
 
           & svg {
             vertical-align: baseline;