@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/src/Dialog.tsx

@@ -0,0 +1,110 @@
+/*!
+ * 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 { Dialog as MuiDialog } from "@mui/material";
+import {
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
+import { Button, CloseIcon } from "./";
+import {
+  memo,
+  ReactNode,
+  useState,
+  useEffect,
+  useRef,
+  ReactElement,
+} from "react";
+
+export type DialogProps = {
+  callToActionPrimaryComponent?: ReactElement<typeof Button>;
+  callToActionSecondaryComponent?: ReactElement<typeof Button>;
+  callToActionTertiaryComponent?: ReactElement<typeof Button>;
+  children: ReactNode | Array<ReactNode>;
+  onClose: () => void;
+  isOpen: boolean;
+  title: string;
+};
+
+const Dialog = ({
+  callToActionPrimaryComponent,
+  callToActionSecondaryComponent,
+  callToActionTertiaryComponent,
+  children,
+  isOpen,
+  onClose,
+  title,
+}: DialogProps) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let frameId: number;
+
+    const handleContentScroll = () => {
+      const dialogContentElement = dialogContentRef.current;
+      if (dialogContentElement) {
+        setIsContentScrollable(
+          dialogContentElement.scrollHeight > dialogContentElement.clientHeight
+        );
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+
+  const content =
+    typeof children === "string" ? (
+      <DialogContentText>{children}</DialogContentText>
+    ) : (
+      children
+    );
+
+  return (
+    <MuiDialog open={isOpen} onClose={onClose}>
+      <DialogTitle>
+        {title}
+        <Button
+          variant="floating"
+          onClick={onClose}
+          startIcon={<CloseIcon />}
+        />
+      </DialogTitle>
+      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>
+        {content}
+      </DialogContent>
+
+      {(callToActionPrimaryComponent ||
+        callToActionSecondaryComponent ||
+        callToActionTertiaryComponent) && (
+        <DialogActions>
+          {callToActionTertiaryComponent}
+          {callToActionSecondaryComponent}
+          {callToActionPrimaryComponent}
+        </DialogActions>
+      )}
+    </MuiDialog>
+  );
+};
+
+const MemoizedDialog = memo(Dialog);
+
+export { MemoizedDialog as Dialog };

package/src/Field.tsx

@@ -13,18 +13,25 @@
 import { memo, ReactElement, useMemo } from "react";
 
 import {
-  FieldError,
-  FieldHint,
-  FieldLabel,
-  FormControl,
-  useUniqueId,
-} from "./";
+  FormControl as MuiFormControl,
+  FormLabel as MuiFormLabel,
+  Typography,
+} from "@mui/material";
+import { FieldError } from "./FieldError";
+import { FieldHint } from "./FieldHint";
+import { FieldLabel } from "./FieldLabel";
+import { useUniqueId } from "./useUniqueId";
+import { useTranslation } from "react-i18next";
 
 export type FieldProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
+   */
+  fieldType: "single" | "group";
   hasVisibleLabel: boolean;
   /**
    * The helper text content.
@@ -34,26 +41,33 @@ export type FieldProps = {
    * The id of the `input` element.
    */
   id?: string;
+  /**
+   * Important for narrowing down the `fieldset` role to "radiogroup".
+   */
+  isRadioGroup?: boolean;
+  /**
+   * Important for determining if children inherit error state
+   */
+  isCheckboxGroup?: boolean;
   /**
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * If `true`, the `input` element is not required.
    */
-  isRequired?: boolean;
+  isOptional?: boolean;
   /**
    * The label for the `input` element.
    */
   label: string;
-  /**
-   * The label for the `input` element if the it's not optional
-   */
-  optionalLabel?: string;
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder?: string;
+  /**
+   * Render-props function that sends back ARIA props to your field component.
+   */
   renderFieldComponent: ({
     ariaDescribedBy,
     id,
@@ -65,15 +79,18 @@ export type FieldProps = {
 
 const Field = ({
   errorMessage,
+  fieldType,
   hasVisibleLabel,
   hint,
   id: idOverride,
   isDisabled = false,
-  isRequired = true,
+  isRadioGroup = false,
+  isOptional = false,
   label,
-  optionalLabel,
   renderFieldComponent,
 }: FieldProps) => {
+  const { t } = useTranslation();
+
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
   const errorId = errorMessage ? `${id}-error` : undefined;
@@ -85,15 +102,30 @@ const Field = ({
   );
 
   return (
-    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
-      <FieldLabel
-        hasVisibleLabel={hasVisibleLabel}
-        id={labelId}
-        inputId={id}
-        isRequired={isRequired}
-        optionalText={optionalLabel}
-        text={label}
-      />
+    <MuiFormControl
+      component={fieldType === "group" ? "fieldset" : "div"}
+      disabled={isDisabled}
+      error={Boolean(errorMessage)}
+      role={isRadioGroup ? "radiogroup" : undefined}
+    >
+      {fieldType === "group" ? (
+        <MuiFormLabel component="legend">
+          {label}{" "}
+          {isOptional && label && (
+            <Typography component="span" color="textSecondary">
+              ({t("fieldlabel.optional.text")})
+            </Typography>
+          )}
+        </MuiFormLabel>
+      ) : (
+        <FieldLabel
+          hasVisibleLabel={hasVisibleLabel}
+          id={labelId}
+          inputId={id}
+          isOptional={isOptional}
+          text={label}
+        />
+      )}
 
       {hint && <FieldHint id={hintId} text={hint} />}
 
@@ -103,7 +135,7 @@ const Field = ({
       })}
 
       {errorMessage && <FieldError id={errorId} text={errorMessage} />}
-    </FormControl>
+    </MuiFormControl>
   );
 };
 

package/src/FieldError.tsx

@@ -14,6 +14,7 @@ import { memo } from "react";
 
 import { FormHelperText } from ".";
 import { ScreenReaderText } from "./ScreenReaderText";
+import { useTranslation } from "react-i18next";
 
 export type FieldErrorProps = {
   id?: string;
@@ -21,9 +22,13 @@ export type FieldErrorProps = {
 };
 
 const FieldError = ({ id, text }: FieldErrorProps) => {
+  const { t } = useTranslation();
+
   return (
     <FormHelperText error id={id}>
-      <ScreenReaderText>Error:</ScreenReaderText>
+      <ScreenReaderText>{`${t(
+        "fielderror.screenreader.text"
+      )}:`}</ScreenReaderText>
       {text}
     </FormHelperText>
   );

package/src/FieldLabel.tsx

@@ -10,9 +10,10 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputLabel } from "@mui/material";
+import { InputLabel as MuiInputLabel } from "@mui/material";
 import { memo, useMemo } from "react";
 
+import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { Typography } from ".";
 
@@ -20,8 +21,7 @@ export type FieldLabelProps = {
   hasVisibleLabel: boolean;
   id: string;
   inputId: string;
-  isRequired: boolean;
-  optionalText?: string;
+  isOptional: boolean;
   text: string;
 };
 
@@ -29,20 +29,23 @@ const FieldLabel = ({
   hasVisibleLabel,
   id,
   inputId,
-  isRequired,
-  optionalText,
+  isOptional,
   text,
 }: FieldLabelProps) => {
+  const { t } = useTranslation();
+
   const inputLabel = useMemo(
     () => (
-      <InputLabel htmlFor={inputId} id={id}>
+      <MuiInputLabel htmlFor={inputId} id={id}>
         {text}
-        {!isRequired && (
-          <Typography variant="subtitle1">{optionalText}</Typography>
+        {isOptional && (
+          <Typography variant="subtitle1">
+            {t("fieldlabel.optional.text")}
+          </Typography>
         )}
-      </InputLabel>
+      </MuiInputLabel>
     ),
-    [id, inputId, isRequired, optionalText, text]
+    [id, inputId, isOptional, text, t]
   );
 
   return hasVisibleLabel ? (

package/src/Fieldset.tsx

@@ -0,0 +1,95 @@
+/*!
+ * 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 { Infobox } from "./Infobox";
+import { useUniqueId } from "./useUniqueId";
+
+export type FieldsetProps = {
+  /**
+   * The title of the Fieldset
+   */
+  legend: string;
+  /**
+   * A supplementary description
+   */
+  description?: string;
+  /**
+   * The Field components within the Fieldset
+   */
+  children: ReactElement | Array<ReactElement>;
+  /**
+   * An Infobox indicating a Fieldset-wide error or status update.
+   */
+  alert?: ReactElement<typeof Infobox>;
+  /**
+   * The name associated with the group.
+   */
+  name?: string;
+  // /**
+  //  * If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>.
+  //  * They won't receive any browsing events, like mouse clicks or focus-related events.
+  //  * Note that form elements inside the <legend> element won't be disabled.
+  //  */
+  // NOTE: Functionality is currently disabled. This will correctly disable child <input>s, but will not pass `isDisabled` to the child components.
+  // isDisabled?: boolean;
+  /**
+   * Defines a unique identifier (ID) which must be unique in the whole document.
+   */
+  id?: string;
+};
+
+const Fieldset = ({
+  alert,
+  children,
+  description,
+  legend,
+  name,
+  id: idOverride,
+}: // isDisabled,
+FieldsetProps) => {
+  const id = useUniqueId(idOverride);
+
+  return (
+    <Box
+      component="fieldset"
+      // disabled={isDisabled}
+      name={name}
+      id={id}
+      sx={{
+        maxWidth: (theme) => theme.mixins.maxWidth,
+        margin: (theme) => theme.spacing(0),
+        marginBlockEnd: (theme) => theme.spacing(4),
+        padding: (theme) => theme.spacing(0),
+        border: "0",
+
+        "&:last-child": {
+          marginBlockEnd: (theme) => theme.spacing(0),
+        },
+      }}
+    >
+      <Typography variant="legend" component="legend">
+        {legend}
+      </Typography>
+      {description && <Typography paragraph>{description}</Typography>}
+      {alert}
+      {children}
+    </Box>
+  );
+};
+
+const MemoizedFieldset = memo(Fieldset);
+MemoizedFieldset.displayName = "Fieldset";
+
+export { MemoizedFieldset as Fieldset };

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.test.tsx

@@ -18,7 +18,7 @@ const name = "check";
 
 describe("Icon", () => {
   it("renders an icon based on name prop", () => {
-    render(<Icon name={name} titleAccess={title} />);
+    render(<Icon name={name} label={title} size="medium" />);
 
     const svgElement = screen.getByRole("img");
     expect(svgElement).toBeVisible();

package/src/Icon.tsx

@@ -10,16 +10,26 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef } from "react";
-import type { SvgIconNoChildrenProps } from "./iconDictionary/types";
 import { iconDictionary } from "./iconDictionary";
 
-export interface IconProps extends SvgIconNoChildrenProps {
-  /**
-   * Name of the icon to render
+export type IconProps = {
+  /*
+   ** The element whose text describes the icon, if it exists
+   */
+  ariaLabelledby?: string;
+  /*
+   ** Text that describes the icon
+   */
+  label: string;
+  /*
+   ** Name of the icon to render
    */
   name: keyof typeof iconDictionary;
-}
+  /*
+   ** The size of the icon
+   */
+  size: "small" | "medium" | "large";
+};
 
 /**
  * A system of icons which establishes a visual language
@@ -27,14 +37,18 @@ export interface IconProps extends SvgIconNoChildrenProps {
  * 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>(
-  ({ name, titleAccess, ...rest }, ref) => {
-    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 titleAccess={titleAccess} ref={ref} {...rest} />;
-  }
-);
+  return (
+    <NamedIcon
+      aria-labelledby={ariaLabelledby}
+      fontSize={size}
+      titleAccess={label}
+    />
+  );
+};
 
 Icon.displayName = "Icon";

package/src/Infobox.tsx

@@ -13,35 +13,40 @@
 import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle, ScreenReaderText } from ".";
+import { useTranslation } from "react-i18next";
 
-export interface InfoboxProps {
+export type InfoboxProps = {
   /**
    * The contents of the alert
    */
   children: ReactNode;
-  /**
-   * Determine the color and icon of the alert
-   */
-  severity: AlertColor;
   /**
    * Sets the ARIA role of the alert
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
   role?: "status" | "alert";
+  /**
+   * Determine the color and icon of the alert
+   */
+  severity: AlertColor;
   /**
    * The title of the alert
    */
   title?: string;
-}
+};
+
+const Infobox = ({ children, role, severity, title }: InfoboxProps) => {
+  const { t } = useTranslation();
 
-const Infobox = ({ children, severity, role, title }: InfoboxProps) => (
-  <Alert role={role} severity={severity} variant="infobox">
-    <ScreenReaderText>{severity}: </ScreenReaderText>
-    {title && <AlertTitle>{title}</AlertTitle>}
-    {children}
-  </Alert>
-);
+  return (
+    <Alert role={role} severity={severity} variant="infobox">
+      <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      {children}
+    </Alert>
+  );
+};
 
 const MemoizedInfobox = memo(Infobox);