DonationReceipt.tsx
6 months ago
DonationSummaryItems.tsx
1 year ago
FieldDescription.tsx
2 years ago
FieldError.tsx
2 years ago
FieldLabel.tsx
2 years ago
Form.tsx
2 years ago
FormError.tsx
1 year ago
Goal.tsx
1 year ago
GoalAchieved.tsx
2 years ago
Header.tsx
2 years ago
HeaderDescription.tsx
1 year ago
HeaderImage.tsx
2 years ago
HeaderTitle.tsx
2 years ago
MultiStepForm.tsx
2 years ago
NodeWrapper.tsx
2 years ago
Section.tsx
1 year ago
Goal.tsx
61 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import type {GoalProps} from '@givewp/forms/propTypes'; |
| 3 | |
| 4 | /** |
| 5 | * @since 4.3.0 replace <aside> landmark with div for accessibility audit. add aria-hidden="true" to redundant progress text for improved screen reader navigation. |
| 6 | * @since 3.0.0 |
| 7 | */ |
| 8 | export default function Goal({ |
| 9 | currentAmount, |
| 10 | currentAmountFormatted, |
| 11 | targetAmount, |
| 12 | targetAmountFormatted, |
| 13 | goalLabel, |
| 14 | progressPercentage, |
| 15 | totalCountLabel, |
| 16 | totalCountValue, |
| 17 | totalRevenue, |
| 18 | totalRevenueFormatted, |
| 19 | }: GoalProps) { |
| 20 | return ( |
| 21 | <> |
| 22 | <div className="givewp-layouts-goal__stats-panel"> |
| 23 | <ul className="givewp-layouts-goal__stats-panel__list"> |
| 24 | <Stat value={totalRevenueFormatted} label={__('Raised', 'give')} /> |
| 25 | <Stat value={totalCountValue} label={totalCountLabel} /> |
| 26 | <Stat value={targetAmountFormatted} label={__('Goal', 'give')} /> |
| 27 | </ul> |
| 28 | </div> |
| 29 | <div className="givewp-layouts-goal__progress"> |
| 30 | <label htmlFor="goal-progress" className="givewp-layouts-goal__progress__description"> |
| 31 | {__(`${currentAmountFormatted} of ${targetAmountFormatted} ${goalLabel}`, 'give')} |
| 32 | </label> |
| 33 | <progress |
| 34 | id="goal-progress" |
| 35 | className="givewp-layouts-goal__progress__meter" |
| 36 | value={progressPercentage} |
| 37 | max={100} |
| 38 | aria-label={__(`${currentAmount} of ${targetAmount} ${goalLabel} goal`, 'give')} |
| 39 | ></progress> |
| 40 | <div className="givewp-layouts-goal__progress__markers" aria-hidden={true}> |
| 41 | <span className="givewp-layouts-goal__progress__marker"> |
| 42 | {currentAmountFormatted} {goalLabel} |
| 43 | </span> |
| 44 | <span className="givewp-layouts-goal__progress__marker"> |
| 45 | {targetAmountFormatted} {goalLabel} |
| 46 | </span> |
| 47 | </div> |
| 48 | </div> |
| 49 | </> |
| 50 | ); |
| 51 | } |
| 52 | |
| 53 | function Stat({value, label}: {value: string | number; label: string}) { |
| 54 | return ( |
| 55 | <li className="givewp-layouts-goal__stats-panel__list-item"> |
| 56 | <span className="givewp-layouts-goal__stats-panel__stat-value">{value} </span>{' '} |
| 57 | <span className="givewp-layouts-goal__stats-panel__stat-label">{label}</span> |
| 58 | </li> |
| 59 | ); |
| 60 | } |
| 61 |