@gravityforms/components/react/admin/modules/Calendar/Icons.js

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

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

const { forwardRef } = React;

/**
 * @module LeftArrow
 * @description The left arrow for the calendar component.
 *
 * @since 4.4.0
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the component.
 * @param {string}      props.title  The title of the component.
 * @param {number}      props.width  The width of the component.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import { LeftArrow } from '@gravityforms/components/react/admin/modules/Calendar/Icons';
 *
 * return (
 *    <LeftArrow height={ 20 } width={ 20 } />
 * );
 *
 */
export const LeftArrow = forwardRef( ( {
	height = 20,
	title = '',
	width = 20,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 20 20" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fillRule="evenodd" d="M12.707 5.293a1 1 0 0 1 0 1.414L9.414 10l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0Z" clipRule="evenodd" />
		</svg>
	);
} );

LeftArrow.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

/**
 * @module RightArrow
 * @description The right arrow for the calendar component.
 *
 * @since 4.4.0
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the component.
 * @param {string}      props.title  The title of the component.
 * @param {number}      props.width  The width of the component.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import { RightArrow } from '@gravityforms/components/react/admin/modules/Calendar/Icons';
 *
 * return (
 *    <RightArrow height={ 20 } width={ 20 } />
 * );
 *
 */
export const RightArrow = forwardRef( ( {
	height = 20,
	title = '',
	width = 20,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 20 20" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fillRule="evenodd" d="M7.293 14.707a1 1 0 0 1 0-1.414L10.586 10 7.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z" clipRule="evenodd" />
		</svg>
	);
} );

RightArrow.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

/**
 * @module DoubleLeftArrow
 * @description The double left arrow for the calendar component.
 *
 * @since 4.4.0
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the component.
 * @param {string}      props.title  The title of the component.
 * @param {number}      props.width  The width of the component.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import { DoubleLeftArrow } from '@gravityforms/components/react/admin/modules/Calendar/Icons';
 *
 * return (
 *    <DoubleLeftArrow height={ 20 } width={ 20 } />
 * );
 *
 */
export const DoubleLeftArrow = forwardRef( ( {
	height = 20,
	title = '',
	width = 20,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 20 20" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fillRule="evenodd" d="M9.707 14.707a1 1 0 0 0 0-1.414L6.414 10l3.293-3.293a1 1 0 0 0-1.414-1.414l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414 0Z" clipRule="evenodd" />
			<path fillRule="evenodd" d="M15.707 14.707a1 1 0 0 0 0-1.414L12.414 10l3.293-3.293a1 1 0 0 0-1.414-1.414l-4 4a1 1 0 0 0 0 1.414l4 4a1 1 0 0 0 1.414 0Z" clipRule="evenodd" />
		</svg>
	);
} );

DoubleLeftArrow.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};

/**
 * @module DoubleRightArrow
 * @description The double right arrow for the calendar component.
 *
 * @since 4.4.0
 *
 * @param {object}      props        Component props.
 * @param {number}      props.height The height of the component.
 * @param {string}      props.title  The title of the component.
 * @param {number}      props.width  The width of the component.
 * @param {object|null} ref          Ref to the component.
 *
 * @return {JSX.Element} The svg component.
 * @example
 * import { DoubleRightArrow } from '@gravityforms/components/react/admin/modules/Calendar/Icons';
 *
 * return (
 *    <DoubleRightArrow height={ 20 } width={ 20 } />
 * );
 *
 */
export const DoubleRightArrow = forwardRef( ( {
	height = 20,
	title = '',
	width = 20,
}, ref ) => {
	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" viewBox="0 0 20 20" ref={ ref }>
			{ title !== '' && <title>{ title }</title> }
			<path fillRule="evenodd" d="M10.293 14.707a1 1 0 0 1 0-1.414L13.586 10l-3.293-3.293a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z" clipRule="evenodd" />
			<path fillRule="evenodd" d="M4.293 14.707a1 1 0 0 1 0-1.414L7.586 10 4.293 6.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0Z" clipRule="evenodd" />
		</svg>
	);
} );

DoubleRightArrow.propTypes = {
	height: PropTypes.number,
	title: PropTypes.string,
	width: PropTypes.number,
};