support text transform in Text and remove old name ref

easy-ui-react/src/SearchNav/SearchNav.mdx

@@ -25,7 +25,7 @@ less than `640px`.
 
 <Canvas of={SearchNavStories.Simple} />
 
-## Emphasized Text
+## Title
 
 <Canvas of={SearchNavStories.Title} />
 

easy-ui-react/src/SearchNav/Title.tsx

@@ -1,12 +1,9 @@
 import React, { ReactNode } from "react";
 import { Text } from "../Text";
-import { classNames } from "../utilities/css";
-
-import styles from "./Title.module.scss";
 
 export type TitleProps = {
   /**
-   * Emphasized text content to display.
+   * Text content to display.
    */
   children: ReactNode;
 };
@@ -15,9 +12,9 @@ export function Title(props: TitleProps) {
   const { children } = props;
 
   return (
-    <span className={classNames(styles.title)}>
-      <Text variant="subtitle1">{children}</Text>
-    </span>
+    <Text variant="subtitle1" transform="uppercase">
+      {children}
+    </Text>
   );
 }
 

easy-ui-react/src/Text/Text.module.scss

@@ -66,3 +66,19 @@
 .numeric {
   font-variant-numeric: tabular-nums lining-nums;
 }
+
+.transformNone {
+  text-transform: none;
+}
+
+.transformCapitalize {
+  text-transform: capitalize;
+}
+
+.transformUppercase {
+  text-transform: uppercase;
+}
+
+.transformLowercase {
+  text-transform: lowercase;
+}

easy-ui-react/src/Text/Text.test.tsx

@@ -87,4 +87,12 @@ describe("<Text />", () => {
       expect.stringContaining("visuallyHidden"),
     );
   });
+
+  it("should transform text", () => {
+    render(<Text transform="uppercase">Here is some text</Text>);
+    expect(screen.getByText("Here is some text")).toHaveAttribute(
+      "class",
+      expect.stringContaining("transformUppercase"),
+    );
+  });
 });

easy-ui-react/src/Text/Text.tsx

@@ -1,6 +1,10 @@
 import React, { ReactNode } from "react";
 import { ThemeTokenNamespace, DesignTokenNamespace } from "../types";
-import { classNames, getComponentThemeToken } from "../utilities/css";
+import {
+  classNames,
+  getComponentThemeToken,
+  variationName,
+} from "../utilities/css";
 
 import styles from "./Text.module.scss";
 
@@ -18,6 +22,7 @@ export type TextAs =
 export type TextColor = ThemeTokenNamespace<"color.text">;
 export type TextVariant = DesignTokenNamespace<"font.style", "family">;
 export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
 
 export type TextProps = {
   /** Adjusts horizontal alignment of text */
@@ -32,6 +37,8 @@ export type TextProps = {
   color?: TextColor;
   /** HTML id attribute */
   id?: string;
+  /** Transform text */
+  transform?: TextTransform;
   /** Truncate text overflow with ellipsis */
   truncate?: boolean;
   /** Adjusts the style of text that's rendered */
@@ -90,6 +97,7 @@ export function Text({
   children,
   color,
   id,
+  transform = "none",
   truncate = false,
   variant,
   visuallyHidden = false,
@@ -104,6 +112,7 @@ export function Text({
     breakWord && styles.break,
     truncate && styles.truncate,
     visuallyHidden && styles.visuallyHidden,
+    transform && styles[variationName("transform", transform)],
   );
 
   const style = {