From da15a5a0b3b603706992d507effb87c5ef523af2 Mon Sep 17 00:00:00 2001 From: Jameson Date: Wed, 26 Aug 2026 11:16:57 -0600 Subject: [PATCH 1/4] fix: Updated @kyper/progressindicators to MXUI CircularProgress --- package-lock.json | 21 +++++-------------- package.json | 1 - src/components/LoadingSpinner.js | 8 ++----- src/views/connecting/progress/ProgressBar.tsx | 4 ++-- .../connecting/progress/ProgressCircle.js | 4 ++-- src/views/microdeposits/Verifying-test.tsx | 2 +- typings/kyper.d.ts | 1 - 7 files changed, 12 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 75b05fa0d6..fc0d4ccf5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "@emotion/styled": "^11.14.1", "@kyper/hooks": "^1.3.0", "@kyper/icon": "^1.22.0", - "@kyper/progressindicators": "^3.5.0", "@kyper/tokenprovider": "^4.4.0", "@mui/icons-material": "^7.3.9", "@mui/material": "^7.3.9", @@ -1632,19 +1631,6 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, - "node_modules/@kyper/progressindicators": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@kyper/progressindicators/-/progressindicators-3.5.0.tgz", - "integrity": "sha512-bQrLBaA2MX1I73SQrrY5u9HWzKEcZi/WYzAX1gTu2LzJiW+PXYrc/OagSkboLJT60kU+rejp6Up60kCx/Y4Pog==", - "license": "MIT", - "peerDependencies": { - "@kyper/tokenprovider": "^4.0.0", - "@mxenabled/cssinjs": "^0.6.0", - "prop-types": "^15.7.2", - "react": "^16.14.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@kyper/tokenprovider": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@kyper/tokenprovider/-/tokenprovider-4.4.0.tgz", @@ -2596,6 +2582,7 @@ "version": "0.6.0", "resolved": "https://registry.npmjs.org/@mxenabled/cssinjs/-/cssinjs-0.6.0.tgz", "integrity": "sha512-pj4/+iqyEGS1zg4i7jo7jLX+tS9h1YA5W1vLfUipuLWbxzEmoI6K2JvfhP1jT3eKTOJE3MTH+K53/t9KDyUu3Q==", + "dev": true, "dependencies": { "free-style": "^4.1.0", "insert-css": "^2.0.0" @@ -8092,7 +8079,8 @@ "node_modules/free-style": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/free-style/-/free-style-4.1.0.tgz", - "integrity": "sha512-Irv8vaifjszJimKa+6lcax5bEIpMb1oQ7N6zLFQK3ovCnYDPsy1M5DiuHV1mDSYvEFtQ2/mu37kn+UEooeJ6Ww==" + "integrity": "sha512-Irv8vaifjszJimKa+6lcax5bEIpMb1oQ7N6zLFQK3ovCnYDPsy1M5DiuHV1mDSYvEFtQ2/mu37kn+UEooeJ6Ww==", + "dev": true }, "node_modules/from2": { "version": "2.3.0", @@ -9089,7 +9077,8 @@ "node_modules/insert-css": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", - "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==", + "dev": true }, "node_modules/internal-slot": { "version": "1.1.0", diff --git a/package.json b/package.json index f23682eb0e..c22156af4c 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "@emotion/styled": "^11.14.1", "@kyper/hooks": "^1.3.0", "@kyper/icon": "^1.22.0", - "@kyper/progressindicators": "^3.5.0", "@kyper/tokenprovider": "^4.4.0", "@mui/icons-material": "^7.3.9", "@mui/material": "^7.3.9", diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js index 931334ca7d..76d4cd6db0 100644 --- a/src/components/LoadingSpinner.js +++ b/src/components/LoadingSpinner.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { Spinner } from '@kyper/progressindicators' +import CircularProgress from '@mui/material/CircularProgress' import { useTokens } from '@kyper/tokenprovider' import { __ } from 'src/utilities/Intl' @@ -11,11 +11,7 @@ export const LoadingSpinner = ({ showText = false, size = 48 }) => { return (
- + {showText &&
{__('Loading ...')}
}
) diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index a96da7f76a..309d013fd5 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useTokens } from '@kyper/tokenprovider' -import { Spinner } from '@kyper/progressindicators' +import CircularProgress from '@mui/material/CircularProgress' import { ProgressLine } from 'src/views/connecting/progress/ProgressLine' import { ProgressCheckMark } from 'src/views/connecting/progress/ProgressCheckMark' @@ -33,7 +33,7 @@ export const ProgressBar = ({ if (jobSchedule.isInitialized === false) { return (
- +
) } diff --git a/src/views/connecting/progress/ProgressCircle.js b/src/views/connecting/progress/ProgressCircle.js index 4f4efcf378..e96bd17f33 100644 --- a/src/views/connecting/progress/ProgressCircle.js +++ b/src/views/connecting/progress/ProgressCircle.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { useTokens } from '@kyper/tokenprovider' -import { Spinner } from '@kyper/progressindicators' +import CircularProgress from '@mui/material/CircularProgress' import { JOB_STATUSES } from 'src/const/consts' @@ -29,7 +29,7 @@ export const ProgressCircle = (props) => { if (isActive) { circleContent = (
- +
) } else if (isDone) { diff --git a/src/views/microdeposits/Verifying-test.tsx b/src/views/microdeposits/Verifying-test.tsx index c22d4150d6..79dadecd1c 100644 --- a/src/views/microdeposits/Verifying-test.tsx +++ b/src/views/microdeposits/Verifying-test.tsx @@ -104,7 +104,7 @@ describe('Verifying', () => { expect(screen.getByTestId('checking-amounts-paragraph')).toHaveTextContent( 'Checking microdeposit amounts.', ) - expect(document.querySelector('[data-ui-test="kyper-spinner"]')).toBeInTheDocument() + expect(screen.getByRole('progressbar')).toBeInTheDocument() }) }) diff --git a/typings/kyper.d.ts b/typings/kyper.d.ts index 17ced3616f..dcb19a4cf8 100644 --- a/typings/kyper.d.ts +++ b/typings/kyper.d.ts @@ -10,6 +10,5 @@ declare module '@kyper/icon/Dollar' declare module '@kyper/icon/Growth' declare module '@kyper/icon/Image' declare module '@kyper/icon/Health' -declare module '@kyper/progressindicators' declare module '@kyper/hooks' declare module '@kyper/icon/CheckmarkFilled' From 951ddc168ac5987d09f0d364a90273bad1b30a82 Mon Sep 17 00:00:00 2001 From: Jameson Date: Thu, 10 Sep 2026 14:16:51 -0600 Subject: [PATCH 2/4] Use CSS modules and created tests for LoadingSpinner --- src/components/LoadingSpinner-test.js | 43 ++++++++++++++++++++++++ src/components/LoadingSpinner.js | 40 +++++++--------------- src/components/LoadingSpinner.module.css | 12 +++++++ 3 files changed, 68 insertions(+), 27 deletions(-) create mode 100644 src/components/LoadingSpinner-test.js create mode 100644 src/components/LoadingSpinner.module.css diff --git a/src/components/LoadingSpinner-test.js b/src/components/LoadingSpinner-test.js new file mode 100644 index 0000000000..4769bf473c --- /dev/null +++ b/src/components/LoadingSpinner-test.js @@ -0,0 +1,43 @@ +import React from 'react' +import { render, screen } from 'src/utilities/testingLibrary' +import { LoadingSpinner } from 'src/components/LoadingSpinner' + +describe('LoadingSpinner', () => { + it('renders a progressbar by default', () => { + render() + + expect(screen.getByRole('progressbar')).toBeInTheDocument() + }) + + it('does not render the loading text by default', () => { + render() + + expect(screen.queryByText('Loading ...')).not.toBeInTheDocument() + }) + + it('renders the loading text when showText is true', () => { + render() + + expect(screen.getByText('Loading ...')).toBeInTheDocument() + }) + + it('does not render the loading text when showText is false', () => { + render() + + expect(screen.queryByText('Loading ...')).not.toBeInTheDocument() + }) + + it('renders the spinner at the default size of 48px', () => { + render() + + const spinner = screen.getByRole('progressbar') + expect(spinner).toHaveStyle({ width: '48px', height: '48px' }) + }) + + it('renders the spinner at a custom size', () => { + render() + + const spinner = screen.getByRole('progressbar') + expect(spinner).toHaveStyle({ width: '24px', height: '24px' }) + }) +}) diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js index 76d4cd6db0..c519d0fddc 100644 --- a/src/components/LoadingSpinner.js +++ b/src/components/LoadingSpinner.js @@ -1,42 +1,28 @@ import React from 'react' import PropTypes from 'prop-types' +import { Stack } from '@mui/material' +import { Text } from '@mxenabled/mxui' import CircularProgress from '@mui/material/CircularProgress' -import { useTokens } from '@kyper/tokenprovider' + +import styles from './LoadingSpinner.module.css' import { __ } from 'src/utilities/Intl' export const LoadingSpinner = ({ showText = false, size = 48 }) => { - const tokens = useTokens() - const styles = getStyles(tokens) - return ( -
- - {showText &&
{__('Loading ...')}
} +
+ + + {showText && ( + + {__('Loading ...')} + + )} +
) } -const getStyles = (tokens) => { - return { - container: { - backgroundColor: tokens.BackgroundColor.Container, - height: '100%', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - }, - text: { - color: '#999', - fontSize: tokens.FontSize.Tiny, - fontWeight: tokens.FontWeight.SemiBold, - textAlign: 'center', - marginTop: '16px', - }, - } -} - LoadingSpinner.propTypes = { showText: PropTypes.bool, size: PropTypes.number, diff --git a/src/components/LoadingSpinner.module.css b/src/components/LoadingSpinner.module.css new file mode 100644 index 0000000000..7d4427f339 --- /dev/null +++ b/src/components/LoadingSpinner.module.css @@ -0,0 +1,12 @@ +.container { + background-color: var(--mui-palette-background-paper); + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.text { + text-align: center; +} From a2c10559de531dfebcc1ddf1376c66e389960e93 Mon Sep 17 00:00:00 2001 From: Jameson Date: Tue, 22 Sep 2026 11:53:00 -0600 Subject: [PATCH 3/4] Removed un-needed styles --- src/views/connecting/progress/ProgressBar.tsx | 5 +---- src/views/connecting/progress/ProgressCircle.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/views/connecting/progress/ProgressBar.tsx b/src/views/connecting/progress/ProgressBar.tsx index 309d013fd5..e59a59fe90 100644 --- a/src/views/connecting/progress/ProgressBar.tsx +++ b/src/views/connecting/progress/ProgressBar.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { useTokens } from '@kyper/tokenprovider' import CircularProgress from '@mui/material/CircularProgress' import { ProgressLine } from 'src/views/connecting/progress/ProgressLine' @@ -23,8 +22,6 @@ export const ProgressBar = ({ institution: { guid: string; logo_url: string } jobSchedule: { isInitialized: boolean } }) => { - const tokens = useTokens() - const clientGuid = useSelector(getClientGuid) const styles = getStyles() @@ -33,7 +30,7 @@ export const ProgressBar = ({ if (jobSchedule.isInitialized === false) { return (
- +
) } diff --git a/src/views/connecting/progress/ProgressCircle.js b/src/views/connecting/progress/ProgressCircle.js index e96bd17f33..9b43432845 100644 --- a/src/views/connecting/progress/ProgressCircle.js +++ b/src/views/connecting/progress/ProgressCircle.js @@ -29,7 +29,7 @@ export const ProgressCircle = (props) => { if (isActive) { circleContent = (
- +
) } else if (isDone) { From 3eeb4f2a32813b1a77ed3f03ca0f391179446aea Mon Sep 17 00:00:00 2001 From: Jameson Date: Tue, 22 Sep 2026 11:53:31 -0600 Subject: [PATCH 4/4] Added default className in case one is not provided --- src/components/ClientLogo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ClientLogo.js b/src/components/ClientLogo.js index 70d4cc79e5..045ac2af80 100644 --- a/src/components/ClientLogo.js +++ b/src/components/ClientLogo.js @@ -12,7 +12,7 @@ import ConnectHeaderRecipientDark from 'src/images/header/ConnectHeaderRecipient export const ClientLogo = ({ alt = 'Client logo', - className, + className = '', clientGuid, size = 32, style = {},