David
8386679181
- Added contextual help to various forms including companies, people, departments, sites, assignments, and access accounts. - Introduced EntityHelp component to provide descriptions, examples, and guidance for each entity type. - Updated forms to include help sections before submit buttons, enhancing user understanding of each field's purpose. - Implemented help translations in Spanish and English for consistency across the application. - Created a new ContextHelp component for displaying help information in a structured format. - Added automated tests to ensure help content is correctly rendered in both languages. - Documented the new contextual help feature in ayuda-contextual.md for user reference.
33 lines
891 B
TypeScript
33 lines
891 B
TypeScript
export function ContextHelp({
|
|
title,
|
|
description,
|
|
examples,
|
|
guidance,
|
|
examplesLabel,
|
|
scopeNote,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
examples: string;
|
|
guidance: string;
|
|
examplesLabel: string;
|
|
scopeNote?: string | undefined;
|
|
}) {
|
|
return (
|
|
<aside aria-label={title} className="space-y-2 rounded-lg border bg-muted/40 p-4 text-sm">
|
|
<p className="font-medium">{title}</p>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
{scopeNote && <p>{scopeNote}</p>}
|
|
<details className="group">
|
|
<summary className="cursor-pointer rounded-sm font-medium text-primary focus-visible:outline-2 focus-visible:outline-ring">
|
|
{examplesLabel}
|
|
</summary>
|
|
<div className="mt-2 space-y-2 text-muted-foreground">
|
|
<p>{examples}</p>
|
|
<p>{guidance}</p>
|
|
</div>
|
|
</details>
|
|
</aside>
|
|
);
|
|
}
|