@cdc/core 4.25.3 → 4.25.6

package/components/NestedDropdown/NestedDropdown.tsx

@@ -50,7 +50,7 @@ const Options: React.FC<{
         onKeyUp={handleKeyUp}
         className={`nested-dropdown-group-${filterIndex}`}
       >
-        <span className={'font-weight-bold'}>{label} </span>
+        <span className={'font-weight-bold fw-bold'}>{label} </span>
         {
           <span className='list-arrow' aria-hidden='true'>
             {isTierOneExpanded ? (
@@ -241,7 +241,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
       setInputHasFocus(false)
       setIsListOpened(false)
     } else {
-      ;(e.relatedTarget as HTMLElement).focus()
+      ; (e.relatedTarget as HTMLElement).focus()
     }
   }
 
@@ -260,7 +260,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
         onKeyUp={handleKeyUp}
       >
         <div
-          className={`nested-dropdown-input-container${loading || !options.length ? ' disabled' : ''}`}
+          className={`nested-dropdown-input-container${loading || !options?.length ? ' disabled' : ''}`}
           aria-label='searchInput'
           aria-disabled={loading}
           role='textbox'
@@ -276,7 +276,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
             value={userSearchTerm !== null ? userSearchTerm : inputValue}
             onChange={handleSearchTermChange}
             placeholder={loading ? 'Loading...' : '- Select -'}
-            disabled={loading || !options.length}
+            disabled={loading || !options?.length}
             onClick={() => {
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
@@ -302,23 +302,23 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
         >
           {filterOptions.length
             ? filterOptions.map(([group, subgroup], index) => {
-                const [groupValue, groupText] = group
-                const groupTextValue = String(groupText || groupValue)
-                return (
-                  <Options
-                    key={groupTextValue + '_' + index}
-                    handleBlur={handleOnBlur}
-                    subOptions={subgroup}
-                    filterIndex={filterIndex}
-                    label={groupTextValue}
-                    handleSubGroupSelect={subGroupValue => {
-                      chooseSelectedSubGroup(groupValue, subGroupValue)
-                    }}
-                    userSelectedLabel={activeGroup + activeSubGroup}
-                    userSearchTerm={userSearchTerm || ''}
-                  />
-                )
-              })
+              const [groupValue, groupText] = group
+              const groupTextValue = String(groupText || groupValue)
+              return (
+                <Options
+                  key={groupTextValue + '_' + index}
+                  handleBlur={handleOnBlur}
+                  subOptions={subgroup}
+                  filterIndex={filterIndex}
+                  label={groupTextValue}
+                  handleSubGroupSelect={subGroupValue => {
+                    chooseSelectedSubGroup(groupValue, subGroupValue)
+                  }}
+                  userSelectedLabel={activeGroup + activeSubGroup}
+                  userSearchTerm={userSearchTerm || ''}
+                />
+              )
+            })
             : 'There are no matching items'}
         </ul>
       </div>

package/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Tooltip as ReactTooltip } from 'react-tooltip'
+import './richTooltip.css'
+
+const RichTooltip = ({ linkText, href = null, tooltipOpacity = 100, tooltipContent }) => {
+  return (
+    <>
+      <a
+        className='tooltip-link'
+        data-tooltip-content={tooltipContent}
+        data-tooltip-id='supression-tooltip'
+        href={href}
+      >
+        {linkText}
+      </a>
+
+      <ReactTooltip
+        id='supression-tooltip'
+        place='top'
+        effect='solid'
+        variant='light'
+        style={{
+          background: `rgba(255, 255, 255, ${tooltipOpacity})`,
+          color: 'var(--cool-gray-90)',
+          padding: '9px 18px',
+          boxShadow: '0px 2px 2px rgba(28, 29, 31, 0.45)',
+          maxWidth: '239px',
+          fontSize: 'var(--filter-label-font-size)',
+          fontFamily: 'var(--app-font-main)',
+          borderRadius: '4px'
+        }}
+      />
+    </>
+  )
+}
+
+export default RichTooltip

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;
 }