m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding HelpText component (#16293)

Browse Source 
* Adding initial HelpText component
This commit is contained in:
George Marshall 2022-11-03 10:09:09 -07:00 committed by GitHub
parent d634ff89df
commit 3d37ad3b6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 279 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
ui/components/component-library/help-text/README.mdx Normal file
View File

@ -0,0 +1,84 @@
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { HelpText } from './help-text';
# HelpText
The `HelpText` is intended to be used as the help or error text under a form element
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--default-story" />
</Canvas>
## 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.
<ArgsTable of={HelpText} />
### Children
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" />
</Canvas>
```jsx
import { SIZES, COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../ui/component-library/icon';
import { HelpText } from '../../ui/component-library/help-text';
<HelpText>Plain text</HelpText>
<HelpText>
Text and icon
<Icon
marginLeft={1}
color={COLORS.INHERIT}
name={ICON_NAMES.WARNING_FILLED}
size={SIZES.AUTO}
/>
</HelpText>
```
### Error
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/component-library/help-text';
<HelpText error>This HelpText in error state</HelpText>;
```
### Color
It may be useful to change the color of the `HelpText`. Use the `color` prop and the `COLORS` object to change the color of the `HelpText`. Defaults to `COLORS.TEXT_DEFAULT`.
<Canvas>
<Story id="ui-components-component-library-help-text-help-text-stories-js--color" />
</Canvas>
```jsx
import { COLORS } from '../../../helpers/constants/design-system';
import { HelpText } from '../../ui/component-library/help-text';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT}>
The HelpText default color is COLORS.TEXT_DEFAULT
</HelpText>
<HelpText color={COLORS.INFO_DEFAULT}>
This HelpText color is COLORS.INFO_DEFAULT
</HelpText>
<HelpText color={COLORS.WARNING_DEFAULT}>
This HelpText color is COLORS.WARNING_DEFAULT
</HelpText>
<HelpText color={COLORS.SUCCESS_DEFAULT}>
This HelpText color is COLORS.SUCCESS_DEFAULT
</HelpText>
</Box>;
```

54
ui/components/component-library/help-text/help-text.js Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
COLORS,
TEXT,
TEXT_COLORS,
} from '../../../helpers/constants/design-system';
import { Text } from '../text';
export const HelpText = ({
error,
color = COLORS.TEXT_DEFAULT,
className,
children,
...props
}) => (
<Text
as="span"
className={classnames('mm-help-text', className)}
variant={TEXT.BODY_XS}
color={error ? COLORS.ERROR_DEFAULT : color}
{...props}
>
{children}
</Text>
);
HelpText.propTypes = {
/**
* If the HelperText should display in error state
* Will override the color prop if true
*/
error: PropTypes.bool,
/**
* The color of the HelpText will be overridden if error is true
* Defaults to COLORS.TEXT_DEFAULT
*/
color: PropTypes.oneOf(Object.values[TEXT_COLORS]),
/**
* The content of the help-text
*/
children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Additional classNames to be added to the HelpText component
*/
className: PropTypes.string,
/**
* HelpText also accepts all Text and Box props
*/
...Text.propTypes,
};

88
ui/components/component-library/help-text/help-text.stories.js Normal file
View File

@ -0,0 +1,88 @@
import React from 'react';
import {
DISPLAY,
FLEX_DIRECTION,
COLORS,
TEXT_COLORS,
SIZES,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box';
import { Icon, ICON_NAMES } from '../icon';
import { HelpText } from './help-text';
import README from './README.mdx';
export default {
title: 'Components/ComponentLibrary/HelpText',
id: __filename,
component: HelpText,
parameters: {
docs: {
page: README,
},
},
argTypes: {
children: {
control: 'text',
},
className: {
control: 'text',
},
error: {
control: 'boolean',
},
color: {
control: 'select',
options: Object.values(TEXT_COLORS),
},
},
args: {
children: 'Help text',
},
};
const Template = (args) => <HelpText {...args} />;
export const DefaultStory = Template.bind({});
DefaultStory.storyName = 'Default';
export const Children = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText {...args}>Plain text</HelpText>
<HelpText {...args}>
Text and icon
<Icon
marginLeft={1}
color={COLORS.INHERIT}
name={ICON_NAMES.WARNING_FILLED}
size={SIZES.AUTO}
/>
</HelpText>
</Box>
);
export const ErrorStory = (args) => (
<HelpText error {...args}>
This HelpText in error state
</HelpText>
);
ErrorStory.storyName = 'Error';
export const Color = (args) => (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
<HelpText color={COLORS.TEXT_DEFAULT} {...args}>
This HelpText default color is COLORS.TEXT_DEFAULT
</HelpText>
<HelpText color={COLORS.INFO_DEFAULT} {...args}>
This HelpText color is COLORS.INFO_DEFAULT
</HelpText>
<HelpText color={COLORS.WARNING_DEFAULT} {...args}>
This HelpText color is COLORS.WARNING_DEFAULT
</HelpText>
<HelpText color={COLORS.SUCCESS_DEFAULT} {...args}>
This HelpText color is COLORS.SUCCESS_DEFAULT
</HelpText>
</Box>
);

52
ui/components/component-library/help-text/help-text.test.js Normal file
View File

@ -0,0 +1,52 @@
/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { COLORS } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../icon';
import { HelpText } from './help-text';
describe('HelpText', () => {
it('should render with text inside the HelpText', () => {
const { getByText } = render(<HelpText>help text</HelpText>);
expect(getByText('help text')).toBeDefined();
});
it('should render with react nodes inside the HelpText', () => {
const { getByText, getByTestId } = render(
<HelpText>
help text <Icon name={ICON_NAMES.WARNING_FILLED} data-testid="icon" />
</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>
</>,
);
expect(getByText('error')).toHaveClass('text--color-error-default');
});
it('should render with different colors', () => {
const { getByText } = render(
<>
<HelpText>default</HelpText>
<HelpText color={COLORS.WARNING_DEFAULT}>warning</HelpText>
<HelpText color={COLORS.SUCCESS_DEFAULT}>success</HelpText>
<HelpText color={COLORS.INFO_DEFAULT}>info</HelpText>
</>,
);
expect(getByText('default')).toHaveClass('text--color-text-default');
expect(getByText('warning')).toHaveClass('text--color-warning-default');
expect(getByText('success')).toHaveClass('text--color-success-default');
expect(getByText('info')).toHaveClass('text--color-info-default');
});
});

1
ui/components/component-library/help-text/index.js Normal file
View File

@ -0,0 +1 @@
export { HelpText } from './help-text';