@cdc/core 4.24.9-1 → 4.24.10

package/components/NestedDropdown/tests/nestedDropdownHelpers.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest'
+import { filterSearchTerm, NestedOptions } from '../nestedDropdownHelpers'
+
+describe('filterSearchTerm()', () => {
+  const optsMemo: NestedOptions = [
+    [['Fruits'], [['Apple'], ['Cantaloupe'], ['Orange'], ['Tomato']]],
+    [['Vegetables'], [['Spinach'], ['Broccoli'], ['Carrot'], ['Tomato']]],
+    [
+      ['Fungi', 'Mushrooms'],
+      [['Portobello', 'Mushroom 1'], ['Morel, Mushroom 2'], ['Chanterelle', 'Mushroom 3']]
+    ]
+  ]
+  it('Return the original OptsMemo when there is no search term', () => {
+    const result = filterSearchTerm('', optsMemo)
+    expect(result).toEqual(optsMemo)
+    const result2 = filterSearchTerm(undefined, optsMemo)
+    expect(result2).toEqual(optsMemo)
+  })
+  it('Return the empty array if there is no match to search term', () => {
+    const result = filterSearchTerm('Pizza', optsMemo)
+    expect(result).toEqual([])
+  })
+  it('Filter out the top level groupings', () => {
+    const result = filterSearchTerm('', optsMemo)
+    expect(result).toEqual(optsMemo)
+    const result2 = filterSearchTerm('fruit', optsMemo)
+    const expectedResult2: NestedOptions = [[['Fruits'], [['Apple'], ['Cantaloupe'], ['Orange'], ['Tomato']]]]
+    expect(result2).toEqual(expectedResult2)
+    const result3 = filterSearchTerm('VEG', optsMemo)
+    const expectedResult3: NestedOptions = [[['Vegetables'], [['Spinach'], ['Broccoli'], ['Carrot'], ['Tomato']]]]
+    expect(result3).toEqual(expectedResult3)
+    const result4 = filterSearchTerm('mush', optsMemo)
+    const expectedResult4: NestedOptions = [
+      [
+        ['Fungi', 'Mushrooms'],
+        [['Portobello', 'Mushroom 1'], ['Morel, Mushroom 2'], ['Chanterelle', 'Mushroom 3']]
+      ]
+    ]
+    expect(result4).toEqual(expectedResult4)
+  })
+  it('Filter out the subvalues', () => {
+    const result = filterSearchTerm('ap', optsMemo)
+    const expectedResult: NestedOptions = [[['Fruits'], [['Apple']]]]
+    expect(result).toEqual(expectedResult)
+    const result2 = filterSearchTerm('ca', optsMemo)
+    const expectedResult2: NestedOptions = [
+      [['Fruits'], [['Cantaloupe']]],
+      [['Vegetables'], [['Carrot']]]
+    ]
+    expect(result2).toEqual(expectedResult2)
+    const result3 = filterSearchTerm('tomato', optsMemo)
+    const expectedResult3: NestedOptions = [
+      [['Fruits'], [['Tomato']]],
+      [['Vegetables'], [['Tomato']]]
+    ]
+    expect(result3).toEqual(expectedResult3)
+  })
+})

package/components/Table/components/GroupRow.tsx

@@ -8,7 +8,7 @@ type GroupRowProps = {
 
 const GroupRow = ({ label, colSpan, data }: GroupRowProps) => {
   return (
-    <tr>
+    <tr className='row-group'>
       <th scope='colgroup' colSpan={colSpan}>
         {label}
       </th>

package/components/_stories/BlurStrokeTest.stories.tsx

@@ -0,0 +1,27 @@
+import { a } from 'vitest/dist/suite-IbNSsUWN'
+import { BlurStrokeText } from '../BlurStrokeText'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof BlurStrokeText> = {
+  title: 'Components/Atoms/BlurStrokeText',
+  component: BlurStrokeText
+}
+
+export default meta
+
+type Story = StoryObj<typeof BlurStrokeText>
+
+export const Default: Story = {
+  render: args => (
+    <svg width='300' height='100' style={{ backgroundColor: '#464646' }}>
+      <BlurStrokeText {...args}>A feathered stroke option</BlurStrokeText>
+    </svg>
+  ),
+  args: {
+    fontSize: 15,
+    y: 50,
+    x: 50,
+    blurRadius: 1,
+    disableStroke: false
+  }
+}

package/components/_stories/NestedDropdown.stories.tsx

@@ -1,58 +1,34 @@
 import { Meta, StoryObj } from '@storybook/react'
-
 import NestedDropdown from '../NestedDropdown'
+import nestedDropdownStory from './_mocks/nested-dropdown.json'
+import { useState } from 'react'
 
 const meta: Meta<typeof NestedDropdown> = {
   title: 'Components/Molecules/NestedDropdown',
   component: NestedDropdown
 }
 
+const Template = args => {
+  const [currentStoryFilter, setCurrentStoryFilter] = useState({
+    ...nestedDropdownStory
+  })
+  return (
+    <NestedDropdown
+      listLabel='Age'
+      handleSelectedItems={([group, subGroup]) => {
+        setCurrentStoryFilter({
+          ...currentStoryFilter,
+          active: group,
+          subGrouping: { ...currentStoryFilter.subGrouping, active: subGroup }
+        })
+      }}
+      currentFilter={currentStoryFilter}
+    />
+  )
+}
+
 type Story = StoryObj<typeof NestedDropdown>
 
-export const Primary: Story = {
-  args: {
-    data: [
-      {
-        country: 'USA',
-        region: 'Region1'
-      },
-      {
-        country: 'USA',
-        region: 'Florida'
-      },
-      {
-        country: 'USA',
-        region: 'Iowa'
-      },
-      {
-        country: 'Country2',
-        region: 'Region1'
-      },
-      {
-        country: 'Country2',
-        region: 'Region2'
-      },
-      {
-        country: 'Country2',
-        region: 'Region3'
-      },
-      {
-        country: 'Italy',
-        region: 'Region1'
-      },
-      {
-        country: 'Italy',
-        region: 'Naples'
-      },
-      {
-        country: 'Italy',
-        region: 'Region3'
-      }
-    ],
-    tiers: ['country', 'region'],
-    listLabel: 'Countries of the World',
-    handleSelectedItems: console.log
-  }
-}
+export const Primary: Story = Template.bind({})
 
 export default meta

package/components/_stories/_mocks/nested-dropdown.json

@@ -0,0 +1,30 @@
+{
+  "key": "New Dashboard Filter 1",
+  "showDropdown": true,
+  "values": ["Age Group", "Age Group 2", "Age Group 3"],
+  "orderedValues": ["Age Group", "Age Group 2", "Age Group 3"],
+  "type": "datafilter",
+  "filterStyle": "nested-dropdown",
+  "columnName": "StratficationCategory1",
+  "active": "",
+  "subGrouping": {
+    "columnName": "Stratification1",
+    "active": "",
+    "valuesLookup": {
+      "Age Group": {
+        "orderedValues": ["50-64 years", "65 years or older", "Overall"],
+        "values": ["50-64 years", "65 years or older", "Overall"]
+      },
+      "Age Group 2": {
+        "orderedValues": ["65 years or older", "Overall"],
+        "values": ["65 years or older", "Overall"]
+      },
+      "Age Group 3": {
+        "orderedValues": ["50-64 years", "Overall"],
+        "values": ["50-64 years", "Overall"]
+      }
+    }
+  },
+  "usedBy": ["chart1724946676832"],
+  "tier": 1
+}

package/components/_stories/styles.scss

@@ -1,7 +1,6 @@
 @import '../../styles/base.scss';
 @import '../../styles/_variables';
 @import '../../styles/_mixins';
-@import '../../styles/_data-table';
 @import '../../styles/_global.scss';
 
 .visually-hidden {

package/components/ui/{Tooltip.jsx → Tooltip.tsx}

@@ -2,6 +2,7 @@ import { useId } from 'react'
 
 // Third Party
 import { Tooltip as ReactTooltip } from 'react-tooltip'
+import type { PlacesType } from 'react-tooltip'
 
 // Styles
 import '../../styles/v2/components/ui/tooltip.scss'
@@ -9,33 +10,56 @@ import '../../styles/v2/components/ui/tooltip.scss'
 const TooltipTarget = children => children
 const TooltipContent = children => children
 
-const Tooltip = ({ place = 'top', trigger = 'hover', float = false, shadow = true, border = false, children, style, ...attributes }) => {
+type ToolTipProps = {
+  place?: PlacesType
+  trigger?: 'hover' | 'focus' | 'click'
+  float?: boolean
+  shadow?: boolean
+  border?: boolean
+  children: React.ReactElement[]
+  style?: React.CSSProperties
+}
+
+const Tooltip: React.FC<ToolTipProps> & { Target; Content } = ({
+  place = 'top',
+  trigger = 'hover',
+  float = false,
+  shadow = true,
+  border = false,
+  children,
+  style,
+  ...attributes
+}) => {
   const tooltipTargetChildren = children.find(el => el.type === TooltipTarget)
   const tooltipContentChildren = children.find(el => el.type === TooltipContent)
 
   const uid = 'tooltip-' + useId()
 
-  const generateTriggerEvent = trigger => {
-    const eventList = {
-      hover: null,
-      focus: 'focus',
-      click: 'click focus'
-    }
-    return eventList[trigger]
-  }
-
   return (
     <span className='cove-tooltip' style={style} {...attributes}>
-      <a id={uid} role='dialog' tabIndex={0} className='cove-tooltip--target' data-tooltip-float={float} data-tooltip-place={place} data-tooltip-events={generateTriggerEvent()}>
+      <a
+        id={uid}
+        role='dialog'
+        tabIndex={0}
+        className='cove-tooltip--target'
+        data-tooltip-float={float}
+        data-tooltip-place={place}
+        data-tooltip-isOpen={true}
+      >
         {tooltipTargetChildren ? tooltipTargetChildren.props.children : null}
       </a>
-      {/* prettier-ignore */}
       <ReactTooltip
         id={uid}
         // ! do not remove the deprecated property, it will break tooltips in the editor.
         anchorId={uid}
-        className={'cove-tooltip__content' + (' place-' + place) + (!float ? ' cove-tooltip__content--animated' : '') + (trigger === 'click' ? ' interactive' : '') + (border ? (' cove-tooltip--border') : '') + (shadow ? ' has-shadow' : '')}
-        globalEventOff="click"
+        className={
+          'cove-tooltip__content' +
+          (' place-' + place) +
+          (!float ? ' cove-tooltip__content--animated' : '') +
+          (trigger === 'click' ? ' interactive' : '') +
+          (border ? ' cove-tooltip--border' : '') +
+          (shadow ? ' has-shadow' : '')
+        }
       >
         {tooltipContentChildren ? tooltipContentChildren.props.children : null}
       </ReactTooltip>

package/data/colorPalettes.js

@@ -3,30 +3,105 @@ import { updatePaletteNames } from '../helpers/updatePaletteNames'
 
 const colorPalettesMap = {
   yelloworangered: ['#ffffcc', '#ffeda0', '#fed976', '#feb24c', '#fd8d3c', '#fc4e2a', '#e31a1c', '#bd0026', '#800026'],
-  yelloworangebrown: ['#ffffe5', '#fff7bc', '#fee391', '#fec44f', '#fe9929', '#ec7014', '#cc4c02', '#993404', '#662506'],
+  yelloworangebrown: [
+    '#ffffe5',
+    '#fff7bc',
+    '#fee391',
+    '#fec44f',
+    '#fe9929',
+    '#ec7014',
+    '#cc4c02',
+    '#993404',
+    '#662506'
+  ],
   pinkpurple: ['#fff7f3', '#fde0dd', '#fcc5c0', '#fa9fb5', '#f768a1', '#dd3497', '#ae017e', '#7a0177', '#49006a'],
   bluegreen: ['#fff7fb', '#ece2f0', '#d0d1e6', '#a6bddb', '#67a9cf', '#3690c0', '#02818a', '#016c59', '#014636'],
   orangered: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
   red: ['#fff5f0', '#fee0d2', '#fcbba1', '#fc9272', '#fb6a4a', '#ef3b2c', '#cb181d', '#a50f15', '#67000d'],
   greenblue: ['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#267BA6', '#0868ac', '#084081'],
   yellowpurple: ['#FFF0B0', '#F5CC76', '#EDAE4B', '#E3683C', '#BF2A48', '#6D2059', '#8F0C4B', '#310958', '#0E0943'],
-  qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
+  qualitative1: [
+    '#a6cee3',
+    '#1f78b4',
+    '#b2df8a',
+    '#33a02c',
+    '#fb9a99',
+    '#e31a1c',
+    '#6a3d9a',
+    '#cab2d6',
+    '#E31A90',
+    '#15017A',
+    '#C2C0FC'
+  ],
   qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
   qualitative3: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666'],
   qualitative4: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ff3', '#a65628', '#f781bf'],
   // qualitative9 doesn't appear to be used anywhere...
   qualitative9: ['#497d0c', '#84BC49', '#88c3ea', '#fcad90', '#f26b4f', '#c31b1f', '#c31b1f'],
-  'sequential-blue-2(MPX)': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
-  'sequential-orange(MPX)': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00']
+  'sequential-blue-2(MPX)': [
+    '#F5FEFF',
+    '#E1FBFF',
+    '#C0F2FD',
+    '#94E2ED',
+    '#5EBAD4',
+    '#3695BE',
+    '#2273A0',
+    '#0E5181',
+    '#093460'
+  ],
+  'sequential-orange(MPX)': [
+    '#FFFDF0',
+    '#FFF7DC',
+    '#FFE9C2',
+    '#FFD097',
+    '#F7A866',
+    '#EB7723',
+    '#B95117',
+    '#853209',
+    '#661F00'
+  ],
+  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
 }
 
 // * ============= Palettes for Chart project ==========  * //
 
 const colorPalettes2 = {
-  'qualitative-bold': ['#377eb8', '#ff7f00', '#4daf4a', '#984ea3', '#e41a1c', '#ffff33', '#a65628', '#f781bf', '#3399CC'],
+  'qualitative-bold': [
+    '#377eb8',
+    '#ff7f00',
+    '#4daf4a',
+    '#984ea3',
+    '#e41a1c',
+    '#ffff33',
+    '#a65628',
+    '#f781bf',
+    '#3399CC'
+  ],
 
-  'qualitative-soft': ['#A6CEE3', '#1F78B4', '#B2DF8A', '#33A02C', '#FB9A99', '#E31A1C', '#FDBF6F', '#FF7F00', '#ACA9EB'],
-  qualitative1: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#6a3d9a', '#cab2d6', '#E31A90', '#15017A', '#C2C0FC'],
+  'qualitative-soft': [
+    '#A6CEE3',
+    '#1F78B4',
+    '#B2DF8A',
+    '#33A02C',
+    '#FB9A99',
+    '#E31A1C',
+    '#FDBF6F',
+    '#FF7F00',
+    '#ACA9EB'
+  ],
+  qualitative1: [
+    '#a6cee3',
+    '#1f78b4',
+    '#b2df8a',
+    '#33a02c',
+    '#fb9a99',
+    '#e31a1c',
+    '#6a3d9a',
+    '#cab2d6',
+    '#E31A90',
+    '#15017A',
+    '#C2C0FC'
+  ],
 
   qualitative2: ['#7fc97f', '#beaed4', '#ff9', '#386cb0', '#f0027f', '#bf5b17', '#666', '#fedab8'],
 
@@ -37,7 +112,9 @@ const colorPalettes2 = {
   'sequential-blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
   'sequential-blue-2-(MPX)': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
   'sequential-orange-(MPX)': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
+  'sequential-green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32'],
+
+  colorblindsafe: ['#e69f00', '#56b4e9', '#009e73', '#f0e442', '#0072b2', '#d55e00', '#cc79a7', '#000000', '#7e5803']
 }
 // * ============= Palettes for Paired bar Chart ==========  * //
 export const colorPalettes3 = {
@@ -62,9 +139,29 @@ export const colorPalettes3 = {
 const sequentialColors = {
   'Sequential Blue': ['#C6DBEF', '#9ECAE1', '#6BAED6', '#4292C6', '#2171B5', '#084594'],
   'Sequential Blue Two': ['#D5F6F9', '#99E2ED', '#5FB6D1', '#3189B0', '#116091', '#0A3E72'],
-  'Sequential Blue Three': ['#F5FEFF', '#E1FBFF', '#C0F2FD', '#94E2ED', '#5EBAD4', '#3695BE', '#2273A0', '#0E5181', '#093460'],
+  'Sequential Blue Three': [
+    '#F5FEFF',
+    '#E1FBFF',
+    '#C0F2FD',
+    '#94E2ED',
+    '#5EBAD4',
+    '#3695BE',
+    '#2273A0',
+    '#0E5181',
+    '#093460'
+  ],
   'Sequential Orange': ['#FFEFCF', '#FFD49C', '#F7A866', '#EB7723', '#B95117', '#862B0B'],
-  'Sequential Orange Two': ['#FFFDF0', '#FFF7DC', '#FFE9C2', '#FFD097', '#F7A866', '#EB7723', '#B95117', '#853209', '#661F00'],
+  'Sequential Orange Two': [
+    '#FFFDF0',
+    '#FFF7DC',
+    '#FFE9C2',
+    '#FFD097',
+    '#F7A866',
+    '#EB7723',
+    '#B95117',
+    '#853209',
+    '#661F00'
+  ],
   'Sequential Green': ['#C7E9C0', '#A1D99B', '#74C476', '#41AB5D', '#238B45', '#005A32']
 }