elements_Tag_index.js

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

const { forwardRef } = React;

/**
 * @module Tag
 * @description A tag component.
 *
 * @since 1.1.18
 *
 * @param {object}                     props                      Component props.
 * @param {JSX.Element}                props.children             React element children.
 * @param {string}                     props.content              Tag text.
 * @param {object}                     props.customAttributes     Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses        Custom classes for the component.
 * @param {string}                     props.size                 The font size for the label.
 * @param {string|number|Array|object} props.spacing              The spacing for the component, as a string, number, array, or object.
 * @param {boolean}                    props.triangleTag          Whether to show a triangle arrow for the tag.
 * @param {string}                     props.triangleTagDirection The direction of the triangle arrow.
 * @param {string}                     props.type                 The tag type.
 * @param {string}                     props.weight               The font weight for the label.
 * @param {object|null}                ref                        Ref to the component.
 *
 * @return {JSX.Element} The Tag component.
 *
 * @example
 * import Tag from '@gravityforms/components/react/admin/elements/Tag';
 *
 * return <Tag triangleTag>{ 'Elite' }</Tag>;
 *
 */
const Tag = forwardRef( ( {
	children = null,
	content = '',
	customAttributes = {},
	customClasses = [],
	size = 'text-xs',
	spacing = '',
	triangleTag = false,
	triangleTagDirection = 'left',
	type = 'chathams',
	weight = 'semibold',
}, ref ) => {
	const componentProps = {
		className: classnames( {
			'gform-tag': true,
			[ `gform-tag--type-${ type }` ]: true,
			[ `gform-typography--size-${ size }` ]: true,
			[ `gform-typography--weight-${ weight }` ]: true,
			[ `gform-tag--triangle-${ triangleTagDirection }` ]: triangleTag,
			...spacerClasses( spacing ),
		}, customClasses ),
		ref,
		...customAttributes,
	};

	return (
		<span { ...componentProps }>
			{ triangleTag && <span className={ 'gform-tag__triangle' } /> }
			{ content }
			{ children }
		</span>
	);
} );

Tag.propTypes = {
	children: PropTypes.oneOfType( [
		PropTypes.arrayOf( PropTypes.node ),
		PropTypes.node,
	] ),
	content: PropTypes.string,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	size: PropTypes.string,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	triangleTag: PropTypes.bool,
	triangleTagDirection: PropTypes.string,
	type: PropTypes.string,
	weight: PropTypes.string,
};

Tag.displayName = 'Tag';

export default Tag;