@gravityforms/components/react/admin/modules/Indicators/IconIndicator/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';
import Icon from '../../../elements/Icon';

const { forwardRef } = React;

/**
 * @module IconIndicator
 * @description An icon indicator component.
 *
 * @since 1.1.15
 *
 * @param {object}                     props                  Component props.
 * @param {string}                     props.bgColor          Background color for the indicator.
 * @param {JSX.Element}                props.children         React element children.
 * @param {object}                     props.customAttributes Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses    Custom classes for the component.
 * @param {string}                     props.icon             The icon of the indicator if the type is `unstyled`.
 * @param {string}                     props.iconColor        The color of the icon if the type is `unstyled`.
 * @param {string}                     props.iconPrefix       The prefix for the icon library to be used.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {string}                     props.type             The type of the indicator, one of `unstyled`, `info`, `card`, `warning`, `success`, or `error`.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element} The icon indicator component.
 *
 * @example
 * import IconIndicator from '@gravityforms/components/react/admin/modules/Indicators/IconIndicator';
 *
 * return (
 *     <IconIndicator icon="api" type="info">
 *         { children }
 *     </IconIndicator>
 * );
 *
 */
const IconIndicator = forwardRef( ( {
	bgColor = 'black',
	children = null,
	customAttributes = {},
	customClasses = {},
	icon = '',
	iconColor = 'white',
	iconPrefix = 'gravity-component-icon',
	size = 'regular',
	spacing = '',
	type = 'unstyled',
}, ref ) => {
	const getIcon = () => {
		switch ( type ) {
			case 'unstyled':
				return icon;
			case 'info':
				return 'information-circle';
			case 'card':
				return 'credit-card';
			case 'warning':
				return 'exclamation';
			case 'success':
				return 'check-circle';
			case 'error':
				return 'exclamation-circle';
			case 'confirm':
				return 'question-mark-simple';
			default:
				return icon;
		}
	};

	const componentProps = {
		className: classnames( {
			'gform-indicator': true,
			'gform-indicator--icon': true,
			[ `gform-indicator--size-${ size }` ]: true,
			[ `gform-indicator--${ type }` ]: true,
			[ `gform-util-gform-admin-background-color-${ bgColor }` ]: type === 'unstyled',
			[ `gform-util-gform-admin-color-${ iconColor }` ]: type === 'unstyled',
			...spacerClasses( spacing ),
		}, customClasses ),
		...customAttributes,
	};

	return (
		<span { ...componentProps } ref={ ref }>
			<Icon icon={ getIcon() } iconPrefix={ iconPrefix } />
			{ children }
		</span>
	);
} );

IconIndicator.propTypes = {
	bgColor: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.arrayOf( PropTypes.node ),
		PropTypes.node,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	icon: PropTypes.string,
	iconColor: PropTypes.string,
	iconPrefix: PropTypes.string,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	type: PropTypes.string,
};

IconIndicator.displayName = 'Indicators/IconIndicator';

export default IconIndicator;