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

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

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import Icon from '../Icon';
import Text from '../Text';

const { forwardRef } = React;

/**
 * @module Pill
 * @description A pill component.
 *
 * @since 4.3.0
 *
 * @param {object}              props                  Component props.
 * @param {string}              props.content          The content for the pill.
 * @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 to display after the content.
 * @param {object}              props.iconAttributes   Custom attributes for the icon.
 * @param {string|Array|object} props.iconClasses      Custom classes for the icon.
 * @param {string}              props.iconPrefix       The icon prefix.
 * @param {Function}            props.onClick          The function to call when the pill is clicked.
 * @param {string}              props.tagName          Tag to use for the pill. Defaults to `button`.
 * @param {object}              props.textAttributes   Custom attributes for the text.
 * @param {string|Array|object} props.textClasses      Custom classes for the text.
 * @param {object|null}         ref                    Ref to the component.
 *
 * @return {JSX.Element} The pill component.
 */
const Pill = forwardRef( ( {
	content = '',
	customAttributes = {},
	customClasses = [],
	icon = 'circle-close',
	iconAttributes = {},
	iconClasses = [],
	iconPrefix = 'gravity-component-icon',
	onClick = () => {},
	tagName = 'button',
	textAttributes = {},
	textClasses = [],
}, ref ) => {
	const componentProps = {
		className: classnames( {
			'gform-pill': true,
		}, customClasses ),
		onClick,
		...customAttributes,
	};
	const textProps = {
		customClasses: classnames( {
			'gform-pill__text': true,
		}, textClasses ),
		color: 'port',
		content,
		size: 'text-sm',
		tagName: 'span',
		weight: 'medium',
		...textAttributes,
	};
	const iconProps = {
		customClasses: classnames( {
			'gform-pill__icon': true,
		}, iconClasses ),
		icon,
		iconPrefix,
		...iconAttributes,
	};
	const Component = tagName;

	return (
		<Component { ...componentProps } ref={ ref }>
			<Text { ...textProps } />
			<Icon { ...iconProps } />
		</Component>
	);
} );

Pill.propTypes = {
	content: PropTypes.string,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	icon: PropTypes.string,
	iconAttributes: PropTypes.object,
	iconClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	iconPrefix: PropTypes.string,
	onClick: PropTypes.func,
	tagName: PropTypes.string,
	textAttributes: PropTypes.object,
	textClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
};

Pill.displayName = 'Pill';

export default Pill;