@cdc/core 1.1.4 → 4.22.11

package/components/ui/Modal.jsx

@@ -11,16 +11,7 @@ const ModalHeader = () => null
 const ModalContent = () => null
 const ModalFooter = () => null
 
-const Modal = ({
-                 fontTheme = 'dark',
-                 headerBgColor = '#fff',
-                 showDividerTop = true,
-                 showDividerBottom = true,
-                 showClose = true,
-                 children,
-                 override = null
-               }) => {
-
+const Modal = ({ fontTheme = 'dark', headerBgColor = '#fff', showDividerTop = true, showDividerBottom = true, showClose = true, children, override = null }) => {
   //Access global overlay state
   let { overlay } = useGlobalContext()
 
@@ -31,42 +22,52 @@ const Modal = ({
   const modalFooterChildren = childNodes.find(child => child?.type === ModalFooter)
 
   //Modal computed style options
-  const dividerBorder = (bool) => {
+  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>
+      {(showClose || modalHeaderChildren) && (
+        <div
+          className='cove-modal__header'
+          style={{
+            backgroundColor: headerBgColor,
+            boxShadow: dividerBorder(modalHeaderChildren && showDividerTop),
+            padding: !modalHeaderChildren ? '0' : null,
+            minHeight: !modalHeaderChildren ? 'unset' : null
+          }}
+        >
+          {modalHeaderChildren && modalHeaderChildren.props.children}
+          {showClose && (
+            <button
+              className='cove-modal--close'
+              onClick={e => {
+                if (override) return override.actions.toggleOverlay(false)
+                if (overlay) return overlay?.actions.toggleOverlay(false)
+                e.preventDefault()
+              }}
+            >
+              <Icon display='close' />
+            </button>
+          )}
+        </div>
+      )}
 
-      {modalFooterChildren &&
-      <div className="cove-modal__footer" style={{
-        boxShadow: dividerBorder(showDividerBottom),
-        paddingTop: showDividerBottom ? '1rem' : null
-      }}>
-        {modalFooterChildren.props.children}
-      </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>
   )
 }
@@ -77,7 +78,7 @@ Modal.Content = ModalContent
 Modal.Footer = ModalFooter
 
 Modal.propTypes = {
-  fontTheme: PropTypes.oneOf([ 'dark', 'light' ]),
+  fontTheme: PropTypes.oneOf(['dark', 'light']),
   headerBgColor: PropTypes.string,
   showDividerTop: PropTypes.bool,
   showDividerBottom: PropTypes.bool,

package/components/ui/Overlay.jsx

@@ -9,14 +9,15 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
   let { overlay } = useGlobalContext()
 
   //Set local states
-  const [ displayOverlay, setDisplayOverlay ] = useState(false)
-  const [ overlayAnimationState, setOverlayAnimationState ] = useState(null)
-  const [ overlayErrorState, setOverlayErrorState ] = useState(false)
+  const [displayOverlay, setDisplayOverlay] = useState(false)
+  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'
@@ -28,10 +29,11 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
     }, 750)
 
     return () => clearTimeout(timeoutShow)
-  }, [ overlayDisplay ])
+  }, [overlayDisplay])
 
   //Animate Out effect
   useEffect(() => {
+    if (overlayDisplay === undefined) return
     if (overlayDisplay === true) return //Reject
 
     setOverlayAnimationState('animate-out')
@@ -43,7 +45,7 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
     }, 400)
 
     return () => clearTimeout(timeoutHide)
-  }, [ overlayDisplay ])
+  }, [overlayDisplay])
 
   //Error animate effect
   useEffect(() => {
@@ -54,30 +56,19 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
     }, 400)
 
     return () => clearTimeout(timeoutHide)
-  }, [ overlayErrorState ])
+  }, [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>
+      {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>
-      }
+      )}
     </>
   )
 }

package/components/ui/OverlayFrame.jsx

@@ -6,11 +6,7 @@ import Overlay from './Overlay'
 
 const OverlayFrame = () => {
   const { overlay } = useGlobalContext()
-  return (
-    <Overlay disableBgClose={overlay.disableBgClose}>
-      { overlay.object }
-    </Overlay>
-  )
+  return <Overlay disableBgClose={overlay.disableBgClose}>{overlay.object}</Overlay>
 }
 
 export default OverlayFrame

package/components/ui/Tooltip.jsx

@@ -4,45 +4,34 @@ import ReactTooltip from 'react-tooltip'
 const TooltipTarget = () => null
 const TooltipContent = () => null
 
-const Tooltip = ({
-                   position = 'top',
-                   trigger = 'hover',
-                   float = false,
-                   shadow = true,
-                   border = null,
-                   borderColor = '#bdbdbd',
-                   hideOnScroll = true,
-                   children,
-                   style,
-                   ...attributes
-                 }) => {
-
+const Tooltip = ({ position = 'top', trigger = 'hover focus', float = false, shadow = true, border = null, borderColor = '#bdbdbd', hideOnScroll = true, children, style, ...attributes }) => {
   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
+    <span className='cove-tooltip' style={style} {...attributes}>
+      <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>
-      <ReactTooltip
-        id={uid}
-        className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border-' + border) : '') + (shadow ? ' has-shadow' : '')}
-        type="light"
-        effect="solid"
-        border={!!border}
-        borderColor={borderColor}
-        globalEventOff="click"
-      >
+      </button>
+      <ReactTooltip id={uid} className={'cove-tooltip__content' + (trigger === 'click' ? ' interactive' : '') + (border ? ' cove-tooltip--border-' + border : '') + (shadow ? ' has-shadow' : '')} type='light' effect='solid' border={!!border} borderColor={borderColor} globalEventOff='click'>
         {tooltipContentChildren ? tooltipContentChildren.props.children : null}
       </ReactTooltip>
     </span>

package/data/colorPalettes.js

@@ -1,240 +1,49 @@
-import { updatePaletteNames} from "../helpers/updatePaletteNames";
+import { updatePaletteNames } from '../helpers/updatePaletteNames'
 
 const colorPalettesMap = {
-  yelloworangered: [
-    '#ffffcc',
-    '#ffeda0',
-    '#fed976',
-    '#feb24c',
-    '#fd8d3c',
-    '#fc4e2a',
-    '#e31a1c',
-    '#bd0026',
-    '#800026',
-  ],
-  yelloworangebrown: [
-    '#ffffe5',
-    '#fff7bc',
-    '#fee391',
-    '#fec44f',
-    '#fe9929',
-    '#ec7014',
-    '#cc4c02',
-    '#993404',
-    '#662506',
-  ],
-  pinkpurple: [
-    '#fff7f3',
-    '#fde0dd',
-    '#fcc5c0',
-    '#fa9fb5',
-    '#f768a1',
-    '#dd3497',
-    '#ae017e',
-    '#7a0177',
-    '#49006a',
-  ],
-  bluegreen: [
-    '#fff7fb',
-    '#ece2f0',
-    '#d0d1e6',
-    '#a6bddb',
-    '#67a9cf',
-    '#3690c0',
-    '#02818a',
-    '#016c59',
-    '#014636',
-  ],
-  orangered: [
-    '#fff7ec',
-    '#fee8c8',
-    '#fdd49e',
-    '#fdbb84',
-    '#fc8d59',
-    '#ef6548',
-    '#d7301f',
-    '#b30000',
-    '#7f0000',
-  ],
-  red: [
-    '#fff5f0',
-    '#fee0d2',
-    '#fcbba1',
-    '#fc9272',
-    '#fb6a4a',
-    '#ef3b2c',
-    '#cb181d',
-    '#a50f15',
-    '#67000d',
-  ],
-  greenblue: [
-    '#f7fcf0',
-    '#e0f3db',
-    '#ccebc5',
-    '#a8ddb5',
-    '#7bccc4',
-    '#4eb3d3',
-    '#2b8cbe',
-    '#0868ac',
-    '#084081',
-  ],
-  yellowpurple: [
-    '#FFF0B0',
-    '#F5CC76',
-    '#EDAE4B',
-    '#E3683C',
-    '#BF2A48',
-    '#6D2059',
-    '#8F0C4B',
-    '#310958',
-    '#0E0943',
-  ],
-  qualitative1: [
-    '#a6cee3',
-    '#1f78b4',
-    '#b2df8a',
-    '#33a02c',
-    '#fb9a99',
-    '#e31a1c',
-    '#6a3d9a',
-    '#cab2d6',
-    '#E31A90',
-    '#15017A',
-    '#C2C0FC',
-  ],
- 
-  qualitative2: [
-    '#7fc97f',
-    '#beaed4',
-    '#ff9',
-    '#386cb0',
-    '#f0027f',
-    '#bf5b17',
-    '#666',
-    '#fedab8',
-  ],
- 
-  qualitative3: [
-    '#1b9e77',
-    '#d95f02',
-    '#7570b3',
-    '#e7298a',
-    '#66a61e',
-    '#e6ab02',
-    '#a6761d',
-    '#666',
-  ],
- 
-  qualitative4: [
-    '#e41a1c',
-    '#377eb8',
-    '#4daf4a',
-    '#984ea3',
-    '#ff7f00',
-    '#ff3',
-    '#a65628',
-    '#f781bf',
-  ],
- 
-  qualitative9: [
-    '#497d0c',
-    '#84BC49',
-    '#88c3ea',
-    '#fcad90',
-    '#f26b4f',
-    '#c31b1f',
-    '#c31b1f',
-  ],
+  yelloworangered: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
+  yelloworangebrown: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+  pinkpurple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
+  bluegreen: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
+  orangered: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
+  red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
+  greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
+  yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
+  qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
 
+  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
 
+  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
 
-  'sequential-blue-2(MPX)':[
-  '#F5FEFF',
-  '#E1FBFF',
-  '#C0F2FD',
-  '#94E2ED',
-  '#5EBAD4',
-  '#3695BE',
-  '#2273A0',
-  '#0E5181',
-  '#093460',
-  ],
+  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
 
-'sequential-orange(MPX)':[
-   '#FFFDF0',
-   '#FFF7DC',
-   '#FFE9C2',
-   '#FFD097',
-   '#F7A866',
-   '#EB7723',
-   '#B95117',
-   '#853209',
-   '#661F00'
-]
+  qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
 
-};
+  'sequential-blue-2(MPX)': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
+
+  'sequential-orange(MPX)': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00']
+}
 
 // * ============= Palettes for Chart project ==========  * //
 
 const colorPalettes2 = {
-  'qualitative-bold': [
-    '#377eb8',
-    '#ff7f00',
-    '#4daf4a',
-    '#984ea3',
-    '#e41a1c',
-    '#ffff33',
-    '#a65628',
-    '#f781bf',
-    '#3399CC',
-  ],
- 
-  'qualitative-soft': [
-    '#A6CEE3',
-    '#1F78B4',
-    '#B2DF8A',
-    '#33A02C',
-    '#FB9A99',
-    '#E31A1C',
-    '#FDBF6F',
-    '#FF7F00',
-    '#ACA9EB',
-  ],
+  'qualitative-bold': ['#377eb8', '#ff7f00', '#4daf4a', '#984ea3', '#e41a1c', '#ffff33', '#a65628', '#f781bf', '#3399CC'],
+
+  'qualitative-soft': ['#A6CEE3', '#1F78B4', '#B2DF8A', '#33A02C', '#FB9A99', '#E31A1C', '#FDBF6F', '#FF7F00', '#ACA9EB'],
+  qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
+
+  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
+
+  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
+
+  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
 
-  'sequential-blue': [
-    '#C6DBEF',
-    '#9ECAE1',
-    '#6BAED6',
-    '#4292C6',
-    '#2171B5',
-    '#084594',
-  ],
-  'sequential-blue-2-(MPX)':[
-    '#D5F6F9',
-    '#99E2ED',
-    '#5FB6D1',
-    '#3189B0',
-    '#116091',
-    '#0A3E72'
-  ],
-  'sequential-orange-(MPX)':[
-    '#FFEFCF',
-    '#FFD49C',
-    '#F7A866',
-    '#EB7723',
-    '#B95117',
-    '#862B0B'
-   ],
-  'sequential-green': [
-    '#C7E9C0',
-    '#A1D99B',
-    '#74C476',
-    '#41AB5D',
-    '#238B45',
-    '#005A32',
-  ]
-};
+  'sequential-blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
+  'sequential-blue-2-(MPX)': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
+  'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
+  'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
+}
 
-export const colorPalettesChart = updatePaletteNames(colorPalettes2)  // adds reverse keyword to eact palette
-const colorPalettes = updatePaletteNames(colorPalettesMap)   // adds reverse keyword to eact palette
-export default colorPalettes;
+export const colorPalettesChart = updatePaletteNames(colorPalettes2) // adds reverse keyword to eact palette
+const colorPalettes = updatePaletteNames(colorPalettesMap) // adds reverse keyword to eact palette
+export default colorPalettes