@cdc/map 4.26.3 → 4.26.4

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

@@ -239,7 +239,7 @@ const HexSettingShapeColumns = props => {
                             <button
                               className='cove-button cove-button--warn'
                               style={{ background: 'none', border: '1px solid red', color: 'red', marginTop: '15px' }}
-                              onClick={(e, itemIndex) => {
+                              onClick={() => {
                                 let newGroups = [
                                   ...config.hexMap.shapeGroups.slice(0, shapeGroupIndex),
                                   ...config.hexMap.shapeGroups.slice(shapeGroupIndex + 1)

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

@@ -1,18 +1,26 @@
 import React, { useContext } from 'react'
+import cloneDeep from 'lodash/cloneDeep'
 
 // CDC Core
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 import Accordion from '@cdc/core/components/ui/Accordion'
 import Button from '@cdc/core/components/elements/Button'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import { MapContext } from '../../../../types/MapContext'
 import ConfigContext from '../../../../context'
-import { Select } from '@cdc/core/components/EditorPanel/Inputs'
-import { setConfig } from 'dompurify'
+import { CheckBox, Select } from '@cdc/core/components/EditorPanel/Inputs'
+import {
+  Accordion as AccessibleAccordion,
+  AccordionItem,
+  AccordionItemButton,
+  AccordionItemHeading,
+  AccordionItemPanel
+} from 'react-accessible-accordion'
 // types
 // styles
 
 const PanelAnnotate: React.FC = props => {
-  const { config, setConfig, dimensions, isDraggingAnnotation } = useContext<MapContext>(ConfigContext)
+  const { config, setConfig, dimensions } = useContext<MapContext>(ConfigContext)
 
   /**
    * Get the current SVG/canvas dimensions for saving with annotations.
@@ -99,48 +107,68 @@ const PanelAnnotate: React.FC = props => {
   return (
     <Accordion>
       <Accordion.Section title={props.name}>
-        <label>
-          Show Annotation Dropdown
-          <input
-            type='checkbox'
-            checked={config?.general?.showAnnotationDropdown}
-            onClick={e => {
-              setConfig({
-                ...config,
-                general: {
-                  ...config.general,
-                  showAnnotationDropdown: e.target.checked
-                }
-              })
-            }}
-          />
-        </label>
+        <CheckBox
+          value={config?.general?.showAnnotationDropdown || false}
+          section='general'
+          subsection={null}
+          fieldName='showAnnotationDropdown'
+          label='Show Annotation Dropdown'
+          updateField={(_section, _subsection, _fieldName, value) => {
+            setConfig({
+              ...config,
+              general: {
+                ...config.general,
+                showAnnotationDropdown: value
+              }
+            })
+          }}
+        />
 
-        <label>
-          Annotation Dropdown Title:
-          <input
-            type='text'
-            style={{ marginBottom: '10px' }}
-            value={config?.general?.annotationDropdownText}
-            onChange={e => {
-              setConfig({
-                ...config,
-                general: {
-                  ...config.general,
-                  annotationDropdownText: e.target.value
-                }
-              })
-            }}
-          />
-        </label>
+        {config.general.showAnnotationDropdown && (
+          <label>
+            Annotation Dropdown Title:
+            <input
+              type='text'
+              style={{ marginBottom: '10px' }}
+              value={config?.general?.annotationDropdownText}
+              onChange={e => {
+                setConfig({
+                  ...config,
+                  general: {
+                    ...config.general,
+                    annotationDropdownText: e.target.value
+                  }
+                })
+              }}
+            />
+          </label>
+        )}
 
-        {config?.annotations &&
-          config?.annotations.map((annotation, index) => (
-            <Accordion>
-              <Accordion.Section
-                title={annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
-              >
-                <div className='annotation-group'>
+        <GroupedList
+          items={config?.annotations}
+          label='Text Annotations'
+          droppableId='map-annotations-order'
+          draggable={false}
+          renderItem={(annotation, index) => (
+            <AccessibleAccordion key={`annotation-${index}`} allowZeroExpanded>
+              <AccordionItem className='series-item series-item--chart'>
+                <AccordionItemHeading className='series-item__title'>
+                  <AccordionItemButton className='accordion__button'>
+                    {annotation.text ? annotation.text.substring(0, 15) + '...' : `Annotation ${index + 1}`}
+                  </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel>
+                  <div className='series-item__panel-actions'>
+                    <Button
+                      type='button'
+                      variant='danger'
+                      size='sm'
+                      className='grouped-list__remove'
+                      onClick={() => handleRemoveAnnotation(index)}
+                    >
+                      Delete Annotation
+                    </Button>
+                  </div>
                   <label>
                     Annotation Text:
                     <textarea
@@ -149,36 +177,6 @@ const PanelAnnotate: React.FC = props => {
                       onChange={e => handleAnnotationUpdate(e.target.value, 'text', index)}
                     />
                   </label>
-                  {/* <label>
-                      Vertical Anchor
-                      <input
-                        type='checkbox'
-                        checked={config?.annotations[index].anchor.vertical}
-                        onClick={e => {
-                          const updatedAnnotations = [...config?.annotations]
-                          updatedAnnotations[index].anchor.vertical = e.target.checked
-                          updateConfig({
-                            ...config,
-                            annotations: updatedAnnotations
-                          })
-                        }}
-                      />
-                    </label>
-                    <label>
-                      Horizontal Anchor
-                      <input
-                        type='checkbox'
-                        checked={config?.annotations[index].anchor.horizontal}
-                        onClick={e => {
-                          const updatedAnnotations = [...config?.annotations]
-                          updatedAnnotations[index].anchor.horizontal = e.target.checked
-                          updateConfig({
-                            ...config,
-                            annotations: updatedAnnotations
-                          })
-                        }}
-                      />
-                    </label> */}
 
                   <label>
                     Opacity
@@ -186,7 +184,7 @@ const PanelAnnotate: React.FC = props => {
                     <input
                       type='range'
                       onChange={e => {
-                        const updatedAnnotations = [...config?.annotations]
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].opacity = e.target.value
                         setConfig({
                           ...config,
@@ -197,36 +195,36 @@ const PanelAnnotate: React.FC = props => {
                     />
                   </label>
 
-                  <label>
-                    Edit Subject
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.subject}
-                      onClick={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].edit.subject = e.target.checked
-                        setConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
-                  <label>
-                    Edit Label
-                    <input
-                      type='checkbox'
-                      checked={config?.annotations[index]?.edit?.label}
-                      onClick={e => {
-                        const updatedAnnotations = [...config?.annotations]
-                        updatedAnnotations[index].edit.label = e.target.checked
-                        setConfig({
-                          ...config,
-                          annotations: updatedAnnotations
-                        })
-                      }}
-                    />
-                  </label>
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.subject || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.subject`}
+                    label='Edit Subject'
+                    updateField={(_section, _subsection, _fieldName, value) => {
+                      const updatedAnnotations = cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.subject = value
+                      setConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
+                  <CheckBox
+                    value={config?.annotations[index]?.edit?.label || false}
+                    section='annotations'
+                    subsection={null}
+                    fieldName={`${index}.edit.label`}
+                    label='Edit Label'
+                    updateField={(_section, _subsection, _fieldName, value) => {
+                      const updatedAnnotations = cloneDeep(config?.annotations)
+                      updatedAnnotations[index].edit.label = value
+                      setConfig({
+                        ...config,
+                        annotations: updatedAnnotations
+                      })
+                    }}
+                  />
 
                   <Select
                     label='Connection Type'
@@ -236,7 +234,7 @@ const PanelAnnotate: React.FC = props => {
                       label: side
                     }))}
                     onChange={event => {
-                      const updatedAnnotations = [...config?.annotations]
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].connectionType = event.target.value
                       setConfig({
                         ...config,
@@ -254,7 +252,7 @@ const PanelAnnotate: React.FC = props => {
                         label: value
                       }))}
                       onChange={event => {
-                        const updatedAnnotations = [...config?.annotations]
+                        const updatedAnnotations = cloneDeep(config?.annotations)
                         updatedAnnotations[index].lineType = event.target.value
                         setConfig({
                           ...config,
@@ -272,7 +270,7 @@ const PanelAnnotate: React.FC = props => {
                       label: option
                     }))}
                     onChange={event => {
-                      const updatedAnnotations = [...config?.annotations]
+                      const updatedAnnotations = cloneDeep(config?.annotations)
                       updatedAnnotations[index].marker = event.target.value
                       setConfig({
                         ...config,
@@ -280,18 +278,15 @@ const PanelAnnotate: React.FC = props => {
                       })
                     }}
                   />
-
-                  <Button className='btn btn-danger' onClick={() => handleRemoveAnnotation(index)}>
-                    Delete Annotation
-                  </Button>
-                </div>
-              </Accordion.Section>
-            </Accordion>
-          ))}
+                </AccordionItemPanel>
+              </AccordionItem>
+            </AccessibleAccordion>
+          )}
+        />
         {config?.annotations?.length < 3 && (
-          <button className='btn btn-primary full-width' onClick={handleAddAnnotation}>
+          <Button variant='editor-primary' onClick={handleAddAnnotation}>
             Add Annotation
-          </button>
+          </Button>
         )}
       </Accordion.Section>
     </Accordion>

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

@@ -10,6 +10,7 @@ import ConfigContext from '../../../../context'
 import { useLegendMemoContext } from '../../../../context/LegendMemoContext'
 import { type MapContext } from '../../../../types/MapContext'
 import Button from '@cdc/core/components/elements/Button'
+import GroupedList from '@cdc/core/components/EditorPanel/GroupedList'
 import Tooltip from '@cdc/core/components/ui/Tooltip'
 import Icon from '@cdc/core/components/ui/Icon'
 import { Select } from '@cdc/core/components/EditorPanel/Inputs'
@@ -178,9 +179,12 @@ const PatternSettings = ({ name }: PanelProps) => {
           />
         )}
         <br />
-
-        {patterns &&
-          patterns.map((pattern, patternIndex) => {
+        <GroupedList
+          items={patterns}
+          label='Geo Patterns'
+          droppableId='map-geo-patterns'
+          draggable={false}
+          renderItem={(pattern, patternIndex) => {
             const dataValueOptions = [...new Set(data?.map(d => d?.[pattern?.dataKey]))]
             const dataKeyOptions = Object.keys(data[0])
             dataValueOptions.unshift('Select')
@@ -191,14 +195,25 @@ const PatternSettings = ({ name }: PanelProps) => {
 
             return (
               <Accordion allowZeroExpanded key={`accordion-pattern--${patternIndex}`}>
-                <AccordionItem>
-                  <AccordionItemHeading>
-                    <AccordionItemButton>
+                <AccordionItem className='series-item series-item--chart'>
+                  <AccordionItemHeading className='series-item__title'>
+                    <AccordionItemButton className='accordion__button'>
                       {pattern.dataKey ? `${pattern.dataKey}: ${pattern.dataValue ?? 'No Value'}` : 'Select Column'}
                     </AccordionItemButton>
                   </AccordionItemHeading>
                   <AccordionItemPanel>
                     <>
+                      <div className='series-item__panel-actions'>
+                        <Button
+                          type='button'
+                          variant='danger'
+                          size='sm'
+                          className='grouped-list__remove'
+                          onClick={() => handleRemovePattern(patternIndex)}
+                        >
+                          Remove Pattern
+                        </Button>
+                      </div>
                       {pattern.contrastCheck ?? true ? (
                         <Alert type='success' message='This pattern passes contrast checks' />
                       ) : (
@@ -234,7 +249,7 @@ const PatternSettings = ({ name }: PanelProps) => {
                         <input
                           type='text'
                           onChange={e => handlePatternFieldUpdate('label', e.target.value, patternIndex)}
-                          id={`pattern-dataValue--${patternIndex}`}
+                          id={`pattern-label--${patternIndex}`}
                           value={pattern.label === '' ? '' : pattern.label}
                         />
                       </label>
@@ -279,18 +294,16 @@ const PatternSettings = ({ name }: PanelProps) => {
                           />
                         </label>
                       </div>
-                      <Button onClick={e => handleRemovePattern(patternIndex)} className='btn btn-danger'>
-                        Remove Pattern
-                      </Button>
                     </>
                   </AccordionItemPanel>
                 </AccordionItem>
               </Accordion>
             )
-          })}
-        <button className='btn btn-primary full-width mt-2' onClick={handleAddGeoPattern}>
+          }}
+        />
+        <Button variant='editor-primary' onClick={handleAddGeoPattern}>
           Add Geo Pattern
-        </button>
+        </Button>
       </AccordionItemPanel>
     </AccordionItem>
   )

package/src/components/EditorPanel/components/editorPanel.styles.css

@@ -2,17 +2,23 @@
   color: var(--mediumGray);
   display: grid;
   list-style: none;
-  button { width: 100% !important; }
+
+  button {
+    width: 100% !important;
+  }
+
   svg {
     box-sizing: border-box;
     display: block;
     margin: 0.5em auto;
     max-height: 40px;
     max-width: 80px;
+
     path {
       fill: currentColor;
     }
   }
+
   button {
     align-items: center;
     background: transparent;
@@ -25,28 +31,34 @@
     padding: 0.3em 0.75em;
     transition: 0.2s all;
     width: 40%;
+
     svg {
       display: block;
       height: 25px;
       margin: 0.5em auto;
       max-width: 100%;
     }
+
     span {
       font-size: 1em;
       text-transform: none;
     }
+
     &:hover {
       background: #f2f2f2;
       transition: 0.2s all;
     }
+
     &.active {
       background: #fff;
       border-color: #005eaa;
       color: #005eaa;
       position: relative;
+
       path {
         fill: #005eaa;
       }
+
       &:before {
         background: #005eaa;
         bottom: 0;
@@ -74,6 +86,7 @@
   transition: 0.1s background;
   width: 25px;
   z-index: 100;
+
   &:before {
     content: '\00ab';
     left: 50%;
@@ -81,18 +94,25 @@
     top: 43%;
     transform: translate(-50%, -50%);
   }
+
   &.collapsed {
     left: 1em;
     margin-left: 0;
+
     &:before {
       content: '\00bb';
     }
   }
+
   &:hover {
     background: rgba(255, 255, 255, 1);
   }
 }
 
+.editor-panel-action-button {
+  margin-top: 1rem;
+}
+
 .column-section__header {
   align-items: center;
   display: flex;
@@ -102,4 +122,4 @@
 
 .column-section__title {
   font-weight: 600;
-}
+}

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

@@ -145,7 +145,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             }}
           >
             <LegendShape shape={config.legend.style === 'boxes' ? 'square' : 'circle'} fill={item.color} />
-            <span>{item.label}</span>
+            <span className='cove-prose'>{item.label}</span>
           </button>
         </li>
       )
@@ -288,7 +288,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
             {(legend.title || legend.description || legend.dynamicDescription) && (
               <div className='mb-3'>
                 {legend.title && (
-                  <h3 className={legendClasses.title.join(' ') || ''}>
+                  <h3 className={`${legendClasses.title.join(' ') || ''} cove-prose`.trim()}>
                     {parse(
                       config.enableMarkupVariables && config.markupVariables?.length > 0
                         ? processMarkupVariables(legend.title, config.data || [], config.markupVariables, {
@@ -302,7 +302,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
                   </h3>
                 )}
                 {legend.dynamicDescription === false && legend.description && (
-                  <p className={legendClasses.description.join(' ') || ''}>
+                  <p className={`${legendClasses.description.join(' ') || ''} cove-prose`.trim()}>
                     {parse(
                       config.enableMarkupVariables && config.markupVariables?.length > 0
                         ? processMarkupVariables(legend.description, config.data || [], config.markupVariables, {

package/src/components/Legend/components/LegendItem.Hex.tsx

@@ -31,10 +31,12 @@ const LegendItemHex = props => {
         <aside id='legend' className={legendClasses.aside.join(' ')} role='region' aria-label='Legend' tabIndex={0}>
           <section className={legendClasses.section.join(' ')} aria-label='Map Legend'>
             {shapeGroup.legendTitle && (
-              <h3 className={legendClasses.title.join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
+              <h3 className={[...legendClasses.title, 'cove-prose'].join(' ')}>{parse(shapeGroup.legendTitle)}</h3>
             )}
             {shapeGroup.legendDescription && (
-              <p className={legendClasses.description.join(' ')}>{parse(shapeGroup.legendDescription)}</p>
+              <p className={[...legendClasses.description, 'cove-prose'].join(' ')}>
+                {parse(shapeGroup.legendDescription)}
+              </p>
             )}
 
             <ul className={legendClasses.ul.join(' ')} aria-label='Legend items' style={{ listStyle: 'none' }}>

package/src/components/SmallMultiples/SynchronizedTooltip.tsx

@@ -88,7 +88,7 @@ const SynchronizedTooltip: React.FC<SynchronizedTooltipProps> = ({ tileTooltipId
   return (
     <div
       ref={tooltipRef}
-      className='tooltip tooltip-test'
+      className='tooltip tooltip-test cove-prose'
       style={{
         position: 'fixed',
         left: `${tooltipState.x + 10}px`,