Terminado sprint 2A
This commit is contained in:
markosbenitez
85
components/widgets/checkbox-group.tsx
Normal file
85
components/widgets/checkbox-group.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
'use client'
|
||||
import type { QuestionOption } from '@/lib/types'
|
||||
|
||||
interface CheckboxGroupProps {
|
||||
name: string
|
||||
legend: string
|
||||
options: QuestionOption[]
|
||||
value: string[]
|
||||
maxSelect: number | null
|
||||
required: boolean
|
||||
onChange: (value: string[]) => void
|
||||
error?: string
|
||||
}
|
||||
|
||||
export function CheckboxGroup({
|
||||
name,
|
||||
legend,
|
||||
options,
|
||||
value,
|
||||
maxSelect,
|
||||
required,
|
||||
onChange,
|
||||
error,
|
||||
}: CheckboxGroupProps) {
|
||||
const atLimit = maxSelect !== null && value.length >= maxSelect
|
||||
|
||||
function toggle(optValue: string) {
|
||||
if (value.includes(optValue)) {
|
||||
onChange(value.filter((v) => v !== optValue))
|
||||
} else if (!atLimit) {
|
||||
onChange([...value, optValue])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<fieldset className="question-fieldset">
|
||||
<legend className="question-legend">
|
||||
{legend}
|
||||
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
||||
{required && <span className="sr-only"> (obligatorio)</span>}
|
||||
</legend>
|
||||
{maxSelect !== null && (
|
||||
<p className="max-select-hint" aria-live="polite">
|
||||
Elegí hasta {maxSelect} opciones
|
||||
{value.length > 0 && ` · ${value.length}/${maxSelect} seleccionadas`}
|
||||
</p>
|
||||
)}
|
||||
<div className="options-list" role="list">
|
||||
{options.map((opt) => {
|
||||
const id = `${name}_${opt.value.replace(/\s+/g, '_')}`
|
||||
const checked = value.includes(opt.value)
|
||||
const disabled = atLimit && !checked
|
||||
|
||||
return (
|
||||
<div key={opt.value} className="option-item" role="listitem">
|
||||
<label
|
||||
className={`option-label${disabled ? ' option-disabled' : ''}`}
|
||||
htmlFor={id}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
name={name}
|
||||
value={opt.value}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={() => toggle(opt.value)}
|
||||
aria-required={required}
|
||||
aria-disabled={disabled}
|
||||
className="option-input"
|
||||
/>
|
||||
<span className="option-text">{opt.label}</span>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="field-error" id={`${name}-error`}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
59
components/widgets/radio-group.tsx
Normal file
59
components/widgets/radio-group.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
'use client'
|
||||
import type { QuestionOption } from '@/lib/types'
|
||||
|
||||
interface RadioGroupProps {
|
||||
name: string
|
||||
legend: string
|
||||
options: QuestionOption[]
|
||||
value: string | undefined
|
||||
required: boolean
|
||||
onChange: (value: string) => void
|
||||
error?: string
|
||||
}
|
||||
|
||||
export function RadioGroup({
|
||||
name,
|
||||
legend,
|
||||
options,
|
||||
value,
|
||||
required,
|
||||
onChange,
|
||||
error,
|
||||
}: RadioGroupProps) {
|
||||
return (
|
||||
<fieldset className="question-fieldset">
|
||||
<legend className="question-legend">
|
||||
{legend}
|
||||
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
||||
{required && <span className="sr-only"> (obligatorio)</span>}
|
||||
</legend>
|
||||
<div className="options-list" role="list">
|
||||
{options.map((opt) => {
|
||||
const id = `${name}_${opt.value.replace(/\s+/g, '_')}`
|
||||
return (
|
||||
<div key={opt.value} className="option-item" role="listitem">
|
||||
<label className="option-label" htmlFor={id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={opt.value}
|
||||
checked={value === opt.value}
|
||||
onChange={() => onChange(opt.value)}
|
||||
aria-required={required}
|
||||
className="option-input"
|
||||
/>
|
||||
<span className="option-text">{opt.label}</span>
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="field-error" id={`${name}-error`}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
71
components/widgets/rating-scale.tsx
Normal file
71
components/widgets/rating-scale.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
'use client'
|
||||
import type { RatingOptions } from '@/lib/types'
|
||||
|
||||
interface RatingScaleProps {
|
||||
name: string
|
||||
legend: string
|
||||
ratingOptions: RatingOptions
|
||||
value: number | undefined
|
||||
required: boolean
|
||||
onChange: (value: number) => void
|
||||
error?: string
|
||||
}
|
||||
|
||||
export function RatingScale({
|
||||
name,
|
||||
legend,
|
||||
ratingOptions,
|
||||
value,
|
||||
required,
|
||||
onChange,
|
||||
error,
|
||||
}: RatingScaleProps) {
|
||||
const { min, max, min_label, max_label } = ratingOptions
|
||||
const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
|
||||
|
||||
return (
|
||||
<fieldset className="question-fieldset">
|
||||
<legend className="question-legend">
|
||||
{legend}
|
||||
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
||||
{required && <span className="sr-only"> (obligatorio)</span>}
|
||||
</legend>
|
||||
<div className="rating-wrapper" role="group" aria-label={`Escala ${min} a ${max}`}>
|
||||
<span className="rating-label rating-label-min" aria-hidden="true">
|
||||
{min_label}
|
||||
</span>
|
||||
<div className="rating-steps">
|
||||
{steps.map((step) => {
|
||||
const id = `${name}_${step}`
|
||||
return (
|
||||
<label key={step} className="rating-step" htmlFor={id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={id}
|
||||
name={name}
|
||||
value={step}
|
||||
checked={value === step}
|
||||
onChange={() => onChange(step)}
|
||||
aria-required={required}
|
||||
aria-label={`${step} — ${step === min ? min_label : step === max ? max_label : ''}`}
|
||||
className="rating-input sr-only"
|
||||
/>
|
||||
<span className="rating-dot" aria-hidden="true">
|
||||
{step}
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<span className="rating-label rating-label-max" aria-hidden="true">
|
||||
{max_label}
|
||||
</span>
|
||||
</div>
|
||||
{error && (
|
||||
<p role="alert" className="field-error" id={`${name}-error`}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</fieldset>
|
||||
)
|
||||
}
|
||||
47
components/widgets/text-area-field.tsx
Normal file
47
components/widgets/text-area-field.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
|
||||
interface TextAreaFieldProps {
|
||||
name: string
|
||||
label: string
|
||||
value: string
|
||||
required: boolean
|
||||
onChange: (value: string) => void
|
||||
error?: string
|
||||
}
|
||||
|
||||
export function TextAreaField({
|
||||
name,
|
||||
label,
|
||||
value,
|
||||
required,
|
||||
onChange,
|
||||
error,
|
||||
}: TextAreaFieldProps) {
|
||||
return (
|
||||
<div className="question-fieldset">
|
||||
<label className="question-legend" htmlFor={name}>
|
||||
{label}
|
||||
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
||||
{required && <span className="sr-only"> (obligatorio)</span>}
|
||||
</label>
|
||||
<textarea
|
||||
id={name}
|
||||
name={name}
|
||||
value={value}
|
||||
rows={4}
|
||||
required={required}
|
||||
aria-required={required}
|
||||
aria-describedby={error ? `${name}-error` : undefined}
|
||||
aria-invalid={!!error}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="text-area"
|
||||
placeholder="Escribí tu respuesta acá (opcional)…"
|
||||
/>
|
||||
{error && (
|
||||
<p role="alert" className="field-error" id={`${name}-error`}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user