Wrap Typography (#1886)

* feat: wrap Typography

* feat: add ARIA props to Typography

* refactor: switch Typography to internal and add color

* fix: update types

* refactor: abstract component list into type

* refactor: encapsulate component

* refactor: update aliases

* fix: modify vestigial Typogrpahy components

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

@@ -14,8 +14,8 @@ import {
   Checkbox as MuiCheckbox,
   CheckboxProps as MuiCheckboxProps,
   FormControlLabel,
-  Typography,
 } from "@mui/material";
+import { Typography } from "./Typography";
 import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 

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

@@ -15,11 +15,11 @@ import { memo, ReactElement, useMemo } from "react";
 import {
   FormControl as MuiFormControl,
   FormLabel as MuiFormLabel,
-  Typography,
 } from "@mui/material";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
 import { FieldLabel } from "./FieldLabel";
+import { Typography } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 import { useTranslation } from "react-i18next";
 

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

@@ -15,7 +15,7 @@ import { memo, useMemo } from "react";
 
 import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText";
-import { Typography } from "@mui/material";
+import { Subordinate } from "./Typography";
 
 export type FieldLabelProps = {
   hasVisibleLabel: boolean;
@@ -39,9 +39,7 @@ const FieldLabel = ({
       <MuiInputLabel htmlFor={inputId} id={id}>
         <span>{text}</span>
         {isOptional && (
-          <Typography variant="subtitle1">
-            {t("fieldlabel.optional.text")}
-          </Typography>
+          <Subordinate>{t("fieldlabel.optional.text")}</Subordinate>
         )}
       </MuiInputLabel>
     ),

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

@@ -12,8 +12,9 @@
 
 import { memo, ReactElement } from "react";
 
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { Infobox } from "./Infobox";
+import { Legend, Subordinate } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
 export type FieldsetProps = {
@@ -71,14 +72,8 @@ const Fieldset = ({
         },
       }}
     >
-      <Typography variant="legend" component="legend">
-        {legend}
-      </Typography>
-      {description && (
-        <Typography component="p" variant="subtitle2">
-          {description}
-        </Typography>
-      )}
+      <Legend>{legend}</Legend>
+      {description && <Subordinate component="p">{description}</Subordinate>}
       {alert}
       {children}
     </Box>

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

@@ -12,9 +12,10 @@
 
 import { memo, ReactElement } from "react";
 
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { Button } from "./Button";
 import { Infobox } from "./Infobox";
+import { Heading4, Support } from "./Typography";
 import { useUniqueId } from "./useUniqueId";
 
 export const formEncodingTypeValues = [
@@ -123,16 +124,8 @@ const Form = ({
           marginBlockEnd: (theme) => theme.spacing(4),
         }}
       >
-        {title && (
-          <Typography variant="h4" component="h1">
-            {title}
-          </Typography>
-        )}
-        {description && (
-          <Typography component="p" variant="subtitle2">
-            {description}
-          </Typography>
-        )}
+        {title && <Heading4 component="h1">{title}</Heading4>}
+        {description && <Support>{description}</Support>}
         {alert}
       </Box>
       <Box component="div">{children}</Box>