chore: Add Code Connect for Section Components

[amandaye0h]

Description

Adds Figma Code Connect mappings for React Native section layout components.

SectionHeader.figma.tsx

New SectionHeader.figma.tsx for React Native

Matched props

• title → title
• startAccessory → startAccessory (nested Icon via figma.children())
• titleAccessory → titleAccessory (nested Icon via figma.children())
• endAccessory → endAccessory (nested Icon via figma.children())
• subtitle → children (nested subtitle content via figma.children('children') when the Figma subtitle boolean is enabled)

Intentionally omits Figma-only properties: variant (Figma only)

SectionDivider.figma.tsx

New SectionDivider.figma.tsx for React Native

Matched props

• None — example uses <SectionDivider /> with component defaults (marginVertical={5}, borderWidth={1}, borderColor={BorderMuted})

Intentionally omits Figma-only properties: withMargin (Figma only)

Related issues

• Epic: DSYS-741 — Figma/Code Alignment
• DSYS-828 — SectionHeader
• DSYS-827 — SectionDivider

Manual testing steps

1. Open MMDS SectionHeader and MMDS SectionDivider in Figma Dev Mode
2. Select React Native in the platform dropdown
3. Verify code snippets reflect mapped props (including children when subtitle is enabled) and omit Figma-only properties

Screenshots/Recordings

Before

N/A

After

section-header.mov

section-divider.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs
• 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.

[github-actions]

📖 Storybook Preview

• View PR Storybook

[amandaye0h]

I've intentionally omitted isInteractive in Figma and here because it's harder to capture dynamically in Figma.

[amandaye0h]

Reverting to draft to accommodate #1267

[georgewrmarshall]

LGTM! Both files are correct and the layer name matching for figma.children() is verified against the Figma component structure. Two follow-up items noted below.

One for the Figma component itself: the tag variant has a flex/alignment issue where the title text renders center-aligned rather than left-aligned — visible in the component playground. Worth a design fix in the Figma file separately from this PR.

[georgewrmarshall]

suggestion: The Figma docs now distinguish figma.slot() from figma.children(). figma.slot() is designed for freeform content areas (any child type — icon, tag, avatar, etc.) while figma.children() targets named component instances specifically. Since startAccessory, titleAccessory, and endAccessory are freeform slots, migrating to figma.slot() would be more accurate and should improve how nested components like AvatarFavicon resolve in Dev Mode.

Example:

props: {
  title: figma.string('title'),
  startAccessory: figma.slot('startAccessory'),
  titleAccessory: figma.slot('titleAccessory'),
  endAccessory: figma.slot('endAccessory'),
},

[github-actions]

📖 Storybook Preview

• View PR Storybook

[github-actions]

📖 Storybook Links

Compare the preview for this pull request with the latest Storybooks from the main branch.

🔀 Pull Request Preview

• 🖥️ React
• 📱 React Native

🌳 Main Branch (Latest)

• 🖥️ React
• 📱 React Native