@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/src/components/LaunchAuthenticatorButton/LaunchAuthenticatorButton.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Button as OdyButton } from '@okta/odyssey-react-mui';
+import { Button as OdyButton, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import Util from '../../../../util/Util';
@@ -30,6 +30,7 @@ import { OktaVerifyIcon } from '../Icon';
 const LaunchAuthenticatorButton: UISchemaElementComponent<{
   uischema: LaunchAuthenticatorButtonElement
 }> = ({ uischema }) => {
+  const tokens = useOdysseyDesignTokens();
   const onSubmitHandler = useOnSubmit();
   const {
     translations = [],
@@ -79,32 +80,19 @@ const LaunchAuthenticatorButton: UISchemaElementComponent<{
   return (
     <OdyButton
       variant="secondary"
-      fullWidth
+      isFullWidth
       onClick={handleClick}
-      ref={focusRef}
-    >
-      <Box
-        display="flex"
-        alignItems="center"
-        justifyContent="center"
-      >
-        <Box
-          sx={{
-            marginInlineEnd: '5px',
-            // keep the icon from stretching the button vertically
-            marginBlockEnd: '-3px',
-          }}
-        >
-          <OktaVerifyIcon
-            name="mfa-okta-verify"
-            description={iconDescription}
-            width={24}
-            height={24}
-          />
-        </Box>
-        {label}
-      </Box>
-    </OdyButton>
+      buttonRef={focusRef}
+      label={label || ''}
+      startIcon={(
+        <OktaVerifyIcon
+          name="mfa-okta-verify"
+          description={iconDescription}
+          width={tokens.Spacing5}
+          height={tokens.Spacing5}
+        />
+      )}
+    />
   );
 };
 

package/src/v3/src/components/Link/Link.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// TODO: OKTA-564568 Link exported from ODY does not have the focus() function and breaks autofocus
-import { Link as LinkMui } from '@mui/material';
+import { Link as MuiLink } from '@mui/material';
+import { Link as OdyLink } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -27,7 +27,6 @@ const Link: UISchemaElementComponent<{
   } = widgetContext;
   const {
     focus,
-    ariaDescribedBy,
     options: {
       label,
       href,
@@ -63,38 +62,27 @@ const Link: UISchemaElementComponent<{
 
   return (
     typeof href === 'undefined' ? (
-      <LinkMui
+      <MuiLink
         component="button"
-        // Fixes OKTA-653788 (see comments) - Currently we treat all links as buttons
-        type="button"
-        variant="body1"
         role="link"
         onClick={onClick}
-        aria-describedby={ariaDescribedBy}
         ref={focusRef}
         data-se={dataSe}
-        sx={{
-          '&:hover': {
-            cursor: 'pointer',
-          },
-          verticalAlign: 'baseline',
-        }}
       >
         {label}
-      </LinkMui>
+      </MuiLink>
     )
       : (
-        <LinkMui
+        <OdyLink
           href={href}
-          ref={focusRef}
-          aria-describedby={ariaDescribedBy}
-          data-se={dataSe}
+          linkRef={focusRef}
+          testId={dataSe}
           target={target}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...(target === '_blank' && { rel: 'noopener noreferrer' })}
         >
           {label}
-        </LinkMui>
+        </OdyLink>
       )
   );
 };

package/src/v3/src/components/List/List.tsx

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { List as ListMui, ListItem } from '@mui/material';
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box, List as ListMui, ListItem } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import Logger from '../../../../util/Logger';
@@ -28,14 +28,17 @@ import Button from '../Button';
 import InformationalText from '../InformationalText';
 
 const renderElement = (item: UISchemaElement) => {
-  const Container: FunctionComponent = ({ children }) => (
-    <Box
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(!(item).noMargin && { marginBlockEnd: 4 })}
-    >
-      {children}
-    </Box>
-  );
+  const Container: FunctionComponent = ({ children }) => {
+    const tokens = useOdysseyDesignTokens();
+    return (
+      <Box
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...(!(item).noMargin && { marginBlockEnd: tokens.Spacing4 })}
+      >
+        {children}
+      </Box>
+    );
+  };
 
   switch (item.type) {
     case 'Button':
@@ -75,18 +78,19 @@ const List: UISchemaElementComponent<{
   uischema: ListElement
 }> = ({ uischema }) => {
   const { options } = uischema;
+  const tokens = useOdysseyDesignTokens();
 
   return options.items?.length ? (
     <Box
       display="flex"
       flexDirection="column"
       justifyContent="flex-start"
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
     >
       { options.description && <Typography component="p">{options.description}</Typography> }
       <ListMui
         component={options.type}
-        sx={{ listStyleType: options.type === 'ol' ? 'decimal' : 'disc', pl: 4 }}
+        sx={{ listStyleType: options.type === 'ol' ? 'decimal' : 'disc', pl: tokens.Spacing4 }}
       >
         {
           options.items.map((item: string | UISchemaLayout, index: number) => (

package/src/v3/src/components/PIVButton/PIVButton.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Button as OdyButton } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Button as OdyButton, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
@@ -37,6 +38,8 @@ const PIVButton: UISchemaElementComponent<{
 
   const showLoading = waiting || loading;
 
+  const tokens = useOdysseyDesignTokens();
+
   const initCertPrompt = () => {
     setWaiting(true);
     setMessage(undefined);
@@ -61,7 +64,7 @@ const PIVButton: UISchemaElementComponent<{
 
   return (
     <Box
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       display={showLoading ? 'flex' : undefined}
       justifyContent={showLoading ? 'center' : undefined}
     >
@@ -70,14 +73,13 @@ const PIVButton: UISchemaElementComponent<{
           ? <Spinner dataSe="okta-spinner" />
           : (
             <OdyButton
-              data-se="button"
+              label={btnLabel || ''}
+              testId="button"
               onClick={handleClick}
               variant="primary"
-              aria-describedby={ariaDescribedBy}
-              fullWidth
-            >
-              {btnLabel}
-            </OdyButton>
+              ariaDescribedBy={ariaDescribedBy}
+              isFullWidth
+            />
           )
       }
     </Box>

package/src/v3/src/components/PasswordRequirements/Icon.tsx

@@ -10,12 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Icon as OdyIcon } from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box } from '@mui/material';
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { CheckCircleFilledIcon, CloseIcon, InformationCircleIcon } from '@okta/odyssey-react-mui/icons';
 import { FunctionComponent, h } from 'preact';
 
 import { PasswordRequirementStatus } from '../../types';
-import { CheckCircle } from '../Icon';
 
 type PasswordRequirementIconProps = {
   status: PasswordRequirementStatus;
@@ -25,35 +25,29 @@ const Icon: FunctionComponent<PasswordRequirementIconProps> = (
   props,
 ) => {
   const { status } = props;
-  const statusToIconProps = {
-    incomplete: { name: 'close', color: 'grey.500' },
-    complete: { name: 'check-circle-filled', color: 'success' },
-    info: { name: 'information-circle', color: 'info' },
+  const tokens = useOdysseyDesignTokens();
+  const statusToIcon = {
+    incomplete: { component: CloseIcon, color: tokens.PaletteNeutralMain },
+    complete: { component: CheckCircleFilledIcon, color: tokens.PaletteSuccessMain },
+    info: { component: InformationCircleIcon, color: tokens.PalettePrimaryMain },
   };
-  const iconClasses = classNames('passwordRequirementIcon', status);
+  const OdyIcon = statusToIcon[status].component;
 
   return (
     <Box
-      className={iconClasses}
       data-se={`passwordRequirementIcon-${status}`}
-      sx={(theme) => ({
-        marginInlineEnd: theme.spacing(1),
+      sx={{
+        marginInlineEnd: tokens.Spacing2,
         // This is to force the icon align with the top of the text
         marginBlockStart: '2px',
-      })}
+      }}
       aria-hidden
     >
-      {
-        // Using a custom Icon for the Success/Check Instead of default ODY Icon
-        statusToIconProps[status].name === 'check-circle-filled' ? (
-          <CheckCircle />
-        ) : (
-          <OdyIcon
-            name={statusToIconProps[status].name}
-            color={statusToIconProps[status].color}
-          />
-        )
-      }
+      <OdyIcon
+        sx={{
+          color: statusToIcon[status].color,
+        }}
+      />
     </Box>
   );
 };

package/src/v3/src/components/PasswordRequirements/PasswordMatches.tsx

@@ -10,7 +10,8 @@
  * 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 debounce from 'lodash/debounce';
 import { h } from 'preact';
 import {
@@ -38,6 +39,7 @@ const PasswordMatches: UISchemaElementComponent<{
   const { confirmPassword } = data;
   const { translations = [] } = uischema;
   const label = getTranslation(translations, 'label');
+  const tokens = useOdysseyDesignTokens();
 
   const [isMatching, setIsMatching] = useState<boolean>(false);
 
@@ -60,7 +62,12 @@ const PasswordMatches: UISchemaElementComponent<{
       <Box
         component="ul"
         id="credentials.newPassword-list"
-        sx={{ listStyle: 'none', padding: '0', marginBlockStart: '0' }}
+        sx={{
+          listStyle: 'none',
+          padding: '0',
+          marginBlockStart: '0',
+          marginBlockEnd: `-${tokens.Spacing3}`,
+        }}
         aria-hidden
       >
         <PasswordRequirementListItem

package/src/v3/src/components/PasswordRequirements/PasswordRequirementListItem.tsx

@@ -10,8 +10,8 @@
  * 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 { Box } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { PasswordRequirementProps } from '../../types';
@@ -21,12 +21,13 @@ const PasswordRequirementListItem: FunctionComponent<PasswordRequirementProps> =
   props,
 ) => {
   const { status, label } = props;
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box
       component="li"
-      sx={{ marginBlockEnd: (theme) => theme.spacing(2) }}
-      color={status === 'complete' ? Tokens.ColorPaletteGreen600 : undefined}
+      sx={{ marginBlockEnd: tokens.Spacing3 }}
+      color={status === 'complete' ? tokens.PaletteSuccessMain : undefined}
     >
       <Box
         display="flex"
@@ -38,7 +39,7 @@ const PasswordRequirementListItem: FunctionComponent<PasswordRequirementProps> =
          * of the icon. See: OKTA-586924
          * */}
         <Icon status={status} />
-        <Box><Typography variant="body1">{label}</Typography></Box>
+        <Box><Typography variant="body">{label}</Typography></Box>
       </Box>
     </Box>
   );

package/src/v3/src/components/PasswordRequirements/PasswordRequirements.tsx

@@ -10,7 +10,8 @@
  * 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 debounce from 'lodash/debounce';
 import { h } from 'preact';
 import {
@@ -48,6 +49,7 @@ const PasswordRequirements: UISchemaElementComponent<{
     : data['credentials.passcode'];
 
   const [passwordValidations, setPasswordValidations] = useState<PasswordValidation>({});
+  const tokens = useOdysseyDesignTokens();
 
   const getPasswordStatus = (
     ruleKey: string,
@@ -96,14 +98,14 @@ const PasswordRequirements: UISchemaElementComponent<{
     >
       <Box
         component="figcaption"
-        className="password-authenticator--heading"
+        data-se="password-authenticator--heading"
       >
         {header}
       </Box>
       <Box
         component="ul"
         id={listId}
-        sx={{ listStyle: 'none', padding: '0', marginBlockStart: (theme) => theme.spacing(2) }}
+        sx={{ listStyle: 'none', padding: '0', marginBlockStart: tokens.Spacing3 }}
       >
         {requirements.map(({ ruleKey, label }) => (
           <PasswordRequirementListItem