m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

HelpText house keeping updates (#16681)

Browse Source
This commit is contained in:
George Marshall 2022-11-29 13:00:51 -08:00 committed by GitHub
parent 137d5df0f5
commit a76c8ecfa1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/components/component-library/help-text/README.mdx
View File

@ -1,5 +1,7 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Text } from '..';
import { HelpText } from './help-text';
# HelpText
@ -12,13 +14,17 @@ The `HelpText` is intended to be used as the help or error text under a form ele
## Props
The `HelpText` accepts all props below as well as all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) and [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props.
The `HelpText` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props
<ArgsTable of={HelpText} />
`HelpText` accepts all [Text](/docs/ui-components-component-library-text-text-stories-js--default-story#props) component props
<ArgsTable of={Text} />
### Children
The `children` of the `HelpText` can be plain text or react nodes.
The `children` of the `HelpText` can be plain text or react nodes
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--children" />
@ -26,8 +32,7 @@ The `children` of the `HelpText` can be plain text or react nodes.
```jsx
import { SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/components/component-library';
import { HelpText } from '../../ui/components/component-library';
import { HelpText, Icon, ICON_NAMES } from '../../component-library';
<HelpText>Plain text</HelpText>
<HelpText>
@ -43,14 +48,14 @@ import { HelpText } from '../../ui/components/component-library';
### Error
Use the `error` prop to show the `HelpText` in error state.
Use the `error` prop to show the `HelpText` in error state
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--error-story" />
</Canvas>
```jsx
import { HelpText } from '../../ui/components/component-library';
import { HelpText } from '../../component-library';
<HelpText error>This HelpText in error state</HelpText>;
```
@ -65,7 +70,7 @@ It may be useful to change the color of the `HelpText`. Use the `color` prop and
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { HelpText } from '../../ui/components/component-library';
import { HelpText } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT}>

11
ui/components/component-library/help-text/__snapshots__/help-text.test.js.snap Normal file
View File

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HelpText should render with text inside the HelpText 1`] = `
<div>
<span
class="box text mm-help-text text--body-xs text--color-text-default box--flex-direction-row"
>
help text
</span>
</div>
`;

2
ui/components/component-library/help-text/help-text.js
View File

@ -18,8 +18,8 @@ export const HelpText = ({
...props
}) => (
<Text
as="span"
className={classnames('mm-help-text', className)}
as="span"
variant={TEXT.BODY_XS}
color={error ? COLORS.ERROR_DEFAULT : color}
{...props}

3
ui/components/component-library/help-text/help-text.stories.js
View File

@ -8,7 +8,8 @@ import {
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon';
import { Icon, ICON_NAMES } from '..';
import { HelpText } from './help-text';

23
ui/components/component-library/help-text/help-text.test.js
View File

@ -8,8 +8,16 @@ import { HelpText } from './help-text';
describe('HelpText', () => {
it('should render with text inside the HelpText', () => {
const { getByText } = render(<HelpText>help text</HelpText>);
const { getByText, container } = render(<HelpText>help text</HelpText>);
expect(getByText('help text')).toBeDefined();
expect(getByText('help text')).toHaveClass('mm-help-text');
expect(container).toMatchSnapshot();
});
it('should render with and additional className', () => {
const { getByText } = render(
<HelpText className="test-class">help text</HelpText>,
);
expect(getByText('help text')).toHaveClass('mm-help-text test-class');
});
it('should render with react nodes inside the HelpText', () => {
const { getByText, getByTestId } = render(
@ -20,19 +28,8 @@ describe('HelpText', () => {
expect(getByText('help text')).toBeDefined();
expect(getByTestId('icon')).toBeDefined();
});
it('should render with and additional className', () => {
const { getByText } = render(
<HelpText className="test-class">help text</HelpText>,
);
expect(getByText('help text')).toBeDefined();
expect(getByText('help text')).toHaveClass('test-class');
});
it('should render with error state', () => {
const { getByText } = render(
<>
<HelpText error>error</HelpText>
</>,
);
const { getByText } = render(<HelpText error>error</HelpText>);
expect(getByText('error')).toHaveClass('text--color-error-default');
});
it('should render with different colors', () => {