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

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

import { PropTypes, React, classnames } from '@gravityforms/libraries';
import { slugify } from '@gravityforms/utils';
import Box from '../../../elements/Box';
import Grid from '../../../elements/Grid';
import Card from '../Card';

const { forwardRef } = React;

/**
 * @module IntegrationCard
 * @description The integration card component.
 *
 * @since 2.3.1
 *
 * @param {object}              props                      Component props.
 * @param {JSX.Element|null}    props.afterTitle           React element for after the title.
 * @param {object}              props.customAttributes     Custom attributes for the component.
 * @param {string|Array|object} props.customClasses        Custom classes for the component.
 * @param {JSX.Element|null}    props.description          React element for the description.
 * @param {Array}               props.footerContent        Array of React elements for the footer content.
 * @param {object}              props.footerGridAttributes Custom attributes for the footer grid.
 * @param {Array}               props.headerContent        Array of React element for the header content.
 * @param {object}              props.headerGridAttributes Custom attributes for the header grid.
 * @param {JSX.Element|null}    props.title                React element for the title.
 * @param {object}              props.titleGridAttributes  Custom attributes for the title grid.
 * @param {object|null}         ref                        Ref to the component.
 *
 * @return {JSX.Element} The integration card component.
 *
 * @example
 * import IntegrationCard from '@gravityforms/components/react/admin/modules/Cards/IntegrationCard';
 *
 * return (
 *     <IntegrationCard
 *         style="integration"
 *     />
 * );
 *
 */
const IntegrationCard = forwardRef( ( {
	afterTitle = null,
	customAttributes = {},
	customClasses = [],
	description = null,
	disabled = false,
	footerContent = [],
	footerGridAttributes = {},
	headerContent = [],
	headerGridAttributes = {},
	title = null,
	titleGridAttributes = {},
}, ref ) => {
	const cardProps = {
		customClasses: classnames( {
			'gform-card--disabled': disabled,
		}, customClasses ),
		...customAttributes,
		style: 'integration',
	};

	const headerGridProps = {
		container: true,
		customClasses: [ 'gform-card__top-container-header' ],
		elementType: 'div',
		justifyContent: 'space-between',
		spacing: 2,
		...headerGridAttributes,
	};

	const footerGridProps = {
		container: true,
		customClasses: [ 'gform-card__bottom-container-footer' ],
		elementType: 'div',
		justifyContent: 'space-between',
		type: footerContent.length === 1 ? 'fluid' : 'fixed',
		...footerGridAttributes,
	};

	const titleGridProps = {
		columnSpacing: 2,
		container: true,
		customClasses: [ 'gform-card__top-container-title-container' ],
		elementType: 'div',
		justifyContent: 'flex-start',
		rowSpacing: 2,
		wrap: true,
		...titleGridAttributes,
	};

	return (
		<Card
			{ ...cardProps }
			ref={ ref }
		>
			<div className="gform-card__top-container">
				{ !! headerContent.length && (
					<Grid { ...headerGridProps }>
						{ headerContent.map( ( headerItem, index ) => (
							<Grid
								item
								customClasses={ [ 'gform-card__top-container-header-item' ] }
								elementType="div"
								key={ `integration-card__top-container-header-item--${ slugify( title ) }-${ index }` }
							>
								{ headerItem }
							</Grid>
						) ) }
					</Grid>
				) }
				{ ( title || afterTitle ) && (
					<Box customClasses={ [ 'gform-card__top-container-title-outer-container' ] } spacing={ 2 }>
						<Grid { ...titleGridProps }>
							{ title && (
								<Grid
									item
									customClasses={ [ 'gform-card__top-container-title' ] }
									elementType="div"
								>
									{ title }
								</Grid>
							) }
							{ afterTitle && (
								<Grid
									item
									customClasses={ [ 'gform-card__top-container-after-title' ] }
									elementType="div"
								>
									{ afterTitle }
								</Grid>
							) }
						</Grid>
					</Box>
				) }
				{ description }
			</div>
			<div className="gform-card__bottom-container">
				{ !! footerContent.length && (
					<Grid { ...footerGridProps }>
						{ footerContent.map( ( footerItem, index ) => (
							<Grid
								item
								elementType="div"
								key={ `integration-card__bottom-container-footer-item--${ slugify( title ) }-${ index }` }
							>
								{ footerItem }
							</Grid>
						) ) }
					</Grid>
				) }
			</div>
		</Card>
	);
} );

IntegrationCard.propTypes = {
	afterTitle: PropTypes.node,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	description: PropTypes.node,
	footerContent: PropTypes.arrayOf( PropTypes.node ),
	footerGridAttributes: PropTypes.object,
	headerContent: PropTypes.arrayOf( PropTypes.node ),
	headerGridAttributes: PropTypes.object,
	title: PropTypes.node,
	titleGridAttributes: PropTypes.object,
};

IntegrationCard.displayName = 'Cards/IntegrationCard';

export default IntegrationCard;