feat(dsr): add Content React parity (DSYS-1043)

[cursor]

Description

Adds React (@metamask/design-system-react) Content parity for epic DSYS-302 / DSYS-1043, matching the existing React Native + shared ContentVariant consumer API.

Implementation follows the flatter parity strategy: direct Box + leaf Text / SensitiveText (no React BoxRow / BoxColumn / TextOrChildren). Shared types already existed; this PR only adds the React platform layer, stories, tests, and docs.

Audit comparison (Phase 1)

Concern	Extension / web API	Mobile / RN (MMDS) API	Decision
Component name	No Content in component-library. Nearest analogues: legacy ui/components/ui/list-item (title, subtitle, icon, rightContent) and product rows like TokenListItem (title, primary, secondary, privacyMode)	Content with variant, avatar, title / description / value / subvalue + inline accessories	Keep MMDS Content name in DSR; Extension list-item variants are differently named consumers
Prop names	subtitle, rightContent, icon, midContent	description, value / subvalue, avatar, *StartAccessory / *EndAccessory	Unified to RN/shared API (new React surface; no Extension Content consumers)
Types / variants / sizes	CSS modifiers (list-item--single-content-row); no shared variant enum	ContentVariant (one-line / two-lines / multi-line)	Reuse shared ContentVariant
Privacy masking	Ad-hoc SensitiveText / privacyMode in product rows	descriptionProps / valueProps / subvalueProps support isHidden / length via SensitiveText	Match RN: string slots for description/value/subvalue use SensitiveText; title uses Text
Event handlers	onClick on interactive list shells	N/A on Content (layout-only); ListItem owns press	Platform keep both when interactive shells land
Styling	className	twClassName	Platform layer only (className on React)

Answers

• Shared vs platform: Shared: variant, slots, accessories. Platform: className / style, React Box/Text/SensitiveText prop bags. DOM title omitted from BoxProps so Content title?: ReactNode wins.
• Naming conflicts: Extension subtitle → MMDS description; no disabled/isDisabled on Content.
• Strategy: Unified for the new React API (align to RN/shared). Extension product rows remain conservative / Phase 2 migration maps when ListItem lands.
• Mapping: React parity belongs under Content. Extension counterparts are differently named list-item variants, not a drop-in rename.

Known gaps

• Jira claim/transition for DSYS-1043 was blocked in this run (Atlassian MCP OAuth required).
• React ListItem (DSYS-713) still outstanding; Content docs note ListItem as the padded shell once available on React.
• No React BoxRow/BoxColumn/TextOrChildren were introduced (intentional).

Related issues

Fixes: DSYS-1043 (parent epic DSYS-302)

Manual testing steps

1. yarn storybook (port 6006)
2. Open React Components → Content
3. Exercise Default, Variant, Subvalue, Avatar, and Value Props (isHidden)
4. Confirm light/dark themes and accessory stories render without errors

Screenshots/Recordings

Before

N/A — React Content did not exist.

After

Storybook Default (shell):

Content Default story in Storybook

Default iframe (light + dark):

Content Default light and dark

Variant story (OneLine / TwoLines / MultiLine):

Content Variant stories

Subvalue story:

Content Subvalue story

Avatar story:

Content Avatar story

Value Props (isHidden):

Content ValueProps hidden masking

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

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.

_{To show artifacts inline, enable in settings.}

  

[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

[georgewrmarshall]

@cursoragent we should never update the changelog outside of the release process

[cursor]

I’ve removed the CHANGELOG edits per policy.

• Deleted the “Added → Content” entry under ## [Unreleased] in packages/design-system-react/CHANGELOG.md.
• Committed and pushed to cursor/react-parity-from-mobile-c4d1 with message: “chore(dsr): remove CHANGELOG edits; changelog is maintained during release”.

No other files were changed.

  

[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