DonationReceipt.tsx
2 years ago
DonationSummaryItems.tsx
2 years ago
FieldDescription.tsx
2 years ago
FieldError.tsx
2 years ago
FieldLabel.tsx
2 years ago
Form.tsx
2 years ago
FormError.tsx
2 years ago
Goal.tsx
2 years ago
GoalAchieved.tsx
2 years ago
Header.tsx
2 years ago
HeaderDescription.tsx
2 years ago
HeaderTitle.tsx
2 years ago
MultiStepForm.tsx
2 years ago
NodeWrapper.tsx
2 years ago
Section.tsx
2 years ago
Section.tsx
31 lines
| 1 | import type {SectionProps} from '@givewp/forms/propTypes'; |
| 2 | |
| 3 | const SectionHeader = ({name, label, description}: {name: string; label?: string; description?: string}) => { |
| 4 | return label.length > 0 || description.length > 0 ? ( |
| 5 | <div className="givewp-layouts-section__fieldset__legend"> |
| 6 | {label.length > 0 && <legend id={name}>{label}</legend>} |
| 7 | {description.length > 0 && <p>{description}</p>} |
| 8 | </div> |
| 9 | ) : ( |
| 10 | <></> |
| 11 | ); |
| 12 | }; |
| 13 | |
| 14 | export default function Section({ |
| 15 | section: {name, label, description}, |
| 16 | hideLabel, |
| 17 | hideDescription, |
| 18 | children, |
| 19 | }: SectionProps) { |
| 20 | return ( |
| 21 | <fieldset className="givewp-layouts-section__fieldset" aria-labelledby={name}> |
| 22 | <SectionHeader |
| 23 | name={name} |
| 24 | label={hideLabel ? '' : label} |
| 25 | description={hideDescription ? '' : description} |
| 26 | /> |
| 27 | <div className="givewp-section-nodes">{children}</div> |
| 28 | </fieldset> |
| 29 | ); |
| 30 | } |
| 31 |