Description

This PR adds a new HeaderRoot component in app/component-library/components-temp/.

Reason for change: HeaderRoot provides a header layout with base styles similar to HeaderBase, a left section that renders either custom children or a title row (TitleStandard-style), and an end section with the same end content behavior as HeaderBase (endAccessory or endButtonIconProps).

What changed:

1. New component: HeaderRoot

   • Location: app/component-library/components-temp/HeaderRoot/
   • Files:
     • HeaderRoot.tsx – main component (View root with base styles; left section flex-1 items-start with either children or title row; end section with endAccessory or reversed endButtonIconProps)
     • HeaderRoot.types.ts – HeaderRootProps (children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset, style, testID, twClassName; extends ViewProps)
     • HeaderRoot.stories.tsx – Storybook entry "Components Temp / HeaderRoot" (Default, WithTitleAccessory, WithChildren, WithEndAccessory, WithEndButtonIconProps, MultipleEndButtons, IncludesTopInset)
     • HeaderRoot.test.tsx – unit test suite with full coverage (rendering, left section children vs title row, end section, includesTopInset, style/twClassName, titleProps)
     • index.ts – exports default and HeaderRootProps
   • Behavior: Left section renders either children or a title row (title + titleAccessory, like TitleStandard). End section matches HeaderBase (endAccessory or multiple ButtonIcons from endButtonIconProps in reverse order). No test ID constants; optional testID prop is passed through to the root.

2. Storybook

   • Updated .storybook/storybook.requires.js to require HeaderRoot.stories.tsx.

No existing app code is updated; this is an additive change in the component-library.

Changelog

This PR is not end-user-facing; it adds an internal header component for use by other screens.

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-498

Manual testing steps

Feature: HeaderRoot component

  Scenario: Lint and type check pass
    Given the branch is checked out
    When the author runs yarn lint and yarn lint:tsc
    Then both complete without errors

  Scenario: HeaderRoot unit tests pass
    Given the branch is checked out
    When the author runs yarn jest app/component-library/components-temp/HeaderRoot/HeaderRoot.test.tsx
    Then all tests pass

  Scenario: HeaderRoot story renders
    Given Storybook is running
    When the user opens "Components Temp / HeaderRoot"
    Then Default and other stories render (title, children, end accessories, multiple end buttons, top inset)

Screenshots/Recordings

Before

N/A – new component; no before state.

After

Root pages after replacements

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.