feat(odyssey-react-mui): add overline typography variant

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

@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2024-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 { Typography } from "./Typography";
+
+describe("Typography", () => {
+  test("renders overline", () => {
+    render(
+      <Typography ariaLabel="overline" variant="overline">
+        Overline test
+      </Typography>,
+    );
+
+    expect(screen.getByLabelText("overline")).toBeVisible();
+  });
+});

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

@@ -34,9 +34,10 @@ export type TypographyVariantValue =
   | "h5"
   | "h6"
   | "body"
+  | "legend"
+  | "overline"
   | "subordinate"
-  | "support"
-  | "legend";
+  | "support";
 
 export const typographyVariantMapping: Record<
   TypographyVariantValue,
@@ -49,9 +50,10 @@ export const typographyVariantMapping: Record<
   h5: "h5",
   h6: "h6",
   body: "body1",
+  legend: "legend",
+  overline: "overline",
   subordinate: "subtitle1",
   support: "subtitle2",
-  legend: "legend",
 } as const;
 
 export const typographyColorValues = [
@@ -102,9 +104,12 @@ const Typography = ({
 }: TypographyProps) => {
   const component = useMemo(() => {
     if (!componentProp) {
-      if (variant === "body") {
-        return "p";
-      } else if (variant === "subordinate" || variant === "support") {
+      if (
+        variant === "body" ||
+        variant === "subordinate" ||
+        variant === "support" ||
+        variant === "overline"
+      ) {
         return "p";
       } else {
         return variant;
@@ -406,6 +411,32 @@ const Legend = ({
 const MemoizedLegend = memo(Legend);
 MemoizedLegend.displayName = "Legend";
 
+const Overline = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
+  children,
+  color,
+  component,
+  testId,
+  translate,
+}: TypographyProps) => (
+  <Typography
+    ariaDescribedBy={ariaDescribedBy}
+    ariaLabel={ariaLabel}
+    ariaLabelledBy={ariaLabelledBy}
+    children={children}
+    color={color}
+    component={component}
+    testId={testId}
+    translate={translate}
+    variant="overline"
+  />
+);
+
+const MemoizedOverline = memo(Overline);
+MemoizedOverline.displayName = "Overline";
+
 export {
   MemoizedTypography as Typography,
   MemoizedHeading1 as Heading1,
@@ -415,6 +446,7 @@ export {
   MemoizedHeading5 as Heading5,
   MemoizedHeading6 as Heading6,
   MemoizedLegend as Legend,
+  MemoizedOverline as Overline,
   MemoizedParagraph as Paragraph,
   MemoizedSubordinate as Subordinate,
   MemoizedSupport as Support,

packages/odyssey-react-mui/src/theme/components.tsx

@@ -3111,6 +3111,7 @@ export const components = ({
           body1: "p",
           inherit: "p",
           legend: "legend",
+          overline: "p",
         },
       },
       styleOverrides: {
@@ -3121,6 +3122,18 @@ export const components = ({
             marginBlockEnd: 0,
           },
         },
+        overline: {
+          letterSpacing: 0.5,
+          textTransform: "none",
+
+          "html:lang(en) &": {
+            textTransform: "uppercase",
+          },
+
+          "html:lang(en-*) &": {
+            textTransform: "uppercase",
+          },
+        },
       },
     },
   };

packages/odyssey-storybook/src/components/odyssey-mui/Typography/Typography.stories.tsx

@@ -19,10 +19,11 @@ import {
   Heading4,
   Heading5,
   Heading6,
+  Legend,
+  Overline,
   Paragraph,
   Subordinate,
   Support,
-  Legend,
   TypographyProps,
   typographyColorValues,
   typographyVariantMapping,
@@ -40,9 +41,10 @@ const variantMapping = {
   h5: Heading5,
   h6: Heading6,
   body: Paragraph,
+  legend: Legend,
+  overline: Overline,
   subordinate: Subordinate,
   support: Support,
-  legend: Legend,
 };
 
 const storybookMeta: Meta<TypographyProps> = {
@@ -234,6 +236,30 @@ export const BodyStory: StoryObj<TypographyProps> = {
   },
 };
 
+export const LegendStory: StoryObj<TypographyProps> = {
+  name: "Legend",
+  args: {
+    children: "This is a legend",
+    variant: "legend",
+  },
+  render: (args) => <Legend {...args} children={args.children} />,
+  play: async ({}) => {
+    await axeRun("Typopgraphy legend");
+  },
+};
+
+export const OverlineStory: StoryObj<TypographyProps> = {
+  name: "Overline",
+  args: {
+    children: "This is an Overline",
+    variant: "overline",
+  },
+  render: (args) => <Overline {...args} children={args.children} />,
+  play: async ({}) => {
+    await axeRun("Typopgraphy Overline");
+  },
+};
+
 export const SubordinateStory: StoryObj<TypographyProps> = {
   name: "Subordinate",
   args: {
@@ -258,18 +284,6 @@ export const SupportStory: StoryObj<TypographyProps> = {
   },
 };
 
-export const LegendStory: StoryObj<TypographyProps> = {
-  name: "Legend",
-  args: {
-    children: "This is a legend",
-    variant: "legend",
-  },
-  render: (args) => <Legend {...args} children={args.children} />,
-  play: async ({}) => {
-    await axeRun("Typopgraphy legend");
-  },
-};
-
 export const ColorStory: StoryObj<TypographyProps> = {
   name: "Color",
   render: ({}) => {