| 1 |
import {__} from '@wordpress/i18n'; |
| 2 |
import {HeaderProps} from '@givewp/forms/propTypes'; |
| 3 |
|
| 4 |
/** |
| 5 |
* @since 4.3.0 replace <aside> landmark with div for accessibility audit. |
| 6 |
* @since 3.0.0 |
| 7 |
*/ |
| 8 |
const SecureBadge = () => { |
| 9 |
return ( |
| 10 |
<div className="givewp-form-secure-badge"> |
| 11 |
<i className="fa-solid fa-lock givewp-secondary-color"></i> |
| 12 |
<span>{__('100% Secure Donation', 'give')}</span> |
| 13 |
</div> |
| 14 |
); |
| 15 |
}; |
| 16 |
|
| 17 |
/** |
| 18 |
* @since 3.5.0 add HeaderImage |
| 19 |
* @since 3.0.0 |
| 20 |
*/ |
| 21 |
export default function Header({HeaderImage, Title, Description, Goal}: HeaderProps) { |
| 22 |
const {designSettingsImageStyle, designSettingsImageUrl} = window.givewp.form.hooks.useDonationFormSettings(); |
| 23 |
|
| 24 |
if (!designSettingsImageUrl) { |
| 25 |
return ( |
| 26 |
<div className={`givewp-layouts-header__templates`}> |
| 27 |
<Title /> |
| 28 |
<Description /> |
| 29 |
<SecureBadge /> |
| 30 |
<Goal /> |
| 31 |
</div> |
| 32 |
); |
| 33 |
} |
| 34 |
|
| 35 |
return ( |
| 36 |
<div |
| 37 |
className={`givewp-layouts-header__templates givewp-layouts-header__templates--${designSettingsImageStyle}`} |
| 38 |
> |
| 39 |
<HeaderImageTemplates |
| 40 |
imagePosition={designSettingsImageStyle} |
| 41 |
HeaderImage={HeaderImage} |
| 42 |
Title={Title} |
| 43 |
Description={Description} |
| 44 |
Goal={Goal} |
| 45 |
/> |
| 46 |
</div> |
| 47 |
); |
| 48 |
} |
| 49 |
|
| 50 |
function HeaderImageTemplates({imagePosition, HeaderImage, Title, Description, Goal}) { |
| 51 |
switch (imagePosition) { |
| 52 |
case 'background': |
| 53 |
return ( |
| 54 |
<> |
| 55 |
<HeaderImage /> |
| 56 |
<Title /> |
| 57 |
<Description /> |
| 58 |
<SecureBadge /> |
| 59 |
<Goal /> |
| 60 |
</> |
| 61 |
); |
| 62 |
case 'above': |
| 63 |
return ( |
| 64 |
<> |
| 65 |
<HeaderImage /> |
| 66 |
<div className={'givewp-layouts-header__content'}> |
| 67 |
<Title /> |
| 68 |
<Description /> |
| 69 |
<SecureBadge /> |
| 70 |
<Goal /> |
| 71 |
</div> |
| 72 |
</> |
| 73 |
); |
| 74 |
case 'center': |
| 75 |
return ( |
| 76 |
<> |
| 77 |
<Title /> |
| 78 |
<Description /> |
| 79 |
<SecureBadge /> |
| 80 |
<HeaderImage /> |
| 81 |
<Goal /> |
| 82 |
</> |
| 83 |
); |
| 84 |
default: |
| 85 |
return ( |
| 86 |
<> |
| 87 |
<Title /> |
| 88 |
<Description /> |
| 89 |
<SecureBadge /> |
| 90 |
<Goal /> |
| 91 |
</> |
| 92 |
); |
| 93 |
} |
| 94 |
} |
| 95 |
|
