libreria-astro-lefebvre 0.1.99 → 0.1.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/carbins/Contenido_2026_Mallorca.ts +126 -67
- package/src/carbins/Contenido_2026_Tokyo.ts +86 -49
- package/src/carbins/Imagen_2025_Fukushima.ts +40 -30
- package/src/components/Astro/Contenido_2025_Cordoba.astro +2 -0
- package/src/components/Astro/Contenido_2026_Mallorca.astro +1 -0
- package/src/components/Astro/Contenido_2026_Tokyo.astro +1 -0
- package/src/components/Astro/Imagen_2025_Fukushima.astro +2 -1
package/package.json
CHANGED
|
@@ -1,103 +1,162 @@
|
|
|
1
|
-
import type { ComponentMetadata } from
|
|
1
|
+
import type { ComponentMetadata } from "../interfaces/types";
|
|
2
2
|
|
|
3
3
|
export const metadata: ComponentMetadata = {
|
|
4
|
-
component_name:
|
|
5
|
-
category:
|
|
6
|
-
name:
|
|
7
|
-
description:
|
|
8
|
-
|
|
4
|
+
component_name: "Contenido_2026_Mallorca",
|
|
5
|
+
category: "Contenido con listas",
|
|
6
|
+
name: "Wrapper de ítems con icono grande de certificación y botón CTA 2026",
|
|
7
|
+
description:
|
|
8
|
+
"Contenedor que itera un listado de bloques tipo certificación/hito: cada ítem combina un icono grande (5 variantes: IA, ISO1, ISO2, GDPR, ISO3, o una imagen subida desde Limbo que sustituye al SVG) con título de etiqueta HTML configurable y descripción. Ofrece controles de alineación vertical, orientación icono-texto intra-ítem y entre ítems (fila/columna), más un botón CTA opcional al final. Cada ítem se renderiza con Contenido_2025_Cordoba",
|
|
9
|
+
framework: "Astro",
|
|
9
10
|
priority: 1,
|
|
10
|
-
tags: [
|
|
11
|
+
tags: ["contenido", "icono", "boton", "cta"],
|
|
11
12
|
fields: [
|
|
12
|
-
|
|
13
13
|
{
|
|
14
|
-
name:
|
|
15
|
-
type:
|
|
14
|
+
name: "positionFlex",
|
|
15
|
+
type: "select",
|
|
16
16
|
help: 'Alineación vertical del contenedor principal. "Centrado" centra verticalmente los items; "Principio" los alinea arriba',
|
|
17
|
-
label:
|
|
18
|
-
options: [
|
|
19
|
-
options_labels: [
|
|
20
|
-
example_value:
|
|
17
|
+
label: "Posición del item",
|
|
18
|
+
options: ["items-start", "items-center"],
|
|
19
|
+
options_labels: ["Principio", "Centrado"],
|
|
20
|
+
example_value: "items-start",
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
|
-
name:
|
|
24
|
-
type:
|
|
23
|
+
name: "positionBtnFlex",
|
|
24
|
+
type: "select",
|
|
25
25
|
help: 'Alineación horizontal del botón CTA inferior. "Centrado" sitúa el botón en el centro; "Principio" lo alinea a la izquierda. Solo aplica si "Mostrar botón" está activado',
|
|
26
|
-
label:
|
|
27
|
-
options: [
|
|
28
|
-
options_labels: [
|
|
29
|
-
example_value:
|
|
26
|
+
label: "Posición del botón",
|
|
27
|
+
options: ["justify-center", "justify-start"],
|
|
28
|
+
options_labels: ["Centrado", "Principio"],
|
|
29
|
+
example_value: "justify-center",
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
|
-
name:
|
|
33
|
-
type:
|
|
32
|
+
name: "flexOrientationIcoText",
|
|
33
|
+
type: "select",
|
|
34
34
|
help: 'Orientación del icono grande respecto al texto DENTRO de cada item. "Horizontal" coloca el icono al lado del texto; "Vertical" apila el icono encima',
|
|
35
|
-
label:
|
|
36
|
-
options: [
|
|
37
|
-
options_labels: [
|
|
38
|
-
example_value:
|
|
35
|
+
label: "Flex del icono del item",
|
|
36
|
+
options: ["flex-row", "flex-col"],
|
|
37
|
+
options_labels: ["Horizontal", "Vertical"],
|
|
38
|
+
example_value: "flex-row",
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
|
-
name:
|
|
42
|
-
type:
|
|
41
|
+
name: "flexOrientationBlockIcoText",
|
|
42
|
+
type: "select",
|
|
43
43
|
help: 'Orientación del conjunto de items entre sí. "Horizontal" coloca los items en fila (con flex-wrap); "Vertical" los apila en columna',
|
|
44
|
-
label:
|
|
45
|
-
options: [
|
|
46
|
-
options_labels: [
|
|
47
|
-
example_value:
|
|
44
|
+
label: "Flex del item",
|
|
45
|
+
options: ["flex-row", "flex-col"],
|
|
46
|
+
options_labels: ["Horizontal", "Vertical"],
|
|
47
|
+
example_value: "flex-row",
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
|
-
name:
|
|
51
|
-
type:
|
|
50
|
+
name: "headingType",
|
|
51
|
+
type: "select",
|
|
52
52
|
help: 'Etiqueta HTML y estilo del título de cada item. "h1" 56px izquierda, "h2" 40px izquierda, "h3" 2xl semibold izquierda, "h3-center" 2xl semibold centrado, "h4" 2xl semibold izquierda, "h5"/"h6" sin estilos, "span" texto gris sin formato',
|
|
53
|
-
label:
|
|
54
|
-
options: [
|
|
55
|
-
options_labels: [
|
|
56
|
-
|
|
53
|
+
label: "Etiqueta del título",
|
|
54
|
+
options: ["h1", "h2", "h3", "h3-center", "h4", "h5", "h6", "span"],
|
|
55
|
+
options_labels: [
|
|
56
|
+
"H1",
|
|
57
|
+
"H2",
|
|
58
|
+
"H3",
|
|
59
|
+
"H3 centrado",
|
|
60
|
+
"H4",
|
|
61
|
+
"H5",
|
|
62
|
+
"H6",
|
|
63
|
+
"Span",
|
|
64
|
+
],
|
|
65
|
+
example_value: "h2",
|
|
57
66
|
},
|
|
58
67
|
{
|
|
59
|
-
name:
|
|
60
|
-
type:
|
|
68
|
+
name: "btnLabel",
|
|
69
|
+
type: "text",
|
|
61
70
|
help: 'Texto del botón CTA inferior. Solo se muestra si "Mostrar botón" está activado',
|
|
62
|
-
label:
|
|
71
|
+
label: "Label del botón",
|
|
63
72
|
mandatory: false,
|
|
64
|
-
example_value:
|
|
73
|
+
example_value: "Ver todas las certificaciones",
|
|
65
74
|
},
|
|
66
75
|
{
|
|
67
|
-
name:
|
|
68
|
-
type:
|
|
76
|
+
name: "buttonUrl",
|
|
77
|
+
type: "text",
|
|
69
78
|
help: 'URL de destino del botón CTA. ATENCIÓN: si "Mostrar botón" está activado pero esta URL está vacía, el botón se muestra igualmente con un href inválido. Rellena siempre esta URL si activas el botón',
|
|
70
|
-
label:
|
|
79
|
+
label: "Enlace del botón",
|
|
71
80
|
mandatory: false,
|
|
72
|
-
example_value:
|
|
81
|
+
example_value: "/genia-l/certificaciones",
|
|
73
82
|
},
|
|
74
83
|
{
|
|
75
|
-
name:
|
|
76
|
-
type:
|
|
84
|
+
name: "showBtn",
|
|
85
|
+
type: "boolean",
|
|
77
86
|
help: 'Activa o desactiva la visualización del botón CTA inferior. ATENCIÓN: no valida que "Enlace del botón" tenga valor — si activas el botón con URL vacía, el enlace será inválido',
|
|
78
|
-
label:
|
|
87
|
+
label: "Mostrar botón",
|
|
79
88
|
mandatory: false,
|
|
80
|
-
options: [
|
|
81
|
-
options_labels: [
|
|
82
|
-
example_value: true
|
|
89
|
+
options: ["false", "true"],
|
|
90
|
+
options_labels: ["Falso", "Verdadero"],
|
|
91
|
+
example_value: true,
|
|
83
92
|
},
|
|
84
93
|
{
|
|
85
|
-
name:
|
|
86
|
-
type:
|
|
87
|
-
help:
|
|
88
|
-
label:
|
|
94
|
+
name: "items",
|
|
95
|
+
type: "list",
|
|
96
|
+
help: "Listado de items de contenido con icono grande, título y descripción. Cada item se renderiza con el componente Contenido_2025_Cordoba",
|
|
97
|
+
label: "Items de contenido",
|
|
89
98
|
mandatory: false,
|
|
90
99
|
items: {
|
|
91
|
-
type:
|
|
100
|
+
type: "object",
|
|
92
101
|
fields: [
|
|
93
|
-
{
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
{
|
|
103
|
+
name: "title",
|
|
104
|
+
type: "text",
|
|
105
|
+
help: 'Título del item. Se renderiza con la etiqueta HTML seleccionada en "Etiqueta del título". No admite HTML',
|
|
106
|
+
label: "Título",
|
|
107
|
+
example_value: "Certificación ISO 27001",
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
name: "description",
|
|
111
|
+
type: "textArea",
|
|
112
|
+
help: "Descripción del item. Se muestra debajo del título centrada y como texto plano (no admite HTML)",
|
|
113
|
+
label: "Descripción",
|
|
114
|
+
example_value:
|
|
115
|
+
"Gestión de la seguridad de la información conforme a estándares internacionales",
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: "showBigIco",
|
|
119
|
+
type: "boolean",
|
|
120
|
+
help: "Si está activado, muestra el icono grande seleccionado junto al contenido del item. Si está desactivado, NO se muestra icono (el hueco queda vacío)",
|
|
121
|
+
label: "Mostrar icono grande",
|
|
122
|
+
options: ["false", "true"],
|
|
123
|
+
options_labels: ["Falso", "Verdadero"],
|
|
124
|
+
example_value: true,
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: "bigIcon",
|
|
128
|
+
type: "select",
|
|
129
|
+
help: 'Icono grande que se muestra junto al item (solo si "Mostrar icono grande" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono. Se ignora si se rellena "Imagen del icono"',
|
|
130
|
+
label: "Icono grande",
|
|
131
|
+
options: ["bigIA", "bigIso1", "bigIso2", "bigGDPR", "bigIso3"],
|
|
132
|
+
options_labels: ["IA", "Iso1", "Iso2", "GDPR", "Iso3"],
|
|
133
|
+
example_value: "bigIso2",
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: "bigImage",
|
|
137
|
+
type: "image",
|
|
138
|
+
help: 'Imagen subida desde Limbo que sustituye al icono SVG predefinido (solo si "Mostrar icono grande" está activado). Opcional: si se deja vacía se usa el icono seleccionado en "Icono grande". Se muestra a 66x66 px dentro de la caja blanca de 90x90 y usa el "Título" del item como texto alternativo',
|
|
139
|
+
label: "Imagen del icono (Limbo)",
|
|
140
|
+
example_value:
|
|
141
|
+
"https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png",
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
name: "bigIconUrl",
|
|
145
|
+
type: "text",
|
|
146
|
+
help: "URL de descarga del icono. Si se rellena, el icono se convierte en un enlace de descarga (atributo download). Si se deja vacío, el icono se muestra sin enlace. ATENCIÓN: el navegador solo fuerza la descarga si el archivo es del mismo origen",
|
|
147
|
+
label: "Enlace de descarga del icono",
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
name: "newTab",
|
|
151
|
+
type: "boolean",
|
|
152
|
+
help: "Activa o desactiva si quieres abrir el enlace en nueva pestaña o no.",
|
|
153
|
+
label: "Abrir en nueva pestaña",
|
|
154
|
+
options: ["false", "true"],
|
|
155
|
+
options_labels: ["Falso", "Verdadero"],
|
|
156
|
+
example_value: false,
|
|
157
|
+
},
|
|
158
|
+
],
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
],
|
|
103
162
|
};
|
|
@@ -1,79 +1,116 @@
|
|
|
1
|
-
import type { ComponentMetadata } from
|
|
1
|
+
import type { ComponentMetadata } from "../interfaces/types";
|
|
2
2
|
|
|
3
3
|
export const metadata: ComponentMetadata = {
|
|
4
|
-
component_name:
|
|
5
|
-
category:
|
|
6
|
-
name:
|
|
7
|
-
description:
|
|
8
|
-
|
|
4
|
+
component_name: "Contenido_2026_Tokyo",
|
|
5
|
+
category: "Contenido con listas",
|
|
6
|
+
name: "Bloque con imagen de escudo de fondo y grid lateral de logos clicables 2026",
|
|
7
|
+
description:
|
|
8
|
+
"Bloque de contenido con una imagen de escudo como background, título h2, descripción HTML, botón tipo enlace con flecha a la derecha y un grid lateral de logos/imágenes clicables (renderizados con Imagen_2025_Fukushima). El ancho del bloque de texto se adapta automáticamente al número de logos: 1→texto a 2/3, 2→texto a 1/2, 3 o más→texto a 1/3",
|
|
9
|
+
framework: "Astro",
|
|
9
10
|
priority: 1,
|
|
10
|
-
tags: [
|
|
11
|
+
tags: ["contenido", "imagen", "grid", "logos", "cta", "enlace"],
|
|
11
12
|
fields: [
|
|
12
13
|
{
|
|
13
|
-
name:
|
|
14
|
-
type:
|
|
15
|
-
help:
|
|
16
|
-
label:
|
|
14
|
+
name: "title",
|
|
15
|
+
type: "text",
|
|
16
|
+
help: "Título principal del bloque (h2). Se renderiza siempre; si se deja vacío, aparece el h2 vacío. No admite HTML",
|
|
17
|
+
label: "Texto del título",
|
|
17
18
|
mandatory: false,
|
|
18
|
-
example_value:
|
|
19
|
+
example_value: "Plataforma certificada y segura",
|
|
19
20
|
},
|
|
20
21
|
{
|
|
21
|
-
name:
|
|
22
|
-
type:
|
|
23
|
-
help:
|
|
24
|
-
label:
|
|
22
|
+
name: "description",
|
|
23
|
+
type: "text",
|
|
24
|
+
help: "Descripción que aparece debajo del título. Admite HTML. Se renderiza siempre; si se deja vacía, aparece el párrafo vacío",
|
|
25
|
+
label: "Texto de la descripción",
|
|
25
26
|
mandatory: false,
|
|
26
|
-
example_value:
|
|
27
|
+
example_value:
|
|
28
|
+
"GenIA-L cumple con las principales certificaciones de seguridad y protección de datos del sector",
|
|
27
29
|
},
|
|
28
30
|
{
|
|
29
|
-
name:
|
|
30
|
-
type:
|
|
31
|
+
name: "showBtn",
|
|
32
|
+
type: "boolean",
|
|
31
33
|
help: 'Activa o desactiva el botón tipo enlace (texto + flecha). ATENCIÓN: no valida que "Enlace del botón" tenga valor — si activas el botón con URL vacía, el enlace será inválido',
|
|
32
|
-
label:
|
|
34
|
+
label: "Mostrar botón",
|
|
33
35
|
mandatory: false,
|
|
34
|
-
options: [
|
|
35
|
-
options_labels: [
|
|
36
|
-
example_value: true
|
|
36
|
+
options: ["false", "true"],
|
|
37
|
+
options_labels: ["Falso", "Verdadero"],
|
|
38
|
+
example_value: true,
|
|
37
39
|
},
|
|
38
40
|
{
|
|
39
|
-
name:
|
|
40
|
-
type:
|
|
41
|
+
name: "buttonText",
|
|
42
|
+
type: "text",
|
|
41
43
|
help: 'Texto del botón tipo enlace. Aparece seguido de una flecha SVG. Solo se muestra si "Mostrar botón" está activado',
|
|
42
|
-
label:
|
|
44
|
+
label: "Label del botón",
|
|
43
45
|
mandatory: false,
|
|
44
|
-
example_value:
|
|
46
|
+
example_value: "Ver todas las certificaciones",
|
|
45
47
|
},
|
|
46
48
|
{
|
|
47
|
-
name:
|
|
48
|
-
type:
|
|
49
|
+
name: "buttonUrl",
|
|
50
|
+
type: "text",
|
|
49
51
|
help: 'URL de destino del botón. Rellena siempre esta URL si activas "Mostrar botón" (el componente no valida esta dependencia)',
|
|
50
|
-
label:
|
|
52
|
+
label: "Enlace del botón",
|
|
51
53
|
mandatory: false,
|
|
52
|
-
example_value:
|
|
54
|
+
example_value: "/genia-l/certificaciones",
|
|
53
55
|
},
|
|
54
56
|
{
|
|
55
|
-
name:
|
|
56
|
-
type:
|
|
57
|
+
name: "subdirectory",
|
|
58
|
+
type: "text",
|
|
57
59
|
help: 'Ruta base del sitio (p. ej. "/genia-l") que se concatena a la URL de la imagen de fondo del bloque (el escudo). Si se deja vacío, la imagen de fondo se carga desde la raíz del sitio: "/images/genial/ico-shield.webp"',
|
|
58
|
-
label:
|
|
60
|
+
label: "Subdirectorio",
|
|
59
61
|
mandatory: false,
|
|
60
|
-
example_value:
|
|
62
|
+
example_value: "/genia-l",
|
|
61
63
|
},
|
|
62
64
|
{
|
|
63
|
-
name:
|
|
64
|
-
type:
|
|
65
|
-
help:
|
|
66
|
-
label:
|
|
65
|
+
name: "items",
|
|
66
|
+
type: "list",
|
|
67
|
+
help: "Listado de logos/imágenes que se muestran en el grid lateral del bloque. Cada ítem se renderiza con el componente Imagen_2025_Fukushima. El ancho del bloque de texto se adapta automáticamente al número de ítems: 1 ítem → texto a 2/3, 2 ítems → texto a 1/2, 3 o más → texto a 1/3",
|
|
68
|
+
label: "Items del grid",
|
|
67
69
|
mandatory: false,
|
|
68
70
|
items: {
|
|
69
|
-
type:
|
|
71
|
+
type: "object",
|
|
70
72
|
fields: [
|
|
71
|
-
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
73
|
+
{
|
|
74
|
+
name: "link",
|
|
75
|
+
type: "text",
|
|
76
|
+
help: "URL de destino al hacer click en el logo/imagen. Si se deja vacío, la imagen no es clicable",
|
|
77
|
+
label: "Enlace",
|
|
78
|
+
example_value: "/genia-l/certificaciones/iso-27001",
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
name: "newTab",
|
|
82
|
+
type: "boolean",
|
|
83
|
+
help: "Activa o desactiva si quieres abrir el enlace en nueva pestaña o no.",
|
|
84
|
+
label: "Abrir en nueva pestaña",
|
|
85
|
+
options: ["false", "true"],
|
|
86
|
+
options_labels: ["Falso", "Verdadero"],
|
|
87
|
+
example_value: false,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: "image",
|
|
91
|
+
type: "image",
|
|
92
|
+
help: "URL de la imagen/logo del ítem. Si se deja vacía aparece imagen rota",
|
|
93
|
+
label: "Imagen",
|
|
94
|
+
example_value:
|
|
95
|
+
"https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png",
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
name: "altImage",
|
|
99
|
+
type: "text",
|
|
100
|
+
help: "Texto alternativo de la imagen para accesibilidad",
|
|
101
|
+
label: "Alt Imagen",
|
|
102
|
+
example_value: "Logo de certificación ISO 27001",
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
name: "descriptionImage",
|
|
106
|
+
type: "textArea",
|
|
107
|
+
help: "Descripción que aparece debajo de la imagen. Admite HTML",
|
|
108
|
+
label: "Descripción de la imagen",
|
|
109
|
+
example_value:
|
|
110
|
+
"Certificación ISO 27001 de seguridad de la información",
|
|
111
|
+
},
|
|
112
|
+
],
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
};
|
|
@@ -1,45 +1,55 @@
|
|
|
1
|
-
import type { ComponentMetadata } from
|
|
1
|
+
import type { ComponentMetadata } from "../interfaces/types";
|
|
2
2
|
|
|
3
3
|
export const metadata: ComponentMetadata = {
|
|
4
|
-
component_name:
|
|
5
|
-
category:
|
|
6
|
-
name:
|
|
7
|
-
description:
|
|
8
|
-
|
|
4
|
+
component_name: "Imagen_2025_Fukushima",
|
|
5
|
+
category: "Imagen",
|
|
6
|
+
name: "Logo pequeño 80x80 con descripción y enlace opcional 2025",
|
|
7
|
+
description:
|
|
8
|
+
'Bloque compacto con logotipo de 80x80 px (max-w-20) y descripción debajo (14px color gris, admite HTML). Si se rellena el campo "URL de destino", todo el bloque (imagen + texto) se envuelve en un enlace <a> clicable; si se deja vacío, se renderiza como divs separados sin navegación. Diseñado para usarse como unidad dentro de grids de logotipos (p. ej. dentro de Contenido_2026_Tokyo)',
|
|
9
|
+
framework: "Astro",
|
|
9
10
|
priority: 1,
|
|
10
|
-
tags: [
|
|
11
|
-
|
|
11
|
+
tags: ["imagen", "certificado", "logo", "enlace", "compacto"],
|
|
12
|
+
fields: [
|
|
12
13
|
{
|
|
13
|
-
name:
|
|
14
|
-
type:
|
|
15
|
-
help:
|
|
16
|
-
label:
|
|
14
|
+
name: "image",
|
|
15
|
+
type: "image",
|
|
16
|
+
help: "URL de la imagen del logotipo. Se renderiza a 80x80px con max-w-20 (el ancho real se ajusta al contenido). Si se deja vacía aparece imagen rota",
|
|
17
|
+
label: "Imagen del logo",
|
|
17
18
|
mandatory: false,
|
|
18
|
-
example_value:
|
|
19
|
+
example_value: "https://lefebvre.es/genia-l/images/genial/img-iso4.webp",
|
|
19
20
|
},
|
|
20
21
|
{
|
|
21
|
-
name:
|
|
22
|
-
type:
|
|
23
|
-
help:
|
|
24
|
-
label:
|
|
22
|
+
name: "altImage",
|
|
23
|
+
type: "text",
|
|
24
|
+
help: "Texto alternativo del logo para accesibilidad. Si se deja vacío, el atributo alt quedará sin valor",
|
|
25
|
+
label: "Alt del logo",
|
|
25
26
|
mandatory: false,
|
|
26
|
-
example_value:
|
|
27
|
+
example_value: "Logo de certificación ISO 27001",
|
|
27
28
|
},
|
|
28
29
|
{
|
|
29
|
-
name:
|
|
30
|
-
type:
|
|
31
|
-
help:
|
|
32
|
-
label:
|
|
30
|
+
name: "descriptionImage",
|
|
31
|
+
type: "text",
|
|
32
|
+
help: "Texto descriptivo que aparece debajo del logo (tamaño 14px, color gris). Admite HTML. Si se deja vacío, no aparece texto",
|
|
33
|
+
label: "Texto bajo el logo",
|
|
33
34
|
mandatory: false,
|
|
34
|
-
example_value:
|
|
35
|
+
example_value: "ISO 27001 - Seguridad de la información",
|
|
35
36
|
},
|
|
36
37
|
{
|
|
37
|
-
name:
|
|
38
|
-
type:
|
|
39
|
-
help:
|
|
40
|
-
label:
|
|
38
|
+
name: "link",
|
|
39
|
+
type: "text",
|
|
40
|
+
help: "URL de destino al hacer click. ACTIVADO (con URL): todo el bloque (imagen + texto) se envuelve en un <a> y es clicable. DESACTIVADO (vacío): el bloque se renderiza como divs separados sin navegación",
|
|
41
|
+
label: "URL de destino (opcional)",
|
|
41
42
|
mandatory: false,
|
|
42
|
-
example_value:
|
|
43
|
-
}
|
|
44
|
-
|
|
43
|
+
example_value: "/genia-l/certificaciones/iso-27001",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "newTab",
|
|
47
|
+
type: "boolean",
|
|
48
|
+
help: "Activa o desactiva si quieres abrir el enlace en nueva pestaña o no.",
|
|
49
|
+
label: "Abrir en nueva pestaña",
|
|
50
|
+
options: ["false", "true"],
|
|
51
|
+
options_labels: ["Falso", "Verdadero"],
|
|
52
|
+
example_value: false,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
45
55
|
};
|
|
@@ -9,6 +9,7 @@ const {
|
|
|
9
9
|
bigIcon,
|
|
10
10
|
bigImage = "",
|
|
11
11
|
bigIconUrl = "",
|
|
12
|
+
newTab = false,
|
|
12
13
|
positionFlex = "items-center",
|
|
13
14
|
flexOrientationIcoText = "flex-row",
|
|
14
15
|
} = Astro.props;
|
|
@@ -72,6 +73,7 @@ const iconSvg = limboImageUrl
|
|
|
72
73
|
hasIconUrl ? (
|
|
73
74
|
<a
|
|
74
75
|
href={bigIconUrl}
|
|
76
|
+
target={newTab ? "_blank" : "_self"}
|
|
75
77
|
download
|
|
76
78
|
class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0"
|
|
77
79
|
set:html={iconSvg}
|
|
@@ -3,6 +3,7 @@ import { extractImageUrl } from '../../lib/functions.js';
|
|
|
3
3
|
|
|
4
4
|
const {
|
|
5
5
|
link = false,
|
|
6
|
+
newTab = false,
|
|
6
7
|
image,
|
|
7
8
|
altImage,
|
|
8
9
|
descriptionImage
|
|
@@ -16,7 +17,7 @@ const imageUrl = extractImageUrl(image);
|
|
|
16
17
|
<div class="w-full flex flex-col">
|
|
17
18
|
<div class="w-full">
|
|
18
19
|
{(link && link !== '') ? (
|
|
19
|
-
<a href={link} class="w-full flex flex-col flex-1 justify-center items-center">
|
|
20
|
+
<a href={link} target={newTab ? "_blank" : "_self"} class="w-full flex flex-col flex-1 justify-center items-center">
|
|
20
21
|
<img class="max-w-20 w-fit mb-4" src={imageUrl} alt={altImage} width="80" height="80" loading="lazy"/>
|
|
21
22
|
<p class="text-[14px] text-[#363942]" set:html={descriptionImage}></p>
|
|
22
23
|
</a>
|