@gravityforms/components/react/admin/elements/HelpText/index.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import { spacerClasses } from '@gravityforms/utils';

const { forwardRef } = React;

/**
 * @module HelpText
 * @description A form input helper text component.
 *
 * @since 1.1.18
 *
 * @param {object}                     props                  Component props.
 * @param {boolean}                    props.asHtml           Whether or not to accept HTML in the content
 * @param {string}                     props.content          Helper text.
 * @param {object}                     props.customAttributes Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses    Custom classes for the component.
 * @param {string}                     props.id               Id for the helper text.
 * @param {string}                     props.size             The font size for the helper text.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {string}                     props.weight           The font weight for the label.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element} The help text component.
 *
 * @example
 * import HelpText from '@gravityforms/components/react/admin/elements/HelpText';
 *
 * return <HelpText content="This is required." />;
 *
 */
const HelpText = forwardRef( ( {
	asHtml = false,
	content = '',
	customAttributes = {},
	customClasses = [],
	id = '',
	size = 'text-xs',
	spacing = '',
	weight = 'regular',
}, ref ) => {
	if ( ! content ) {
		return null;
	}

	const componentProps = {
		className: classnames( {
			'gform-input-help-text': true,
			[ `gform-typography--size-${ size }` ]: true,
			[ `gform-typography--weight-${ weight }` ]: true,
			...spacerClasses( spacing ),
		}, customClasses ),
		id,
		ref,
		...customAttributes,
	};

	if ( asHtml ) {
		componentProps.dangerouslySetInnerHTML = { __html: content };
	}

	return asHtml ? <span { ...componentProps } /> : (
		<span { ...componentProps }>{ content }</span>
	);
} );

HelpText.propTypes = {
	content: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.node,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	id: PropTypes.string,
	size: PropTypes.string,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	weight: PropTypes.string,
};

HelpText.displayName = 'HelpText';

export default HelpText;