chore: small storybook and docs updates to SensitiveText component (#…

…28089)

## **Description**

This PR updates the Storybook stories for the `SensitiveText` component
to align with extension component library standards. The changes
include:

- Updating Storybook stories to use the CSF 3.0 format for better
organization and future-proofing.
- Converting `README.md` to `README.mdx`, leveraging Storybook stories
for documentation and improving the accessibility and usability of the
component documentation.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28089?quickstart=1)

## **Related issues**

Related: #28021

## **Manual testing steps**

1. Run Storybook locally and navigate to the `SensitiveText` component.
2. Verify that the stories render correctly in the CSF 3.0 format.
3. Check that the new `README.mdx` renders properly in the Storybook
Docs tab.

## **Screenshots/Recordings**

### **Before**



https://github.com/user-attachments/assets/e1804283-72d2-45e6-829b-e2ce38776e1e



### **After**



https://github.com/user-attachments/assets/5d776529-6fe3-4646-90f2-57f2ceceefd6



## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I’ve manually tested the PR (e.g., pulled and built the branch,
ran the app, tested the code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria and
includes the necessary testing evidence, such as recordings or
screenshots.

ui/components/component-library/sensitive-text/README.mdx

@@ -0,0 +1,81 @@
+import { Controls, Canvas } from '@storybook/blocks';
+
+import * as SensitiveTextStories from './sensitive-text.stories';
+
+# SensitiveText
+
+SensitiveText is a component that extends the Text component to handle sensitive information. It provides the ability to hide or show the text content, replacing it with dots when hidden.
+
+<Canvas of={SensitiveTextStories.DefaultStory} />
+
+## Props
+
+The `SensitiveText` component extends the `Text` component. See the `Text` component for an extended list of props.
+
+<Controls of={SensitiveTextStories.DefaultStory} />
+
+### Children
+
+The text content to be displayed or hidden.
+
+<Canvas of={SensitiveTextStories.Children} />
+
+```jsx
+import { SensitiveText } from '../../component-library';
+
+<SensitiveText>
+  Sensitive Information
+</SensitiveText>
+```
+
+
+### IsHidden
+
+Use the `isHidden` prop to determine whether the text should be hidden or visible. When `isHidden` is `true`, the component will display dots instead of the actual text.
+
+<Canvas of={SensitiveTextStories.IsHidden} />
+
+```jsx
+import { SensitiveText } from '../../component-library';
+
+<SensitiveText isHidden>
+  Sensitive Information
+</SensitiveText>
+```
+
+### Length
+
+Use the `length` prop to determine the length of the hidden text (number of dots). Can be a predefined `SensitiveTextLength` or a custom string number.
+
+The following predefined length options are available:
+
+- `SensitiveTextLength.Short`: `6`
+- `SensitiveTextLength.Medium`: `9`
+- `SensitiveTextLength.Long`: `12`
+- `SensitiveTextLength.ExtraLong`: `20`
+
+- The number of dots displayed is determined by the `length` prop.
+- If an invalid `length` is provided, the component will fall back to `SensitiveTextLength.Short` and log a warning.
+- Custom length values can be provided as strings, e.g. `15`.
+
+<Canvas of={SensitiveTextStories.Length} />
+
+```jsx
+import { SensitiveText, SensitiveTextLength } from '../../component-library';
+
+<SensitiveText length={SensitiveTextLength.Short}>
+  Length "short" (6 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.Medium}>
+  Length "medium" (9 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.Long}>
+  Length "long" (12 characters)
+</SensitiveText>
+<SensitiveText length={SensitiveTextLength.ExtraLong}>
+  Length "extra long" (20 characters)
+</SensitiveText>
+<SensitiveText length="15">
+  Length "15" (15 characters)
+</SensitiveText>
+```

ui/components/component-library/sensitive-text/sensitive-text.stories.tsx

@@ -1,39 +1,58 @@
-import { StoryFn, Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { SensitiveText } from '.';
 import { SensitiveTextLength } from './sensitive-text.types';
+import README from './README.mdx';
 import { Box } from '../box';
 import {
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
 
-export default {
+const meta: Meta<typeof SensitiveText> = {
   title: 'Components/ComponentLibrary/SensitiveText',
   component: SensitiveText,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
   args: {
     children: 'Sensitive information',
     isHidden: false,
     length: SensitiveTextLength.Short,
   },
 } as Meta<typeof SensitiveText>;
 
-const Template: StoryFn<typeof SensitiveText> = (args) => {
-  return <SensitiveText {...args} />;
-};
+export default meta;
+type Story = StoryObj<typeof SensitiveText>;
 
-export const DefaultStory = Template.bind({});
+export const DefaultStory: Story = {};
 DefaultStory.storyName = 'Default';
 
-export const HiddenText: StoryFn<typeof SensitiveText> = (args) => {
-  return <SensitiveText {...args} />;
+export const Children: Story = {
+  args: {
+    children: 'Sensitive information',
+  },
+  render: (args) => (
+    <SensitiveText {...args} />
+  ),
 };
-HiddenText.args = {
-  isHidden: true,
+
+export const IsHidden: Story = {
+  args: {
+    isHidden: true,
+  },
+  render: (args) => (
+    <SensitiveText {...args} />
+  ),
 };
 
-export const LengthVariants: StoryFn<typeof SensitiveText> = (args) => {
-  return (
+export const Length: Story = {
+  args: {
+    isHidden: true,
+  },
+  render: (args) => (
     <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
       <SensitiveText {...args} length={SensitiveTextLength.Short}>
         Length "short" (6 characters)
@@ -47,9 +66,9 @@ export const LengthVariants: StoryFn<typeof SensitiveText> = (args) => {
       <SensitiveText {...args} length={SensitiveTextLength.ExtraLong}>
         Length "extra long" (20 characters)
       </SensitiveText>
+      <SensitiveText {...args} length="15">
+        Length "15" (15 characters)
+      </SensitiveText>
     </Box>
-  );
-};
-LengthVariants.args = {
-  isHidden: true,
+  ),
 };