-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: small storybook and docs updates
- Loading branch information
1 parent
7d75226
commit 9e08a3a
Showing
3 changed files
with
117 additions
and
88 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters