@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/components/Widget/GlobalStyles.tsx

@@ -13,42 +13,37 @@
 import {
   GlobalStyles as MuiGlobalStyles,
   GlobalStylesProps,
-  Theme,
 } from '@mui/material';
+import { DesignTokens, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 // TODO we could scope these to just widget container
-const svgStyles = (theme: Theme): GlobalStylesProps['styles'] => ({
+const svgStyles = (tokens: DesignTokens): GlobalStylesProps['styles'] => ({
   '.siwFillPrimary': {
-    fill: theme.palette.primary.main,
+    fill: tokens.PalettePrimaryMain,
   },
   '.siwFillPrimaryDark': {
-    fill: theme.palette.primary.dark,
+    fill: tokens.PalettePrimaryDark,
   },
   '.siwFillSecondary': {
-    fill: theme.palette.primary.light,
-  },
-  '.siwFillBg': {
-    fill: theme.palette.grey[50],
-  },
-  '.siwIconFillPrimary': {
-    fill: theme.palette.primary.main,
-  },
-  '.siwIconStrokePrimary': {
-    stroke: theme.palette.primary.main,
+    fill: tokens.PalettePrimaryLight,
   },
   '.siwIconFillPrimaryDark': {
-    fill: theme.palette.primary.dark,
+    fill: tokens.PalettePrimaryDark,
   },
   '.siwIconFillSecondary': {
-    fill: theme.palette.primary.light,
+    fill: tokens.PalettePrimaryLight,
   },
 });
 
-const GlobalStyles: FunctionComponent = () => (
-  <MuiGlobalStyles
-    styles={(theme) => svgStyles(theme)}
-  />
-);
+const GlobalStyles: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <MuiGlobalStyles
+      styles={svgStyles(tokens)}
+    />
+  );
+};
 
 export default GlobalStyles;

package/src/v3/components/Widget/index.tsx

@@ -10,12 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// NOTE: Do not remove this import of style.css!
+// NOTE: Do not remove this import of style.scss!
 // We need to emit a CSS file, even if it's empty, to prevent a 404 on the Okta-hosted login page.
-import './style.css';
+import './style.scss';
 
-import { ScopedCssBaseline } from '@mui/material';
-import { MuiThemeProvider } from '@okta/odyssey-react-mui';
+import { OdysseyProvider, TranslationOverrides } from '@okta/odyssey-react-mui';
 import {
   AuthApiError,
   AuthenticatorKey,
@@ -63,6 +62,7 @@ import {
   extractPageTitle,
   getLanguageCode,
   getLanguageDirection,
+  getOdysseyTranslationOverrides,
   isAndroidOrIOS,
   isAuthClientSet,
   isConfigRegisterFlow,
@@ -73,12 +73,12 @@ import {
   triggerEmailVerifyCallback,
 } from '../../util';
 import { getEventContext } from '../../util/getEventContext';
-import { createTheme } from '../../util/theme';
+import { stylisPlugins } from '../../util/stylisPlugins';
+import { createThemeAndTokens } from '../../util/theme';
 import AuthContainer from '../AuthContainer/AuthContainer';
 import AuthContent from '../AuthContent/AuthContent';
 import AuthHeader from '../AuthHeader/AuthHeader';
 import ConsentHeader from '../ConsentHeader';
-import CustomPluginsOdysseyCacheProvider from '../CustomPluginsOdysseyCacheProvider';
 import Form from '../Form';
 import Spinner from '../Spinner';
 import GlobalStyles from './GlobalStyles';
@@ -132,12 +132,21 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
   const languageCode = getLanguageCode(widgetProps);
   const languageDirection = getLanguageDirection(languageCode);
   const { stateHandle, unsetStateHandle } = useStateHandle(widgetProps);
-
-  // merge themes
-  const theme = useMemo(() => mergeThemes(
-    createTheme(brandColors, customTheme?.tokens ?? {}),
-    { direction: languageDirection },
-  ), [brandColors, customTheme, languageDirection]);
+  const [odyTranslationOverrides, setOdyTranslationOverrides] = useState<
+  TranslationOverrides<string> | undefined>();
+  // Odyssey language codes use '_' instead of '-' (e.g. zh-CN -> zh_CN)
+  const odyLanguageCode: string = languageCode.replace('-', '_');
+
+  const { theme, tokens } = useMemo(() => {
+    const { themeOverride, tokensOverride } = createThemeAndTokens(
+      brandColors,
+      customTheme?.tokens ?? {},
+    );
+    return {
+      theme: mergeThemes(themeOverride, { direction: languageDirection }),
+      tokens: tokensOverride,
+    };
+  }, [brandColors, customTheme, languageDirection]);
 
   // on unmount, remove the language
   useEffect(() => () => {
@@ -150,6 +159,9 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
   const initLanguage = useCallback(async () => {
     if (!Bundles.isLoaded(languageCode)) {
       await loadLanguage(widgetProps);
+      setOdyTranslationOverrides({
+        [odyLanguageCode]: getOdysseyTranslationOverrides(),
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -493,30 +505,33 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
       languageDirection,
     }}
     >
-      <CustomPluginsOdysseyCacheProvider nonce={cspNonce}>
-        <MuiThemeProvider theme={theme}>
-          <GlobalStyles />
-          {/* the style is to allow the widget to inherit the parent's bg color */}
-          <ScopedCssBaseline sx={{ backgroundColor: 'inherit' }}>
-            <AuthContainer hide={hide}>
-              <AuthHeader
-                logo={logo}
-                logoText={logoText}
-                brandName={brandName}
-                authCoinProps={buildAuthCoinProps(idxTransaction)}
-              />
-              <AuthContent>
-                {isConsentStep(idxTransaction) && <ConsentHeader />}
-                {
-                  uischema.elements.length > 0
-                    ? <Form uischema={uischema as UISchemaLayout} />
-                    : <Spinner />
-                }
-              </AuthContent>
-            </AuthContainer>
-          </ScopedCssBaseline>
-        </MuiThemeProvider>
-      </CustomPluginsOdysseyCacheProvider>
+      <OdysseyProvider
+        themeOverride={theme}
+        designTokensOverride={tokens}
+        languageCode={odyLanguageCode}
+        translationOverrides={odyTranslationOverrides}
+        nonce={cspNonce}
+        stylisPlugins={stylisPlugins}
+      >
+        <GlobalStyles />
+        {/* the style is to allow the widget to inherit the parent's bg color */}
+        <AuthContainer hide={hide}>
+          <AuthHeader
+            logo={logo}
+            logoText={logoText}
+            brandName={brandName}
+            authCoinProps={buildAuthCoinProps(idxTransaction)}
+          />
+          <AuthContent>
+            {isConsentStep(idxTransaction) && <ConsentHeader />}
+            {
+              uischema.elements.length > 0
+                ? <Form uischema={uischema as UISchemaLayout} />
+                : <Spinner />
+            }
+          </AuthContent>
+        </AuthContainer>
+      </OdysseyProvider>
     </WidgetContextProvider>
   );
 };

package/src/v3/components/Widget/style.scss

@@ -0,0 +1,295 @@
+/* TODO: move loginpage styles out of SIW repo OKTA-602545 */
+
+@use 'sass:map';
+@import '@okta/odyssey-design-tokens/dist/index.scss';
+
+/* loginpage utility styles */
+.clearfix {
+  display: block;
+}
+.clearfix:after,
+.clearfix:before {
+  display: block;
+  block-size: 0;
+  clear: both;
+  content: ".";
+  visibility: hidden;
+}
+.hide {
+  display: none;
+}
+
+.okta-container {
+  margin: 0;
+  block-size: inherit;
+}
+
+.auth .footer, .okta-container .applogin-banner {
+  font-family: map.get($ods-tokens, 'typography', 'family', 'body');
+
+  &:lang(el) {
+    font-family: 'Noto Sans', sans-serif;
+  }
+
+  &:lang(ja) {
+    font-family: 'Noto Sans JP', sans-serif;
+  }
+
+  &:lang(ko) {
+    font-family: 'Noto Sans KR', sans-serif;
+  }
+
+  &:lang(th) {
+    font-family: 'Noto Sans Thai', sans-serif;
+  }
+
+  &:lang(zh-CN) {
+    font-family: 'Noto Sans SC', sans-serif;
+  }
+
+  &:lang(zh-TW) {
+    font-family: 'Noto Sans TC', sans-serif;
+  }
+}
+
+/* loginpage footer styles */
+.auth .footer {
+  position: fixed;
+  inset-block-end: 0;
+  background-color: #fff;
+  min-inline-size: 300px;
+  font-size: map.get($ods-tokens, 'typography', 'size', 'subordinate');
+  color: map.get($ods-tokens, 'typography', 'color', 'subordinate');
+  inset-inline: 0;
+  inset-block-end: 0;
+  overflow: hidden;
+  margin-block-start: map.get($ods-tokens, spacing, '8');
+  background-color: map.get($ods-tokens, 'hue', 'neutral', '50');
+  border-block-start: map.get($ods-tokens, 'border', 'width', 'main') solid map.get($ods-tokens, 'border', 'color', 'display');
+  p {
+    margin-block: map.get($ods-tokens, 'spacing', '3');
+  }
+}
+.auth .footer .footer-container {
+  padding-inline: map.get($ods-tokens, spacing, '8');
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+@media only screen and (max-width: 560px) {
+  .auth .footer .footer-container {
+    inline-size: 400px;
+    padding-inline: 20px;
+  }
+}
+@media only screen and (max-width: 400px) {
+  .auth .footer .footer-container {
+    inline-size: 100%;
+  }
+}
+.auth .footer a {
+  color: #6e6e78;
+}
+.auth .footer a:active,
+.auth .footer a:link,
+.auth .footer a:visited {
+  color: #6e6e78;
+}
+.auth .footer a:focus,
+.auth .footer a:hover {
+  text-decoration: underline;
+  color: #6e6e78;
+}
+.auth .footer .copyright {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  float: left;
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+}
+.auth .footer .copyright a {
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+}
+.auth .footer .privacy-policy {
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  float: right;
+}
+
+/* loginpage app banner styles */
+.okta-container .applogin-banner {
+  font-size: map.get($ods-tokens, 'typography', 'size', 'body');
+  color: map.get($ods-tokens, 'typography', 'color', 'subordinate');
+  position: relative;
+  min-inline-size: 300px;
+  border-block-end: map.get($ods-tokens, 'border', 'width', 'main') solid map.get($ods-tokens, 'border', 'color', 'display');
+}
+.okta-container .applogin-banner .applogin-background {
+  background-color: #fff;
+  opacity: 0.9;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 2px 1px hsla(0, 0%, 68.6%, 0.3);
+}
+.okta-container .applogin-banner .applogin-container {
+  position: relative;
+  inline-size: 400px;
+  min-inline-size: 300px;
+  margin-block: 0;
+  margin-inline: auto;
+  padding-block: map.get($ods-tokens, spacing, '3') map.get($ods-tokens, spacing, '4');
+  padding-inline: 0;
+  box-sizing: border-box;
+  text-align: center;
+}
+.okta-container .applogin-banner .applogin-container p {
+  /* TODO: OKTA-586564 replace hardcoded value */
+  color: #6e6e78;
+  margin-block: 0;
+}
+
+@media only screen and (max-width: 400px) {
+  .okta-container .applogin-banner .applogin-container {
+    inline-size: 100%;
+  }
+}
+@media only screen and (max-height: 750px) {
+  .okta-container .applogin-banner .applogin-container {
+    padding-block: 10px;
+    padding-inline: 0;
+  }
+}
+@media only screen and (max-height: 660px) {
+  .okta-container .applogin-banner .applogin-container {
+    padding-block: 5px;
+    padding-inline: 0;
+  }
+  .okta-container .applogin-banner .applogin-container p {
+    display: none;
+  }
+}
+.okta-container .applogin-banner .applogin-container h1 {
+  margin-block: 0;
+}
+.okta-container .applogin-banner .applogin-app-title {
+  display: none;
+}
+.okta-container .applogin-banner .applogin-app-logo {
+  display: inline-block;
+  vertical-align: middle;
+  margin-block-end: map.get($ods-tokens, 'spacing', '2');
+}
+.okta-container .applogin-banner .applogin-app-logo img {
+  inline-size: map.get($ods-tokens, 'spacing', '8');
+  block-size: map.get($ods-tokens, 'spacing', '8');
+}
+
+/* loginpage container styles */
+.auth .content {
+  min-block-size: 100%;
+  min-inline-size: 300px;
+  display: inline-block;
+  inline-size: 100%;
+}
+.auth .content:after {
+  content: "";
+  display: block;
+  block-size: 30px;
+}
+.login-bg-image {
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: cover;
+  position: fixed;
+  inset: 0;
+  z-index: -5;
+}
+@media only screen and (max-width: 600px) {
+  .login-bg-image {
+    background-image: none !important;
+    background-color: #fff !important;
+    -webkit-filter: unset !important;
+    filter: unset !important;
+  }
+}
+
+/* signin container styles */
+#signin-container {
+  margin-block: map.get($ods-tokens, 'spacing', '8');
+}
+@media only screen and (max-width: 600px) {
+  #signin-container {
+    margin-block: map.get($ods-tokens, 'spacing', '2');
+  }
+}
+
+/* back to settings button style */
+.back-to-settings {
+  margin: unset !important;
+  min-block-size: unset !important;
+  inline-size: unset !important;
+  min-inline-size: unset !important;
+  .back-to-settings-link {
+    position: unset !important;
+    inset-block-start: unset !important;
+    a {
+      font-family: map.get($ods-tokens, 'typography', 'family', 'button');
+      position: absolute;
+      padding-block: 10px;
+      padding-inline: 14px;
+      display: inline-block;
+      inset-block-start: map.get($ods-tokens, 'spacing', '8');
+      inset-inline-start: map.get($ods-tokens, 'spacing', '8');
+      block-size: unset;
+      line-height: unset;
+      text-decoration: none;
+      color: #000;
+      background-color: #fff;
+      border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'display');
+      border-radius: map.get($ods-tokens, 'border', 'radius', 'main');
+      opacity: 1;
+
+      &:hover {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '100');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'control');
+      }
+      &:active {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '300');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'primary', 'dark');
+      }
+      &:focus-visible {
+        background-color: map.get($ods-tokens, 'hue', 'blue', '300');
+        border: solid map.get($ods-tokens, 'border', 'width', 'main') map.get($ods-tokens, 'border', 'color', 'control');
+        outline: map.get($ods-tokens, 'focus', 'outline', 'width', 'main') solid map.get($ods-tokens, 'focus', 'outline', 'color', 'primary');
+        outline-offset: 2px;
+      }
+
+      img {
+        padding-inline-end: map.get($ods-tokens, 'spacing', '3');
+      }
+    }
+  }
+}
+@media only screen and (max-width: 600px) {
+  .back-to-settings .back-to-settings-link a {
+    position: relative;
+    display: inline-block;
+    inset-block-start: unset;
+    inset-inline-start: unset;
+    margin-inline: map.get($ods-tokens, 'spacing', '3');
+    margin-block-start: map.get($ods-tokens, 'spacing', '3');
+    margin-block-end: map.get($ods-tokens, 'spacing', '1');
+  }
+}
+
+/*
+ * NOTE: widget styles below, login page styles above. Take care when moving CSS
+ * from SIW to loginpage (okta-ui) in OKTA-602545
+ *
+ * TODO: OKTA-654405
+ */
+span.strong {
+  font-weight: 600;
+  word-break: break-all;
+}
+span.no-translate {
+  white-space: nowrap;
+}

package/src/v3/components/WidgetMessageContainer/WidgetMessageContainer.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { List, ListItem } from '@mui/material';
-import { Box, Link, Typography } from '@okta/odyssey-react-mui';
+import { Box, List, ListItem } from '@mui/material';
+import { Link, Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { FunctionComponent, h } from 'preact';
 import React from 'preact/compat';
@@ -22,9 +22,10 @@ import { ListStyleType, WidgetMessage, WidgetMessageLink } from '../../types';
 const WidgetMessageContainer: FunctionComponent<{
   message?: WidgetMessage,
   parserOptions?: HTMLReactParserOptions,
-  linkVariant?: 'monochrome' | 'body1',
+  linkVariant?: 'monochrome' | 'default',
 }> = (props) => {
   const { message, parserOptions, linkVariant } = props;
+  const tokens = useOdysseyDesignTokens();
 
   const renderTitle = (title?: string) => (title && (
     <Typography
@@ -37,10 +38,13 @@ const WidgetMessageContainer: FunctionComponent<{
 
   const renderLinks = (links?: WidgetMessageLink[], listStyleType?: ListStyleType) => (links && (
     <List
-      className="custom-links"
+      data-se="custom-links"
       disablePadding
       dense
-      sx={{ pl: listStyleType ? 4 : 0, listStyle: listStyleType ?? 'none' }}
+      sx={{
+        pl: listStyleType ? tokens.Spacing4 : tokens.Spacing0,
+        listStyle: listStyleType ?? 'none',
+      }}
     >
       {links.map((link) => (
         <ListItem
@@ -64,12 +68,11 @@ const WidgetMessageContainer: FunctionComponent<{
   ));
 
   const createListMessages = (widgetMsg: WidgetMessage) => (
-    <Box marginBlockStart={2}>
+    <Box marginBlockStart={tokens.Spacing2}>
       {
         widgetMsg.description && (
           <Typography
             component="p"
-            fontSize="inherit"
           >
             {widgetMsg.description}
           </Typography>
@@ -78,7 +81,7 @@ const WidgetMessageContainer: FunctionComponent<{
       <List
         dense
         disablePadding
-        sx={{ listStyle: widgetMsg.listStyleType ?? 'disc', paddingInlineStart: 4 }}
+        sx={{ listStyle: widgetMsg.listStyleType ?? 'disc', paddingInlineStart: tokens.Spacing4 }}
       >
         {
           (widgetMsg.message as WidgetMessage[])?.map((wm: WidgetMessage) => {

package/src/v3/components/hocs/withFormValidationState.tsx

@@ -15,7 +15,7 @@ import { useEffect, useState } from 'preact/hooks';
 
 import { useFormFieldValidation, useOnChange } from '../../hooks';
 import { FieldElement, UISchemaElementComponent, WidgetMessage } from '../../types';
-import { buildErrorMessageIds, convertIdxMessageToWidgetMessage } from '../../util';
+import { convertIdxMessageToWidgetMessage } from '../../util';
 import { getDisplayName } from './getDisplayName';
 
 export type RendererComponent<T> = {
@@ -46,7 +46,6 @@ export const withFormValidationState: WrappedFunctionComponent<
       ariaDescribedBy,
       options: {
         inputMeta: {
-          name,
           // @ts-ignore TODO: OKTA-539834 - messages missing from type
           messages = {},
         },
@@ -84,9 +83,7 @@ export const withFormValidationState: WrappedFunctionComponent<
       onValidateHandler,
       handleChange,
       handleBlur,
-      describedByIds: !fieldErrors
-        ? ariaDescribedBy
-        : ` ${buildErrorMessageIds(fieldErrors, name)} ${ariaDescribedBy || ''} `,
+      describedByIds: ariaDescribedBy,
     };
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <Component {...combinedProps} />;

package/src/v3/jest.config.js

@@ -67,6 +67,7 @@ module.exports = {
     '^react/jsx-runtime$': 'preact/jsx-runtime',
     '^create-react-class$': 'preact/compat/lib/create-react-class',
     '^react-addons-css-transition-group$': 'preact-css-transition-group',
+    '^@okta/odyssey-react-mui/icons$': '<rootDir>/../../node_modules/@okta/odyssey-react-mui/dist/icons.generated/index.js',
   },
 
   modulePaths: [

package/src/v3/jest.setup.js

@@ -31,6 +31,7 @@ const { configure } = require('@testing-library/preact');
 
 configure({
   testIdAttribute: 'data-se',
+  asyncUtilTimeout: 5000,
 });
 
 global.OKTA_SIW_VERSION = '0.0.0';

package/src/v3/package.json

@@ -24,19 +24,22 @@
     "dev": "yarn codegen && webpack-dev-server --config webpack.dev.config.ts",
     "lint": "yarn codegen && eslint .",
     "lint:report": "scripts/buildtools/lint-report.sh",
-    "lint:styles": "stylelint **/*.css",
-    "lint:styles:report": "stylelint **/*.css --custom-formatter ../../node_modules/stylelint-checkstyle-formatter -o build2/reports/lint/OSW-stylelint-checkstyle-result.xml --quiet",
+    "lint:styles": "stylelint **/*.{scss,css}",
+    "lint:styles:report": "stylelint **/*.{scss,css} --custom-formatter ../../node_modules/stylelint-checkstyle-formatter -o build2/reports/lint/OSW-stylelint-checkstyle-result.xml --quiet",
     "test": "yarn codegen && jest",
     "test:dev": "NODE_ENV=development jest",
     "test:e2e": "testcafe test/e2e/tests/**/*.js --config-file test/e2e/.testcaferc.js",
     "test:e2e:screenshots": "yarn test:e2e -s path=test/e2e/screenshots,thumbnails=false",
-    "test:report": "PREACT_APP_USE_PKCE=false NODE_ENV=test jest --coverage"
+    "test:report": "PREACT_APP_USE_PKCE=false NODE_ENV=test jest --coverage",
+    "test:vrt": "testcafe \"chrome:headless --force-device-scale-factor=1\" --config-file test/vrt/.testcaferc.js",
+    "test:vrt-update-screenshots": "UPDATE_SCREENSHOTS=true yarn test:vrt"
   },
   "browserslist": [
     "defaults",
     "ie 11"
   ],
   "dependencies": {
+    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
     "@babel/runtime": "^7.18.6",
     "@emotion/cache": "^11.9.3",
     "@emotion/react": "^11.9.3",
@@ -44,11 +47,10 @@
     "@hcaptcha/react-hcaptcha": "^1.8.1",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.5",
-    "@okta/odyssey-design-tokens": "^0.17.1",
-    "@okta/odyssey-react-mui": "^0.17.0",
+    "@okta/odyssey-design-tokens": "1.13.0",
+    "@okta/odyssey-react-mui": "1.13.0",
     "@okta/okta-auth-js": "^7.4.3",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.3.1",
     "cross-fetch": "^3.1.5",
     "dompurify": "^3.0.0",
     "duo_web_sdk": "https://github.com/duosecurity/duo_web_sdk.git",
@@ -120,12 +122,14 @@
     "postcss-preset-env": "^8.4.1",
     "properties": "^1.2.1",
     "rimraf": "^4.3.0",
+    "sass": "^1.69.5",
+    "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
     "stylelint-use-logical-spec": "^5.0.0",
     "svgo": "^2.3.0",
     "terser-webpack-plugin": "^5.2.4",
-    "testcafe": "^1.20.1",
+    "testcafe": "^2.6.2",
     "ts-jest": "^26.5.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",