@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
88 lines (82 loc) • 7.25 kB
JavaScript
import { React, PropTypes } from '@gravityforms/libraries';
const { forwardRef } = React;
/**
* @module MailSuccess
* @description The Mail Success.
*
* @since 2.3.1
*
* @param {object} props Component props.
* @param {number} props.height The height of the logo.
* @param {string} props.title The title of the logo.
* @param {number} props.width The width of the logo.
* @param {object|null} ref Ref to the component.
*
* @return {JSX.Element} The svg component.
* @example
* import MailSuccess from '@gravityforms/components/react/admin/elements/Svgs/MailSuccess';
*
* return (
* <MailSuccess height={ 130 } width={ 314 } />
* );
*
*/
const MailSuccess = forwardRef( ( {
height = 130,
title = '',
width = 314,
}, ref ) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={ width } height={ height } fill="none" ref={ ref }>
{ title !== '' && <title>{ title }</title> }
<path fill="#BBBBCE" fillRule="evenodd" d="M103 128a1 1 0 0 0 0 2h114a1 1 0 0 0 0-2H103Z" clipRule="evenodd" />
<rect width="12" height="2" x="222" y="128" fill="#BBBBCE" rx="1" />
<g filter="url(#a)">
<rect width="90" height="76" x="115" y="52" fill="#fff" rx="4" />
<rect width="92" height="78" x="114" y="51" stroke="#BBBBCE" strokeWidth="2" rx="5" />
</g>
<mask id="b" width="94" height="80" x="113" y="50" maskUnits="userSpaceOnUse" style={ { maskType: 'luminance' } }>
<rect width="92" height="78" x="114" y="51" fill="#fff" stroke="#fff" strokeWidth="2" rx="5" />
</mask>
<g mask="url(#b)">
<path fill="#0F3D6C" fillRule="evenodd" d="M145 91a4 4 0 1 1-8 0 4 4 0 0 1 8 0Zm38 0a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clipRule="evenodd" />
<path fill="#242748" fillRule="evenodd" d="M147 100c0 7.18 5.82 13 13 13s13-5.82 13-13h-26Z" clipRule="evenodd" />
<path fill="#0F3D6C" fillRule="evenodd" d="M147 100c0 7.18 5.82 13 13 13s13-5.82 13-13h-26Z" clipRule="evenodd" />
<path fill="#0F3D6C"
d="M147 100v-2a2 2 0 0 0-2 2h2Zm26 0h2a2 2 0 0 0-2-2v2Zm-28 0c0 8.284 6.716 15 15 15v-4c-6.075 0-11-4.925-11-11h-4Zm15 15c8.284 0 15-6.716 15-15h-4c0 6.075-4.925 11-11 11v4Zm13-17h-26v4h26v-4Z" />
<mask id="c" width="30" height="17" x="145" y="98" maskUnits="userSpaceOnUse" style={ { maskType: 'luminance' } }>
<path fill="#fff" fillRule="evenodd" d="M147 100c0 7.18 5.82 13 13 13s13-5.82 13-13h-26Z"
clipRule="evenodd" />
<path fill="#fff"
d="M147 100v-2a2 2 0 0 0-2 2h2Zm26 0h2a2 2 0 0 0-2-2v2Zm-28 0c0 8.284 6.716 15 15 15v-4c-6.075 0-11-4.925-11-11h-4Zm15 15c8.284 0 15-6.716 15-15h-4c0 6.075-4.925 11-11 11v4Zm13-17h-26v4h26v-4Z" />
</mask>
<g mask="url(#c)">
<path fill="#9092B2" fillRule="evenodd"
d="M160 123a9 9 0 0 0 9-9 9 9 0 0 0-9-9 9 9 0 0 0-9 9 9 9 0 0 0 9 9Z" clipRule="evenodd" />
</g>
<path fill="#BBBBCE" fillRule="evenodd" stroke="#BBBBCE"
d="M204.537 53.844 162.288 80.64a4 4 0 0 1-4.285 0L116 54l.537-.844 41.461 26.385a4 4 0 0 0 4.295 0L204 53l.537.844Z"
clipRule="evenodd" />
</g>
<path fill="#0F3D6C"
d="M289.156 28.006a1.19 1.19 0 0 0-1.027-.712l-5.796-.308-4.45-3.724c-.69-.577-1.902-.05-1.95.848l-.307 5.796-3.724 4.45a1.19 1.19 0 0 0 .234 1.74c.181.126.394.199.615.21l5.795.308 4.451 3.725a1.189 1.189 0 0 0 1.949-.849l.307-5.795 3.724-4.452a1.192 1.192 0 0 0 .179-1.237ZM280.473 71.032l1.126.838a.172.172 0 0 1 .056.174.172.172 0 0 1-.131.128l-1.388.21-.837 1.127a.172.172 0 0 1-.174.056.174.174 0 0 1-.128-.131l-.211-1.388-1.127-.837a.178.178 0 0 1-.052-.08.171.171 0 0 1-.003-.094.173.173 0 0 1 .131-.128l1.387-.211.838-1.127a.172.172 0 0 1 .174-.055.174.174 0 0 1 .128.13l.211 1.388ZM301.179 96.596l-3.429-3.353a.589.589 0 0 1-.109-.616.6.6 0 0 1 .503-.372l4.795-.076 3.353-3.43a.597.597 0 0 1 .989.394l.076 4.796 3.429 3.353a.589.589 0 0 1 .109.616.593.593 0 0 1-.502.372l-4.796.076-3.353 3.43a.597.597 0 0 1-.874-.09.59.59 0 0 1-.114-.304l-.077-4.796ZM233.02 5.224l3.776-.173a.469.469 0 0 1 .358.758l-2.535 2.805.174 3.776a.474.474 0 0 1-.268.414.47.47 0 0 1-.49-.056l-2.805-2.534-3.777.174a.469.469 0 0 1-.358-.759l2.535-2.805-.174-3.776a.465.465 0 0 1 .269-.414.467.467 0 0 1 .49.056l2.805 2.534ZM257.419 109.709l2.875 1.396a.397.397 0 0 1 .128.571.4.4 0 0 1-.168.137l-3.016 1.059-1.396 2.875a.399.399 0 0 1-.708-.04l-1.059-3.016-2.875-1.396a.397.397 0 0 1 .04-.708l3.016-1.059 1.396-2.875a.39.39 0 0 1 .366-.199.395.395 0 0 1 .342.239l1.059 3.016ZM25.018 28.006a1.187 1.187 0 0 1 1.027-.712l5.796-.308 4.45-3.724c.69-.577 1.902-.05 1.95.848l.307 5.796 3.724 4.45a1.188 1.188 0 0 1-.849 1.95l-5.795.308-4.451 3.725a1.188 1.188 0 0 1-1.95-.849l-.307-5.795-3.724-4.452a1.19 1.19 0 0 1-.178-1.237ZM12.996 96.596l3.43-3.353a.594.594 0 0 0-.394-.988l-4.796-.076-3.353-3.43a.593.593 0 0 0-.988.394l-.076 4.796-3.43 3.353a.594.594 0 0 0 .394.988l4.796.076 3.353 3.43a.598.598 0 0 0 .616.109.595.595 0 0 0 .372-.503l.076-4.796ZM81.155 5.224l-3.776-.173a.469.469 0 0 0-.358.758l2.534 2.805-.173 3.776a.468.468 0 0 0 .758.358l2.805-2.534 3.776.174a.469.469 0 0 0 .358-.759l-2.534-2.805.174-3.776a.467.467 0 0 0-.759-.358l-2.805 2.534ZM56.756 109.709l-2.875 1.396a.39.39 0 0 0-.2.366.394.394 0 0 0 .24.342l3.016 1.059 1.396 2.875a.4.4 0 0 0 .708-.04l1.06-3.016 2.874-1.396a.398.398 0 0 0 .128-.571.4.4 0 0 0-.169-.137l-3.015-1.059-1.396-2.875a.397.397 0 0 0-.708.04l-1.06 3.016ZM62.42 64.709l2.874 1.396a.396.396 0 0 1-.04.708l-3.016 1.06-1.396 2.874a.396.396 0 0 1-.708-.04l-1.06-3.016-2.874-1.396a.396.396 0 0 1 .04-.708l3.016-1.06 1.396-2.874a.397.397 0 0 1 .708.04l1.06 3.016ZM223 50.5h-1.5V49a.998.998 0 0 0-1-1 1 1 0 0 0-1 1v1.5H218a1 1 0 1 0 0 2h1.5V54a.998.998 0 0 0 1 1 1 1 0 0 0 1-1v-1.5h1.5a1 1 0 1 0 0-2Zm-26.51-33h-3v-3a.998.998 0 0 0-1-1 1 1 0 0 0-1 1v3h-3a1 1 0 1 0 0 2h3v3a.998.998 0 0 0 1 1 1 1 0 0 0 1-1v-3h3a1 1 0 1 0 0-2ZM95.5 37.5h-3v-3a1 1 0 0 0-2 0v3h-3a1 1 0 0 0 0 2h3v3a1 1 0 0 0 2 0v-3h3a1 1 0 0 0 0-2ZM239.5 94.9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM79.5 94a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM147.5 30a2.501 2.501 0 1 1 0-5.002 2.501 2.501 0 0 1 0 5.002Zm0-4a1.497 1.497 0 0 0-1.386.926 1.503 1.503 0 0 0 1.093 2.045A1.5 1.5 0 1 0 147.5 26Zm102.99 31.5a3.003 3.003 0 0 1-2.772-1.852 2.998 2.998 0 0 1 .651-3.27 2.998 2.998 0 0 1 4.615.455 2.998 2.998 0 0 1-.373 3.788 2.998 2.998 0 0 1-2.121.879Zm0-5a1.998 1.998 0 0 0-1.414 3.414 1.997 1.997 0 0 0 3.077-.303 1.998 1.998 0 0 0-.249-2.525 2 2 0 0 0-1.414-.586Z" />
<defs>
<filter id="a" width="98" height="80" x="113" y="50" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse">
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dx="4" />
<feColorMatrix values="0 0 0 0 0.733333 0 0 0 0 0.733333 0 0 0 0 0.807843 0 0 0 0.22 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_2723_27416" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow_2723_27416" result="shape" />
</filter>
</defs>
</svg>
);
} );
MailSuccess.propTypes = {
height: PropTypes.number,
title: PropTypes.string,
width: PropTypes.number,
};
MailSuccess.displayName = 'MailSuccess';
export default MailSuccess;