1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/component-library/help-text/help-text.js
2022-11-07 14:34:18 -08:00

55 lines
1.1 KiB
JavaScript

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,
};