@cdc/core 1.1.1 → 1.1.3

package/components/GlobalContext.jsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState } from 'react'
+
+export const GlobalContext = createContext({})
+export const useGlobalContext = () => useContext(GlobalContext)
+
+export const GlobalContextProvider = ({ children }) => {
+  const [ globalContextData, setGlobalContextData ] = useState({})
+
+  const openOverlay = (obj, disableBgClose = false) => {
+    let payload = { object: obj, show: true, disableBgClose: disableBgClose }
+    setGlobalContextData(context => ({ ...context, overlay: { ...payload } }))
+  }
+
+  const toggleOverlay = (display = false) => {
+    setGlobalContextData(context => ({
+      ...context,
+      overlay: {
+        ...context.overlay,
+        show: display
+      }
+    }))
+  }
+
+  const globalSettings = {
+    overlay: {
+      object: globalContextData.overlay?.object || null,
+      show: globalContextData.overlay?.show || false,
+      disableBgClose: globalContextData.overlay?.disableBgClose || false,
+      actions: {
+        openOverlay,
+        toggleOverlay
+      }
+    }
+  }
+
+  return (
+    <GlobalContext.Provider value={globalSettings}>
+      {children}
+    </GlobalContext.Provider>
+  )
+}

package/components/Loading.js

@@ -3,7 +3,8 @@ import '../styles/loading.scss';
 
 export default function Loading({viewport = "lg"}) {
   return (
-		<section className="loading" aria-hidden="true">
+	  	<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 />
@@ -11,4 +12,4 @@ export default function Loading({viewport = "lg"}) {
 			</div>
 		</section>
 	)
-}
+}

package/components/elements/Button.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import '../../styles/v2/components/button.scss'
+
+const Button = ({fluid, children, onClick, className, ...attributes}) => {
+
+  return (
+    <button className={`cove-button${fluid ? ' fluid' : ''}${className ? className : ''}`} {...attributes} onClick={(e) => {e.preventDefault(); onClick();}}>{children}</button>
+  )
+}
+
+export default Button

package/components/inputs/InputCheckbox.jsx

@@ -0,0 +1,59 @@
+import React, { useState, useEffect, memo } from 'react'
+
+import Check from '../../assets/check.svg'
+import '../../styles/v2/components/input.scss'
+
+const InputCheckbox = memo((
+  {
+    label,
+    size = 'medium',
+    activeColor = null,
+    activeCheckColor = null,
+    section = null,
+    subsection = null,
+    fieldName,
+    updateField,
+    value: stateValue,
+
+    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})
+    
+  }
+
+  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'}}/>
+        </div>
+        <input className="cove-input--hidden" type="checkbox" name={name} checked={value || false} readOnly/>
+      </div>
+    </div>
+  )
+})
+
+export default InputCheckbox

package/components/inputs/InputSelect.jsx

@@ -0,0 +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
+  }
+) => {
+
+  let optionsJsx = ''
+
+  if (Array.isArray(options)) {
+    //Handle basic array
+    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>)
+    }
+  }
+
+  if (initialValue) {
+    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}>
+        {optionsJsx}
+      </select>
+    </label>
+  )
+})
+
+export default InputSelect

package/components/inputs/InputText.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect, memo } from 'react'
+import { useDebounce } from 'use-debounce'
+
+import '../../styles/v2/components/input.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)
+
+  useEffect(() => {
+    if ('string' === typeof debouncedValue && stateValue !== debouncedValue && updateField) {
+      updateField(section, subsection, fieldName, debouncedValue, i)
+    }
+  }, [ debouncedValue, section, subsection, fieldName, i, stateValue, updateField ])
+
+  let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
+
+  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))) {
+        setValue(e.target.value)
+      } else {
+        setValue(min.toString())
+      }
+    }
+  }
+
+  let formElement = <input type="text" name={name} onChange={onChange} {...attributes} value={value}/>
+
+  if ('textarea' === type) {
+    formElement = (
+      <textarea name={name} onChange={onChange} {...attributes} value={value}/>
+    )
+  }
+
+  if ('number' === type) {
+    formElement = <input type="number" name={name} onChange={onChange} {...attributes} value={value}/>
+  }
+
+  return (
+    <div className="cove-input-group">
+      {label &&
+        <>
+          <label>{label}{tooltip}</label>
+        </>
+      }
+      {formElement}
+    </div>
+  )
+})
+
+export default InputText

package/components/inputs/InputToggle.jsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import '../../styles/v2/components/input.scss'
+
+const InputToggle = (
+  {
+    label,
+    toggleType = '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)
+
+  let name = () => {
+    let str = ''
+    if (section)
+      str += section + '-'
+    if (subsection)
+      str += subsection + '-'
+    if (fieldName)
+      str += fieldName
+    return str
+  }
+
+  const toggleTypeClass = () => {
+    const typeArr = {
+      'flat': ' toggle--flat',
+      'block': ' toggle--block',
+      'pill': ' toggle--pill',
+      '3d': ' toggle--3d'
+    }
+    return typeArr[toggleType] || ''
+  }
+
+  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__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>
+    </div>
+  )
+}
+
+InputToggle.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 */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Select the preferred color for the toggle slider when active */
+  activeColor: PropTypes.string,
+  /** Parent key value of nested target config option
+   *
+   * (optional)*/
+  section: PropTypes.string,
+  /** Child key value of nested target config option
+   *
+   * (optional, requires `section` value)*/
+  subsection: PropTypes.string,
+  /** Key value of targeted config option */
+  fieldName: PropTypes.string,
+  /** Prop drill down of the updateField function */
+  updateField: PropTypes.func,
+  /** Current value of the input, usually the current config option value */
+  stateValue: PropTypes.object
+}
+
+export default InputToggle

package/components/ui/Accordion.jsx

@@ -0,0 +1,64 @@
+import React, { Children } from 'react'
+import {
+  Accordion as AccordionComponent,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton,
+} from 'react-accessible-accordion'
+import PropTypes from 'prop-types'
+
+import Icon from './Icon'
+import Tooltip from './Tooltip'
+
+import '../../styles/v2/components/accordion.scss'
+
+//Define the "slots" to be populated by subcomponents
+const AccordionSection = () => null
+
+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">
+                    <Tooltip.Target>
+                      <Icon display="question" size={14}/>
+                    </Tooltip.Target>
+                    <Tooltip.Content>
+                      {section.props.tooltipText}
+                    </Tooltip.Content>
+                  </Tooltip>
+                )
+                : null
+              }
+            </AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel className="cove-accordion__panel">
+            {section.props.children}
+          </AccordionItemPanel>
+        </AccordionItem>
+      ))}
+    </AccordionComponent>
+  )
+}
+
+//Create subcomponents as "slots" within component namespace
+Accordion.Section = AccordionSection
+
+Accordion.Section.propTypes = {
+  /* Title for the accordion label*/
+  title: PropTypes.string,
+  /* Tooltip for the accordion label*/
+  tooltipText: PropTypes.object
+}
+
+export default Accordion

package/components/ui/Icon.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+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 iconInfo from '../../assets/icon-info.svg'
+
+import '../../styles/v2/components/icon.scss'
+
+const iconHash = {
+  "close": iconClose,
+  "question": iconQuestion,
+  "link": iconLink,
+  "upload": iconUpload,
+  "fileUpload": iconFileUpload,
+  "warning": iconWarning,
+  "info": iconInfo
+}
+
+const Icon = ({ display = null, base, alt = '', size, color, style, ...attributes }) => {
+  const IconObj = iconHash[display] || null
+
+  const filteredAttrs = { ...attributes }
+  delete filteredAttrs.className
+
+  const styles = {
+    ...style,
+    color: color ? color : null,
+    width: size ? size + 'px' : null
+  }
+
+  return (
+    <>
+      {base
+        ? <IconObj title={alt}/>
+        : (
+          <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
+            <IconObj title={alt}/>
+          </span>
+        )
+      }
+    </>
+  )
+}
+
+Icon.propTypes = {
+  /* Define the icon to display */
+  display: PropTypes.oneOf(Object.keys(iconHash)),
+  /* Returns icon data as plain svg */
+  base: PropTypes.bool,
+  /* Sets alt text for the icon */
+  alt: PropTypes.string,
+  /* Override the width of the icon (scales height proportionally)*/
+  size: PropTypes.number,
+  /* Override the color of the icon */
+  color: PropTypes.string
+}
+
+export default Icon

package/components/ui/Modal.jsx

@@ -0,0 +1,87 @@
+import React, { Children } from 'react'
+import PropTypes from 'prop-types'
+
+import { useGlobalContext } from '../GlobalContext'
+import Icon from './Icon'
+
+import '../../styles/v2/components/modal.scss'
+
+//Define the "slots" to be populated by subcomponents
+const ModalHeader = () => null
+const ModalContent = () => null
+const ModalFooter = () => null
+
+const Modal = ({
+                 fontTheme = 'dark',
+                 headerBgColor = '#fff',
+                 showDividerTop = true,
+                 showDividerBottom = true,
+                 showClose = true,
+                 children,
+                 override = null
+               }) => {
+
+  //Access global overlay state
+  let { overlay } = useGlobalContext()
+
+  //Parse, organize, and pull "slotted" children data from subcomponents
+  const childNodes = Children.toArray(children)
+  const modalHeaderChildren = childNodes.find(child => child?.type === ModalHeader)
+  const modalContentChildren = childNodes.find(child => child?.type === ModalContent)
+  const modalFooterChildren = childNodes.find(child => child?.type === ModalFooter)
+
+  //Modal computed style options
+  const dividerBorder = (bool) => {
+    return !bool ? 'none' : null
+  }
+
+  //Render output
+  return (
+    <div className={`cove-modal cove-modal__theme--${fontTheme}`}>
+      {(showClose || modalHeaderChildren) &&
+      <div className="cove-modal__header" style={{
+        backgroundColor: headerBgColor,
+        boxShadow: dividerBorder(modalHeaderChildren && showDividerTop),
+        padding: !modalHeaderChildren ? '0' : 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()}>
+          <Icon display="close"/>
+        </button>
+        }
+      </div>
+      }
+
+      <div className="cove-modal__content">
+        {modalContentChildren && modalContentChildren.props.children}
+      </div>
+
+      {modalFooterChildren &&
+      <div className="cove-modal__footer" style={{
+        boxShadow: dividerBorder(showDividerBottom),
+        paddingTop: showDividerBottom ? '1rem' : null
+      }}>
+        {modalFooterChildren.props.children}
+      </div>
+      }
+
+    </div>
+  )
+}
+
+//Create subcomponents as "slots" within component namespace
+Modal.Header = ModalHeader
+Modal.Content = ModalContent
+Modal.Footer = ModalFooter
+
+Modal.propTypes = {
+  fontTheme: PropTypes.oneOf([ 'dark', 'light' ]),
+  headerBgColor: PropTypes.string,
+  showDividerTop: PropTypes.bool,
+  showDividerBottom: PropTypes.bool,
+  showClose: PropTypes.bool
+}
+
+export default Modal

package/components/ui/Overlay.jsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react'
+
+import { useGlobalContext } from '../GlobalContext'
+
+import '../../styles/v2/components/overlay.scss'
+
+const Overlay = ({ disableBgClose, children, override = null }) => {
+  //Access global modal state
+  let { overlay } = useGlobalContext()
+
+  //Set local states
+  const [ displayOverlay, setDisplayOverlay ] = useState(false)
+  const [ overlayAnimationState, setOverlayAnimationState ] = useState(null)
+  const [ overlayErrorState, setOverlayErrorState ] = useState(false)
+
+  const overlayDisplay = overlay?.show || override?.show
+
+  //Animate In effect
+  useEffect(() => {
+    if (overlayDisplay === false) return //Reject
+
+    document.body.style.overflow = 'hidden'
+    setDisplayOverlay(true)
+    setOverlayAnimationState('animate-in')
+
+    const timeoutShow = setTimeout(() => {
+      setOverlayAnimationState('show')
+    }, 750)
+
+    return () => clearTimeout(timeoutShow)
+  }, [ overlayDisplay ])
+
+  //Animate Out effect
+  useEffect(() => {
+    if (overlayDisplay === true) return //Reject
+
+    setOverlayAnimationState('animate-out')
+
+    const timeoutHide = setTimeout(() => {
+      setOverlayAnimationState(null)
+      setDisplayOverlay(false)
+      document.body.style.overflow = null
+    }, 400)
+
+    return () => clearTimeout(timeoutHide)
+  }, [ overlayDisplay ])
+
+  //Error animate effect
+  useEffect(() => {
+    if (overlayErrorState === false) return //Reject
+
+    const timeoutHide = setTimeout(() => {
+      setOverlayErrorState(false)
+    }, 400)
+
+    return () => clearTimeout(timeoutHide)
+  }, [ overlayErrorState ])
+
+  //Render output
+  return (
+    <>
+      {displayOverlay &&
+        <div
+          className={`cove-overlay${overlayAnimationState ? (' ' + overlayAnimationState) : ''}${overlayErrorState ? ' overlay-error' : ''}`}>
+          <div className="cove-overlay__bg" style={{ cursor: disableBgClose ? 'default' : null }}
+               onClick={(e) =>
+                 disableBgClose ? setOverlayErrorState(true) :
+                   overlay ? overlay.actions.toggleOverlay(false) :
+                     override ? override.actions.toggleOverlay(false) :
+                       e.preventDefault()
+               }
+               role="alert"
+          />
+          <div className="cove-overlay__wrapper">
+            <div className="cove-overlay__container">
+              {children}
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  )
+}
+export default Overlay

package/components/ui/OverlayFrame.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { useGlobalContext } from '../GlobalContext'
+
+import Overlay from './Overlay'
+
+const OverlayFrame = () => {
+  const { overlay } = useGlobalContext()
+  return (
+    <Overlay disableBgClose={overlay.disableBgClose}>
+      { overlay.object }
+    </Overlay>
+  )
+}
+
+export default OverlayFrame