@cdc/core 1.1.4 → 4.22.11

package/components/AdvancedEditor.js

@@ -1,74 +1,59 @@
 import React, { useState, useEffect } from 'react'
 import MapIcon from '../assets/map-folded.svg'
-import ChartIcon from '../assets/chart-bar-solid.svg';
-import MarkupIncludeIcon from '../assets/icon-code.svg';
-
+import ChartIcon from '../assets/icon-chart-bar.svg'
+import MarkupIncludeIcon from '../assets/icon-code.svg'
 
 export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
-	const [advancedToggle, setAdvancedToggle] = useState(false);
-	const [configTextboxValue, setConfigTextbox] = useState({});
-
-
-	useEffect(() => {
-		const parsedData = convertStateToConfig();
-		const formattedData = JSON.stringify(parsedData, undefined, 2);
-
-		setConfigTextbox(formattedData);
-	}, [state]);
-
-	const typeLookup = {
-		'chart': ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
-		'map': ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
-		'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon /> ]
-	}
-
-	if(!state.type) return;
-	return (
-		<>
-			<a
-				href={typeLookup[state.type][1]}
-				target='_blank'
-				rel='noopener noreferrer'
-				className='guidance-link'
-			>
-				{typeLookup[state.type][2]}
-				<div>
-					<span className='heading-3'>Get Help with { typeLookup[state.type][0] }</span>
-					<p>Examples and documentation</p>
-				</div>
-			</a>
-			<div className='advanced'>
-				<span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
-					<span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
-				</span>
-				{advancedToggle && (
-					<React.Fragment>
-						<section className='error-box py-2 px-3 my-2'>
-							<div>
-								<strong className='pt-1'>Warning</strong>
-								<p>This can cause serious errors in your visualization.</p>
-							</div>
-						</section>
-						<p className='pb-2'>
-							This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration{' '}
-							that is generated by this
-							editor and allows you to edit properties directly and apply them.
-						</p>
-						<textarea
-							value={configTextboxValue}
-							onChange={(event) => setConfigTextbox(event.target.value)}
-						/>
-						<button
-							className='btn full-width'
-							onClick={() => loadConfig(JSON.parse(configTextboxValue))}
-						>
-							Apply
-						</button>
-					</React.Fragment>
-				)}
-			</div>
-		</>
-	)
+  const [advancedToggle, setAdvancedToggle] = useState(false)
+  const [configTextboxValue, setConfigTextbox] = useState({})
+
+  useEffect(() => {
+    const parsedData = convertStateToConfig()
+    const formattedData = JSON.stringify(parsedData, undefined, 2)
+
+    setConfigTextbox(formattedData)
+  }, [state])
+
+  const typeLookup = {
+    chart: ['Charts', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/bar-chart.html', <ChartIcon />],
+    map: ['Maps', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/data-map.html', <MapIcon />],
+    'markup-include': ['Markup Include', 'https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/Markup-Include.html', <MarkupIncludeIcon />]
+  }
+
+  if (!state.type) return
+  return (
+    <>
+      <a href={typeLookup[state.type][1]} target='_blank' rel='noopener noreferrer' className='guidance-link'>
+        {typeLookup[state.type][2]}
+        <div>
+          <span className='heading-3'>Get Help with {typeLookup[state.type][0]}</span>
+          <p>Examples and documentation</p>
+        </div>
+      </a>
+      <div className='advanced'>
+        <span className='advanced-toggle-link' onClick={() => setAdvancedToggle(!advancedToggle)}>
+          <span>{advancedToggle ? `— ` : `+ `}</span>Advanced Options
+        </span>
+        {advancedToggle && (
+          <React.Fragment>
+            <section className='error-box py-2 px-3 my-2'>
+              <div>
+                <strong className='pt-1'>Warning</strong>
+                <p>This can cause serious errors in your visualization.</p>
+              </div>
+            </section>
+            <p className='pb-2'>
+              This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
+            </p>
+            <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
+            <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
+              Apply
+            </button>
+          </React.Fragment>
+        )}
+      </div>
+    </>
+  )
 }
 
 export default AdvancedEditor

package/components/{ErrorBoundary.js → ErrorBoundary.jsx}

@@ -1,33 +1,32 @@
-import React from 'react';
+import React from 'react'
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
-    super(props);
-    this.state = { hasError: false };
-
+    super(props)
+    this.state = { hasError: false }
   }
 
   static getDerivedStateFromError(error) {
     // Update state so the next render will show the fallback UI.
-    return { hasError: true };
+    return { hasError: true }
   }
 
   componentDidCatch(error, errorInfo) {
     // You can also log the error to an error reporting service
-    console.warn(error, errorInfo);
+    console.warn(error, errorInfo)
   }
 
   render() {
     if (this.state.hasError) {
-      if(this.props.component) {
-        return <h1>Something went wrong with component {this.props.component}.</h1>;
+      if (this.props.component) {
+        return <h1>Something went wrong with component {this.props.component}.</h1>
       }
       // You can render any custom fallback UI
-      return <h1>Something went wrong.</h1>;
+      return <h1>Something went wrong.</h1>
     }
 
-    return this.props.children; 
+    return this.props.children
   }
 }
 
-export default ErrorBoundary;
+export default ErrorBoundary

package/components/GlobalContext.jsx

@@ -4,7 +4,7 @@ export const GlobalContext = createContext({})
 export const useGlobalContext = () => useContext(GlobalContext)
 
 export const GlobalContextProvider = ({ children }) => {
-  const [ globalContextData, setGlobalContextData ] = useState({})
+  const [globalContextData, setGlobalContextData] = useState({})
 
   const openOverlay = (obj, disableBgClose = false) => {
     let payload = { object: obj, show: true, disableBgClose: disableBgClose }
@@ -33,9 +33,5 @@ export const GlobalContextProvider = ({ children }) => {
     }
   }
 
-  return (
-    <GlobalContext.Provider value={globalSettings}>
-      {children}
-    </GlobalContext.Provider>
-  )
+  return <GlobalContext.Provider value={globalSettings}>{children}</GlobalContext.Provider>
 }

package/components/{LegendCircle.js → LegendCircle.jsx}

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from 'react'
 
-export default function LegendCircle({fill}) {
+export default function LegendCircle({ fill }) {
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
@@ -12,5 +12,5 @@ export default function LegendCircle({fill}) {
     backgroundColor: fill
   }
 
-  return <span className="legend-item" style={styles} />
-}
+  return <span className='legend-item' style={styles} />
+}

package/components/Loading.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import '../styles/loading.scss'
+
+export default function Loading({ viewport = 'lg' }) {
+  return (
+    <section className='loading' aria-live='assertive'>
+      <span className='sr-only' style={{ display: 'none' }}>
+        Content is loading.
+      </span>
+      <div className={`la-ball-beat la-dark ${viewport}`}>
+        <div />
+        <div />
+        <div />
+      </div>
+    </section>
+  )
+}

package/components/Waiting.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import '../styles/waiting.scss'
+
+export default ({ requiredColumns, className }) => (
+  <section className={className}>
+    <section className='waiting-container'>
+      <h3>Configuration Required</h3>
+      <p>
+        Set{' '}
+        {requiredColumns.map((col, i) => (
+          <span key={`missing-column-${i}`}>
+            <strong>{col}</strong>
+            {i + 1 < requiredColumns.length && ', '}
+          </span>
+        ))}{' '}
+        columns in editor.
+      </p>
+    </section>
+  </section>
+)

package/components/elements/Button.jsx

@@ -1,12 +1,120 @@
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+import LoadSpin from '../ui/LoadSpin'
 
 import '../../styles/v2/components/button.scss'
 
-const Button = ({fluid, children, onClick, className, ...attributes}) => {
+const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false, loadingText = 'Loading...', flexCenter, active = false, onClick, children, ...attributes }) => {
+  const buttonRef = useRef(null)
+
+  const [buttonState, setButtonState] = useState('out')
+  const [customStyles, setCustomStyles] = useState({ ...style })
+  const [childrenWidth, setChildrenWidth] = useState()
+  const [loadtextWidth, setLoadtextWidth] = useState()
+
+  const attributesObj = {
+    ...attributes,
+    style: customStyles,
+    className: 'cove-button' + (flexCenter || 'loader' === role ? ' cove-button--flex-center' : '') + (fluid ? ' fluid' : '') + (loading ? ' loading' : '') + (attributes.className ? ' ' + attributes.className : ''),
+    onMouseOver: () => setButtonState('in'),
+    onMouseOut: () => setButtonState('out'),
+    onFocus: () => setButtonState('in'),
+    onBlur: () => setButtonState('out')
+  }
+
+  useEffect(() => {
+    if ('loader' === role && buttonRef.current) {
+      //Create ghost object and text nodes for children
+      const ghostSpan = document.createElement('span')
+      const ghostContent = document.createTextNode(children)
+      ghostSpan.style.opacity = '0'
+      ghostSpan.style.visibility = 'hidden'
+
+      //Create ghost object and text nodes for loading value
+      const ghostLoaderSpan = document.createElement('span')
+      const ghostLoaderContent = document.createTextNode(loadingText)
+      ghostLoaderSpan.style.opacity = '0'
+      ghostLoaderSpan.style.visibility = 'hidden'
+
+      //Append data to ghost objects
+      ghostSpan.appendChild(ghostContent)
+      ghostLoaderSpan.appendChild(ghostLoaderContent)
+
+      //Append objects to document
+      buttonRef.current.parentNode.insertBefore(ghostSpan, buttonRef.current)
+      buttonRef.current.parentNode.insertBefore(ghostLoaderSpan, buttonRef.current)
+
+      //Register ghost width values in state
+      setChildrenWidth(ghostSpan.offsetWidth + 2) //Toss in a 2px to account for subpixel offset
+      setLoadtextWidth(ghostLoaderSpan.offsetWidth + 2) //Toss in a 2px to account for subpixel offset
+
+      //Remove ghost objects form document
+      buttonRef.current.parentNode.removeChild(ghostSpan)
+      buttonRef.current.parentNode.removeChild(ghostLoaderSpan)
+    }
+  }, [])
+
+  useEffect(() => {
+    //Adjust button styles depending on cursor, focus, and active, states
+    return buttonState === 'in'
+      ? setCustomStyles(stateStyles => ({ ...stateStyles, ...hoverStyle }))
+      : buttonState === 'out'
+      ? active //If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
+        ? null //Button is active, so leave the 'hover' styles in place
+        : setCustomStyles({ ...style }) //Button is not 'active', so reset display styles back to default
+      : false //Button state is neither 'in' nor 'out' - do nothing
+  }, [buttonState, active])
 
   return (
-    <button className={`cove-button${fluid ? ' fluid' : ''}${className ? className : ''}`} {...attributes} onClick={(e) => {e.preventDefault(); onClick();}}>{children}</button>
+    <button
+      {...attributesObj}
+      onClick={e => {
+        e.preventDefault()
+        return loading || onClick()
+      }}
+      disabled={loading || attributesObj.disabled}
+      ref={buttonRef}
+    >
+      {children && (
+        <>
+          {'loader' === role && (
+            <>
+              <span className='cove-button__text' style={loading ? { width: loadtextWidth + 'px' } : { width: childrenWidth + 'px' }}>
+                <div className='cove-button__text--loading' style={loading ? { opacity: 1 } : null}>
+                  {loadingText}
+                </div>
+                <div className='cove-button__text--children' style={loading ? { opacity: 0 } : null}>
+                  {children}
+                </div>
+              </span>
+              <div className='cove-button__load-spin' style={loading ? { width: '28px', opacity: 1 } : null}>
+                <LoadSpin className='ml-1' size={20} />
+              </div>
+            </>
+          )}
+          {role !== 'loader' && children}
+        </>
+      )}
+    </button>
   )
 }
 
+Button.propTypes = {
+  /** Specify special role type for button */
+  role: PropTypes.oneOf(['loader']),
+  /** Provide object with styles that overwrite base styles when hovered */
+  hoverStyle: PropTypes.object,
+  /** Enables button to stretch to the full width of the content */
+  fluid: PropTypes.bool,
+  /** Displays loading spinner on button while condition is true **/
+  loading: PropTypes.bool,
+  /** Set text to appear during loading animation **/
+  loadingText: PropTypes.string,
+  /** Displays button as flex and centers all direct children nodes. Useful for aligning icons and text **/
+  flexCenter: PropTypes.bool,
+  /** When value condition is true, retains any custom, inline `style={}` defined **/
+  active: PropTypes.bool
+}
+
 export default Button

package/components/elements/Card.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import '../../styles/v2/components/card.scss'
+
+const Card = ({ children, className, ...attributes }) => {
+  return (
+    <div className={`cove-card${className ? ' ' + className : ''}`} {...attributes}>
+      {children}
+    </div>
+  )
+}
+
+export default Card

package/components/inputs/InputCheckbox.jsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, memo } from 'react'
+import PropTypes from 'prop-types'
 
-import Check from '../../assets/check.svg'
-import '../../styles/v2/components/input.scss'
+import Check from '../../assets/icon-check.svg'
+import '../../styles/v2/components/input/index.scss'
 
-const InputCheckbox = memo((
-  {
+const InputCheckbox = memo(
+  ({
     label,
-    size = 'medium',
+    size = 'small',
     activeColor = null,
     activeCheckColor = null,
     section = null,
@@ -15,45 +16,49 @@ const InputCheckbox = memo((
     updateField,
     value: stateValue,
 
-    i = null, min = null, max = null,
+    i = null,
+    min = null,
+    max = null,
     ...attributes
-  }
-) => {
+  }) => {
+    const [value, setValue] = useState(stateValue)
 
-  const [ value, setValue ] = useState(stateValue)
+    let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+    if (fieldName === 'border') {
+      console.table({ fieldName, value, stateValue })
+    }
 
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-  if(fieldName === 'border') {
-    console.table({fieldName, value, stateValue})
-    
-  }
+    useEffect(() => {
+      if (stateValue !== undefined && stateValue !== value) {
+        setValue(stateValue)
+      }
+    }, [stateValue])
 
-  useEffect(() => {
-    if (stateValue !== undefined && stateValue !== value) {
-      setValue(stateValue)
-    }
-  }, [ stateValue ])
+    useEffect(() => {
+      if (stateValue !== undefined && stateValue !== value && updateField) {
+        updateField(section, subsection, fieldName, value, i)
+      }
+    }, [value])
 
-  useEffect(() => {
-    if (stateValue !== undefined && stateValue !== value && updateField) {
-      updateField(section, subsection, fieldName, value, i)
-    }
-  }, [ value ])
-
-  return (
-    <div className="input-group">
-      {label && <label>{label}</label>}
-      <div
-        className={'cove-input__checkbox' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (value ? ' active' : '')}
-        onClick={() => setValue(!value)}>
-        <div className={`cove-input__checkbox-box${activeColor ? ' custom-color' : ''}`}
-             style={value && activeColor ? { backgroundColor: activeColor } : null}>
-          <Check className="cove-input__checkbox-check" style={{fill: activeCheckColor || '#025eaa'}}/>
+    return (
+      <div className='input-group'>
+        {label && <label>{label}</label>}
+        <div className={'cove-input__checkbox' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + (value ? ' active' : '')} onClick={() => setValue(!value)}>
+          <div className={`cove-input__checkbox-box${activeColor ? ' custom-color' : ''}`} style={value && activeColor ? { backgroundColor: activeColor } : null}>
+            <Check className='cove-input__checkbox-check' style={{ fill: activeCheckColor || '#025eaa' }} />
+          </div>
+          <input className='cove-input--hidden' type='checkbox' name={name} checked={value || false} readOnly />
         </div>
-        <input className="cove-input--hidden" type="checkbox" name={name} checked={value || false} readOnly/>
       </div>
-    </div>
-  )
-})
+    )
+  }
+)
+
+InputCheckbox.propTypes = {
+  label: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  activeColor: PropTypes.string,
+  activeCheckColor: PropTypes.string
+}
 
 export default InputCheckbox

package/components/inputs/InputGroup.jsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+const InputGroup = ({ label, flow, children, clear, className, style, ...attributes }) => {
+  const [styles, setStyles] = useState({})
+  const [labelWidth, setLabelWidth] = useState(null)
+
+  const groupLabelRef = useRef(null)
+  const groupLabel = (
+    <div className='cove-input-group__label' ref={groupLabelRef}>
+      {label}
+    </div>
+  )
+
+  useLayoutEffect(() => {
+    if (!clear) return
+    if (!groupLabelRef.current) return
+    setLabelWidth(groupLabelRef.current.offsetWidth)
+  }, [clear, groupLabelRef])
+
+  useLayoutEffect(() => {
+    if (!clear) return
+    if ('left' === flow) {
+      setStyles(() => ({ paddingLeft: labelWidth + 'px' }))
+    }
+    if ('right' === flow) {
+      setStyles(() => ({ paddingRight: labelWidth + 'px' }))
+    }
+  }, [clear, flow, labelWidth])
+
+  return (
+    <div className={`cove-input-group${clear ? ' clear' : ''}${className ? ' ' + className : ''}`} flow={flow} {...attributes}>
+      {label && flow ? (
+        <>
+          {'left' === flow && (
+            <>
+              {' '}
+              {groupLabel}
+              {children}{' '}
+            </>
+          )}
+          {'right' === flow && (
+            <>
+              {' '}
+              {children}
+              {groupLabel}{' '}
+            </>
+          )}
+          {'center' === flow && children.length > 1 && (
+            <>
+              {' '}
+              {children[0]}
+              {groupLabel}
+              {children[1]}{' '}
+            </>
+          )}
+        </>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
+
+InputGroup.propTypes = {
+  /* Text to display for the input group */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  flow: PropTypes.oneOf(['left', 'center', 'right'])
+}
+
+export default InputGroup

package/components/inputs/InputSelect.jsx

@@ -1,45 +1,49 @@
 import React, { memo } from 'react'
 
-import '../../styles/v2/components/input.scss'
-
-const InputSelect = memo((
-  {
-    label,
-    value,
-    options,
-    fieldName,
-    section = null,
-    subsection = null,
-    required = false,
-    updateField,
-    initial: initialValue,
-    ...attributes
-  }
-) => {
+import '../../styles/v2/components/input/index.scss'
 
+const InputSelect = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }) => {
   let optionsJsx = ''
 
   if (Array.isArray(options)) {
     //Handle basic array
-    optionsJsx = options.map(optionName => <option value={optionName} key={optionName}>{optionName}</option>)
+    optionsJsx = options.map(optionName => (
+      <option value={optionName} key={optionName}>
+        {optionName}
+      </option>
+    ))
   } else {
     //Handle object with value/name pairs
     optionsJsx = []
-    for (const [ optionValue, optionName ] of Object.entries(options)) {
-      optionsJsx.push(<option value={optionValue} key={optionValue}>{optionName}</option>)
+    for (const [optionValue, optionName] of Object.entries(options)) {
+      optionsJsx.push(
+        <option value={optionValue} key={optionValue}>
+          {optionName}
+        </option>
+      )
     }
   }
 
   if (initialValue) {
-    optionsJsx.unshift(<option value="" key="initial">{initialValue}</option>)
+    optionsJsx.unshift(
+      <option value='' key='initial'>
+        {initialValue}
+      </option>
+    )
   }
 
   return (
     <label>
-      {label && <span className="edit-label">{label}</span>}
-      <select className={required && !value ? 'warning' : ''} name={fieldName} value={value} onChange={(event) => {
-        updateField(section, subsection, fieldName, event.target.value)
-      }} {...attributes}>
+      {label && <span className='edit-label cove-input__label'>{label}</span>}
+      <select
+        className={required && !value ? 'warning' : ''}
+        name={fieldName}
+        value={value}
+        onChange={event => {
+          updateField(section, subsection, fieldName, event.target.value)
+        }}
+        {...attributes}
+      >
         {optionsJsx}
       </select>
     </label>