docs: update docs for Supernova (#1821)

* docs: update docs for Supernova

* fix: change type of endIcon in controls

* refactor: make Button default to primary

* feat: switch args back to alphabetical

* refactor: move icons into separate file

* fix: fix merge conflicts

* fix: fix type errors

* refactor: apply recommended changes

* feat: add docs for CircularProgress

* feat: add Link docs

* feat: add Icon docs

* feat: add Dialog docs

* feat: modify ScreenReaderText docs

* feat: update Status documentation

* feat: add Tooltip docs

* feat: add Tag documentation

* feat: add Tabs docs

* feat: added MenuButton docs

* feat: updated Typography docs

* refactor: simplify DatePicker docs

* feat: update Banner docs

* feat: update docs for Infobox

* feat: update Toast docs

* feat: update Autocomplete docs

* feat: update docs for TextField

* feat: update Checkbox and CheckboxGroup docs

* feat: update Radio and RadioGroup docs

* feat: update Form and Fieldset docs

* feat: update Select and NativeSelect docs

* refactor: abstracted out type enums

* fix: fix type errors in Toast stories

* fix: remove click on disabled checkbox

* refactor: commit KG suggestions

* fix: add missing variant to Button

* refactor: fix import relativity

packages/odyssey-react-mui/src/Banner.tsx

@@ -10,17 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import {
-  Alert,
-  AlertColor,
-  AlertTitle,
-  AlertProps,
-  Link,
-  ScreenReaderText,
-} from "./";
+import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
+import { Link } from "./Link";
+import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
+export const bannerRoleValues = ["status", "alert"] as const;
+export const bannerSeverityValues: AlertColor[] = [
+  "success",
+  "info",
+  "warning",
+  "error",
+];
+
 export type BannerProps = {
   /**
    * If linkUrl is not undefined, this is the text of the link.
@@ -42,11 +45,11 @@ export type BannerProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof bannerRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof bannerSeverityValues)[number];
   /**
    * The text content of the alert
    */

packages/odyssey-react-mui/src/Button.tsx

@@ -18,20 +18,28 @@ import { Icon } from "./Icon";
 import { MuiPropsContext } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 
+export const buttonSizeValues = ["small", "medium", "large"] as const;
+export const buttonVariantValues = [
+  "primary",
+  "secondary",
+  "danger",
+  "floating",
+] as const;
+
 export type ButtonProps = {
   endIcon?: ReactElement<typeof Icon>;
   id?: string;
   isDisabled?: boolean;
   isFullWidth?: boolean;
   onClick?: MuiButtonProps["onClick"];
-  size?: MuiButtonProps["size"];
+  size?: (typeof buttonSizeValues)[number];
   startIcon?: ReactElement<typeof Icon>;
   text?: string;
   /**
    * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
    */
   tooltipText?: string;
-  variant?: "primary" | "secondary" | "danger" | "floating";
+  variant: (typeof buttonVariantValues)[number];
   ariaLabel?: string;
   ariaLabelledBy?: string;
   ariaDescribedBy?: string;

packages/odyssey-react-mui/src/Field.tsx

@@ -23,6 +23,8 @@ import { FieldLabel } from "./FieldLabel";
 import { useUniqueId } from "./useUniqueId";
 import { useTranslation } from "react-i18next";
 
+export const fieldTypeValues = ["single", "group"] as const;
+
 export type FieldProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
@@ -31,7 +33,7 @@ export type FieldProps = {
   /**
    * 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";
+  fieldType: (typeof fieldTypeValues)[number];
   hasVisibleLabel: boolean;
   /**
    * The helper text content.

packages/odyssey-react-mui/src/Form.tsx

@@ -17,6 +17,15 @@ import { Button } from "./Button";
 import { Infobox } from "./Infobox";
 import { useUniqueId } from "./useUniqueId";
 
+export const formEncodingTypeValues = [
+  "application/x-www-form-urlencoded",
+  "application/json",
+  "multipart/form-data",
+  "text/plain",
+] as const;
+export const formAutoCompleteTypeValues = ["on", "off"] as const;
+export const formMethodValues = ["post", "get", "dialog"] as const;
+
 export type FormProps = {
   /**
    * The title of the Form
@@ -38,7 +47,7 @@ export type FormProps = {
    * 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;
+  autoCompleteType?: (typeof formAutoCompleteTypeValues)[number];
   /**
    * 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.
    */
@@ -53,21 +62,17 @@ export type FormProps = {
    * 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;
+  encodingType?: (typeof formEncodingTypeValues)[number];
   /**
    * 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;
+  method?: (typeof formMethodValues)[number];
   /**
    * 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;
+  target?: string;
   /**
    * The Field or FieldGroup components within the Form
    */
@@ -86,7 +91,7 @@ const Form = ({
   description,
   encodingType,
   formActions,
-  hasAutoComplete,
+  autoCompleteType,
   id: idOverride,
   method,
   name,
@@ -99,7 +104,7 @@ const Form = ({
   return (
     <Box
       component="form"
-      autoComplete={hasAutoComplete}
+      autoComplete={autoCompleteType}
       name={name}
       encType={encodingType}
       method={method}

packages/odyssey-react-mui/src/Icon.tsx

@@ -12,6 +12,8 @@
 
 import { iconDictionary } from "./iconDictionary";
 
+export const iconSizeValues = ["small", "medium", "large"] as const;
+
 export type IconProps = {
   /*
    ** The element whose text describes the icon, if it exists
@@ -28,7 +30,7 @@ export type IconProps = {
   /*
    ** The size of the icon
    */
-  size: "small" | "medium" | "large";
+  size: (typeof iconSizeValues)[number];
 };
 
 /**

packages/odyssey-react-mui/src/Infobox.tsx

@@ -10,12 +10,19 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
+export const infoboxRoleValues = ["status", "alert"] as const;
+export const infoboxSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
 export type InfoboxProps = {
   /**
    * The contents of the alert
@@ -26,11 +33,11 @@ export type InfoboxProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof infoboxRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof infoboxSeverityValues)[number];
   /**
    * The title of the alert
    */

packages/odyssey-react-mui/src/Link.tsx

@@ -14,15 +14,17 @@ import { forwardRef, memo, ReactElement } from "react";
 
 import { ExternalLinkIcon } from "./iconDictionary";
 
-import { Link as MuiLink, LinkProps as MuiLinkProps } from "@mui/material";
+import { Link as MuiLink } from "@mui/material";
+
+export const linkVariantValues = ["default", "monochrome"] as const;
 
 export type LinkProps = {
   children: React.ReactNode;
   href: string;
   icon?: ReactElement;
   rel?: string;
   target?: "_self" | "_blank" | "_parent" | "_top" | string;
-  variant?: MuiLinkProps["variant"];
+  variant?: (typeof linkVariantValues)[number];
 };
 
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(

packages/odyssey-react-mui/src/MenuButton.tsx

@@ -12,7 +12,7 @@
 
 import {
   Button,
-  ButtonProps,
+  buttonVariantValues,
   ChevronDownIcon,
   Divider,
   ListSubheader,
@@ -41,13 +41,13 @@ export type MenuButtonProps = {
   /**
    * The variant of the triggering Button
    */
-  buttonVariant?: ButtonProps["variant"];
+  buttonVariant?: (typeof buttonVariantValues)[number];
   /**
    * The end Icon on the trigggering Button
    */
   endIcon?: ReactElement;
   /**
-   * The id of the `input` element.
+   * The id of the button
    */
   id?: string;
   /**

packages/odyssey-react-mui/src/OdysseyCacheProvider.test.tsx

@@ -29,7 +29,7 @@ describe("OdysseyCacheProvider", () => {
   it("themes a Button", () => {
     render(
       <OdysseyCacheProvider>
-        <Button text="text" />
+        <Button variant="primary" text="text" />
       </OdysseyCacheProvider>
     );
 

packages/odyssey-react-mui/src/Status.tsx

@@ -12,11 +12,19 @@
 
 import { Chip } from "@mui/material";
 
+export const statusSeverityValues = [
+  "default",
+  "error",
+  "success",
+  "warning",
+] as const;
+export const statusVariantValues = ["lamp", "pill"] as const;
+
 export type StatusProps = {
   /**
    * Determine the color and icon of the alert
    */
-  severity: "default" | "error" | "success" | "warning";
+  severity: (typeof statusSeverityValues)[number];
 
   /**
    * The text content of the status
@@ -26,7 +34,7 @@ export type StatusProps = {
   /**
    * The style of indicator
    */
-  variant?: "lamp" | "pill";
+  variant?: (typeof statusVariantValues)[number];
 };
 
 export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => (

packages/odyssey-react-mui/src/TextField.tsx

@@ -24,6 +24,14 @@ import {
 import { Field } from "./Field";
 import { Icon } from "./Icon";
 
+export const textFieldTypeValues = [
+  "email",
+  "number",
+  "tel",
+  "text",
+  "url",
+] as const;
+
 export type TextFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -94,7 +102,7 @@ export type TextFieldProps = {
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
-  type?: "email" | "number" | "tel" | "text" | "url";
+  type?: (typeof textFieldTypeValues)[number];
   /**
    * The value of the `input` element, required for a controlled component.
    */

packages/odyssey-react-mui/src/Toast.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { useEffect, memo, useState, useCallback } from "react";
 import { Alert, AlertTitle, Snackbar } from "@mui/material";
 import { visuallyHidden } from "@mui/utils";
@@ -19,6 +18,14 @@ import { CloseIcon } from "./iconDictionary";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
 
+export const toastRoleValues = ["status", "alert"] as const;
+export const toastSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
 export type ToastProps = {
   /**
    * If set, this determines how long the toast should appear before automatically disappearing in milliseconds.
@@ -53,11 +60,11 @@ export type ToastProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof toastRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof toastSeverityValues)[number];
   /**
    * The text content of the alert
    */