@cdc/core 4.24.12 → 4.25.2-25

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 &&