@cdc/map 4.25.8 → 4.25.11

package/src/scss/editor-panel.scss

@@ -1,3 +1,6 @@
+// Map-specific Editor Panel Styles
+// Common editor panel styles are imported from @cdc/core/styles/editor-panel-base via cove-main.scss
+
 .post-type-cdc_visualization {
   .cove {
     // Temp Radio button fix
@@ -14,8 +17,8 @@
     // End Temp Radio button fix
   }
 }
-.cdc-open-viz-module {
 
+.cdc-open-viz-module {
   .editor-panel {
     .cove-input-group,
     .cove-accordion__small-inputs {
@@ -92,287 +95,9 @@
       margin-left: 0.3rem;
     }
 
-
-    .form-container {
-      border-right: var(--lightGray) 1px solid;
-      flex-grow: 1;
-    }
-
-    .guidance-link {
-      margin: 2em 1em 0;
-      padding: 0.75em 1em;
-      align-items: center;
-      .heading-3 {
-        font-weight: 600;
-        font-size: 1.2em;
-      }
-      svg {
-        width: 60px;
-        color: var(--blue);
-        margin-right: 1rem;
-        height: 60px; // IE11
-        path {
-          fill: currentColor;
-        }
-      }
-    }
-    .warning {
-      color: #d8000c;
-      background-color: #ffd2d2;
-      padding: 0.75em 1em;
-      margin: 1em 0;
-      font-size: 0.8em;
-      border: #d8000c 1px solid;
-      border-radius: 0.4em;
-      strong {
-        font-weight: 600;
-        display: block;
-      }
-    }
-    .accordion__button {
-      cursor: pointer;
-      font-size: 1em;
-      padding: 0.3em 1em;
-      width: 100%;
-      text-align: left;
-      position: relative;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
-    .accordion__button:before {
-      display: inline-block;
-      content: '';
-      height: 7px;
-      width: 7px;
-      margin-right: 1em;
-      border-bottom: 2px solid currentColor;
-      border-right: 2px solid currentColor;
-      right: 0;
-      position: absolute;
-      top: 50%;
-      transform: rotate(-45deg) translateY(-50%);
-      transition: 0.1s all;
-    }
-
-    .accordion__button[aria-expanded='true']::before,
-    .accordion__button[aria-selected='true']::before {
-      top: 45%;
-      transform: rotate(45deg) translateY(-50%);
-      margin-right: 1.3em;
-      transition: 0.1s all;
-    }
-
-    .accordion__panel {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 1em 1.25em 2em;
-      animation: fadein 0.2s ease-in;
-      span.h5 {
-        font-size: 0.8em;
-      }
-      & p.layer-purpose-details {
-        margin-top: 1em;
-      }
-    }
-
-    .advanced {
-      padding: 0 1em 1em;
-      text-align: left;
-      p {
-        font-size: 0.8rem;
-      }
-      .advanced-toggle-link {
-        padding-top: 1em;
-        display: block;
-        text-align: left;
-        cursor: pointer;
-        text-decoration: underline;
-        span {
-          text-decoration: none;
-          display: inline-block;
-          font-family: monospace;
-          padding-right: 5px;
-        }
-        &:hover {
-          color: rgba(0, 0, 0, 0.7);
-        }
-      }
-      textarea {
-        height: 400px;
-        width: 100%;
-        font-size: 0.9em;
-        padding: 0.5em;
-        font-family: monospace;
-        box-sizing: border-box;
-      }
-    }
-
-    @keyframes fadein {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
-    }
-
-    .base-label {
-      background: #565656;
-      color: #fff;
-      font-size: 1.1em;
-      padding: 0.6em 1em;
-      position: relative;
-      border-bottom: #565656 3px solid;
-      z-index: 3;
-    }
-
-    label {
-      text-transform: uppercase;
-      display: block;
-      font-size: 0.8em;
-      font-weight: 600;
-      &:not(:first-child) {
-        margin-top: 1em;
-      }
-      span.edit-label {
-        margin-bottom: 0.3em;
-        display: flex;
-      }
-      span.column-heading {
-        font-size: 1em;
-      }
-      &.checkbox {
-        margin-top: 0.5rem;
-        display: flex;
-
-        input {
-          margin-left: 0;
-          width: inherit;
-          display: inline;
-        }
-      }
-    }
-    input[type='text'],
-    input[role='combobox'],
-    input[type='number'],
-    textarea {
-      min-width: 100%;
-      max-width: 100%; // Doing this prevents width of textarea from being changed
-    }
     textarea {
       min-height: 140px;
     }
-    .header .color-palette li {
-      width: 21px;
-      height: 21px;
-      border-radius: 40px;
-      margin-right: 2.8px;
-    }
-    .color-palette {
-      display: flex;
-      max-width: 100%;
-      padding: 0;
-      margin: 0.5em 0 0 0;
-      list-style: none;
-      flex-wrap: wrap;
-      li {
-        width: 45px;
-        height: 23px;
-        margin-right: 4px;
-        margin-bottom: 10px;
-        display: flex;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-        .click-target {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-        }
-        &.selected {
-          border: rgba(0, 0, 0, 0.8) 2px solid;
-        }
-        span {
-          width: 33.3%;
-        }
-      }
-    }
-
-    fieldset {
-      display: block;
-    }
-
-    .primary-fieldset {
-      padding: 0;
-      margin: 0;
-      border: 0;
-    }
-
-    ul.column-edit {
-      list-style: none;
-      li {
-        margin-top: 1em;
-      }
-      .three-col {
-        display: flex;
-        justify-content: space-between;
-        > label {
-          margin-top: 0;
-          width: 30%;
-          display: inline-block;
-          input[type='text'],
-          input[type='number'] {
-            width: 50px;
-          }
-        }
-      }
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .emove-column {
-      float: right;
-      text-transform: uppercase;
-      color: #c32b2b;
-      font-size: 0.7em;
-      line-height: 1.6em;
-      border-radius: 5px;
-      margin: 0 auto;
-      transition: 0.1s all;
-      border: 0;
-      text-decoration: underline;
-      outline: 0;
-      cursor: pointer;
-      font-weight: bold;
-    }
-
-    .edit-block {
-      padding-left: 1em;
-      border-left: rgba(0, 0, 0, 0.2) 4px solid;
-      transition: 0.2s all;
-      &:not(:first-child) {
-        margin-top: 2em;
-      }
-      input[type='text'],
-      input[type='number'] {
-        font-size: 1em;
-      }
-      label {
-        margin-top: 0;
-      }
-      label + label {
-        margin-top: 1em;
-      }
-      &:hover {
-        border-left: rgba(0, 0, 0, 0.7) 4px solid;
-        transition: 0.2s all;
-      }
-    }
 
     .data-toggle {
       list-style: none;
@@ -443,167 +168,6 @@
         }
       }
     }
-
-    span.subtext {
-      display: block;
-      color: rgba(0, 0, 0, 0.5);
-      text-transform: none;
-      font-weight: normal;
-    }
-
-    .sort-list {
-      list-style: none;
-      > li {
-        margin-right: 0.3em;
-        margin-bottom: 0.3em;
-      }
-    }
-    .sort-list li > div {
-      display: block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-bottom: 0.3em;
-      cursor: move;
-      z-index: 999;
-    }
-
-    .info {
-      font-size: 0.8em;
-      line-height: 1.4em;
-      font-style: italic;
-      padding-top: 10px;
-    }
-
-    .react-tags__search {
-      width: 100%;
-    }
-
-    .react-tags {
-      position: relative;
-      input.react-tags__search-input {
-        font-size: 0.8rem;
-      }
-      /* clicking anywhere will focus the input */
-      cursor: text;
-      span {
-        display: inline;
-      }
-    }
-
-    .react-tags.is-focused {
-      border-color: rgba(0, 0, 0, 0.7);
-    }
-
-    .react-tags__selected {
-      display: inline;
-    }
-
-    .react-tags__selected-tag {
-      display: inline-block;
-      box-sizing: border-box;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      background: #f1f1f1;
-      padding: 0.4em 0.6em;
-      font-size: 0.8em;
-      margin-right: 0.3em;
-      margin-bottom: 0.3em;
-    }
-
-    .react-tags__selected-tag:after {
-      content: '\2715';
-      color: #aaa;
-      margin-left: 8px;
-    }
-
-    .react-tags__selected-tag:hover,
-    .react-tags__selected-tag:focus {
-      border-color: #b1b1b1;
-    }
-
-    .react-tags__search {
-      display: inline-block;
-
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__search {
-        /* this will become the offsetParent for suggestions */
-        position: relative;
-      }
-    }
-
-    .react-tags__search input {
-      /* prevent autoresize overflowing the container */
-      max-width: 100%;
-
-      /* emove styles and layout from this element */
-      margin: 0;
-      outline: none;
-      padding: 0.5em 0.3em;
-
-      /* match the font styles */
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .react-tags__search input::-ms-clear {
-      display: none;
-    }
-
-    .react-tags__suggestions {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-    }
-
-    @media screen and (min-width: 30em) {
-      .react-tags__suggestions {
-        width: 240px;
-      }
-    }
-
-    .react-tags__suggestions ul {
-      margin: 4px -1px;
-      padding: 0;
-      list-style: none;
-      background: white;
-      border: 1px solid #d1d1d1;
-      border-radius: 2px;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    }
-
-    .react-tags__suggestions li {
-      border-bottom: 1px solid #ddd;
-      padding: 6px 8px;
-    }
-
-    .react-tags__suggestions li mark {
-      text-decoration: underline;
-      background: none;
-      font-weight: 600;
-    }
-
-    .react-tags__suggestions li:hover {
-      cursor: pointer;
-      background: #eee;
-    }
-
-    .react-tags__suggestions li.is-active {
-      background: #b7cfe0;
-    }
-
-    .react-tags__suggestions li.is-disabled {
-      opacity: 0.5;
-      cursor: auto;
-    }
   }
 
   @include breakpointClass(md) {

package/src/scss/main.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@import '@cdc/core/styles/v2/utils/breakpoints';
 @import 'editor-panel';
 @import '@cdc/core/styles/accessibility';
 

package/src/scss/map.scss

@@ -33,25 +33,28 @@ $medium: 768px;
   &:focus {
     outline: 0;
   }
+
+  // Multi-country map states - use higher specificity
+  &.hidden {
+    display: none !important;
+  }
+
+  &.grayed-out {
+    opacity: 0.3;
+    fill: #d3d3d3 !important;
+  }
 }
 
 .territories-label {
-  font-size: 0.8rem;
   font-weight: 700;
 }
 
-@include breakpointClass(sm) {
-  .territories-label {
-    font-size: 1rem;
-  }
-}
-
 // Cities and Territories
 .territories {
   gap: 0.5em;
   svg {
-    max-width: 30px;
-    min-width: 30px;
+    max-width: var(--territory-svg-max-width, 30px);
+    min-width: var(--territory-svg-min-width, 30px);
     transition: 0.3s all;
 
     text {
@@ -73,11 +76,6 @@ $medium: 768px;
       width: 2.5em;
     }
   }
-  .territories {
-    svg {
-      max-width: 45px;
-    }
-  }
 }
 
 .state {
@@ -98,7 +96,6 @@ $medium: 768px;
   display: none;
 }
 
-
 .county-borders {
   fill: none;
   stroke-width: 1px;

package/src/store/map.actions.ts

@@ -1,9 +1,9 @@
-import { MapConfig, Coordinate } from '../types/MapConfig'
-import { GeneratedLegend } from '../hooks/useGenerateRuntimeLegend'
-import { VizFilter } from '@cdc/core/types/VizFilter'
+import { type MapConfig, type Coordinate } from '../types/MapConfig'
+import { type RuntimeLegend } from '../types/runtimeLegend'
+import { type VizFilter } from '@cdc/core/types/VizFilter'
 import { type Action } from '@cdc/core/types/Action'
-import { RuntimeData } from '../types/RuntimeData'
-import { Modal } from '../types/Modal'
+import { type RuntimeData } from '../types/RuntimeData'
+import { type Modal } from '../types/Modal'
 
 // Action Types
 type SET_ACCESSIBLE_STATUS = Action<'SET_ACCESSIBLE_STATUS', string>
@@ -18,13 +18,13 @@ type SET_POSITION = Action<'SET_POSITION', { coordinates: Coordinate; zoom: numb
 type SET_REQUIRED_COLUMNS = Action<'SET_REQUIRED_COLUMNS', string[]>
 type SET_RUNTIME_DATA = Action<'SET_RUNTIME_DATA', RuntimeData>
 type SET_RUNTIME_FILTERS = Action<'SET_RUNTIME_FILTERS', VizFilter[]>
-type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', GeneratedLegend | []>
+type SET_RUNTIME_LEGEND = Action<'SET_RUNTIME_LEGEND', RuntimeLegend | []>
 type SET_SCALE = Action<'SET_SCALE', number>
 type SET_STATES_TO_SHOW = Action<'SET_STATES_TO_SHOW', string[]>
 type SET_TOPO_DATA = Action<'SET_TOPO_DATA', any>
 type SET_TRANSLATE = Action<'SET_TRANSLATE', [number, number]>
 
-export type MapActions =
+type MapActions =
   | SET_ACCESSIBLE_STATUS
   | SET_CONFIG
   | SET_COVE_LOADED_HAS_RAN

package/src/store/map.reducer.ts

@@ -1,13 +1,24 @@
-import { MapConfig } from '../types/MapConfig'
+import { MapConfig, RuntimeFilters } from '../types/MapConfig'
 import MapActions from './map.actions'
 import defaults from './../data/initial-state'
 import { devToolsWrapper } from '@cdc/core/helpers/withDevTools'
 import _ from 'lodash'
+import { Modal } from '../types/Modal'
+import { GeneratedLegend } from '../helpers/generateRuntimeLegend'
+import { RuntimeData } from '../types/RuntimeData'
 
 export const getInitialState = (configObj = {}): MapState => {
+  // Create defaults without palette version to avoid overriding legacy configs
+  const defaultsWithoutPaletteaName = { ...defaults }
+
+  // Only apply palette defaults if the loaded config explicitly has general.palette
+  // if (!configObj?.general?.palette?.name) {
+  //   delete defaultsWithoutPaletteaName.general?.palette.name
+  // }
+
   return {
     dataUrl: configObj.dataUrl || '',
-    config: _.merge({}, defaults, configObj),
+    config: _.merge({}, defaultsWithoutPaletteaName, configObj),
     loading: false,
     accessibleStatus: '',
     coveLoadedHasRan: false,
@@ -42,10 +53,10 @@ export type MapState = {
   projection: object | null
   requiredColumns: string[]
   scale: number
-  modal: object | null
-  runtimeData: object
-  runtimeFilters: object[]
-  runtimeLegend: object[]
+  modal: Modal | null
+  runtimeData: RuntimeData | { init: boolean }
+  runtimeFilters: RuntimeFilters
+  runtimeLegend: GeneratedLegend | []
   statesToShow: string[]
   dataUrl: string
 }

package/src/test/CdcMap.test.jsx

@@ -0,0 +1,11 @@
+import path from 'path'
+import { testStandaloneBuild } from '@cdc/core/helpers/tests/testStandaloneBuild.ts'
+import { describe, it, expect } from 'vitest'
+
+describe('Map', () => {
+  it('Can be built in isolation', async () => {
+    const pkgDir = path.join(__dirname, '..')
+    const result = testStandaloneBuild(pkgDir)
+    expect(result).toBe(true)
+  })
+})