@gravityforms/components/react/admin/elements/Link/BrandedLink/index.js

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

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

const { forwardRef } = React;

/**
 * @module BrandedLink
 * @description A branded link component in React.
 *
 * @since 4.3.1
 *
 * @param {object}                     props                  Component props.
 * @param {object}                     props.customAttributes Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses    Custom classes for the component.
 * @param {string}                     props.href             The href attribute for the link.
 * @param {string}                     props.label            The label for the link.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {JSX.Element|null}           props.Svg              The SVG element for the link.
 * @param {string}                     props.target           The target attribute for the link.
 * @param {string}                     props.type             The type of branded link.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element} The branded link component.
 *
 * @example
 * import BrandedLink from '@gravityforms/components/react/admin/elements/Link/BrandedLink';
 *
 * return <BrandedLink href="https://path.to.link/" target="_blank" label="Click me" type="color" />;
 *
 */
const BrandedLink = forwardRef( ( {
	customAttributes = {},
	customClasses = [],
	href = '',
	label = '',
	spacing = '',
	Svg = null,
	target = '',
	type = 'color',
}, ref ) => {
	const attributes = {
		className: classnames( {
			'gform-branded-link': true,
			'gform-branded-button': true,
			[ `gform-branded-button--${ type }` ]: true,
			...spacerClasses( spacing ),
		}, customClasses ),
		href,
		target,
		...customAttributes,
	};

	if ( target === '_blank' ) {
		attributes.rel = 'noopener';
	}

	return (
		<a { ...attributes } ref={ ref }>
			{ Svg && <span className="gform-branded-button__svg">{ Svg }</span> }
			{ label && <span className="gform-branded-button__text">{ label }</span> }
		</a>
	);
} );

BrandedLink.propTypes = {
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	href: PropTypes.string,
	label: PropTypes.string,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	Svg: PropTypes.node,
	target: PropTypes.string,
	type: PropTypes.string,
};

BrandedLink.displayName = 'Elements/Link/BrandedLink';

export default BrandedLink;