chore: Added size prop to TitleLeft component (#24913)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Added a `size` prop to the `TitleLeft` component to support different
title sizes. This allows consumers to choose between medium (`Md`) and
small (`Sm`) variants:

- `TitleLeftSize.Md` (default): Uses `TextVariant.DisplayMd` for the
title
- `TitleLeftSize.Sm`: Uses `TextVariant.HeadingLg` for the title

This provides more flexibility when using `TitleLeft` in different
contexts where a smaller title is needed.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: TitleLeft size prop

  Scenario: TitleLeft renders with default medium size
    Given the TitleLeft component is rendered without a size prop
    When user views the component
    Then the title should display using DisplayMd text variant

  Scenario: TitleLeft renders with small size
    Given the TitleLeft component is rendered with size={TitleLeftSize.Sm}
    When user views the component
    Then the title should display using HeadingLg text variant
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

https://github.com/user-attachments/assets/8b4c0271-76ef-433f-8869-992d6e19e305

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces configurable sizing to `TitleLeft` for flexible typography.
> 
> - Adds `size` prop and `TitleLeftSize` enum (default `Md`) mapping
title to `DisplayMd` (Md) or `HeadingLg` (Sm) in `TitleLeft.tsx`
> - Updates Storybook: `size` control and examples in
`TitleLeft.stories.tsx`
> - Adds tests validating text variants per size, including mock for
`Text` in `TitleLeft.test.tsx`
> - Exports `TitleLeftSize` via `index.ts`; updates types and JSDoc in
`TitleLeft.types.ts`
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
26994a7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: brianacnguyen

app/component-library/components-temp/TitleLeft/TitleLeft.stories.tsx

@@ -13,11 +13,16 @@ import {
 } from '@metamask/design-system-react-native';
 
 import TitleLeft from './TitleLeft';
+import { TitleLeftSize } from './TitleLeft.types';
 
 const TitleLeftMeta = {
   title: 'Components Temp / TitleLeft',
   component: TitleLeft,
   argTypes: {
+    size: {
+      control: 'select',
+      options: Object.values(TitleLeftSize),
+    },
     title: {
       control: 'text',
     },
@@ -43,13 +48,23 @@ export const Default = {
   args: {
     topLabel: 'Send',
     title: '$4.42',
+    size: TitleLeftSize.Md,
   },
 };
 
 export const TitleOnly = {
   render: () => <TitleLeft title="$1,234.56" />,
 };
 
+export const Size = {
+  render: () => (
+    <>
+      <TitleLeft size={TitleLeftSize.Sm} topLabel="Balance" title="$1,234.56" />
+      <TitleLeft size={TitleLeftSize.Md} topLabel="Balance" title="$1,234.56" />
+    </>
+  ),
+};
+
 export const WithTopLabel = {
   render: () => <TitleLeft topLabel="Total Balance" title="$5,432.10" />,
 };

app/component-library/components-temp/TitleLeft/TitleLeft.test.tsx

@@ -2,9 +2,23 @@
 import React from 'react';
 import { render } from '@testing-library/react-native';
 import { Text, View } from 'react-native';
+import { TextVariant } from '@metamask/design-system-react-native';
 
 // Internal dependencies.
 import TitleLeft from './TitleLeft';
+import { TitleLeftSize } from './TitleLeft.types';
+
+const mockText = jest.fn();
+jest.mock('@metamask/design-system-react-native', () => {
+  const actual = jest.requireActual('@metamask/design-system-react-native');
+  return {
+    ...actual,
+    Text: (props: Record<string, unknown>) => {
+      mockText(props);
+      return <actual.Text {...props} />;
+    },
+  };
+});
 
 const TEST_IDS = {
   CONTAINER: 'title-left-container',
@@ -16,6 +30,7 @@ const TEST_IDS = {
 describe('TitleLeft', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockText.mockClear();
   });
 
   describe('rendering', () => {
@@ -42,6 +57,35 @@ describe('TitleLeft', () => {
     });
   });
 
+  describe('size', () => {
+    it('uses DisplayMd variant by default', () => {
+      render(<TitleLeft title="$4.42" />);
+
+      const titleCall = mockText.mock.calls.find(
+        (call) => call[0].children === '$4.42',
+      );
+      expect(titleCall?.[0].variant).toBe(TextVariant.DisplayMd);
+    });
+
+    it('uses DisplayMd variant for medium size', () => {
+      render(<TitleLeft size={TitleLeftSize.Md} title="$4.42" />);
+
+      const titleCall = mockText.mock.calls.find(
+        (call) => call[0].children === '$4.42',
+      );
+      expect(titleCall?.[0].variant).toBe(TextVariant.DisplayMd);
+    });
+
+    it('uses HeadingLg variant for small size', () => {
+      render(<TitleLeft size={TitleLeftSize.Sm} title="$4.42" />);
+
+      const titleCall = mockText.mock.calls.find(
+        (call) => call[0].children === '$4.42',
+      );
+      expect(titleCall?.[0].variant).toBe(TextVariant.HeadingLg);
+    });
+  });
+
   describe('topLabel and topAccessory', () => {
     it('renders topLabel', () => {
       const { getByText } = render(<TitleLeft title="$4.42" topLabel="Send" />);

app/component-library/components-temp/TitleLeft/TitleLeft.tsx

@@ -13,7 +13,7 @@ import {
 } from '@metamask/design-system-react-native';
 
 // Internal dependencies.
-import { TitleLeftProps } from './TitleLeft.types';
+import { TitleLeftProps, TitleLeftSize } from './TitleLeft.types';
 
 /**
  * TitleLeft is a component that displays a title with optional accessories
@@ -29,6 +29,7 @@ import { TitleLeftProps } from './TitleLeft.types';
  * ```
  */
 const TitleLeft: React.FC<TitleLeftProps> = ({
+  size = TitleLeftSize.Md,
   title,
   titleAccessory,
   topAccessory,
@@ -42,6 +43,8 @@ const TitleLeft: React.FC<TitleLeftProps> = ({
   testID,
   twClassName,
 }) => {
+  const titleVariant =
+    size === TitleLeftSize.Sm ? TextVariant.HeadingLg : TextVariant.DisplayMd;
   // Render top content (topLabel takes priority over topAccessory)
   const renderTopContent = () => {
     if (topLabel) {
@@ -101,7 +104,7 @@ const TitleLeft: React.FC<TitleLeftProps> = ({
             alignItems={BoxAlignItems.Center}
           >
             {title && (
-              <Text variant={TextVariant.DisplayMd} {...titleProps}>
+              <Text variant={titleVariant} {...titleProps}>
                 {title}
               </Text>
             )}

app/component-library/components-temp/TitleLeft/TitleLeft.types.ts

@@ -4,10 +4,23 @@ import { ReactNode } from 'react';
 // External dependencies.
 import { TextProps } from '@metamask/design-system-react-native';
 
+/**
+ * TitleLeft size variants.
+ */
+export enum TitleLeftSize {
+  Md = 'Md',
+  Sm = 'Sm',
+}
+
 /**
  * TitleLeft component props.
  */
 export interface TitleLeftProps {
+  /**
+   * Size of the title. Md uses DisplayMd, Sm uses HeadingLg.
+   * @default TitleLeftSize.Md
+   */
+  size?: TitleLeftSize;
   /**
    * Main title text, rendered with TextVariant.DisplayMD.
    */

app/component-library/components-temp/TitleLeft/index.ts

@@ -1,2 +1,3 @@
 export { default } from './TitleLeft';
+export { TitleLeftSize } from './TitleLeft.types';
 export type { TitleLeftProps } from './TitleLeft.types';