fix: added fixes according to feedback from pr review

app/component-library/components/Texts/SensitiveText/README.md

@@ -12,15 +12,15 @@ Boolean to determine whether the text should be hidden or visible.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
-| boolean                                             | Yes                                                     | -                                                      |
+| boolean                                             | Yes                                                     | false                                                  |
 
 ### `length`
 
-Enum to determine the length of the hidden text (number of asterisks).
+Determines the length of the hidden text (number of asterisks). Can be a predefined SensitiveTextLength or a custom string number.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
-| [SensitiveLengths](./SensitiveText.types.ts#L3)     | No                                                      | SensitiveLengths.Short                                 |
+| [SensitiveTextLengthType](./SensitiveText.types.ts#L14) \| [CustomLength](./SensitiveText.types.ts#L19) | No   | SensitiveTextLength.Short                              |
 
 ### `children`
 
@@ -33,18 +33,25 @@ The text content to be displayed or hidden.
 ## Usage
 
 ```javascript
-// Replace import with relative path.
 import SensitiveText from 'app/component-library/components/Texts/SensitiveText';
 import { TextVariant } from 'app/component-library/components/Texts/Text';
-import { SensitiveLengths } from 'app/component-library/components/Texts/SensitiveText/SensitiveText.types';
+import { SensitiveTextLength } from 'app/component-library/components/Texts/SensitiveText/SensitiveText.types';
 
 <SensitiveText
   isHidden={true}
-  length={SensitiveLengths.Medium}
+  length={SensitiveTextLength.Medium}
   variant={TextVariant.BodyMD}
 >
   Sensitive Information
 </SensitiveText>
+
+<SensitiveText
+  isHidden={true}
+  length="15"
+  variant={TextVariant.BodyMD}
+>
+  Custom Length Hidden Text
+</SensitiveText>
 ```
 
 This will render a Text component with asterisks instead of the actual text when `isHidden` is true, and the original text when `isHidden` is false. The number of asterisks is determined by the `length` prop.

app/component-library/components/Texts/SensitiveText/SensitiveText.test.tsx

@@ -7,13 +7,13 @@ import { mockTheme } from '../../../../util/theme';
 
 // Internal dependencies
 import SensitiveText from './SensitiveText';
-import { SensitiveLengths } from './SensitiveText.types';
+import { SensitiveTextLength } from './SensitiveText.types';
 import { TextVariant, TextColor } from '../Text/Text.types';
 
 describe('SensitiveText', () => {
   const testProps = {
     isHidden: false,
-    length: SensitiveLengths.Short,
+    length: SensitiveTextLength.Short,
     variant: TextVariant.BodyMD,
     color: TextColor.Default,
     children: 'Sensitive Information',
@@ -39,21 +39,29 @@ describe('SensitiveText', () => {
 
   it('should render the correct number of asterisks for different lengths', () => {
     const { getByText: getShort } = render(
-      <SensitiveText {...testProps} isHidden length={SensitiveLengths.Short} />,
+      <SensitiveText
+        {...testProps}
+        isHidden
+        length={SensitiveTextLength.Short}
+      />,
     );
     expect(getShort('*******')).toBeTruthy();
 
     const { getByText: getMedium } = render(
       <SensitiveText
         {...testProps}
         isHidden
-        length={SensitiveLengths.Medium}
+        length={SensitiveTextLength.Medium}
       />,
     );
     expect(getMedium('*********')).toBeTruthy();
 
     const { getByText: getLong } = render(
-      <SensitiveText {...testProps} isHidden length={SensitiveLengths.Long} />,
+      <SensitiveText
+        {...testProps}
+        isHidden
+        length={SensitiveTextLength.Long}
+      />,
     );
     expect(getLong('*************')).toBeTruthy();
   });
@@ -65,4 +73,34 @@ describe('SensitiveText', () => {
     const textElement = getByText('Sensitive Information');
     expect(textElement.props.style.color).toBe(mockTheme.colors.text.default);
   });
+
+  it('should handle custom length', () => {
+    const { getByText } = render(
+      <SensitiveText {...testProps} isHidden length="10" />,
+    );
+    expect(getByText('**********')).toBeTruthy();
+  });
+
+  it('should fall back to Short length for invalid custom length', () => {
+    const { getByText } = render(
+      <SensitiveText {...testProps} isHidden length="invalid" />,
+    );
+    expect(getByText('*******')).toBeTruthy();
+  });
+
+  it('should fall back to Short length for non-numeric custom length', () => {
+    const { getByText } = render(
+      <SensitiveText {...testProps} isHidden length="abc" />,
+    );
+    expect(getByText('*******')).toBeTruthy();
+  });
+
+  it('should log a warning for invalid custom length', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    render(<SensitiveText {...testProps} isHidden length="abc" />);
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Invalid length provided: abc. Falling back to Short.',
+    );
+    consoleSpy.mockRestore();
+  });
 });

app/component-library/components/Texts/SensitiveText/SensitiveText.tsx

@@ -1,17 +1,38 @@
 // external dependencies
-import React from 'react';
+import React, { useMemo } from 'react';
 import Text from '../Text/Text';
 
 // internal dependencies
-import { SensitiveTextProps, SensitiveLengths } from './SensitiveText.types';
+import { SensitiveTextProps, SensitiveTextLength } from './SensitiveText.types';
 
 const SensitiveText: React.FC<SensitiveTextProps> = ({
-  isHidden,
-  children,
-  length = SensitiveLengths.Short,
+  isHidden = false,
+  children = '',
+  length = SensitiveTextLength.Short,
   ...props
 }) => {
-  const fallback = '*'.repeat(length);
+  const getFallbackLength = useMemo(
+    () => (len: string) => {
+      const numLength = Number(len);
+      return Number.isNaN(numLength) ? 0 : numLength;
+    },
+    [],
+  );
+
+  const isValidCustomLength = (value: string): boolean => {
+    const num = Number(value);
+    return !Number.isNaN(num) && num > 0;
+  };
+
+  if (!(length in SensitiveTextLength) && !isValidCustomLength(length)) {
+    console.warn(`Invalid length provided: ${length}. Falling back to Short.`);
+    length = SensitiveTextLength.Short;
+  }
+
+  const fallback = useMemo(
+    () => '*'.repeat(getFallbackLength(length)),
+    [length, getFallbackLength],
+  );
   return <Text {...props}>{isHidden ? fallback : children}</Text>;
 };
 

app/component-library/components/Texts/SensitiveText/SensitiveText.types.ts

@@ -1,14 +1,43 @@
-// external dependencies
+// External dependencies.
 import { TextProps } from '../Text/Text.types';
 
-export enum SensitiveLengths {
-  Short = 7,
-  Medium = 9,
-  Long = 13,
-}
+/**
+ * SensitiveText length options.
+ */
+export const SensitiveTextLength = {
+  Short: '7',
+  Medium: '9',
+  Long: '13',
+} as const;
+
+/**
+ * Type for SensitiveTextLength values.
+ */
+export type SensitiveTextLengthType =
+  (typeof SensitiveTextLength)[keyof typeof SensitiveTextLength];
+
+/**
+ * Type for custom length values.
+ */
+export type CustomLength = string;
 
+/**
+ * SensitiveText component props.
+ */
 export interface SensitiveTextProps extends TextProps {
-  isHidden: boolean;
-  length: SensitiveLengths;
+  /**
+   * Boolean to determine whether the text should be hidden or visible.
+   * @default false
+   */
+  isHidden?: boolean;
+  /**
+   * Determines the length of the hidden text (number of asterisks).
+   * Can be a predefined SensitiveTextLength or a custom string number.
+   * @default SensitiveTextLength.Short
+   */
+  length?: SensitiveTextLengthType | CustomLength;
+  /**
+   * The text content to be displayed or hidden.
+   */
   children: string;
 }