Merge remote-tracking branch 'origin' into dev/DS-281

.github/workflows/react.yml

@@ -186,7 +186,7 @@ jobs:
 
       # Tests
       - name: Unit tests
-        uses: equisoft-actions/yarn-jest@v1
+        uses: equisoft-actions/yarn-jest@v2
         with:
           working-directory: ./packages/react
 

.tool-versions

@@ -1,2 +1,2 @@
-nodejs 20.16.0
+nodejs 20.18.0
 yarn 1.22.5

packages/react/jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
 
     reporters: [
         'default',
+        process.env.CI === 'true' && 'github-actions',
         [
             'jest-junit',
             {
@@ -16,7 +17,7 @@ module.exports = {
                 titleTemplate: '{title}',
             },
         ],
-    ],
+    ].filter(Boolean),
 
     collectCoverage: true,
     collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx,ts,tsx}'],

packages/react/package.json

@@ -29,9 +29,9 @@
     "url": "https://github.com/kronostechnologies/design-elements/issues"
   },
   "dependencies": {
-    "@mui/base": "5.0.0-beta.40",
+    "@mui/base": "5.0.0-beta.59",
     "@tanstack/react-table": "^8.10.7",
-    "date-fns": "^3.0.0",
+    "date-fns": "^4.0.0",
     "feather-icons": "^4.29.0",
     "prop-types": "^15.8.1",
     "react-datepicker": "^7.3.0",
@@ -89,7 +89,7 @@
     "react": "~17.0.2",
     "react-docgen-typescript-plugin": "1.0.8",
     "react-dom": "~17.0.2",
-    "react-router-dom": "~6.26.0",
+    "react-router-dom": "~6.27.0",
     "sass": "~1.77.0",
     "sass-loader": "~16.0.0",
     "style-loader": "^4.0.0",
@@ -99,7 +99,7 @@
     "ts-loader": "^9.4.2",
     "ts-mockito": "^2.6.1",
     "typescript": "5.5.4",
-    "webpack": "5.93.0",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-merge": "6.0.1",
     "yargs": "17.7.2"

packages/react/src/components/bento-menu-button/bento-menu-button.test.tsx.snap

@@ -53,7 +53,6 @@ exports[`BentoMenuButton Matches Snapshot (productGroups and externalLinks) 1`]
 }
 
 .c2 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -874,7 +873,6 @@ exports[`BentoMenuButton Matches Snapshot (productLinks and externalLinks) 1`] =
 }
 
 .c2 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -1607,7 +1605,6 @@ exports[`BentoMenuButton Matches Snapshot (tag="nav") 1`] = `
 }
 
 .c2 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }

packages/react/src/components/buttons/abstract-button.tsx

@@ -50,7 +50,6 @@ export const defaultButtonStyles = css<{ $focusable?: boolean, isMobile: boolean
     ${(props) => props.$focusable !== false && focus};
 
     > svg {
-        color: inherit;
         height: ${({ isMobile }) => (isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
         width: ${({ isMobile }) => (isMobile ? 'var(--size-1halfx)' : 'var(--size-1x)')};
     }

packages/react/src/components/buttons/button.test.tsx.snap

@@ -53,7 +53,6 @@ exports[`Button has destructive styles (inverted) 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -158,7 +157,6 @@ exports[`Button has destructive styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -263,7 +261,6 @@ exports[`Button has destructive-secondary styles (inverted) 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -360,7 +357,6 @@ exports[`Button has destructive-secondary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -465,7 +461,6 @@ exports[`Button has left and right icons 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -588,7 +583,6 @@ exports[`Button has mobile styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
@@ -685,7 +679,6 @@ exports[`Button has primary disabled styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -783,7 +776,6 @@ exports[`Button has primary styles (inverted) 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -880,7 +872,6 @@ exports[`Button has primary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -977,7 +968,6 @@ exports[`Button has secondary styles (inverted) 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -1074,7 +1064,6 @@ exports[`Button has secondary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -1171,7 +1160,6 @@ exports[`Button has small styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -1268,7 +1256,6 @@ exports[`Button has small styles on mobile 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
@@ -1365,7 +1352,6 @@ exports[`Button has tertiary styles (inverted) 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -1462,7 +1448,6 @@ exports[`Button has tertiary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }

packages/react/src/components/buttons/button.tsx

@@ -12,7 +12,9 @@ import {
     Icon,
     IconName,
 } from '../icon/icon';
+import { Spinner } from '../spinner/spinner';
 import { ResolvedTheme } from '../../themes/theme';
+import { useTranslation } from '../../i18n/use-translation';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { AbstractButton, ButtonType, getButtonTypeStyles } from './abstract-button';
 
@@ -36,6 +38,11 @@ export interface ButtonProps {
     focusable?: boolean;
     inverted?: boolean;
     label?: string;
+    loading?: boolean;
+    /**
+     * @default Loading...
+     */
+    loadingLabel?: string;
     /**
      * Size variant
      * @default medium
@@ -53,6 +60,10 @@ export interface ButtonProps {
     onKeyDown?(event: KeyboardEvent<HTMLButtonElement>): void;
 }
 
+const StyledSpinner = styled(Spinner)`
+    margin-right: var(--spacing-1x);
+`;
+
 const LeftIcon = styled(Icon)`
     margin-right: var(--spacing-1x);
 `;
@@ -73,6 +84,8 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     disabled,
     focusable = true,
     label,
+    loading,
+    loadingLabel,
     onClick,
     onFocus,
     onBlur,
@@ -84,6 +97,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     ...props
 }: PropsWithChildren<ButtonProps>, ref: Ref<HTMLButtonElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const { t } = useTranslation('button');
     const iconSize = props?.size === 'small' && !isMobile ? '16' : '24';
 
     const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {
@@ -122,22 +136,31 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
             {...props /* eslint-disable-line react/jsx-props-no-spreading *//* To spread aria-* and data-* */}
         >
             {children}
-            {leftIconName && (
-                <LeftIcon
-                    aria-hidden="true"
-                    data-testid="left-icon"
-                    name={leftIconName}
-                    size={iconSize}
-                />
-            )}
-            {label}
-            {rightIconName && (
-                <RightIcon
-                    aria-hidden="true"
-                    data-testid="right-icon"
-                    name={rightIconName}
-                    size={iconSize}
-                />
+            {loading ? (
+                <>
+                    <StyledSpinner />
+                    {loadingLabel || t('loadingLabel')}
+                </>
+            ) : (
+                <>
+                    {leftIconName && (
+                        <LeftIcon
+                            aria-hidden="true"
+                            data-testid="left-icon"
+                            name={leftIconName}
+                            size={iconSize}
+                        />
+                    )}
+                    {label}
+                    {rightIconName && (
+                        <RightIcon
+                            aria-hidden="true"
+                            data-testid="right-icon"
+                            name={rightIconName}
+                            size={iconSize}
+                        />
+                    )}
+                </>
             )}
         </StyledButton>
     );

packages/react/src/components/buttons/icon-button.test.tsx.snap

@@ -53,7 +53,6 @@ exports[`Icon Button Has destructive-secondary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -164,7 +163,6 @@ exports[`Icon Button Has disabled styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -276,7 +274,6 @@ exports[`Icon Button Has mobile styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1halfx);
   width: var(--size-1halfx);
 }
@@ -387,7 +384,6 @@ exports[`Icon Button Has primary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -498,7 +494,6 @@ exports[`Icon Button Has secondary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -609,7 +604,6 @@ exports[`Icon Button Has small styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }
@@ -721,7 +715,6 @@ exports[`Icon Button Has tertiary styles 1`] = `
 }
 
 .c0 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }

packages/react/src/components/carousel/carousel.test.tsx.snap

@@ -53,7 +53,6 @@ exports[`Carousel should match snapshot 1`] = `
 }
 
 .c1 > svg {
-  color: inherit;
   height: var(--size-1x);
   width: var(--size-1x);
 }