@cdc/core 4.24.10 → 4.24.12-2

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -6,7 +6,7 @@
 }
 
 .nested-dropdown {
-  .nested-dropdown-group {
+  [class^='nested-dropdown-group-'] {
     list-style: none;
   }
 
@@ -15,19 +15,22 @@
     position: relative;
     display: inline-block;
     width: 100%;
+    padding: 0;
+    &::placeholder {
+      color: var(--darkGray);
+    }
   }
 
   .main-nested-dropdown-container,
   .nested-dropdown-input-container {
-    padding: 7px 15px;
-    background: #fff;
     border: 1px solid var(--lightGray);
-    border-radius: 5px;
-    width: 325px;
+    min-width: 200px;
     cursor: pointer;
+    padding: 0.375rem 0.75rem;
+    font-size: 1em;
   }
 
-  .selectable-item {
+  [class^='selectable-item-'] {
     list-style: none;
     padding-left: 20px;
     position: relative;
@@ -45,15 +48,24 @@
   }
 
   .nested-dropdown-input-container {
+    display: block;
+    width: 100%;
+    border-radius: 0.25rem;
     position: relative;
     & > span.list-arrow {
+      color: var(--mediumGray);
       position: absolute;
-      font-size: 10px;
-      top: 4px;
-      right: 12px;
-      padding: 9px;
-      background: #fff;
-      pointer-events: none;
+      top: 9px;
+      right: 1px;
+      float: right;
+    }
+
+    &.disabled {
+      background-color: var(--lightestGray);
+      & > :is(input) {
+        color: var(--darkGray);
+        background-color: var(--lightestGray);
+      }
     }
   }
 
@@ -62,7 +74,8 @@
     overflow-y: scroll;
     position: absolute;
     z-index: 3;
-    width: 325px;
+    min-width: 200px;
+    background: white;
   }
 
   .hide {

package/components/Table/Table.tsx

@@ -4,9 +4,11 @@ import GroupRow from './components/GroupRow'
 import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
 import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
+import _ from 'lodash'
 
 type TableProps = {
   childrenMatrix: CellMatrix | GroupCellMatrix
+  noData?: boolean
   tableName: string
   caption: string
   stickyHeader?: boolean
@@ -27,46 +29,112 @@ type TableProps = {
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport, preliminaryData }: TableProps) => {
+const Table = ({
+  childrenMatrix,
+  noData,
+  tableName,
+  caption,
+  stickyHeader,
+  headContent,
+  tableOptions,
+  wrapColumns,
+  hasRowType,
+  fontSize,
+  viewport,
+  preliminaryData
+}: TableProps) => {
   const headStyle = stickyHeader ? { position: 'sticky' as Position, top: 0, zIndex: 2 } : {}
   const isGroupedMatrix = !Array.isArray(childrenMatrix)
 
   return (
     <table {...tableOptions}>
       <caption className='visually-hidden'>{caption}</caption>
-      <thead style={headStyle}>{headContent}</thead>
-      <tbody>
-        {isGroupedMatrix
-          ? Object.keys(childrenMatrix).flatMap(groupName => {
-              let colSpan = 0
-              const rows = childrenMatrix[groupName].map((row, i) => {
-                colSpan = row.length
-                const key = `${tableName}-${groupName}-row-${i}`
-                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-              })
-              return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
-            })
-          : childrenMatrix.map((childRow, i) => {
-              let childRowCopy = [...childRow]
-              let rowType = undefined
-              if (hasRowType) rowType = childRowCopy.shift()
-              const key = `${tableName}-row-${i}`
-              if (rowType === undefined) {
-                return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-              } else {
-                switch (rowType) {
-                  case RowType.row_group:
-                    return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
-                  case RowType.total:
-                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-                  case RowType.row_group_total:
-                    return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
-                  default:
-                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
-                }
-              }
-            })}
-      </tbody>
+      {noData ? (
+        <tr>
+          <td className='py-5 text-center'>No Data</td>
+        </tr>
+      ) : (
+        <>
+          <thead style={headStyle}>{headContent}</thead>
+          <tbody>
+            {isGroupedMatrix
+              ? Object.keys(childrenMatrix).flatMap(groupName => {
+                  let colSpan = 0
+                  const rows = childrenMatrix[groupName].map((row, i) => {
+                    colSpan = row.length
+                    const key = `${tableName}-${groupName}-row-${i}`
+                    return (
+                      <Row
+                        preliminaryData={preliminaryData}
+                        key={key}
+                        rowKey={key}
+                        childRow={row}
+                        wrapColumns={wrapColumns}
+                        cellMinWidth={tableOptions.cellMinWidth}
+                        fontSize={fontSize}
+                        viewport={viewport}
+                      />
+                    )
+                  })
+                  return [<GroupRow label={groupName} colSpan={colSpan} key={`${tableName}-${groupName}`} />, ...rows]
+                })
+              : childrenMatrix.map((childRow, i) => {
+                  let childRowCopy = [...childRow]
+                  let rowType = undefined
+                  if (hasRowType) rowType = childRowCopy.shift()
+                  const key = `${tableName}-row-${i}`
+                  if (rowType === undefined) {
+                    return (
+                      <Row
+                        preliminaryData={preliminaryData}
+                        key={key}
+                        rowKey={key}
+                        childRow={childRow}
+                        wrapColumns={wrapColumns}
+                        cellMinWidth={tableOptions.cellMinWidth}
+                        fontSize={fontSize}
+                        viewport={viewport}
+                      />
+                    )
+                  } else {
+                    switch (rowType) {
+                      case RowType.row_group:
+                        return <GroupRow label={childRowCopy[0]} colSpan={childRowCopy.length} key={key} />
+                      case RowType.total:
+                        return (
+                          <Row
+                            preliminaryData={preliminaryData}
+                            key={key}
+                            rowKey={key}
+                            childRow={childRowCopy}
+                            isTotal={true}
+                            wrapColumns={wrapColumns}
+                            cellMinWidth={tableOptions.cellMinWidth}
+                            fontSize={fontSize}
+                            viewport={viewport}
+                          />
+                        )
+                      case RowType.row_group_total:
+                        return <GroupRow label={childRowCopy[0]} colSpan={1} key={key} data={childRowCopy.slice(1)} />
+                      default:
+                        return (
+                          <Row
+                            preliminaryData={preliminaryData}
+                            key={key}
+                            rowKey={key}
+                            childRow={childRowCopy}
+                            wrapColumns={wrapColumns}
+                            cellMinWidth={tableOptions.cellMinWidth}
+                            fontSize={fontSize}
+                            viewport={viewport}
+                          />
+                        )
+                    }
+                  }
+                })}
+          </tbody>
+        </>
+      )}
     </table>
   )
 }

package/components/Table/components/Row.tsx

@@ -19,7 +19,7 @@ const Row: FC<RowProps> = props => {
   const whiteSpace = wrapColumns ? 'unset' : 'nowrap'
   const minWidth = cellMinWidth + 'px'
   const fontSizes = { small: 16, medium: 18, large: 20 }
-  const cellFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '11px' : `${fontSizes[fontSize]}px`
+  const cellFontSize = ['xs', 'xxs'].includes(viewport) ? '12px' : `${fontSizes[fontSize]}px`
 
   return (
     <tr>

package/components/_stories/DataTable.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'
 
 import DataTable from '../DataTable'
 import './styles.scss'
+import NoDataConfig from './_mocks/DataTable/no-data.json'
 import Example_1 from './_mocks/dashboard_no_filter.json'
 import CityStateExample from './_mocks/example-city-state.json'
 import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
@@ -62,6 +63,19 @@ export const Grouped: Story = {
   }
 }
 
+const noDataData = NoDataConfig.datasets['dev-8931-hide-markup-include.csv'].data
+export const NoData: Story = {
+  args: {
+    config: NoDataConfig,
+    dataConfig: { data: noDataData },
+    rawData: noDataData,
+    runtimeData: noDataData,
+    expandDataTable: true,
+    tableTitle: 'No Data Table',
+    viewport: 'lg',
+    tabbingId: '#asdf'
+  }
+}
 export const RowType: Story = {
   args: {
     config: {

package/components/_stories/Filters.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import Filters from '../Filters'
+import { VizFilter } from '../../types/VizFilter'
+import { faker } from '@faker-js/faker'
+import _ from 'lodash'
+import { Visualization } from '../../types/Visualization'
+
+const meta: Meta<typeof Filters> = {
+  title: 'Components/Molecules/Visualization Filters',
+  component: Filters
+}
+
+type Story = StoryObj<typeof Filters>
+
+faker.seed(123)
+
+const animalData = _.times(7, () => ({ bear: faker.animal.bear(), cat: faker.animal.cat(), cow: faker.animal.cow() }))
+const generateFilters = filterStyle => {
+  return ['bear', 'cat', 'cow'].map(columnName => {
+    return {
+      filterStyle,
+      label: columnName.toUpperCase(),
+      columnName
+    } as VizFilter
+  })
+}
+
+const generateConfig = filterStyle =>
+  ({
+    args: {
+      config: {
+        filters: generateFilters(filterStyle),
+        data: animalData
+      } as Visualization,
+      filteredData: animalData,
+      setFilteredData: () => {},
+      setConfig: () => {},
+      exclusions: []
+    }
+  } as Story)
+
+export const Dropdown: Story = generateConfig('dropdown')
+
+export const DropdownBar: Story = generateConfig('dropdown bar')
+
+export const MultiSelect: Story = generateConfig('multi-select')
+
+export const NestedDropdown: Story = generateConfig('nested-dropdown')
+
+export const Pill: Story = generateConfig('pill')
+
+export const Tab: Story = generateConfig('tab')
+
+export const TabBar: Story = generateConfig('tab bar')
+
+export default meta

package/components/_stories/_mocks/DataTable/no-data.json

@@ -0,0 +1,108 @@
+{
+  "dashboard": {
+    "theme": "theme-blue",
+    "sharedFilters": []
+  },
+  "rows": [
+    {
+      "columns": [
+        {
+          "width": 12,
+          "widget": "table1730380781112"
+        }
+      ],
+      "uuid": 1730380998726
+    }
+  ],
+  "visualizations": {
+    "table1730380781112": {
+      "filters": [],
+      "filterBehavior": "Filter Change",
+      "newViz": false,
+      "openModal": true,
+      "uid": "table1730380781112",
+      "type": "table",
+      "table": {
+        "label": "Data Table",
+        "show": true,
+        "showDownloadUrl": false,
+        "showVertical": true,
+        "expanded": true,
+        "collapsible": true
+      },
+      "columns": {
+        "additionalColumn1": {
+          "label": "New Column",
+          "dataTable": true,
+          "tooltips": false,
+          "prefix": "",
+          "suffix": "",
+          "forestPlot": false,
+          "startingPoint": "0",
+          "forestPlotAlignRight": false,
+          "roundToPlace": 0,
+          "commas": false,
+          "showInViz": false,
+          "forestPlotStartingPoint": 0
+        },
+        "Class": {
+          "name": "Class",
+          "dataTable": false
+        },
+        "Data_Type": {
+          "name": "Data_Type",
+          "dataTable": false
+        },
+        "Question": {
+          "name": "Question",
+          "dataTable": false
+        },
+        "Response": {
+          "name": "Response",
+          "dataTable": false
+        },
+        "Topic": {
+          "name": "Topic",
+          "dataTable": false
+        }
+      },
+      "dataFormat": {},
+      "visualizationType": "table",
+      "dataDescription": {
+        "horizontal": false,
+        "series": false
+      },
+      "dataKey": "dev-8931-hide-markup-include.csv"
+    }
+  },
+  "table": {
+    "label": "Data Table",
+    "show": true,
+    "showDownloadUrl": false,
+    "showDownloadLinkBelow": true,
+    "showVertical": true
+  },
+  "newViz": true,
+  "datasets": {
+    "dev-8931-hide-markup-include.csv": {
+      "data": [],
+      "dataFileSize": 10023,
+      "dataFileName": "dev-8931-hide-markup-include.csv",
+      "dataFileSourceType": "file",
+      "dataFileFormat": "CSV",
+      "preview": true
+    }
+  },
+  "isResponsiveTicks": false,
+  "type": "dashboard",
+  "barThickness": "0.37",
+  "xAxis": {
+    "type": "categorical",
+    "size": 75,
+    "maxTickRotation": 45,
+    "labelOffset": 0
+  },
+  "runtime": {},
+  "version": "4.24.10",
+  "uuid": 1730380778769
+}

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

@@ -1,9 +1,29 @@
 import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
 
 import '../../styles/v2/components/input/index.scss'
 
-const InputSlider = ({
+type InputSliderProps = {
+  /** Add label to the input field */
+  label: string
+  /** Select the preferred display style of the slider */
+  sliderType?: 'flat' | 'block' | 'pill' | '3d'
+  /** Select the preferred size of the slider */
+  size?: 'small' | 'medium' | 'large'
+  /** Select the preferred color for the slider when active */
+  activeColor?: string
+  /** Parent key value of nested target config option */
+  section?: string
+  /** Child key value of nested target config option */
+  subsection?: string
+  /** Key value of targeted config option */
+  fieldName?: string
+  /** Prop drill down of the updateField function */
+  updateField?: Function
+  /** Current value of the input, usually the current config option value */
+  value: boolean
+}
+
+const InputSlider: React.FC<InputSliderProps> = ({
   label,
   sliderType = 'flat',
   size = 'medium',
@@ -60,38 +80,24 @@ const InputSlider = ({
   return (
     <div className='input-group'>
       {label && <label>{label}</label>}
-      <div className={'cove-input__slider' + (size === 'small' ? '--small' : size === 'large' ? '--large' : '') + sliderTypeClass() + (value ? ' active' : '')} onClick={clickHandler}>
+      <div
+        className={
+          'cove-input__slider' +
+          (size === 'small' ? '--small' : size === 'large' ? '--large' : '') +
+          sliderTypeClass() +
+          (value ? ' active' : '')
+        }
+        onClick={clickHandler}
+      >
         <div className='cove-input__slider-button' />
-        <div className='cove-input__slider-track' style={value && activeColor ? { backgroundColor: activeColor } : null} />
+        <div
+          className='cove-input__slider-track'
+          style={value && activeColor ? { backgroundColor: activeColor } : null}
+        />
         <input className='cove-input--hidden' type='checkbox' name={name()} checked={value || false} readOnly />
       </div>
     </div>
   )
 }
 
-InputSlider.propTypes = {
-  /** Add label to the input field */
-  label: PropTypes.string,
-  /** Select the preferred display style of the slider */
-  sliderType: PropTypes.oneOf(['flat', 'block', 'pill', '3d']),
-  /** Select the preferred size of the slider */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /** Select the preferred color for the slider when active */
-  activeColor: PropTypes.string,
-  /** Parent key value of nested target config option
-   *
-   * (optional)*/
-  section: PropTypes.string,
-  /** Child key value of nested target config option
-   *
-   * (optional, requires `section` value)*/
-  subsection: PropTypes.string,
-  /** Key value of targeted config option */
-  fieldName: PropTypes.string,
-  /** Prop drill down of the updateField function */
-  updateField: PropTypes.func,
-  /** Current value of the input, usually the current config option value */
-  stateValue: PropTypes.object
-}
-
 export default InputSlider

package/components/ui/Icon.tsx

@@ -88,15 +88,24 @@ type IconProps = {
   /* Returns icon data as plain svg */
   base?: boolean
   /* Sets alt text for the icon */
-  alt: string
+  alt?: string
   /* Override the width of the icon (scales height proportionally)*/
   size?: number
   /* Override the color of the icon */
   color?: string
-  style?: string
+  style?: object
+  className?: string // className attribute will be ignored.
 }
 
-const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', size = undefined, color = undefined, style = undefined, ...attributes }) => {
+const Icon: React.FC<IconProps> = ({
+  display = '',
+  base = undefined,
+  alt = '',
+  size = undefined,
+  color = undefined,
+  style = undefined,
+  ...attributes
+}) => {
   const IconObj = iconHash[display] || null
 
   const filteredAttrs = { ...attributes }
@@ -112,10 +121,14 @@ const Icon: React.FC<IconProps> = ({ display = '', base = undefined, alt = '', s
   return (
     <>
       {base ? (
-        <IconObj title={alt} />
+        <IconObj title={alt || display} />
       ) : (
-        <span className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`} style={styles} {...filteredAttrs}>
-          <IconObj title={alt} />
+        <span
+          className={`cove-icon${attributes.className ? ' ' + attributes.className : ''}`}
+          style={styles}
+          {...filteredAttrs}
+        >
+          <IconObj title={alt || display} />
         </span>
       )}
     </>