David
f6c6b8c95c
- Updated TeleworkAuthorizationForm, WorkProfileForm, PasswordForm, CredentialForm, UserForm, and various resource-related forms to use FormLabel instead of Label. - Introduced FormLabel component to encapsulate required indicator logic. - Removed optional labels from localization files and adjusted tests accordingly. - Ensured accessibility and consistency across forms by implementing required indicators visually.
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { RequiredIndicator } from "./required-indicator";
|
|
|
|
/** Fila de consulta compacta; los textos y reglas pertenecen al catálogo consumidor. */
|
|
export function TemplateFieldSummary({
|
|
name,
|
|
metadata,
|
|
requiredLabel,
|
|
notice,
|
|
}: {
|
|
name: string;
|
|
metadata: string;
|
|
requiredLabel?: string | undefined;
|
|
notice?: string | undefined;
|
|
}) {
|
|
return (
|
|
<div className="grid grid-cols-1 items-baseline gap-x-3 gap-y-0.5 py-2 text-sm @min-[420px]:grid-cols-[minmax(0,1fr)_minmax(100px,0.8fr)]">
|
|
<span className="min-w-0 font-medium [overflow-wrap:anywhere]">
|
|
{name}
|
|
{requiredLabel && (
|
|
<>
|
|
{" "}
|
|
<RequiredIndicator />
|
|
<span className="sr-only"> {requiredLabel}</span>
|
|
</>
|
|
)}
|
|
</span>
|
|
<span className="col-start-1 row-start-2 text-xs text-muted-foreground @min-[420px]:col-start-2 @min-[420px]:row-start-1">
|
|
{metadata}
|
|
</span>
|
|
{notice && <p className="col-span-full text-xs text-muted-foreground">{notice}</p>}
|
|
</div>
|
|
);
|
|
}
|