@cdc/core 4.22.10 → 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,47 +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,
-        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>
-      }
-
-      <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>
   )
 }
@@ -82,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,9 +9,9 @@ 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 = override ? override?.show : overlay?.show
 
@@ -29,7 +29,7 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
     }, 750)
 
     return () => clearTimeout(timeoutShow)
-  }, [ overlayDisplay ])
+  }, [overlayDisplay])
 
   //Animate Out effect
   useEffect(() => {
@@ -45,7 +45,7 @@ const Overlay = ({ disableBgClose, children, override = null }) => {
     }, 400)
 
     return () => clearTimeout(timeoutHide)
-  }, [ overlayDisplay ])
+  }, [overlayDisplay])
 
   //Error animate effect
   useEffect(() => {
@@ -56,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,28 +4,16 @@ import ReactTooltip from 'react-tooltip'
 const TooltipTarget = () => null
 const TooltipContent = () => null
 
-const Tooltip = ({
-                   position = 'top',
-                   trigger = 'hover focus',
-                   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}>
-      <button className="cove-tooltip--target"
+    <span className='cove-tooltip' style={style} {...attributes}>
+      <button
+        className='cove-tooltip--target'
         data-for={uid}
         data-place={position}
         data-event={trigger}
@@ -35,23 +23,15 @@ const Tooltip = ({
         onClick={e => {
           e.preventDefault()
         }}
-        onMouseEnter={ e => ReactTooltip.show(e.target)}
+        onMouseEnter={e => ReactTooltip.show(e.target)}
         onMouseLeave={e => ReactTooltip.hide(e.target)}
-        onFocus={(e) => ReactTooltip.show(e.target)}
-        onBlur={(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}
       </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"
-      >
+      <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,286 +1,49 @@
 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",
-    "#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",
-  ],
+  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",
-  ],
+  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
 
-  qualitative3: [
-    "#1b9e77",
-    "#d95f02",
-    "#7570b3",
-    "#e7298a",
-    "#66a61e",
-    "#e6ab02",
-    "#a6761d",
-    "#666",
-  ],
+  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
 
-  qualitative4: [
-    "#e41a1c",
-    "#377eb8",
-    "#4daf4a",
-    "#984ea3",
-    "#ff7f00",
-    "#ff3",
-    "#a65628",
-    "#f781bf",
-  ],
+  qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
 
-  qualitative9: [
-    "#497d0c",
-    "#84BC49",
-    "#88c3ea",
-    "#fcad90",
-    "#f26b4f",
-    "#c31b1f",
-    "#c31b1f",
-  ],
+  qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
 
+  'sequential-blue-2(MPX)': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
 
-
-  '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'
-]
-
-};
+  '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-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",
-  ],
+  '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",
-  ],
+  qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
 
-  qualitative3: [
-    "#1b9e77",
-    "#d95f02",
-    "#7570b3",
-    "#e7298a",
-    "#66a61e",
-    "#e6ab02",
-    "#a6761d",
-    "#666",
-  ],
+  qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
 
-  qualitative4: [
-    "#e41a1c",
-    "#377eb8",
-    "#4daf4a",
-    "#984ea3",
-    "#ff7f00",
-    "#ff3",
-    "#a65628",
-    "#f781bf",
-  ],
+  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 const colorPalettesChart = updatePaletteNames(colorPalettes2) // adds reverse keyword to eact palette
+const colorPalettes = updatePaletteNames(colorPalettesMap) // adds reverse keyword to eact palette
 export default colorPalettes