@cdc/core 4.23.10 → 4.24.1

package/components/_stories/_mocks/row_type.json

@@ -0,0 +1,42 @@
+[
+  {
+    "type": "row_group",
+    "overall": "",
+    "male": "",
+    "female": "",
+    "row_type": "row_group",
+    "nullColumn": null
+  },
+  {
+    "type": "row_group_total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "row_group_total",
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "regular",
+    "overall": "50",
+    "male": "25",
+    "female": "25",
+    "row_type": null,
+    "nullColumn": null
+  },
+  {
+    "type": "total",
+    "overall": "100",
+    "male": "50",
+    "female": "50",
+    "row_type": "total",
+    "nullColumn": null
+  }
+]

package/components/_stories/styles.scss

@@ -0,0 +1,9 @@
+@import '../../styles/_variables';
+@import '../../styles/_mixins';
+@import '../../styles/_data-table';
+@import '../../styles/_global.scss';
+
+.visually-hidden {
+  position: fixed;
+  left: -10000px;
+}

package/components/inputs/{InputSelect.jsx → InputSelect.tsx}

@@ -1,9 +1,19 @@
-import React, { memo } from 'react'
-
 import '../../styles/v2/components/input/index.scss'
 
-const InputSelect = memo(({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }) => {
-  let optionsJsx = ''
+interface InputProps {
+  label?
+  value?
+  options: string[] | { [key: string]: string }
+  fieldName
+  section?
+  subsection?
+  required?
+  updateField
+  initial?
+}
+
+const InputSelect = ({ label, value, options, fieldName, section = null, subsection = null, required = false, updateField, initial: initialValue, ...attributes }: InputProps) => {
+  let optionsJsx = []
 
   if (Array.isArray(options)) {
     //Handle basic array
@@ -48,6 +58,6 @@ const InputSelect = memo(({ label, value, options, fieldName, section = null, su
       </select>
     </label>
   )
-})
+}
 
 export default InputSelect

package/components/managers/{DataDesigner.jsx → DataDesigner.tsx}

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useEffect } from 'react'
 
 import Button from '../elements/Button'
 import Card from '../elements/Card'
@@ -6,77 +6,109 @@ import Card from '../elements/Card'
 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'
 
-const DataDesigner = props => {
+type DataDesignerProps = {
+  configureData?: any // todo: add description here when understood better
+  updateDescriptionProp?: (vizKey: string, dataKey: string, propName: string, value: any) => void // used to update data description fields
+  visualizationKey?: any // todo: add description here when understood better
+  dataKey?: string // appears to be the data file name, ie valid-data.csv
+  config?: any // can be one of many different types of chart configs that aren't fully established yet
+  setConfig?: (newConfig: any) => void
+}
+
+const DataDesigner = (props: DataDesignerProps) => {
   const { configureData, updateDescriptionProp, visualizationKey, dataKey, config, setConfig } = props
+  const hasDataOrientation = config?.visualizationType !== 'Forest Plot'
+  const hasMultipleSeries = config?.visualizationType !== 'Forest Plot'
+  const hasRowSelection = config?.visualizationType !== 'Forest Plot'
+
+  useEffect(() => {
+    if (config?.visualizationType === 'Forest Plot') {
+      // needed to properly set data up?
+      setConfig({
+        ...config,
+        dataDescription: {
+          series: true,
+          horizontal: false,
+          singleRow: true
+        }
+      })
+    }
+  }, [])
 
   return (
     <div className='cove-data-designer__container'>
       <div className='mb-2'>
         <div className='cove-heading--3 fw-bold mb-1'>Describe Data</div>
-        <div className='cove-heading--3 fw-normal mb-1'>Data Orientation</div>
-        <div className='grid grid-gap-2 mb-4'>
-          <div className='column'>
-            <button
-              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
-              onClick={() => {
-                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
-              }}
-            >
-              <Card>
-                <strong className='cove-heading--3'>Vertical</strong>
-                <p className='mb-1'>
-                  Values for map geography or chart date/category axis are contained in a single <em>column</em>.
-                </p>
-                {DATA_TABLE_VERTICAL}
-              </Card>
-            </button>
-          </div>
-          <div className='column'>
-            <button
-              className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
-              onClick={() => {
-                updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
-              }}
-            >
-              <Card>
-                <strong className='cove-heading--3'>Horizontal</strong>
-                <p className='mb-1'>
-                  Values for map geography or chart date/category axis are contained in a single <em>row</em>
-                </p>
-                {DATA_TABLE_HORIZONTAL}
-              </Card>
-            </button>
-          </div>
-        </div>
+        {hasDataOrientation && (
+          <>
+            <div className='cove-heading--3 fw-normal mb-1'>Data Orientation</div>
+            <div className='grid grid-gap-2 mb-4'>
+              <div className='column'>
+                <button
+                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === false ? ' active' : '')}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', false)
+                  }}
+                >
+                  <Card>
+                    <strong className='cove-heading--3'>Vertical</strong>
+                    <p className='mb-1'>
+                      Values for map geography or chart date/category axis are contained in a single <em>column</em>.
+                    </p>
+                    {DATA_TABLE_VERTICAL}
+                  </Card>
+                </button>
+              </div>
+              <div className='column'>
+                <button
+                  className={'cove-data-designer__button' + (configureData.dataDescription && configureData.dataDescription.horizontal === true ? ' active' : '')}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'horizontal', true)
+                  }}
+                >
+                  <Card>
+                    <strong className='cove-heading--3'>Horizontal</strong>
+                    <p className='mb-1'>
+                      Values for map geography or chart date/category axis are contained in a single <em>row</em>
+                    </p>
+                    {DATA_TABLE_HORIZONTAL}
+                  </Card>
+                </button>
+              </div>
+            </div>
+          </>
+        )}
       </div>
       {configureData.dataDescription && (
         <>
-          <div className='mb-2'>
-            <div className='mb-1'>Are there multiple series represented in your data?</div>
-            <div>
-              <Button
-                style={{ backgroundColor: '#00345d' }}
-                hoverStyle={{ backgroundColor: '#015daa' }}
-                className='mr-1'
-                onClick={() => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'series', true)
-                }}
-                active={configureData.dataDescription.series === true}
-              >
-                Yes
-              </Button>
-              <Button
-                style={{ backgroundColor: '#00345d' }}
-                hoverStyle={{ backgroundColor: '#015daa' }}
-                onClick={() => {
-                  updateDescriptionProp(visualizationKey, dataKey, 'series', false)
-                }}
-                active={configureData.dataDescription.series === false}
-              >
-                No
-              </Button>
+          {hasMultipleSeries && (
+            <div className='mb-2'>
+              <div className='mb-1'>Are there multiple series represented in your data?</div>
+              <div>
+                <Button
+                  style={{ backgroundColor: '#00345d' }}
+                  hoverStyle={{ backgroundColor: '#015daa' }}
+                  className='mr-1'
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'series', true)
+                  }}
+                  active={configureData.dataDescription.series === true}
+                >
+                  Yes
+                </Button>
+                <Button
+                  style={{ backgroundColor: '#00345d' }}
+                  hoverStyle={{ backgroundColor: '#015daa' }}
+                  onClick={() => {
+                    updateDescriptionProp(visualizationKey, dataKey, 'series', false)
+                  }}
+                  active={configureData.dataDescription.series === false}
+                >
+                  No
+                </Button>
+              </div>
             </div>
-          </div>
+          )}
           {configureData.dataDescription.horizontal === true && configureData.dataDescription.series === true && (
             <div className='mb-2'>
               <div className='mb-1'>Which property in the dataset represents which series the row is describing?</div>
@@ -95,7 +127,7 @@ const DataDesigner = props => {
               </select>
             </div>
           )}
-          {configureData.dataDescription.horizontal === false && configureData.dataDescription.series === true && (
+          {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>
@@ -166,16 +198,16 @@ const DataDesigner = props => {
                   </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.valueKeys && configureData.dataDescription.valueKeys.length > 0 && (
+                    {configureData.dataDescription.valueKeysTallSupport && configureData.dataDescription.valueKeysTallSupport.length > 0 && (
                       <ul className='value-list'>
-                        {configureData.dataDescription.valueKeys.map((valueKey, index) => (
+                        {configureData.dataDescription.valueKeysTallSupport.map((valueKey, index) => (
                           <li key={`value-keys-list-${index}`}>
                             {valueKey}
                             <button
                               onClick={() => {
-                                let newValueKeys = configureData.dataDescription.valueKeys
+                                let newValueKeys = configureData.dataDescription.valueKeysTallSupport
                                 newValueKeys.splice(index, 1)
-                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', newValueKeys)
+                                updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', newValueKeys)
                               }}
                             >
                               X
@@ -186,14 +218,14 @@ const DataDesigner = props => {
                     )}
                     <select
                       onChange={e => {
-                        if (e.target.value && (!configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(e.target.value) === -1)) {
-                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeys', [...(configureData.dataDescription.valueKeys || []), e.target.value])
+                        if (e.target.value && (!configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(e.target.value) === -1)) {
+                          updateDescriptionProp(visualizationKey, dataKey, 'valueKeysTallSupport', [...(configureData.dataDescription.valueKeysTallSupport || []), e.target.value])
                         }
                       }}
                     >
                       <option value=''>Choose an option</option>
                       {Object.keys(configureData.data[0])
-                        .filter(value => !configureData.dataDescription.valueKeys || configureData.dataDescription.valueKeys.indexOf(value) === -1)
+                        .filter(value => !configureData.dataDescription.valueKeysTallSupport || configureData.dataDescription.valueKeysTallSupport.indexOf(value) === -1)
                         .map((value, index) => (
                           <option value={value} key={`value-keys-option-${index}`}>
                             {value}
@@ -247,7 +279,7 @@ const DataDesigner = props => {
           {config?.visualizationType === 'Forest Plot' && (
             <>
               <div className='mb-2'>
-                <div className='mb-1'>Which column represents the date/category column?</div>
+                <div className='mb-1'>Which column represents the Study ID?</div>
                 <select
                   onChange={e => {
                     setConfig({
@@ -337,29 +369,6 @@ const DataDesigner = props => {
                   ))}
                 </select>
               </div>
-
-              <div className='mb-2'>
-                <div className='mb-1'>Which shape do you want to use in your forest plot?</div>
-                <select
-                  onChange={e => {
-                    setConfig({
-                      ...config,
-                      forestPlot: {
-                        ...config.forestPlot,
-                        shape: e.target.value
-                      }
-                    })
-                  }}
-                  defaultValue={'Select'}
-                >
-                  <option value=''>Choose an option</option>
-                  {['text', 'circle', 'square', 'diamond'].map((value, index) => (
-                    <option value={value} key={index}>
-                      {value}
-                    </option>
-                  ))}
-                </select>
-              </div>
             </>
           )}
         </>

package/components/ui/{Icon.jsx → Icon.tsx}

@@ -69,17 +69,17 @@ const iconHash = {
 
 export const ICON_TYPES = Object.keys(iconHash)
 
-const Icon = ({ display = '', base, alt = '', size, color, style, ...attributes }) => {
+const Icon = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
   delete filteredAttrs.className
 
   const styles = {
-    ...style,
     color: color ? color : null,
     width: size ? size + 'px' : null,
-    cursor: display === 'move' ? 'move' : 'default'
+    cursor: display === 'move' ? 'move' : 'default',
+    ...style
   }
 
   return (

package/components/ui/Title/Title.scss

@@ -0,0 +1,95 @@
+.cove-component__header {
+  position: relative;
+  padding: 0.6em 0.8em;
+  margin: 0;
+  color: #fff;
+  font-size: 1.1em;
+
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  &.mb-0 {
+    margin-bottom: 0 !important;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  &:not(:empty) {
+    padding: 0.6em 0.8em;
+    border-bottom-width: 4px;
+    border-bottom-style: solid;
+  }
+
+  &.bite-header {
+    margin-bottom: 0 !important;
+  }
+
+  // THEMES
+  &.theme-purple {
+    background: #712177;
+    border-bottom-color: #b890bb;
+  }
+  &.theme-brown {
+    background: #705043;
+    border-bottom-color: #ad907b;
+  }
+  &.theme-teal {
+    background: #00695c;
+    border-bottom-color: #4ebaaa;
+  }
+  &.theme-pink {
+    background: #af4448;
+    border-bottom-color: #e57373;
+  }
+  &.theme-orange {
+    background: #bb4d00;
+    border-bottom-color: #ffad42;
+  }
+  &.theme-slate {
+    background: #29434e;
+    border-bottom-color: #7e9ba5;
+  }
+  &.theme-indigo {
+    background: #26418f;
+    border-bottom-color: #92a6dd;
+  }
+  &.theme-cyan {
+    background: #007b91;
+    border-bottom-color: #65b0bd;
+  }
+  &.theme-green {
+    background: #4b830d;
+    border-bottom-color: #84bc49;
+  }
+  &.theme-amber {
+    background: #fbab18;
+    border-bottom-color: #ffd54f;
+  }
+  &.theme-blue {
+    background: #005eaa;
+    border-bottom-color: #88c3ea;
+  }
+
+  &.mb-0 {
+    margin-bottom: 0 !important;
+  }
+}
+
+// add additional space below title if needed
+.map-title.cove-component__header,
+.type-chart .cove-component__header {
+  &:not(:empty) {
+    margin: 0 0 1rem 0 !important;
+  }
+}
+
+// fix sparkline bottom margin gap
+.type-sparkline.type-chart .cove-component__header {
+  margin: 0px !important;
+}

package/components/ui/Title/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import parse from 'html-react-parser'
+import './Title.scss'
+
+type HeaderProps = {
+  title?: string
+  isDashboard?: boolean
+  superTitle?: string
+  classes?: string[]
+  style?: React.CSSProperties
+  showTitle?: boolean
+  ariaLevel?: number
+}
+
+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]
+
+  return (
+    title &&
+    showTitle && (
+      <header className={updatedClasses.join(' ')} aria-hidden='true' style={props.style} aria-level={ariaLevel}>
+        {superTitle && <sup>{parse(superTitle)}</sup>}
+        <div>
+          {parse(title)} {isDashboard}
+        </div>
+      </header>
+    )
+  )
+}
+
+export default Title

package/components/ui/_stories/Title.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Title from '../Title'
+
+const meta: Meta = {
+  title: 'Components/Atoms/Title',
+  component: Title
+}
+
+type Story = StoryObj
+
+export const Primary: Story = {
+  args: {
+    title: 'My Title',
+    superTitle: 'My super title',
+    isDashboard: false,
+    classes: ['theme-blue']
+  }
+}
+
+export default meta