DonationReceipt.tsx
5 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
Section.tsx
38 lines
| 1 | import type {SectionProps} from '@givewp/forms/propTypes'; |
| 2 | |
| 3 | /** |
| 4 | * @since 4.3.0 update legend to use the description prop. |
| 5 | */ |
| 6 | const Legend = ({name, description}: {name: string; description?: string}) => { |
| 7 | return description.length > 0 ? ( |
| 8 | <div className="givewp-layouts-section__fieldset__legend"> |
| 9 | {description.length > 0 && <legend id={name}>{description}</legend>} |
| 10 | </div> |
| 11 | ) : ( |
| 12 | <></> |
| 13 | ); |
| 14 | }; |
| 15 | |
| 16 | /** |
| 17 | * @since 4.3.0 use h3 tag for the section label. |
| 18 | */ |
| 19 | export default function Section({ |
| 20 | section: {name, label, description}, |
| 21 | hideLabel, |
| 22 | hideDescription, |
| 23 | children, |
| 24 | }: SectionProps) { |
| 25 | return ( |
| 26 | <> |
| 27 | {hideLabel ? '' : label.length > 0 && <h3 id={name} className="givewp-layouts-section__header">{label}</h3>} |
| 28 | <fieldset className="givewp-layouts-section__fieldset" aria-labelledby={name}> |
| 29 | <Legend |
| 30 | name={name} |
| 31 | description={hideDescription ? '' : description} |
| 32 | /> |
| 33 | <div className="givewp-section-nodes">{children}</div> |
| 34 | </fieldset> |
| 35 | </> |
| 36 | ); |
| 37 | } |
| 38 |