From 9e08a3a54a5bfeda98338c2e5837797623afb206 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 24 Oct 2024 13:18:30 -0700 Subject: [PATCH 1/2] chore: small storybook and docs updates --- .../sensitive-text/README.md | 71 ---------------- .../sensitive-text/README.mdx | 81 +++++++++++++++++++ .../sensitive-text/sensitive-text.stories.tsx | 53 ++++++++---- 3 files changed, 117 insertions(+), 88 deletions(-) delete mode 100644 ui/components/component-library/sensitive-text/README.md create mode 100644 ui/components/component-library/sensitive-text/README.mdx diff --git a/ui/components/component-library/sensitive-text/README.md b/ui/components/component-library/sensitive-text/README.md deleted file mode 100644 index 875ed8d7d308..000000000000 --- a/ui/components/component-library/sensitive-text/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# 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. - -## Props - -This component extends all props from the [Text](../text/README.md) component and adds the following: - -### `isHidden` - -Boolean to determine whether the text should be hidden or visible. - -| TYPE | REQUIRED | DEFAULT | -| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | -| boolean | No | false | - -### `length` - -Determines the length of the hidden text (number of asterisks). Can be a predefined SensitiveTextLength or a custom string number. - -| TYPE | REQUIRED | DEFAULT | -| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | -| [SensitiveTextLengthType](./sensitive-text.types.ts#L14) \| [CustomLength](./sensitive-text.types.ts#L19) | No | SensitiveTextLength.Short | - -### `children` - -The text content to be displayed or hidden. - -| TYPE | REQUIRED | DEFAULT | -| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | -| React.ReactNode | No | '' | - -## Usage -```jsx -import { SensitiveText } from '../sensitive-text'; -import { SensitiveTextLength } from './sensitive-text.types'; - -Sensitive Information - - -Custom Length Hidden Text - -``` - -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. - -## Behavior - -- When `isHidden` is `true`, the component will display asterisks instead of the actual text. -- The number of asterisks 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". -- The component forwards refs to the underlying Text component. -- Additional props are passed through to the Text component. - -## SensitiveTextLength Options - -The following predefined length options are available: - -- `SensitiveTextLength.Short`: '6' -- `SensitiveTextLength.Medium`: '9' -- `SensitiveTextLength.Long`: '12' -- `SensitiveTextLength.ExtraLong`: '20' - -You can import these options from `./sensitive-text.types`. \ No newline at end of file diff --git a/ui/components/component-library/sensitive-text/README.mdx b/ui/components/component-library/sensitive-text/README.mdx new file mode 100644 index 000000000000..9e950381e6f3 --- /dev/null +++ b/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. + + + +## Props + +The `SensitiveText` component extends the `Text` component. See the `Text` component for an extended list of props. + + + +### Children + +The text content to be displayed or hidden. + + + +```jsx +import { SensitiveText } from '../../component-library'; + + + Sensitive Information + +``` + + +### 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. + + + +```jsx +import { SensitiveText } from '../../component-library'; + + + Sensitive Information + +``` + +### 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`. + + + +```jsx +import { SensitiveText, SensitiveTextLength } from '../../component-library'; + + + Length "short" (6 characters) + + + Length "medium" (9 characters) + + + Length "long" (12 characters) + + + Length "extra long" (20 characters) + + + Length "15" (15 characters) + +``` diff --git a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx index cd843d5a7a78..2560c842cd34 100644 --- a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx +++ b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx @@ -1,16 +1,22 @@ -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 = { title: 'Components/ComponentLibrary/SensitiveText', component: SensitiveText, + parameters: { + docs: { + page: README, + }, + }, args: { children: 'Sensitive information', isHidden: false, @@ -18,22 +24,35 @@ export default { }, } as Meta; -const Template: StoryFn = (args) => { - return ; -}; +export default meta; +type Story = StoryObj; -export const DefaultStory = Template.bind({}); +export const DefaultStory: Story = {}; DefaultStory.storyName = 'Default'; -export const HiddenText: StoryFn = (args) => { - return ; +export const Children: Story = { + args: { + children: 'Sensitive information', + }, + render: (args) => ( + + ), }; -HiddenText.args = { - isHidden: true, + +export const IsHidden: Story = { + args: { + isHidden: true, + }, + render: (args) => ( + + ), }; -export const LengthVariants: StoryFn = (args) => { - return ( +export const Length: Story = { + args: { + isHidden: true, + }, + render: (args) => ( Length "short" (6 characters) @@ -47,9 +66,9 @@ export const LengthVariants: StoryFn = (args) => { Length "extra long" (20 characters) + + Length "15" (15 characters) + - ); -}; -LengthVariants.args = { - isHidden: true, -}; + ), +}; \ No newline at end of file From fd8acc79f9856fb70a43d59af4fe2510f2a5a822 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Thu, 24 Oct 2024 13:24:48 -0700 Subject: [PATCH 2/2] chore: adding line break to storybook file --- .../component-library/sensitive-text/sensitive-text.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx index 2560c842cd34..142def9118b5 100644 --- a/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx +++ b/ui/components/component-library/sensitive-text/sensitive-text.stories.tsx @@ -71,4 +71,4 @@ export const Length: Story = { ), -}; \ No newline at end of file +};