react-ecosistema-unp 1.0.1 → 1.0.4

package/README.md

@@ -8,7 +8,7 @@
 La Librería del Ecosistema de Información es una colección de componentes reutilizables y modulares para crear y gestionar el entorno digital de la Unidad Nacional de Protección. Esta librería proporciona componentes para facilitar la integración de diversas funcionalidades dentro de las aplicaciones del ecosistema.
 
 
-### Migración
+#### Migración
 
 Todos los proyectos que utilizan la librería [eco-unp](https://www.npmjs.com/package/eco-unp) deben realizar la migración a [react-ecosistema-unp](https://www.npmjs.com/package/react-ecosistema-unp). Para ello deben seguir los siguientes pasos:
 * Desinstalar eco-unp: ```npm uninstall eco-unp```
@@ -16,18 +16,18 @@ Todos los proyectos que utilizan la librería [eco-unp](https://www.npmjs.com/pa
 * Instalar la última versión de react-ecosistema-unp: ```npm install react-ecosistema-unp@latest```
 * Realizar el cambio en las siguientes importaciones:
 ```tsx
-import { AuthProvider } from 'eco-unp/Utils'; -> import { AuthProvider } from 'react-ecosistema-unp/utils';
-import { UserRoute, ProtectedRoute } from 'eco-unp/Utils'; -> import { ProtectedRoute, UserRoute } from 'react-ecosistema-unp/utils';
+import { AuthProvider } from 'eco-unp/Utils';               -> import { AuthProvider } from 'react-ecosistema-unp/utils';
+import { UserRoute, ProtectedRoute } from 'eco-unp/Utils';  -> import { ProtectedRoute, UserRoute } from 'react-ecosistema-unp/utils';
 
-import { VentanaLienzo } from 'eco-unp/Ui'; -> import { VentanaLienzo } from 'react-ecosistema-unp/shared';
-import { VentanaUsuario } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
-import { TabVentana } from 'eco-unp/Ui'; -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
+import { VentanaLienzo } from 'eco-unp/Ui';                 -> import { VentanaLienzo } from 'react-ecosistema-unp/shared';
+import { VentanaUsuario } from 'eco-unp/Ui';                -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
+import { TabVentana } from 'eco-unp/Ui';                    -> import { VentanaTabs } from 'react-ecosistema-unp/shared';
 
-import { SubtituloForm } from 'eco-unp/Ui'; -> import { Subtitulo } from "react-ecosistema-unp/ui";
+import { SubtituloForm } from 'eco-unp/Ui';                 -> import { Subtitulo } from "react-ecosistema-unp/ui";
 
-import { CardForm } from 'eco-unp/Ui'; -> import { Tarjeta } from 'react-ecosistema-unp/cards';
+import { CardForm } from 'eco-unp/Ui';                      -> import { Tarjeta } from 'react-ecosistema-unp/cards';
 
-import { BootstrapTable } from 'eco-unp/Tables'; -> import { TablaRegistros } from 'react-ecosistema-unp/tables';
+import { BootstrapTable } from 'eco-unp/Tables';            -> import { TablaRegistros } from 'react-ecosistema-unp/tables';
 ```
 
 > El componente Subtitulo cambia el prop subtitulo a subtitle
@@ -44,9 +44,19 @@ npm install react-ecosistema-unp@latest
 ```
 
 
-## Uso
+## Documentación
+
+*En desarrollo*
 
 * [Elementos UI](docs/ui.md)
 * [Tarjetas](docs/cards.md)
 * [Tabla y modal](docs/table.md)
-* [Utilidades](docs/utils.md)
+* [Utilidades](docs/utils.md)
+  
+<br>
+
+* [Accesibilidad](docs/accessibility.md)
+
+<br>
+
+* [Estilos]()

package/dist/assets/Encabezado.css

@@ -1 +1 @@
-.title-container{display:flex;gap:1rem;align-items:center;align-content:center;margin-top:1.75rem;margin-bottom:1.75rem}.logo-subtitle-container{height:100%;display:flex;gap:.66rem;align-items:center}.red-section{height:60px;width:10px;background-color:#d13c47;border-top-right-radius:7px;border-bottom-right-radius:7px}.img-logo{height:52px;object-fit:cover}.title{font-weight:500;font-size:1.55rem;color:#232323}.subtitle{font-size:1.05rem;color:#3f3f3f}.subtitle-container{display:flex;flex-direction:column}
+.title-container{display:flex;gap:1rem;align-items:center;align-content:center}.logo-subtitle-container{height:100%;display:flex;gap:.66rem;align-items:center}.red-section{height:60px;width:10px;background-color:#d13c47;border-top-right-radius:7px;border-bottom-right-radius:7px}.img-logo{height:52px;object-fit:cover}.title{font-weight:500;font-size:1.55rem;color:#232323}.subtitle{font-size:1.05rem;color:#3f3f3f}.subtitle-container{display:flex;flex-direction:column}

package/dist/assets/IconosSistema.css

@@ -1 +1 @@
-.iconos-sistema-container{position:absolute;top:0;right:0;margin-top:6px;display:flex;justify-content:end;gap:1rem}.iconos-sistema-icon{margin-top:.5rem;font-size:25px;color:#303d50;cursor:pointer}
+.iconos-sistema-container{position:absolute;top:0;right:0;margin-top:6px;display:flex;justify-content:end;gap:1rem}.iconos-sistema-icon{margin-top:.5rem;font-size:25px;color:#303d50;cursor:pointer}.icono-sistema-tooltip-container{position:relative;display:inline-block}.icono-sistema-tooltip-text{z-index:9999;visibility:hidden;width:max-content;background-color:#5f6265ef;color:#fff;text-align:center;border-radius:10px;padding:7px 11px;position:absolute;z-index:1000;top:100%;right:0;margin-top:8px;opacity:0;transition:opacity .1s;pointer-events:none;transition:all .1s ease-in-out}.icono-sistema-tooltip-container:hover .icono-sistema-tooltip-text{visibility:visible;opacity:1}

package/dist/assets/Subtitulo.css

@@ -1 +1 @@
-.subtitulo-contenedor-fila{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;margin-bottom:.9rem}.subtitulo-contenedor-icon-subtitle{display:flex;justify-content:start;align-items:center}.subtitulo-icon{font-size:1.25rem;color:#303d50;margin-right:.66rem}.subtitulo-subtitle{font-size:1.1rem;font-weight:700;color:#303d50}
+.subtitulo-contenedor-fila{display:flex;justify-content:space-between;align-items:center}.subtitulo-contenedor-icon-subtitle{display:flex;justify-content:start;align-items:center}.subtitulo-icon{font-size:1.25rem;color:#303d50;margin-right:.66rem}.subtitulo-subtitle{font-size:1.1rem;font-weight:700;color:#303d50}

package/dist/lib/shared/iconos-sistema/IconosSistema.d.ts

@@ -3,6 +3,7 @@ import { IconType } from 'react-icons';
 export interface IconoSistema {
     icon: IconType;
     action: (...args: any[]) => any;
+    label?: string;
 }
 interface IconosSistemaProps {
     elements?: IconoSistema[];

package/dist/lib/ui/encabezado/Encabezado.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 interface EncabezadoProps {
     title?: string;
     subtitle: string;
+    hasMargin?: boolean;
 }
 declare const Encabezado: React.FC<EncabezadoProps>;
 export { Encabezado };

package/dist/lib/ui/subtitulo/Subtitulo.d.ts

@@ -4,6 +4,7 @@ interface SubtituloProps {
     subtitle: string;
     icon?: IconType;
     extraInput?: React.ReactNode;
+    hasMargin?: boolean;
 }
 declare const Subtitulo: React.FC<SubtituloProps>;
 export { Subtitulo };

package/dist/shared/iconos-sistema/IconosSistema.js

@@ -1,16 +1,30 @@
 import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import { N as n } from "../../NotificacionUsuario-xD2pyELE.js";
-import '../../assets/IconosSistema.css';const m = ({ elements: o }) => /* @__PURE__ */ a("div", { className: "iconos-sistema-container", children: [
-  o && o.slice(0, 5).map((s, c) => /* @__PURE__ */ i(
-    s.icon,
+import { N as r } from "../../NotificacionUsuario-xD2pyELE.js";
+import '../../assets/IconosSistema.css';const l = ({ elements: s }) => /* @__PURE__ */ a("div", { className: "iconos-sistema-container", children: [
+  s && s.slice(0, 5).map((o, c) => /* @__PURE__ */ a("div", { className: "icono-sistema-tooltip-container", children: [
+    /* @__PURE__ */ i(
+      o.icon,
+      {
+        className: "iconos-sistema-icon",
+        onClick: o.action
+      },
+      c
+    ),
+    o.label && /* @__PURE__ */ i("span", { className: "icono-sistema-tooltip-text", children: o.label })
+  ] })),
+  s && /* @__PURE__ */ i(
+    "div",
     {
-      className: "iconos-sistema-icon",
-      onClick: s.action
-    },
-    c
-  )),
-  /* @__PURE__ */ i("div", { style: { marginLeft: "1rem" }, children: /* @__PURE__ */ i(n, {}) })
+      style: {
+        border: "1px #ebebeb solid",
+        marginTop: "9px",
+        marginBottom: "2px",
+        borderRadius: "10px"
+      }
+    }
+  ),
+  /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, {}) })
 ] });
 export {
-  m as IconosSistema
+  l as IconosSistema
 };

package/dist/ui/encabezado/Encabezado.js

@@ -1,15 +1,29 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Logo as s } from "../logo/Logo.js";
-import '../../assets/Encabezado.css';const r = ({ title: a = "", subtitle: n = "" }) => /* @__PURE__ */ i("div", { className: "title-container", children: [
-  /* @__PURE__ */ i("div", { className: "logo-subtitle-container", children: [
-    /* @__PURE__ */ e("div", { className: "red-section" }),
-    /* @__PURE__ */ e(s, { type: "entidad", variant: "unp", color: "gris", height: "62" })
-  ] }),
-  /* @__PURE__ */ i("div", { className: "subtitle-container", children: [
-    /* @__PURE__ */ e("span", { className: "title", children: a || "Unidad Nacional de Protección" }),
-    /* @__PURE__ */ e("span", { className: "subtitle", children: n })
-  ] })
-] });
+import { Logo as r } from "../logo/Logo.js";
+import '../../assets/Encabezado.css';const c = ({
+  title: t = "",
+  subtitle: n = "",
+  hasMargin: a = !0
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: "title-container",
+    style: {
+      marginTop: a ? "1.75rem" : "",
+      marginBottom: a ? "1.75rem" : ""
+    },
+    children: [
+      /* @__PURE__ */ i("div", { className: "logo-subtitle-container", children: [
+        /* @__PURE__ */ e("div", { className: "red-section" }),
+        /* @__PURE__ */ e(r, { type: "entidad", variant: "unp", color: "gris", height: "62" })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "subtitle-container", children: [
+        /* @__PURE__ */ e("span", { className: "title", children: t || "Unidad Nacional de Protección" }),
+        /* @__PURE__ */ e("span", { className: "subtitle", children: n })
+      ] })
+    ]
+  }
+);
 export {
-  r as Encabezado
+  c as Encabezado
 };

package/dist/ui/subtitulo/Subtitulo.js

@@ -1,16 +1,27 @@
-import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import '../../assets/Subtitulo.css';const o = ({
-  subtitle: l,
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import '../../assets/Subtitulo.css';const u = ({
+  subtitle: o,
   icon: t,
-  extraInput: e
-}) => /* @__PURE__ */ s("div", { className: "subtitulo-contenedor-fila", children: [
-  /* @__PURE__ */ s("div", { className: "subtitulo-contenedor-icon-subtitle", children: [
-    t && /* @__PURE__ */ i(t, { className: "subtitulo-icon" }),
-    /* @__PURE__ */ i("span", { className: "subtitulo-subtitle", children: l })
-  ] }),
-  e
-] });
-o.displayName = "Subtitulo";
+  extraInput: l,
+  hasMargin: e = !0
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: "subtitulo-contenedor-fila",
+    style: {
+      marginTop: e ? "1.2rem" : "",
+      marginBottom: e ? "0.9rem" : ""
+    },
+    children: [
+      /* @__PURE__ */ i("div", { className: "subtitulo-contenedor-icon-subtitle", children: [
+        t && /* @__PURE__ */ s(t, { className: "subtitulo-icon" }),
+        /* @__PURE__ */ s("span", { className: "subtitulo-subtitle", children: o })
+      ] }),
+      l
+    ]
+  }
+);
+u.displayName = "Subtitulo";
 export {
-  o as Subtitulo
+  u as Subtitulo
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "react-ecosistema-unp",
   "author": "Ecosistema de Información - Unidad Nacional de Protección",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.4",
   "type": "module",
   "exports": {
     ".": {