@cdc/core 4.24.12 → 4.25.1

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

package/components/managers/DataDesigner.tsx

@@ -3,7 +3,12 @@ import { useEffect } from 'react'
 import Button from '../elements/Button'
 import Card from '../elements/Card'
 
-import { DATA_TABLE_VERTICAL, DATA_TABLE_HORIZONTAL, DATA_TABLE_SINGLE_ROW, DATA_TABLE_MULTI_ROW } from '../../templates/dataDesignerTables'
+import {
+  DATA_TABLE_VERTICAL,
+  DATA_TABLE_HORIZONTAL,
+  DATA_TABLE_SINGLE_ROW,
+  DATA_TABLE_MULTI_ROW
+} from '../../templates/dataDesignerTables'
 import '../../styles/v2/components/data-designer.scss'
 import { ConfigureData } from '../../types/ConfigureData'
 
@@ -45,7 +50,12 @@ const DataDesigner = (props: DataDesignerProps) => {
             <div className='grid grid-gap-2 mb-4'>
               <div className='column'>
                 <button
-                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
+                  className={
+                    'cove-data-designer__button' +
+                    (configureData.dataDescription && configureData.dataDescription.horizontal === false
+                      ? ' active'
+                      : '')
+                  }
                   onClick={() => {
                     updateDescriptionProp('horizontal', false)
                   }}
@@ -61,7 +71,12 @@ const DataDesigner = (props: DataDesignerProps) => {
               </div>
               <div className='column'>
                 <button
-                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
+                  className={
+                    'cove-data-designer__button' +
+                    (configureData.dataDescription && configureData.dataDescription.horizontal === true
+                      ? ' active'
+                      : '')
+                  }
                   onClick={() => {
                     updateDescriptionProp('horizontal', true)
                   }}
@@ -88,7 +103,7 @@ const DataDesigner = (props: DataDesignerProps) => {
                 <Button
                   style={{ backgroundColor: '#00345d' }}
                   hoverStyle={{ backgroundColor: '#015daa' }}
-                  className='mr-1'
+                  className='me-1'
                   onClick={() => {
                     updateDescriptionProp('series', true)
                   }}
@@ -127,154 +142,194 @@ const DataDesigner = (props: DataDesignerProps) => {
               </select>
             </div>
           )}
-          {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && hasRowSelection && (
-            <>
-              <div className='mb-2'>
-                <div className='mb-1'>Are the series values in your data represented in a single row, or across multiple rows?</div>
-                <div className='grid grid-gap-2 mb-4'>
-                  <div className='column'>
-                    <button
-                      className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === true ? ' active' : '')}
-                      onClick={() => {
-                        updateDescriptionProp('singleRow', true)
-                      }}
-                    >
-                      <Card>
-                        <strong className='cove-heading--3'>Single Row</strong>
-                        <p className='mb-1'>Each row contains the data for an individual series in itself.</p>
-                        {DATA_TABLE_SINGLE_ROW}
-                      </Card>
-                    </button>
+          {configureData.dataDescription.horizontal === false &&
+            configureData.dataDescription.series === true &&
+            hasRowSelection && (
+              <>
+                <div className='mb-2'>
+                  <div className='mb-1'>
+                    Are the series values in your data represented in a single row, or across multiple rows?
                   </div>
-                  <div className='column'>
-                    <button
-                      className={'cove-data-designer__button' + (configureData.dataDescription.singleRow === false ? ' active' : '')}
-                      onClick={() => {
-                        updateDescriptionProp('singleRow', false)
-                      }}
-                    >
-                      <Card>
-                        <strong className='cove-heading--3'>Multiple Rows</strong>
-                        <p className='mb-1'>Each series data is broken out into multiple rows.</p>
-                        {DATA_TABLE_MULTI_ROW}
-                      </Card>
-                    </button>
+                  <div className='grid grid-gap-2 mb-4'>
+                    <div className='column'>
+                      <button
+                        className={
+                          'cove-data-designer__button' +
+                          (configureData.dataDescription.singleRow === true ? ' active' : '')
+                        }
+                        onClick={() => {
+                          updateDescriptionProp('singleRow', true)
+                        }}
+                      >
+                        <Card>
+                          <strong className='cove-heading--3'>Single Row</strong>
+                          <p className='mb-1'>Each row contains the data for an individual series in itself.</p>
+                          {DATA_TABLE_SINGLE_ROW}
+                        </Card>
+                      </button>
+                    </div>
+                    <div className='column'>
+                      <button
+                        className={
+                          'cove-data-designer__button' +
+                          (configureData.dataDescription.singleRow === false ? ' active' : '')
+                        }
+                        onClick={() => {
+                          updateDescriptionProp('singleRow', false)
+                        }}
+                      >
+                        <Card>
+                          <strong className='cove-heading--3'>Multiple Rows</strong>
+                          <p className='mb-1'>Each series data is broken out into multiple rows.</p>
+                          {DATA_TABLE_MULTI_ROW}
+                        </Card>
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-              {configureData.dataDescription.singleRow === false && (
-                <>
-                  <div className='mb-2'>
-                    <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
-                    <select
-                      onChange={e => {
-                        updateDescriptionProp('seriesKey', e.target.value)
-                      }}
-                      defaultValue={configureData.dataDescription.seriesKey}
-                    >
-                      <option value=''>Choose an option</option>
-                      {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>
-                          {value}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                  <div className='mb-2'>
-                    <div className='mb-1'>Which property in the dataset represents the values for the category/date axis or map geography?</div>
-                    <select
-                      onChange={e => {
-                        updateDescriptionProp('xKey', e.target.value)
-                      }}
-                      defaultValue={configureData.dataDescription.xKey}
-                    >
-                      <option value=''>Choose an option</option>
-                      {Object.keys(configureData.data[0]).map((value, index) => (
-                        <option value={value} key={index}>
-                          {value}
-                        </option>
-                      ))}
-                    </select>
-                  </div>
-                  <div className='mb-2'>
-                    <div className='mb-1'>Which properties in the dataset represent the numeric value? (all remaining properties will be treated as filters)</div>
-                    {configureData.dataDescription.valueKeysTallSupport && configureData.dataDescription.valueKeysTallSupport.length > 0 && (
-                      <ul className='value-list'>
-                        {configureData.dataDescription.valueKeysTallSupport.map((valueKey, index) => (
-                          <li key={`value-keys-list-${index}`}>
-                            {valueKey}
-                            <button
-                              onClick={() => {
-                                let newValueKeys = configureData.dataDescription.valueKeysTallSupport
-                                newValueKeys.splice(index, 1)
-                                updateDescriptionProp('valueKeysTallSupport', newValueKeys)
-                              }}
-                            >
-                              X
-                            </button>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    <select
-                      onChange={e => {
-                        if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp('valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
-                        }
-                      }}
-                    >
-                      <option value=''>Choose an option</option>
-                      {Object.keys(configureData.data[0])
-                        .filter(value => !configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(value) === -1)
-                        .map((value, index) => (
-                          <option value={value} key={`value-keys-option-${index}`}>
+                {configureData.dataDescription.singleRow === false && (
+                  <>
+                    <div className='mb-2'>
+                      <div className='mb-1'>
+                        Which property in the dataset represents which series the row is describing?
+                      </div>
+                      <select
+                        onChange={e => {
+                          updateDescriptionProp('seriesKey', e.target.value)
+                        }}
+                        defaultValue={configureData.dataDescription.seriesKey}
+                      >
+                        <option value=''>Choose an option</option>
+                        {Object.keys(configureData.data[0]).map((value, index) => (
+                          <option value={value} key={index}>
                             {value}
                           </option>
                         ))}
-                    </select>
-                  </div>
-                  <div className='mb-2'>
-                    <div className='mb-1'>(Optional) Which properties in the dataset should be ignored? (will not be used or treated as filters)</div>
-                    {configureData.dataDescription.ignoredKeys && configureData.dataDescription.ignoredKeys.length > 0 && (
-                      <ul className='value-list'>
-                        {configureData.dataDescription.ignoredKeys.map((ignoredKey, index) => (
-                          <li key={`value-keys-list-${index}`}>
-                            {ignoredKey}
-                            <button
-                              onClick={() => {
-                                let newIgnoredKeys = configureData.dataDescription.ignoredKeys
-                                newIgnoredKeys.splice(index, 1)
-                                updateDescriptionProp('ignoredKeys', newIgnoredKeys)
-                              }}
-                            >
-                              X
-                            </button>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                    <select
-                      onChange={e => {
-                        if (e.target.value) {
-                          updateDescriptionProp('ignoredKeys', [...(configureData.dataDescription.ignoredKeys || []), e.target.value])
-                        }
-                        e.target.value = ''
-                      }}
-                    >
-                      <option value=''>Choose an option</option>
-                      {Object.keys(configureData.data[0])
-                        .filter(value => !configureData.dataDescription.ignoredKeys || configureData.dataDescription.ignoredKeys.indexOf(value) === -1)
-                        .map((value, index) => (
-                          <option value={value} key={`ignored-keys-option-${index}`}>
+                      </select>
+                    </div>
+                    <div className='mb-2'>
+                      <div className='mb-1'>
+                        Which property in the dataset represents the values for the category/date axis or map geography?
+                      </div>
+                      <select
+                        onChange={e => {
+                          updateDescriptionProp('xKey', e.target.value)
+                        }}
+                        defaultValue={configureData.dataDescription.xKey}
+                      >
+                        <option value=''>Choose an option</option>
+                        {Object.keys(configureData.data[0]).map((value, index) => (
+                          <option value={value} key={index}>
                             {value}
                           </option>
                         ))}
-                    </select>
-                  </div>
-                </>
-              )}
-            </>
-          )}
+                      </select>
+                    </div>
+                    <div className='mb-2'>
+                      <div className='mb-1'>
+                        Which properties in the dataset represent the numeric value? (all remaining properties will be
+                        treated as filters)
+                      </div>
+                      {configureData.dataDescription.valueKeysTallSupport &&
+                        configureData.dataDescription.valueKeysTallSupport.length > 0 && (
+                          <ul className='value-list'>
+                            {configureData.dataDescription.valueKeysTallSupport.map((valueKey, index) => (
+                              <li key={`value-keys-list-${index}`}>
+                                {valueKey}
+                                <button
+                                  onClick={() => {
+                                    let newValueKeys = configureData.dataDescription.valueKeysTallSupport
+                                    newValueKeys.splice(index, 1)
+                                    updateDescriptionProp('valueKeysTallSupport', newValueKeys)
+                                  }}
+                                >
+                                  X
+                                </button>
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      <select
+                        onChange={e => {
+                          if (
+                            e.target.value &&
+                            (!configureData.dataDescription.valueKeysTallSupport ||
+                              configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)
+                          ) {
+                            updateDescriptionProp('valueKeysTallSupport', [
+                              ...(configureData.dataDescription.valueKeysTallSupport || []),
+                              e.target.value
+                            ])
+                          }
+                        }}
+                      >
+                        <option value=''>Choose an option</option>
+                        {Object.keys(configureData.data[0])
+                          .filter(
+                            value =>
+                              !configureData.dataDescription.valueKeysTallSupport ||
+                              configureData.dataDescription.valueKeysTallSupport.indexOf(value) === -1
+                          )
+                          .map((value, index) => (
+                            <option value={value} key={`value-keys-option-${index}`}>
+                              {value}
+                            </option>
+                          ))}
+                      </select>
+                    </div>
+                    <div className='mb-2'>
+                      <div className='mb-1'>
+                        (Optional) Which properties in the dataset should be ignored? (will not be used or treated as
+                        filters)
+                      </div>
+                      {configureData.dataDescription.ignoredKeys &&
+                        configureData.dataDescription.ignoredKeys.length > 0 && (
+                          <ul className='value-list'>
+                            {configureData.dataDescription.ignoredKeys.map((ignoredKey, index) => (
+                              <li key={`value-keys-list-${index}`}>
+                                {ignoredKey}
+                                <button
+                                  onClick={() => {
+                                    let newIgnoredKeys = configureData.dataDescription.ignoredKeys
+                                    newIgnoredKeys.splice(index, 1)
+                                    updateDescriptionProp('ignoredKeys', newIgnoredKeys)
+                                  }}
+                                >
+                                  X
+                                </button>
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      <select
+                        onChange={e => {
+                          if (e.target.value) {
+                            updateDescriptionProp('ignoredKeys', [
+                              ...(configureData.dataDescription.ignoredKeys || []),
+                              e.target.value
+                            ])
+                          }
+                          e.target.value = ''
+                        }}
+                      >
+                        <option value=''>Choose an option</option>
+                        {Object.keys(configureData.data[0])
+                          .filter(
+                            value =>
+                              !configureData.dataDescription.ignoredKeys ||
+                              configureData.dataDescription.ignoredKeys.indexOf(value) === -1
+                          )
+                          .map((value, index) => (
+                            <option value={value} key={`ignored-keys-option-${index}`}>
+                              {value}
+                            </option>
+                          ))}
+                      </select>
+                    </div>
+                  </>
+                )}
+              </>
+            )}
 
           {config?.visualizationType === 'Forest Plot' && (
             <>

package/components/ui/Title/Title.scss

@@ -1,12 +1,20 @@
-.cove-component__header {
+.cdc-open-viz-module header.cove-component__header {
   position: relative;
-  padding: 0.6em 0.8em;
+  padding: 1rem;
   margin: 0;
   color: var(--white);
-  font-size: 1.1em;
+
+  & > sup {
+    font-size: var(--superTitle-font-size);
+    font-family: var(--app-font-secondary);
+    font-weight: 500;
+    text-transform: uppercase;
+    top: 0;
+  }
 
   h2 {
-    font-size: 1.1rem;
+    font-size: var(--title-font-size);
+    font-family: var(--app-font-secondary);
     color: var(--white);
     margin: 0;
   }
@@ -27,7 +35,6 @@
   }
 
   &:not(:empty) {
-    padding: 0.6em 0.8em;
     border-bottom-width: 4px;
     border-bottom-style: solid;
   }

package/components/ui/Title/index.tsx

@@ -16,7 +16,7 @@ const Title = (props: HeaderProps) => {
   const { isDashboard, title, superTitle, classes = [], showTitle = true, ariaLevel = 2 } = props
 
   // standard classes every vis should have
-  const updatedClasses = ['cove-component__header', 'component__header', ...classes]
+  const updatedClasses = ['cove-component__header', 'component__header', 'mb-3', ...classes]
 
   return (
     title &&