@cdc/core 4.24.10 → 4.24.11

package/components/EditorPanel/Inputs.tsx

@@ -31,16 +31,6 @@ export type CheckboxProps = {
 } & Input &
   Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'>
 
-export type SelectProps = {
-  value?: string
-  options?: string[]
-  required?: boolean
-  initial?: string
-
-  // all other props
-  [x: string]: any
-} & Input
-
 const TextField = memo((props: TextFieldProps) => {
   const {
     display = true,
@@ -141,6 +131,16 @@ const CheckBox = memo((props: CheckboxProps) => {
   )
 })
 
+export type SelectProps = {
+  value?: string
+  options?: string[] | { label: string; value: string }[]
+  required?: boolean
+  initial?: string
+
+  // all other props
+  [x: string]: any
+} & Input
+
 const Select = memo((props: SelectProps) => {
   const {
     display = true,
@@ -156,11 +156,21 @@ const Select = memo((props: SelectProps) => {
     initial: initialValue,
     ...attributes
   } = props
-  let optionsJsx = options.map((optionName, index) => (
-    <option value={optionName} key={index}>
-      {optionName}
-    </option>
-  ))
+  const optionsJsx = options.map((option, index) => {
+    if (typeof option === 'string') {
+      return (
+        <option value={option} key={index}>
+          {option}
+        </option>
+      )
+    } else {
+      return (
+        <option value={option.value} key={index}>
+          {option.label}
+        </option>
+      )
+    }
+  })
 
   if (initialValue) {
     optionsJsx.unshift(
@@ -180,7 +190,7 @@ const Select = memo((props: SelectProps) => {
         {tooltip}
       </span>
       <select
-        className={required && !value ? 'warning' : ''}
+        className={`cove-form-select ${required && !value ? 'warning' : ''}`}
         name={fieldName}
         value={value}
         onChange={event => {

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -140,43 +140,24 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                   controls={openControls}
                   deleteField={() => removeFilter(filterIndex)}
                 >
-                  <label>
-                    <span className='edit-label column-heading'>Filter Style</span>
-
-                    <select
-                      value={filter.filterStyle || 'dropdown'}
-                      onChange={e => {
-                        updateFilterStyle(filterIndex, e.target.value)
-                      }}
-                    >
-                      {filterStyleOptions.map((item, index) => {
-                        return (
-                          <option key={`filter-style-${index}`} value={item}>
-                            {item}
-                          </option>
-                        )
-                      })}
-                    </select>
-                  </label>
+                  <Select
+                    value={filter.filterStyle}
+                    fieldName='filterStyle'
+                    label='Filter Style'
+                    updateField={(_section, _subsection, _field, value) => updateFilterStyle(filterIndex, value)}
+                    options={filterStyleOptions}
+                  />
 
                   {filter.filterStyle !== 'nested-dropdown' ? (
                     <>
-                      <label>
-                        <span className='edit-label column-heading'>Filter</span>
-                        <select
-                          value={filter.columnName}
-                          onChange={e => {
-                            handleNameChange(filterIndex, e.target.value)
-                          }}
-                        >
-                          <option value=''>- Select Option -</option>
-                          {dataColumns.map((dataKey, filterIndex) => (
-                            <option value={dataKey} key={filterIndex}>
-                              {dataKey}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
+                      <Select
+                        value={filter.columnName}
+                        fieldName='columnName'
+                        label='Filter'
+                        updateField={(_section, _subsection, _field, value) => handleNameChange(filterIndex, value)}
+                        options={dataColumns}
+                        initial='- Select Option -'
+                      />
 
                       <label>
                         <span className='edit-showDropdown column-heading'>Show Filter Input</span>
@@ -233,27 +214,21 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         />
                       </label>
 
-                      <label>
-                        <span className='edit-filterOrder column-heading'>Filter Order</span>
-                        <select
-                          value={filter.order ? filter.order : 'asc'}
-                          onChange={e => updateFilterProp('order', filterIndex, e.target.value)}
-                        >
-                          {filterOrderOptions.map((option, index) => {
-                            return (
-                              <option value={option.value} key={`filter-${index}`}>
-                                {option.label}
-                              </option>
-                            )
-                          })}
-                        </select>
-                        {filter.order === 'cust' && (
-                          <FilterOrder
-                            orderedValues={filter.orderedValues || filter.values}
-                            handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
-                          />
-                        )}
-                      </label>
+                      <Select
+                        value={filter.order || 'asc'}
+                        fieldName='order'
+                        label='Filter Order'
+                        updateField={(_section, _subSection, _field, value) =>
+                          updateFilterProp('order', filterIndex, value)
+                        }
+                        options={filterOrderOptions}
+                      />
+                      {filter.order === 'cust' && (
+                        <FilterOrder
+                          orderedValues={filter.orderedValues || filter.values}
+                          handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor

package/components/Filters/Filters.tsx

@@ -351,7 +351,7 @@ const Filters = (props: FilterProps) => {
         id={`filter-${outerIndex}`}
         name={label}
         aria-label={`Filter by ${label}`}
-        className='filter-select'
+        className='cove-form-select'
         data-index='0'
         value={active}
         onChange={e => {
@@ -439,6 +439,7 @@ const Filters = (props: FilterProps) => {
 
       const classList = [
         'single-filters',
+        'form-group mr-3',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
       const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
@@ -446,7 +447,11 @@ const Filters = (props: FilterProps) => {
       return (
         <div className={classList.join(' ')} key={outerIndex}>
           <>
-            {label && <label htmlFor={`filter-${outerIndex}`}>{label}</label>}
+            {label && (
+              <label className='text-capitalize font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+                {label}
+              </label>
+            )}
             {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
             {filterStyle === 'pill' && !mobileFilterStyle && Pills}
             {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
@@ -463,6 +468,7 @@ const Filters = (props: FilterProps) => {
               <NestedDropdown
                 activeGroup={(singleFilter.active as string) || (singleFilter.queuedActive || [])[0]}
                 activeSubGroup={(singleFilter.subGrouping?.active as string) || (singleFilter.queuedActive || [])[1]}
+                filterIndex={outerIndex}
                 options={getNestedOptions(singleFilter)}
                 listLabel={label}
                 handleSelectedItems={value => changeFilterActive(outerIndex, value)}
@@ -500,14 +506,16 @@ const Filters = (props: FilterProps) => {
         {filters?.some(filter => filter.active && filter.columnName) ? filterConstants.introText : ''}{' '}
         {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
       </p>
-      <div className='filters-section__wrapper'>
+      <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
         {' '}
         <>
           <Style />
           {filterBehavior === 'Apply Button' ? (
             <div className='filters-section__buttons'>
               <Button
-                onClick={() => handleApplyButton(filters)}
+                onClick={e => {
+                  handleApplyButton(filters)
+                }}
                 disabled={!showApplyButton}
                 className={[general?.headerColor ? general.headerColor : theme, 'apply'].join(' ')}
               >

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

@@ -542,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,11 +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 {
@@ -13,30 +16,40 @@ interface GradientProps {
   colors: string[]
   config: CombinedConfig
   dimensions: DimensionsType
-  currentViewport: ViewportSize
+  parentPaddingToSubtract?: number
 }
 
-const LegendGradient = ({ labels, colors, config, dimensions, currentViewport }: GradientProps): JSX.Element => {
+const LegendGradient = ({
+  labels,
+  colors,
+  config,
+  dimensions,
+  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 }} />
@@ -45,69 +58,71 @@ const LegendGradient = ({ labels, colors, config, dimensions, currentViewport }:
   // 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/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;