@coreui/react-pro 5.0.0-alpha.1 → 5.0.0-alpha.3

package/dist/types.d.ts

@@ -3,5 +3,5 @@ export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
 export type Gradients = 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient';
 export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
 export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
-export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
+export type TextColors = Colors | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string;
 export type Triggers = 'hover' | 'focus' | 'click';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.3",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/avatar/CAvatar.tsx

@@ -39,7 +39,7 @@ export interface CAvatarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Sets the text color of the component to one of CoreUI’s themed colors.
    *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
    */
   textColor?: TextColors
 }

package/src/components/badge/CBadge.tsx

@@ -37,7 +37,7 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
   /**
    * Sets the text color of the component to one of CoreUI’s themed colors.
    *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
    */
   textColor?: TextColors
 }

package/src/components/button/CButton.tsx

@@ -77,7 +77,7 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
     return (
       <CLink
         component={rest.href ? 'a' : component}
-        type={type}
+        {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
           variant ? `btn-${variant}-${color}` : `btn-${color}`,

package/src/components/button/__tests__/__snapshots__/CButton.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`CButton customize witch href 1`] = `
   <a
     class="btn btn-primary"
     href="/bazinga"
-    type="button"
   >
     Test
   </a>

package/src/components/card/CCard.tsx

@@ -19,7 +19,7 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Sets the text color context of the component to one of CoreUI’s themed colors.
    *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-emphasis' | 'secondary-emphasis' | 'success-emphasis' | 'danger-emphasis' | 'warning-emphasis' | 'info-emphasis' | 'light-emphasis' | 'body' | 'body-emphasis' | 'body-secondary' | 'body-tertiary' | 'black' | 'black-50' | 'white' | 'white-50' | string
    */
   textColor?: string
 }

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.tsx.snap

@@ -5,22 +5,26 @@ exports[`loads and displays CCarousel component 1`] = `
   <div
     class="carousel slide"
   >
-    <ol
+    <div
       class="carousel-indicators"
     >
-      <li
+      <button
+        aria-current="true"
+        aria-label="Slide 1"
         class="active"
         data-coreui-target=""
       />
-      <li
+      <button
+        aria-label="Slide 2"
         class=""
         data-coreui-target=""
       />
-      <li
+      <button
+        aria-label="Slide 3"
         class=""
         data-coreui-target=""
       />
-    </ol>
+    </div>
     <div
       class="carousel-inner"
     >

package/src/components/dropdown/CDropdown.tsx

@@ -107,6 +107,28 @@ interface ContextProps extends CDropdownProps {
   portal: boolean
 }
 
+export const getNextActiveElement = (
+  list: HTMLElement[],
+  activeElement: HTMLElement,
+  shouldGetNext: boolean,
+  isCycleAllowed: boolean,
+) => {
+  const listLength = list.length
+  let index = list.indexOf(activeElement)
+
+  if (index === -1) {
+    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
+  }
+
+  index += shouldGetNext ? 1 : -1
+
+  if (isCycleAllowed) {
+    index = (index + listLength) % listLength
+  }
+
+  return list[Math.max(0, Math.min(index, listLength - 1))]
+}
+
 const getPlacement = (
   placement: Placements,
   direction: CDropdownProps['direction'],
@@ -207,9 +229,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     useEffect(() => {
       if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+        dropdownToggleRef.current.focus()
         popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
+        dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
+        dropdownMenuRef.current.addEventListener('keydown', handleKeydown)
         onShow && onShow()
       }
 
@@ -217,10 +242,28 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
         popper && destroyPopper()
         window.removeEventListener('mouseup', handleMouseUp)
         window.removeEventListener('keyup', handleKeyup)
+        dropdownToggleRef.current &&
+          dropdownToggleRef.current.removeEventListener('keydown', handleKeydown)
+        dropdownMenuRef.current &&
+          dropdownMenuRef.current.removeEventListener('keydown', handleKeydown)
         onHide && onHide()
       }
     }, [_visible])
 
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        const target = event.target as HTMLElement
+        event.preventDefault()
+        const items = [].concat(
+          ...Element.prototype.querySelectorAll.call(
+            dropdownMenuRef.current,
+            '.dropdown-item:not(.disabled):not(:disabled)',
+          ),
+        )
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+      }
+    }
+
     const handleKeyup = (event: KeyboardEvent) => {
       if (autoClose === false) {
         return
@@ -263,7 +306,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
                 'dropup dropup-center': direction === 'dropup-center',
                 [`${direction}`]:
                   direction && direction !== 'center' && direction !== 'dropup-center',
-                show: _visible,
               },
               className,
             )}

package/src/components/dropdown/CDropdownToggle.tsx

@@ -18,6 +18,12 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Create a custom toggler which accepts any content.
    */
   custom?: boolean
+  /**
+   * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+   * 
+   * @since v5.0.0-alpha.3
+   */
+  navLink?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -35,6 +41,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   caret = true,
   custom,
   className,
+  navLink = true,
   split,
   trigger = 'click',
   ...rest
@@ -57,9 +64,10 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: classNames(
       {
+        'nav-link': variant === 'nav-item' && navLink,
         'dropdown-toggle': caret,
         'dropdown-toggle-split': split,
-        'nav-link': variant === 'nav-item',
+        show: visible,
       },
       className,
     ),
@@ -67,7 +75,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  // We use any because Toggler can be `a` as well as `button`.
   const Toggler = () => {
     if (custom && React.isValidElement(children)) {
       return (
@@ -81,16 +88,16 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       )
     }
 
-    if (variant === 'nav-item') {
+    if (variant === 'nav-item' && navLink) {
       return (
-        <a href="#" {...togglerProps} ref={dropdownToggleRef}>
+        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
           {children}
         </a>
       )
     }
 
     return (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -41,13 +41,14 @@ exports[`CNav example 1`] = `
     <li
       class="nav-item dropdown"
     >
-      <a
+      <button
         aria-expanded="false"
-        class="dropdown-toggle nav-link"
-        href="#"
+        class="btn btn-primary dropdown-toggle"
+        tabindex="0"
+        type="button"
       >
         A
-      </a>
+      </button>
       <ul
         aria-hidden="true"
         class="dropdown-menu"

package/src/components/navbar/__tests__/CNavbar.spec.tsx

@@ -26,9 +26,9 @@ test('CNavbar customize', async () => {
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('navbar')
   expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('navbar-dark')
   expect(container.firstChild).toHaveClass('navbar-expand-lg')
   expect(container.firstChild).toHaveClass('fixed-bottom')
+  expect(container.firstChild).toHaveAttribute('data-coreui-theme', 'dark')
   const arrLength = container.getElementsByClassName('container-xl').length
   expect(arrLength).toBe(1)
 })

package/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.tsx.snap

@@ -17,7 +17,8 @@ exports[`CNavbar customize - container and expand are boolean 1`] = `
 exports[`CNavbar customize 1`] = `
 <div>
   <h3
-    class="navbar bg-warning navbar-dark navbar-expand-lg fixed-bottom bazinga"
+    class="navbar bg-warning navbar-expand-lg fixed-bottom bazinga"
+    data-coreui-theme="dark"
   >
     <div
       class="container-xl"

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap

@@ -3,15 +3,15 @@
 exports[`CProgress customize 1`] = `
 <div>
   <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
     class="progress bazinga"
+    role="progressbar"
     style="height: 100px;"
   >
     <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
       class="progress-bar bg-warning"
-      role="progressbar"
       style="width: 50%;"
     >
       Test
@@ -25,7 +25,12 @@ exports[`loads and displays CProgress component 1`] = `
   <div
     class="progress"
   >
-    Test
+    <div
+      class="progress-bar bg-warning"
+      style="width: 0%;"
+    >
+      Test
+    </div>
   </div>
 </div>
 `;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap

@@ -3,11 +3,7 @@
 exports[`CProgressBar customize 1`] = `
 <div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="50"
     class="progress-bar bg-warning progress-bar-striped progress-bar-animated bazinga"
-    role="progressbar"
     style="width: 50%;"
   >
     Test
@@ -18,11 +14,7 @@ exports[`CProgressBar customize 1`] = `
 exports[`loads and displays CProgressBar component 1`] = `
 <div>
   <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="0"
     class="progress-bar bg-warning"
-    role="progressbar"
     style="width: 0%;"
   >
     Test

package/src/components/smart-table/CSmartTable.tsx

@@ -285,7 +285,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       )
     }
 
-    const handleSorterChange = (column: string, index: number): void => {
+    const handleSorterChange = (column: string, index: number, order?: 'asc' | 'desc'): void => {
       if (!isSortable(index, columns, columnSorter, itemsDataColumns, columnNames)) {
         return
       }
@@ -293,8 +293,14 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       //if column changed or sort was descending change asc to true
       const state = sorterState ?? { column: '', state: '' }
 
+      if (order) {
+        state.state = order
+      }
+
       if (state.column === column) {
-        if (state.state === 0) {
+        if (order) {
+          state.state = order
+        } else if (state.state === 0) {
           state.state = 'asc'
         } else if (state.state === 'asc') {
           state.state = 'desc'
@@ -303,13 +309,13 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         }
       } else {
         state.column = column
-        state.state = 'asc'
+        state.state = order || 'asc'
       }
 
       setSorterState({ ...state })
     }
 
-    const handleTableFilterChange = (value: string, type: string): void => {
+    const handleTableFilterChange = (value: string, type: string): void => {to
       const isLazy = tableFilter && typeof tableFilter === 'object' && tableFilter.lazy === true
       if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
         return
@@ -404,7 +410,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 handleFilterOnInput={(key, event) => handleColumnFilterChange(key, event, 'input')}
                 handleOnCustomFilterChange={(key, event) => handleColumnFilterChange(key, event)}
                 handleSelectAllChecked={() => handleSelectAllChecked()}
-                handleSort={(key, index) => handleSorterChange(key, index)}
+                handleSort={(key, index, order) => handleSorterChange(key, index, order)}
               />
             )}
             <CSmartTableBody

package/src/components/smart-table/CSmartTableHead.tsx

@@ -35,7 +35,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
   handleFilterOnChange?: (key: string, value: string) => void
   handleFilterOnInput?: (key: string, value: string) => void
   handleSelectAllChecked?: () => void
-  handleSort?: (key: string, index: number) => void
+  handleSort?: (key: string, index: number, order?: 'asc' | 'desc') => void
   items: Item[]
   selectable?: boolean
   selectAll?: boolean | { external?: boolean }
@@ -144,21 +144,41 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
             </CTableHeaderCell>
           )}
           {_columns.map((column: Column | string, index: number) => {
+            const isSortable =
+              columnSorter &&
+              (typeof column === 'object'
+                ? column.sorter === undefined
+                  ? true
+                  : column.sorter
+                : true)
             return (
               <CTableHeaderCell
                 {...getTableHeaderCellProps(column)}
-                onClick={() => handleSort && handleSort(getColumnKey(column), index)}
+                // onClick={() => handleSort && handleSort(getColumnKey(column), index)}
                 style={getTableHeaderCellStyles(column, columnSorter)}
                 key={index}
+                {...(isSortable && {
+                  onClick: () => handleSort && handleSort(getColumnKey(column), index),
+                  onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                      handleSort && handleSort(getColumnKey(column), index)
+                    }
+
+                    if (event.key === 'ArrowUp') {
+                      event.preventDefault()
+                      handleSort && handleSort(getColumnKey(column), index, 'asc')
+                    }
+
+                    if (event.key === 'ArrowDown') {
+                      event.preventDefault()
+                      handleSort && handleSort(getColumnKey(column), index, 'desc')
+                    }
+                  },
+                  tabIndex: 0,
+                })}
               >
                 <div className="d-inline">{getColumnLabel(column)}</div>
-                {columnSorter &&
-                  (typeof column === 'object'
-                    ? (column.sorter === undefined
-                      ? true
-                      : column.sorter)
-                    : true) &&
-                  columnSorterIcon(column)}
+                {isSortable && columnSorterIcon(column)}
               </CTableHeaderCell>
             )
           })}
@@ -171,9 +191,9 @@ export const CSmartTableHead = forwardRef<HTMLTableSectionElement, CSmartTableHe
                 <CTableHeaderCell {...getTableHeaderCellProps(column)} key={index}>
                   {(
                     typeof column === 'object'
-                      ? (column.filter === undefined
+                      ? column.filter === undefined
                         ? true
-                        : column.filter)
+                        : column.filter
                       : true
                   ) ? (
                     typeof column !== 'string' && typeof column.filter === 'function' ? (

package/src/components/widgets/CWidgetStatsA.tsx

@@ -41,7 +41,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
     return (
       <CCard
         className={classNames(
-          { [`bg-${color}`]: color, 'text-high-emphasis-inverse': color },
+          { [`bg-${color}`]: color, 'text-white': color },
           className,
         )}
         {...rest}

package/src/components/widgets/CWidgetStatsB.tsx

@@ -48,7 +48,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
       <CCard
         className={className}
         color={color}
-        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...(inverse && { textColor: 'white' })}
         {...rest}
         ref={ref}
       >
@@ -57,7 +57,7 @@ export const CWidgetStatsB = forwardRef<HTMLDivElement, CWidgetStatsBProps>(
           {title && <div>{title}</div>}
           <CProgress className="my-2" height={4} {...(inverse && { white: true })} {...progress} />
           {text && (
-            <small className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+            <small className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
               {text}
             </small>
           )}

package/src/components/widgets/CWidgetStatsC.tsx

@@ -48,23 +48,15 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
       <CCard
         className={className}
         color={color}
-        {...(inverse && { textColor: 'high-emphasis-inverse' })}
+        {...(inverse && { textColor: 'white' })}
         {...rest}
         ref={ref}
       >
         <CCardBody>
-          {icon && (
-            <div className={`text-medium-emphasis${inverse ? '-inverse' : ''} text-end mb-4`}>
-              {icon}
-            </div>
-          )}
-          {value && (
-            <div className={`text-high-emphasis${inverse ? '-inverse' : ''} fs-4 fw-semibold`}>
-              {value}
-            </div>
-          )}
+          {icon && <div className="text-end mb-4">{icon}</div>}
+          {value && <div className="fs-4 fw-semibold">{value}</div>}
           {title && (
-            <div className={inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis'}>
+            <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>
               {title}
             </div>
           )}

package/src/components/widgets/CWidgetStatsD.tsx

@@ -61,7 +61,7 @@ export const CWidgetStatsD = forwardRef<HTMLDivElement, CWidgetStatsDProps>(
                   {index % 2 !== 0 && <div className="vr"></div>}
                   <CCol>
                     <div className="fs-5 fw-semibold">{value.value}</div>
-                    <div className="text-uppercase text-medium-emphasis small">{value.title}</div>
+                    <div className="text-uppercase text-body-secondary small">{value.title}</div>
                   </CCol>
                 </React.Fragment>
               )

package/src/components/widgets/CWidgetStatsE.tsx

@@ -29,7 +29,7 @@ export const CWidgetStatsE = forwardRef<HTMLDivElement, CWidgetStatsEProps>(
       <CCard className={classNames(className)} {...rest} ref={ref}>
         <CCardBody className="text-center">
           {title && (
-            <div className="text-medium-emphasis small text-uppercase fw-semibold">{title}</div>
+            <div className="text-body-secondary small text-uppercase fw-semibold">{title}</div>
           )}
           {value && <div className="fs-6 fw-semibold py-3">{value}</div>}
           {chart}

package/src/components/widgets/CWidgetStatsF.tsx

@@ -47,7 +47,7 @@ export const CWidgetStatsF = forwardRef<HTMLDivElement, CWidgetStatsFProps>(
           <div className={`me-3 text-white bg-${color} ${padding ? 'p-3' : 'p-4'}`}>{icon}</div>
           <div>
             <div className={`fs-6 fw-semibold text-${color}`}>{value}</div>
-            <div className="text-medium-emphasis text-uppercase fw-semibold small">{title}</div>
+            <div className="text-body-secondary text-uppercase fw-semibold small">{title}</div>
           </div>
         </CCardBody>
         {footer && <CCardFooter>{footer}</CCardFooter>}

package/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

@@ -23,7 +23,7 @@ test('CWidgetStatsA customize', async () => {
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bg-info')
-  expect(container.firstChild).toHaveClass('text-high-emphasis-inverse')
+  expect(container.firstChild).toHaveClass('text-white')
   expect(container.firstChild).toHaveClass('bazinga')
   if (container.firstChild === null) {
     expect(true).toBe(false)

package/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

@@ -32,7 +32,7 @@ test('CWidgetStatsB customize', async () => {
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fs-4')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('value')
-    expect(container.firstChild.firstChild.lastChild).toHaveClass('text-medium-emphasis-inverse')
+    expect(container.firstChild.firstChild.lastChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.lastChild).toHaveTextContent('text')
   }
 })

package/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

@@ -29,7 +29,7 @@ test('CWidgetStatsC customize', async () => {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis-inverse')
+    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-white')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-end')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('mb-4')
     expect(container.firstChild.firstChild.firstChild).toHaveTextContent('icon')

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -42,7 +42,7 @@ test('CWidgetStatsD customize', async () => {
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
-        'text-medium-emphasis',
+        'text-body-secondary',
       )
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')

package/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

@@ -21,7 +21,7 @@ test('CWidgetStatsE customize', async () => {
     expect(true).toBe(false)
   } else {
     expect(container.firstChild.firstChild).toHaveClass('card-body')
-    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-medium-emphasis')
+    expect(container.firstChild.firstChild.firstChild).toHaveClass('text-body-secondary')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('small')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('text-uppercase')
     expect(container.firstChild.firstChild.firstChild).toHaveClass('fw-semibold')

package/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

@@ -47,7 +47,7 @@ test('CWidgetStatsF customize', async () => {
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveClass('text-info')
         expect(container.firstChild.firstChild.lastChild.firstChild).toHaveTextContent('value')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass(
-          'text-medium-emphasis',
+          'text-body-secondary',
         )
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('text-uppercase')
         expect(container.firstChild.firstChild.lastChild.lastChild).toHaveClass('fw-semibold ')

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CWidgetStatsA customize 1`] = `
 <div>
   <div
-    class="card bg-info text-high-emphasis-inverse bazinga"
+    class="card bg-info text-white bazinga"
   >
     <div
       class="card-body pb-0 d-flex justify-content-between align-items-start"