@cdc/core 1.1.3 → 9.22.9

package/components/inputs/InputToggle.jsx

@@ -1,12 +1,12 @@
 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 = (
+const InputSlider = (
   {
     label,
-    toggleType = 'flat',
+    sliderType = 'flat',
     size = 'medium',
     activeColor = null,
     section = null,
@@ -33,14 +33,14 @@ const InputToggle = (
     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(() => {
@@ -58,23 +58,23 @@ const InputToggle = (
   return (
     <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 }/>
+      <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 +92,4 @@ InputToggle.propTypes = {
   stateValue: PropTypes.object
 }
 
-export default InputToggle
+export default InputSlider

package/components/managers/DataDesigner.jsx

@@ -0,0 +1,171 @@
+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/Icon.jsx

@@ -1,24 +1,62 @@
 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 '../../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
 }
 
 const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {

package/components/ui/LoadSpin.jsx

@@ -0,0 +1,24 @@
+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

package/components/ui/Modal.jsx

@@ -42,12 +42,17 @@ const Modal = ({
       <div className="cove-modal__header" style={{
         backgroundColor: headerBgColor,
         boxShadow: dividerBorder(modalHeaderChildren && showDividerTop),
-        padding: !modalHeaderChildren ? '0' : null
+        padding: !modalHeaderChildren ? '0' : null,
+        minHeight: !modalHeaderChildren ? 'unset' : null
       }}>
         {modalHeaderChildren && modalHeaderChildren.props.children}
         {showClose &&
         <button className="cove-modal--close"
-                onClick={(e) => override ? override.actions.toggleOverlay(false) : overlay ? overlay?.actions.toggleOverlay(false) : e.preventDefault()}>
+                onClick={(e) => {
+                  if (override) return override.actions.toggleOverlay(false)
+                  if (overlay) return overlay?.actions.toggleOverlay(false)
+                  e.preventDefault()
+                }}>
           <Icon display="close"/>
         </button>
         }

package/components/ui/Overlay.jsx

@@ -13,10 +13,11 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
   const [ overlayAnimationState, setOverlayAnimationState ] = useState(null)
   const [ overlayErrorState, setOverlayErrorState ] = useState(false)
 
-  const overlayDisplay = overlay?.show || override?.show
+  const overlayDisplay = override ? override?.show : overlay?.show
 
   //Animate In effect
   useEffect(() => {
+    if (overlayDisplay === undefined) return
     if (overlayDisplay === false) return //Reject
 
     document.body.style.overflow = 'hidden'
@@ -32,6 +33,7 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
 
   //Animate Out effect
   useEffect(() => {
+    if (overlayDisplay === undefined) return
     if (overlayDisplay === true) return //Reject
 
     setOverlayAnimationState('animate-out')

package/components/ui/Tooltip.jsx

@@ -6,7 +6,7 @@ const TooltipContent = () => null
 
 const Tooltip = ({
                    position = 'top',
-                   trigger = 'hover',
+                   trigger = 'hover focus',
                    float = false,
                    shadow = true,
                    border = null,
@@ -20,20 +20,29 @@ const Tooltip = ({
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
+
   const uid = 'tooltip-' + Math.floor(Math.random() * 100000)
 
   return (
     <span className="cove-tooltip" style={style} {...attributes}>
-      <a className="cove-tooltip--target"
-         data-for={uid}
-         data-place={position}
-         data-event={trigger !== 'click' ? null : 'click focus'}
-         data-effect={float ? 'float' : 'solid'}
-         data-scroll-hide={hideOnScroll}
-         data-tip
+      <button className="cove-tooltip--target"
+        data-for={uid}
+        data-place={position}
+        data-event={trigger}
+        data-effect={float ? 'float' : 'solid'}
+        data-scroll-hide={hideOnScroll}
+        data-tip
+        onClick={e => {
+          e.preventDefault()
+        }}
+        onMouseEnter={ e => ReactTooltip.show(e.target)}
+        onMouseLeave={e => ReactTooltip.hide(e.target)}
+        onFocus={(e) => ReactTooltip.show(e.target)}
+        onBlur={(e) => ReactTooltip.hide(e.target)}
+        style={{ background: 'transparent', border: 'none' }}
       >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
-      </a>
+      </button>
       <ReactTooltip
         id={uid}
         className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border-' + border) : '') + (shadow ? ' has-shadow' : '')}