@cdc/core 4.24.11 → 4.24.12-2

package/components/Alert/components/Alert.tsx

@@ -20,6 +20,8 @@ type AlertProps = {
   autoDismiss?: boolean
   // set seconds until autoDismiss, default is 5 seconds
   secondsBeforeDismiss?: number
+  // provide option for non dismissable alert
+  showCloseButton?: boolean
 }
 
 const Alert: React.FC<AlertProps> = ({
@@ -29,7 +31,8 @@ const Alert: React.FC<AlertProps> = ({
   heading,
   onDismiss,
   autoDismiss,
-  secondsBeforeDismiss = 5
+  secondsBeforeDismiss = 5,
+  showCloseButton = true
 }) => {
   // sanitize the text for setting dangerouslySetInnerHTML
 
@@ -55,9 +58,11 @@ const Alert: React.FC<AlertProps> = ({
         {type === 'info' && <Icon display='info' size={iconSize} />}
         <span dangerouslySetInnerHTML={sanitizedData()} />
       </div>
-      <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
-        X
-      </button>
+      {showCloseButton && (
+        <button type='button' className='close pl-5' aria-label='Close' onClick={() => onDismiss()}>
+          X
+        </button>
+      )}
     </div>
   )
 }

package/components/DataTable/DataTable.tsx

@@ -202,7 +202,7 @@ const DataTable = (props: DataTableProps) => {
       : config.visualizationType === 'Pie'
       ? [config.yAxis.dataKey]
       : config.visualizationType === 'Box Plot'
-        ? Object.entries(config.boxplot.tableData[0])
+        ? config?.boxplot?.plots?.[0] ? Object.entries(config.boxplot.plots[0]) : []
         : config.runtime?.seriesKeys),
     [config.runtime?.seriesKeys]) // eslint-disable-line
 
@@ -244,17 +244,28 @@ const DataTable = (props: DataTableProps) => {
         </MediaControls.Section>
       )
     }
+    const getClassNames = (): string => {
+      const classes = ['data-table-container']
+      const isBrushActive = config?.brush?.active && config.legend?.position !== 'bottom'
+
+      if (isBrushActive) {
+        classes.push('brush-active')
+      }
+
+      classes.push(viewport)
+
+      const downloadLinkClass = !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
+      if (downloadLinkClass) {
+        classes.push(downloadLinkClass)
+      }
+
+      return classes.join(' ')
+    }
 
     return (
       <ErrorBoundary component='DataTable'>
         {!config.table.showDownloadLinkBelow && <TableMediaControls />}
-        <section
-          id={tabbingId.replace('#', '')}
-          className={`data-table-container ${viewport} ${
-            !config.table.showDownloadLinkBelow ? 'download-link-above' : ''
-          }`}
-          aria-label={accessibilityLabel}
-        >
+        <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
             <ExpandCollapse

package/components/DataTable/DataTableStandAlone.tsx

@@ -6,6 +6,7 @@ import DataTableEditorPanel from './components/DataTableEditorPanel'
 import Filters from '../Filters'
 import { TableConfig } from './types/TableConfig'
 import { filterVizData } from '../../helpers/filterVizData'
+import { addValuesToFilters } from '../../helpers/addValuesToFilters'
 
 type StandAloneProps = {
   visualizationKey: string
@@ -28,9 +29,8 @@ const DataTableStandAlone: React.FC<StandAloneProps> = ({
 
   useEffect(() => {
     // when using editor changes to filter should update the data
-    setFilteredData(
-      filterVizData(config.filters, config?.formattedData?.length > 0 ? config.formattedData : config.data)
-    )
+    const filters = addValuesToFilters(config.filters, config.data)
+    setFilteredData(filterVizData(filters, config?.formattedData?.length > 0 ? config.formattedData : config.data))
   }, [config.filters])
 
   if (isEditor)

package/components/DataTable/components/ExpandCollapse.tsx

@@ -2,7 +2,7 @@ import Icon from '../../ui/Icon'
 import { fontSizes } from '../../../helpers/cove/fontSettings'
 
 const ExpandCollapse = ({ expanded, setExpanded, tableTitle, fontSize, viewport }) => {
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
+  const titleFontSize = ['xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[fontSize]}px`
   return (
     <div
       style={{ fontSize: titleFontSize }}

package/components/DataTable/components/SortIcon/sort-icon.css

@@ -19,3 +19,18 @@
     top: 0.5rem;
   }
 }
+
+@media (max-width: 576px) {
+  .sort-icon {
+    :is(svg) {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+    .up {
+      bottom: 0.3rem;
+    }
+    .down {
+      top: 0.3rem;
+    }
+  }
+}

package/components/DataTable/helpers/boxplotCellMatrix.tsx

@@ -18,7 +18,7 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
       values: labels.values,
       columnCount: labels.count,
       columnSd: 'Standard Deviation',
-      nonOutlierValues: 'Non Outliers',
+      columnNonOutliers: 'Non Outliers',
       columnLowerBounds: labels.lowerBounds,
       columnUpperBounds: labels.upperBounds
     }
@@ -36,8 +36,12 @@ const boxplotCellMatrix = ({ rows, config }): CellMatrix => {
     if (Number(rowid) === 5) return plot.columnCount
     if (Number(rowid) === 6) return plot.columnSd
     if (Number(rowid) === 7) return plot.columnMean
-    if (Number(rowid) === 8) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 8) return plot.columnIqr
     if (Number(rowid) === 9) return plot.values.length > 0 ? plot.values.toString() : '-'
+    if (Number(rowid) === 10) return plot.columnLowerBounds
+    if (Number(rowid) === 11) return plot.columnUpperBounds
+    if (Number(rowid) === 12) return plot.columnOutliers.length > 0 ? plot.columnOutliers.toString() : '-'
+    if (Number(rowid) === 13) return plot.columnNonOutliers.length > 0 ? plot.columnNonOutliers.toString() : '-'
     return <p>-</p>
   }
   // get list of data keys for each row

package/components/DataTable/helpers/getChartCellValue.ts

@@ -29,18 +29,18 @@ export const getChartCellValue = (row: string, column: string, config: TableConf
 
   const rowObj = runtimeData[row]
   let cellValue // placeholder for formatting below
-  let labelValue = rowObj[column] // just raw X axis string
+  const labelValue = rowObj[column] // just raw X axis string
   if (column === config.xAxis?.dataKey) {
-    // not the prettiest, but helper functions work nicely here.
-    cellValue =
-      config.xAxis?.type === 'date'
-        ? formatDate(
-            config.table?.dateDisplayFormat || config.xAxis?.dateDisplayFormat,
-            parseDate(config.xAxis?.dateParseFormat, labelValue)
-          )
-        : labelValue
-    cellValue =
-      config.xAxis?.type === 'continuous' ? formatNumber(runtimeData[row][column], 'bottom', false, config) : labelValue
+    const { type, dateDisplayFormat, dateParseFormat } = config.xAxis || {}
+    const dateFormat = config.table?.dateDisplayFormat || dateDisplayFormat
+
+    if (type === 'date' || type === 'date-time') {
+      cellValue = formatDate(dateFormat, parseDate(dateParseFormat, labelValue))
+    } else if (type === 'continuous') {
+      cellValue = formatNumber(runtimeData[row][column], 'bottom', false, config)
+    } else {
+      cellValue = labelValue
+    }
   } else {
     let resolvedAxis = 'left'
     let leftAxisItems = config.series ? config.series.filter(item => item?.axis === 'Left') : []

package/components/EditorPanel/DataTableEditor.tsx

@@ -205,15 +205,18 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         />
       )}
       {config?.visualizationType !== 'Sankey' && (
-        <MultiSelect
-          key={excludedColumns.join('') + 'excluded'}
-          options={dataColumns.map(c => ({ label: c, value: c }))}
-          selected={excludedColumns}
-          fieldName='dataTable'
-          label='Exclude Columns'
-          section='columns'
-          updateField={excludeColumns}
-        />
+        <label>
+          <span className='edit-label column-heading mt-1'>Exclude Columns </span>
+          <MultiSelect
+            key={excludedColumns.join('') + 'excluded'}
+            options={dataColumns.map(c => ({ label: c, value: c }))}
+            selected={excludedColumns}
+            label={'Exclude Columns'}
+            fieldName='dataTable'
+            section='columns'
+            updateField={excludeColumns}
+          />
+        </label>
       )}
       <CheckBox
         value={config.table.collapsible}
@@ -323,18 +326,9 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
         updateField={updateField}
       />
       {config.table.pivot?.columnName && (
-        <MultiSelect
-          key={config.table.pivot?.columnName}
-          options={groupPivotColumns
-            .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
-            .map(c => ({ label: c, value: c }))}
-          selected={config.table.pivot?.valueColumns}
-          label='Pivot Value Column(s) '
-          section='table'
-          subsection='pivot'
-          fieldName='valueColumns'
-          updateField={updateField}
-          tooltip={
+        <label>
+          <span className='edit-label column-heading mt-1'>
+            Pivot Value Column(s)
             <Tooltip style={{ textTransform: 'none' }}>
               <Tooltip.Target>
                 <Icon display='question' style={{ marginLeft: '0.5rem' }} />
@@ -343,8 +337,20 @@ const DataTableEditor: React.FC<DataTableProps> = ({ config, updateField, isDash
                 <p>The column(s) whos values will be pivoted under the column selected as the Filter.</p>
               </Tooltip.Content>
             </Tooltip>
-          }
-        />
+          </span>
+          <MultiSelect
+            key={config.table.pivot?.columnName}
+            options={groupPivotColumns
+              .filter(col => col !== config.table.pivot?.columnName && col !== config.table.groupBy)
+              .map(c => ({ label: c, value: c }))}
+            selected={config.table.pivot?.valueColumns}
+            label='Pivot Value Column(s) '
+            section='table'
+            subsection='pivot'
+            fieldName='valueColumns'
+            updateField={updateField}
+          />
+        </label>
       )}
     </>
   )

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -67,7 +67,12 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
 
   const addNewFilter = () => {
     const filters = config.filters ? [...config.filters] : []
-    const newVizFilter: VizFilter = { values: [], filterStyle: 'dropdown', id: Date.now() } as VizFilter
+    const newVizFilter: VizFilter = {
+      values: [],
+      filterStyle: 'dropdown',
+      id: Date.now(),
+      showDropdown: true
+    } as VizFilter
     filters.push(newVizFilter)
     updateField(null, null, 'filters', filters)
   }
@@ -125,6 +130,13 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
               </Tooltip>
             }
           />
+          <TextField
+            type='textarea'
+            label='Filter intro text'
+            value={config.filterIntro}
+            updateField={updateField}
+            fieldName='filterIntro'
+          />
           <br />
           <ul className='filters-list'>
             {/* Whether filters should apply onChange or Apply Button */}
@@ -229,6 +241,17 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                           handleFilterOrder={(index1, index2) => handleFilterOrder(index1, index2, filterIndex)}
                         />
                       )}
+                      {filter.order === 'column' && (
+                        <Select
+                          value={filter.orderColumn}
+                          fieldName='orderColumn'
+                          label='Order Column'
+                          updateField={(_section, _subSection, _field, value) =>
+                            updateFilterProp('orderColumn', filterIndex, value)
+                          }
+                          options={dataColumns}
+                        />
+                      )}
                     </>
                   ) : (
                     <NestedDropdownEditor
@@ -262,6 +285,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         updateFilterProp('parents', filterIndex, value)
                       }}
                       options={getParentFilterOptions(filterIndex)}
+                      selected={config.filters[filterIndex].parents}
                     />
                   </label>
                 </FieldSetWrapper>

package/components/Filters/Filters.tsx

@@ -41,18 +41,25 @@ export const filterOrderOptions: { label: string; value: OrderBy }[] = [
   {
     label: 'Custom',
     value: 'cust'
-  }
+  },
+  { label: 'Order By Data Column', value: 'column' }
 ]
 
-const hasStandardFilterBehavior = ['chart', 'table']
-
 export const useFilters = props => {
   const [showApplyButton, setShowApplyButton] = useState(false)
 
   // Desconstructing: notice, adding more descriptive visualizationConfig name over config
   // visualizationConfig feels more robust for all vis types so that its not confused with config/state/etc.
-  const { config: visualizationConfig, setConfig, filteredData, setFilteredData, excludedData, getUniqueValues } = props
-  const { type, data } = visualizationConfig
+  const {
+    config: visualizationConfig,
+    setConfig,
+    filteredData,
+    setFilteredData,
+    excludedData,
+    getUniqueValues,
+    standaloneMap
+  } = props
+  const { data } = visualizationConfig
 
   /**
    * Re-orders a filter based on two indices and updates the runtime filters array and filters state
@@ -72,9 +79,7 @@ export const useFilters = props => {
     const [movedItem] = updatedValues.splice(idx1, 1)
     updatedValues.splice(idx2, 0, movedItem)
 
-    const filtersCopy = hasStandardFilterBehavior.includes(visualizationConfig.type)
-      ? [...visualizationConfig.filters]
-      : [...filteredData]
+    const filtersCopy = !standaloneMap ? [...visualizationConfig.filters] : [...filteredData]
     const filterItem = { ...filtersCopy[filterIndex] }
 
     // Overwrite filterItem.values since thats what we map through in the editor panel
@@ -86,7 +91,7 @@ export const useFilters = props => {
     // Update the filters
     filtersCopy[filterIndex] = filterItem
 
-    if (visualizationConfig.type === 'map') {
+    if (standaloneMap) {
       setFilteredData(filtersCopy)
     }
 
@@ -94,7 +99,7 @@ export const useFilters = props => {
   }
 
   const changeFilterActive = (index, value) => {
-    let newFilters = visualizationConfig.type === 'map' ? [...filteredData] : [...visualizationConfig.filters]
+    let newFilters = standaloneMap ? [...filteredData] : [...visualizationConfig.filters]
 
     if (visualizationConfig.filterBehavior === 'Apply Button') {
       newFilters[index].queuedActive = value
@@ -120,7 +125,7 @@ export const useFilters = props => {
         queryParams[newFilter?.subGrouping?.setByQueryParameter] = newFilter.subGrouping.active
         updateQueryString(queryParams)
       }
-      setFilteredData(newFilters[index])
+      setFilteredData(newFilters)
     }
 
     if (!visualizationConfig.dynamicSeries) {
@@ -132,15 +137,12 @@ export const useFilters = props => {
     }
 
     // Used for setting active filter, fromHash breaks the filteredData functionality.
-    if (visualizationConfig.type === 'map' && visualizationConfig.filterBehavior === 'Filter Change') {
+    if (standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       setFilteredData(newFilters)
     }
 
     // If we're on a chart and not using the apply button
-    if (
-      hasStandardFilterBehavior.includes(visualizationConfig.type) &&
-      visualizationConfig.filterBehavior === 'Filter Change'
-    ) {
+    if (!standaloneMap && visualizationConfig.filterBehavior === 'Filter Change') {
       const newFilteredData = filterVizData(newFilters, excludedData)
       setFilteredData(newFilteredData)
 
@@ -204,11 +206,9 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
-    }
-
-    if (hasStandardFilterBehavior.includes(visualizationConfig.type)) {
+    } else {
       setFilteredData(filterVizData(newFilters, excludedData))
     }
 
@@ -240,7 +240,7 @@ export const useFilters = props => {
 
     setConfig({ ...visualizationConfig, filters: newFilters })
 
-    if (type === 'map') {
+    if (standaloneMap) {
       setFilteredData(newFilters, excludedData)
     } else {
       setFilteredData(filterVizData(newFilters, excludedData))
@@ -249,9 +249,7 @@ export const useFilters = props => {
 
   const filterConstants = {
     buttonText: 'Apply Filters',
-    resetText: 'Reset All',
-    introText: `Make a selection from the filters to change the visualization information.`,
-    applyText: 'Select the apply button to update the visualization information.'
+    resetText: 'Reset All'
   }
 
   // prettier-ignore
@@ -276,13 +274,12 @@ type FilterProps = {
   setFilteredData: Function
   // updating function for setting fitlerBehavior
   setConfig: Function
-  // exclusions
-  exclusions: any[]
+  standaloneMap?: boolean
 }
 
 const Filters = (props: FilterProps) => {
-  const { config: visualizationConfig, filteredData, dimensions } = props
-  const { filters, type, general, theme, filterBehavior } = visualizationConfig
+  const { config: visualizationConfig, filteredData, dimensions, standaloneMap } = props
+  const { filters, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
   const id = useId()
@@ -365,7 +362,7 @@ const Filters = (props: FilterProps) => {
 
   const vizFiltersWithValues = useMemo(() => {
     // Here charts is using config.filters where maps is using a runtime value
-    let vizfilters = type === 'map' ? filteredData : filters
+    let vizfilters = standaloneMap ? filteredData : filters
     if (!vizfilters) return []
     if (vizfilters.fromHash) delete vizfilters.fromHash // support for Maps config
     return addValuesToFilters(vizfilters as VizFilter[], visualizationConfig.data)
@@ -448,7 +445,7 @@ const Filters = (props: FilterProps) => {
         <div className={classList.join(' ')} key={outerIndex}>
           <>
             {label && (
-              <label className='text-capitalize font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
+              <label className='font-weight-bold mt-1 mb-0' htmlFor={`filter-${outerIndex}`}>
                 {label}
               </label>
             )}
@@ -494,7 +491,7 @@ const Filters = (props: FilterProps) => {
   const getClasses = () => {
     const { visualizationType, legend } = visualizationConfig || {}
     const baseClass = 'filters-section'
-    const conditionalClass = type === 'map' ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
+    const conditionalClass = standaloneMap ? general.headerColor : visualizationType === 'Spark Line' ? null : theme
     const legendClass = legend && !legend.hide && legend.position === 'top' ? 'mb-0' : null
 
     return [baseClass, conditionalClass, legendClass].filter(Boolean)
@@ -502,10 +499,9 @@ const Filters = (props: FilterProps) => {
 
   return (
     <section className={getClasses().join(' ')}>
-      <p className='filters-section__intro-text'>
-        {filters?.some(filter => filter.active && filter.columnName) ? filterConstants.introText : ''}{' '}
-        {visualizationConfig.filterBehavior === 'Apply Button' && filterConstants.applyText}
-      </p>
+      {visualizationConfig.filterIntro && (
+        <p className='filters-section__intro-text'>{visualizationConfig.filterIntro}</p>
+      )}
       <div className='d-flex flex-wrap w-100 filters-section__wrapper'>
         {' '}
         <>

package/components/Filters/helpers/handleSorting.ts

@@ -7,6 +7,11 @@ export const handleSorting = singleFilter => {
     return singleFilter
   }
 
+  if (singleFilter.order === 'column') {
+    // sorting is done in the generateValuesForFilter function
+    return singleFilter
+  }
+
   const sort = (a, b) => {
     const asc = singleFilter.order !== 'desc'
     return String(asc ? a : b).localeCompare(String(asc ? b : a), 'en', { numeric: true })

package/components/Footnotes/FootnotesStandAlone.tsx

@@ -15,20 +15,33 @@ type StandAloneProps = {
   viewport?: ViewPort
 }
 
-const FootnotesStandAlone: React.FC<StandAloneProps> = ({ visualizationKey, config, viewport, isEditor, updateConfig }) => {
+const FootnotesStandAlone: React.FC<StandAloneProps> = ({
+  visualizationKey,
+  config,
+  viewport,
+  isEditor,
+  updateConfig
+}) => {
   const updateField = updateFieldFactory<Footnote[]>(config, updateConfig)
   if (isEditor)
     return (
-      <EditorWrapper component={FootnotesStandAlone} visualizationKey={visualizationKey} visualizationConfig={config} updateConfig={updateConfig} type={'Footnotes'} viewport={viewport}>
+      <EditorWrapper
+        component={FootnotesStandAlone}
+        visualizationKey={visualizationKey}
+        visualizationConfig={config}
+        updateConfig={updateConfig}
+        type={'Footnotes'}
+        viewport={viewport}
+      >
         <FootnotesEditor key={visualizationKey} config={config} updateField={updateField} />
       </EditorWrapper>
     )
 
   // get the api footnotes from the config
   const apiFootnotes = useMemo(() => {
-    if (config.dataKey && config.dynamicFootnotes) {
+    const configData = config.formattedData || config.data
+    if (configData && config.dataKey && config.dynamicFootnotes) {
       const { symbolColumn, textColumn, orderColumn } = config.dynamicFootnotes
-      const configData = config.formattedData || config.data
       const _data = configData.map(row => _.pick(row, [symbolColumn, textColumn, orderColumn]))
       _data.sort((a, b) => a[orderColumn] - b[orderColumn])
       return _data.map(row => ({ symbol: row[symbolColumn], text: row[textColumn] }))

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

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

package/components/Legend/Legend.Gradient.tsx

@@ -38,7 +38,7 @@ const LegendGradient = ({
 
   const numTicks = colors?.length
 
-  const longestLabel = labels && labels.length > 0 ? labels.reduce((a, b) => (a.length > b.length ? a : b)) : ''
+  const longestLabel = (labels || []).reduce((a: string, b) => (a.length > String(b).length ? a : b), '')
   const boxHeight = 20
   let height = 50
 

package/components/Loader/Loader.tsx

@@ -1,17 +1,22 @@
 import React, { useEffect, useRef } from 'react'
 import './loader.styles.css'
 
+// these coorespond to bootstrap classes
+// https://getbootstrap.com/docs/4.2/components/spinners/
+type SpinnerType = 'text-primary' | 'text-secondary'
+
 type LoaderProps = {
   fullScreen?: boolean
+  spinnerType?: SpinnerType
 }
 
-const Spinner = () => (
-  <div className='spinner-border text-primary' role='status'>
+const Spinner = ({ spinnerType }: { spinnerType: SpinnerType }) => (
+  <div className={`spinner-border ${spinnerType}`} role='status'>
     <span className='sr-only'>Loading...</span>
   </div>
 )
 
-const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
+const Loader: React.FC<LoaderProps> = ({ fullScreen = false, spinnerType }) => {
   const backgroundRef = useRef(null)
 
   useEffect(() => {
@@ -23,10 +28,10 @@ const Loader: React.FC<LoaderProps> = ({ fullScreen = false }) => {
 
   return fullScreen ? (
     <div ref={backgroundRef} className='cove-loader fullscreen'>
-      <Spinner />
+      <Spinner spinnerType={spinnerType || 'text-primary'} />
     </div>
   ) : (
-    <Spinner />
+    <Spinner spinnerType={spinnerType || 'text-primary'} />
   )
 }