libreria-astro-lefebvre 0.1.91 → 0.1.92

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/carbins/Contenido_2025_Cordoba.ts +18 -2
  3. package/src/carbins/Contenido_2026_Mallorca.ts +4 -2
  4. package/src/components/Astro/Contenido_2025_Cordoba.astro +23 -3
  5. package/src/components/Astro/Contenido_2026_Mallorca.astro +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.1.91",
3
+ "version": "0.1.92",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
package/src/carbins/Contenido_2025_Cordoba.ts CHANGED
@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
4
4
  component_name: 'Contenido_2025_Cordoba',
5
5
  category: 'Contenido de Texto',
6
6
  name: 'Ítem con icono grande de certificación y título configurable 2025',
7
- description: 'Ítem para destacar una certificación, acreditación o hito con un icono grande (5 variantes predefinidas: IA, ISO1, ISO2, GDPR, ISO3), título con etiqueta HTML seleccionable entre h1-h6/span (cada opción con tamaño y alineación distintos) y descripción centrada. Layout flex configurable: horizontal (icono al lado) o vertical (icono encima), con control de alineación vertical entre icono y texto',
7
+ description: 'Ítem para destacar una certificación, acreditación o hito con un icono grande (5 variantes predefinidas: IA, ISO1, ISO2, GDPR, ISO3, o una imagen subida desde Limbo que sustituye al SVG), título con etiqueta HTML seleccionable entre h1-h6/span (cada opción con tamaño y alineación distintos) y descripción centrada. Layout flex configurable: horizontal (icono al lado) o vertical (icono encima), con control de alineación vertical entre icono y texto',
8
8
  framework: 'Astro',
9
9
  priority: 1,
10
10
  tags: ['contenido', 'icono', 'certificacion', 'item'],
@@ -47,12 +47,28 @@ export const metadata: ComponentMetadata = {
47
47
  {
48
48
  name: 'bigIcon',
49
49
  type: 'select',
50
- help: 'Icono grande que se muestra junto al contenido (solo si "Mostrar icono grande" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono',
50
+ help: 'Icono grande que se muestra junto al contenido (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"',
51
51
  label: 'Icono',
52
52
  options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'],
53
53
  options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'],
54
54
  example_value: 'bigIso2'
55
55
  },
56
+ {
57
+ name: 'bigImage',
58
+ type: 'image',
59
+ 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". Se muestra a 66x66 px dentro de la caja blanca de 90x90',
60
+ label: 'Imagen del icono',
61
+ mandatory: false,
62
+ example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png'
63
+ },
64
+ {
65
+ name: 'bigImageAlt',
66
+ type: 'text',
67
+ help: 'Texto alternativo de la "Imagen del icono" para accesibilidad. Solo aplica si se ha subido una imagen',
68
+ label: 'Alt de la imagen del icono',
69
+ mandatory: false,
70
+ example_value: 'Sello de certificación ISO 27001'
71
+ },
56
72
  {
57
73
  name: 'bigIconUrl',
58
74
  type: 'text',
package/src/carbins/Contenido_2026_Mallorca.ts CHANGED
@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
4
4
  component_name: 'Contenido_2026_Mallorca',
5
5
  category: 'Contenido con listas',
6
6
  name: 'Wrapper de ítems con icono grande de certificación y botón CTA 2026',
7
- description: 'Contenedor que itera un listado de bloques tipo certificación/hito: cada ítem combina un icono grande (5 variantes: IA, ISO1, ISO2, GDPR, ISO3) 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',
7
+ description: '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',
8
8
  framework: 'Astro',
9
9
  priority: 1,
10
10
  tags: ['contenido', 'icono', 'boton', 'cta'],
@@ -93,7 +93,9 @@ export const metadata: ComponentMetadata = {
93
93
  { name: 'title', type: 'text', help: 'Título del item. Se renderiza con la etiqueta HTML seleccionada en "Etiqueta del título". No admite HTML', label: 'Título', example_value: 'Certificación ISO 27001' },
94
94
  { name: 'description', type: 'textArea', help: 'Descripción del item. Se muestra debajo del título centrada y como texto plano (no admite HTML)', label: 'Descripción', example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales' },
95
95
  { name: 'showBigIco', type: 'boolean', 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)', label: 'Mostrar icono grande', options: ['false', 'true'], options_labels: ['Falso', 'Verdadero'], example_value: true },
96
- { name: 'bigIcon', type: 'select', 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', label: 'Icono grande', options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'], options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'], example_value: 'bigIso2' },
96
+ { name: 'bigIcon', type: 'select', 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"', label: 'Icono grande', options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'], options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'], example_value: 'bigIso2' },
97
+ { name: 'bigImage', type: 'image', 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', label: 'Imagen del icono', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
98
+ { name: 'bigImageAlt', type: 'text', help: 'Texto alternativo de la "Imagen del icono" para accesibilidad. Solo aplica si se ha subido una imagen', label: 'Alt de la imagen del icono', example_value: 'Sello de certificación ISO 27001' },
97
99
  { name: 'bigIconUrl', type: 'text', 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', label: 'Enlace de descarga del icono', mandatory: false }
98
100
  ]
99
101
  }
package/src/components/Astro/Contenido_2025_Cordoba.astro CHANGED
@@ -1,10 +1,15 @@
1
1
  ---
2
+ import LimboImage from '../LimboImage.astro';
3
+ import { extractImageUrl } from '../../lib/functions.js';
4
+
2
5
  const {
3
6
  title = "",
4
7
  description = "",
5
8
  tipo = "h3",
6
9
  showBigIco = true,
7
10
  bigIcon,
11
+ bigImage = "",
12
+ bigImageAlt = "",
8
13
  bigIconUrl = "",
9
14
  positionFlex = "items-center",
10
15
  flexOrientationIcoText = "flex-row",
@@ -12,6 +17,10 @@ const {
12
17
 
13
18
  const hasIconUrl = bigIconUrl.trim() !== "";
14
19
 
20
+ // Imagen subida desde Limbo. Si viene informada tiene prioridad sobre el SVG de `icons`.
21
+ const bigImageUrl = extractImageUrl(bigImage);
22
+ const hasBigImage = !!bigImageUrl;
23
+
15
24
  const icons = {
16
25
  bigIA: `<svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 90 90" fill="none">
17
26
  <path fill-rule="evenodd" clip-rule="evenodd" d="M34.9743 10.2823C30.0487 10.4208 26.5609 10.7976 23.846 11.4846C17.4799 13.0969 13.4907 17.0832 11.8811 23.4491C10.8533 27.5047 10.5957 31.8345 10.5957 45.0207C10.5957 58.2069 10.8533 62.5368 11.8811 66.5951C12.7842 70.1631 14.5295 73.1328 16.8787 75.108C20.1892 77.8865 24.1369 79.1192 31.2649 79.6012C36.2598 79.9392 54.5797 79.9392 59.5718 79.6012C64.6082 79.2605 67.8799 78.5735 70.5727 77.2881C74.947 75.2021 77.7367 71.5926 79.011 66.368C79.9945 62.3401 80.241 58.0462 80.241 44.9792C80.241 32.0063 79.9917 27.6986 79.011 23.6735C77.4181 17.1497 73.4399 13.1135 66.9907 11.4818C64.1816 10.7699 60.9708 10.4347 55.4856 10.2768C52.358 10.1854 38.2405 10.1909 34.9716 10.2823H34.9743ZM35.2292 15.446C26.1869 15.748 22.4166 16.7009 19.7599 19.3603C17.3414 21.7787 16.3856 25.0143 15.9424 32.2722C15.7928 34.7239 15.7928 55.3204 15.9424 57.772C16.3856 65.0299 17.3414 68.2655 19.7599 70.6839C22.1783 73.1023 25.414 74.058 32.6722 74.5013C35.1239 74.6509 55.7211 74.6509 58.1756 74.5013C65.4338 74.058 68.6695 73.1023 71.088 70.6839C73.5064 68.2655 74.4622 65.0299 74.9054 57.772C75.055 55.3204 75.055 34.7239 74.9054 32.2722C74.4622 25.0143 73.5064 21.7787 71.088 19.3603C68.6972 16.9696 65.564 16.0277 58.4221 15.5513C57.1533 15.4654 37.3236 15.3767 35.232 15.4488L35.2292 15.446Z" fill="#262626"/>
@@ -66,10 +75,21 @@ const iconSvg = icons[bigIcon] ?? "";
66
75
  href={bigIconUrl}
67
76
  download
68
77
  class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0"
69
- set:html={iconSvg}
70
- />
78
+ >
79
+ {hasBigImage ? (
80
+ <LimboImage src={bigImage} alt={bigImageAlt} class="w-full h-full object-contain" width="66" height="66" />
81
+ ) : (
82
+ <Fragment set:html={iconSvg} />
83
+ )}
84
+ </a>
71
85
  ) : (
72
- <div class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0" set:html={iconSvg} />
86
+ <div class="flex justify-center items-center bg-[#ffffff] p-3 w-[90px] h-[90px] shrink-0">
87
+ {hasBigImage ? (
88
+ <LimboImage src={bigImage} alt={bigImageAlt} class="w-full h-full object-contain" width="66" height="66" />
89
+ ) : (
90
+ <Fragment set:html={iconSvg} />
91
+ )}
92
+ </div>
73
93
  )
74
94
  ) : (
75
95
  <div class="w-0 h-0"></div>
package/src/components/Astro/Contenido_2026_Mallorca.astro CHANGED
@@ -29,6 +29,8 @@ const {
29
29
  positionFlex={positionFlex}
30
30
  showBigIco={item.showBigIco}
31
31
  bigIcon={item.bigIcon}
32
+ bigImage={item.bigImage}
33
+ bigImageAlt={item.bigImageAlt}
32
34
  bigIconUrl={item.bigIconUrl}
33
35
  />
34
36
  ))}