@cdc/core 4.24.3 → 4.24.4

package/assets/icon-command.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M404.83356,297.97872H354.67715V214.177h50.15641a107.08854,107.08854,0,1,0,0-214.177C345.64284,0,297.51145,47.97571,297.82294,107.01074v50.46778H214.33287V107.01074A107.09452,107.09452,0,0,0,107.32225,0C47.97572,0,0,47.97571,0,107.01074c0,59.3464,48.28721,107.6336,107.32225,107.16629h50.15628v83.80169H107.32225C47.97572,297.97872,0,345.79862,0,404.83352a107.16644,107.16644,0,1,0,214.33287,0V354.83291h83.49007v50.00061a107.08879,107.08879,0,1,0,107.01062-106.8548ZM354.67715,106.85493a50.2348,50.2348,0,1,1,50.0006,50.46791h-50.0006ZM157.47853,404.83352a50.2348,50.2348,0,1,1-50.0006-50.00061h50.0006Zm0-247.51068h-50.0006a50.2348,50.2348,0,1,1,50.0006-50.46791ZM297.97862,297.97872H214.33287V214.33285h83.64575Zm106.69913,157.3227a50.15888,50.15888,0,0,1-50.0006-50.4679V354.83291h50.0006a50.2348,50.2348,0,1,1,0,100.46851Z"/>
+</svg>

package/assets/icon-rotate-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" focusable="false" role="img" fill="currentColor">
+    <path d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"/>
+</svg>

package/components/AdvancedEditor.jsx

@@ -51,6 +51,15 @@ export const AdvancedEditor = ({ loadConfig, state, convertStateToConfig }) => {
             <p className='pb-2'>
               This tool displays the actual <acronym title='JavaScript Object Notation'>JSON</acronym> configuration that is generated by this editor and allows you to edit properties directly and apply them.
             </p>
+            <button
+              className='btn'
+              onClick={() => {
+                navigator.clipboard.writeText(configTextboxValue)
+                alert('Copied!')
+              }}
+            >
+              Copy to Clipboard
+            </button>
             <textarea value={configTextboxValue} onChange={event => setConfigTextbox(event.target.value)} />
             <button className='btn full-width' onClick={() => loadConfig(JSON.parse(configTextboxValue))}>
               Apply

package/components/DataTable/DataTable.tsx

@@ -44,7 +44,7 @@ export type DataTableProps = {
   showDownloadButton?: boolean
   tabbingId: string
   tableTitle: string
-  viewport: string
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
   vizTitle?: string
   // determines if columns should be wrapped in the table
   wrapColumns?: boolean
@@ -185,22 +185,25 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
         <section id={tabbingId.replace('#', '')} className={`data-table-container ${viewport}`} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
-          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
+          <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} fontSize={config.fontSize} viewport={viewport} />
           <div className='table-container' style={limitHeight}>
             <Table
+              viewport={viewport}
               wrapColumns={wrapColumns}
-              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType })}
+              childrenMatrix={config.type === 'map' ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData: _runtimeData, viewport }) : chartCellMatrix({ rows, ...props, runtimeData: _runtimeData, isVertical, sortBy, hasRowType, viewport })}
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
               headContent={config.type === 'map' ? <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} /> : <ChartHeader data={_runtimeData} {...props} hasRowType={hasRowType} isVertical={isVertical} sortBy={sortBy} setSortBy={setSortBy} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}${isVertical ? '' : ' horizontal'}`, 'aria-live': 'assertive', 'aria-rowcount': config?.data?.length ? config.data.length : -1, hidden: !expanded }}
+              fontSize={config.fontSize}
             />
 
             {/* REGION Data Table */}
             {noRelativeRegions && config.regions && config.regions.length > 0 && config.visualizationType !== 'Box Plot' && (
               <Table
+                viewport={viewport}
                 wrapColumns={wrapColumns}
                 childrenMatrix={regionCellMatrix({ config })}
                 tableName={config.visualizationType}
@@ -213,6 +216,7 @@ const DataTable = (props: DataTableProps) => {
                   </tr>
                 }
                 tableOptions={{ className: 'region-table data-table' }}
+                fontSize={config.fontSize}
               />
             )}
           </div>
@@ -231,6 +235,7 @@ const DataTable = (props: DataTableProps) => {
           <ExpandCollapse expanded={expanded} setExpanded={setExpanded} tableTitle={tableTitle} />
           <div className='table-container' style={limitHeight}>
             <Table
+              viewport={viewport}
               wrapColumns={wrapColumns}
               childrenMatrix={boxplotCellMatrix({ rows: tableData, config })}
               tableName={config.visualizationType}
@@ -238,6 +243,7 @@ const DataTable = (props: DataTableProps) => {
               stickyHeader
               headContent={<BoxplotHeader categories={config.boxplot.categories} />}
               tableOptions={{ className: `${expanded ? 'data-table' : 'data-table cdcdataviz-sr-only'}`, 'aria-live': 'assertive', 'aria-rowcount': 11, hidden: !expanded }}
+              fontSize={config.fontSize}
             />
           </div>
         </section>

package/components/DataTable/components/ExpandCollapse.tsx

@@ -1,21 +1,27 @@
 import Icon from '../../ui/Icon'
 
-const ExpandCollapse = ({ expanded, setExpanded, tableTitle }) => (
-  <div
-    className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
-    onClick={() => {
-      setExpanded(!expanded)
-    }}
-    tabIndex={0}
-    onKeyDown={e => {
-      if (e.keyCode === 13) {
+const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
+  const fontSizes = { small: 16, medium: 18, large: 20 }
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
+  return (
+    <div
+      style={{ fontSize: titleFontSize }}
+      role='button'
+      className={expanded ? 'data-table-heading' : 'collapsed data-table-heading'}
+      onClick={() => {
         setExpanded(!expanded)
-      }
-    }}
-  >
-    <Icon display={expanded ? 'minus' : 'plus'} base />
-    {tableTitle}
-  </div>
-)
+      }}
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.keyCode === 13) {
+          setExpanded(!expanded)
+        }
+      }}
+    >
+      <Icon display={expanded ? 'minus' : 'plus'} base />
+      {tableTitle}
+    </div>
+  )
+}
 
 export default ExpandCollapse

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -15,7 +15,7 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, groupBy, hasRowType, viewport }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
   const dataSeriesColumnsSorted = () => {
@@ -79,7 +79,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
         config.visualizationType !== 'Pie'
           ? [
               <>
-                {colorScale && colorScale(seriesName) && <LegendCircle fill={colorScale(seriesName)} />}
+                {colorScale && colorScale(seriesName) && <LegendCircle viewport={viewport} fill={colorScale(seriesName)} />}
                 {seriesName}
               </>
             ]

package/components/DataTable/helpers/mapCellMatrix.tsx

@@ -7,7 +7,7 @@ type MapRowsProps = DataTableProps & {
   rows: string[]
 }
 
-const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode }: MapRowsProps): ReactNode[][] => {
+const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, displayGeoName, formatLegendLocation, displayDataAsText, navigationHandler, setFilteredCountryCode, viewport }: MapRowsProps): ReactNode[][] => {
   return rows.map(row =>
     Object.keys(columns)
       .filter(column => columns[column].dataTable === true && columns[column].name)
@@ -31,7 +31,7 @@ const mapCellArray = ({ rows, columns, runtimeData, config, applyLegendToRow, di
           }
           cellValue = (
             <div className='col-12'>
-              <LegendCircle fill={legendColor[0]} />
+              <LegendCircle viewport={viewport} fill={legendColor[0]} />
               <CellAnchor markup={labelValue} row={rowObj} columns={columns} navigationHandler={navigationHandler} mapZoomHandler={mapZoomHandler} />
             </div>
           )

package/components/DataTable/types/TableConfig.ts

@@ -24,4 +24,5 @@ export type TableConfig = {
   dataFormat?: Object
   runtime?: Runtime
   data: Object[]
+  fontSize: 'small' | 'medium' | 'large'
 }

package/components/EditorPanel/ColumnsEditor.tsx

@@ -31,9 +31,10 @@ const ColumnsEditor: React.FC<ColumnsEditorProps> = ({ config, updateField, dele
   // just adds a new column but not set to any data yet
   const addAdditionalColumn = number => {
     const columnKey = `additionalColumn${number}`
+    const showInViz = config.type === 'table'
     const newColumn: Column = {
       label: 'New Column',
-      dataTable: false,
+      dataTable: showInViz,
       tooltips: false,
       prefix: '',
       suffix: '',

package/components/EditorPanel/DataTableEditor.tsx

@@ -75,7 +75,23 @@ const DataTable: React.FC<DataTableProps> = ({ config, updateField, isDashboard,
           }
         />
       )}
-      <TextField value={config.table.indexLabel} section='table' fieldName='indexLabel' label='Index Column Header' updateField={updateField} />
+      <TextField
+        value={config.table.indexLabel}
+        section='table'
+        fieldName='indexLabel'
+        label='Index Column Header'
+        updateField={updateField}
+        tooltip={
+          <Tooltip style={{ textTransform: 'none' }}>
+            <Tooltip.Target>
+              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+            </Tooltip.Target>
+            <Tooltip.Content>
+              <p>To comply with 508 standards, if the first column in the data table has no header, enter a brief one here.</p>
+            </Tooltip.Content>
+          </Tooltip>
+        }
+      />
       <TextField
         value={config.table.caption}
         updateField={updateField}

package/components/Filters.jsx

@@ -239,16 +239,17 @@ const Filters = props => {
   const Filters = props => props.children
 
   const filterSectionClassList = ['filters-section', type === 'map' ? general.headerColor : visualizationConfig?.visualizationType === 'Spark Line' ? null : theme]
-
   // Exterior Section Wrapper
   Filters.Section = props => {
     return (
-      <section className={filterSectionClassList.join(' ')}>
-        <p className='filters-section__intro-text'>
-          {filterConstants.introText} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
-        </p>
-        <div className='filters-section__wrapper'>{props.children}</div>
-      </section>
+      visualizationConfig?.filters && (
+        <section className={filterSectionClassList.join(' ')}>
+          <p className='filters-section__intro-text'>
+            {filters?.some(f => f.active) ? filterConstants.introText : ''} {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
+          </p>
+          <div className='filters-section__wrapper'>{props.children}</div>
+        </section>
+      )
     )
   }
 

package/components/Layout/components/Responsive.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import '../styles/editor-utils.scss'
+import '../styles/editor.scss'
+
+import Icon from '../../ui/Icon'
+
+const breakpoints = [
+  '360', // xxs (mobile) 0 - 360
+  '480', // xs
+  '768', // sm
+  '960', // md
+  '1170', // lg
+  '1280' // xl
+]
+
+const os = navigator.userAgent.indexOf('Win') !== -1 ? 'Win' : navigator.userAgent.indexOf('Mac') !== -1 ? 'MacOS' : null
+
+const Responsive = ({ children, isEditor }) => {
+  const [displayPanel, setDisplayPanel] = useState(false)
+  const [displayGrid, setDisplayGrid] = useState(false)
+  const [viewportPreview, setViewportPreview] = useState(null)
+  const [rotateAnimation, setRotateAnimation] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [previewDimensions, setPreviewDimensions] = useState<{ width: number; height: number }>(null)
+
+  const resetIcon = useRef(null)
+  const editorPanelRef = useRef(null)
+  const componentContainerRef = useRef(null)
+
+  const viewportPreviewController = useCallback(
+    breakpoint => {
+      return setViewportPreview(prevState => (prevState !== breakpoint ? breakpoint : null))
+    },
+    [viewportPreview]
+  )
+
+  const onKeypress = key => {
+    if (key.code === 'KeyL' && key.ctrlKey) setDisplayPanel(display => !display)
+    const viewportCommandKey = os === 'MacOS' ? key.metaKey : key.altKey
+    if (viewportCommandKey) {
+      let keyIndex = key.key
+
+      // Validates that the hotkey pressed is a number, and that
+      // the number is within the range of the provided breakpoint list range.
+      if (!isNaN(keyIndex)) {
+        if (keyIndex <= breakpoints.length) {
+          key.preventDefault()
+          viewportPreviewController(breakpoints[keyIndex - 1])
+        }
+      }
+    }
+
+    if (!viewportCommandKey) {
+      if (key.code === 'KeyG') setDisplayGrid(display => !display)
+      if (key.code === 'KeyR') resetPreview()
+    }
+  }
+
+  // Set and clean up the event listener for the hotkeys
+  useEffect(() => {
+    document.addEventListener('keydown', onKeypress)
+    return () => document.removeEventListener('keydown', onKeypress)
+  }, [])
+
+  //Reset Viewport Preview
+  const resetPreview = useCallback(() => {
+    if (!rotateAnimation && resetIcon.current) {
+      setViewportPreview(null)
+      setRotateAnimation(true)
+      setDisplayGrid(false)
+      resetIcon.current.style.transition = 'transform 800ms cubic-bezier(0.16, 1, 0.3, 1)'
+      resetIcon.current.style.transform = 'rotate(-360deg)'
+
+      const timeoutShow = setTimeout(() => {
+        setRotateAnimation(false)
+        resetIcon.current.style.transition = null
+        resetIcon.current.style.transform = 'rotate(0deg)'
+        resetIcon.current.style.transform = null
+      }, 400)
+
+      return () => clearTimeout(timeoutShow)
+    }
+  }, [rotateAnimation])
+
+  // Toggle the grid display with the viewport preview
+  useEffect(() => {
+    return viewportPreview ? setDisplayGrid(true) : setDisplayGrid(false)
+  }, [viewportPreview])
+
+  // Observe and set editor component widths
+  useEffect(() => {
+    if (!componentContainerRef.current) return
+
+    let resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        let { width, height } = entry.contentRect
+        setPreviewDimensions({ width, height })
+      }
+    })
+
+    resizeObserver.observe(componentContainerRef.current)
+
+    return () => {
+      if (!resizeObserver) return
+      resizeObserver.disconnect()
+      resizeObserver = null
+    }
+  })
+
+  const onBackClick = () => setDisplayPanel(!displayPanel)
+
+  if (!isEditor || !displayPanel) return children
+
+  return (
+    <div className='cove-editor__content' data-grid={displayGrid || null}>
+      <div className='cove-editor__content-wrap--x' style={viewportPreview ? { maxWidth: viewportPreview + 'px', minWidth: 'unset' } : null}>
+        <div className='cove-editor__content-wrap--y'>
+          <div className='cove-editor-utils__breakpoints--px'>
+            {displayGrid && displayPanel && (
+              <>
+                {Math.round(previewDimensions.width)}
+                <span className='mx-1' style={{ fontSize: '0.675rem' }}>
+                  ✕
+                </span>
+                {Math.round(previewDimensions.height)}
+              </>
+            )}
+          </div>
+          <div className='cove-editor__grid-caret--top' ref={componentContainerRef}>
+            <div className='cove-editor__grid-caret--bottom'>{children}</div>
+          </div>
+        </div>
+      </div>
+      <div className='cove-editor-utils__hotkeys'>
+        <div className='cove-editor-utils__hotkeys--left'>
+          <p className={displayPanel ? 'hotkey--active' : null}>Editor</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>Grid</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>Reset</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>View</p>
+        </div>
+        <div className='cove-editor-utils__hotkeys--right'>
+          <p className={displayPanel ? 'hotkey--active' : null}>esc</p>
+          <p className={displayGrid ? 'hotkey--active' : null}>G</p>
+          <p className={rotateAnimation ? 'hotkey--active' : null}>R</p>
+          <p className={viewportPreview ? 'hotkey--active' : null}>
+            {os === 'MacOS' ? <Icon style={{ marginRight: '0.25rem' }} display='command' size={12} /> : 'Alt'} + {viewportPreview ? breakpoints.indexOf(viewportPreview) + 1 : `[1 - ${breakpoints.length}]`}
+          </p>
+        </div>
+      </div>
+
+      <div className='cove-editor-utils__breakpoints'>
+        <ul className={`cove-editor-utils__breakpoints-list${viewportPreview ? ' has-active' : ''}`}>
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              setDisplayGrid(display => !display)
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-grid'>
+              <Icon display='grid' />
+            </div>
+          </button>
+          {breakpoints.map((breakpoint, index) => (
+            <button className={`cove-editor-utils__breakpoints-item${viewportPreview === breakpoint ? ' active' : ''}`} onClick={() => viewportPreviewController(breakpoint)} key={index}>
+              {breakpoint}px
+            </button>
+          ))}
+          <button
+            className='cove-editor-utils__breakpoints-item'
+            onClick={() => {
+              resetPreview()
+            }}
+          >
+            <div className='cove-editor-utils__breakpoints-reset' ref={resetIcon}>
+              <Icon display='rotateLeft' />
+            </div>
+          </button>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Responsive

package/components/Layout/components/Sidebar/components/Sidebar.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import './sidebar.styles.scss'
+
+type SidebarProps = {
+  // whether or not the viz is within a dashboard
+  isDashboard: boolean
+  // show/hide the sidebar
+  displayPanel: boolean
+  // sidebarTitle
+  title: string
+  // inner content
+  children: React.ReactNode
+  // on arrow toggle
+  onBackClick: () => void
+}
+
+const Sidebar: React.FC<SidebarProps> = props => {
+  const { displayPanel = false, isDashboard = false, title = 'Configure Visualization', children, onBackClick } = props
+
+  const getSectionClasses = () => {
+    const sectionClasses = ['editor-panel', 'cove', 'sidebar']
+    if (!displayPanel) sectionClasses.push('hidden')
+    if (isDashboard) sectionClasses.push('dashboard')
+    return sectionClasses
+  }
+
+  const getButtonClasses = () => {
+    const buttonClasses = []
+    if (displayPanel) buttonClasses.push('editor-panel__toggle')
+    if (!displayPanel) buttonClasses.push('collapsed', 'editor-panel__toggle')
+    return buttonClasses
+  }
+
+  return (
+    <>
+      <button className={getButtonClasses().join(' ')} title={displayPanel ? `Collapse Editor` : `Expand Editor`} onClick={onBackClick}></button>
+      <section className={getSectionClasses().join(' ')}>
+        <h2 className='editor-panel__title'>{title}</h2>
+        <section className='form-container' data-html2canvas-ignore>
+          {children}
+        </section>
+      </section>
+    </>
+  )
+}
+
+export default Sidebar