@okta/okta-signin-widget 7.16.0 → 7.16.1

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

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const CustomOTPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const CustomOTPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#A7B5EC"
       d="M28 23h-6v-6h1v5h5v1Z"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const DuoIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const DuoIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#77AF54"
       fillRule="evenodd"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const EmailIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const EmailIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#A7B5EC"
       d="M32 18v1h5.3L32 24.29v1.42l6-6.01v12.8a1.5 1.5 0 0 1-1.5 1.5h-17a1.5 1.5 0 0 1-1.5-1.5V31h-1v1.5a2.5 2.5 0 0 0 2.5 2.5h17a2.5 2.5 0 0 0 2.5-2.5V18h-7Z"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const GoogleOTPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const GoogleOTPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const IDPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const IDPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#A7B5EC"
       d="M15 29.5a5 5 0 1 1 4.78-6.5h1.03a6 6 0 1 0 0 3h-1.03A5.013 5.013 0 0 1 15 29.5Z"

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

@@ -27,13 +27,6 @@ export const OktaVerifyIcon: FunctionComponent<IconProps> = ({
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#00297A"
       fillRule="evenodd"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const OnPremMFAIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const OnPremMFAIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#00297A"
       d="M39 20h-8v-3H16.5a7.5 7.5 0 0 0 0 15H31v-3h8v-9Zm-9 11H16.5a6.5 6.5 0 1 1 0-13H30v13Zm8-3h-7v-7h7v7Z"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const PasswordIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const PasswordIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#A7B5EC"
       d="M11 17h-1V9h8v1h-7v7Zm28 0h-1v-7h-7V9h8v8ZM18 39h-8v-8h1v7h7v1Zm21 0h-8v-1h7v-7h1v8Z"

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

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const PhoneIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const PhoneIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#00297A"
       d="M21.5 37h-9a2.6 2.6 0 0 1-2.5-2.682V14.682A2.6 2.6 0 0 1 12.5 12h9a2.6 2.6 0 0 1 2.5 2.682v19.636A2.6 2.6 0 0 1 21.5 37Zm-9-24a1.6 1.6 0 0 0-1.5 1.682v19.636A1.6 1.6 0 0 0 12.5 36h9a1.6 1.6 0 0 0 1.5-1.682V14.682A1.6 1.6 0 0 0 21.5 13h-9Z"