@okta/odyssey-react-mui 0.23.0 → 0.24.0

package/src/Form.tsx

@@ -0,0 +1,142 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, ReactElement } from "react";
+
+import { Box, Typography } from "./";
+import { Button } from "./Button";
+import { Infobox } from "./Infobox";
+import { useUniqueId } from "./useUniqueId";
+
+export type FormProps = {
+  /**
+   * The title of the Form
+   */
+  title?: string;
+  /**
+   * A supplementary description
+   */
+  description?: string;
+  /**
+   * The Field or FieldSet components within the Form
+   */
+  children: ReactElement | Array<ReactElement>;
+  /**
+   * An Infobox indicating a Form-wide error or status update.
+   */
+  alert?: ReactElement<typeof Infobox>;
+  /**
+   * Indicates whether input elements can by default have their values automatically completed by the browser.
+   * `autocomplete` attributes on form elements override it on <form>
+   */
+  hasAutoComplete?: "on" | "off" | undefined;
+  /**
+   * The name of the form. The value must not be the empty string, and must be unique among the form elements in the forms collection that it is in, if any.
+   */
+  name: string;
+  /**
+   * This Boolean attribute indicates that the form shouldn't be validated when submitted.
+   * If this attribute is not set (and therefore the form is validated),
+   * it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
+   */
+  noValidate?: boolean;
+  /**
+   * If the value of the method attribute is post, enctype is the MIME type of the form submission.
+   * This value can be overridden by formenctype attributes on <button>, <input type="submit">, or <input type="image"> elements.
+   */
+  encodingType?:
+    | "application/x-www-form-urlencoded"
+    | "multipart/form-data"
+    | "text/plain"
+    | undefined;
+  /**
+   * The HTTP method to submit the form with.
+   * This value is overridden by formmethod attributes on <button>, <input type="submit">, or <input type="image"> elements.
+   */
+  method?: "post" | "get" | "dialog" | undefined;
+  /**
+   * Indicates where to display the response after submitting the form. It is a name/keyword for a browsing context (for example, tab, window, or iframe).
+   * This value can be overridden by a formtarget attribute on a <button>, <input type="submit">, or <input type="image"> element.
+   */
+  target?: "post" | "get" | "dialog" | undefined;
+  /**
+   * The Field or FieldGroup components within the Form
+   */
+  formActions?:
+    | ReactElement<typeof Button>
+    | Array<ReactElement<typeof Button>>;
+  /**
+   * Defines a unique identifier (ID) which must be unique in the whole document.
+   */
+  id?: string;
+};
+
+const Form = ({
+  alert,
+  children,
+  description,
+  encodingType,
+  formActions,
+  hasAutoComplete,
+  id: idOverride,
+  method,
+  name,
+  noValidate = false,
+  target,
+  title,
+}: FormProps) => {
+  const id = useUniqueId(idOverride);
+
+  return (
+    <Box
+      component="form"
+      autoComplete={hasAutoComplete}
+      name={name}
+      encType={encodingType}
+      method={method}
+      noValidate={noValidate}
+      target={target}
+      id={id}
+      sx={{
+        maxWidth: (theme) => theme.mixins.maxWidth,
+        margin: (theme) => theme.spacing(0),
+        padding: (theme) => theme.spacing(0),
+      }}
+    >
+      {title && (
+        <Typography variant="h4" component="h1">
+          {title}
+        </Typography>
+      )}
+      {description && <Typography paragraph>{description}</Typography>}
+      {alert}
+      {children}
+      {formActions && (
+        <Box
+          component="div"
+          sx={{
+            display: "flex",
+            justifyContent: "flex-start",
+            gap: (theme) => theme.spacing(1),
+          }}
+        >
+          {formActions}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const MemoizedForm = memo(Form);
+MemoizedForm.displayName = "Form";
+
+export { MemoizedForm as Form };

package/src/Icon.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef } from "react";
 import { iconDictionary } from "./iconDictionary";
 
 export type IconProps = {
@@ -38,20 +37,18 @@ export type IconProps = {
  * This component includes all icon data as static imports. Favor individual
  * icon component imports where possible to keep your bundle size smaller.
  */
-export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ ariaLabelledby, label, name, size }) => {
-    if (!(name in iconDictionary)) return null;
+export const Icon = ({ ariaLabelledby, label, name, size }: IconProps) => {
+  if (!(name in iconDictionary)) return null;
 
-    const NamedIcon = iconDictionary[name];
+  const NamedIcon = iconDictionary[name];
 
-    return (
-      <NamedIcon
-        aria-labelledby={ariaLabelledby}
-        fontSize={size}
-        titleAccess={label}
-      />
-    );
-  }
-);
+  return (
+    <NamedIcon
+      aria-labelledby={ariaLabelledby}
+      fontSize={size}
+      titleAccess={label}
+    />
+  );
+};
 
 Icon.displayName = "Icon";

package/src/Infobox.tsx

@@ -13,6 +13,7 @@
 import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle, ScreenReaderText } from ".";
+import { useTranslation } from "react-i18next";
 
 export type InfoboxProps = {
   /**
@@ -35,13 +36,17 @@ export type InfoboxProps = {
   title?: string;
 };
 
-const Infobox = ({ children, role, severity, title }: InfoboxProps) => (
-  <Alert role={role} severity={severity} variant="infobox">
-    <ScreenReaderText>{severity}: </ScreenReaderText>
-    {title && <AlertTitle>{title}</AlertTitle>}
-    {children}
-  </Alert>
-);
+const Infobox = ({ children, role, severity, title }: InfoboxProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert role={role} severity={severity} variant="infobox">
+      <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {children}
+    </Alert>
+  );
+};
 
 const MemoizedInfobox = memo(Infobox);
 

package/src/Link.tsx

@@ -28,9 +28,9 @@ export type LinkProps = {
 };
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { icon, children, target, variant } = props;
+  const { icon, children, target, variant, href, rel } = props;
   return (
-    <MuiLink ref={ref} variant={variant} target={target}>
+    <MuiLink ref={ref} variant={variant} target={target} href={href} rel={rel}>
       {icon && <span className="Link-icon">{icon}</span>}
       {children}
       {target === "_blank" && (

package/src/MenuItem.tsx

@@ -45,5 +45,6 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
 );
 
 const MemoizedMenuItem = memo(MenuItem);
+MemoizedMenuItem.displayName = "MenuItem";
 
 export { MemoizedMenuItem as MenuItem };

package/src/NativeSelect.tsx

@@ -0,0 +1,107 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ReactElement, forwardRef, memo, useCallback } from "react";
+import { Select as MuiSelect } from "@mui/material";
+import { SelectProps as MuiSelectProps } from "@mui/material";
+import { Field } from "./Field";
+
+export type NativeSelectOption = {
+  text: string;
+  value?: string;
+  type?: "heading" | "option";
+};
+
+export type NativeSelectProps = {
+  children?: ReactElement<"option"> | ReactElement<"optgroup">;
+  defaultValue?: string;
+  errorMessage?: string;
+  hint?: string;
+  id?: string;
+  isDisabled?: boolean;
+  isMultiSelect?: boolean;
+  isOptional?: boolean;
+  label: string;
+  onBlur?: MuiSelectProps["onBlur"];
+  onChange?: MuiSelectProps["onChange"];
+  onFocus?: MuiSelectProps["onFocus"];
+  value?: string | string[];
+};
+
+const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+  (
+    {
+      defaultValue,
+      errorMessage,
+      hint,
+      id: idOverride,
+      isDisabled = false,
+      isMultiSelect = false,
+      isOptional = false,
+      label,
+      onBlur,
+      onChange,
+      onFocus,
+      value,
+      children,
+    },
+    ref
+  ) => {
+    const renderFieldComponent = useCallback(
+      () => (
+        <MuiSelect
+          defaultValue={defaultValue}
+          id={idOverride}
+          name={idOverride}
+          multiple={isMultiSelect}
+          native={true}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          ref={ref}
+          value={value}
+          children={children}
+        />
+      ),
+      [
+        defaultValue,
+        idOverride,
+        isMultiSelect,
+        onBlur,
+        onChange,
+        onFocus,
+        ref,
+        children,
+        value,
+      ]
+    );
+
+    return (
+      <Field
+        errorMessage={errorMessage}
+        fieldType="single"
+        hasVisibleLabel
+        hint={hint}
+        id={idOverride}
+        isDisabled={isDisabled}
+        isOptional={isOptional}
+        label={label}
+        renderFieldComponent={renderFieldComponent}
+      />
+    );
+  }
+);
+
+const MemoizedNativeSelect = memo(NativeSelect);
+MemoizedNativeSelect.displayName = "NativeSelect";
+
+export { MemoizedNativeSelect as NativeSelect };

package/src/OdysseyI18n.ts

@@ -0,0 +1,101 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import { translation as cs } from "./properties/ts/odyssey-react-mui_cs";
+import { translation as da } from "./properties/ts/odyssey-react-mui_da";
+import { translation as de } from "./properties/ts/odyssey-react-mui_de";
+import { translation as el } from "./properties/ts/odyssey-react-mui_el";
+import { translation as en } from "./properties/ts/odyssey-react-mui";
+import { translation as es } from "./properties/ts/odyssey-react-mui_es";
+import { translation as fi } from "./properties/ts/odyssey-react-mui_fi";
+import { translation as fr } from "./properties/ts/odyssey-react-mui_fr";
+import { translation as hu } from "./properties/ts/odyssey-react-mui_hu";
+import { translation as id } from "./properties/ts/odyssey-react-mui_id";
+import { translation as it } from "./properties/ts/odyssey-react-mui_it";
+import { translation as ja } from "./properties/ts/odyssey-react-mui_ja";
+import { translation as ko } from "./properties/ts/odyssey-react-mui_ko";
+import { translation as ms } from "./properties/ts/odyssey-react-mui_ms";
+import { translation as nb } from "./properties/ts/odyssey-react-mui_nb";
+import { translation as nlNL } from "./properties/ts/odyssey-react-mui_nl-NL";
+import { translation as pl } from "./properties/ts/odyssey-react-mui_pl";
+import { translation as ptBR } from "./properties/ts/odyssey-react-mui_pt-BR";
+import { translation as ro } from "./properties/ts/odyssey-react-mui_ro";
+import { translation as ru } from "./properties/ts/odyssey-react-mui_ru";
+import { translation as sv } from "./properties/ts/odyssey-react-mui_sv";
+import { translation as th } from "./properties/ts/odyssey-react-mui_th";
+import { translation as tr } from "./properties/ts/odyssey-react-mui_tr";
+import { translation as uk } from "./properties/ts/odyssey-react-mui_uk";
+import { translation as zhCN } from "./properties/ts/odyssey-react-mui_zh-CN";
+import { translation as znTW } from "./properties/ts/odyssey-react-mui_zh-TW";
+
+import {
+  SupportedLanguages,
+  supportedLanguages,
+} from "./OdysseyTranslationProvider.types";
+
+export const defaultLNG: SupportedLanguages = "en";
+export const defaultNS = "translations";
+export const resources = {
+  cs,
+  da,
+  de,
+  el,
+  en,
+  es,
+  fi,
+  fr,
+  hu,
+  id,
+  it,
+  ja,
+  ko,
+  ms,
+  nb,
+  "nl-NL": nlNL,
+  pl,
+  "pt-BR": ptBR,
+  ro,
+  ru,
+  sv,
+  th,
+  tr,
+  uk,
+  "zh-CN": zhCN,
+  "zh-TW": znTW,
+};
+
+i18n.use(initReactI18next).init({
+  defaultNS,
+  ns: [defaultNS],
+  fallbackLng: defaultLNG,
+  supportedLngs: supportedLanguages,
+  load: "currentOnly",
+  keySeparator: false,
+  interpolation: {
+    escapeValue: false, // react already safe from xss
+    skipOnVariables: false, // to handle translations that use nesting
+  },
+  react: {
+    useSuspense: false,
+    bindI18nStore: "added",
+  },
+});
+
+Object.entries(resources).forEach(([locale, property]) => {
+  i18n.addResourceBundle(locale, defaultNS, property);
+});
+
+// eslint-disable-next-line import/no-default-export
+export default i18n;

package/src/OdysseyProvider.tsx

@@ -0,0 +1,59 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, ReactElement } from "react";
+
+import { ThemeOptions } from ".";
+import { DesignTokensOverride } from "../src/theme/index";
+import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
+import {
+  OdysseyTranslationProvider,
+  TranslationOverrides,
+} from "./OdysseyTranslationProvider";
+import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
+
+type OdysseyProviderProps = {
+  children: ReactElement;
+  nonce?: string;
+  themeOverride?: ThemeOptions;
+  designTokensOverride?: DesignTokensOverride;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
+const OdysseyProvider = ({
+  children,
+  nonce,
+  themeOverride,
+  designTokensOverride,
+  languageCode,
+  translationOverrides,
+}: OdysseyProviderProps) => (
+  <OdysseyCacheProvider nonce={nonce}>
+    <OdysseyThemeProvider
+      themeOverride={themeOverride}
+      designTokensOverride={designTokensOverride}
+    >
+      <OdysseyTranslationProvider
+        languageCode={languageCode}
+        translationOverrides={translationOverrides}
+      >
+        {children}
+      </OdysseyTranslationProvider>
+    </OdysseyThemeProvider>
+  </OdysseyCacheProvider>
+);
+
+const MemoizedThemeProvider = memo(OdysseyProvider);
+
+export { MemoizedThemeProvider as OdysseyProvider };

package/src/OdysseyThemeProvider.tsx

@@ -13,19 +13,25 @@
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { memo, ReactElement, useMemo } from "react";
 
-import { createTheme, deepmerge, ThemeOptions } from ".";
-import { odysseyTheme } from "./theme";
+import { createTheme, deepmerge, ThemeOptions, DesignTokensOverride } from ".";
+import { createOdysseyMuiTheme } from "./theme";
+import * as Tokens from "@okta/odyssey-design-tokens";
 
 const OdysseyThemeProvider = ({
   children,
   themeOverride,
+  designTokensOverride,
 }: {
   children: ReactElement;
   themeOverride?: ThemeOptions;
+  designTokensOverride?: DesignTokensOverride;
 }) => {
+  const odysseyTokens = { ...Tokens, ...designTokensOverride };
+  const odysseyTheme = createOdysseyMuiTheme(odysseyTokens);
+
   const customOdysseyTheme = useMemo(
     () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),
-    [themeOverride]
+    [odysseyTheme, themeOverride]
   );
 
   return (

package/src/OdysseyTranslationProvider.test.tsx

@@ -0,0 +1,63 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider";
+import i18n from "./OdysseyI18n";
+import { TextField } from "./TextField";
+
+describe("OdysseyTranslationProvider", () => {
+  it("defaults to 'en' translation bundle", () => {
+    render(
+      <OdysseyTranslationProvider>
+        <span>{i18n.t("fieldlabel.optional.text")}</span>
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Optional"));
+  });
+
+  it("can modify a translation bundle with translantionOverrides", () => {
+    const translationOverrides = {
+      en: {
+        "fieldlabel.optional.text": "Non Required",
+      },
+    };
+
+    render(
+      <OdysseyTranslationProvider translationOverrides={translationOverrides}>
+        <TextField label={""} isOptional />
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Non Required"));
+  });
+
+  it("can change the displayed language with languageCode", () => {
+    const translationOverrides = {
+      fr: {
+        "fieldlabel.optional.text": "Optionnel",
+      },
+    };
+
+    render(
+      <OdysseyTranslationProvider
+        languageCode="fr"
+        translationOverrides={translationOverrides}
+      >
+        <TextField label={""} isOptional />
+      </OdysseyTranslationProvider>
+    );
+
+    expect(screen.getByText("Optionnel"));
+  });
+});

package/src/OdysseyTranslationProvider.tsx

@@ -0,0 +1,65 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ReactElement, useEffect } from "react";
+
+import { SupportedLanguages } from "./OdysseyTranslationProvider.types";
+
+import i18n, { defaultNS, resources } from "./OdysseyI18n";
+import { I18nextProvider } from "react-i18next";
+
+export type TranslationOverrides = {
+  [key in SupportedLanguages]?: Partial<(typeof resources)["en"]>;
+};
+
+type OdysseyTranslationProviderProps = {
+  children: ReactElement;
+  languageCode?: SupportedLanguages;
+  translationOverrides?: TranslationOverrides;
+};
+
+const mergeBundleOverrides = (
+  languageCode: SupportedLanguages,
+  translationOverrides: TranslationOverrides
+) => {
+  const bundle = resources[languageCode];
+  const overrides = translationOverrides[languageCode];
+  return {
+    ...bundle,
+    ...overrides,
+  };
+};
+
+export const OdysseyTranslationProvider = ({
+  children,
+  languageCode,
+  translationOverrides,
+}: OdysseyTranslationProviderProps) => {
+  useEffect(() => {
+    // Defaults to the browser's language if available otherwise `en` will be used
+    i18n.changeLanguage(languageCode || window.navigator.language);
+  }, [languageCode]);
+
+  useEffect(() => {
+    if (translationOverrides) {
+      Object.keys(translationOverrides).forEach((language) => {
+        const bundle = mergeBundleOverrides(
+          language as SupportedLanguages,
+          translationOverrides
+        );
+        i18n.addResourceBundle(language, defaultNS, bundle);
+      });
+    }
+  }, [translationOverrides]);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};