Wrap Typography

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

@@ -0,0 +1,165 @@
+/*!
+ * 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 {
+  Typography as MuiTypography,
+  TypographyProps as MuiTypographyProps,
+} from "@mui/material";
+import { ElementType, ReactNode } from "react";
+
+export const typographyVariantValues = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "body1",
+  caption: "subtitle1",
+  legend: "legend",
+};
+
+export type TypographyProps = {
+  children: ReactNode;
+  classes?: object;
+  component?: ElementType;
+  variant?: keyof typeof typographyVariantValues;
+};
+
+export const Typography = ({
+  children,
+  classes,
+  component,
+  variant = "body",
+}: TypographyProps) => {
+  if (!component) {
+    component = variant;
+    if (variant === "body") {
+      component = "p";
+    }
+    if (variant === "caption") {
+      component = "h6";
+    }
+  }
+
+  return (
+    <MuiTypography
+      children={children}
+      classes={classes}
+      component={component}
+      variant={
+        typographyVariantValues[variant] as MuiTypographyProps["variant"]
+      }
+    />
+  );
+};
+
+Typography.displayName = "Typography";
+
+export const H1 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h1"
+  />
+);
+
+H1.displayName = "H1";
+
+export const H2 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h2"
+  />
+);
+
+H2.displayName = "H2";
+
+export const H3 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h3"
+  />
+);
+
+H3.displayName = "H3";
+
+export const H4 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h4"
+  />
+);
+
+H4.displayName = "H4";
+
+export const H5 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h5"
+  />
+);
+
+H5.displayName = "H5";
+
+export const H6 = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="h6"
+  />
+);
+
+H6.displayName = "H6";
+
+export const Body = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="body"
+  />
+);
+
+Body.displayName = "Body";
+
+export const Caption = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="caption"
+  />
+);
+
+Caption.displayName = "Caption";
+
+export const Legend = ({ children, classes, component }: TypographyProps) => (
+  <Typography
+    children={children}
+    classes={classes}
+    component={component}
+    variant="legend"
+  />
+);
+
+Legend.displayName = "Legend";

packages/odyssey-react-mui/src/index.ts

@@ -41,8 +41,6 @@ export {
   /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
   ScopedCssBaseline,
   ThemeProvider,
-  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */
-  Typography,
 } from "@mui/material";
 
 export type {
@@ -59,7 +57,6 @@ export type {
   PaperProps,
   ScopedCssBaselineProps,
   ThemeOptions,
-  TypographyProps,
 } from "@mui/material";
 
 export * from "./Autocomplete";
@@ -102,4 +99,5 @@ export * from "./theme";
 export * from "./Toast";
 export * from "./ToastStack";
 export * from "./Tooltip";
+export * from "./Typography";
 export * from "./useUniqueId";

packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.mdx

@@ -0,0 +1,25 @@
+import {
+  Canvas,
+  Meta,
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from "@storybook/addon-docs";
+import { Story } from "@storybook/blocks";
+import * as TypographyStories from "./Typography.stories";
+
+<Meta of={TypographyStories} />
+
+<Title of={TypographyStories} />
+<Subtitle of={TypographyStories} />
+<Description of={TypographyStories} />
+<Primary of={TypographyStories} />
+
+Typography can be rendered with the `<Typography>` component itself, or via one of its
+semantic aliases (`<H1>`, `<H2>`, `<Body>`, `<Caption>`, etc.)
+
+<Controls />
+<Stories />