@cdc/core 4.22.10 → 4.23.1

package/components/inputs/InputText.jsx

@@ -3,38 +3,23 @@ import { useDebounce } from 'use-debounce'
 
 import '../../styles/v2/components/input/index.scss'
 
-const InputText = memo((
-  {
-    label,
-    section = null,
-    subsection = null,
-    fieldName,
-    updateField,
-    value: stateValue,
-    type = 'input',
-    tooltip,
-    placeholder,
-    i = null, min = null, max = null,
-    className, ...attributes
-  }
-) => {
-
-  const [ value, setValue ] = useState(stateValue)
-  const [ debouncedValue ] = useDebounce(value, 500)
+const InputText = memo(({ label, section = null, subsection = null, fieldName, updateField, value: stateValue, type = 'input', tooltip, placeholder, i = null, min = null, max = null, className, ...attributes }) => {
+  const [value, setValue] = useState(stateValue)
+  const [debouncedValue] = useDebounce(value, 500)
 
   useEffect(() => {
     if ('string' === typeof debouncedValue && stateValue !== debouncedValue && updateField) {
       updateField(section, subsection, fieldName, debouncedValue, i)
     }
-  }, [ debouncedValue, section, subsection, fieldName, i, stateValue, updateField ])
+  }, [debouncedValue, section, subsection, fieldName, i, stateValue, updateField])
 
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
-  const onChange = (e) => {
+  const onChange = e => {
     if ('number' !== type || min === null) {
       setValue(e.target.value)
     } else {
-      if (!e.target.value || (parseFloat(min) <= parseFloat(e.target.value) & parseFloat(max) >= parseFloat(e.target.value))) {
+      if (!e.target.value || (parseFloat(min) <= parseFloat(e.target.value)) & (parseFloat(max) >= parseFloat(e.target.value))) {
         setValue(e.target.value)
       } else {
         setValue(min.toString())
@@ -52,13 +37,12 @@ const InputText = memo((
     ...attributes
   }
 
-  let formElement = 'textarea' === type
-    ? (<textarea {...inputAttrs}/>)
-    : (<input {...inputAttrs}/>)
+  let formElement = 'textarea' === type ? <textarea {...inputAttrs} /> : <input {...inputAttrs} />
 
   return (
     <>
-      {label && <label className="cove-input__label">{label}</label>}{tooltip}
+      {label && <label className='cove-input__label'>{label}</label>}
+      {tooltip}
       {formElement}
     </>
   )

package/components/inputs/InputToggle.jsx

@@ -3,41 +3,37 @@ import PropTypes from 'prop-types'
 
 import '../../styles/v2/components/input/index.scss'
 
-const InputSlider = (
-  {
-    label,
-    sliderType = 'flat',
-    size = 'medium',
-    activeColor = null,
-    section = null,
-    subsection = null,
-    fieldName,
-    updateField,
-    value: stateValue,
+const InputSlider = ({
+  label,
+  sliderType = 'flat',
+  size = 'medium',
+  activeColor = null,
+  section = null,
+  subsection = null,
+  fieldName,
+  updateField,
+  value: stateValue,
 
-    i = null, min = null, max = null,
-    ...attributes
-  }
-) => {
-
-  const [ value, setValue ] = useState(stateValue)
+  i = null,
+  min = null,
+  max = null,
+  ...attributes
+}) => {
+  const [value, setValue] = useState(stateValue)
 
   let name = () => {
     let str = ''
-    if (section)
-      str += section + '-'
-    if (subsection)
-      str += subsection + '-'
-    if (fieldName)
-      str += fieldName
+    if (section) str += section + '-'
+    if (subsection) str += subsection + '-'
+    if (fieldName) str += fieldName
     return str
   }
 
   const sliderTypeClass = () => {
     const typeArr = {
-      'flat': ' slider--flat',
-      'block': ' slider--block',
-      'pill': ' slider--pill',
+      flat: ' slider--flat',
+      block: ' slider--block',
+      pill: ' slider--pill',
       '3d': ' slider--3d'
     }
     return typeArr[sliderType] || ''
@@ -47,21 +43,21 @@ const InputSlider = (
     if (stateValue !== undefined && stateValue !== value) {
       setValue(stateValue)
     }
-  }, [ stateValue ])
+  }, [stateValue])
 
   useEffect(() => {
     if (stateValue !== undefined && stateValue !== value && updateField) {
       updateField(section, subsection, fieldName, value, i)
     }
-  }, [ value ])
+  }, [value])
 
   return (
-    <div className="input-group">
+    <div className='input-group'>
       {label && <label>{label}</label>}
-      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (sliderTypeClass()) + (value ? ' active' : '')} onClick={() => setValue(!value)}>
-        <div className="cove-input__slider-button"/>
-        <div className="cove-input__slider-track" style={value && activeColor ? { backgroundColor: activeColor } : null }/>
-        <input className="cove-input--hidden" type="checkbox" name={name()} checked={value || false} readOnly/>
+      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + sliderTypeClass() + (value ? ' active' : '')} onClick={() => setValue(!value)}>
+        <div className='cove-input__slider-button' />
+        <div className='cove-input__slider-track' style={value && activeColor ? { backgroundColor: activeColor } : null} />
+        <input className='cove-input--hidden' type='checkbox' name={name()} checked={value || false} readOnly />
       </div>
     </div>
   )

package/components/managers/DataDesigner.jsx

@@ -6,39 +6,42 @@ import Card from '../elements/Card'
 import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../data/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
 
-const DataDesigner = (props) => {
-  const { configureData, updateDescriptionProp, visualizationKey, dataKey } = props;
+const DataDesigner = props => {
+  const { configureData, updateDescriptionProp, visualizationKey, dataKey } = props
 
   return (
-    <div className="cove-data-designer__container">
-      <div className="mb-2">
-        <div className="cove-heading--3 fw-bold mb-1">Describe Data</div>
-        <div className="cove-heading--3 fw-normal mb-1">Data Orientation</div>
-        <div className="grid grid-gap-2 mb-4">
-          <div className="column">
+    <div className='cove-data-designer__container'>
+      <div className='mb-2'>
+        <div className='cove-heading--3 fw-bold mb-1'>Describe Data</div>
+        <div className='cove-heading--3 fw-normal mb-1'>Data Orientation</div>
+        <div className='grid grid-gap-2 mb-4'>
+          <div className='column'>
             <button
               className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
               onClick={() => {
                 updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
-              }}>
+              }}
+            >
               <Card>
-                <strong className="cove-heading--3">Vertical</strong>
-                <p className="mb-1">Values for map geography or chart date/category axis are contained in a
-                  single <em>column</em>.
+                <strong className='cove-heading--3'>Vertical</strong>
+                <p className='mb-1'>
+                  Values for map geography or chart date/category axis are contained in a single <em>column</em>.
                 </p>
                 {DATA_TABLE_VERTICAL}
               </Card>
             </button>
           </div>
-          <div className="column">
+          <div className='column'>
             <button
               className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
               onClick={() => {
                 updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
-              }}>
+              }}
+            >
               <Card>
-                <strong className="cove-heading--3">Horizontal</strong>
-                <p className="mb-1">Values for map geography or chart date/category axis are contained in a single <em>row</em>
+                <strong className='cove-heading--3'>Horizontal</strong>
+                <p className='mb-1'>
+                  Values for map geography or chart date/category axis are contained in a single <em>row</em>
                 </p>
                 {DATA_TABLE_HORIZONTAL}
               </Card>
@@ -48,13 +51,13 @@ const DataDesigner = (props) => {
       </div>
       {configureData.dataDescription && (
         <>
-          <div className="mb-2">
-            <div className="mb-1">Are there multiple series represented in your data?</div>
+          <div className='mb-2'>
+            <div className='mb-1'>Are there multiple series represented in your data?</div>
             <div>
               <Button
                 style={{ backgroundColor: '#00345d' }}
                 hoverStyle={{ backgroundColor: '#015daa' }}
-                className="mr-1"
+                className='mr-1'
                 onClick={() => {
                   updateDescriptionProp(visualizationKey, dataKey, 'series', true)
                 }}
@@ -75,45 +78,52 @@ const DataDesigner = (props) => {
             </div>
           </div>
           {configureData.dataDescription.horizontal === true && configureData.dataDescription.series === true && (
-            <div className="mb-2">
-              <div className="mb-1">Which property in the dataset represents which series the row is describing?</div>
-              <select onChange={(e) => {
-                updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
-              }} defaultValue={configureData.dataDescription.seriesKey}>
-                <option value="">Choose an option</option>
-                {Object.keys(configureData.data[0]).map((value, index) => <option value={value} key={index}>{value}</option>)}
+            <div className='mb-2'>
+              <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
+              <select
+                onChange={e => {
+                  updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                }}
+                defaultValue={configureData.dataDescription.seriesKey}
+              >
+                <option value=''>Choose an option</option>
+                {Object.keys(configureData.data[0]).map((value, index) => (
+                  <option value={value} key={index}>
+                    {value}
+                  </option>
+                ))}
               </select>
             </div>
           )}
           {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && (
             <>
-              <div className="mb-2">
-                <div className="mb-1">Are the series values in your data represented in a
-                  single row, or across multiple rows?
-                </div>
-                <div className="grid grid-gap-2 mb-4">
-                  <div className="column">
+              <div className='mb-2'>
+                <div className='mb-1'>Are the series values in your data represented in a single row, or across multiple rows?</div>
+                <div className='grid grid-gap-2 mb-4'>
+                  <div className='column'>
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
                       onClick={() => {
-                          updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
-                      }}>
+                        updateDescriptionProp(visualizationKey, dataKey, 'singleRow', true)
+                      }}
+                    >
                       <Card>
-                        <strong className="cove-heading--3">Single Row</strong>
-                        <p className="mb-1">Each row contains the data for an individual series in itself.</p>
+                        <strong className='cove-heading--3'>Single Row</strong>
+                        <p className='mb-1'>Each row contains the data for an individual series in itself.</p>
                         {DATA_TABLE_SINGLE_ROW}
                       </Card>
                     </button>
                   </div>
-                  <div className="column">
+                  <div className='column'>
                     <button
                       className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
                       onClick={() => {
                         updateDescriptionProp(visualizationKey, dataKey, 'singleRow', false)
-                      }}>
+                      }}
+                    >
                       <Card>
-                        <strong className="cove-heading--3">Multiple Rows</strong>
-                        <p className="mb-1">Each series data is broken out into multiple rows.</p>
+                        <strong className='cove-heading--3'>Multiple Rows</strong>
+                        <p className='mb-1'>Each series data is broken out into multiple rows.</p>
                         {DATA_TABLE_MULTI_ROW}
                       </Card>
                     </button>
@@ -122,36 +132,51 @@ const DataDesigner = (props) => {
               </div>
               {configureData.dataDescription.singleRow === false && (
                 <>
-                  <div className="mb-2">
-                    <div className="mb-1">Which property in the dataset represents which series the row is describing?</div>
-                    <select onChange={(e) => {
-                      updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
-                    }} defaultValue={configureData.dataDescription.seriesKey}>
-                      <option value="">Choose an option</option>
+                  <div className='mb-2'>
+                    <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
+                    <select
+                      onChange={e => {
+                        updateDescriptionProp(visualizationKey, dataKey, 'seriesKey', e.target.value)
+                      }}
+                      defaultValue={configureData.dataDescription.seriesKey}
+                    >
+                      <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>{value}</option>
+                        <option value={value} key={index}>
+                          {value}
+                        </option>
                       ))}
                     </select>
                   </div>
-                  <div className="mb-2">
-                    <div className="mb-1">Which property in the dataset represents the values for the category/date axis or map geography?</div>
-                    <select onChange={(e) => {
-                      updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
-                    }} defaultValue={configureData.dataDescription.xKey}>
-                      <option value="">Choose an option</option>
+                  <div className='mb-2'>
+                    <div className='mb-1'>Which property in the dataset represents the values for the category/date axis or map geography?</div>
+                    <select
+                      onChange={e => {
+                        updateDescriptionProp(visualizationKey, dataKey, 'xKey', e.target.value)
+                      }}
+                      defaultValue={configureData.dataDescription.xKey}
+                    >
+                      <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>{value}</option>
+                        <option value={value} key={index}>
+                          {value}
+                        </option>
                       ))}
                     </select>
                   </div>
-                  <div className="mb-2">
-                    <div className="mb-1">Which property in the dataset represents the numeric value?</div>
-                    <select onChange={(e) => {
-                      updateDescriptionProp(visualizationKey, dataKey, 'valueKey', e.target.value)
-                    }} defaultValue={configureData.dataDescription.valueKey}>
-                      <option value="">Choose an option</option>
+                  <div className='mb-2'>
+                    <div className='mb-1'>Which property in the dataset represents the numeric value?</div>
+                    <select
+                      onChange={e => {
+                        updateDescriptionProp(visualizationKey, dataKey, 'valueKey', e.target.value)
+                      }}
+                      defaultValue={configureData.dataDescription.valueKey}
+                    >
+                      <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>{value}</option>
+                        <option value={value} key={index}>
+                          {value}
+                        </option>
                       ))}
                     </select>
                   </div>
@@ -161,9 +186,7 @@ const DataDesigner = (props) => {
           )}
         </>
       )}
-      {configureData.dataDescription && configureData.formattedData && (
-        <div>Data configured successfully</div>
-      )}
+      {configureData.dataDescription && configureData.formattedData && <div>Data configured successfully</div>}
     </div>
   )
 }

package/components/ui/Accordion.jsx

@@ -1,11 +1,5 @@
 import React, { Children } from 'react'
-import {
-  Accordion as AccordionComponent,
-  AccordionItem,
-  AccordionItemHeading,
-  AccordionItemPanel,
-  AccordionItemButton,
-} from 'react-accessible-accordion'
+import { Accordion as AccordionComponent, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
 import PropTypes from 'prop-types'
 
 import Icon from './Icon'
@@ -16,37 +10,31 @@ import '../../styles/v2/components/accordion.scss'
 //Define the "slots" to be populated by subcomponents
 const AccordionSection = () => null
 
-const Accordion = ({children}) => {
+const Accordion = ({ children }) => {
   const childNodes = Children.toArray(children)
   const accordionSections = childNodes.filter(child => child?.type === AccordionSection)
 
   return (
     <AccordionComponent allowZeroExpanded={true}>
-      {accordionSections && accordionSections.map((section, index) => (
-        <AccordionItem className="cove-accordion__item" key={index}>
-          <AccordionItemHeading className="cove-accordion__heading">
-            <AccordionItemButton className="cove-accordion__button">
-              {section.props.title}
-              {section.props.tooltipText
-                ? (
-                  <Tooltip position="bottom">
+      {accordionSections &&
+        accordionSections.map((section, index) => (
+          <AccordionItem className='cove-accordion__item' key={index}>
+            <AccordionItemHeading className='cove-accordion__heading'>
+              <AccordionItemButton className='cove-accordion__button'>
+                {section.props.title}
+                {section.props.tooltipText ? (
+                  <Tooltip position='bottom'>
                     <Tooltip.Target>
-                      <Icon display="question" size={14}/>
+                      <Icon display='question' size={14} />
                     </Tooltip.Target>
-                    <Tooltip.Content>
-                      {section.props.tooltipText}
-                    </Tooltip.Content>
+                    <Tooltip.Content>{section.props.tooltipText}</Tooltip.Content>
                   </Tooltip>
-                )
-                : null
-              }
-            </AccordionItemButton>
-          </AccordionItemHeading>
-          <AccordionItemPanel className="cove-accordion__panel">
-            {section.props.children}
-          </AccordionItemPanel>
-        </AccordionItem>
-      ))}
+                ) : null}
+              </AccordionItemButton>
+            </AccordionItemHeading>
+            <AccordionItemPanel className='cove-accordion__panel'>{section.props.children}</AccordionItemPanel>
+          </AccordionItem>
+        ))}
     </AccordionComponent>
   )
 }

package/components/ui/Icon.jsx

@@ -32,33 +32,33 @@ import iconText from '../../assets/filtered-text.svg'
 import '../../styles/v2/components/icon.scss'
 
 const iconHash = {
-  'caretUp': iconCaretUp,
-  'caretDown': iconCaretDown,
-  'caretFilledUp': iconCaretFilledUp,
-  'caretFilledDown': iconCaretFilledDown,
-  'chartBar': iconChartBar,
-  'chartLine': iconChartLine,
-  'chartPie': iconChartPie,
-  'close': iconClose,
-  'code': iconCode,
-  'databite': iconDataBite,
-  'edit': iconEdit,
-  'fileUpload': iconFileUpload,
-  'filterBars': iconFilterBars,
-  'grid': iconGrid,
-  'info': iconInfo,
-  'link': iconLink,
-  'mapAl': iconMapAl,
-  'mapUsa': iconMapUsa,
-  'mapWorld': iconMapWorld,
-  'move': iconMove,
-  'question': iconQuestion,
-  'upload': iconUpload,
-  'warningCircle': iconWarningCircle,
-  'warningTriangle': iconWarningTriangle,
-  'gear': iconGear,
-  'tools': iconTools,
-  'filtered-text':iconText
+  caretUp: iconCaretUp,
+  caretDown: iconCaretDown,
+  caretFilledUp: iconCaretFilledUp,
+  caretFilledDown: iconCaretFilledDown,
+  chartBar: iconChartBar,
+  chartLine: iconChartLine,
+  chartPie: iconChartPie,
+  close: iconClose,
+  code: iconCode,
+  databite: iconDataBite,
+  edit: iconEdit,
+  fileUpload: iconFileUpload,
+  filterBars: iconFilterBars,
+  grid: iconGrid,
+  info: iconInfo,
+  link: iconLink,
+  mapAl: iconMapAl,
+  mapUsa: iconMapUsa,
+  mapWorld: iconMapWorld,
+  move: iconMove,
+  question: iconQuestion,
+  upload: iconUpload,
+  warningCircle: iconWarningCircle,
+  warningTriangle: iconWarningTriangle,
+  gear: iconGear,
+  tools: iconTools,
+  'filtered-text': iconText
 }
 
 const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {
@@ -75,14 +75,13 @@ const Icon = ({ display = null, base, alt = '', size, color, style, ...attribute
 
   return (
     <>
-      {base
-        ? <IconObj title={alt}/>
-        : (
-          <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
-            <IconObj title={alt}/>
-          </span>
-        )
-      }
+      {base ? (
+        <IconObj title={alt} />
+      ) : (
+        <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
+          <IconObj title={alt} />
+        </span>
+      )}
     </>
   )
 }

package/components/ui/LoadSpin.jsx

@@ -1,20 +1,15 @@
 import React from 'react'
 import '../../styles/v2/components/loadspin.scss'
 
-const LoadSpin = ({
-                    color = '#fff',
-                    opacity = 100,
-                    size = 100,
-                    className
-}) => {
+const LoadSpin = ({ color = '#fff', opacity = 100, size = 100, className }) => {
   const n = 8
   return (
     <>
-      <div className={`cove-loadspin${className ? ' ' + className : ''}`} style={{width: size, height: size}}>
-        <div className="cove-loadspin__roller" style={{opacity: opacity / 100, transform: `scale(${size/80})`}}>
-          {
-            [...Array(n)].map((elem, index) => <div key={index} style={{backgroundColor: color}}/>)
-          }
+      <div className={`cove-loadspin${className ? ' ' + className : ''}`} style={{ width: size, height: size }}>
+        <div className='cove-loadspin__roller' style={{ opacity: opacity / 100, transform: `scale(${size / 80})` }}>
+          {[...Array(n)].map((elem, index) => (
+            <div key={index} style={{ backgroundColor: color }} />
+          ))}
         </div>
       </div>
     </>