Skip to content

Commit

Permalink
update: sensitive text component has been changed from using asterisk…
Browse files Browse the repository at this point in the history
…s to dots based on design feedback
  • Loading branch information
vinnyhoward committed Oct 23, 2024
1 parent d462829 commit bc4de57
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 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 asterisks when hidden.
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.

## Props

Expand All @@ -16,7 +16,7 @@ Boolean to determine whether the text should be hidden or visible.

### `length`

Determines the length of the hidden text (number of asterisks). Can be a predefined SensitiveTextLength or a custom string number.
Determines the length of the hidden text (number of dots). 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> |
| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
Expand Down Expand Up @@ -54,4 +54,4 @@ import { SensitiveTextLength } from 'app/component-library/components/Texts/Sens
</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.
This will render a Text component with dots 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.
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe('SensitiveText', () => {
<SensitiveText {...testProps} isHidden />,
);
expect(queryByText('Sensitive Information')).toBeNull();
expect(getByText('******')).toBeTruthy();
expect(getByText('••••••')).toBeTruthy();
});

it('should render the correct number of asterisks for different lengths', () => {
Expand All @@ -45,7 +45,7 @@ describe('SensitiveText', () => {
length={SensitiveTextLength.Short}
/>,
);
expect(getShort('******')).toBeTruthy();
expect(getShort('••••••')).toBeTruthy();

const { getByText: getMedium } = render(
<SensitiveText
Expand All @@ -54,7 +54,7 @@ describe('SensitiveText', () => {
length={SensitiveTextLength.Medium}
/>,
);
expect(getMedium('*********')).toBeTruthy();
expect(getMedium('•••••••••')).toBeTruthy();

const { getByText: getLong } = render(
<SensitiveText
Expand All @@ -63,7 +63,7 @@ describe('SensitiveText', () => {
length={SensitiveTextLength.Long}
/>,
);
expect(getLong('************')).toBeTruthy();
expect(getLong('••••••••••••')).toBeTruthy();

const { getByText: getExtraLong } = render(
<SensitiveText
Expand All @@ -72,7 +72,7 @@ describe('SensitiveText', () => {
length={SensitiveTextLength.ExtraLong}
/>,
);
expect(getExtraLong('********************')).toBeTruthy();
expect(getExtraLong('••••••••••••••••••••')).toBeTruthy();
});

it('should apply the correct text color', () => {
Expand All @@ -87,22 +87,22 @@ describe('SensitiveText', () => {
const { getByText } = render(
<SensitiveText {...testProps} isHidden length={value} />,
);
expect(getByText('*'.repeat(Number(value)))).toBeTruthy();
expect(getByText(''.repeat(Number(value)))).toBeTruthy();
});
});

it('should handle custom length as a string', () => {
const { getByText } = render(
<SensitiveText {...testProps} isHidden length="15" />,
);
expect(getByText('***************')).toBeTruthy();
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();
expect(getByText('••••••')).toBeTruthy();
});

it('should log a warning for invalid custom length', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const SensitiveText: React.FC<SensitiveTextProps> = ({
}

const fallback = useMemo(
() => '*'.repeat(getFallbackLength(length)),
() => ''.repeat(getFallbackLength(length)),
[length, getFallbackLength],
);
return <Text {...props}>{isHidden ? fallback : children}</Text>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,14 @@ export type CustomLength = string;
export interface SensitiveTextProps extends TextProps {
/**
* 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;
Expand Down

0 comments on commit bc4de57

Please sign in to comment.