@okta/okta-signin-widget 7.16.0 → 7.16.1

package/package.json

@@ -2,7 +2,7 @@
     "private": false,
     "name": "@okta/okta-signin-widget",
     "description": "The Okta Sign-In Widget",
-    "version": "7.16.0",
+    "version": "7.16.1",
     "homepage": "https://github.com/okta/okta-signin-widget",
     "license": "Apache-2.0",
     "repository": {
@@ -190,8 +190,12 @@
         "nodemon": "^2.0.7",
         "npm-check": "^6.0.1",
         "npm-run-all": "^4.1.5",
+        "patch-package": "^8.0.0",
+        "pixelmatch": "^5.3.0",
+        "pngjs": "^7.0.0",
         "postcss": "^8.4.21",
         "postcss-loader": "^7.2.1",
+        "postinstall-postinstall": "^2.1.0",
         "regenerator-runtime": "^0.13.7",
         "replace-in-file": "^6.2.0",
         "retire": "^2.0.3",
@@ -214,8 +218,8 @@
         "tsd": "^0.20.0",
         "ttypescript": "^1.5.15",
         "typescript": "~4.2.2",
-        "wait-on": "^6.0.1",
         "wait-for-expect": "^3.0.2",
+        "wait-on": "^6.0.1",
         "webdriver-manager": "^12.1.8",
         "webpack": "^5.51.1",
         "webpack-bundle-analyzer": "^4.5.0",
@@ -272,7 +276,8 @@
             "playground",
             "playground/mocks",
             "packages/@okta/courage-dist",
-            "src/v3"
+            "src/v3",
+            "test/vrt"
         ],
         "nohoist": [
             "**/@wdio/**",
@@ -291,7 +296,7 @@
         "workerDirectory": "playground"
     },
     "okta": {
-        "commitSha": "fa1b8e998c54eda6ec8753ac359d24bd18849e09",
-        "fullVersion": "7.16.0-gfa1b8e9"
+        "commitSha": "96b50ca86007679c3d8a0d7686bf433c66eaf965",
+        "fullVersion": "7.16.1-g96b50ca"
     }
 }

package/src/config/config.json

@@ -1,6 +1,6 @@
 {
   "defaultLanguage": "en",
-  "version": "7.16.0",
+  "version": "7.16.1",
   "supportedLanguages": [
     "en",
     "cs",

package/src/v3/components/AuthCoin/AuthCoin.tsx

@@ -10,11 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box } from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { AuthCoinProps } from '../../types';
+import Image from '../Image';
 import { getAuthCoinConfiguration } from './authCoinConfigUtil';
 
 const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
@@ -30,7 +31,8 @@ const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
   const authCoinConfiguration = getAuthCoinConfiguration();
   const authCoinConfigByAuthKey = authCoinConfiguration[authenticatorKey];
 
-  const containerClasses = classNames(authCoinConfigByAuthKey?.iconClassName, customClasses);
+  const containerTestIds = `factor-beacon ${authCoinConfigByAuthKey?.iconClassName} ${customClasses ? customClasses?.join(' ') : ''}`;
+  const tokens = useOdysseyDesignTokens();
 
   function createAuthCoinIcon() {
     // TODO: OKTA-467022 - Add warning when attempted to customize non-customizeable authenticator
@@ -38,15 +40,12 @@ const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
     // key that can be customized or custom push app
     if (url && (authCoinConfigByAuthKey?.customizable || !authCoinConfigByAuthKey?.icon)) {
       return (
-        <Box
-          as="img"
+        <Image
           src={url}
           alt={authCoinConfigByAuthKey.description}
-          className="custom-logo"
-          sx={{
-            width: (theme) => theme.spacing(6),
-            height: (theme) => theme.spacing(6),
-          }}
+          width={tokens.Spacing7}
+          height={tokens.Spacing7}
+          testId="custom-logo"
         />
       );
     }
@@ -57,22 +56,21 @@ const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
       <AuthCoinIcon
         name={name}
         description={description}
+        width={tokens.Spacing7}
+        height={tokens.Spacing7}
       />
     );
   }
 
   return authCoinConfigByAuthKey && (
     <Box
-      className={containerClasses}
-      data-se="factor-beacon"
+      data-se={containerTestIds}
       aria-hidden
       sx={{
         position: 'relative',
-        background: 'white',
-        inlineSize: '54px',
-        blockSize: '48px',
-        paddingBlock: 0,
-        paddingInline: '3px',
+        inlineSize: tokens.Spacing7,
+        blockSize: tokens.Spacing7,
+        paddingBlock: tokens.Spacing0,
         ...sx,
       }}
     >

package/src/v3/components/AuthContainer/AuthContainer.tsx

@@ -10,23 +10,22 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ScopedCssBaseline } from '@mui/material';
-import * as Tokens from '@okta/odyssey-design-tokens';
-import { Box } from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box, ScopedCssBaseline } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
 
 const AuthContainer: FunctionComponent<{ hide: boolean }> = ({ children, hide }) => {
   const { languageDirection, languageCode } = useWidgetContext();
-  const classes = classNames('auth-container', 'main-container');
+  const testIds = 'auth-container main-container';
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box
       id="okta-sign-in"
       component="main"
-      className={classes}
+      data-se={testIds}
       data-version={OKTA_SIW_VERSION}
       data-commit={OKTA_SIW_COMMIT_HASH}
       lang={languageCode}
@@ -54,29 +53,24 @@ const AuthContainer: FunctionComponent<{ hide: boolean }> = ({ children, hide })
           sx={{
             minInlineSize: '100%',
             marginBlockStart: '100px',
-            marginBlockEnd: '8px',
             marginInline: 'auto',
-            '@media only screen and (max-device-width: 750px)': {
-              marginBlockStart: 0,
-            },
           }}
         >
           <Box
             flex="auto"
             flexDirection="column"
             bgcolor="common.white"
-            fontFamily="fontFamily"
-            sx={(theme) => ({
+            sx={{
               maxInlineSize: '432px',
               minInlineSize: '320px',
-              borderWidth: theme.mixins.borderWidth,
-              borderStyle: theme.mixins.borderStyle,
-              borderRadius: theme.mixins.borderRadius,
-              borderColor: Tokens.ColorBorderDisplay,
+              borderWidth: tokens.BorderWidthMain,
+              borderStyle: tokens.BorderStyleMain,
+              borderRadius: tokens.Spacing3,
+              borderColor: tokens.BorderColorDisplay,
               '@media only screen and (max-width: 391px)': {
                 borderWidth: 0,
               },
-            })}
+            }}
           >
             {children}
           </Box>

package/src/v3/components/AuthContent/AuthContent.tsx

@@ -10,23 +10,28 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
-const AuthContent: FunctionComponent = ({ children }) => (
-  <Box
-    display="flex"
-    flexDirection="column"
-    justifyContent="flex-start"
-    flexWrap="wrap"
-    paddingX={7}
-    paddingBlockStart={7}
-    paddingBlockEnd={0}
-    maxWidth={1}
-    marginBlockEnd={3}
-  >
-    { children }
-  </Box>
-);
+const AuthContent: FunctionComponent = ({ children }) => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      flexWrap="wrap"
+      paddingX={tokens.Spacing7}
+      paddingBlockStart={tokens.Spacing7}
+      paddingBlockEnd={tokens.Spacing0}
+      maxWidth={1}
+      marginBlockEnd={tokens.Spacing3}
+    >
+      { children }
+    </Box>
+  );
+};
 
 export default AuthContent;

package/src/v3/components/AuthHeader/AuthHeader.tsx

@@ -10,15 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import * as Tokens from '@okta/odyssey-design-tokens';
-import { Box, Typography } from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 import { AuthCoinProps } from 'src/types';
 
 import { loc } from '../../util';
 import AuthCoin from '../AuthCoin/AuthCoin';
 import { getAuthCoinConfiguration } from '../AuthCoin/authCoinConfigUtil';
+import Image from '../Image';
 
 // TODO: maybe extract to util class if used reused
 const shouldRenderAuthCoin = (props?: AuthCoinProps): boolean => {
@@ -43,8 +43,8 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
   authCoinProps,
 }) => {
   const showAuthCoin = shouldRenderAuthCoin(authCoinProps);
-  const containerClasses = classNames('okta-sign-in-header', 'auth-header', { authCoinSpacing: showAuthCoin });
-  const imageClasses = classNames('auth-org-logo', 'siwOrgLogo');
+  const containerTestIds = `okta-sign-in-header auth-header ${showAuthCoin ? 'authCoinSpacing' : ''}`;
+  const tokens = useOdysseyDesignTokens();
 
   function renderAuthCoin() {
     return (showAuthCoin && authCoinProps) && (
@@ -54,7 +54,9 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
         theme={authCoinProps.theme}
         sx={{
           margin: 'auto',
-          insetBlockStart: '24px',
+          insetBlockStart: '26px',
+          borderRadius: '24px',
+          backgroundColor: tokens.HueNeutralWhite,
         }}
       />
     );
@@ -62,13 +64,13 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
 
   return (
     <Box
-      className={containerClasses}
+      data-se={containerTestIds}
       sx={{
-        paddingBlockStart: (theme) => theme.spacing(4),
-        paddingBlockEnd: (theme) => theme.spacing(showAuthCoin ? 0 : 4),
-        paddingInlineStart: (theme) => theme.spacing(5),
-        paddingInlineEnd: (theme) => theme.spacing(5),
-        borderBlockEnd: () => `1px solid ${Tokens.ColorBorderDisplay}`,
+        paddingBlockStart: tokens.Spacing5,
+        paddingBlockEnd: showAuthCoin ? tokens.Spacing1 : tokens.Spacing5,
+        paddingInlineStart: tokens.Spacing6,
+        paddingInlineEnd: tokens.Spacing6,
+        borderBlockEnd: `1px solid ${tokens.BorderColorDisplay}`,
         '& h1': {
           lineHeight: 0,
           marginBlock: 0,
@@ -78,15 +80,12 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
     >
       <Typography variant="h1">
         { logo && (
-          <Box
-            component="img"
+          <Image
             alt={logoText || brandName || loc('logo.default.alt.text', 'login')}
             src={logo}
-            className={imageClasses}
-            sx={{
-              maxInlineSize: '200px',
-              maxBlockSize: '40px',
-            }}
+            testId="auth-org-logo"
+            maxWidth="200px"
+            maxHeight="40px"
           />
         )}
       </Typography>

package/src/v3/components/AuthenticatorButton/AuthenticatorButton.tsx

@@ -10,14 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import * as Tokens from '@okta/odyssey-design-tokens';
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  Box,
-  Typography,
-} from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box, Typography } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { AddIcon, ArrowLeftIcon, ArrowRightIcon } from '@okta/odyssey-react-mui/icons';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -42,8 +37,9 @@ const AuthenticatorButton: UISchemaElementComponent<{
     options: {
       type,
       key: authenticationKey,
+      isEnroll,
+      isAdditionalEnroll,
       actionParams,
-      description,
       nickname,
       usageDescription,
       logoUri,
@@ -57,7 +53,8 @@ const AuthenticatorButton: UISchemaElementComponent<{
       ariaLabel,
     },
   } = uischema;
-  const label = getTranslation(translations, 'label');
+  const label = getTranslation(translations, 'label') ?? uischema.label;
+  const description = getTranslation(translations, 'description') ?? uischema.options.description;
   const {
     dataSchemaRef, data, loading, languageDirection,
   } = useWidgetContext();
@@ -69,8 +66,9 @@ const AuthenticatorButton: UISchemaElementComponent<{
     description && `${iconName}-description`,
     nickname && `${iconName}-nickname`,
     usageDescription && `${iconName}-usageDescription`,
-    `${iconName}-ctaLabel`,
+    isEnroll && `${iconName}-ctaLabel`,
   ].filter(Boolean).join(' ');
+  const tokens = useOdysseyDesignTokens();
 
   const onClick: ClickHandler = async () => {
     const dataSchema = dataSchemaRef.current!;
@@ -92,33 +90,46 @@ const AuthenticatorButton: UISchemaElementComponent<{
     });
   };
 
+  function createCtaIcon() {
+    if (isAdditionalEnroll) {
+      return <AddIcon titleAccess={ctaLabel} />;
+    }
+    if (languageDirection === 'rtl') {
+      return <ArrowLeftIcon titleAccess={ctaLabel} />;
+    }
+    return <ArrowRightIcon titleAccess={ctaLabel} />;
+  }
+
   return (
     <Box
       component="button"
       type={type}
-      sx={(theme) => ({
-        '&:focus': {
-          outlineColor: theme.palette.primary.main,
-          outlineOffset: Tokens.FocusOutlineOffsetBase,
-          outlineStyle: Tokens.FocusOutlineStyle,
-          outlineWidth: Tokens.FocusOutlineWidthBase,
-        },
+      sx={{
+        borderStyle: tokens.BorderStyleMain,
+        borderWidth: tokens.BorderWidthMain,
+        borderColor: tokens.BorderColorDisplay,
+        borderRadius: tokens.BorderRadiusMain,
         '&:hover': {
-          color: theme.palette.primary.dark,
+          color: tokens.PalettePrimaryDark,
           cursor: 'pointer',
-          borderColor: theme.palette.primary.main,
+          borderColor: tokens.PalettePrimaryMain,
+        },
+        '&:focus': {
+          outlineColor: tokens.PalettePrimaryMain,
+          outlineOffset: tokens.FocusOutlineOffsetMain,
+          outlineStyle: tokens.FocusOutlineStyle,
+          outlineWidth: tokens.FocusOutlineWidthMain,
+          borderColor: tokens.BorderColorDisplay,
         },
         width: 1,
-        backgroundColor: theme.palette.background.paper,
-        paddingBlock: theme.spacing(2),
-        paddingInline: theme.spacing(2),
-      })}
-      display="flex"
-      border={1}
-      borderColor="grey.200"
-      borderRadius={Tokens.BorderRadiusBase}
-      boxShadow={Tokens.ShadowScale0}
-      className="authenticator-row"
+        display: 'flex',
+        // Assuming we want to allow users to customize this color, we should try to map this to
+        // a more semantic token. We also don't want users to override white just for this
+        backgroundColor: tokens.HueNeutralWhite,
+        paddingBlock: tokens.Spacing3,
+        paddingInline: tokens.Spacing3,
+        alignItems: !isEnroll ? 'center' : '',
+      }}
       data-se="authenticator-button"
       tabIndex={0}
       onClick={onClick}
@@ -130,7 +141,6 @@ const AuthenticatorButton: UISchemaElementComponent<{
     >
       { authenticationKey && (
         <Box
-          className="authenticator-icon-container"
           data-se="authenticator-icon"
         >
           <AuthCoin
@@ -138,18 +148,18 @@ const AuthenticatorButton: UISchemaElementComponent<{
             url={logoUri}
             name={iconName}
             description={iconDescr}
-            customClasses={['authenticator-icon']}
           />
         </Box>
       )}
       <Box
-        className="authenticator-description"
+        data-se="authenticator-button-content"
         sx={{
           display: 'flex',
           flexDirection: 'column',
           flexGrow: 1,
-          paddingBlock: 0,
-          paddingInline: '12px 0',
+          paddingBlock: tokens.Spacing0,
+          paddingInlineStart: tokens.Spacing3,
+          paddingInlineEnd: tokens.Spacing0,
           // needed to solve ie11 'flexbug' where nested flex element overflows container
           minInlineSize: '0%',
         }}
@@ -158,13 +168,14 @@ const AuthenticatorButton: UISchemaElementComponent<{
           variant="h3"
           id={`${iconName}-label`}
           sx={{
-            fontSize: '1rem',
-            margin: 0,
-            marginBlockEnd: '6px',
+            fontSize: tokens.TypographySizeBody,
+            fontWeight: tokens.TypographyWeightBodyBold,
+            color: tokens.TypographyColorBody,
+            margin: tokens.Spacing0,
             textAlign: 'start',
           }}
           data-se="authenticator-button-label"
-          className="authenticator-label no-translate"
+          translate="no"
         >
           {label}
         </Typography>
@@ -173,15 +184,17 @@ const AuthenticatorButton: UISchemaElementComponent<{
             paragraph
             id={`${iconName}-description`}
             sx={{
-              fontSize: '.875rem',
-              margin: 0,
-              marginBlockEnd: '6px',
+              fontSize: tokens.TypographySizeSubordinate,
+              fontWeight: tokens.TypographyWeightBody,
+              color: tokens.TypographyColorSubordinate,
+              margin: tokens.Spacing0,
+              marginBlockStart: tokens.Spacing1,
               textAlign: 'start',
             }}
             data-se="authenticator-button-description"
-            className={classNames('authenticator-description--text', { 'no-translate': noTranslate })}
             aria-label={punctuate(description)}
             dir={dir}
+            translate={noTranslate ? 'no' : undefined}
           >
             {description}
           </Typography>
@@ -191,9 +204,11 @@ const AuthenticatorButton: UISchemaElementComponent<{
             paragraph
             id={`${iconName}-nickname`}
             sx={{
-              fontSize: '.875rem',
-              margin: 0,
-              marginBlockEnd: '6px',
+              fontSize: tokens.TypographySizeSubordinate,
+              fontWeight: tokens.TypographyWeightBody,
+              color: tokens.TypographyColorSubordinate,
+              margin: tokens.Spacing0,
+              marginBlockStart: tokens.Spacing1,
               textAlign: 'start',
               overflow: 'hidden',
               whiteSpace: 'nowrap',
@@ -201,8 +216,8 @@ const AuthenticatorButton: UISchemaElementComponent<{
             }}
             title={nickname}
             data-se="authenticator-button-nickname"
-            className={classNames('authenticator-enrollment-nickname', 'no-translate')}
             aria-label={punctuate(nickname)}
+            translate="no"
           >
             {nickname}
           </Typography>
@@ -213,50 +228,74 @@ const AuthenticatorButton: UISchemaElementComponent<{
             id={`${iconName}-usageDescription`}
             textAlign="start"
             sx={{
-              fontSize: '.875rem',
-              margin: 0,
-              marginBlockEnd: '6px',
-              color: 'text.secondary',
+              fontSize: tokens.TypographySizeSubordinate,
+              fontWeight: tokens.TypographyWeightBody,
+              color: tokens.TypographyColorSubordinate,
+              margin: tokens.Spacing0,
+              marginBlockStart: tokens.Spacing1,
             }}
             data-se="authenticator-button-usage-text"
-            className="authenticator-usage-text"
             aria-label={punctuate(usageDescription)}
           >
             {usageDescription}
           </Typography>
         )}
+        {isEnroll && (
+          <Box
+            data-se={dataSe}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              marginBlockStart: tokens.Spacing3,
+              marginInline: tokens.Spacing0,
+              color: tokens.TypographyColorAction,
+              '& svg': {
+                marginBlock: tokens.Spacing0,
+                marginInlineStart: isAdditionalEnroll ? tokens.Spacing0 : tokens.Spacing1,
+                marginInlineEnd: isAdditionalEnroll ? tokens.Spacing1 : tokens.Spacing0,
+              },
+            }}
+          >
+            <Box
+              component="span"
+              id={`${iconName}-ctaLabel`}
+              sx={{
+                fontWeight: tokens.TypographyWeightBodyBold,
+                fontSize: tokens.TypographySizeBody,
+                order: isAdditionalEnroll ? 1 : 0,
+              }}
+              data-se="cta-button-label"
+            >
+              {ctaLabel}
+            </Box>
+            <Box
+              data-se="cta-button-icon"
+              sx={{
+                display: 'flex',
+              }}
+            >
+              { createCtaIcon() }
+            </Box>
+          </Box>
+        )}
+      </Box>
+      {!isEnroll && (
         <Box
-          className="cta-button authenticator-button"
           data-se={dataSe}
-          sx={(theme) => ({
-            display: 'flex',
-            alignItems: 'center',
-            marginBlock: '5px',
-            marginInline: 0,
-            fontWeight: 500,
-            color: theme.palette.primary.main,
-            '& svg': {
-              marginBlock: 0,
-              marginInline: '5px 0',
-            },
-          })}
+          sx={{
+            color: tokens.TypographyColorAction,
+          }}
         >
           <Box
-            component="span"
-            id={`${iconName}-ctaLabel`}
-            sx={{ fontWeight: 700, fontSize: '.875rem' }}
-            data-se="cta-button-label"
-            className="button select-factor link-button"
+            data-se="cta-button-icon"
+            sx={{
+              display: 'flex',
+            }}
           >
-            {ctaLabel}
+            { createCtaIcon() }
           </Box>
-          {
-            languageDirection === 'rtl'
-              ? <ArrowLeftIcon titleAccess={ctaLabel} />
-              : <ArrowRightIcon titleAccess={ctaLabel} />
-          }
         </Box>
-      </Box>
+      )}
     </Box>
   );
 };