@cdc/core 4.23.9 → 4.23.10

package/components/{GlobalContext.jsx → GlobalContext.tsx}

@@ -1,14 +1,25 @@
-import React, { createContext, useContext, useState } from 'react'
+import React, { ReactElement, createContext, useContext, useState } from 'react'
 
-export const GlobalContext = createContext({})
+type Global = {
+  overlay: {
+    object: ReactElement,
+    show: boolean,
+    disableBgClose: boolean,
+    actions: {
+      openOverlay: (any, boolean?) => void,
+      toggleOverlay: (boolean?) => void
+    }
+  }
+}
+export const GlobalContext = createContext<Global>({} as Global)
 export const useGlobalContext = () => useContext(GlobalContext)
 
 export const GlobalContextProvider = ({ children }) => {
-  const [globalContextData, setGlobalContextData] = useState({})
+  const [globalContextData, setGlobalContextData] = useState<Global>({} as Global)
 
   const openOverlay = (obj, disableBgClose = false) => {
     let payload = { object: obj, show: true, disableBgClose: disableBgClose }
-    setGlobalContextData(context => ({ ...context, overlay: { ...payload } }))
+    setGlobalContextData(context => ({ ...context, overlay: { ...payload } } as Global))
   }
 
   const toggleOverlay = (display = false) => {
@@ -21,7 +32,7 @@ export const GlobalContextProvider = ({ children }) => {
     }))
   }
 
-  const globalSettings = {
+  const globalSettings: Global = {
     overlay: {
       object: globalContextData.overlay?.object || null,
       show: globalContextData.overlay?.show || false,

package/components/MediaControls.jsx

@@ -59,7 +59,7 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg).then(canvas => {
+      html2canvas(baseSvg, {foreignObjectRendering: true}).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return
@@ -107,19 +107,20 @@ const Button = ({ state, text, type, title, elementToCapture }) => {
 }
 
 // Link to CSV/JSON data
-const Link = ({ config }) => {
+const Link = ({ config, dashboardDataConfig }) => {
+  let dataConfig = dashboardDataConfig || config;
   // Handles Maps & Charts
-  if (config.dataFileSourceType === 'url' && config.dataFileName && config.table.showDownloadUrl) {
+  if (dataConfig.dataFileSourceType === 'url' && dataConfig.dataFileName && config.table.showDownloadUrl) {
     return (
-      <a href={config.dataFileName} title={buttonText.link} target='_blank'>
+      <a href={dataConfig.dataFileName} title={buttonText.link} target='_blank'>
         {buttonText.link}
       </a>
     )
   }
 
   // Handles Dashboards
-  return config?.table?.showDownloadUrl && config.dataUrl ? (
-    <a href={config.dataUrl} title='Link to view full data set' target='_blank'>
+  return config?.table?.showDownloadUrl && dataConfig.dataUrl ? (
+    <a href={dataConfig.dataUrl} title='Link to view full data set' target='_blank'>
       {buttonText.link}
     </a>
   ) : null

package/components/elements/_stories/Button.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '../Button'
+
+const classNames = ['', 'cove-button--success', 'cove-button--warn', 'cove-button--muted']
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Atoms/Button',
+  component: Button
+}
+
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  render: args => (
+    <>
+      <Button {...args} className={classNames[0]}>
+        Button
+      </Button>
+      <Button {...args} className={classNames[1]}>
+        Success
+      </Button>
+    </>
+  )
+}
+
+export default meta

package/components/elements/_stories/Card.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Card from '../Card'
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Atoms/Card',
+  component: Card
+}
+
+type Story = StoryObj<typeof Card>
+
+export const Primary: Story = {
+  render: args => (
+    <>
+      <Card {...args}>Card Content Here</Card>
+    </>
+  )
+}
+
+export default meta

package/components/managers/_stories/DataDesigner.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import DataDesigner from '../DataDesigner'
+
+const meta: Meta<typeof DataDesigner> = {
+  title: 'Components/Organisms/DataDesigner',
+  component: DataDesigner
+}
+
+type Story = StoryObj<typeof DataDesigner>
+
+export const Primary: Story = {
+  args: {
+    configureData: {
+      dataDescription: 'some description'
+    }
+  },
+  render: args => (
+    <>
+      <DataDesigner {...args}>DataDesigner Content Here</DataDesigner>
+    </>
+  )
+}
+
+export default meta

package/components/ui/Accordion.jsx

@@ -8,7 +8,7 @@ import Tooltip from './Tooltip'
 import '../../styles/v2/components/accordion.scss'
 
 //Define the "slots" to be populated by subcomponents
-const AccordionSection = () => null
+const AccordionSection = children => children
 
 const Accordion = ({ children }) => {
   const childNodes = Children.toArray(children)

package/components/ui/Icon.jsx

@@ -67,7 +67,9 @@ const iconHash = {
   'filter-dropdowns': iconDropdowns
 }
 
-const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {
+export const ICON_TYPES = Object.keys(iconHash)
+
+const Icon = ({ display = '', base, alt = '', size, color, style, ...attributes }) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }

package/components/ui/Modal.jsx

@@ -8,7 +8,7 @@ import '../../styles/v2/components/modal.scss'
 
 //Define the "slots" to be populated by subcomponents
 const ModalHeader = () => null
-const ModalContent = () => null
+const ModalContent = (children) => children
 const ModalFooter = () => null
 
 const Modal = ({ fontTheme = 'dark', headerBgColor = '#fff', showDividerTop = true, showDividerBottom = true, showClose = true, children, override = null }) => {

package/components/ui/Select.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+const Select = ({ label, value, options, fieldName, section = null, subsection = null, required = false, tooltip, onchange, initial: initialValue, ...attributes }) => {
+  let optionsJsx = options.map((optionName, index) => (
+    <option value={optionName} key={index}>
+      {optionName}
+    </option>
+  ))
+
+  if (initialValue) {
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
+  }
+
+  return (
+    <label>
+      <span className='edit-label'>
+        {label}
+        {tooltip}
+      </span>
+      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={onchange} {...attributes}>
+        {optionsJsx}
+      </select>
+    </label>
+  )
+}
+export default Select

package/components/ui/Tooltip.jsx

@@ -6,8 +6,8 @@ import { Tooltip as ReactTooltip } from 'react-tooltip'
 // Styles
 import '../../styles/v2/components/ui/tooltip.scss'
 
-const TooltipTarget = () => null
-const TooltipContent = () => null
+const TooltipTarget = children => children
+const TooltipContent = children => children
 
 const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = true, border = false, children, style, ...attributes }) => {
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
@@ -32,6 +32,7 @@ const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = tru
       {/* prettier-ignore */}
       <ReactTooltip
         id={uid}
+        // ! do not remove the deprecated property, it will break tooltips in the editor.
         anchorId={uid}
         className={'cove-tooltip__content' + (' place-' + place) + (!float ? ' cove-tooltip__content--animated' : '') + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border') : '') + (shadow ? ' has-shadow' : '')}
         globalEventOff="click"

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+import Accordion from '../Accordion'
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Molecules/Accordion',
+  component: Accordion
+}
+
+export default meta
+
+type Story = StoryObj<typeof Accordion.Section>
+
+export const Primary: Story = {
+  args: {
+    title: 'Collapsed Section Content',
+    warnIf: 1 === 1,
+    tooltipText: 'This is an <strong>example</strong> tooltip.'
+  },
+  argTypes: {
+    warnIf: { control: 'boolean' }
+  },
+  render: args => (
+    <Accordion>
+      <Accordion.Section {...args}>
+        <p>An accordion is used to show (and hide) HTML content.</p>
+        <p>Both the element that is used to open the accordion and the accordion's content can be any HTML element.</p>
+      </Accordion.Section>
+      <Accordion.Section {...args}>
+        <p>An accordion is used to show (and hide) HTML content.</p>
+        <p>Both the element that is used to open the accordion and the accordion's content can be any HTML element.</p>
+      </Accordion.Section>
+    </Accordion>
+  )
+}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Icon, { ICON_TYPES } from '../Icon'
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Atoms/Icon',
+  component: Icon,
+  parameters: {
+    display: ICON_TYPES
+  }
+}
+
+type Story = StoryObj<typeof Icon>
+
+export const Primary: Story = {
+  args: {
+    display: 'question'
+  }
+}
+
+export default meta

package/data/colorPalettes.js

@@ -1,3 +1,4 @@
+import { update } from 'lodash'
 import { updatePaletteNames } from '../helpers/updatePaletteNames'
 
 const colorPalettesMap = {
@@ -63,6 +64,16 @@ export const colorPalettes3 = {
   'complementary-5': ['#df168c', '#1EB386']
 }
 
+const sequentialColors = {
+  'Sequential Blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
+  'Sequential Blue Two': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
+  'Sequential Blue Three': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
+  'Sequential Orange': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
+  'Sequential Orange Two': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00'],
+  'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
+}
+
+export const sequentialPalettes = sequentialColors
 export const colorPalettesChart = updatePaletteNames(colorPalettes2)
 const colorPalettes = updatePaletteNames(colorPalettesMap)
 export const twoColorPalette = updatePaletteNames(colorPalettes3)

package/helpers/{DataTransform.js → DataTransform.ts}

@@ -1,4 +1,7 @@
+type DataArray = Record<string,any>[]
+
 export class DataTransform {
+  constants: any
   constructor() {
     this.constants = {
       errorMessageEmtpyData: 'Your data file is empty.',
@@ -11,7 +14,7 @@ export class DataTransform {
 
   //Performs standardizations that can be completed automatically without use input
   autoStandardize(data) {
-    const errorsFound = []
+    const errorsFound: any[] = []
 
     // Empty data
     if (0 === data.length) {
@@ -30,7 +33,7 @@ export class DataTransform {
 
     //Convert array of arrays, to array of objects
     if (data.filter(row => row.constructor !== Object).length > 0) {
-      let standardizedData = []
+      let standardizedData: Record<string, any>[] = []
       for (let row = 1; row < data.length; row++) {
         let standardizedRow = {}
         data[row].forEach((datum, col) => {
@@ -66,9 +69,9 @@ export class DataTransform {
         }
 
         let standardizedMapped = {}
-        let standardized = []
+        let standardized: string[] = []
         data.forEach(row => {
-          let nonNumericKeys = []
+          let nonNumericKeys: any[] = []
           Object.keys(row).forEach(key => {
             if (key !== description.seriesKey && isNaN(parseFloat(row[key]))) {
               nonNumericKeys.push(key)
@@ -95,10 +98,10 @@ export class DataTransform {
 
         return standardized
       } else {
-        let standardized = []
+        let standardized: {key: string, value: any}[] = []
 
         data.forEach(row => {
-          let nonNumericKeys = []
+          let nonNumericKeys: string[] = []
           Object.keys(row).forEach(key => {
             if (isNaN(parseFloat(row[key]))) {
               nonNumericKeys.push(key)
@@ -124,7 +127,7 @@ export class DataTransform {
       if (description.seriesKey !== undefined && description.xKey !== undefined && (description.valueKey !== undefined || (description.valueKeys !== undefined && description.valueKeys.length > 0))) {
         if (description.valueKeys !== undefined) {
           let standardizedMapped = {}
-          let standardized = []
+          let standardized: string[] = []
           let valueKeys = description.valueKeys
           if (description.ignoredKeys && description.ignoredKeys.length > 0) {
             valueKeys = valueKeys.concat(description.ignoredKeys)
@@ -132,7 +135,7 @@ export class DataTransform {
 
           data.forEach(row => {
             valueKeys.forEach(valueKey => {
-              let extraKeys = []
+              let extraKeys: string[] = []
               let uniqueKey = row[description.xKey] + '|' + valueKey
               Object.keys(row).forEach(key => {
                 if (key !== description.xKey && key !== description.seriesKey && valueKeys.indexOf(key) === -1) {
@@ -161,10 +164,10 @@ export class DataTransform {
           return standardized
         } else {
           let standardizedMapped = {}
-          let standardized = []
+          let standardized: any[] = []
 
           data.forEach(row => {
-            let extraKeys = []
+            let extraKeys: string[] = []
             let uniqueKey = row[description.xKey]
             Object.keys(row).forEach(key => {
               if (key !== description.xKey && key !== description.seriesKey && key !== description.valueKey) {
@@ -213,8 +216,9 @@ export class DataTransform {
     * Set testing = true if you need to see before and after data
     *
     */
-  cleanData(data, excludeKey, testing = false) {
-    let cleanedupData = []
+  cleanData(data: DataArray, excludeKey, testing = false): DataArray {
+    let cleanedupData: DataArray = []
+    if(!Array.isArray(data)) debugger;
     if (testing) console.log('## Data to clean=', data)
     if (excludeKey === undefined) {
       console.log('COVE: cleanData excludeKey undefined')
@@ -224,19 +228,23 @@ export class DataTransform {
       if (testing) console.log('clean', i, ' d', d)
       let cleaned = {}
       Object.keys(d).forEach(function (key) {
+        const value = d[key];
         if (key === excludeKey) {
           // pass thru
-          cleaned[key] = d[key]
+          cleaned[key] = value
         } else {
           // remove comma and dollar signs
-          if (testing) console.log('typeof d[key] is ', typeof d[key])
+          if (testing) console.log('typeof value is ', typeof value)
           let tmp = ''
-          if (typeof d[key] === 'string') {
-            tmp = d[key] !== null && d[key] !== '' ? d[key].replace(/[,\$]/g, '') : ''
+          const removeCommasAndDollars = (num: string) => num.replace(/[,\$]/g, '')
+          if (typeof value === 'string') {
+            tmp = value ? removeCommasAndDollars(value) : ''
           } else {
-            tmp = d[key] !== null && d[key] !== '' ? d[key] : ''
+            tmp = value ? value : ''
           }
-          if ((tmp !== '' && tmp !== null && !isNaN(tmp)) || (tmp !== '' && tmp !== null && /\d+\.?\d*/.test(tmp))) {
+          // UNSAFE_isANumber: matches for any string of digits optionally interrupted by a period.
+          const UNSAFE_isANumber = (num: any) => /\d+\.?\d*/.test(num)
+          if (!isNaN(parseFloat(tmp)) || UNSAFE_isANumber(tmp)) {
             cleaned[key] = tmp
           } else {
             cleaned[key] = ''

package/helpers/fetchRemoteData.js

@@ -8,10 +8,8 @@ export default async function (url, visualizationType = '') {
     const regex = /(?:\.([^.]+))?$/
     const ext = regex.exec(path)[1]
 
-    let data = []
-
     if ('csv' === ext) {
-      data = await fetch(url.href)
+      return await fetch(url.href)
         .then(response => response.text())
         .then(responseText => {
           // for every comma NOT inside quotes, replace with a pipe delimiter
@@ -31,13 +29,9 @@ export default async function (url, visualizationType = '') {
           })
           return parsedCsv.data
         })
+    } else {
+      return await fetch(url.href).then(response => response.json())
     }
-
-    if ('json' === ext) {
-      data = await fetch(url.href).then(response => response.json())
-    }
-
-    return data
   } catch {
     // If we can't parse it, still attempt to fetch it
     try {

package/helpers/gatherQueryParams.ts

@@ -0,0 +1,7 @@
+export const gatherQueryParams = (params: {key: string, value: string}[]) => {
+    return params.map(({key, value}, i) => {
+        const leadingCharacter = i === 0 ? '?' : '&'
+        return leadingCharacter + key + '=' + value
+      })
+      .join('')
+  }

package/helpers/getFileExtension.ts

@@ -0,0 +1,5 @@
+export const getFileExtension = (path: string): string => {
+    const regex = /(?:\.([^.]+))?$/
+    const outCome: RegExpExecArray | null = regex.exec(path)
+    return outCome ? outCome[1] : ''
+}

package/helpers/lineChartHelpers.js

@@ -0,0 +1,7 @@
+export const approvedCurveTypes = {
+  Linear: 'curveLinear',
+  Cardinal: 'curveCardinal',
+  Natural: 'curveNatural',
+  'Monotone X': 'curveMonotoneX',
+  Step: 'curveStep'
+}

package/helpers/useDataVizClasses.js

@@ -16,7 +16,14 @@ export default function useDataVizClasses(config, viewport = null) {
   let innerContainerClasses = ['cove-component__inner']
   let contentClasses = ['cove-component__content']
 
-  config.title && innerContainerClasses.push('component--has-title')
+  const { visualizationType, title, showTitle } = config
+
+  if (visualizationType === 'Spark Line' || visualizationType === 'chart') {
+    if (title && showTitle) contentClasses.push('component--has-title')
+  }
+
+  config.showTitle && contentClasses.push('component--has-title')
+  config.title && config.visualizationType !== 'chart' && config.visualizationType !== 'Spark Line' && contentClasses.push('component--has-title')
   config.subtext && innerContainerClasses.push('component--has-subtext')
   config.biteStyle && innerContainerClasses.push(`bite__style--${config.biteStyle}`)
   config.general?.isCompactStyle && innerContainerClasses.push(`component--isCompactStyle`)
@@ -33,8 +40,7 @@ export default function useDataVizClasses(config, viewport = null) {
   config?.visual?.roundedBorders && innerContainerClasses.push('bite--has-rounded-borders')
 
   let sparkLineStyles = {
-    width: '100%',
-    height: '100px'
+    width: '100%'
   }
 
   // Starting work on combining legend classes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/core",
-  "version": "4.23.9",
+  "version": "4.23.10",
   "description": "Core components, styles, hooks, and helpers, for the CDC Open Visualization project",
   "moduleName": "CdcCore",
   "main": "dist/cdccore",
@@ -30,5 +30,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e"
+  "gitHead": "b3f3263e444bbf99d525b05040be22f06553760e"
 }

package/styles/_data-table.scss

@@ -30,6 +30,17 @@ div.data-table-heading {
   }
 }
 
+table.horizontal {
+  tr {
+    display: flex;
+  }
+
+  th,
+  td {
+    min-width: 200px;
+  }
+}
+
 table.data-table {
   width: 100%;
   background: #fff;
@@ -108,14 +119,14 @@ table.data-table {
 
     // format the white triangle sort icon in data table headers
     .sort-icon {
-    fill: white;
-    width: 30px;
-    float: right;
-    align-self: center;
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
+      fill: white;
+      width: 30px;
+      float: right;
+      align-self: center;
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     th:last-child,
@@ -155,7 +166,12 @@ table.data-table {
       border-right: 0 !important;
     }
   }
-
+  tr {
+    display: flex;
+    & > * {
+      width: 100%;
+    }
+  }
   th {
     flex-grow: 1;
   }

package/styles/_reset.scss

@@ -141,6 +141,12 @@
     top: -0.5em;
   }
 
+  header sup {
+    /* Allow line breaks using html in the header. */
+    top: initial;
+    line-height: initial;
+  }
+
   sub {
     /* Move the subscripted text down, but only
       half as far down as the superscript moved up */

package/styles/_typography.scss

@@ -0,0 +1,20 @@
+&.font-small {
+  .chart-container {
+    font-size: 0.9em !important;
+  }
+}
+
+&.font-medium {
+  font-size: 1em !important;
+}
+
+&.font-large {
+  .chart-container {
+    font-size: 1.1em !important;
+  }
+}
+
+.subtext {
+  font-style: italic;
+  font-size: 0.9em !important;
+}

package/styles/base.scss

@@ -70,6 +70,7 @@ body.post-type-cdc_visualization .visx-tooltip {
   @import 'global';
   @import 'button-section';
   @import 'series-list';
+  @import 'typography';
 }
 
 $theme: (

package/styles/v2/layout/_component.scss

@@ -24,9 +24,9 @@
     border: none !important;
   }
 
-  .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
-    border-top: 1px solid #ccc;
-  }
+  // .cdc-data-bite-inner-container:not(.component--has-title) .cove-component__content:not(.no-borders) {
+  //   border-top: 1px solid #ccc;
+  // }
 
   .cove-component__content:not(.component--hideBackgroundColor) {
     background: $lightestGray;