@cdc/core 4.24.9 → 4.24.11

package/components/Filters/helpers/tests/getNestedOptions.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest'
+import { getNestedOptions } from '../getNestedOptions'
+import { SubGrouping } from '../../../../types/VizFilter'
+import { NestedOptions } from '../../../NestedDropdown/nestedDropdownHelpers'
+
+describe('getNestedOptions', () => {
+  it('should return nested options when orderedValues is not provided', () => {
+    const params = {
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when orderedValues is provided', () => {
+    const params = {
+      orderedValues: ['value2', 'value1'],
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value2'], []],
+      [['value1'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is not provided', () => {
+    const params = {
+      values: ['value1', 'value2'],
+      subGrouping: null
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], []],
+      [['value2'], []]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is provided with nested values', () => {
+    const subGrouping: SubGrouping = {
+      valuesLookup: {
+        value1: {
+          orderedValues: ['subValue2', 'subValue1'],
+          values: ['subValue1', 'subValue2']
+        },
+        value2: {
+          orderedValues: null,
+          values: ['subValue3']
+        }
+      }
+    }
+    const params = {
+      orderedValues: ['value1', 'value2'],
+      values: ['value1', 'value2'],
+      subGrouping
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], [['subValue2'], ['subValue1']]],
+      [['value2'], [['subValue3']]]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+
+  it('should return nested options when subGrouping is provided without orderedValues', () => {
+    const subGrouping: SubGrouping = {
+      valuesLookup: {
+        value1: {
+          orderedValues: null,
+          values: ['subValue1', 'subValue2']
+        },
+        value2: {
+          orderedValues: null,
+          values: ['subValue3']
+        }
+      }
+    }
+    const params = {
+      orderedValues: ['value1', 'value2'],
+      values: ['value1', 'value2'],
+      subGrouping
+    }
+    const expectedOutput: NestedOptions = [
+      [['value1'], [['subValue1'], ['subValue2']]],
+      [['value2'], [['subValue3']]]
+    ]
+    expect(getNestedOptions(params)).toEqual(expectedOutput)
+  })
+})

package/components/Filters/helpers/tests/handleSorting.test.ts

@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { handleSorting } from '../handleSorting'
+import _ from 'lodash'
+
+describe('handleSorting', () => {
+  it('should use orderedValues when order is "cust" and filterStyle is not "nested-dropdown"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value3'],
+      order: 'cust',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort values in ascending order by default', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      order: 'asc',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort values in descending order when order is "desc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      order: 'desc',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value3', 'value2', 'value1'])
+  })
+
+  it('should not use orderedValues when filterStyle is "nested-dropdown"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value3'],
+      order: 'cust',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should handle empty orderedValues when order is "cust"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: [],
+      order: 'cust',
+      filterStyle: 'someOtherStyle'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.values).toEqual(['value3', 'value1', 'value2'])
+  })
+})

package/components/Filters/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Filters'
+
+export { filterOrderOptions, filterStyleOptions, useFilters } from './Filters'
+
+export { handleSorting } from './helpers/handleSorting'

package/components/Layout/components/Sidebar/components/sidebar.styles.scss

@@ -1,5 +1,3 @@
-@import '@cdc/core/styles/v2/themes/_color-definitions.scss';
-
 .cdc-editor .configure .type-dashboard .sidebar {
   top: 0;
 }
@@ -210,7 +208,7 @@
 
       svg {
         width: 60px;
-        color: $blue;
+        color: var(--blue);
         margin-right: 1rem;
         height: 60px; // IE11
         path {
@@ -544,10 +542,6 @@
       font-weight: normal;
     }
 
-    .btn {
-      margin-top: 1em;
-    }
-
     .sort-list {
       list-style: none;
 

package/components/Layout/components/Visualization/visualizations.scss

@@ -1,6 +1,6 @@
 .cdc-open-viz-module {
   .cdc-chart-inner-container .cove-component__content {
-    padding: 25px 15px !important;
+    padding: 25px 0px !important;
   }
   &.isEditor {
     overflow: auto;

package/components/Legend/Legend.Gradient.tsx

@@ -1,10 +1,14 @@
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
-import { type ViewportSize, type MapConfig } from '@cdc/map/src/types/MapConfig'
+import { type MapConfig } from '@cdc/map/src/types/MapConfig'
 import { type ChartConfig } from '@cdc/chart/src/types/ChartConfig'
-import { getGradientLegendWidth } from '@cdc/core/helpers/getGradientLegendWidth'
+import { getTextWidth } from '../../helpers/getTextWidth'
 import { DimensionsType } from '../../types/Dimensions'
 
+const MARGIN = 1
+const BORDER_SIZE = 1
+const MOBILE_BREAKPOINT = 576
+
 type CombinedConfig = MapConfig | ChartConfig
 
 interface GradientProps {
@@ -12,8 +16,7 @@ interface GradientProps {
   colors: string[]
   config: CombinedConfig
   dimensions: DimensionsType
-  currentViewport: ViewportSize
-  getTextWidth: (text: string, font: string) => string
+  parentPaddingToSubtract?: number
 }
 
 const LegendGradient = ({
@@ -21,29 +24,32 @@ const LegendGradient = ({
   colors,
   config,
   dimensions,
-  currentViewport,
-  getTextWidth
+  parentPaddingToSubtract = 0
 }: GradientProps): JSX.Element => {
+  const { uid, legend, type } = config
+  const { tickRotation, position, style, subStyle, hideBorder } = legend
+
+  const isLinearBlocks = subStyle === 'linear blocks'
   let [width] = dimensions
 
-  const legendWidth = getGradientLegendWidth(width, currentViewport)
-  const uniqueID = `${config.uid}-${Date.now()}`
+  const smallScreen = width <= MOBILE_BREAKPOINT
+  const legendWidth = Number(width) - parentPaddingToSubtract - MARGIN * 2 - BORDER_SIZE * 2
+  const uniqueID = `${uid}-${Date.now()}`
 
   const numTicks = colors?.length
 
   const longestLabel = labels && labels.length > 0 ? labels.reduce((a, b) => (a.length > b.length ? a : b)) : ''
   const boxHeight = 20
   let height = 50
-  const margin = 1
 
   // configure tick witch and angle
   const textWidth = getTextWidth(longestLabel, `normal 14px sans-serif`)
-  const rotationAngle = Number(config.legend.tickRotation) || 0
+  const rotationAngle = Number(tickRotation) || 0
   // Convert the angle from degrees to radians
   const angleInRadians = rotationAngle * (Math.PI / 180)
   const newHeight = height + Number(textWidth) * Math.sin(angleInRadians)
 
-  // configre gradient colors
+  // configure gradient colors
   const stops = colors.map((color, index) => {
     const offset = (index / (colors.length - 1)) * 100
     return <stop key={index} offset={`${offset}%`} style={{ stopColor: color, stopOpacity: 1 }} />
@@ -52,69 +58,71 @@ const LegendGradient = ({
   // render ticks and labels
   const ticks = labels.map((key, index) => {
     const segmentWidth = legendWidth / numTicks
-    const xPositionX = index * segmentWidth + segmentWidth
+    const xPositionX = index * segmentWidth + segmentWidth + MARGIN
     const textAnchor = rotationAngle ? 'end' : 'middle'
     const verticalAnchor = rotationAngle ? 'middle' : 'start'
+    const lastTick = index === labels.length - 1
 
     return (
-      <Group top={margin}>
-        <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />
+      <Group top={MARGIN}>
+        {!lastTick && !isLinearBlocks && <line x1={xPositionX} x2={xPositionX} y1={30} y2={boxHeight} stroke='black' />}
         <Text
-          angle={-config.legend.tickRotation}
+          angle={-tickRotation}
           x={xPositionX}
           y={boxHeight}
           dy={10}
           dx={-segmentWidth / 2}
-          fontSize='14'
+          fontSize={smallScreen ? '12' : '14'}
           textAnchor={textAnchor}
           verticalAnchor={verticalAnchor}
+          width={segmentWidth}
+          lineHeight={'14'}
         >
           {key}
         </Text>
       </Group>
     )
   })
-  if ((config.type === 'map' && config.legend.position === 'side') || !config.legend.position) {
+  if ((type === 'map' && position === 'side') || !position) {
     return
   }
-  if (
-    config.type === 'chart' &&
-    (config.legend.position === 'left' || config.legend.position === 'right' || !config.legend.position)
-  ) {
+  if (type === 'chart' && (position === 'left' || position === 'right' || !position)) {
     return
   }
 
-  if (config.legend.style === 'gradient') {
+  if (style === 'gradient') {
     return (
-      <svg style={{ overflow: 'visible', width: '100%', marginTop: 10 }} height={newHeight}>
+      <svg
+        style={{ overflow: 'visible', width: '100%', marginTop: 10, marginBottom: hideBorder ? 10 : 0 }}
+        height={newHeight}
+      >
         {/* background border*/}
-        <rect
-          x={0}
-          y={0}
-          width={legendWidth + margin * 2}
-          height={boxHeight + margin * 2}
-          fill='#d3d3d3'
-          strokeWidth='0.5'
-        />
+        <rect x={0} y={0} width={legendWidth + MARGIN * 2} height={boxHeight + MARGIN * 2} fill='#d3d3d3' />
         {/* Define the gradient */}
         <linearGradient id={`gradient-smooth-${uniqueID}`} x1='0%' y1='0%' x2='100%' y2='0%'>
           {stops}
         </linearGradient>
 
-        {config.legend.subStyle === 'smooth' && (
-          <rect x={1} y={1} width={legendWidth} height={boxHeight} fill={`url(#gradient-smooth-${uniqueID})`} />
+        {subStyle === 'smooth' && (
+          <rect
+            x={MARGIN}
+            y={MARGIN}
+            width={legendWidth}
+            height={boxHeight}
+            fill={`url(#gradient-smooth-${uniqueID})`}
+          />
         )}
 
-        {config.legend.subStyle === 'linear blocks' &&
+        {subStyle === 'linear blocks' &&
           colors.map((color, index) => {
             const segmentWidth = legendWidth / numTicks
-            const xPosition = index * segmentWidth
+            const xPosition = index * segmentWidth + MARGIN
             return (
               <Group>
                 <rect
                   key={index}
                   x={xPosition}
-                  y={0}
+                  y={MARGIN}
                   width={segmentWidth}
                   height={boxHeight}
                   fill={color}

package/components/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react'
+import './loader.styles.css'
+
+type LoaderProps = {
+  fullScreen?: boolean
+}
+
+const Spinner = () => (
+  <div className='spinner-border text-primary' role='status'>
+    <span className='sr-only'>Loading...</span>
+  </div>
+)
+
+const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
+  const backgroundRef = useRef(null)
+
+  useEffect(() => {
+    if (backgroundRef?.current) {
+      const backgroundHeight = backgroundRef.current.parentElement.clientHeight
+      backgroundRef.current.style.height = `${backgroundHeight}px`
+    }
+  }, [])
+
+  return fullScreen ? (
+    <div ref={backgroundRef} className='cove-loader fullscreen'>
+      <Spinner />
+    </div>
+  ) : (
+    <Spinner />
+  )
+}
+
+export default Loader

package/components/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader'

package/components/Loader/loader.styles.css

@@ -0,0 +1,13 @@
+.cove-loader {
+  &.fullscreen {
+    background: rgba(255, 255, 255, 0.8);
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 100;
+    & > * {
+      margin-top: 40vh;
+    }
+  }
+}

package/components/MultiSelect/MultiSelect.tsx

@@ -22,7 +22,17 @@ interface MultiSelectProps {
   tooltip?: React.ReactNode
 }
 
-const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection = null, fieldName, label, options, updateField, selected = [], limit, tooltip }) => {
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  section = null,
+  subsection = null,
+  fieldName,
+  label,
+  options,
+  updateField,
+  selected = [],
+  limit,
+  tooltip
+}) => {
   const preselectedItems = options.filter(opt => selected.includes(opt.value)).slice(0, limit)
   const [selectedItems, setSelectedItems] = useState<Option[]>(preselectedItems)
   const [expanded, setExpanded] = useState(false)
@@ -67,77 +77,90 @@ const MultiSelect: React.FC<MultiSelectProps> = ({ section = null, subsection =
 
   const multiID = 'multiSelect_' + label
   return (
-    <div ref={multiSelectRef} className='cove-multiselect'>
+    <>
       {label && (
-        <span id={multiID} className='edit-label column-heading'>
+        <label className='text-capitalize font-weight-bold' id={multiID + label} htmlFor={multiID}>
           {label}
-        </span>
+        </label>
       )}
+      <div ref={multiSelectRef} className='cove-multiselect'>
+        {tooltip && tooltip}
 
-      {tooltip && tooltip}
-
-      <div className='wrapper'>
-        <div className='selected'>
-          {selectedItems.map(item => (
-            <div key={item.value} aria-labelledby={label ? multiID : undefined}>
-              {item.label}
-              <button
-                aria-label='Remove'
-                onClick={e => {
-                  e.preventDefault()
-                  handleItemRemove(item)
-                }}
-                onKeyUp={e => {
-                  handleItemRemove(item, e)
-                }}
-              >
-                x
-              </button>
-            </div>
-          ))}
-          <button
-            aria-label={expanded ? 'Collapse' : 'Expand'}
-            aria-labelledby={label ? multiID : undefined}
-            className='expand'
-            onClick={e => {
-              e.preventDefault()
-              setExpanded(!expanded)
+        <div className='wrapper'>
+          <div
+            id={multiID}
+            onClick={() => {
+              if (!selectedItems.length) {
+                setExpanded(true)
+              }
             }}
+            className='selected'
           >
-            <Icon display={expanded ? 'caretDown' : 'caretUp'} style={{ cursor: 'pointer' }} />
-          </button>
-        </div>
-        {!!limit && (
-          <Tooltip style={{ textTransform: 'none' }}>
-            <Tooltip.Target>
-              <Icon display='question' style={{ marginLeft: '0.5rem' }} />
-            </Tooltip.Target>
-            <Tooltip.Content>
-              <p>Select up to {limit} items</p>
-            </Tooltip.Content>
-          </Tooltip>
-        )}
-      </div>
-      <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
-        {options
-          .filter(option => !selectedItems.find(item => item.value === option.value))
-          .map(option => (
-            <li
-              className='cove-multiselect-li'
-              key={option.value}
-              role='option'
-              tabIndex={0}
+            {selectedItems.length ? (
+              selectedItems.map(item => (
+                <div key={item.value} aria-labelledby={label ? multiID + label : undefined}>
+                  {item.label}
+                  <button
+                    aria-label='Remove'
+                    onClick={e => {
+                      e.preventDefault()
+                      handleItemRemove(item)
+                    }}
+                    onKeyUp={e => {
+                      handleItemRemove(item, e)
+                    }}
+                  >
+                    x
+                  </button>
+                </div>
+              ))
+            ) : (
+              <span className='pl-1 pt-1'>- Select -</span>
+            )}
+            <button
+              aria-label={expanded ? 'Collapse' : 'Expand'}
+              aria-labelledby={label ? multiID : undefined}
+              className='expand'
               onClick={e => {
                 e.preventDefault()
-                handleItemSelect(option, e)
+                setExpanded(!expanded)
               }}
-              onKeyUp={e => handleItemSelect(option, e)}
             >
-              {option.label}
-            </li>
-          ))}
-      </ul>
-    </div>
+              <Icon display={'caretDown'} style={{ cursor: 'pointer' }} />
+            </button>
+          </div>
+          {!!limit && (
+            <Tooltip style={{ textTransform: 'none' }}>
+              <Tooltip.Target>
+                <Icon display='question' style={{ marginLeft: '0.5rem' }} />
+              </Tooltip.Target>
+              <Tooltip.Content>
+                <p>Select up to {limit} items</p>
+              </Tooltip.Content>
+            </Tooltip>
+          )}
+        </div>
+        <ul className={'dropdown' + (expanded ? '' : ' d-none')}>
+          {options
+            .filter(option => !selectedItems.find(item => item.value === option.value))
+            .map(option => (
+              <li
+                className='cove-multiselect-li'
+                key={option.value}
+                role='option'
+                tabIndex={0}
+                onClick={e => {
+                  e.preventDefault()
+                  handleItemSelect(option, e)
+                }}
+                onKeyUp={e => handleItemSelect(option, e)}
+              >
+                {option.label}
+              </li>
+            ))}
+        </ul>
+      </div>
+    </>
   )
 }
 

package/components/MultiSelect/multiselect.styles.css

@@ -1,5 +1,4 @@
 .cove-multiselect {
-  position: relative;
   .cove-input__label {
     display: block;
   }
@@ -8,8 +7,7 @@
     align-items: center;
     .selected {
       border: 1px solid var(--lightGray);
-      padding: 5px;
-      min-height: 40px;
+      padding: 7px;
       min-width: 200px;
       display: inline-block;
       :is(button) {
@@ -25,10 +23,14 @@
         border-radius: 5px;
       }
       .expand {
-        padding: 0 5px;
-        border-radius: 5px;
-        background: var(--lightGray);
+        padding: 2px 0px;
+        margin-right: -6px;
         float: right;
+        margin-bottom: -3px;
+        color: var(--mediumGray);
+        &:focus {
+          outline: none;
+        }
       }
       border-radius: 5px;
     }
@@ -43,7 +45,8 @@
   .dropdown {
     background: white;
     position: absolute;
-    margin-top: 5px;
+    top: var(--select-height);
+    margin-top: 0px;
     border: 1px solid var(--lightGray);
     padding-left: 0;
     min-height: 40px;