@cdc/core 4.24.12-2 → 4.25.1

package/components/MediaControls.jsx

@@ -42,13 +42,30 @@ const generateMedia = (state, type, elementToCapture) => {
   // Apparently some packages use state.title where others use state.general.title
   const handleFileName = state => {
     // dashboard titles
-    if (state?.dashboard?.title) return state.dashboard.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.dashboard?.title)
+      return (
+        state.dashboard.title.replace(/\s+/g, '-').toLowerCase() +
+        '-' +
+        date.getDate() +
+        date.getMonth() +
+        date.getFullYear()
+      )
 
     // map titles
-    if (state?.general?.title) return state.general.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.general?.title)
+      return (
+        state.general.title.replace(/\s+/g, '-').toLowerCase() +
+        '-' +
+        date.getDate() +
+        date.getMonth() +
+        date.getFullYear()
+      )
 
     // chart titles
-    if (state?.title) return state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+    if (state?.title)
+      return (
+        state.title.replace(/\s+/g, '-').toLowerCase() + '-' + date.getDate() + date.getMonth() + date.getFullYear()
+      )
 
     return 'no-title'
   }
@@ -59,7 +76,10 @@ const generateMedia = (state, type, elementToCapture) => {
 
   switch (type) {
     case 'image':
-      html2canvas(baseSvg, {ignoreElements: el => el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1}).then(canvas => {
+      html2canvas(baseSvg, {
+        ignoreElements: el =>
+          el.className?.indexOf && el.className.search(/download-buttons|download-links|data-table-container/) !== -1
+      }).then(canvas => {
         saveImageAs(canvas.toDataURL(), filename + '.png')
       })
       return
@@ -98,9 +118,14 @@ const handleTheme = state => {
 
 // Download CSV
 const Button = ({ state, text, type, title, elementToCapture }) => {
-  const buttonClasses = ['btn', 'btn-download', `${handleTheme(state)}`]
+  const buttonClasses = ['btn', 'btn-primary']
   return (
-    <button className={buttonClasses.join(' ')} title={title} onClick={() => generateMedia(state, type, elementToCapture)} style={{ lineHeight: '1.4em' }}>
+    <button
+      className={buttonClasses.join(' ')}
+      title={title}
+      onClick={() => generateMedia(state, type, elementToCapture)}
+      style={{ lineHeight: '1.4em' }}
+    >
       {buttonText[type]}
     </button>
   )
@@ -108,7 +133,7 @@ const Button = ({ state, text, type, title, elementToCapture }) => {
 
 // Link to CSV/JSON data
 const Link = ({ config, dashboardDataConfig }) => {
-  let dataConfig = dashboardDataConfig || config;
+  let dataConfig = dashboardDataConfig || config
   // Handles Maps & Charts
   if (dataConfig.dataFileSourceType === 'url' && dataConfig.dataFileName && config.table.showDownloadUrl) {
     return (
@@ -126,7 +151,6 @@ const Link = ({ config, dashboardDataConfig }) => {
   ) : null
 }
 
-// TODO: convert to standardized COVE section
 const Section = ({ children, classes }) => {
   return (
     <section className={classes.join(' ')}>

package/components/NestedDropdown/NestedDropdown.tsx

@@ -124,25 +124,21 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
 }) => {
   const dropdownId = useId()
 
-  const [userSearchTerm, setUserSearchTerm] = useState('')
-  const [inputValue, setInputValue] = useState('')
+  const [userSearchTerm, setUserSearchTerm] = useState(null)
 
-  const initialInputValue = useMemo(() => {
+  const inputValue = useMemo(() => {
     // value from props
     return activeSubGroup ? `${activeGroup} - ${activeSubGroup}` : ''
-  }, [activeSubGroup])
+  }, [activeGroup, activeSubGroup])
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
-
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
   const chooseSelectedSubGroup = (tierOne: string | number, tierTwo: string | number) => {
     searchInput.current.focus()
-    const selectedItemValue = `${tierOne} - ${tierTwo}`
-    setUserSearchTerm('')
+    setUserSearchTerm(null)
     setIsListOpened(false)
-    setInputValue(selectedItemValue)
     handleSelectedItems([String(tierOne), String(tierTwo)])
   }
 
@@ -220,14 +216,13 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
   }
 
   const filterOptions = useMemo(() => {
-    return filterSearchTerm(userSearchTerm, options)
+    return filterSearchTerm(userSearchTerm || '', options)
   }, [userSearchTerm, options])
 
   const handleSearchTermChange = e => {
     const newSearchTerm = e.target.value
     setIsListOpened(true)
     setUserSearchTerm(newSearchTerm)
-    setInputValue(newSearchTerm)
   }
 
   const handleOnBlur = e => {
@@ -265,7 +260,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             aria-haspopup='true'
             aria-hidden='false'
             tabIndex={0}
-            value={inputValue || initialInputValue}
+            value={userSearchTerm !== null ? userSearchTerm : inputValue}
             onChange={handleSearchTermChange}
             placeholder={loading ? 'Loading...' : '- Select -'}
             disabled={loading || !options.length}
@@ -303,7 +298,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                       chooseSelectedSubGroup(groupValue, subGroupValue)
                     }}
                     userSelectedLabel={activeGroup + activeSubGroup}
-                    userSearchTerm={userSearchTerm}
+                    userSearchTerm={userSearchTerm || ''}
                   />
                 )
               })

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -10,23 +10,31 @@
     list-style: none;
   }
 
+  * {
+    font-family: var(--app-font-secondary) !important;
+    font-size: var(--filter-select-font-size) !important;
+  }
+
   .search-input {
+    color: var(--cool-gray-90);
+    font-weight: 300;
+
     border: none;
     position: relative;
     display: inline-block;
     width: 100%;
     padding: 0;
     &::placeholder {
-      color: var(--darkGray);
+      color: var(--cool-gray-90);
     }
   }
 
   .main-nested-dropdown-container,
   .nested-dropdown-input-container {
-    border: 1px solid var(--lightGray);
+    border: 1px solid var(--cool-gray-10);
     min-width: 200px;
     cursor: pointer;
-    padding: 0.375rem 0.75rem;
+    padding: 0.4rem 0.75rem;
     font-size: 1em;
   }
 
@@ -53,7 +61,6 @@
     border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
-      color: var(--mediumGray);
       position: absolute;
       top: 9px;
       right: 1px;
@@ -63,7 +70,6 @@
     &.disabled {
       background-color: var(--lightestGray);
       & > :is(input) {
-        color: var(--darkGray);
         background-color: var(--lightestGray);
       }
     }

package/components/Table/Table.tsx

@@ -22,7 +22,6 @@ type TableProps = {
   }
   wrapColumns?: boolean
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
-  fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   preliminaryData?: PreliminaryDataItem[]
 }
@@ -39,7 +38,6 @@ const Table = ({
   tableOptions,
   wrapColumns,
   hasRowType,
-  fontSize,
   viewport,
   preliminaryData
 }: TableProps) => {
@@ -71,7 +69,6 @@ const Table = ({
                         childRow={row}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
                       />
                     )
@@ -92,7 +89,6 @@ const Table = ({
                         childRow={childRow}
                         wrapColumns={wrapColumns}
                         cellMinWidth={tableOptions.cellMinWidth}
-                        fontSize={fontSize}
                         viewport={viewport}
                       />
                     )
@@ -110,7 +106,6 @@ const Table = ({
                             isTotal={true}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
                           />
                         )
@@ -125,7 +120,6 @@ const Table = ({
                             childRow={childRowCopy}
                             wrapColumns={wrapColumns}
                             cellMinWidth={tableOptions.cellMinWidth}
-                            fontSize={fontSize}
                             viewport={viewport}
                           />
                         )

package/components/Table/components/Row.tsx

@@ -8,18 +8,15 @@ type RowProps = {
   wrapColumns: boolean
   isTotal?: boolean
   cellMinWidth?: number
-  fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   style?: object
   preliminaryData?: PreliminaryDataItem[]
 }
 
 const Row: FC<RowProps> = props => {
-  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport, preliminaryData } = props
+  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, viewport, preliminaryData } = props
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
-  const fontSizes = { small: 16, medium: 18, large: 20 }
-  const cellFontSize = ['xs', 'xxs'].includes(viewport) ? '12px' : `${fontSizes[fontSize]}px`
 
   return (
     <tr>
@@ -34,7 +31,7 @@ const Row: FC<RowProps> = props => {
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, fontSize: cellFontSize, ...style }}
+            style={{ whiteSpace, minWidth, ...style }}
             isBold={isTotal}
           >
             {child}

package/components/_stories/DataTable.stories.tsx

@@ -45,8 +45,7 @@ export const CityState: Story = {
     tabbingId: '#asdf',
     columns: CityStateExample.columns,
     applyLegendToRow: () => ['#000'],
-    displayGeoName,
-    displayDataAsText: d => d
+    displayGeoName
   }
 }
 

package/components/elements/Button.jsx

@@ -5,25 +5,41 @@ 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'),
     onBlur: () => setButtonState('out')
   }
 
-
   useEffect(() => {
     if ('loader' === role && buttonRef.current) {
       //Create ghost object and text nodes for children
@@ -54,9 +70,8 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
       buttonRef.current.parentNode.removeChild(ghostSpan)
       buttonRef.current.parentNode.removeChild(ghostLoaderSpan)
     }
-    return () => {
-    }
-  }, [ buttonRef, children, loadingText, role ])
+    return () => {}
+  }, [buttonRef, children, loadingText, role])
 
   useEffect(() => {
     //Adjust button styles depending on cursor, focus, and active, states
@@ -64,9 +79,10 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
 
     // If button state is out, check if its 'active'; we want to keep hover styles applied to 'active' buttons
     if (buttonState === 'out')
-      // If button state is out, and not 'active', reset display styles back to default
-      if (!active) setCustomStyles({ ...style })
-  }, [ buttonState, active, style ])
+      if (!active)
+        // If button state is out, and not 'active', reset display styles back to default
+        setCustomStyles({ ...style })
+  }, [buttonState, active, style])
 
   return (
     <button
@@ -82,16 +98,19 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
         <>
           {'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}>
+              <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}>
+                <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='ms-1' size={20} />
               </div>
             </>
           )}
@@ -104,7 +123,7 @@ const Button = ({ style, role, hoverStyle = {}, fluid = false, loading = false,
 
 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/Confirm.tsx

@@ -0,0 +1,45 @@
+import Button from './Button.jsx'
+import React from 'react'
+import { missingRequiredSections } from '../../helpers/missingRequiredSections.js'
+const Confirm = props => {
+  const { updateConfig, config } = props
+  const confirmDone = e => {
+    if (e) {
+      e.preventDefault()
+    }
+
+    let newConfig = { ...config }
+    delete newConfig.newViz
+
+    updateConfig(newConfig)
+  }
+
+  const styles: React.CSSProperties = {
+    position: 'relative',
+    height: '100vh',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridArea: 'content'
+  }
+
+  return (
+    <section className='waiting' style={styles}>
+      <section className='waiting-container'>
+        <h3>Finish Configuring</h3>
+        <p>Set all required options to the left and confirm below to display a preview of the chart.</p>
+        <Button
+          className='btn btn-primary'
+          style={{ margin: '1em auto' }}
+          disabled={missingRequiredSections(config)}
+          onClick={e => confirmDone(e)}
+        >
+          I'm Done
+        </Button>
+      </section>
+    </section>
+  )
+}
+
+export default Confirm

package/components/elements/Error.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+const Error = ({ errorMessage }) => {
+  const styles: React.CSSProperties = {
+    position: 'absolute',
+    background: 'white',
+    zIndex: '999',
+    height: '100vh',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridArea: 'content'
+  }
+  return (
+    <section className='waiting' style={styles}>
+      <section className='waiting-container'>
+        <h3>Error With Configuration</h3>
+        <p>{errorMessage}</p>
+      </section>
+    </section>
+  )
+}
+
+export default Error