Añadir estilos de enlace comunes y mejorar la navegación en componentes de la aplicación

2026-10-09 21:32:41 +02:00 · 2026-10-09 21:32:41 +02:00 · 4c2aa11c03
commit 4c2aa11c03
parent d7eb91ee68
27 changed files with 70 additions and 32 deletions
--- a/apps/web/src/global.css
+++ b/apps/web/src/global.css
@ -58,3 +58,28 @@
  --spacing-shell-avatar: 35px;
  --shadow-shell-popover: 0 3px 12px rgb(12 40 80 / 8%);
 }
+
+/* Enlaces de contenido y controles que navegan: criterio común en toda la aplicación. */
+@layer components {
+  .app-link {
+    color: var(--primary);
+    cursor: pointer;
+    text-underline-offset: 4px;
+  }
+
+  .app-link:hover {
+    text-decoration-line: underline;
+  }
+
+  .app-link:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 3px;
+  }
+
+  .app-link:disabled,
+  .app-link[data-disabled],
+  .app-link[aria-disabled="true"] {
+    cursor: default;
+    text-decoration-line: none;
+  }
+}
--- a/docs/componentes-de-interfaz.md
+++ b/docs/componentes-de-interfaz.md
@ -309,3 +309,9 @@ Las secciones de consulta evitan recuadros anidados y rellenos laterales: usan t
 `DetailSection` ofrece agrupación plegable nativa (`details/summary`), abierta inicialmente, accesible por teclado. `DetailField` devuelve una fila semántica `dt/dd` para incluir en un `dl`: etiqueta y valor se alinean horizontalmente cuando el contenedor dispone de al menos 240 px y se apilan en espacios menores. El consumidor aporta los enlaces; el componente común les aplica cursor de enlace, color semántico y subrayado al pasar el puntero. Los valores ausentes permanecen como texto.

 La ficha lateral de activos utiliza un ancho adaptable entre 320 y 400 px, acciones debajo del título y bloques de identificación, ubicación/asignación, características, observaciones, relaciones y asistencia. Conserva las secciones capturadas de la plantilla, incluyendo la compatibilidad con especificaciones antiguas sin agrupación; no modifica valores ni instantáneas. Las relaciones llevan a destinos existentes: persona y activo relacionado a su ficha; sede, puesto y plantilla a sus listados/catálogos actuales. La vista completa e historial mantienen sus funciones. Las fichas de recursos reutilizan las filas de características. No se crean nuevas fichas laterales ni nuevas rutas.
+
+## Enlaces y controles de navegación
+
+Los enlaces de contenido usan `app-link`: color semántico `primary`, cursor de mano, subrayado al pasar el puntero y foco visible por teclado. `BrowserLink` lo incorpora de forma predeterminada, conservando la navegación interna, los clics modificados, destinos externos y descargas. Los botones que presentan nombres navegables o «Ver todos» comparten este estilo sin alterar sus callbacks. Los controles deshabilitados no muestran cursor de enlace ni subrayado. La navegación lateral y los enlaces presentados como botones conservan los colores de su contexto para mantener contraste; las acciones de guardar, editar o cancelar mantienen su presentación de botón.
+
+En el menú de secciones de una compañía, los elementos utilizan el color normal de texto y solo destacan su texto al pasar el puntero. Se mantienen el cursor de mano, el foco por teclado y el indicador de la sección actual. Esta excepción no afecta a enlaces dentro de listados, fichas o bloques del dashboard.
--- a/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx
+++ b/modules/assets/src/web/asset-relationships/list/ui/asset-relationships.tsx
@ -22,7 +22,7 @@ export function AssetRelationships(props: AssetRelationshipsProps) {
        <p className="font-medium">
          {source ? link.values.name : link.values.inverseName} ·{" "}
          <BrowserLink
-            className="cursor-pointer text-primary underline-offset-4 hover:underline"
+            className="cursor-pointer text-primary underline-offset-4 app-link text-primary hover:text-primary"
            href={`/companies/${companyId}/assets/${source ? link.values.targetId : link.values.sourceId}`}
          >
            {nameOf(source ? link.values.targetId : link.values.sourceId)}
--- a/modules/assets/src/web/assets/list/ui/inventory-page.tsx
+++ b/modules/assets/src/web/assets/list/ui/inventory-page.tsx
@ -100,7 +100,7 @@ export function AssetInventoryPage(props: AssetInventoryPageProps) {
                render: (asset) => (
                  <BrowserLink
                    aria-pressed={selected?.id === asset.id && detailOpen}
-                    className="cursor-pointer text-left font-medium [overflow-wrap:anywhere] hover:underline focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-4 focus-visible:outline-ring"
+                    className="cursor-pointer text-left font-medium [overflow-wrap:anywhere] app-link text-primary hover:text-primary focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-4 focus-visible:outline-ring"
                    href={entityHref(asset.id)}
                    onClick={() => setDetailOpen(true)}
                  >
--- a/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx
+++ b/modules/assets/src/web/catalog/shared/ui/catalog-name.tsx
@ -21,7 +21,7 @@ export function CatalogName({
  return (
    <>
      <button
-        className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+        className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
        onClick={onView}
        type="button"
      >
--- a/modules/assets/src/web/workstations/list/ui/workstations-page.tsx
+++ b/modules/assets/src/web/workstations/list/ui/workstations-page.tsx
@ -68,7 +68,7 @@ export function WorkstationsPage(props: WorkstationsPageProps) {
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/application-configurations/list/ui/application-configurations-page.tsx
+++ b/modules/companies/src/web/application-configurations/list/ui/application-configurations-page.tsx
@ -80,7 +80,7 @@ export function ApplicationConfigurationsPage(props: ApplicationConfigurationsPa
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/certificate-configurations/list/ui/certificate-configurations-page.tsx
+++ b/modules/companies/src/web/certificate-configurations/list/ui/certificate-configurations-page.tsx
@ -80,7 +80,7 @@ export function CertificateConfigurationsPage(props: CertificateConfigurationsPa
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/companies/detail/ui/company-detail.tsx
+++ b/modules/companies/src/web/companies/detail/ui/company-detail.tsx
@ -158,8 +158,8 @@ export function CompanyDetail(props: CompanyDetailProps) {
                    aria-pressed={tab === section}
                    className={
                      embedded
-                        ? "h-auto min-h-10 w-full justify-start whitespace-normal text-left text-[13px] leading-[1.4285714286] aria-pressed:bg-accent aria-pressed:hover:bg-accent dark:aria-pressed:hover:bg-accent aria-pressed:text-accent-foreground shell:text-sm"
-                        : undefined
+                        ? "cursor-pointer text-foreground hover:text-primary h-auto min-h-10 w-full justify-start whitespace-normal text-left text-[13px] leading-[1.4285714286] aria-pressed:bg-accent aria-pressed:hover:bg-accent dark:aria-pressed:hover:bg-accent aria-pressed:text-accent-foreground shell:text-sm"
+                        : "cursor-pointer text-foreground hover:text-primary"
                    }
                    {...(props.onSectionChange
                      ? {
--- a/modules/companies/src/web/companies/list/ui/companies-page.tsx
+++ b/modules/companies/src/web/companies/list/ui/companies-page.tsx
@ -85,7 +85,7 @@ export function CompaniesPage(props: CompaniesPageProps) {
              hideable: false,
              render: (company) => (
                <BrowserLink
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  href={companySectionHref(company.id, "overview")}
                >
                  <CompanyIdentity
--- a/modules/companies/src/web/dashboard/shared/ui/dashboard-navigation-button.tsx
+++ b/modules/companies/src/web/dashboard/shared/ui/dashboard-navigation-button.tsx
@ -9,7 +9,7 @@ export function DashboardNavigationButton({
    <button
      {...props}
      className={cn(
-        "text-left font-semibold text-primary hover:underline focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-3 focus-visible:outline-ring",
+        "text-left font-semibold app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-3 focus-visible:outline-ring",
        className
      )}
      type="button"
--- a/modules/companies/src/web/dashboard/shared/ui/dashboard-panel.tsx
+++ b/modules/companies/src/web/dashboard/shared/ui/dashboard-panel.tsx
@ -30,7 +30,12 @@ export function DashboardPanel({
          {title}
        </h2>
        {action && (
-          <Button className="text-primary shrink-0" onClick={action} size="sm" variant="ghost">
+          <Button
+            className="app-link text-primary hover:text-primary shrink-0"
+            onClick={action}
+            size="sm"
+            variant="ghost"
+          >
            {t("dashboard.viewAll")}
            <ChevronRightIcon aria-hidden="true" className="size-4" />
          </Button>
--- a/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx
+++ b/modules/companies/src/web/folder-mappings/list/ui/folder-mappings-page.tsx
@ -73,7 +73,7 @@ export function FolderMappingsPage(props: FolderMappingsPageProps) {
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/interventions/list/ui/interventions-page.tsx
+++ b/modules/companies/src/web/interventions/list/ui/interventions-page.tsx
@ -84,7 +84,7 @@ export function InterventionsPage(props: InterventionsPageProps) {
            hideable: false,
            render: (intervention) => (
              <BrowserLink
-                className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                href={`/companies/${intervention.companyId}/interventions/${intervention.id}`}
              >
                {intervention.reference}
@ -98,7 +98,7 @@ export function InterventionsPage(props: InterventionsPageProps) {
            hideable: false,
            render: (intervention) => (
              <BrowserLink
-                className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                href={`/companies/${intervention.companyId}/interventions/${intervention.id}`}
              >
                {intervention.values.subject}
--- a/modules/companies/src/web/mail-configurations/list/ui/mail-configurations-page.tsx
+++ b/modules/companies/src/web/mail-configurations/list/ui/mail-configurations-page.tsx
@ -79,7 +79,7 @@ export function MailConfigurationsPage(props: MailConfigurationsPageProps) {
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/people/list/ui/people-section.tsx
+++ b/modules/companies/src/web/people/list/ui/people-section.tsx
@ -104,7 +104,7 @@ export function PeopleSection({
            render: (person) => (
              <>
                <BrowserLink
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  href={entityHref(person.id)}
                >
                  {person.name}
--- a/modules/companies/src/web/printer-configurations/list/ui/printer-configurations-page.tsx
+++ b/modules/companies/src/web/printer-configurations/list/ui/printer-configurations-page.tsx
@ -74,7 +74,7 @@ export function PrinterConfigurationsPage(props: PrinterConfigurationsPageProps)
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/processes/list/ui/processes-page.tsx
+++ b/modules/companies/src/web/processes/list/ui/processes-page.tsx
@ -96,7 +96,7 @@ export function ProcessesPage(props: ProcessesPageProps) {
                    hideable: false,
                    render: (p) => (
                      <BrowserLink
-                        className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                        className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                        href={`/companies/${company.id}/processes/${p.id}`}
                      >
                        {p.values.name}
--- a/modules/companies/src/web/remote-connections/list/ui/remote-connections-page.tsx
+++ b/modules/companies/src/web/remote-connections/list/ui/remote-connections-page.tsx
@ -77,7 +77,7 @@ export function RemoteConnectionsPage(props: RemoteConnectionsPageProps) {
              hideable: false,
              render: (c) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(c.id)}
                  type="button"
                >
--- a/modules/companies/src/web/telework-authorizations/list/ui/telework-authorizations-page.tsx
+++ b/modules/companies/src/web/telework-authorizations/list/ui/telework-authorizations-page.tsx
@ -77,7 +77,7 @@ export function TeleworkAuthorizationsPage(props: TeleworkAuthorizationsPageProp
              hideable: false,
              render: (item) => (
                <button
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  onClick={() => setView(item.id)}
                  type="button"
                >
--- a/modules/companies/src/web/tickets/list/ui/tickets-page.tsx
+++ b/modules/companies/src/web/tickets/list/ui/tickets-page.tsx
@ -87,7 +87,7 @@ export function TicketsPage(props: TicketsPageProps) {
            hideable: false,
            render: (ticket) => (
              <BrowserLink
-                className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                href={`/companies/${ticket.companyId}/tickets/${ticket.id}`}
              >
                {ticket.reference}
@ -101,7 +101,7 @@ export function TicketsPage(props: TicketsPageProps) {
            hideable: false,
            render: (ticket) => (
              <BrowserLink
-                className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                href={`/companies/${ticket.companyId}/tickets/${ticket.id}`}
              >
                {ticket.values.subject}
--- a/modules/companies/src/web/work-profiles/list/ui/work-profiles-page.tsx
+++ b/modules/companies/src/web/work-profiles/list/ui/work-profiles-page.tsx
@ -98,7 +98,7 @@ export function WorkProfilesPage(props: WorkProfilesPageProps) {
              hideable: false,
              render: (item) => (
                <BrowserLink
-                  className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                  className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                  href={`/companies/${company.id}/work-profiles/${item.id}`}
                >
                  {item.values.name}
--- a/modules/companies/src/web/workspace/shared/ui/route-feedback.tsx
+++ b/modules/companies/src/web/workspace/shared/ui/route-feedback.tsx
@ -9,9 +9,7 @@ export function RouteFeedback({ invalid = false }: { invalid?: boolean }) {
        {t(invalid ? "navigation.invalidRoute" : "navigation.notFound")}
      </h1>
      <p className="text-muted-foreground">{t("navigation.routeHelp")}</p>
-      <BrowserLink className="text-primary underline underline-offset-4" href="/dashboard">
-        {t("dashboard.title")}
-      </BrowserLink>
+      <BrowserLink href="/dashboard">{t("dashboard.title")}</BrowserLink>
    </section>
  );
 }
--- a/modules/core/src/web/navigation/shared/ui/browser-link.tsx
+++ b/modules/core/src/web/navigation/shared/ui/browser-link.tsx
@ -2,10 +2,16 @@ import type { ComponentProps } from "react";

 import { isInternalPath, navigateTo } from "../helpers/browser-navigation";

-export function BrowserLink({ href, onClick, ...props }: ComponentProps<"a"> & { href: string }) {
+export function BrowserLink({
+  href,
+  onClick,
+  className,
+  ...props
+}: ComponentProps<"a"> & { href: string }) {
  return (
    <a
      {...props}
+      className={`app-link ${className ?? ""}`}
      href={href}
      onClick={(event) => {
        onClick?.(event);
--- a/modules/identity/src/web/workspace/view/ui/custom-workspace.tsx
+++ b/modules/identity/src/web/workspace/view/ui/custom-workspace.tsx
@ -33,9 +33,7 @@ export function CustomWorkspace({
    return (
      <section className="space-y-4 p-6" role="alert">
        <p>{t("errors.FORBIDDEN")}</p>
-        <BrowserLink className="underline" href="/dashboard">
-          {t("workspace")}
-        </BrowserLink>
+        <BrowserLink href="/dashboard">{t("workspace")}</BrowserLink>
      </section>
    );
  }
--- a/modules/resources/src/web/catalog/shared/ui/catalog-name.tsx
+++ b/modules/resources/src/web/catalog/shared/ui/catalog-name.tsx
@ -21,7 +21,7 @@ export function CatalogName({
  return (
    <>
      <button
-        className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+        className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
        onClick={onView}
        type="button"
      >
--- a/modules/resources/src/web/resources/list/ui/resources-page.tsx
+++ b/modules/resources/src/web/resources/list/ui/resources-page.tsx
@ -72,7 +72,7 @@ export function ResourcesPage(props: ResourcesPageProps) {
            hideable: false,
            render: (item) => (
              <BrowserLink
-                className="font-medium text-left underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+                className="font-medium text-left underline-offset-4 app-link text-primary hover:text-primary focus-visible:outline-2 focus-visible:outline-ring"
                href={entityHref(item.id)}
              >
                {item.values.name}