@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/components/Images/AppIcon.tsx

@@ -10,54 +10,24 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { AppsIcon } from '@okta/odyssey-react-mui/icons';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const AppIcon: FunctionComponent = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-hidden="true"
-  >
-    <title>
-      {loc('icon.title.application', 'login')}
-    </title>
-    <rect
-      x="1.5"
-      y="1.5"
-      width="5"
-      height="5"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <rect
-      x="1.5"
-      y="9.5"
-      width="5"
-      height="5"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <rect
-      x="9.5"
-      y="9.5"
-      width="5"
-      height="5"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <rect
-      x="9.5"
-      y="1.5"
-      width="5"
-      height="5"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
+export const AppIcon: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <AppsIcon
+      sx={{
+        color: tokens.PalettePrimaryMain,
+        width: tokens.Spacing4,
+        height: tokens.Spacing4,
+      }}
+      titleAccess={loc('icon.title.application', 'login')}
+      aria-hidden
     />
-  </svg>
-);
+  );
+};

package/src/v3/components/Images/DeviceIcon.tsx

@@ -10,40 +10,24 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { DevicesIcon } from '@okta/odyssey-react-mui/icons';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const DeviceIcon: FunctionComponent = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-hidden="true"
-  >
-    <title>
-      {loc('icon.title.browser', 'login')}
-    </title>
-    <path
-      d="M4.5 14.5H8M11.5 14.5H8M8 14.5V13"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <path
-      d="M3 1.5H13C13.8284 1.5 14.5 2.17157 14.5 3V10C14.5 10.8284 13.8284 11.5 13 11.5H3C2.17157 11.5 1.5 10.8284 1.5 10V3C1.5 2.17157 2.17157 1.5 3 1.5Z"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <rect
-      x="2"
-      y="9"
-      width="12"
-      height="1"
-      fill="#1662DD"
-      class="siwIconFillPrimary"
+export const DeviceIcon: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <DevicesIcon
+      sx={{
+        color: tokens.PalettePrimaryMain,
+        width: tokens.Spacing4,
+        height: tokens.Spacing4,
+      }}
+      titleAccess={loc('icon.title.browser', 'login')}
+      aria-hidden
     />
-  </svg>
-);
+  );
+};

package/src/v3/components/Images/LocationIcon.tsx

@@ -10,34 +10,24 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { GlobeIcon } from '@okta/odyssey-react-mui/icons';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const LocationIcon: FunctionComponent = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-hidden="true"
-  >
-    <title>
-      {loc('icon.title.location', 'login')}
-    </title>
-    <path
-      d="M2.5 6C2.5 2.88969 4.95673 0.5 8 0.5C11.0433 0.5 13.5 2.88969 13.5 6C13.5 8.17828 12.3122 10.408 10.9484 12.2145C9.81608 13.7144 8.61136 14.859 8.0028 15.3649C7.39633 14.8508 6.1897 13.6812 5.05432 12.1652C3.68717 10.3398 2.5 8.11236 2.5 6Z"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
-    />
-    <circle
-      cx="8"
-      cy="6"
-      r="2.5"
-      stroke="#1662DD"
-      class="siwIconStrokePrimary"
+export const LocationIcon: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <GlobeIcon
+      sx={{
+        color: tokens.PalettePrimaryMain,
+        width: tokens.Spacing4,
+        height: tokens.Spacing4,
+      }}
+      titleAccess={loc('icon.title.location', 'login')}
+      aria-hidden
     />
-  </svg>
-);
+  );
+};

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

@@ -10,36 +10,41 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const PhoneIcon: FunctionComponent = () => (
-  <svg
-    width="51"
-    height="63"
-    viewBox="0 0 51 63"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-hidden="true"
-  >
-    <title>
-      {loc('icon.title.mobileDevice', 'login')}
-    </title>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M21.7496 62.7498H44.2496C45.957 62.6872 47.5708 61.9538 48.7409 60.7089C49.9109 59.4639 50.5429 57.8078 50.4996 56.0998V6.99981C50.5564 5.28333 49.9304 3.61435 48.7589 2.35851C47.5874 1.10268 45.9659 0.362378 44.2496 0.299805H21.7496C20.0334 0.362378 18.4119 1.10268 17.2404 2.35851C16.0689 3.61435 15.4429 5.28333 15.4996 6.99981V28.1311H17.9996V6.99981C17.9658 6.47429 18.036 5.94727 18.2063 5.44896C18.3766 4.95065 18.6436 4.49087 18.992 4.09601C19.3404 3.70114 19.7634 3.37896 20.2366 3.14794C20.7098 2.91693 21.224 2.78163 21.7496 2.74981L44.2496 2.7998C45.3021 2.86429 46.2865 3.34172 46.9888 4.12826C47.691 4.91479 48.0543 5.9468 47.9996 6.99981V56.0498C48.0335 56.5753 47.9633 57.1023 47.793 57.6007C47.6227 58.099 47.3557 58.5587 47.0073 58.9536C46.6589 59.3485 46.2359 59.6707 45.7627 59.9017C45.2895 60.1327 44.7753 60.268 44.2496 60.2998H21.7496C20.6972 60.2353 19.7128 59.7579 19.0105 58.9714C18.3082 58.1848 17.9449 57.1528 17.9996 56.0998V34.6311H15.4996V56.0498C15.4429 57.7663 16.0689 59.4353 17.2404 60.6911C18.4119 61.9469 20.0334 62.6872 21.7496 62.7498ZM38 55.25H28V57.75H38V55.25ZM33 5.25C34.3807 5.25 35.5 6.36929 35.5 7.75C35.5 9.13071 34.3807 10.25 33 10.25C31.6193 10.25 30.5 9.13071 30.5 7.75C30.5 6.36929 31.6193 5.25 33 5.25Z"
-      fill="#00297A"
-      class="siwIconFillPrimaryDark"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M26.2191 32.6309L20.85 38L22.62 39.76L31 31.38L22.62 23L20.85 24.76L26.2209 30.1309H2.98047V32.6309H26.2191Z"
-      fill="#A7B5EC"
-      class="siwIconFillSecondary"
-    />
-  </svg>
-);
+export const PhoneIcon: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <svg
+      width={tokens.Spacing9}
+      height={tokens.Spacing9}
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-hidden="true"
+    >
+      <title>
+        {loc('icon.title.mobileDevice', 'login')}
+      </title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.7496 62.7498H44.2496C45.957 62.6872 47.5708 61.9538 48.7409 60.7089C49.9109 59.4639 50.5429 57.8078 50.4996 56.0998V6.99981C50.5564 5.28333 49.9304 3.61435 48.7589 2.35851C47.5874 1.10268 45.9659 0.362378 44.2496 0.299805H21.7496C20.0334 0.362378 18.4119 1.10268 17.2404 2.35851C16.0689 3.61435 15.4429 5.28333 15.4996 6.99981V28.1311H17.9996V6.99981C17.9658 6.47429 18.036 5.94727 18.2063 5.44896C18.3766 4.95065 18.6436 4.49087 18.992 4.09601C19.3404 3.70114 19.7634 3.37896 20.2366 3.14794C20.7098 2.91693 21.224 2.78163 21.7496 2.74981L44.2496 2.7998C45.3021 2.86429 46.2865 3.34172 46.9888 4.12826C47.691 4.91479 48.0543 5.9468 47.9996 6.99981V56.0498C48.0335 56.5753 47.9633 57.1023 47.793 57.6007C47.6227 58.099 47.3557 58.5587 47.0073 58.9536C46.6589 59.3485 46.2359 59.6707 45.7627 59.9017C45.2895 60.1327 44.7753 60.268 44.2496 60.2998H21.7496C20.6972 60.2353 19.7128 59.7579 19.0105 58.9714C18.3082 58.1848 17.9449 57.1528 17.9996 56.0998V34.6311H15.4996V56.0498C15.4429 57.7663 16.0689 59.4353 17.2404 60.6911C18.4119 61.9469 20.0334 62.6872 21.7496 62.7498ZM38 55.25H28V57.75H38V55.25ZM33 5.25C34.3807 5.25 35.5 6.36929 35.5 7.75C35.5 9.13071 34.3807 10.25 33 10.25C31.6193 10.25 30.5 9.13071 30.5 7.75C30.5 6.36929 31.6193 5.25 33 5.25Z"
+        fill="#00297A"
+        class="siwIconFillPrimaryDark"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M26.2191 32.6309L20.85 38L22.62 39.76L31 31.38L22.62 23L20.85 24.76L26.2209 30.1309H2.98047V32.6309H26.2191Z"
+        fill="#A7B5EC"
+        class="siwIconFillSecondary"
+      />
+    </svg>
+  );
+};

package/src/v3/components/Images/YubikeyDemoImage.tsx

@@ -10,34 +10,39 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import { loc } from '../../util';
 
-export const YubikeyDemoImage: FunctionComponent = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="43"
-    height="58"
-    fill="none"
-    role="img"
-    viewBox="0 0 43 58"
-    aria-hidden="true"
-  >
-    <title>{loc('factor.totpHard.yubikey', 'login')}</title>
-    <path
-      fill="#00297A"
-      fillRule="evenodd"
-      d="M10.61 0a9 9 0 0 0-9 9v.5a8.5 8.5 0 0 0 8.5 8.5v-2a6.5 6.5 0 0 1-6.5-6.5V9a7 7 0 0 1 7-7h13v14h-5.75v2h7.75v-3h8V3h-8V0h-15Zm15 5v8h6V5h-6Z"
-      class="siwIconFillPrimaryDark"
-      clipRule="evenodd"
-    />
-    <path
-      fill="#A7B5EC"
-      fillRule="evenodd"
-      d="M25.61 6.5h4v2h-4v-2Zm0 3h4v2h-4v-2Zm-15.356 2.486a2.986 2.986 0 0 1 5.973 0V32.86a1 1 0 1 0 2 0v-4.892a2 2 0 0 1 2-2h2.13a2 2 0 0 1 2 2v7.475a1 1 0 1 0 2 0v-1.047c0-1.633 1.352-2.975 3.005-2.975 1.619 0 2.944 1.315 2.944 2.914v5.764a1 1 0 1 0 2 0v-.614a3.042 3.042 0 1 1 6.084 0v4.683h2v-4.683a5.042 5.042 0 0 0-8.084-4.022v-1.128c0-2.724-2.24-4.914-4.944-4.914a5.003 5.003 0 0 0-3.006 1.002v-2.455a4 4 0 0 0-4-4h-2.13c-.728 0-1.411.195-2 .535V11.986a4.986 4.986 0 0 0-9.972 0v19.607c-1.398.5-2.847 1.495-4.072 2.492A29.391 29.391 0 0 0 .935 37.18l-.155.175-.062.226c-.146.542-.128 1.168-.044 1.783.086.633.254 1.345.478 2.1.447 1.509 1.139 3.276 1.93 5.082 1.581 3.616 3.6 7.483 4.977 9.943l.489.872 1.745-.977-.489-.873c-1.356-2.421-3.342-6.227-4.89-9.767-.776-1.772-1.431-3.453-1.845-4.849a12.468 12.468 0 0 1-.414-1.8 3.726 3.726 0 0 1-.038-.795 27.872 27.872 0 0 1 2.828-2.664c.943-.768 1.918-1.44 2.81-1.874v8.552a1 1 0 1 0 2 0V11.986Z"
-      class="siwIconFillSecondary"
-      clipRule="evenodd"
-    />
-  </svg>
-);
+export const YubikeyDemoImage: FunctionComponent = () => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={tokens.Spacing9}
+      height={tokens.Spacing9}
+      fill="none"
+      role="img"
+      viewBox="0 0 43 58"
+      aria-hidden="true"
+    >
+      <title>{loc('factor.totpHard.yubikey', 'login')}</title>
+      <path
+        fill="#00297A"
+        fillRule="evenodd"
+        d="M10.61 0a9 9 0 0 0-9 9v.5a8.5 8.5 0 0 0 8.5 8.5v-2a6.5 6.5 0 0 1-6.5-6.5V9a7 7 0 0 1 7-7h13v14h-5.75v2h7.75v-3h8V3h-8V0h-15Zm15 5v8h6V5h-6Z"
+        class="siwIconFillPrimaryDark"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#A7B5EC"
+        fillRule="evenodd"
+        d="M25.61 6.5h4v2h-4v-2Zm0 3h4v2h-4v-2Zm-15.356 2.486a2.986 2.986 0 0 1 5.973 0V32.86a1 1 0 1 0 2 0v-4.892a2 2 0 0 1 2-2h2.13a2 2 0 0 1 2 2v7.475a1 1 0 1 0 2 0v-1.047c0-1.633 1.352-2.975 3.005-2.975 1.619 0 2.944 1.315 2.944 2.914v5.764a1 1 0 1 0 2 0v-.614a3.042 3.042 0 1 1 6.084 0v4.683h2v-4.683a5.042 5.042 0 0 0-8.084-4.022v-1.128c0-2.724-2.24-4.914-4.944-4.914a5.003 5.003 0 0 0-3.006 1.002v-2.455a4 4 0 0 0-4-4h-2.13c-.728 0-1.411.195-2 .535V11.986a4.986 4.986 0 0 0-9.972 0v19.607c-1.398.5-2.847 1.495-4.072 2.492A29.391 29.391 0 0 0 .935 37.18l-.155.175-.062.226c-.146.542-.128 1.168-.044 1.783.086.633.254 1.345.478 2.1.447 1.509 1.139 3.276 1.93 5.082 1.581 3.616 3.6 7.483 4.977 9.943l.489.872 1.745-.977-.489-.873c-1.356-2.421-3.342-6.227-4.89-9.767-.776-1.772-1.431-3.453-1.845-4.849a12.468 12.468 0 0 1-.414-1.8 3.726 3.726 0 0 1-.038-.795 27.872 27.872 0 0 1 2.828-2.664c.943-.768 1.918-1.44 2.81-1.874v8.552a1 1 0 1 0 2 0V11.986Z"
+        class="siwIconFillSecondary"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};

package/src/v3/components/Images/index.tsx

@@ -13,6 +13,5 @@
 export * from './AppIcon';
 export * from './DeviceIcon';
 export * from './LocationIcon';
-export * from './MobileDeviceIcon';
 export * from './PhoneIcon';
 export * from './YubikeyDemoImage';

package/src/v3/components/InfoBox/InfoBox.tsx

@@ -10,10 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Alert,
-  Box,
-} from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Callout, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useWidgetContext } from '../../contexts';
@@ -41,23 +39,25 @@ const InfoBox: UISchemaElementComponent<{
     },
   } = uischema;
 
+  const tokens = useOdysseyDesignTokens();
+
   return loading ? null : (
     <Box
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       width={1}
-      data-se="message"
+      data-se={`infobox-${messageClass.toLowerCase()}`}
     >
-      <Alert
+      <Callout
         severity={MessageTypeVariant[messageClass as MessageType] ?? MessageTypeVariant.INFO}
-        variant="infobox"
-        data-se={dataSe}
-        className={`infobox-${messageClass.toLowerCase()}`}
+        testId={dataSe}
+        // visually-hidden severity text is not translated
+        translate="no"
       >
         {
           Array.isArray(message)
             ? message.map((msg) => (
               <Box
-                marginBlockEnd={2}
+                marginBlockEnd={tokens.Spacing2}
                 key={msg.message}
               >
                 <WidgetMessageContainer
@@ -75,7 +75,7 @@ const InfoBox: UISchemaElementComponent<{
               />
             )
         }
-      </Alert>
+      </Callout>
     </Box>
   );
 };

package/src/v3/components/InfoSection/InfoSection.tsx

@@ -10,7 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Alert, Box } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Callout, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { IdxMessage } from '@okta/okta-auth-js';
 import { FunctionComponent, h } from 'preact';
 
@@ -20,19 +21,24 @@ type Props = {
   message?: IdxMessage;
 };
 
-const InfoSection: FunctionComponent<Props> = ({ message }) => (message ? (
-  <Box
-    marginBlockEnd={4}
-    width={1}
-  >
-    <Alert
-      key={message.i18n?.key || message.message}
-      severity={MessageTypeVariant[message.class as MessageType] ?? MessageTypeVariant.INFO}
-      variant="infobox"
+const InfoSection: FunctionComponent<Props> = ({ message }) => {
+  const tokens = useOdysseyDesignTokens();
+
+  return (message ? (
+    <Box
+      marginBlockEnd={tokens.Spacing4}
+      width={1}
     >
-      {message.message}
-    </Alert>
-  </Box>
-) : null);
+      <Callout
+        key={message.i18n?.key || message.message}
+        severity={MessageTypeVariant[message.class as MessageType] ?? MessageTypeVariant.INFO}
+        // visually-hidden severity text is not translated
+        translate="no"
+      >
+        {message.message}
+      </Callout>
+    </Box>
+  ) : null);
+};
 
 export default InfoSection;

package/src/v3/components/InformationalText/InformationalText.tsx

@@ -10,12 +10,22 @@
  * 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, TypographyVariantValue } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 
 import { useHtmlContentParser } from '../../hooks';
 import { DescriptionElement, UISchemaElementComponent } from '../../types';
 
+const odyTypographyVariantMapping: Record<
+'body1' | 'subtitle1' | 'legend',
+TypographyVariantValue
+> = {
+  body1: 'body',
+  subtitle1: 'subordinate',
+  legend: 'legend',
+};
+
 const InformationalText: UISchemaElementComponent<{
   uischema: DescriptionElement
 }> = ({
@@ -34,11 +44,11 @@ const InformationalText: UISchemaElementComponent<{
       justifyContent="flex-start"
     >
       <Typography
-        id={uischema.id}
-        paragraph
-        data-se={dataSe || 'o-form-explain'}
-        className={uischema.noTranslate ? 'no-translate' : undefined}
-        variant={variant ?? 'body1'}
+        component="p"
+        variant={variant ? odyTypographyVariantMapping[variant]
+          : odyTypographyVariantMapping.body1}
+        testId={dataSe || 'o-form-explain'}
+        translate={uischema.noTranslate ? 'no' : undefined}
       >
         {parsedContent}
       </Typography>