@cdc/map 4.24.9 → 4.24.11

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

@@ -1,5 +1,11 @@
 import { useContext } from 'react'
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import ConfigContext from '../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
@@ -41,7 +47,11 @@ 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 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]
 
@@ -68,7 +78,9 @@ const PatternSettings = ({ name }: PanelProps) => {
 
         // 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:
+          console.warn(`COVE: pattern contrast check failed on ${geoData?.[state.columns.geo.name]} for ${
+            patternData.dataKey
+          } with:
             pattern color: ${patternColor}
             contrast: ${getColorContrast(currentFill, patternColor)}
           `)
@@ -78,7 +90,9 @@ const PatternSettings = ({ name }: PanelProps) => {
       })
     })
 
-    const editorErrorMessage = updatedPatterns.some(pattern => pattern.contrastCheck === false) ? 'One or more patterns do not pass the WCAG 2.1 contrast ratio of 3:1.' : ''
+    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 => ({
@@ -116,7 +130,12 @@ const PatternSettings = ({ name }: PanelProps) => {
         <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.' />}
+        {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 &&
@@ -133,13 +152,26 @@ const PatternSettings = ({ name }: PanelProps) => {
               <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
                 <AccordionItem>
                   <AccordionItemHeading>
-                    <AccordionItemButton>{pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}</AccordionItemButton>
+                    <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>' />}{' '}
+                      {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')}>
+                      <select
+                        id={`pattern-dataKey--${patternIndex}`}
+                        value={pattern.dataKey !== '' ? pattern.dataKey : 'Select'}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'dataKey')}
+                      >
                         {/* TODO: sort these? */}
                         {dataKeyOptions.map((d, index) => {
                           return (
@@ -151,14 +183,28 @@ 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} />
+                        <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} />
+                        <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')}>
+                      <select
+                        id={`pattern-type--${patternIndex}`}
+                        value={pattern?.pattern}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'pattern')}
+                      >
                         {patternTypes.map((patternName, index) => (
                           <option value={patternName} key={index}>
                             {patternName}
@@ -166,7 +212,11 @@ const PatternSettings = ({ name }: PanelProps) => {
                         ))}
                       </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')}>
+                      <select
+                        id={`pattern-size--${patternIndex}`}
+                        value={pattern?.size}
+                        onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'size')}
+                      >
                         {['small', 'medium', 'large'].map((size, index) => (
                           <option value={size} key={index}>
                             {size}
@@ -178,16 +228,25 @@ const PatternSettings = ({ name }: PanelProps) => {
                           Pattern Color
                           <Tooltip style={{ textTransform: 'none' }}>
                             <Tooltip.Target>
-                              <Icon display='question' style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }} />
+                              <Icon
+                                display='question'
+                                style={{ marginLeft: '0.5rem', display: 'inline-block', whiteSpace: 'nowrap' }}
+                              />
                             </Tooltip.Target>
                             <Tooltip.Content>
                               <p>{`If this setting is used, it is the reponsibility of the visualization author to verify the visualization colors meet WCAG 3:1 contrast ratios.`}</p>
                             </Tooltip.Content>
                           </Tooltip>
-                          <input type='text' value={pattern.color || ''} id='patternColor' name='patternColor' onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')} />
+                          <input
+                            type='text'
+                            value={pattern.color || ''}
+                            id='patternColor'
+                            name='patternColor'
+                            onChange={e => handleUpdateGeoPattern(e.target.value, patternIndex, 'color')}
+                          />
                         </label>
                       </div>
-                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn--remove warn'>
+                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn-danger'>
                         Remove Pattern
                       </Button>
                     </>
@@ -196,7 +255,7 @@ const PatternSettings = ({ name }: PanelProps) => {
               </Accordion>
             )
           })}
-        <button className='btn full-width' onClick={handleAddGeoPattern}>
+        <button className='btn btn-primary full-width' onClick={handleAddGeoPattern}>
           Add Geo Pattern
         </button>
       </AccordionItemPanel>

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

@@ -15,18 +15,22 @@ 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'
+import { ViewportSize } from '@cdc/chart/src/types/ChartConfig'
+import { isMobileHeightViewport } from '@cdc/core/helpers/viewports'
+
+const LEGEND_PADDING = 30
 
 type LegendProps = {
   skipId: string
-  currentViewport: ViewportSize
   dimensions: DimensionsType
+  containerWidthPadding: number
+  currentViewport: ViewportSize
 }
 
 const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
-  const { skipId, currentViewport, dimensions } = props
+  const { skipId, dimensions, containerWidthPadding, currentViewport } = props
 
   const {
     // prettier-ignore
@@ -38,7 +42,6 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     setRuntimeLegend,
     state,
     viewport,
-    getTextWidth,
     mapId
   } = useContext(ConfigContext)
 
@@ -100,13 +103,14 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
     })
   }
 
-  const legendList = () => {
-    const formattedItems = getFormattedLegendItems()
+  const legendList = (patternsOnly = false) => {
+    const formattedItems = patternsOnly ? [] : getFormattedLegendItems()
+    const patternsOnlyFont = isMobileHeightViewport(currentViewport) ? '12px' : '14px'
     let legendItems
 
     legendItems = formattedItems.map((item, idx) => {
       const handleListItemClass = () => {
-        let classes = ['legend-container__li']
+        let classes = ['legend-container__li', 'd-flex', 'align-items-center']
         if (item.disabled) classes.push('legend-container__li--disabled')
         if (item.special) classes.push('legend-container__li--special-class')
         return classes.join(' ')
@@ -127,11 +131,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
           }}
           tabIndex={0}
         >
-          <LegendShape
-            shape={state.legend.style === 'boxes' ? 'square' : 'circle'}
-            viewport={viewport}
-            fill={item.color}
-          />
+          <LegendShape shape={state.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
           <span>{item.label}</span>
         </li>
       )
@@ -196,7 +196,9 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                   />
                 </svg>
               </span>
-              <p style={{ lineHeight: '22.4px' }}>{patternData.label || patternData.dataValue || ''}</p>
+              <p style={{ lineHeight: '22.4px', fontSize: patternsOnly ? patternsOnlyFont : '16px' }}>
+                {patternData.label || patternData.dataValue || ''}
+              </p>
             </li>
           </>
         )
@@ -205,6 +207,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
     return legendItems
   }
+  const legendListItems = legendList(state.legend.style === 'gradient')
+
   const { legendClasses } = useDataVizClasses(state, viewport)
 
   const handleReset = e => {
@@ -274,15 +278,15 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             <LegendGradient
               labels={getFormattedLegendItems().map(item => item?.label) ?? []}
               colors={getFormattedLegendItems().map(item => item?.color) ?? []}
-              values={getFormattedLegendItems().map(item => item?.value) ?? []}
               dimensions={dimensions}
-              currentViewport={currentViewport}
+              parentPaddingToSubtract={containerWidthPadding + (legend.hideBorder ? 0 : LEGEND_PADDING)}
               config={state}
-              getTextWidth={getTextWidth}
             />
-            <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
-              {state.legend.style === 'gradient' ? '' : legendList()}
-            </ul>
+            {!!legendListItems.length && (
+              <ul className={legendClasses.ul.join(' ') || ''} aria-label='Legend items'>
+                {legendListItems}
+              </ul>
+            )}
             {(state.visual.additionalCityStyles.some(c => c.label) || state.visual.cityStyleLabel) && (
               <>
                 <hr />

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,12 @@
   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;
+        border: var(--lightGray) 1px solid;
       }
       &.side {
         z-index: 1;
@@ -32,7 +31,7 @@
         align-self: flex-start;
         z-index: 4;
         right: 1em;
-        border: $lightGray 1px solid;
+        border: var(--lightGray) 1px solid;
         top: 2em;
         right: 1em;
 
@@ -68,8 +67,10 @@
     }
 
     .legend-container {
-      padding: 1em;
       position: relative;
+      &.legend-padding {
+        padding: 15px;
+      }
       .legend-container__title {
         font-size: 1.3em;
         padding-bottom: 0;
@@ -101,7 +102,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 +133,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,17 +156,23 @@
         & > 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;
           }
         }
       }
+      .legend-container__ul.patterns-only {
+        margin-top: 10px;
+      }
     }
 
     .bottom .legend-container__ul--single-column:not(.vertical-sorted) {

package/src/components/UsaMap/components/HexIcon.tsx

@@ -30,7 +30,13 @@ const HexIcon: React.FC<HexIconProps> = props => {
     )
   }
   return (
-    <Group top={centroid[1] - 5} left={centroid[0] - iconSize} color={textColor} textAnchor='start' key={`hex--${item.key}-${item.value}-${index}`}>
+    <Group
+      top={centroid[1] - 5}
+      left={centroid[0] - iconSize}
+      color={textColor}
+      textAnchor='start'
+      key={`hex--${item.key}-${item.value}-${index}`}
+    >
       {item.shape === 'Arrow Down' && <AiOutlineArrowDown />}
       {item.shape === 'Arrow Up' && <AiOutlineArrowUp />}
       {item.shape === 'Arrow Right' && <AiOutlineArrowRight />}

package/src/components/UsaMap/components/Territory/Territory.Hexagon.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { geoCentroid, geoPath } from 'd3-geo'
+import { geoCentroid } from 'd3-geo'
 import ConfigContext from './../../../../context'
 import { MapContext } from './../../../../types/MapContext'
 import HexIcon from '../HexIcon'
@@ -31,7 +31,19 @@ const nudges = {
 
 // todo: combine hexagonLabel & geoLabel functions
 // todo: move geoLabel functions outside of components for reusability
-const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territory, territoryData, ...props }) => {
+const TerritoryHexagon = ({
+  dataTooltipHtml,
+  dataTooltipId,
+  handleShapeClick,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  territoryData,
+  text,
+  textColor,
+  ...props
+}) => {
   const { state } = useContext<MapContext>(ConfigContext)
 
   const isHex = state.general.displayAsHex
@@ -115,7 +127,17 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
       let y = state.hexMap.type === 'shapes' ? '30%' : '50%'
       return (
         <>
-          <Text fontSize={14} x={'50%'} y={y} style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }} textAnchor='middle' verticalAnchor='middle'>
+          <Text
+            fontSize={14}
+            x={'50%'}
+            y={y}
+            style={{ fill: 'currentColor', stroke: 'initial', fontWeight: 400, opacity: 1, fillOpacity: 1 }}
+            textAnchor='middle'
+            verticalAnchor='middle'
+            onClick={handleShapeClick}
+            data-tooltip-id={dataTooltipId}
+            data-tooltip-html={dataTooltipHtml}
+          >
             {abbr.substring(3)}
           </Text>
           {state.general.displayAsHex && state.hexMap.type === 'shapes' && getArrowDirection(territoryData, geo, true)}
@@ -127,8 +149,25 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
 
     return (
       <g>
-        <line x1={centroid[0]} y1={centroid[1]} x2={centroid[0] + dx} y2={centroid[1] + dy} stroke='rgba(0,0,0,.5)' strokeWidth={1} />
-        <text x={4} strokeWidth='0' fontSize={13} style={{ fill: '#202020' }} alignmentBaseline='middle' transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}>
+        <line
+          x1={centroid[0]}
+          y1={centroid[1]}
+          x2={centroid[0] + dx}
+          y2={centroid[1] + dy}
+          stroke='rgba(0,0,0,.5)'
+          strokeWidth={1}
+        />
+        <text
+          x={4}
+          strokeWidth='0'
+          fontSize={13}
+          style={{ fill: '#202020' }}
+          alignmentBaseline='middle'
+          transform={`translate(${centroid[0] + dx}, ${centroid[1] + dy})`}
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {abbr.substring(3)}
         </text>
       </g>
@@ -136,12 +175,18 @@ const TerritoryHexagon = ({ label, text, stroke, strokeWidth, textColor, territo
   }
 
   return (
-    <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
-      <g {...props}>
-        <polygon stroke={stroke} strokeWidth={strokeWidth} points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702' />
-        {state.general.displayAsHex && hexagonLabel(territoryData ? territoryData : geo, stroke, false)}
-      </g>
-    </svg>
+    territoryData && (
+      <svg viewBox='0 0 45 51' className='territory-wrapper--hex'>
+        <g {...props} data-tooltip-html={dataTooltipHtml} data-tooltip-id={dataTooltipId} onClick={handleShapeClick}>
+          <polygon
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            points='22 0 44 12.702 44 38.105 22 50.807 0 38.105 0 12.702'
+          />
+          {state.general.displayAsHex && hexagonLabel(territoryData, stroke, false)}
+        </g>
+      </svg>
+    )
   )
 }
 

package/src/components/UsaMap/components/Territory/Territory.Rectangle.tsx

@@ -4,21 +4,50 @@ import ConfigContext from './../../../../context'
 import { type MapContext } from '../../../../types/MapContext'
 import { patternSizes } from './../../helpers/patternSizes'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { type TerritoryShape } from './TerritoryShape'
 
-const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPattern, territory, ...props }) => {
+const TerritoryRectangle: React.FC<TerritoryShape> = ({
+  dataTooltipId,
+  dataTooltipHtml,
+  handleShapeClick,
+  hasPattern,
+  label,
+  stroke,
+  strokeWidth,
+  territory,
+  text,
+  textColor,
+  ...props
+}) => {
   const { state, supportedTerritories } = useContext<MapContext>(ConfigContext)
   const { territoryData, ...otherProps } = props
+  const rectanglePath =
+    'M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
 
   return (
     <svg viewBox='0 0 45 28' key={territory} className={territory}>
-      <g {...otherProps} strokeLinejoin='round' tabIndex={-1}>
-        <path
-          stroke={stroke}
-          strokeWidth={strokeWidth}
-          d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
-          {...otherProps}
-        />
-        <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ stroke: textColor, strokeWidth: 1 }} className='territory-text' paintOrder='stroke'>
+      <g
+        {...otherProps}
+        strokeLinejoin='round'
+        tabIndex={-1}
+        onClick={handleShapeClick}
+        data-tooltip-id={dataTooltipId}
+        data-tooltip-html={dataTooltipHtml}
+      >
+        <path stroke={stroke} strokeWidth={strokeWidth} d={rectanglePath} {...otherProps} />
+        <text
+          textAnchor='middle'
+          dominantBaseline='middle'
+          x='50%'
+          y='54%'
+          fill={text}
+          style={{ stroke: textColor, strokeWidth: 1 }}
+          className='territory-text'
+          paintOrder='stroke'
+          onClick={handleShapeClick}
+          data-tooltip-id={dataTooltipId}
+          data-tooltip-html={dataTooltipHtml}
+        >
           {label}
         </text>
 
@@ -31,18 +60,62 @@ const TerritoryRectangle = ({ label, text, stroke, strokeWidth, textColor, hasPa
 
           return (
             <>
-              {patternData?.pattern === 'waves' && <PatternWaves id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
-              {patternData?.pattern === 'circles' && <PatternCircles id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 10} width={patternSizes[patternData?.size] ?? 10} fill={patternColor} complement />}
-              {patternData?.pattern === 'lines' && <PatternLines id={`territory-${patternData?.dataKey}--${patternIndex}`} height={patternSizes[patternData?.size] ?? 6} width={patternSizes[patternData?.size] ?? 6} stroke={patternColor} strokeWidth={1} orientation={['diagonalRightToLeft']} />}
+              {patternData?.pattern === 'waves' && (
+                <PatternWaves
+                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 10}
+                  width={patternSizes[patternData?.size] ?? 10}
+                  fill={patternColor}
+                  complement
+                />
+              )}
+              {patternData?.pattern === 'circles' && (
+                <PatternCircles
+                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 10}
+                  width={patternSizes[patternData?.size] ?? 10}
+                  fill={patternColor}
+                  complement
+                />
+              )}
+              {patternData?.pattern === 'lines' && (
+                <PatternLines
+                  id={`territory-${patternData?.dataKey}--${patternIndex}`}
+                  height={patternSizes[patternData?.size] ?? 6}
+                  width={patternSizes[patternData?.size] ?? 6}
+                  stroke={patternColor}
+                  strokeWidth={1}
+                  orientation={['diagonalRightToLeft']}
+                />
+              )}
               <path
                 stroke={stroke}
                 strokeWidth={strokeWidth}
-                d='M40,0.5 C41.2426407,0.5 42.3676407,1.00367966 43.1819805,1.81801948 C43.9963203,2.63235931 44.5,3.75735931 44.5,5 L44.5,5 L44.5,23 C44.5,24.2426407 43.9963203,25.3676407 43.1819805,26.1819805 C42.3676407,26.9963203 41.2426407,27.5 40,27.5 L40,27.5 L5,27.5 C3.75735931,27.5 2.63235931,26.9963203 1.81801948,26.1819805 C1.00367966,25.3676407 0.5,24.2426407 0.5,23 L0.5,23 L0.5,5 C0.5,3.75735931 1.00367966,2.63235931 1.81801948,1.81801948 C2.63235931,1.00367966 3.75735931,0.5 5,0.5 L5,0.5 Z'
+                d={rectanglePath}
                 fill={`url(#territory-${patternData?.dataKey}--${patternIndex})`}
                 color={patternData ? 'white' : textColor}
-                className={[`territory-pattern-${patternData.dataKey}`, `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`].join(' ')}
+                className={[
+                  `territory-pattern-${patternData.dataKey}`,
+                  `territory-pattern-${patternData.dataKey}--${patternData.dataValue}`
+                ].join(' ')}
               />
-              <text textAnchor='middle' dominantBaseline='middle' x='50%' y='54%' fill={text} style={{ fill: patternData ? 'white' : 'black', stroke: patternData ? 'black' : textColor, strokeWidth: patternData ? 6 : 0 }} className='territory-text' paint-order='stroke'>
+              <text
+                textAnchor='middle'
+                dominantBaseline='middle'
+                x='50%'
+                y='54%'
+                fill={text}
+                style={{
+                  fill: patternData ? 'white' : 'black',
+                  stroke: patternData ? 'black' : textColor,
+                  strokeWidth: patternData ? 6 : 0
+                }}
+                className='territory-text'
+                paint-order='stroke'
+                onClick={handleShapeClick}
+                data-tooltip-id={dataTooltipId}
+                data-tooltip-html={dataTooltipHtml}
+              >
                 {label}
               </text>
             </>

package/src/components/UsaMap/components/Territory/TerritoryShape.ts

@@ -0,0 +1,13 @@
+export type TerritoryShape = {
+  handleShapeClick: () => void
+  dataTooltipHtml: string
+  dataTooltipId: string
+  hasPattern: boolean
+  label: string
+  stroke: string
+  strokeWidth: number
+  territory: string
+  territoryData: object
+  text: string
+  textColor: string
+}