You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.1 KiB
54 lines
1.1 KiB
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,
|
|
};
|
|
|