@cdc/core 1.1.4 → 4.22.11

package/components/inputs/InputText.jsx

@@ -1,39 +1,25 @@
 import React, { useState, useEffect, memo } from 'react'
 import { useDebounce } from 'use-debounce'
 
-import '../../styles/v2/components/input.scss'
+import '../../styles/v2/components/input/index.scss'
 
-const InputText = memo((
-  {
-    label,
-    section = null,
-    subsection = null,
-    fieldName,
-    updateField,
-    value: stateValue,
-    type = 'input',
-    tooltip,
-    i = null, min = null, max = null,
-    ...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())
@@ -41,27 +27,24 @@ const InputText = memo((
     }
   }
 
-  let formElement = <input type="text" name={name} onChange={onChange} {...attributes} value={value}/>
-
-  if ('textarea' === type) {
-    formElement = (
-      <textarea name={name} onChange={onChange} {...attributes} value={value}/>
-    )
+  let inputAttrs = {
+    className: `cove-input${className ? ' ' + className : ''}`,
+    type,
+    name,
+    placeholder,
+    onChange,
+    value,
+    ...attributes
   }
 
-  if ('number' === type) {
-    formElement = <input type="number" name={name} onChange={onChange} {...attributes} value={value}/>
-  }
+  let formElement = 'textarea' === type ? <textarea {...inputAttrs} /> : <input {...inputAttrs} />
 
   return (
-    <div className="cove-input-group">
-      {label &&
-        <>
-          <label>{label}{tooltip}</label>
-        </>
-      }
+    <>
+      {label && <label className='cove-input__label'>{label}</label>}
+      {tooltip}
       {formElement}
-    </div>
+    </>
   )
 })
 

package/components/inputs/InputToggle.jsx

@@ -1,80 +1,76 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import '../../styles/v2/components/input.scss'
+import '../../styles/v2/components/input/index.scss'
 
-const InputToggle = (
-  {
-    label,
-    toggleType = '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 toggleTypeClass = () => {
+  const sliderTypeClass = () => {
     const typeArr = {
-      'flat': ' toggle--flat',
-      'block': ' toggle--block',
-      'pill': ' toggle--pill',
-      '3d': ' toggle--3d'
+      flat: ' slider--flat',
+      block: ' slider--block',
+      pill: ' slider--pill',
+      '3d': ' slider--3d'
     }
-    return typeArr[toggleType] || ''
+    return typeArr[sliderType] || ''
   }
 
   useEffect(() => {
     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__toggle' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (toggleTypeClass()) + (value ? ' active' : '')} onClick={() => setValue(!value)}>
-        <div className="cove-input__toggle-button"/>
-        <div className="cove-input__toggle-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>
   )
 }
 
-InputToggle.propTypes = {
+InputSlider.propTypes = {
   /** Add label to the input field */
   label: PropTypes.string,
-  /** Select the preferred display style of the toggle slider */
-  toggleType: PropTypes.oneOf(['flat', 'block', 'pill', '3d']),
-  /** Select the preferred size of the toggle slider */
+  /** Select the preferred display style of the slider */
+  sliderType: PropTypes.oneOf(['flat', 'block', 'pill', '3d']),
+  /** Select the preferred size of the slider */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Select the preferred color for the toggle slider when active */
+  /** Select the preferred color for the slider when active */
   activeColor: PropTypes.string,
   /** Parent key value of nested target config option
    *
@@ -92,4 +88,4 @@ InputToggle.propTypes = {
   stateValue: PropTypes.object
 }
 
-export default InputToggle
+export default InputSlider

package/components/managers/DataDesigner.jsx

@@ -0,0 +1,194 @@
+import React from 'react'
+
+import Button from '../elements/Button'
+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
+
+  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'>
+            <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>.
+                </p>
+                {DATA_TABLE_VERTICAL}
+              </Card>
+            </button>
+          </div>
+          <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>
+                </p>
+                {DATA_TABLE_HORIZONTAL}
+              </Card>
+            </button>
+          </div>
+        </div>
+      </div>
+      {configureData.dataDescription && (
+        <>
+          <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'
+                onClick={() => {
+                  updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                }}
+                active={configureData.dataDescription.series === true}
+              >
+                Yes
+              </Button>
+              <Button
+                style={{ backgroundColor: '#00345d' }}
+                hoverStyle={{ backgroundColor: '#015daa' }}
+                onClick={() => {
+                  updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                }}
+                active={configureData.dataDescription.series === false}
+              >
+                No
+              </Button>
+            </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>
+                ))}
+              </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'>
+                    <button
+                      className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
+                      onClick={() => {
+                        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>
+                        {DATA_TABLE_SINGLE_ROW}
+                      </Card>
+                    </button>
+                  </div>
+                  <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>
+                        {DATA_TABLE_MULTI_ROW}
+                      </Card>
+                    </button>
+                  </div>
+                </div>
+              </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>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <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>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <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>
+                      {Object.keys(configureData.data[0]).map((value, index) => (
+                        <option value={value} key={index}>
+                          {value}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+      {configureData.dataDescription && configureData.formattedData && <div>Data configured successfully</div>}
+    </div>
+  )
+}
+
+export default DataDesigner

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

@@ -1,24 +1,64 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import iconCaretUp from '../../assets/icon-caret-up.svg'
+import iconCaretDown from '../../assets/icon-caret-down.svg'
+import iconCaretFilledUp from '../../assets/icon-caret-filled-up.svg'
+import iconCaretFilledDown from '../../assets/icon-caret-filled-down.svg'
+import iconChartBar from '../../assets/icon-chart-bar.svg'
+import iconChartLine from '../../assets/icon-chart-line.svg'
+import iconChartPie from '../../assets/icon-chart-pie.svg'
 import iconClose from '../../assets/icon-close.svg'
-import iconQuestion from '../../assets/question-circle.svg'
-import iconLink from '../../assets/link.svg'
-import iconUpload from '../../assets/upload-solid.svg'
-import iconFileUpload from '../../assets/file-upload-solid.svg'
-import iconWarning from '../../assets/icon-warning.svg'
+import iconCode from '../../assets/icon-code.svg'
+import iconDataBite from '../../assets/icon-databite.svg'
+import iconEdit from '../../assets/icon-edit.svg'
+import iconFileUpload from '../../assets/icon-file-upload.svg'
+import iconFilterBars from '../../assets/icon-filter-bars.svg'
+import iconGrid from '../../assets/icon-grid.svg'
 import iconInfo from '../../assets/icon-info.svg'
+import iconLink from '../../assets/icon-link.svg'
+import iconMapAl from '../../assets/icon-map-alabama.svg'
+import iconMapUsa from '../../assets/icon-map-usa.svg'
+import iconMapWorld from '../../assets/icon-map-world.svg'
+import iconMove from '../../assets/icon-move.svg'
+import iconQuestion from '../../assets/icon-question-circle.svg'
+import iconUpload from '../../assets/icon-upload.svg'
+import iconWarningCircle from '../../assets/icon-warning-circle.svg'
+import iconWarningTriangle from '../../assets/icon-warning-triangle.svg'
+import iconGear from '../../assets/icon-gear.svg'
+import iconTools from '../../assets/icon-tools.svg'
+import iconText from '../../assets/filtered-text.svg'
 
 import '../../styles/v2/components/icon.scss'
 
 const iconHash = {
-  "close": iconClose,
-  "question": iconQuestion,
-  "link": iconLink,
-  "upload": iconUpload,
-  "fileUpload": iconFileUpload,
-  "warning": iconWarning,
-  "info": iconInfo
+  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 }) => {
@@ -35,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

@@ -0,0 +1,19 @@
+import React from 'react'
+import '../../styles/v2/components/loadspin.scss'
+
+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>
+      </div>
+    </>
+  )
+}
+
+export default LoadSpin