@cdc/core 4.24.7 → 4.24.9

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -1,11 +1,6 @@
 .nested-dropdown {
-  li {
+  .nested-dropdown-group {
     list-style: none;
-    cursor: pointer;
-
-    &:focus {
-      border: 2px solid var(--orange);
-    }
   }
 
   .search-input {
@@ -25,11 +20,24 @@
     cursor: pointer;
   }
 
-  .selectable-item:hover {
-    background-color: var(--lightGray);
+  .selectable-item {
+    list-style: none;
+    padding-left: 20px;
+    position: relative;
+    font-weight: normal;
+    white-space: nowrap;
+
+    & .check-mark {
+      position: absolute;
+      left: 0px;
+    }
+
+    &:hover {
+      background-color: var(--lightGray);
+    }
   }
 
-  & > div {
+  .nested-dropdown-input-container {
     position: relative;
     & > span.list-arrow {
       position: absolute;
@@ -42,26 +50,12 @@
     }
   }
 
-  & > ul {
+  & .main-nested-dropdown-container {
     max-height: 375px;
     overflow-y: scroll;
     position: absolute;
     z-index: 3;
-    width: 375px;
-
-    & > li {
-      font-weight: bold;
-
-      & > ul > li {
-        position: relative;
-        font-weight: normal;
-        white-space: nowrap;
-        & > span {
-          position: absolute;
-          left: -20px;
-        }
-      }
-    }
+    width: 325px;
   }
 
   .hide {

package/components/Table/Table.tsx

@@ -3,6 +3,7 @@ import Row from './components/Row'
 import GroupRow from './components/GroupRow'
 import { CellMatrix, GroupCellMatrix } from './types/CellMatrix'
 import { RowType } from './types/RowType'
+import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 
 type TableProps = {
   childrenMatrix: CellMatrix | GroupCellMatrix
@@ -21,13 +22,15 @@ type TableProps = {
   hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
   fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  preliminaryData?: PreliminaryDataItem[]
 }
 
 type Position = 'sticky'
 
-const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent, tableOptions, wrapColumns, hasRowType, fontSize, viewport }: TableProps) => {
+const Table = ({ childrenMatrix, 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>
@@ -39,7 +42,7 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               const rows = childrenMatrix[groupName].map((row, i) => {
                 colSpan = row.length
                 const key = `${tableName}-${groupName}-row-${i}`
-                return <Row key={key} rowKey={key} childRow={row} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                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]
             })
@@ -49,17 +52,17 @@ const Table = ({ childrenMatrix, tableName, caption, stickyHeader, headContent,
               if (hasRowType) rowType = childRowCopy.shift()
               const key = `${tableName}-row-${i}`
               if (rowType === undefined) {
-                return <Row key={key} rowKey={key} childRow={childRow} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                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 key={key} rowKey={key} childRow={childRowCopy} isTotal={true} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                    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 key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
+                    return <Row preliminaryData={preliminaryData} key={key} rowKey={key} childRow={childRowCopy} wrapColumns={wrapColumns} cellMinWidth={tableOptions.cellMinWidth} fontSize={fontSize} viewport={viewport} />
                 }
               }
             })}

package/components/Table/components/Cell.tsx

@@ -1,6 +1,6 @@
-const Cell = ({ children, style, isBold = false }) => {
+const Cell = ({ children, style, isBold = false, ariaLabel }) => {
   return (
-    <td tabIndex={0} role='gridcell' style={style}>
+    <td aria-label={ariaLabel} tabIndex={0} role='gridcell' style={style}>
       {isBold ? <strong>{children}</strong> : children}
     </td>
   )

package/components/Table/components/Row.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react'
+import { ReactNode, FC } from 'react'
 import Cell from './Cell'
+import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
 
 type RowProps = {
   childRow: ReactNode[]
@@ -9,20 +10,37 @@ type RowProps = {
   cellMinWidth?: number
   fontSize: 'small' | 'medium' | 'large'
   viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  style?: object
+  preliminaryData?: PreliminaryDataItem[]
 }
 
-const Row = ({ childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport }: RowProps) => {
+const Row: FC<RowProps> = props => {
+  const { childRow, rowKey, wrapColumns, cellMinWidth = 0, isTotal, fontSize, viewport, preliminaryData } = 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`
+
   return (
     <tr>
-      {childRow.map((child, i) => (
-        <Cell key={rowKey + '__' + i} style={{ whiteSpace, minWidth, fontSize: cellFontSize }} isBold={isTotal}>
-          {child}
-        </Cell>
-      ))}
+      {childRow.map((child, i) => {
+        const style =
+          (preliminaryData?.some(
+            pd => pd.type === 'suppression' && child === pd.iconCode && pd.displayGray && pd.displayTable
+          ) && { color: '#777772' }) ||
+          {}
+
+        return (
+          <Cell
+            ariaLabel={style?.color ? 'suppressed data' : ''}
+            key={rowKey + '__' + i}
+            style={{ whiteSpace, minWidth, fontSize: cellFontSize, ...style }}
+            isBold={isTotal}
+          >
+            {child}
+          </Cell>
+        )
+      })}
     </tr>
   )
 }

package/components/_stories/Layout.Debug.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import './styles.scss'
+import CdcChart from '@cdc/chart'
+import CdcMap from '@cdc/map'
+import CdcMarkupInclude from '@cdc/markup-include'
+import CdcFilteredText from '@cdc/filtered-text'
+import CdcDashboard from '@cdc/dashboard'
+import CdcWaffleChart from '@cdc/waffle-chart'
+import config from './../../../chart/src/_stories/_mock/bar-chart-suppressed.json'
+import mapConfig from './../../../map/examples/default-usa.json'
+import markupConfig from './../../../markup-include/src/data/initial-state.js'
+import filteredTextConfig from './_mocks/filtered-text-config.json'
+import waffleChartConfig from './../../../waffle-chart/examples/gallery/count.json'
+import dashboardConfig from './../../../dashboard/examples/full-dashboard.json'
+
+// Determine the component based on config.type
+const getComponent = config => {
+  switch (config.type) {
+    case 'map':
+      return CdcMap
+    case 'chart':
+      return CdcChart
+    case 'markup-include':
+      return CdcMarkupInclude
+    case 'waffle-chart':
+      return CdcWaffleChart
+    case 'dashboard':
+      return CdcDashboard
+    default:
+      return () => <div>Unknown component type</div>
+  }
+}
+
+const meta = {
+  title: 'Components/Templates/Layout/Debug',
+  component: args => {
+    const Component = getComponent(args.config)
+    return (
+      <div className=''>
+        <Component {...args} />
+      </div>
+    )
+  }
+} as Meta
+
+export default meta
+
+type Story = StoryObj
+
+export const Chart: Story = {
+  args: {
+    config,
+    isEditor: true
+  }
+}
+
+export const Map: Story = {
+  args: {
+    config: mapConfig,
+    isEditor: true
+  }
+}
+
+export const MarkupInclude: StoryObj<typeof CdcMarkupInclude> = {
+  args: {
+    config: markupConfig,
+    isEditor: true
+  }
+}
+
+export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
+  args: {
+    config: waffleChartConfig,
+    isEditor: true
+  }
+}
+
+export const Dashboard: StoryObj<typeof CdcDashboard> = {
+  args: {
+    config: dashboardConfig,
+    isEditor: true
+  }
+}
+
+// export const WaffleChart: StoryObj<typeof CdcWaffleChart> = {
+//   args: {
+//     config: waffleChartConfig,
+//     isEditor: true
+//   }
+// }