libreria-astro-lefebvre 0.2.12 → 0.2.14

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "libreria-astro-lefebvre",
3
- "version": "0.2.12",
3
+ "version": "0.2.14",
4
4
  "description": "Librería de componentes Astro, React y Vue para Lefebvre",
5
5
  "author": "Equipo web desarrollo Lefebvre",
6
6
  "type": "module",
@@ -9,6 +9,14 @@ export const metadata: ComponentMetadata = {
9
9
  priority: 1,
10
10
  tags: ['contenido', 'carrusel', 'video', 'imagen', 'cta', 'boton', 'seo'],
11
11
  fields: [
12
+ {
13
+ name: 'tag',
14
+ type: 'text',
15
+ help: 'Etiqueta con punto rojo que aparece encima del título (h2), en mayúsculas. Si se deja vacía, NO se muestra',
16
+ label: 'Etiqueta',
17
+ mandatory: false,
18
+ example_value: 'Casos de uso'
19
+ },
12
20
  {
13
21
  name: 'title',
14
22
  type: 'text',
@@ -61,6 +61,33 @@ export const metadata: ComponentMetadata = {
61
61
  mandatory: false,
62
62
  example_value: "/genia-l",
63
63
  },
64
+ {
65
+ name: "bgColor",
66
+ type: "text",
67
+ help: "Color de fondo del bloque. Acepta nombre CSS o código hex. Si se deja vacío se usa #ebe7da",
68
+ label: "Color de fondo",
69
+ mandatory: false,
70
+ example_value: "#ebe7da",
71
+ },
72
+ {
73
+ name: "showBgImage",
74
+ type: "boolean",
75
+ help: "Activa o desactiva la imagen de fondo del bloque. Si está desactivada solo se ve el color de fondo",
76
+ label: "Mostrar imagen de fondo",
77
+ mandatory: false,
78
+ options: ["false", "true"],
79
+ options_labels: ["Falso", "Verdadero"],
80
+ example_value: true,
81
+ },
82
+ {
83
+ name: "bgImage",
84
+ type: "image",
85
+ help: 'Imagen de fondo del bloque. Solo se usa si "Mostrar imagen de fondo" está activado. Si se deja vacía se usa el escudo por defecto (/images/genial/ico-shield.webp)',
86
+ label: "Imagen de fondo",
87
+ mandatory: false,
88
+ example_value:
89
+ "https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png",
90
+ },
64
91
  {
65
92
  name: "items",
66
93
  type: "list",
@@ -11,7 +11,7 @@ const {
11
11
  ---
12
12
  <a
13
13
  href={buttonUrl}
14
- class="text-base leading-6 font-semibold font-body inline-block mt-6 p-3 px-5 h-12 rounded-xl transition-colors duration-300 border border-solid w-fit"
14
+ class="text-base leading-6 font-semibold font-body inline-block mt-6 p-3 px-5 h-12 rounded-full transition-colors duration-300 border border-solid w-fit"
15
15
  style={`border-color: ${borderColor}; background-color: ${backColor}; color: ${frontColor};`}
16
16
  onmouseover={`this.style.backgroundColor='${frontColor}'; this.style.color='${backColor}';`}
17
17
  onmouseout={`this.style.backgroundColor='${backColor}'; this.style.color='${frontColor}';`}
@@ -25,8 +25,7 @@ const randomId = Math.floor(Math.random() * 1000);
25
25
  <div class="w-full md:w-1/2 flex flex-col">
26
26
  {tag && (
27
27
  <span class="self-start inline-flex items-center gap-2 py-2 px-3 mb-8 rounded bg-black/[0.04] text-center font-mono text-sm font-normal leading-5 tracking-[0.84px] uppercase text-[#403830]"><span class="size-1.5 rounded-full bg-[#d71635]" aria-hidden="true"></span>{tag}</span>
28
- )}
29
-
28
+ )}
30
29
  {title && (
31
30
  <h2 class="font-heading text-[#1b1b1b] text-left text-[28px] leading-9 md:text-[32px] md:leading-10 not-italic font-normal mb-8" set:html={title}></h2>
32
31
  )}
@@ -37,7 +36,7 @@ const randomId = Math.floor(Math.random() * 1000);
37
36
  <div class="text-[#1b1b1b]/90 font-body text-base not-italic font-normal leading-6 flex flex-col gap-4 listIco" set:html={text} />
38
37
  )}
39
38
  {textBtn && linkBtn && (
40
- <a href={linkBtn} target="_self" class="flex flex-col justify-center items-center w-fit h-12 min-w-[120px] px-5 mt-6 rounded-lg bg-[#d71635] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] text-white font-body font-semibold text-sm md:text-base transition-all duration-300 hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))]">{textBtn}</a>
39
+ <a href={linkBtn} target="_self" class="flex flex-col justify-center items-center w-fit h-12 min-w-[120px] px-5 mt-6 rounded-xl bg-[rgba(27,27,27,0.90)] shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] text-white font-body font-semibold text-sm md:text-base transition-all duration-300 hover:bg-[linear-gradient(rgba(255,255,255,0.10),rgba(255,255,255,0.10))]">{textBtn}</a>
41
40
  )}
42
41
  </div>
43
42
 
@@ -16,7 +16,7 @@ const imageUrl = extractImageUrl(image);
16
16
  ---
17
17
 
18
18
  <div class="w-full flex flex-col px-0">
19
- <article class="relative w-full md:max-w-[400px] h-full flex flex-col rounded-lg border border-[#e1c8b4] items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-px">
19
+ <article class="relative w-full md:max-w-[400px] h-full flex flex-col rounded-lg border border-[#e1c8b4] bg-white items-center shadow-article hover:bg-[#d71635] transition-all duration-300 p-px">
20
20
  <div class="w-full bg-white mt-px rounded-tl-[7px] rounded-tr-[7px] h-full">
21
21
  <div class="w-full">
22
22
  <img class="cursor-pointer rounded-tr-lg rounded-tl-lg mx-auto w-full" src={imageUrl} alt={altImage} width="400" height="225" loading="lazy" />
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  const {
3
+ tag,
3
4
  title,
4
5
  description,
5
6
  buttonText,
@@ -10,7 +11,10 @@ const {
10
11
 
11
12
  import Contenido_2026_Orcasitas from './Contenido_2026_Orcasitas.astro';
12
13
  ---
13
- <article class="w-full flex flex-col text-center items-center justify-center p-12 pb-4 bg-[#ffffff] rounded-2xl">
14
+ <article class="w-full flex flex-col text-center items-center justify-center p-12 pb-4 bg-transparent rounded-2xl">
15
+ {tag && (
16
+ <span class="inline-flex items-center gap-2 py-2 px-3 mb-6 rounded bg-black/[0.04] text-center font-mono text-sm font-normal leading-5 tracking-[0.84px] uppercase text-[#403830] [font-feature-settings:'liga'_off,'clig'_off]"><span class="size-1.5 rounded-full bg-[#d71635]" aria-hidden="true"></span>{tag}</span>
17
+ )}
14
18
  <h2 class="text-[36px] md:text-[40px] font-heading leading-[44px] md:leading-[48px] mb-[23px] text-[#1b1b1b] font-normal not-italic">{title}</h2>
15
19
  <div class="max-w-[900px] text-[#403830] font-body font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8">
16
20
  <p class="font-body md:font-heading text-lg leading-7 md:text-xl md:leading-7" set:html={description}></p>
@@ -43,6 +43,7 @@ const imageSkyscraper = crops['skyscraper'] || ''; // Disponible para uso en el
43
43
  const imageUrl = imageBase || extractImageUrl(image);
44
44
  ---
45
45
 
46
+ <div class="w-full py-16 bg-[#F2EEE1]">
46
47
  <section class="w-full max-w-[1200px] mx-auto flex items-center justify-center px-8 md:px-0">
47
48
  {showImage ? (
48
49
  <article class={`w-full flex flex-col items-center justify-center py-6`}>
@@ -169,7 +170,8 @@ const imageUrl = imageBase || extractImageUrl(image);
169
170
  </article>
170
171
  )}
171
172
  </section>
172
-
173
+ </div>
174
+
173
175
  <div id={`teruel-popup-modal-${randomId}`} class="fixed w-full h-full pt-12 top-0 left-0 z-9999 hidden bg-[#ebe7da]/60 backdrop-blur-sm flex items-center justify-center">
174
176
  <div class="flex flex-col w-full md:w-4/5 max-w-[1000px] max-h-[calc(100vh-96px)] m-auto p-4 rounded-2xl bg-white shadow-lg border border-[#e1c8b4] overflow-y-auto modal-guia">
175
177
  <div class="w-full flex justify-end">
@@ -1,5 +1,6 @@
1
1
  ---
2
2
  import Imagen_2025_Fukushima from './Imagen_2025_Fukushima.astro';
3
+ import { extractImageUrl } from '../../lib/functions.js';
3
4
 
4
5
  const {
5
6
  title,
@@ -8,11 +9,16 @@ const {
8
9
  buttonUrl,
9
10
  showBtn,
10
11
  items,
11
- subdirectory = ''
12
+ subdirectory = '',
13
+ bgColor = '#ebe7da',
14
+ showBgImage = true,
15
+ bgImage = ''
12
16
  } = Astro.props;
13
17
 
18
+ // Sin imagen propia se mantiene el escudo por defecto
19
+ const bgImageUrl = extractImageUrl(bgImage) || `${subdirectory}/images/genial/ico-shield.webp`;
14
20
  ---
15
- <article class="w-full max-w-7xl flex flex-col md:flex-row text-center items-center justify-center p-6 md:p-12 bg-cover bg-[#ebe7da] bg-no-repeat bg-position-[center_center] md:bg-auto md:bg-position-[-60px_center] rounded-2xl" style={`background-image: url(${subdirectory}/images/genial/ico-shield.webp)`}>
21
+ <article class="w-full max-w-7xl flex flex-col md:flex-row text-center items-center justify-center p-6 md:p-12 bg-cover bg-no-repeat bg-position-[center_center] md:bg-auto md:bg-position-[-60px_center] rounded-2xl" style={`background-color: ${bgColor || '#ebe7da'};${showBgImage ? ` background-image: url(${bgImageUrl})` : ''}`}>
16
22
  <div class={`w-full ${items.length === 1 ? 'md:w-2/3' : items.length === 2 ? 'md:w-1/2' : 'md:w-1/3'} flex flex-col text-left p-0 mb-4 md:pl-[140px]`}>
17
23
  <h2 class="text-[28px] leading-9 md:text-[32px] md:leading-10 mb-4 font-heading text-[#1b1b1b] font-normal">{title}</h2>
18
24
  <div class="max-w-[900px] text-[#403830] font-body font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8">