@gravityforms/components/react/admin/elements/Button/BrandedButton/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 BrandedButton
 * @description A branded button component.
 *
 * @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 {boolean}                    props.disabled         Whether the button is disabled or not.
 * @param {string}                     props.label            The label for the button.
 * @param {Function}                   props.onClick          On click handler for the button.
 * @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              Svg element for the brand.
 * @param {string}                     props.type             The button type.
 *
 * @return {JSX.Element} The branded button component.
 *
 * @example
 * import BrandedButton from '@gravityforms/components/react/admin/elements/Button/BrandedButton';
 *
 * return (
 *     <BrandedButton onClick={ () => {} } type="white" Svg={ <Svg /> } label={ 'Click me' } />
 * );
 *
 */
const BrandedButton = forwardRef( ( {
	customAttributes = {},
	customClasses = [],
	disabled = false,
	label = '',
	onClick = () => {},
	spacing = '',
	Svg = null,
	type = 'color',
}, ref ) => {
	const attributes = {
		className: classnames( {
			'gform-branded-button': true,
			[ `gform-branded-button--${ type }` ]: true,
			...spacerClasses( spacing ),
		}, customClasses ),
		disabled,
		onClick,
		...customAttributes,
	};

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

BrandedButton.propTypes = {
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	disabled: PropTypes.bool,
	label: PropTypes.string,
	onClick: PropTypes.func,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	Svg: PropTypes.node,
	type: PropTypes.string,
};

BrandedButton.displayName = 'Elements/Button/BrandedButton';

export default BrandedButton;