jacobh2
425e29ea21
New components (all with .tsx + .test.tsx, 90%+ coverage): - CalendarDay: day cell with event badges - CalendarEvent: colored event chip with dismiss option - DaysBreakdown: table of days by type - ProgressChart: progress bar toward age-4 deadline - TipCard: optimization tip card with severity badges - VacationDaysInput: number input with min/max validation - ParentProfileInput: dual selects for salary type & employment status - PlanningGoalSelector: radio buttons for planning goal - BreakPeriodsInput: list manager with inline add/edit form All components follow existing patterns from Header/Footer: - Typed props interfaces (exported) - Semantic HTML with data-testid & ARIA attributes - No business logic, purely presentational - Comprehensive test coverage including edge cases npm test: 22 files, 167 tests passing npx tsc --noEmit: clean Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { ReactNode } from 'react'
|
|
|
|
export interface ParentProfileInputProps {
|
|
parent: {
|
|
salaryType?: string
|
|
employmentStatus?: string
|
|
}
|
|
onChange: (field: string, val: string) => void
|
|
}
|
|
|
|
export function ParentProfileInput({
|
|
parent,
|
|
onChange,
|
|
}: ParentProfileInputProps): ReactNode {
|
|
return (
|
|
<div data-testid="parent-profile-input" className="parent-profile-input">
|
|
<div className="parent-profile-input__field">
|
|
<label htmlFor="salary-type" className="parent-profile-input__label">
|
|
Salary Type
|
|
</label>
|
|
<select
|
|
id="salary-type"
|
|
value={parent.salaryType || ''}
|
|
onChange={(e) => onChange('salaryType', e.target.value)}
|
|
data-testid="salary-type"
|
|
className="parent-profile-input__select"
|
|
>
|
|
<option value="">Choose salary type</option>
|
|
<option value="monthly">Monthly</option>
|
|
<option value="hourly">Hourly</option>
|
|
<option value="self_employed">Self Employed</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="parent-profile-input__field">
|
|
<label htmlFor="employment-status" className="parent-profile-input__label">
|
|
Employment Status
|
|
</label>
|
|
<select
|
|
id="employment-status"
|
|
value={parent.employmentStatus || ''}
|
|
onChange={(e) => onChange('employmentStatus', e.target.value)}
|
|
data-testid="employment-status"
|
|
className="parent-profile-input__select"
|
|
>
|
|
<option value="">Choose employment status</option>
|
|
<option value="employed">Employed</option>
|
|
<option value="self_employed">Self Employed</option>
|
|
<option value="parental_leave">On Parental Leave</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|