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

packages/odyssey-design-tokens/src/typography.json

@@ -187,6 +187,11 @@
       "max": {
         "value": "55ch"
       }
+    },
+    "letterSpacing": {
+      "overline": {
+        "value": ".05em"
+      }
     }
   }
 }

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,17 @@ export const components = ({
             marginBlockEnd: 0,
           },
         },
+        overline: {
+          fontSize: odysseyTokens.TypographySizeOverline,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightOverline,
+          letterSpacing: odysseyTokens.TypographyLetterSpacingOverline,
+          textTransform: "none",
+
+          ":is(:lang(en-*), :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> = {
@@ -158,7 +160,7 @@ export const Heading1Story: StoryObj<TypographyProps> = {
   // h1 & h2 stories throw the "Incomplete" accessibility violation on color-contrast. Even though the contrast is correct,
   // disabling it for now as the typography color- contrast test is covered by other headings below.
   // play: async ({}) => {
-  //   await axeRun('Typopgraphy h1');
+  //   await axeRun('Typography h1');
   // },
 };
 
@@ -170,7 +172,7 @@ export const Heading2Story: StoryObj<TypographyProps> = {
   },
   render: (args) => <Heading2 {...args} children={args.children} />,
   // play: async ({}) => {
-  //   await axeRun('Typopgraphy h2');
+  //   await axeRun('Typography h2');
   // },
 };
 
@@ -182,7 +184,7 @@ export const Heading3Story: StoryObj<TypographyProps> = {
   },
   render: (args) => <Heading3 {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy h3");
+    await axeRun("Typography h3");
   },
 };
 
@@ -194,7 +196,7 @@ export const Heading4Story: StoryObj<TypographyProps> = {
   },
   render: (args) => <Heading4 {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy h4");
+    await axeRun("Typography h4");
   },
 };
 
@@ -206,7 +208,7 @@ export const Heading5Story: StoryObj<TypographyProps> = {
   },
   render: (args) => <Heading5 {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy h5");
+    await axeRun("Typography h5");
   },
 };
 
@@ -218,7 +220,7 @@ export const Heading6Story: StoryObj<TypographyProps> = {
   },
   render: (args) => <Heading6 {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy h6");
+    await axeRun("Typography h6");
   },
 };
 
@@ -230,7 +232,31 @@ export const BodyStory: StoryObj<TypographyProps> = {
   },
   render: (args) => <Paragraph {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy body");
+    await axeRun("Typography body");
+  },
+};
+
+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("Typography 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("Typography Overline");
   },
 };
 
@@ -242,7 +268,7 @@ export const SubordinateStory: StoryObj<TypographyProps> = {
   },
   render: (args) => <Subordinate {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy subordinate");
+    await axeRun("Typography subordinate");
   },
 };
 
@@ -254,19 +280,7 @@ export const SupportStory: StoryObj<TypographyProps> = {
   },
   render: (args) => <Support {...args} children={args.children} />,
   play: async ({}) => {
-    await axeRun("Typopgraphy support");
-  },
-};
-
-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");
+    await axeRun("Typography support");
   },
 };