@gravityforms/components/react/admin/modules/Cards/AddCard/index.js

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

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import Button from '../../../elements/Button';
import Card from '../Card';

const { forwardRef } = React;

/**
 * @module AddCard
 * @description The add card component. used to display icons with a measurement of some kind.
 *
 * @since 5.8.1
 *
 * @param {object}              props                  Component props.
 * @param {object}              props.buttonAttributes Attributes for the button.
 * @param {Array}               props.buttonClasses    Classes for the button.
 * @param {object}              props.customAttributes Custom attributes for the component.
 * @param {string|Array|object} props.customClasses    Custom classes for the component.
 * @param {string}              props.label            The label for the button.
 * @param {function}            props.onClick          The function to call when the button is clicked.
 * @param {object|null}         ref                    Ref to the component.
 *
 * @return {JSX.Element} The add card component.
 *
 * @example
 * import AddCard from '@gravityforms/components/react/admin/modules/Cards/AddCard';
 *
 * return (
 *     <AddCard />
 * );
 *
 */
const AddCard = forwardRef( ( {
	buttonAttributes = {},
	buttonClasses = [],
	customAttributes = {},
	customClasses = [],
	label = '',
	onClick = () => {},
}, ref ) => {
	const componentProps = {
		customClasses: classnames( {
			'gform-card--add': true,
		}, customClasses ),
		...customAttributes,
		baseClass: false,
		ref,
	};

	const buttonProps = {
		customClasses: classnames( 'gform-card-add__button', buttonClasses ),
		icon: 'plus-regular',
		iconPosition: 'leading',
		iconPrefix: 'gravity-component-icon',
		label,
		onClick,
		size: 'size-height-xl',
		type: 'icon-white',
		...buttonAttributes,
	};

	return (
		<Card { ...componentProps }>
			<Button { ...buttonProps } />
		</Card>
	);
} );

AddCard.propTypes = {
	buttonAttributes: PropTypes.object,
	buttonClasses: PropTypes.oneOfType( [
		PropTypes.array,
		PropTypes.object,
		PropTypes.string,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.array,
		PropTypes.object,
		PropTypes.string,
	] ),
	label: PropTypes.string,
	onClick: PropTypes.func,
};

AddCard.displayName = 'Cards/AddCard';

export default AddCard;