mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
HelpText house keeping updates (#16681)
This commit is contained in:
parent
137d5df0f5
commit
a76c8ecfa1
@ -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}>
|
||||
|
@ -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>
|
||||
`;
|
@ -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}
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user