@cdc/map 4.26.2 → 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-style.css

@@ -1,4 +1,4 @@
-.cdc-open-viz-module {
+.cove-visualization {
   .pattern-input__color {
     margin-top: 1rem;
   }

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

@@ -10,12 +10,13 @@ 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'
 import './Panel.PatternSettings-style.css'
 import Alert from '@cdc/core/components/Alert'
-import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
 import { cloneConfig } from '@cdc/core/helpers/cloneConfig'
 
 // topojson helpers for checking color contrasts
@@ -65,7 +66,7 @@ const PatternSettings = ({ name }: PanelProps) => {
 
   /** Updates the map config with a new pattern item */
   const handleAddGeoPattern = () => {
-    const patterns = _.cloneDeep(config.map.patterns)
+    const patterns = cloneDeep(config.map.patterns)
     patterns.push({ dataKey: '', pattern: defaultPattern, contrastCheck: true })
     setConfig({
       ...config,
@@ -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' />
                       ) : (
@@ -217,6 +232,9 @@ const PatternSettings = ({ name }: PanelProps) => {
                           handlePatternFieldUpdate('dataKey', value, patternIndex)
                         }
                       />
+                      <p className='edit-label mb-2'>
+                        Leave Data Key as &quot;Select&quot; to match this value across all columns.
+                      </p>
                       <label htmlFor={`pattern-dataValue--${patternIndex}`}>
                         Data Value:
                         <input
@@ -231,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>
@@ -276,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

@@ -1,60 +1,72 @@
 .geo-buttons {
-  list-style: none;
   color: var(--mediumGray);
   display: grid;
-  button { width: 100% !important; }
+  list-style: none;
+
+  button {
+    width: 100% !important;
+  }
+
   svg {
+    box-sizing: border-box;
     display: block;
-    max-width: 80px;
-    max-height: 40px;
     margin: 0.5em auto;
-    box-sizing: border-box;
+    max-height: 40px;
+    max-width: 80px;
+
     path {
       fill: currentColor;
     }
   }
+
   button {
+    align-items: center;
     background: transparent;
-    padding: 0.3em 0.75em;
-    display: flex;
     border: var(--lightGray) 1px solid;
-    width: 40%;
-    align-items: center;
-    margin-right: 1em;
     cursor: pointer;
-    overflow: hidden;
+    display: flex;
     flex-direction: column;
+    margin-right: 1em;
+    overflow: hidden;
+    padding: 0.3em 0.75em;
     transition: 0.2s all;
+    width: 40%;
+
     svg {
       display: block;
       height: 25px;
       margin: 0.5em auto;
       max-width: 100%;
     }
+
     span {
-      text-transform: none;
       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 {
-        content: ' ';
-        width: 5px;
         background: #005eaa;
-        left: 0;
-        top: 0;
         bottom: 0;
+        content: ' ';
+        left: 0;
         position: absolute;
+        top: 0;
+        width: 5px;
       }
     }
   }
@@ -62,34 +74,52 @@
 
 .editor-toggle {
   background: #f2f2f2;
+  border: 0;
   border-radius: 60px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
   color: #000;
+  cursor: pointer;
   font-size: 1em;
-  border: 0;
+  height: 25px;
+  left: 307px;
   position: fixed;
-  z-index: 100;
   transition: 0.1s background;
-  cursor: pointer;
   width: 25px;
-  height: 25px;
-  left: 307px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px;
+  z-index: 100;
+
   &:before {
-    top: 43%;
+    content: '\00ab';
     left: 50%;
-    transform: translate(-50%, -50%);
     position: absolute;
-    content: '\00ab';
+    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;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.column-section__title {
+  font-weight: 600;
+}

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

@@ -56,7 +56,8 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
   const isLegendGradient = legend.style === 'gradient'
   const boxDynamicallyHidden = isBelowBreakpoint('md', viewport)
   const legendWrapping =
-    (legend.position === 'left' || legend.position === 'right') && isBelowBreakpoint('md', viewport)
+    (legend.position === 'left' || legend.position === 'right') &&
+    (viewport === 'md' || isBelowBreakpoint('md', viewport))
   const legendOnBottom = legend.position === 'bottom' || legendWrapping
   const needsTopMargin = legend.hideBorder && legendOnBottom
 
@@ -144,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>
       )
@@ -274,7 +275,7 @@ const Legend = forwardRef<HTMLDivElement, LegendProps>((props, ref) => {
 
   return (
     <ErrorBoundary component='Sidebar'>
-      <div className={`legends ${needsTopMargin ? 'mt-4' : ''}`}>
+      <div className={`legends ${needsTopMargin ? 'mt-4' : ''} ${legendWrapping ? 'legend-wrapped-bottom' : ''}`}>
         <aside
           id={skipId || 'legend'}
           className={legendClasses.aside.join(' ') || ''}
@@ -287,24 +288,28 @@ 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, {
                             isEditor: false,
-                            filters: config.filters || []
+                            filters: config.filters || [],
+                            locale: config.locale,
+                            dataMetadata: config.dataMetadata
                           }).processedContent
                         : legend.title
                     )}
                   </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, {
                             isEditor: false,
-                            filters: config.filters || []
+                            filters: config.filters || [],
+                            locale: config.locale,
+                            dataMetadata: config.dataMetadata
                           }).processedContent
                         : legend.description
                     )}

package/src/components/Legend/components/LegendGroup/legend.group.css

@@ -1,15 +1,15 @@
 .group-label {
-  font-weight: 500;
   font-family: Nunito, sans-serif;
   font-size: 1rem;
+  font-weight: 500;
   margin-bottom: 0.5rem;
 }
 .group-list-item {
-  list-style: none;
-  font-weight: 400;
+  cursor: pointer;
   font-size: 0.889rem;
+  font-weight: 400;
+  list-style: none;
   margin-top: 0.5rem !important;
-  cursor: pointer;
 }
 
 .group-container {
@@ -21,7 +21,7 @@
 }
 
 .legend-group-item-not-disable {
+  border-radius: 1px;
   outline: 1px solid #005ea2;
   outline-offset: 5px;
-  border-radius: 1px;
 }