@cdc/core 4.25.3 → 4.25.5-1

package/components/RichTooltip/richTooltip.css

@@ -0,0 +1,16 @@
+.tooltip-link {
+  text-decoration: underline;
+  text-decoration-color: var(--cool-gray-90);
+  text-decoration-style: dotted;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 0.25rem;
+  position: relative;
+  cursor: pointer;
+  color: var(--cool-gray-90);
+  font-family: var(--app-font-main);
+  font-size: 0.833rem !important;
+}
+.tooltip-link:hover {
+  text-decoration-color: #009ec1;
+  color: var(--cool-gray-90);
+}

package/components/Table/Table.tsx

@@ -1,142 +1,142 @@
-import { ReactNode } from 'react'
-import Row from './components/Row'
-import GroupRow from './components/GroupRow'
-import { CellMatrix } from './types/CellMatrix'
-import { RowType } from './types/RowType'
-import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
-import _ from 'lodash'
-
-type TableProps = {
-  childrenMatrix: CellMatrix | Map<string, CellMatrix>
-  noData?: boolean
-  tableName: string
-  caption: string
-  stickyHeader?: boolean
-  headContent: ReactNode
-  tableOptions: {
-    className: string
-    'aria-live'?: 'off' | 'assertive' | 'polite'
-    hidden?: boolean
-    'aria-rowcount'?: number
-    cellMinWidth?: number
-  }
-  wrapColumns?: boolean
-  hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
-  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
-  preliminaryData?: PreliminaryDataItem[]
-  rightAlignedCols: object
-}
-
-type Position = 'sticky'
-
-const Table = ({
-  childrenMatrix,
-  noData,
-  tableName,
-  caption,
-  stickyHeader,
-  headContent,
-  tableOptions,
-  wrapColumns,
-  hasRowType,
-  viewport,
-  preliminaryData,
-  rightAlignedCols
-}: 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>
-      {noData ? (
-        <tr>
-          <td className='py-5 text-center'>No Data</td>
-        </tr>
-      ) : (
-        <>
-          <thead style={headStyle}>{headContent}</thead>
-          <tbody>
-            {isGroupedMatrix
-              ? Array.from(childrenMatrix.keys()).flatMap(groupName => {
-                  let colSpan = 0
-                  const rows = childrenMatrix.get(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}
-                        viewport={viewport}
-                        rightAlignedCols={rightAlignedCols}
-                      />
-                    )
-                  })
-                  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}
-                        viewport={viewport}
-                        rightAlignedCols={rightAlignedCols}
-                      />
-                    )
-                  } 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}
-                            viewport={viewport}
-                            rightAlignedCols={rightAlignedCols}
-                          />
-                        )
-                      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}
-                            viewport={viewport}
-                            rightAlignedCols={rightAlignedCols}
-                          />
-                        )
-                    }
-                  }
-                })}
-          </tbody>
-        </>
-      )}
-    </table>
-  )
-}
-
-export default Table
+import { ReactNode } from 'react'
+import Row from './components/Row'
+import GroupRow from './components/GroupRow'
+import { CellMatrix } from './types/CellMatrix'
+import { RowType } from './types/RowType'
+import { PreliminaryDataItem } from '@cdc/chart/src/types/ChartConfig'
+import './table.styles.css'
+
+type TableProps = {
+  childrenMatrix: CellMatrix | Map<string, CellMatrix>
+  noData?: boolean
+  tableName: string
+  caption: string
+  stickyHeader?: boolean
+  headContent: ReactNode
+  tableOptions: {
+    className: string
+    'aria-live'?: 'off' | 'assertive' | 'polite'
+    hidden?: boolean
+    'aria-rowcount'?: number
+    cellMinWidth?: number
+  }
+  wrapColumns?: boolean
+  hasRowType?: boolean // if it has row type then the first column is the row type which will explain how to render the row
+  viewport: 'lg' | 'md' | 'sm' | 'xs' | 'xxs'
+  preliminaryData?: PreliminaryDataItem[]
+  rightAlignedCols: object
+}
+
+type Position = 'sticky'
+
+const Table = ({
+  childrenMatrix,
+  noData,
+  tableName,
+  caption,
+  stickyHeader,
+  headContent,
+  tableOptions,
+  wrapColumns,
+  hasRowType,
+  viewport,
+  preliminaryData,
+  rightAlignedCols
+}: 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>
+      {noData ? (
+        <tr>
+          <td className='py-5 text-center'>No Data</td>
+        </tr>
+      ) : (
+        <>
+          <thead style={headStyle}>{headContent}</thead>
+          <tbody>
+            {isGroupedMatrix
+              ? Array.from(childrenMatrix.keys()).flatMap(groupName => {
+                  let colSpan = 0
+                  const rows = childrenMatrix.get(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}
+                        viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
+                      />
+                    )
+                  })
+                  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}
+                        viewport={viewport}
+                        rightAlignedCols={rightAlignedCols}
+                      />
+                    )
+                  } 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}
+                            viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
+                          />
+                        )
+                      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}
+                            viewport={viewport}
+                            rightAlignedCols={rightAlignedCols}
+                          />
+                        )
+                    }
+                  }
+                })}
+          </tbody>
+        </>
+      )}
+    </table>
+  )
+}
+
+export default Table

package/components/Table/components/Row.tsx

@@ -43,7 +43,7 @@ const Row: FC<RowProps> = props => {
           <Cell
             ariaLabel={style?.color ? 'suppressed data' : ''}
             key={rowKey + '__' + i}
-            style={{ whiteSpace, minWidth, textAlign, ...style }}
+            style={{ whiteSpace, minWidth, textAlign, textOverflow: 'ellipsis', ...style }}
             isBold={isTotal}
           >
             {child}

package/components/Table/table.styles.css

@@ -0,0 +1,10 @@
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+  position: fixed;
+  left: -10000px;
+}

package/components/_stories/DataTable.stories.tsx

@@ -8,6 +8,7 @@ import CityStateExample from './_mocks/example-city-state.json'
 import { displayGeoName } from '@cdc/map/src/helpers/displayGeoName'
 import rowTypeData from './_mocks/row_type.json'
 import { TableConfig } from '../DataTable/types/TableConfig'
+import ConfigContext from '@cdc/map/src/context'
 
 const meta: Meta<typeof DataTable> = {
   title: 'Components/Organisms/DataTable',
@@ -36,7 +37,6 @@ export const Primary: Story = {
 export const CityState: Story = {
   args: {
     config: CityStateExample,
-    dataConfig: CityStateExample,
     rawData: CityStateExample.data,
     runtimeData: CityStateExample.data,
     expandDataTable: true,
@@ -46,7 +46,14 @@ export const CityState: Story = {
     columns: CityStateExample.columns,
     applyLegendToRow: () => ['#000'],
     displayGeoName
-  }
+  },
+  decorators: [
+    Story => (
+      <ConfigContext.Provider value={{ config: CityStateExample }}>
+        <Story />
+      </ConfigContext.Provider>
+    )
+  ]
 }
 
 export const Grouped: Story = {

package/components/_stories/Table.stories.tsx

@@ -37,7 +37,7 @@ function createGroupMatrix(): Record<string, ReactNode[][]> {
   return { group_1: [base, base], group_2: [base, base] }
 }
 
-export const Grouped: Story = {
+const Grouped: Story = {
   args: {
     childrenMatrix: createGroupMatrix(),
     tableName: 'COVE Table',

package/components/_stories/styles.scss

@@ -3,10 +3,6 @@
 @import '../../styles/_mixins';
 @import '../../styles/_global.scss';
 
-.visually-hidden {
-  position: fixed;
-  left: -10000px;
-}
 
 .debug .editor-panel {
   border: 2px dashed red !important;

package/components/ui/Accordion.jsx

@@ -1,11 +1,18 @@
 import React, { Children } from 'react'
-import { Accordion as AccordionComponent, AccordionItem, AccordionItemHeading, AccordionItemPanel, AccordionItemButton } from 'react-accessible-accordion'
+import {
+  Accordion as AccordionComponent,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  AccordionItemButton
+} from 'react-accessible-accordion'
 import PropTypes from 'prop-types'
 
 import Icon from './Icon'
 import Tooltip from './Tooltip'
 
 import '../../styles/v2/components/accordion.scss'
+import './accordion.styles.css'
 
 //Define the "slots" to be populated by subcomponents
 const AccordionSection = children => children

package/components/ui/Title/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import parse from 'html-react-parser'
-import './Title.scss'
+import './title.styles.css'
+import { Visualization } from '../../../types/Visualization'
 
 type HeaderProps = {
   title?: string
@@ -10,6 +11,8 @@ type HeaderProps = {
   style?: React.CSSProperties
   showTitle?: boolean
   ariaLevel?: number
+  config: Visualization
+  theme?: string
 }
 
 const Title = (props: HeaderProps) => {

package/components/ui/Title/{Title.scss → title.styles.css}

@@ -43,7 +43,6 @@
     margin-bottom: 0 !important;
   }
 
-  // THEMES
   &.theme-purple {
     background: #712177;
     border-bottom-color: #b890bb;
@@ -94,7 +93,6 @@
   }
 }
 
-// fix sparkline bottom margin gap
 .type-sparkline.type-chart .cove-component__header {
   margin: 0px !important;
 }

package/components/ui/_stories/Colors.stories.mdx

@@ -0,0 +1,220 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
+import colorPalettes from '@cdc/core/data/colorPalettes'
+
+export const orderedPalettes = Object.keys(colorPalettes)
+.sort()
+.reduce((acc, key) => {
+acc[key] = colorPalettes[key]
+return acc
+}, {})
+
+export const paletteFriendlyNames = {
+  'yelloworangered': 'Yellow Orange Red',
+  'yelloworangebrown': 'Yellow Orange Brown',
+  'pinkpurple': 'Pink Purple',
+  'bluegreen': 'Blue Green',
+  'orangered': 'Orange Red',
+  'red': 'Red Scale',
+  'greenblue': 'Green Blue',
+  'yellowpurple': 'Yellow Purple',
+  'qualitative-bold': 'Bold Multi-Color',
+  'qualitative-soft': 'Soft Multi-Color',
+  'qualitative1': 'Multi-Color Set 1',
+  'qualitative2': 'Multi-Color Set 2',
+  'qualitative3': 'Multi-Color Set 3',
+  'qualitative4': 'Multi-Color Set 4',
+  'sequential-blue': 'Blue Sequential',
+  'sequential-blue-2-(MPX)': 'Blue Sequential Alt',
+  'sequential-blue-2(MPX)': 'Blue Sequential Alt',
+  'sequential-orange-(MPX)': 'Orange Sequential',
+  'sequential-orange(MPX)': 'Orange Sequential',
+  'sequential-green': 'Green Sequential',
+  'Sequential Blue': 'Blue Sequential',
+  'Sequential Blue Two': 'Blue Sequential Alt',
+  'Sequential Blue Three': 'Blue Sequential Extended',
+  'Sequential Orange': 'Orange Sequential',
+  'Sequential Orange Two': 'Orange Sequential Extended',
+  'Sequential Green': 'Green Sequential',
+  'monochrome-1': 'Blue Mono',
+  'monochrome-2': 'Purple Mono',
+  'monochrome-3': 'Lavender Mono',
+  'monochrome-4': 'Violet Mono',
+  'monochrome-5': 'Brown Mono',
+  'cool-1': 'Cool Green Blue',
+  'cool-2': 'Cool Blue Green',
+  'cool-3': 'Cool Purple Blue',
+  'cool-4': 'Cool Green Purple',
+  'cool-5': 'Cool Blue Purple',
+  'warm-1': 'Warm Red Peach',
+  'complementary-1': 'Blue Gold',
+  'complementary-2': 'Blue Orange',
+  'complementary-3': 'Purple Orange',
+  'complementary-4': 'Purple Gold',
+  'complementary-5': 'Pink Teal',
+  'colorblindsafe': 'Colorblind Safe',
+}
+
+export const getPaletteName = (paletteName) => {
+  const isReversed = paletteName.endsWith('reverse');
+  const baseName = isReversed ? paletteName.slice(0, -7) : paletteName; // Remove 'reverse' suffix
+  const normalizedKey = baseName
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/-/g, ' ')
+    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
+  const friendlyName = paletteFriendlyNames[normalizedKey] || baseName
+    .replace(/-/g, ' ')
+    .replace(/\(mpx\)/gi, ' (MonkeyPox)');
+
+  const capitalizeWords = (str) => str.replace(/\b\w/g, (char) => char.toUpperCase());
+  const formattedName = capitalizeWords(friendlyName);
+
+  return isReversed ? `${formattedName} (Reversed)` : formattedName;
+};
+
+<Meta title="Design Systems/Colors" />
+
+# Visualization Color Palettes
+The color palettes are predefined sets of colors organized into categories like sequential, qualitative, and complementary groups. These groups are designed with visual clarity in mind to ensure a cohesive and effective representation of data. The palettes are listed alphabetically, with reversed versions placed directly next to their original counterparts to maintain consistency across the application. In the codebase, these palettes are dynamically applied to generate and display color schemes in various UI components, such as charts and visualizations.
+
+<ColorPalette>
+  {Object.entries(orderedPalettes).map(([paletteName, colors]) => {
+
+
+    return (
+    <ColorItem
+      key={paletteName}
+      title={getPaletteName(paletteName)}
+      colors={colors}
+    />
+  )}
+  )}
+</ColorPalette>
+
+# CDC Specific & Additional Colors
+These are additional color palettes that can be used for various UI components. When using these consult CDC Level documentation.
+
+
+<ColorPalette>
+  {[
+    {
+      title: 'Blue',
+      colors: {
+        Primary: '#005eaa',
+        Secondary: '#88c3ea',
+        Tertiary: '#c0e9ff',
+        Quaternary: '#edf9ff'
+      }
+    },
+    {
+      title: 'Purple',
+      colors: {
+        Primary: '#712177',
+        Secondary: '#b890bb',
+        Tertiary: '#e3d3e4',
+        Quaternary: '#f7f2f7'
+      }
+    },
+    {
+      title: 'Brown',
+      colors: {
+        Primary: '#705043',
+        Secondary: '#ad907b',
+        Tertiary: '#d7ccc8',
+        Quaternary: '#f2ebe8'
+      }
+    },
+    {
+      title: 'Teal',
+      colors: {
+        Primary: '#00695c',
+        Secondary: '#4ebaaa',
+        Tertiary: '#ceece7',
+        Quaternary: '#ebf7f5'
+      }
+    },
+    {
+      title: 'Pink',
+      colors: {
+        Primary: '#af4448',
+        Secondary: '#e57373',
+        Tertiary: '#ffc2c2',
+        Quaternary: '#ffe7e7'
+      }
+    },
+    {
+      title: 'Orange',
+      colors: {
+        Primary: '#bb4d00',
+        Secondary: '#ffad42',
+        Tertiary: '#ffe97d',
+        Quaternary: '#fff4cf'
+      }
+    },
+    {
+      title: 'Slate',
+      colors: {
+        Primary: '#29434e',
+        Secondary: '#7e9ba5',
+        Tertiary: '#b6c6d2',
+        Quaternary: '#e2e8ed'
+      }
+    },
+    {
+      title: 'Indigo',
+      colors: {
+        Primary: '#26418f',
+        Secondary: '#92a6dd',
+        Tertiary: '#dee8ff',
+        Quaternary: '#f2f6ff'
+      }
+    },
+    {
+      title: 'Cyan',
+      colors: {
+        Primary: '#006778',
+        Secondary: '#65b0bd',
+        Tertiary: '#cce5e9',
+        Quaternary: '#ebf5f6'
+      }
+    },
+    {
+      title: 'Green',
+      colors: {
+        Primary: '#4b830d',
+        Secondary: '#84bc49',
+        Tertiary: '#dcedc8',
+        Quaternary: '#f1f8e9'
+      }
+    },
+    {
+      title: 'Amber',
+      colors: {
+        Primary: '#fbab18',
+        Secondary: '#ffd54f',
+        Tertiary: '#ffecb3',
+        Quaternary: '#fff7e1'
+      }
+    },
+    {
+      title: 'Grayscale',
+      colors: {
+        'Base Color': '#333',
+        'Lightest Gray': '#f2f2f2',
+        'Light Gray': '#c7c7c7',
+        'Medium Gray': '#565656',
+        'Dark Gray': '#333',
+      }
+    },
+    {
+      title: 'White',
+      colors: ['#FFF']
+    },
+    {
+      title: 'Red',
+      colors: ['#d8000c']
+    }
+  ].map(({ title, colors }) => (
+    <ColorItem key={title} title={title} colors={colors} subtitle={'test'} />
+  ))}
+</ColorPalette>

package/components/ui/_stories/IconGallery.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+import Icon, { ICON_TYPES } from '../Icon'
+
+<Meta title="Design Systems/Iconography" />
+
+# Iconography
+
+<IconGallery>
+  {ICON_TYPES.map((name) => (
+  <IconItem name={name}>
+      <Icon display={name} />
+  </IconItem>
+  ))}
+</IconGallery>