@cdc/core 4.24.1 → 4.24.3

package/components/ui/Title/Title.scss

@@ -2,9 +2,15 @@
   position: relative;
   padding: 0.6em 0.8em;
   margin: 0;
-  color: #fff;
+  color: var(--white);
   font-size: 1.1em;
 
+  h2 {
+    font-size: 1.1rem;
+    color: var(--white);
+    margin: 0;
+  }
+
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 

package/components/ui/Title/index.tsx

@@ -21,11 +21,11 @@ const Title = (props: HeaderProps) => {
   return (
     title &&
     showTitle && (
-      <header className={updatedClasses.join(' ')} aria-hidden='true' style={props.style} aria-level={ariaLevel}>
+      <header className={updatedClasses.join(' ')} style={props.style}>
         {superTitle && <sup>{parse(superTitle)}</sup>}
-        <div>
+        <h2>
           {parse(title)} {isDashboard}
-        </div>
+        </h2>
       </header>
     )
   )

package/components/ui/Tooltip.jsx

@@ -26,7 +26,7 @@ const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = tru
 
   return (
     <span className='cove-tooltip' style={style} {...attributes}>
-      <a id={uid} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
+      <a id={uid} role='dialog' tabIndex={0} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
       {/* prettier-ignore */}

package/components/ui/_stories/Colors.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+const COLORS = [
+  ['baseColor', '#333'],
+  ['blue', '#005eaa'],
+  ['lightestGray', '#f2f2f2'],
+  ['lightGray', '#c7c7c7'],
+  ['mediumGray', '#565656'],
+  ['darkGray', '#333'],
+  ['red', '#d8000c'],
+  ['white', '#fff'],
+
+  ['primary', '#005eaa'],
+  ['secondary', '#88c3ea'],
+  ['tertiary', '#c0e9ff'],
+  ['quaternary', '#edf9ff'],
+
+  ['purple-primary', '#712177'],
+  ['purple-secondary', '#b890bb'],
+  ['purple-tertiary', '#e3d3e4'],
+  ['purple-quaternary', '#f7f2f7'],
+
+  ['brown-primary', '#705043'],
+  ['brown-secondary', '#ad907b'],
+  ['brown-tertiary', '#d7ccc8'],
+  ['brown-quaternary', '#f2ebe8'],
+
+  ['teal-primary', '#00695c'],
+  ['teal-secondary', '#4ebaaa'],
+  ['teal-tertiary', '#ceece7'],
+  ['teal-quaternary', '#ebf7f5'],
+
+  ['pink-primary', '#af4448'],
+  ['pink-secondary', '#e57373'],
+  ['pink-tertiary', '#ffc2c2'],
+  ['pink-quaternary', '#ffe7e7'],
+
+  ['orange-primary', '#bb4d00'],
+  ['orange-secondary', '#ffad42'],
+  ['orange-tertiary', '#ffe97d'],
+  ['orange-quaternary', '#fff4cf'],
+
+  ['slate-primary', '#29434e'],
+  ['slate-secondary', '#7e9ba5'],
+  ['slate-tertiary', '#b6c6d2'],
+  ['slate-quaternary', '#e2e8ed'],
+
+  ['indigo-primary', '#26418f'],
+  ['indigo-secondary', '#92a6dd'],
+  ['indigo-tertiary', '#dee8ff'],
+  ['indigo-quaternary', '#f2f6ff'],
+
+  ['cyan-primary', '#006778'],
+  ['cyan-secondary', '#65b0bd'],
+  ['cyan-tertiary', '#cce5e9'],
+  ['cyan-quaternary', '#ebf5f6'],
+
+  ['green-primary', '#4b830d'],
+  ['green-secondary', '#84bc49'],
+  ['green-tertiary', '#dcedc8'],
+  ['green-quaternary', '#f1f8e9'],
+
+  ['amber-primary', '#fbab18'],
+  ['amber-secondary', '#ffd54f'],
+  ['amber-tertiary', '#ffecb3'],
+  ['amber-quaternary', '#fff7e1']
+]
+
+const ColorArray = () => {
+  return (
+    <table className='table'>
+      {COLORS.map(([name, hex]) => (
+        <tr>
+          <td style={{ background: hex, width: '60px' }}></td>
+          <td>{name}</td>
+          <td>{hex}</td>
+        </tr>
+      ))}
+    </table>
+  )
+}
+
+const meta: Meta<typeof ColorArray> = {
+  title: 'Components/Atoms/Colors',
+  component: ColorArray
+}
+
+type Story = StoryObj<typeof ColorArray>
+
+export const Primary: Story = {}
+
+export default meta

package/components/ui/_stories/Icon.stories.tsx

@@ -3,20 +3,27 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import Icon, { ICON_TYPES } from '../Icon'
 
-const meta: Meta<typeof Icon> = {
+const IconArray = () => {
+  return (
+    <>
+      {ICON_TYPES.map(name => (
+        <div>
+          <span>
+            <Icon display={name} /> {name}{' '}
+          </span>
+        </div>
+      ))}
+    </>
+  )
+}
+
+const meta: Meta<typeof IconArray> = {
   title: 'Components/Atoms/Icon',
-  component: Icon,
-  parameters: {
-    display: ICON_TYPES
-  }
+  component: IconArray
 }
 
 type Story = StoryObj<typeof Icon>
 
-export const Primary: Story = {
-  args: {
-    display: 'question'
-  }
-}
+export const Primary: Story = {}
 
 export default meta

package/data/colorPalettes.js

@@ -11,17 +11,12 @@ const colorPalettesMap = {
   greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
   yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
   qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
-
   qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
-
   qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
-
   qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
-
+  // qualitative9 doesn't appear to be used anywhere...
   qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
-
   'sequential-blue-2(MPX)': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
-
   'sequential-orange(MPX)': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00']
 }
 

package/helpers/cove/accessibility.ts

@@ -0,0 +1,23 @@
+import chroma from 'chroma-js'
+
+/**
+ * WCAG 2.0 Standard requires 4.5:1 contrast ratio
+ * https://www.w3.org/TR/WCAG20-TECHS/G18.html
+ *
+ * !important - DO NOT CHANGE.
+ */
+export const WCAG_CONTRAST_RATIO = 4.5
+
+export const getContrastColor = (textColor: string, bgColor: string) => {
+  if (chroma.contrast(textColor, bgColor) < WCAG_CONTRAST_RATIO) {
+    switch (textColor) {
+      case '#FFF':
+        return '#000'
+      case '#000':
+        return '#FFF'
+      default:
+        return textColor
+    }
+  }
+  return textColor
+}

package/helpers/cove/date.ts

@@ -0,0 +1,19 @@
+import { timeFormat, timeParse } from 'd3-time-format'
+import { type Axis } from '@cdc/core/types/Axis'
+
+export function formatDate(format = undefined, date) {
+  return timeFormat(format)(date)
+}
+
+export function parseDate(format = undefined, dateString) {
+  return timeParse(format)(dateString) || new Date()
+}
+
+export const isDateScale = (axis: Axis) => {
+  try {
+    if (!axis) throw new Error('COVE: No axis passed to isDateScale')
+    return ['date', 'date-time'].includes(axis.type)
+  } catch ({ message }) {
+    console.warn(message) // eslint-disable-line
+  }
+}

package/helpers/coveUpdateWorker.js

@@ -1,6 +1,7 @@
 // If config key names or position in the config have been changed with a version change,
 // process those config entries and format old values into new
 import update_4_23 from './ver/4.23'
+import update_4_24_3 from './ver/4.24.3'
 
 // 4.23.6 ------------------------------------------------------
 const coveUpdateWorker = async config => {
@@ -9,6 +10,9 @@ const coveUpdateWorker = async config => {
   // v4.23
   genConfig = await update_4_23(genConfig)
 
+  // v4.24.3
+  genConfig = await update_4_24_3(genConfig)
+
   return genConfig
 }
 

package/helpers/fetchRemoteData.js

@@ -1,14 +1,14 @@
 import Papa from 'papaparse'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
-export default async function (url, visualizationType = '') {
+export default async function (_url, visualizationType = '') {
+  let url = new URL(_url, window.location.origin)
   try {
-    url = new URL(url, window.location.origin)
-
     const path = url.pathname
     const regex = /(?:\.([^.]+))?$/
     const ext = regex.exec(path)[1]
 
-    if ('csv' === ext) {
+    if ('csv' === ext || isSolrCsv(_url)) {
       return await fetch(url.href)
         .then(response => response.text())
         .then(responseText => {
@@ -30,7 +30,7 @@ export default async function (url, visualizationType = '') {
           return parsedCsv.data
         })
     } else {
-      return await fetch(url.href).then(response => response.json())
+      return await fetch(isSolrCsv(_url) ? _url : url.href).then(response => response.json())
     }
   } catch {
     // If we can't parse it, still attempt to fetch it

package/helpers/getViewport.ts

@@ -0,0 +1,23 @@
+import { ViewPort } from '../types/ViewPort'
+
+export const viewports = {
+  lg: 1200,
+  md: 992,
+  sm: 768,
+  xs: 576,
+  xxs: 350
+}
+
+export default function getViewport(size): ViewPort {
+  let result: ViewPort = 'lg'
+
+  if (size > 1200) return result
+
+  for (let viewport in viewports) {
+    if (size <= viewports[viewport]) {
+      result = viewport as ViewPort
+    }
+  }
+
+  return result
+}

package/helpers/isDomainExternal.js

@@ -0,0 +1,14 @@
+export default function isDomainExternal(domain) {
+  const internalDomains = ['cdc.gov', 'localhost', 'facebook.com', 'twitter.com', 'linkedin.com', 'pinterest.com', 'youtube.com', 'youtube-nocookie.com', 'plus.google.com', 'instagram.com', 'flickr.com', 'tumblr.com', 'cdc.sharepoint.com', 'vaccines.gov', 'vacunas.gov']
+
+  const hostname = new URL(domain, window.location.origin).hostname
+  let external = true
+
+  internalDomains.forEach(internalDomain => {
+    if (hostname.indexOf(internalDomain) !== -1 && hostname.indexOf(internalDomain) === hostname.length - internalDomain.length) {
+      external = false
+    }
+  })
+
+  return external
+}

package/helpers/isSolr.js

@@ -0,0 +1,13 @@
+export const isSolrCsv = dataUrl => {
+  if (dataUrl.includes('wt=csv')) {
+    return true
+  }
+  return false
+}
+
+export const isSolrJson = dataUrl => {
+  if (dataUrl?.includes('wt=json')) {
+    return true
+  }
+  return false
+}

package/helpers/queryStringUtils.js

@@ -0,0 +1,26 @@
+export function getQueryStringFilterValue(filter) {
+  const urlParams = new URLSearchParams(window.location.search)
+  if(filter.setByQueryParameter){ // Only check the query string if the filter is supposed to be set by QS param
+    const filterValue = urlParams.get(filter.setByQueryParameter)
+    if(filterValue && filter.values){
+      for(let i = 0; i < filter.values.length; i++){
+        if(filter.values[i] && filter.values[i].toLowerCase() === filterValue.toLowerCase()){
+          return filter.values[i]
+        }
+      }
+    }
+  }
+}
+
+export function getQueryParams(filter) {
+  const queryParams = {};
+  for (const [key, value] of (new URLSearchParams(window.location.search)).entries()) {
+    queryParams[key] = value
+  }
+  return queryParams;
+}
+
+export function updateQueryString(queryParams) {
+  const updateUrl = `${window.location.origin}${window.location.pathname}?${Object.keys(queryParams).map(queryParam => `${queryParam}=${encodeURIComponent(queryParams[queryParam])}`).join('&')}`;
+  window.history.pushState({path: updateUrl}, '', updateUrl);
+}

package/helpers/tests/updateFieldFactory.test.ts

@@ -0,0 +1,89 @@
+import { updateFieldFactory } from '../updateFieldFactory'
+
+describe('updateFieldFactory', () => {
+  it('should update the top level field when section and subsection are null', () => {
+    const config = { filterColumn: 'oldValue', filterValue: 'oldValue' }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField(null, null, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ filterColumn: 'newValue', filterValue: '' })
+  })
+
+  it('should update the second level when section is not null and subsection is null', () => {
+    const config = { section: { filterColumn: 'oldValue', filterValue: 'oldValue' } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', null, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { filterColumn: 'newValue', filterValue: 'oldValue' } })
+  })
+
+  it('should add to the second level when section is an array and subsection is null', () => {
+    const config = { section: ['oldValue'] }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', null, 'thisParamDoesNotMatter', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: ['oldValue', 'newValue'] })
+  })
+
+  it('should update the third level when section and subsection are not null', () => {
+    const config = { section: { subsection: { filterColumn: 'oldValue', filterValue: 'oldValue' } } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', 'subsection', 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { subsection: { filterColumn: 'newValue', filterValue: 'oldValue' } } })
+  })
+
+  it('should update the third level when section is an array', () => {
+    const config = { section: [{ filterColumn: 'oldValue', filterValue: 'oldValue' }] }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig)
+    updateField('section', 0, 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: [{ filterColumn: 'newValue', filterValue: 'oldValue' }] })
+  })
+
+  it('should update the second level when newValue is a string and legacy is true', () => {
+    // test for legacy use case
+    // puts the newValue in two places for some reason
+    const config = { section: { subsection: 'oldValue' } }
+    let updatedConfig = {}
+    const updateConfig = newConfig => {
+      updatedConfig = newConfig
+    }
+
+    const updateField = updateFieldFactory(config, updateConfig, true)
+    updateField('section', 'subsection', 'filterColumn', 'newValue')
+
+    expect(updatedConfig).toEqual({ section: { subsection: 'newValue', filterColumn: 'newValue' } })
+
+    updateField('section', null, 'filterColumn', 'newValue2')
+    expect(updatedConfig).toEqual({ section: { subsection: 'oldValue', filterColumn: 'newValue2' } })
+
+    updateField('section', 'subsection', null, 'newValue2')
+    expect(updatedConfig).toEqual({ section: { subsection: 'newValue2', null: 'newValue2' } })
+  })
+})

package/helpers/updateFieldFactory.ts

@@ -0,0 +1,38 @@
+import { UpdateFieldFunc } from '../types/UpdateFieldFunc'
+
+export const updateFieldFactory =
+  (config, updateConfig, legacy = false): UpdateFieldFunc<any> =>
+  (section, subsection, fieldName, newValue) => {
+    // Top level
+    if (null === section && null === subsection) {
+      const updatedConfig = { ...config, [fieldName]: newValue }
+
+      if ('filterColumn' === fieldName) {
+        updatedConfig.filterValue = ''
+      }
+
+      updateConfig(updatedConfig)
+      return
+    }
+
+    const isArray = Array.isArray(config[section])
+
+    let sectionValue = isArray ? [...config[section], newValue] : { ...config[section], [fieldName]: newValue }
+
+    if (null !== subsection) {
+      if (isArray) {
+        sectionValue = [...config[section]]
+        sectionValue[subsection] = { ...sectionValue[subsection], [fieldName]: newValue }
+      } else if (typeof newValue === 'string' && legacy) {
+        // supports data-bite, filter-text, markup-include, and waffle-chart.
+        // i'm not sure what the use case for this could be considering you should be able to
+        // update by not passing the subsection. Therefore I'm labeling it as legacy.
+        sectionValue[subsection] = newValue
+      } else {
+        sectionValue = { ...config[section], [subsection]: { ...config[section][subsection], [fieldName]: newValue } }
+      }
+    }
+    const updatedConfig = { ...config, [section]: sectionValue }
+
+    updateConfig(updatedConfig)
+  }

package/helpers/useDataVizClasses.js

@@ -65,8 +65,8 @@ export default function useDataVizClasses(config, viewport = null) {
     ul: getUlClasses(),
     li: ['single-legend-item', 'legend-container__li'],
     title: ['legend-container__title'],
-    resetButton: ['legend-container__reset-button', 'btn', 'clear'],
-    description: ['legend-container__description']
+    description: ['legend-container__description'],
+    div: [legend?.position === 'bottom' && legend?.singleRow ? 'shape-container single-row' : 'shape-container']
   }
 
   return { innerContainerClasses, contentClasses, barBorderClass, lineDatapointClass, sparkLineStyles, legendClasses }

package/helpers/ver/4.24.3.js

@@ -0,0 +1,25 @@
+const update_4_24_3 = async config => {
+  const ver = '4.24.3'
+
+  let newConfig = { ...config }
+
+  newConfig.validated = ver
+
+  if (newConfig.type === 'chart') {
+    if (newConfig.xAxis.sortDates) {
+      newConfig.xAxis.type = 'date-time'
+    }
+    newConfig.table.download = true
+
+    delete newConfig.xAxis.sortDates
+  }
+
+  if (newConfig.type === 'map') {
+    newConfig.table.download = true
+    newConfig.general.showDownloadButton = true
+  }
+
+  return newConfig
+}
+
+export default update_4_24_3

package/helpers/withDevTools.ts

@@ -0,0 +1,50 @@
+// This package hooks into the Redux Dev Tools extension
+// It works as a wrapper for any reducer function
+
+// Based on: https://github.com/MacKentoch/react-bootstrap-webpack-starter/blob/master/front/src/contexts/withDevTools/index.ts
+
+// types
+type DevToolsMessageType = 'DISPATCH' | string
+
+type DevToolsMessagePayload = {
+  type?: string
+  state?: any
+}
+
+type DevToolsMessage = {
+  type?: DevToolsMessageType
+  payload?: DevToolsMessagePayload
+}
+
+type Action = {
+  type: string
+  payload?: any
+}
+
+// the only method the devToolsWrapper hooks into is .send()
+// all other type definitions are kept for reference.
+// it's possible there's a DevTools type in the Redux library
+// however this allows us to avoid another dependency as this project
+// doesn't use Redux.
+type DevTools = {
+  init: () => void
+  connect: () => any
+  subscribe: (message: DevToolsMessage) => any
+  send: (action: Action, newState: any) => any
+  unsubscribe: () => any
+  dispatch: (action: Action) => any
+  disconnect: () => any
+}
+
+// constants
+const withDevTools = typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__
+const devTools: DevTools = !withDevTools ? null : (window as any).__REDUX_DEVTOOLS_EXTENSION__.connect()
+export const devToolsStore = !withDevTools ? null : devTools
+
+export const devToolsWrapper =
+  <StateType, ActionTypes>(_reducer: (s: StateType, a: ActionTypes) => StateType) =>
+  (state: StateType, action: ActionTypes): StateType => {
+    const newState = _reducer(state, action)
+    devToolsStore?.send(action as Action, newState)
+    return newState
+  }

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@cdc/core",
-  "version": "4.24.1",
+  "version": "4.24.3",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1"
+    "test": "vitest watch --reporter verbose --globals true",
+    "test:ui": "vitest --ui"
   },
   "repository": {
     "type": "git",
@@ -30,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "a352a3f74f4b681191e3244061dbb3621f36eec3"
+  "gitHead": "9c7ef7ca74f2d2a1e04d923b133fe0fc557a62bf"
 }

package/styles/_data-table.scss

@@ -31,10 +31,6 @@ div.data-table-heading {
 }
 
 table.horizontal {
-  tr {
-    display: flex;
-  }
-
   th,
   td {
     min-width: 200px;
@@ -42,7 +38,7 @@ table.horizontal {
 }
 
 table.data-table {
-  width: 100%;
+  min-width: 100%;
   background: #fff;
   position: relative;
   border: none;
@@ -51,7 +47,6 @@ table.data-table {
   overflow: auto;
   appearance: none;
   table-layout: fixed;
-  display: grid;
   * {
     box-sizing: border-box;
   }
@@ -107,18 +102,6 @@ table.data-table {
       background-size: 10px 5px;
     }
 
-    /* doesnt work
-    th.sort-asc,
-    td.sort-asc {
-      background-image: url(../assets/icon-caret-filled-up.svg);
-    }
-
-    th.sort-desc,
-    td.sort-desc {
-      background-image: url(../assets/icon-caret-filled-down.svg);
-    }
-    */
-
     // format the white triangle sort icon in data table headers
     .sort-icon {
       fill: white;
@@ -138,7 +121,6 @@ table.data-table {
   }
 
   tbody {
-    display: table-cell;
     tr {
       width: 100%;
       &:hover {
@@ -162,6 +144,7 @@ table.data-table {
 
   th,
   td {
+    width: 1% !important;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -170,7 +153,6 @@ table.data-table {
     }
   }
   tr {
-    display: flex;
     & > * {
       width: 100%;
     }