@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/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/src/components/AuthCoin/__snapshots__/AuthCoin.test.tsx.snap

@@ -4,16 +4,16 @@ exports[`AuthCoin tests should display Branded AuthCoin and disallow style custo
 <div>
   <div
     aria-hidden="true"
-    class="mfa-duo MuiBox-root emotion-0"
-    data-se="factor-beacon"
+    class="MuiBox-root emotion-0"
+    data-se="factor-beacon mfa-duo "
   >
     <svg
       aria-labelledby="mfa-duo"
       fill="none"
-      height="48"
+      height="2.85714286rem"
       role="img"
       viewBox="0 0 48 48"
-      width="48"
+      width="2.85714286rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title
@@ -21,13 +21,6 @@ exports[`AuthCoin tests should display Branded AuthCoin and disallow style custo
       >
         factor.duo
       </title>
-      <path
-        class="siwFillBg"
-        clip-rule="evenodd"
-        d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-        fill="#F5F5F6"
-        fill-rule="evenodd"
-      />
       <path
         clip-rule="evenodd"
         d="M10.632 17H4v6.13h13.25c-.197-3.418-3.085-6.13-6.618-6.13Zm7.242 0v6.506c0 3.466 2.766 6.3 6.25 6.494V17h-6.25Zm13.886 6.13c.2-3.418 3.087-6.13 6.62-6.13s6.42 2.712 6.62 6.13H31.76Zm-6.873 6.859h6.238v-6.114a6.32 6.32 0 0 0 .012-.375V17h-6.25v12.989Zm-14.255.01H4v-6.124h13.25C17.054 27.291 14.166 30 10.633 30ZM38.38 30c-3.533 0-6.42-2.709-6.62-6.125H45C44.801 27.291 41.913 30 38.38 30Z"
@@ -43,16 +36,16 @@ exports[`AuthCoin tests should display Non-Branded AuthCoin with style customiza
 <div>
   <div
     aria-hidden="true"
-    class="mfa-hotp MuiBox-root emotion-0"
-    data-se="factor-beacon"
+    class="MuiBox-root emotion-0"
+    data-se="factor-beacon mfa-hotp "
   >
     <svg
       aria-labelledby="mfa-hotp"
       fill="none"
-      height="48"
+      height="2.85714286rem"
       role="img"
       viewBox="0 0 48 48"
-      width="48"
+      width="2.85714286rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title
@@ -60,13 +53,6 @@ exports[`AuthCoin tests should display Non-Branded AuthCoin with style customiza
       >
         factor.hotp.description
       </title>
-      <path
-        class="siwFillBg"
-        clip-rule="evenodd"
-        d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-        fill="#F5F5F6"
-        fill-rule="evenodd"
-      />
       <path
         class="siwFillSecondary"
         d="M28 23h-6v-6h1v5h5v1Z"
@@ -91,16 +77,16 @@ exports[`AuthCoin tests should display branded AuthCoin when image URL is provid
 <div>
   <div
     aria-hidden="true"
-    class="mfa-duo MuiBox-root emotion-0"
-    data-se="factor-beacon"
+    class="MuiBox-root emotion-0"
+    data-se="factor-beacon mfa-duo "
   >
     <svg
       aria-labelledby="mfa-duo"
       fill="none"
-      height="48"
+      height="2.85714286rem"
       role="img"
       viewBox="0 0 48 48"
-      width="48"
+      width="2.85714286rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title
@@ -108,13 +94,6 @@ exports[`AuthCoin tests should display branded AuthCoin when image URL is provid
       >
         factor.duo
       </title>
-      <path
-        class="siwFillBg"
-        clip-rule="evenodd"
-        d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-        fill="#F5F5F6"
-        fill-rule="evenodd"
-      />
       <path
         clip-rule="evenodd"
         d="M10.632 17H4v6.13h13.25c-.197-3.418-3.085-6.13-6.618-6.13Zm7.242 0v6.506c0 3.466 2.766 6.3 6.25 6.494V17h-6.25Zm13.886 6.13c.2-3.418 3.087-6.13 6.62-6.13s6.42 2.712 6.62 6.13H31.76Zm-6.873 6.859h6.238v-6.114a6.32 6.32 0 0 0 .012-.375V17h-6.25v12.989Zm-14.255.01H4v-6.124h13.25C17.054 27.291 14.166 30 10.633 30ZM38.38 30c-3.533 0-6.42-2.709-6.62-6.125H45C44.801 27.291 41.913 30 38.38 30Z"
@@ -130,12 +109,13 @@ exports[`AuthCoin tests should display custom image in place of standard Non-Bra
 <div>
   <div
     aria-hidden="true"
-    class="mfa-hotp MuiBox-root emotion-0"
-    data-se="factor-beacon"
+    class="MuiBox-root emotion-0"
+    data-se="factor-beacon mfa-hotp "
   >
     <img
       alt="factor.hotp.description"
-      class="custom-logo MuiBox-root emotion-1"
+      class="MuiBox-root emotion-1"
+      data-se="custom-logo"
       src="/img/socialIcons/okta.svg"
     />
   </div>
@@ -146,16 +126,16 @@ exports[`AuthCoin tests should display standard theme Non-Branded AuthCoin witho
 <div>
   <div
     aria-hidden="true"
-    class="mfa-hotp MuiBox-root emotion-0"
-    data-se="factor-beacon"
+    class="MuiBox-root emotion-0"
+    data-se="factor-beacon mfa-hotp "
   >
     <svg
       aria-labelledby="mfa-hotp"
       fill="none"
-      height="48"
+      height="2.85714286rem"
       role="img"
       viewBox="0 0 48 48"
-      width="48"
+      width="2.85714286rem"
       xmlns="http://www.w3.org/2000/svg"
     >
       <title
@@ -163,13 +143,6 @@ exports[`AuthCoin tests should display standard theme Non-Branded AuthCoin witho
       >
         factor.hotp.description
       </title>
-      <path
-        class="siwFillBg"
-        clip-rule="evenodd"
-        d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-        fill="#F5F5F6"
-        fill-rule="evenodd"
-      />
       <path
         class="siwFillSecondary"
         d="M28 23h-6v-6h1v5h5v1Z"

package/src/v3/src/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/src/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/src/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>