feat(typography): allow classname pass through on text components

packages/components/src/Heading/Heading.tsx

@@ -14,6 +14,7 @@ type Props = {
    */
   as?: HeadingElement;
   children: TypographyProps<HeadingElement>["children"];
+  className: TypographyProps<HeadingElement>["className"];
   color?: TypographyProps<HeadingElement>["color"];
   size: TypographyProps<HeadingElement>["size"];
   weight?: TypographyProps<HeadingElement>["weight"];

packages/components/src/Text/Text.spec.tsx

@@ -1,6 +1,26 @@
 import * as TextStoryFile from "./Text.stories";
+
+import { render, screen } from "@testing-library/react";
+
+import React from "react";
+import Text from "./Text";
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
 
 describe("<Text />", () => {
   generateSnapshots(TextStoryFile);
+
+  it("should add the passthrough className", () => {
+    render(
+      <Text size="body" className="passthrough">
+        Some Text
+      </Text>,
+    );
+    expect(screen.getByText("Some Text")).toMatchInlineSnapshot(`
+      <p
+        class="passthrough typography sizeBody colorBase"
+      >
+        Some Text
+      </p>
+    `);
+  });
 });

packages/components/src/Text/Text.tsx

@@ -10,6 +10,7 @@ type Props = {
    */
   as?: TextElement;
   children: TypographyProps<TextElement>["children"];
+  className: TypographyProps<TextElement>["className"];
   color?: TypographyProps<TextElement>["color"];
   size: TypographyProps<TextElement>["size"];
   weight?: TypographyProps<TextElement>["weight"];

packages/components/src/common/typography.tsx

@@ -40,6 +40,10 @@ export type TypographyProps<IComponent extends React.ElementType> = {
    * The text content to present.
    */
   children: ReactNode;
+  /**
+   * CSS class for custom styles.
+   */
+  className?: string;
   /**
    * The color of the text element. If no color provided, defaults to a base color.
    */
@@ -70,12 +74,14 @@ function Typography<IComponent extends React.ElementType>({
   size,
   weight = null,
   spacing,
+  className,
   ...rest
 }: TypographyProps<IComponent>) {
   const Component = as;
   return (
     <Component
       className={clsx(
+        className,
         styles.typography,
         // Sizes
         size === "h1" && styles.sizeH1,