@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/components/AuthenticatorButton/AuthenticatorButtonList.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 { h } from 'preact';
 
 import {
@@ -24,19 +25,24 @@ const AuthenticatorButtonList: UISchemaElementComponent<{
   uischema: AuthenticatorButtonListElement
 }> = ({ uischema }) => {
   const { buttons, dataSe } = uischema.options;
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box
       component="ul"
       data-se={dataSe}
-      sx={{ listStyle: 'none', padding: '0', marginBlockStart: 0 }}
+      sx={{
+        listStyle: 'none',
+        padding: tokens.Spacing0,
+        marginBlockStart: tokens.Spacing0,
+      }}
     >
       {
         buttons.map((button: AuthenticatorButtonElement, index: number) => (
           <Box
             key={button.id}
             component="li"
-            sx={{ marginBlockEnd: (theme) => theme.spacing(4) }}
+            sx={{ marginBlockEnd: tokens.Spacing4 }}
           >
             <AuthenticatorButton
               uischema={{

package/src/v3/components/Button/Button.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 } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -20,6 +20,7 @@ import {
   ClickHandler,
   UISchemaElementComponent,
 } from '../../types';
+import Image from '../Image';
 import Spinner from '../Spinner';
 
 const Button: UISchemaElementComponent<{
@@ -34,6 +35,7 @@ const Button: UISchemaElementComponent<{
     label,
     focus,
     ariaDescribedBy,
+    noTranslate,
     options: {
       type,
       ariaLabel,
@@ -48,18 +50,16 @@ const Button: UISchemaElementComponent<{
       isActionStep,
       step,
       stepToRender,
-      classes,
       disabled,
       onClick,
     },
   } = uischema;
 
   const ButtonImageIcon = typeof Icon === 'string' ? (
-    <Box
-      component="img"
+    <Image
       src={Icon}
-      alt={iconAlt}
-      aria-hidden
+      alt={iconAlt ?? ''}
+      ariaHidden
     />
   ) : Icon && (<Icon />);
 
@@ -79,24 +79,20 @@ const Button: UISchemaElementComponent<{
 
   return (
     <OdyButton
+      label={label ?? ''}
       type={type}
       variant={variant ?? 'primary'}
-      fullWidth={wide ?? true}
-      ref={focusRef}
-      disabled={loading || disabled}
-      className={classes}
-      // Fixes text overflow
-      sx={{ display: 'flex', whiteSpace: 'normal' }}
-      startIcon={loading ? <Spinner color="white" /> : ButtonImageIcon}
-      aria-describedby={ariaDescribedBy}
-      data-type={dataType}
-      data-se={dataSe}
-      aria-label={ariaLabel}
+      isFullWidth={wide ?? true}
+      buttonRef={focusRef}
+      isDisabled={loading || disabled}
+      startIcon={loading ? <Spinner /> : ButtonImageIcon}
+      ariaDescribedBy={ariaDescribedBy}
+      testId={dataSe ?? dataType}
+      ariaLabel={ariaLabel}
+      translate={noTranslate ? 'no' : undefined}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...(type !== 'submit' && { onClick: typeof onClick === 'function' ? customClickHandler : handleClick })}
-    >
-      {label}
-    </OdyButton>
+    />
   );
 };
 

package/src/v3/components/CaptchaContainer/CaptchaContainer.tsx

@@ -11,7 +11,7 @@
  */
 
 import HCaptcha from '@hcaptcha/react-hcaptcha';
-import { Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
 import { useEffect, useRef } from 'preact/hooks';
 import ReCAPTCHA from 'react-google-recaptcha';
 

package/src/v3/components/Checkbox/Checkbox.tsx

@@ -10,24 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Box,
-  Checkbox as CheckboxMui,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-} from '@okta/odyssey-react-mui';
-import { Fragment, h } from 'preact';
+import { Checkbox as OdyCheckbox, CheckboxGroup } from '@okta/odyssey-react-mui';
+import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
-import { useAutoFocus, useValue } from '../../hooks';
+import { useAutoFocus, useHtmlContentParser, useValue } from '../../hooks';
 import {
   ChangeEvent,
   UISchemaElementComponent,
   UISchemaElementComponentWithValidationProps,
 } from '../../types';
-import { getTranslationInfo } from '../../util';
-import FieldLevelMessageContainer from '../FieldLevelMessageContainer';
+import { buildFieldLevelErrorMessages, getTranslationInfo, wrapInTranslateNo } from '../../util';
 import { withFormValidationState } from '../hocs';
 
 const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationProps> = ({
@@ -35,7 +28,6 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
   errors,
   handleChange,
   handleBlur,
-  describedByIds,
 }) => {
   const value = useValue(uischema);
   const { loading } = useWidgetContext();
@@ -43,86 +35,45 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
   const {
     options: { inputMeta: { name, mutable } },
     focus,
-    noTranslate,
     translations = [],
-    showAsterisk,
   } = uischema;
   const isReadOnly = mutable === false;
+  const checkboxId = `${name}-checkbox`;
   const labelInfo = getTranslationInfo(translations, 'label');
+  const label = useHtmlContentParser(labelInfo?.noTranslate
+    ? wrapInTranslateNo(labelInfo.value)
+    : labelInfo?.value) as string | undefined;
   const descriptionInfo = getTranslationInfo(translations, 'description');
+  const description = useHtmlContentParser(descriptionInfo?.noTranslate
+    ? wrapInTranslateNo(descriptionInfo.value)
+    : descriptionInfo?.value) as string | undefined;
   const focusRef = useAutoFocus<HTMLInputElement>(focus);
-  const hasErrors = typeof errors !== 'undefined';
+  const { errorMessage, errorMessageList } = buildFieldLevelErrorMessages(errors);
 
   return (
-    <FormControl
-      component="fieldset"
-      error={hasErrors}
-      aria-describedby={describedByIds}
-      className={noTranslate ? 'no-translate' : undefined}
+    <CheckboxGroup
+      errorMessage={errorMessage}
+      errorMessageList={errorMessageList}
+      id={name}
+      label=""
     >
-      <FormControlLabel
-        sx={{ alignItems: 'flex-start', gap: 0 }}
-        control={(
-          <CheckboxMui
-            size="medium"
-            checked={value === true}
-            id={name}
-            name={name}
-            inputRef={focusRef}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              handleChange?.(e.currentTarget.checked);
-            }}
-            onBlur={(e: ChangeEvent<HTMLInputElement>) => {
-              handleBlur?.(e?.currentTarget?.checked);
-            }}
-            disabled={loading || isReadOnly}
-            inputProps={{
-              'data-se': name,
-              'data-se-for-name': name,
-            }}
-            sx={(theme) => ({
-              marginInlineEnd: theme.spacing(2),
-            })}
-          />
-        )}
-        label={(
-          <Fragment>
-            {labelInfo?.noTranslate ? (
-              <Box
-                component="span"
-                className="no-translate"
-              >
-                {labelInfo?.value as string}
-              </Box>
-            ) : labelInfo?.value as string}
-            {showAsterisk && (
-              <Box
-                component="span"
-                sx={(theme) => ({
-                  marginInlineStart: theme.spacing(1),
-                  marginInlineEnd: theme.spacing(1),
-                })}
-                className="no-translate"
-                aria-hidden
-              >
-                *
-              </Box>
-            )}
-            {descriptionInfo?.value && (
-              <FormHelperText className={descriptionInfo.noTranslate ? 'no-translate' : undefined}>
-                {descriptionInfo.value}
-              </FormHelperText>
-            )}
-          </Fragment>
-        )}
+      <OdyCheckbox
+        hint={description}
+        id={checkboxId}
+        inputRef={focusRef}
+        isChecked={value === true}
+        isDisabled={loading || isReadOnly}
+        label={label}
+        name={name}
+        onBlur={(e: ChangeEvent<HTMLInputElement>) => {
+          handleBlur?.(e?.currentTarget?.checked);
+        }}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          handleChange?.(e.currentTarget.checked);
+        }}
+        testId={name}
       />
-      {hasErrors && (
-        <FieldLevelMessageContainer
-          messages={errors}
-          fieldName={name}
-        />
-      )}
-    </FormControl>
+    </CheckboxGroup>
   );
 };
 

package/src/v3/components/ConsentHeader/ConsentHeader.tsx

@@ -10,9 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Link } from '@mui/material';
-import * as Tokens from '@okta/odyssey-design-tokens';
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Link, Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { escape } from 'lodash';
 import { Fragment, FunctionComponent, h } from 'preact';
 
@@ -20,6 +19,7 @@ import { IDX_STEP } from '../../constants';
 import { useWidgetContext } from '../../contexts';
 import { useHtmlContentParser } from '../../hooks';
 import { getAppInfo, getHeadingReplacerFn, loc } from '../../util';
+import Image from '../Image';
 
 const ConsentHeader: FunctionComponent = () => {
   const { idxTransaction } = useWidgetContext();
@@ -40,17 +40,17 @@ const ConsentHeader: FunctionComponent = () => {
     granularConsentTitle,
     { replace: getHeadingReplacerFn({}, 'h2', 2, 6) },
   );
+  const tokens = useOdysseyDesignTokens();
 
   const getAppLogo = (altText: string, logoHref?: string) => (
     typeof logoHref !== 'undefined' && (
-      <Box
-        component="img"
+      <Image
         src={logoHref}
         width="32px"
         height="32px"
         alt={altText}
-        className="client-logo custom-logo"
-        aria-hidden="true"
+        testId="client-logo"
+        ariaHidden
       />
     )
   );
@@ -68,12 +68,12 @@ const ConsentHeader: FunctionComponent = () => {
       >
         {typeof href !== 'undefined' && typeof logoHref !== 'undefined'
           ? (
-            <Box component="div">
+            <Box>
               <Link
                 href={href}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label={altText}
+                ariaLabel={altText}
               >
                 {getAppLogo(altText, logoHref)}
               </Link>
@@ -97,33 +97,34 @@ const ConsentHeader: FunctionComponent = () => {
         <Fragment>
           <Box
             component="span"
-            className="title-text"
+            data-se="title-text"
             textAlign="center"
           >
             <Typography
               component="h2"
               variant="h6"
-              className="no-translate"
+              translate="no"
             >
               {appName}
             </Typography>
-            <Typography paragraph>{titleText}</Typography>
+            <Typography variant="body">{titleText}</Typography>
             {hasIssuer && (
               <Box
                 display="flex"
                 justifyContent="center"
               >
-                <Typography
-                  sx={(theme) => ({
-                    marginBlockEnd: theme.spacing(4),
-                    backgroundColor: Tokens.ColorBackgroundPrimaryLight,
-                    color: Tokens.ColorBackgroundPrimaryDark,
-                    padding: '4px 2px',
-                  })}
-                  className="issuer no-translate"
+                <Box
+                  sx={{
+                    marginBlockEnd: tokens.Spacing5,
+                    backgroundColor: tokens.PalettePrimaryLighter,
+                    color: tokens.PalettePrimaryDarker,
+                    padding: `${tokens.Spacing1} ${tokens.Spacing2}`,
+                  }}
+                  data-se="issuer"
+                  translate="no"
                 >
                   {issuer.uri}
-                </Typography>
+                </Box>
               </Box>
             )}
           </Box>
@@ -133,8 +134,7 @@ const ConsentHeader: FunctionComponent = () => {
 
     return (
       <Box
-        component="div"
-        className="title-text"
+        data-se="title-text"
         textAlign="center"
       >
         {parsedGranularConsentTitle}

package/src/v3/components/Divider/Divider.tsx

@@ -19,8 +19,8 @@ const Divider: UISchemaElementComponent<{ uischema: DividerElement }> = ({ uisch
   const { options } = uischema;
 
   return typeof options?.text !== 'undefined' ? (
-    <MuiDivider className="separation-line">{options.text}</MuiDivider>
-  ) : <MuiDivider className="separation-line" />;
+    <MuiDivider data-se="separation-line">{options.text}</MuiDivider>
+  ) : <MuiDivider data-se="separation-line" />;
 };
 
 export default Divider;

package/src/v3/components/Form/Accordion.tsx

@@ -10,14 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  AccordionDetails,
-  AccordionSummary,
-  AccordionSummaryProps,
-} from '@mui/material';
-import MuiAccordion from '@mui/material/Accordion';
-import { styled } from '@mui/material/styles';
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Accordion as OdyAccordion, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { AccordionLayout } from '../../types';
@@ -27,44 +21,29 @@ type AccordionProps = {
   uischema: AccordionLayout;
 };
 
-const StyledAccordionSummary = styled((props: AccordionSummaryProps) => (
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  <AccordionSummary {...props} />
-))(({ theme }) => ({
-  padding: 0,
-  width: 'fit-content',
-  '& .MuiAccordionSummary-content': {
-    margin: 0,
-    color: theme.palette.primary.main,
-    '&:hover': {
-      textDecoration: 'underline',
-      textDecorationColor: theme.palette.primary.main,
-    },
-  },
-}));
-
 const Accordion: FunctionComponent<AccordionProps> = ({ uischema }) => {
   const { elements } = uischema;
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box>
       {
         elements.map((element) => (
-          <MuiAccordion
+          <Box
             key={element.key}
-            disableGutters
-            elevation={0}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...(!(element).noMargin && { marginBlockEnd: tokens.Spacing4 })}
           >
-            <StyledAccordionSummary
-              aria-controls={`${element.options.id}-content`}
-              id={`${element.options.id}-header`}
+            <OdyAccordion
+              hasShadow={false}
+              label={element.options.summary}
+              id={element.options.id}
             >
-              <Typography>{element.options.summary}</Typography>
-            </StyledAccordionSummary>
-            <AccordionDetails sx={{ padding: 0 }}>
-              <LayoutContainer uischema={element.options.content} />
-            </AccordionDetails>
-          </MuiAccordion>
+              <LayoutContainer
+                uischema={element.options.content}
+              />
+            </OdyAccordion>
+          </Box>
         ))
       }
     </Box>

package/src/v3/components/Form/ElementContainer.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 { FunctionComponent, h } from 'preact';
 
 import { useLayoutContext } from '../../contexts';
@@ -24,6 +25,7 @@ import renderers from './renderers';
 
 const ElementContainer: FunctionComponent<{ element: UISchemaElement }> = ({ element }) => {
   const { layoutDirection } = useLayoutContext();
+  const tokens = useOdysseyDesignTokens();
   const renderer = renderers.find((r) => r.tester(element));
   if (!renderer) {
     // TODO: for now do not render for unmatch render object
@@ -39,9 +41,10 @@ const ElementContainer: FunctionComponent<{ element: UISchemaElement }> = ({ ele
   return (
     <Box
       // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(!(element).noMargin && { marginBlockEnd: 4 })}
+      {...(!(element).noMargin && { marginBlockEnd: tokens.Spacing4 })}
       // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(layoutDirection === UISchemaLayoutType.HORIZONTAL && { marginInlineEnd: 1 })}
+      {...(layoutDirection === UISchemaLayoutType.HORIZONTAL
+        && { marginInlineEnd: tokens.Spacing1 })}
     >
       <Component uischema={element} />
     </Box>

package/src/v3/components/Form/Form.tsx

@@ -11,7 +11,6 @@
  */
 
 import { Box } from '@mui/material';
-import classNames from 'classnames';
 import { FunctionComponent, h } from 'preact';
 import { useCallback, useEffect } from 'preact/hooks';
 
@@ -28,7 +27,6 @@ import Layout from './Layout';
 const Form: FunctionComponent<{
   uischema: UISchemaLayout;
 }> = ({ uischema }) => {
-  const classes = classNames('o-form');
   const {
     data,
     idxTransaction: currTransaction,
@@ -108,8 +106,8 @@ const Form: FunctionComponent<{
       component="form"
       noValidate
       onSubmit={handleSubmit}
-      className={classes} // TODO: FIXME OKTA-578584 - update page objects using .o-form selectors
-      data-se="o-form"
+      className="o-form"
+      data-se="o-form" // TODO: FIXME OKTA-578584 - update page objects using .o-form selectors
       sx={{
         maxInlineSize: '100%',
         wordBreak: 'break-word',

package/src/v3/components/Form/Layout.tsx

@@ -10,7 +10,7 @@
  * 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 { FunctionComponent, h } from 'preact';
 
 import { LayoutContext } from '../../contexts';

package/src/v3/components/Form/LayoutContainer.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 { FunctionComponent, h } from 'preact';
 
 import {
@@ -30,6 +31,7 @@ import ElementContainer from './ElementContainer';
  */
 const LayoutContainer: FunctionComponent<{ uischema: UISchemaLayout }> = ({ uischema }) => {
   const { type, elements } = uischema;
+  const tokens = useOdysseyDesignTokens();
 
   const isHorizontalLayout = type === UISchemaLayoutType.HORIZONTAL;
   const flexDirection = isHorizontalLayout ? 'row' : 'column';
@@ -38,7 +40,7 @@ const LayoutContainer: FunctionComponent<{ uischema: UISchemaLayout }> = ({ uisc
       display="flex"
       flexDirection={flexDirection}
       // eslint-disable-next-line react/jsx-props-no-spreading
-      {...(isHorizontalLayout && { gap: 1 })}
+      {...(isHorizontalLayout && { gap: tokens.Spacing1 })}
     >
       {
         elements.map((element, index) => {

package/src/v3/components/Heading/Heading.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useHtmlContentParser } from '../../hooks';
@@ -20,6 +21,7 @@ const Heading: UISchemaElementComponent<{
   uischema: HeadingElement
 }> = ({ uischema }) => {
   const {
+    id,
     noTranslate,
     parserOptions,
     noMargin,
@@ -27,20 +29,20 @@ const Heading: UISchemaElementComponent<{
       content, dataSe, level, visualLevel,
     },
   } = uischema;
+  const tokens = useOdysseyDesignTokens();
   const parsedContent = useHtmlContentParser(content, parserOptions);
 
   return (
     <Box
       display="flex"
       justifyContent="flex-start"
-      marginBlockEnd={noMargin ? undefined : 2}
+      marginBlockEnd={noMargin ? undefined : tokens.Spacing2}
     >
       <Typography
-        id={uischema.id}
         variant={`h${visualLevel ?? 2}`}
         component={`h${level ?? 3}`}
-        className={noTranslate ? 'no-translate' : undefined}
-        data-se={dataSe}
+        translate={noTranslate ? 'no' : undefined}
+        testId={dataSe ?? id}
       >
         {parsedContent}
       </Typography>

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

@@ -14,32 +14,30 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const CustomAppIcon: FunctionComponent<IconProps> = ({ name, description }: IconProps) => (
+export const CustomAppIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}: IconProps) => (
   <svg
-    width="48"
-    height="48"
-    viewBox="0 0 140 140"
+    width={width || 48}
+    height={height || 48}
+    viewBox="0 0 48 48"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     aria-labelledby={name}
     role="img"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="70"
-      cy="70"
-      r="69"
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
       fill="#00297A"
-      stroke="#F5F5F6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M19.5 15A1 1 0 0128.5 15V20.7H33.5V35Q33.5 37.5 31 37.5H17Q14.5 37.5 14.5 35V20.7H19.5V15M27.2 15V20.7H20.8V15A1 1 0 0127.2 15M15.8 22V35Q15.8 36.2 17 36.2H31Q32.2 36.2 32.2 35V22H15.8Z"
       class="siwFillPrimaryDark"
     />
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M91.5625 105H49.0625C47.4023 105 43.75 105 43.75 99.6875V67.8125C43.75 66.1523 43.75 62.5 49.0625 62.5V51.875C49.0625 39.5898 58.0273 30.625 70.3125 30.625C82.5977 30.625 91.5625 39.5898 91.5625 51.875V62.5C96.875 62.5 96.875 66.1523 96.875 67.8125V99.6875C96.875 101.348 96.875 105 91.5625 105ZM80.9382 51.876C80.9382 45.5674 76.6218 41.251 70.3132 41.251C64.0046 41.251 59.6882 45.5674 59.6882 51.876V62.501H80.9382V51.876Z"
-      fill="white"
+      fill="#A7B5EC"
+      d="M21.35 29.1A2.65 2.65 0 1026.65 29.1 2.65 2.65 0 1021.35 29.1M22.65 29.1A1.35 1.35 0 1125.35 29.1 1.35 1.35 0 1122.65 29.1Z"
+      class="siwFillSecondary"
     />
   </svg>
 );