@cdc/core 4.22.10 → 4.23.1

package/README.md

@@ -1,3 +1,3 @@
 # `core`
 
-This is an internal package that is only consumed by external facing packages in COVE. It houses shared components, styles and assets.
+This is an internal package that is only consumed by external facing packages in COVE. It houses shared components, styles and assets.

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/icon-chart-bar.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.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.jsx

@@ -1,7 +1,6 @@
-import React from 'react';
-
-export default function LegendCircle({fill}) {
+import React from 'react'
 
+export default function LegendCircle({ fill }) {
   const styles = {
     marginRight: '5px',
     borderRadius: '300px',
@@ -13,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

@@ -1,15 +1,17 @@
-import React from 'react';
-import '../styles/loading.scss';
+import React from 'react'
+import '../styles/loading.scss'
 
-export default function Loading({viewport = "lg"}) {
+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>
-	)
+    <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

@@ -1,11 +1,20 @@
-import React from 'react';
-import '../styles/waiting.scss';
+import React from 'react'
+import '../styles/waiting.scss'
 
 export default ({ requiredColumns, className }) => (
   <section className={className}>
-    <section className="waiting-container">
+    <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>
+      <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

@@ -5,35 +5,18 @@ import LoadSpin from '../ui/LoadSpin'
 
 import '../../styles/v2/components/button.scss'
 
-const Button = ({
-                  style,
-                  role,
-                  hoverStyle = {},
-                  fluid = false,
-                  loading = false,
-                  loadingText = "Loading...",
-                  flexCenter,
-                  active = false,
-                  onClick,
-                  children, ...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 [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 : ''),
+    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'),
@@ -77,43 +60,49 @@ const Button = ({
     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 ])
+      ? 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 {...attributesObj}
-            onClick={(e) => {
-              e.preventDefault()
-              return loading || onClick()
-            }}
-            disabled={loading || attributesObj.disabled}
-            ref={buttonRef}>
-      {children &&
+    <button
+      {...attributesObj}
+      onClick={e => {
+        e.preventDefault()
+        return loading || onClick()
+      }}
+      disabled={loading || attributesObj.disabled}
+      ref={buttonRef}
+    >
+      {children && (
         <>
-          {'loader' === role &&
+          {'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 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 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' ]),
+  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 */

package/components/elements/Card.jsx

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

package/components/inputs/InputCheckbox.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import Check from '../../assets/icon-check.svg'
 import '../../styles/v2/components/input/index.scss'
 
-const InputCheckbox = memo((
-  {
+const InputCheckbox = memo(
+  ({
     label,
     size = 'small',
     activeColor = null,
@@ -16,46 +16,43 @@ const InputCheckbox = memo((
     updateField,
     value: stateValue,
 
-    i = null, min = null, max = null,
+    i = null,
+    min = null,
+    max = null,
     ...attributes
-  }
-) => {
-
-  const [ value, setValue ] = useState(stateValue)
-
-  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
-  if(fieldName === 'border') {
-    console.table({fieldName, value, stateValue})
-    
-  }
+  }) => {
+    const [value, setValue] = useState(stateValue)
 
-  useEffect(() => {
-    if (stateValue !== undefined && stateValue !== value) {
-      setValue(stateValue)
+    let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+    if (fieldName === 'border') {
+      console.table({ fieldName, value, stateValue })
     }
-  }, [ stateValue ])
 
-  useEffect(() => {
-    if (stateValue !== undefined && stateValue !== value && updateField) {
-      updateField(section, subsection, fieldName, value, i)
-    }
-  }, [ value ])
+    useEffect(() => {
+      if (stateValue !== undefined && stateValue !== value) {
+        setValue(stateValue)
+      }
+    }, [stateValue])
+
+    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,

package/components/inputs/InputGroup.jsx

@@ -2,17 +2,21 @@ 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 [styles, setStyles] = useState({})
+  const [labelWidth, setLabelWidth] = useState(null)
 
   const groupLabelRef = useRef(null)
-  const groupLabel = <div className="cove-input-group__label" ref={groupLabelRef}>{label}</div>
+  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 ])
+  }, [clear, groupLabelRef])
 
   useLayoutEffect(() => {
     if (!clear) return
@@ -22,29 +26,46 @@ const InputGroup = ({ label, flow, children, clear, className, style, ...attribu
     if ('right' === flow) {
       setStyles(() => ({ paddingRight: labelWidth + 'px' }))
     }
-  }, [ clear, flow, labelWidth ])
-
+  }, [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]} </>}
-        </> :
+      {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' ])
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  flow: PropTypes.oneOf(['left', 'center', 'right'])
 }
 
 export default InputGroup

package/components/inputs/InputSelect.jsx

@@ -2,44 +2,48 @@ import React, { memo } from 'react'
 
 import '../../styles/v2/components/input/index.scss'
 
-const InputSelect = memo((
-  {
-    label,
-    value,
-    options,
-    fieldName,
-    section = null,
-    subsection = null,
-    required = false,
-    updateField,
-    initial: initialValue,
-    ...attributes
-  }
-) => {
-
+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 cove-input__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>