feat(3417): sensitive text component

[vinnyhoward]

Description

Overview

This PR introduces a new SensitiveText component to our component library. The SensitiveText component extends our existing Text component to handle sensitive information, providing the ability to hide or show text content as needed.

Features

• Extends the existing Text component functionality
• Allows toggling between visible and hidden states for sensitive information
• Supports different lengths of hidden text (Short, Medium, Long)
• Maintains all styling capabilities of the Text component (variants, colors, etc)

Related issues

Feature: #3417

Manual testing steps

1. Follow instructions on getting started with storybook
2. Play with new component there

Screenshots/Recordings

Before

NA

After

NA

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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 5e5b369
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/e011fd0d-1543-45b7-a20f-3415008c8408

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[georgewrmarshall]

Hey @vinnyhoward! This is looking fantastic 💯 also great docs and tests. I left some comments but otherwise really nice work 👍

@Akatori-Design is this something we can add to the Figma library?

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: fdead54
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ac577fb8-69e6-43b2-96d0-6cabe593675a

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: dde7225
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/068fcaa8-4dde-478e-ac50-1869cea37bad

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: ebd5bcd
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/32636908-af73-449c-aeba-aa10892bc897

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 56.00000% with 11 lines in your changes missing coverage. Please review.

Project coverage is 55.13%. Comparing base (5e5190f) to head (ebd5bcd).
Report is 29 commits behind head on main.

Files with missing lines	Patch %	Lines
...ents/Texts/SensitiveText/SensitiveText.stories.tsx	0.00%	7 Missing ⚠️
...y/components/Texts/SensitiveText/SensitiveText.tsx	76.47%	3 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11965      +/-   ##
==========================================
+ Coverage   54.65%   55.13%   +0.47%     
==========================================
  Files        1744     1755      +11     
  Lines       39333    39588     +255     
  Branches     4878     4929      +51     
==========================================
+ Hits        21497    21825     +328     
+ Misses      16340    16259      -81     
- Partials     1496     1504       +8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: d462829
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/8ba0a68c-9989-473c-9d7e-9a13e8672796

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[georgewrmarshall]

LGTM! 🚀

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: bc4de57
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/81ff9882-f1d0-4fe3-b056-e038f0bacd8a

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
77.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 504de25
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/891cd3f4-cdb1-4bd4-a014-01b0df2f4e5b

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request