@cdc/map 4.24.7 → 4.24.9

package/src/components/EditorPanel/components/Panels/Panel.Annotate.tsx

@@ -101,8 +101,6 @@ const PanelAnnotate: React.FC = props => {
   return (
     <Accordion>
       <Accordion.Section title={props.name}>
-        <p>Dragging state: {isDraggingAnnotation ? 'Dragging' : 'Not dragging'}</p>
-
         <label>
           Show Annotation Dropdown
           <input
@@ -225,26 +223,6 @@ const PanelAnnotate: React.FC = props => {
                       }}
                     />
                   </label>
-                  <label>
-                    Associated Series:
-                    <select
-                      onChange={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].seriesKey = e.target.value
-                        updateConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    >
-                      <option key='none' value='none'>
-                        None
-                      </option>
-                      {getColumns(false).map((column, columnIndex) => {
-                        return <option>{column}</option>
-                      })}
-                    </select>
-                  </label>
 
                   <label>
                     Connection Type:

package/src/components/EditorPanel/components/Panels/Panel.PatternSettings.tsx

@@ -6,13 +6,19 @@ import Button from '@cdc/core/components/elements/Button'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import './Panel.PatternSettings-style.css'
+import Alert from '@cdc/core/components/Alert'
+
+// topojson helpers for checking color contrasts
+import { feature } from 'topojson-client'
+import { checkColorContrast, getContrastColor, getColorContrast } from '@cdc/core/helpers/cove/accessibility'
+import topoJSON from '../../../UsaMap/data/us-topo.json'
 
 type PanelProps = {
   name: string
 }
 
 const PatternSettings = ({ name }: PanelProps) => {
-  const { state, setState } = useContext<MapContext>(ConfigContext)
+  const { state, setState, applyLegendToRow, runtimeData } = useContext<MapContext>(ConfigContext)
   const defaultPattern = 'circles'
   const patternTypes = ['circles', 'waves', 'lines']
 
@@ -24,7 +30,7 @@ const PatternSettings = ({ name }: PanelProps) => {
   /** Updates the map config with a new pattern item */
   const handleAddGeoPattern = () => {
     let patterns = [...state.map.patterns]
-    patterns.push({ dataKey: '', pattern: defaultPattern })
+    patterns.push({ dataKey: '', pattern: defaultPattern, contrastCheck: true })
     setState({
       ...state,
       map: {
@@ -36,16 +42,56 @@ const PatternSettings = ({ name }: PanelProps) => {
 
   /** Updates the map pattern at a given index */
   const handleUpdateGeoPattern = (value: string, index: number, keyToUpdate: 'dataKey' | 'pattern' | 'dataValue' | 'size' | 'label' | 'color') => {
+    const { features: unitedStates } = feature(topoJSON, topoJSON.objects.states)
     const updatedPatterns = [...state.map.patterns]
+
+    // Update the specific pattern with the new value
     updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value }
 
-    setState({
-      ...state,
+    // Iterate over each state feature
+    unitedStates.forEach(geo => {
+      const geoKey = geo.properties.iso
+      if (!geoKey || !runtimeData) return
+
+      const legendColors = runtimeData[geoKey] ? applyLegendToRow(runtimeData[geoKey]) : undefined
+      const geoData = runtimeData[geoKey]
+      if (!geoData) return
+
+      // Iterate over each pattern
+      state.map.patterns.forEach((patternData, patternIndex) => {
+        const hasMatchingValues = patternData.dataValue === geoData[patternData.dataKey]
+        if (!hasMatchingValues) return
+
+        const currentFill = legendColors[0]
+        const patternColor = keyToUpdate === 'color' && value !== '' ? value : getContrastColor('#000', currentFill)
+        const contrastCheck = checkColorContrast(currentFill, patternColor)
+
+        // Log a warning if the contrast check fails
+        if (!contrastCheck) {
+          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${patternData.dataKey} with:
+            pattern color: ${patternColor}
+            contrast: ${getColorContrast(currentFill, patternColor)}
+          `)
+        }
+
+        updatedPatterns[index] = { ...updatedPatterns[index], [keyToUpdate]: value, contrastCheck }
+      })
+    })
+
+    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+
+    // Update the state with the new patterns and error message
+    setState(prevState => ({
+      ...prevState,
       map: {
-        ...state.map,
+        ...prevState.map,
         patterns: updatedPatterns
+      },
+      runtime: {
+        ...prevState.runtime,
+        editorErrorMessage
       }
-    })
+    }))
   }
 
   const handleRemovePattern = index => {
@@ -60,12 +106,19 @@ const PatternSettings = ({ name }: PanelProps) => {
     })
   }
 
+  const checkPatternContrasts = () => {
+    return state.map.patterns.every(pattern => pattern.contrastCheck !== false)
+  }
+
   return (
     <AccordionItem>
       <AccordionItemHeading>
         <AccordionItemButton>{name}</AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>
+        {patterns.length > 0 && <Alert type={checkPatternContrasts() ? 'success' : 'danger'} message='Pattern colors must comply with <br /> <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 3:1 contrast ratio.' />}
+        <br />
+
         {patterns &&
           patterns.map((pattern, patternIndex) => {
             const dataValueOptions = [...new Set(data?.map(d => d?.[pattern?.dataKey]))]
@@ -77,13 +130,14 @@ const PatternSettings = ({ name }: PanelProps) => {
             dataKeyOptions.sort()
 
             return (
-              <Accordion allowZeroExpanded>
+              <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
                     <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
+                      {pattern.contrastCheck ?? true ? <Alert type='success' message='This pattern passes contrast checks' /> : <Alert type='danger' message='Error: <a href="https://webaim.org/resources/contrastchecker/" target="_blank"> Review Color Contrast</a>' />}{' '}
                       <label htmlFor={`pattern-dataKey--${patternIndex}`}>Data Key:</label>
                       <select id={`pattern-dataKey--${patternIndex}`} value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}>
                         {/* TODO: sort these? */}
@@ -95,17 +149,14 @@ const PatternSettings = ({ name }: PanelProps) => {
                           )
                         })}
                       </select>
-
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataValue')} id={`pattern-dataValue--${patternIndex}`} value={pattern.dataValue === '' ? '' : pattern.dataValue} />
                       </label>
-
                       <label htmlFor={`pattern-label--${patternIndex}`}>
                         Label (optional):
                         <input type='text' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'label')} id={`pattern-dataValue--${patternIndex}`} value={pattern.label === '' ? '' : pattern.label} />
                       </label>
-
                       <label htmlFor={`pattern-type--${patternIndex}`}>Pattern Type:</label>
                       <select id={`pattern-type--${patternIndex}`} value={pattern?.pattern} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}>
                         {patternTypes.map((patternName, index) => (
@@ -114,7 +165,6 @@ const PatternSettings = ({ name }: PanelProps) => {
                           </option>
                         ))}
                       </select>
-
                       <label htmlFor={`pattern-size--${patternIndex}`}>Pattern Size:</label>
                       <select id={`pattern-size--${patternIndex}`} value={pattern?.size} onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}>
                         {['small', 'medium', 'large'].map((size, index) => (

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

@@ -1,9 +1,13 @@
 //TODO: Move legends to core
-import { forwardRef, useContext } from 'react'
+import { forwardRef, useContext, useId } from 'react'
 import parse from 'html-react-parser'
 
+//types
+import { DimensionsType } from '@cdc/core/types/Dimensions'
+
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import LegendCircle from '@cdc/core/components/LegendCircle'
+import LegendShape from '@cdc/core/components/LegendShape'
+import LegendGradient from '@cdc/core/components/Legend/Legend.Gradient'
 import LegendItemHex from './LegendItem.Hex'
 import Button from '@cdc/core/components/elements/Button'
 
@@ -11,18 +15,21 @@ import useDataVizClasses from '@cdc/core/helpers/useDataVizClasses'
 import ConfigContext from '../../../context'
 import { PatternLines, PatternCircles, PatternWaves } from '@visx/pattern'
 import { GlyphStar, GlyphTriangle, GlyphDiamond, GlyphSquare, GlyphCircle } from '@visx/glyph'
+import { type ViewportSize } from '../../../types/MapConfig'
 import { Group } from '@visx/group'
 import './index.scss'
 
 type LegendProps = {
   skipId: string
+  currentViewport: ViewportSize
+  dimensions: DimensionsType
 }
 
-const Legend = forwardRef((props, ref) => {
-  const { skipId } = props
+const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
+  const { skipId, currentViewport, dimensions } = props
 
-  // prettier-ignore
   const {
+    // prettier-ignore
     displayDataAsText,
     resetLegendToggles,
     runtimeFilters,
@@ -31,6 +38,8 @@ const Legend = forwardRef((props, ref) => {
     setRuntimeLegend,
     state,
     viewport,
+    getTextWidth,
+    mapId
   } = useContext(ConfigContext)
 
   const { legend } = state
@@ -51,17 +60,15 @@ const Legend = forwardRef((props, ref) => {
 
     setRuntimeLegend(newLegend)
 
-    setAccessibleStatus(`Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`)
+    setAccessibleStatus(
+      `Disabled legend item ${legendLabel ?? ''}. Please reference the data table to see updated values.`
+    )
   }
-
-  const legendList = () => {
-    let legendItems
-
-    legendItems = runtimeLegend.map((entry, idx) => {
+  const getFormattedLegendItems = () => {
+    return runtimeLegend.map((entry, idx) => {
       const entryMax = displayDataAsText(entry.max, 'primary')
 
       const entryMin = displayDataAsText(entry.min, 'primary')
-
       let formattedText = `${entryMin}${entryMax !== entryMin ? ` - ${entryMax}` : ''}`
 
       // If interval, add some formatting
@@ -69,8 +76,6 @@ const Legend = forwardRef((props, ref) => {
         formattedText = `${entryMin} - < ${entryMax}`
       }
 
-      const { disabled } = entry
-
       if (legend.type === 'category') {
         formattedText = displayDataAsText(entry.value, 'primary')
       }
@@ -85,31 +90,49 @@ const Legend = forwardRef((props, ref) => {
         legendLabel = entry.label || entry.value
       }
 
+      return {
+        color: entry.color,
+        label: legendLabel,
+        disabled: entry.disabled,
+        special: entry.hasOwnProperty('special'),
+        value: [entry.min, entry.max]
+      }
+    })
+  }
+
+  const legendList = () => {
+    const formattedItems = getFormattedLegendItems()
+    let legendItems
+
+    legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
         let classes = ['legend-container__li']
-        if (disabled) classes.push('legend-container__li--disabled')
-        if (entry.hasOwnProperty('special')) classes.push('legend-container__li--special-class')
-        return classes
+        if (item.disabled) classes.push('legend-container__li--disabled')
+        if (item.special) classes.push('legend-container__li--special-class')
+        return classes.join(' ')
       }
 
       return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <li
-          className={handleListItemClass().join(' ')}
+          className={handleListItemClass()}
           key={idx}
-          title={`Legend item ${legendLabel} - Click to disable`}
-          onClick={() => {
-            toggleLegendActive(idx, legendLabel)
-          }}
+          title={`Legend item ${item.label} - Click to disable`}
+          onClick={() => toggleLegendActive(idx, item.label)}
           onKeyDown={e => {
             if (e.key === 'Enter') {
               e.preventDefault()
-              toggleLegendActive(idx, legendLabel)
+              toggleLegendActive(idx, item.label)
             }
           }}
           tabIndex={0}
         >
-          <LegendCircle viewport={viewport} fill={entry.color} /> <span>{legendLabel}</span>
+          <LegendShape
+            shape={state.legend.style === 'boxes' ? 'square' : 'circle'}
+            viewport={viewport}
+            fill={item.color}
+          />
+          <span>{item.label}</span>
         </li>
       )
     })
@@ -129,13 +152,48 @@ const Legend = forwardRef((props, ref) => {
 
         legendItems.push(
           <>
-            <li className={`legend-container__li legend-container__li--geo-pattern`} aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.' tabIndex={0}>
+            <li
+              className={`legend-container__li legend-container__li--geo-pattern`}
+              aria-label='You are on a pattern button. We dont support toggling patterns on this legend at the moment, but provide the area as being focusable for congruity.'
+              tabIndex={0}
+            >
               <span className='legend-item' style={{ border: 'unset' }}>
                 <svg width={legendSize} height={legendSize}>
-                  {pattern === 'waves' && <PatternWaves id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                  {pattern === 'circles' && <PatternCircles id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 10} width={sizes[size] ?? 10} fill={defaultPatternColor} />}
-                  {pattern === 'lines' && <PatternLines id={`${dataKey}--${patternDataIndex}`} height={sizes[size] ?? 6} width={sizes[size] ?? 10} stroke={defaultPatternColor} strokeWidth={2} orientation={['diagonalRightToLeft']} />}
-                  <circle id={dataKey} fill={`url(#${dataKey}--${patternDataIndex})`} r={legendSize / 2} cx={legendSize / 2} cy={legendSize / 2} stroke='#0000004d' strokeWidth={1} />
+                  {pattern === 'waves' && (
+                    <PatternWaves
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 10}
+                      width={sizes[size] ?? 10}
+                      fill={defaultPatternColor}
+                    />
+                  )}
+                  {pattern === 'circles' && (
+                    <PatternCircles
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 10}
+                      width={sizes[size] ?? 10}
+                      fill={defaultPatternColor}
+                    />
+                  )}
+                  {pattern === 'lines' && (
+                    <PatternLines
+                      id={`${mapId}--${dataKey}--${patternDataIndex}`}
+                      height={sizes[size] ?? 6}
+                      width={sizes[size] ?? 10}
+                      stroke={defaultPatternColor}
+                      strokeWidth={2}
+                      orientation={['diagonalRightToLeft']}
+                    />
+                  )}
+                  <circle
+                    id={dataKey}
+                    fill={`url(#${mapId}--${dataKey}--${patternDataIndex})`}
+                    r={legendSize / 2}
+                    cx={legendSize / 2}
+                    cy={legendSize / 2}
+                    stroke='#0000004d'
+                    strokeWidth={1}
+                  />
                 </svg>
               </span>
               <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
@@ -147,7 +205,6 @@ const Legend = forwardRef((props, ref) => {
 
     return legendItems
   }
-
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -162,7 +219,15 @@ const Legend = forwardRef((props, ref) => {
     }
   }
 
-  const pin = <path className='marker' d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z' strokeWidth={2} stroke={'black'} transform={`scale(0.5)`} />
+  const pin = (
+    <path
+      className='marker'
+      d='M0,0l-8.8-17.7C-12.1-24.3-7.4-32,0-32h0c7.4,0,12.1,7.7,8.8,14.3L0,0z'
+      strokeWidth={2}
+      stroke={'black'}
+      transform={`scale(0.5)`}
+    />
+  )
 
   const cityStyleShapes = {
     pin: pin,
@@ -176,10 +241,19 @@ const Legend = forwardRef((props, ref) => {
   return (
     <ErrorBoundary component='Sidebar'>
       <div className='legends'>
-        <aside id={skipId || 'legend'} className={legendClasses.aside.join(' ') || ''} role='region' aria-label='Legend' tabIndex={0} ref={ref}>
+        <aside
+          id={skipId || 'legend'}
+          className={legendClasses.aside.join(' ') || ''}
+          role='region'
+          aria-label='Legend'
+          tabIndex={0}
+          ref={ref}
+        >
           <section className={legendClasses.section.join(' ') || ''} aria-label='Map Legend'>
             {legend.title && <h3 className={legendClasses.title.join(' ') || ''}>{parse(legend.title)}</h3>}
-            {legend.dynamicDescription === false && legend.description && <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>}
+            {legend.dynamicDescription === false && legend.description && (
+              <p className={legendClasses.description.join(' ') || ''}>{parse(legend.description)}</p>
+            )}
             {legend.dynamicDescription === true &&
               runtimeFilters.map((filter, idx) => {
                 const lookupStr = `${idx},${filter.values.indexOf(String(filter.active))}`
@@ -196,8 +270,18 @@ const Legend = forwardRef((props, ref) => {
                 }
                 return true
               })}
+
+            <LegendGradient
+              labels={getFormattedLegendItems().map(item => item?.label) ?? []}
+              colors={getFormattedLegendItems().map(item => item?.color) ?? []}
+              values={getFormattedLegendItems().map(item => item?.value) ?? []}
+              dimensions={dimensions}
+              currentViewport={currentViewport}
+              config={state}
+              getTextWidth={getTextWidth}
+            />
             <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {legendList()}
+              {state.legend.style === 'gradient' ? '' : legendList()}
             </ul>
             {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
               <>
@@ -206,7 +290,10 @@ const Legend = forwardRef((props, ref) => {
                   {state.visual.cityStyleLabel && (
                     <div>
                       <svg>
-                        <Group top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11} left={10}>
+                        <Group
+                          top={state.visual.cityStyle === 'pin' ? 19 : state.visual.cityStyle === 'triangle' ? 13 : 11}
+                          left={10}
+                        >
                           {cityStyleShapes[state.visual.cityStyle.toLowerCase()]}
                         </Group>
                       </svg>
@@ -233,7 +320,9 @@ const Legend = forwardRef((props, ref) => {
             {runtimeLegend.disabledAmt > 0 && <Button onClick={handleReset}>Reset</Button>}
           </section>
         </aside>
-        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />}
+        {state.hexMap.shapeGroups?.length > 0 && state.hexMap.type === 'shapes' && state.general.displayAsHex && (
+          <LegendItemHex state={state} runtimeLegend={runtimeLegend} viewport={viewport} />
+        )}
       </div>
     </ErrorBoundary>
   )

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

@@ -17,8 +17,10 @@
     background-color: #fff;
     z-index: 6;
     border-top: $lightGray 1px solid;
+
     @include breakpointClass(md) {
-      &.bottom {
+      &.bottom,
+      &.top {
         border: $lightGray 1px solid;
       }
       &.side {
@@ -35,8 +37,12 @@
         right: 1em;
 
         ul.vertical-sorted {
+          display: block;
           column-count: 2;
           column-fill: balance;
+          & > li {
+            white-space: nowrap;
+          }
         }
 
         ul:not(.vertical-sorted) {
@@ -47,29 +53,17 @@
           flex-wrap: wrap;
         }
       }
+      &.no-border {
+        border: none;
+      }
 
-      &.bottom {
+      &.bottom,
+      &.top {
         ul.legend-container__ul.vertical-sorted {
           display: block;
           column-count: 2;
           column-fill: balance;
         }
-
-        ul.legend-container__ul {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-
-          li {
-            width: 50%;
-          }
-        }
-
-        ul.single-row {
-          display: block;
-          column-count: initial;
-          column-fill: auto;
-        }
       }
     }
 
@@ -103,9 +97,12 @@
       p {
         line-height: 1.4em;
       }
-      .legend-container__ul {
+      .legend-container__ul:not(.single-row) {
         list-style: none;
         padding-top: 1em;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+
         button {
           font-size: unset;
           background: transparent;
@@ -132,6 +129,7 @@
           transition: 0.1s opacity;
           display: flex;
           cursor: pointer;
+          white-space: nowrap;
           flex-grow: 1;
 
           &.legend-container__li--disabled {
@@ -139,6 +137,29 @@
           }
         }
       }
+      .legend-container__ul.single-row {
+        width: 100%;
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+
+        & > li {
+          margin-right: 1em;
+          margin-bottom: 1em;
+          white-space: nowrap;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          vertical-align: middle;
+
+          & svg {
+            vertical-align: baseline;
+          }
+        }
+      }
     }
 
     .bottom .legend-container__ul--single-column:not(.vertical-sorted) {
@@ -150,6 +171,7 @@
 
       .legend-container__li {
         width: 100%;
+        white-space: nowrap;
       }
     }
 
@@ -175,30 +197,8 @@
       }
     }
 
-    &.bottom.single-row {
-      width: 100%;
-      .legend-container ul {
-        flex-direction: row;
-        align-items: baseline;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        li {
-          justify-items: center;
-          line-break: loose;
-          align-items: center;
-          width: auto;
-          padding-right: 1em;
-          padding-bottom: 1em;
-          display: inline-block;
-          & > span {
-            margin: 0 !important;
-          }
-        }
-      }
-    }
-
     @include breakpointClass(sm) {
-      .legend-container ul {
+      .legend-container ul:not(.single-row) {
         align-items: flex-start;
         justify-content: space-between;
         li {

package/src/components/Modal.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react'
+import LegendShape from '@cdc/core/components/LegendShape'
+import ConfigContext from '../context'
+import Icon from '@cdc/core/components/ui/Icon'
+
+const Modal = () => {
+  const { applyTooltipsToGeo, capitalize, applyLegendToRow, viewport, type, content } = useContext(ConfigContext)
+
+  const tooltip = applyTooltipsToGeo(content.geoName, content.keyedData, 'jsx')
+
+  const legendColors = applyLegendToRow(content.keyedData)
+
+  return (
+    <section
+      className={capitalize ? 'modal-content tooltip capitalize ' + viewport : 'modal-content tooltip ' + viewport}
+      aria-hidden='true'
+    >
+      {type === 'data' && <LegendShape fill={legendColors[0]} />}
+      <div className='content'>{tooltip}</div>
+      <Icon display='close' alt='Close Modal' size={20} color='#000' className='modal-close' />
+    </section>
+  )
+}
+
+export default Modal