libreria-astro-lefebvre 0.1.55 → 0.1.57
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_2025_Granada.ts +3 -3
- package/src/carbins/Tabla_2026_Cadiz.ts +12 -2
- package/src/components/Astro/Contenido_2025_Granada.astro +1 -0
- package/src/components/Astro/FAQ_2025_Hiroshima.astro +16 -7
- package/src/components/Astro/Tabla_2026_Cadiz.astro +5 -1
package/package.json
CHANGED
|
@@ -28,10 +28,10 @@ export const metadata: ComponentMetadata = {
|
|
|
28
28
|
{
|
|
29
29
|
name: 'tipo',
|
|
30
30
|
type: 'select',
|
|
31
|
-
help: 'Etiqueta HTML y tamaño del título. "h1" 56px izquierda, "h2" 40px izquierda, "h3"/"h4" 2xl semibold izquierda, "h4-20" 20px regular centrado, "h5"/"h6" sin estilos, "span" texto gris sin formato',
|
|
31
|
+
help: 'Etiqueta HTML y tamaño del título. "h1" 56px izquierda, "h2" 40px izquierda, "h3"/"h4" 2xl semibold izquierda, "h3-20"/"h4-20" 20px regular centrado, "h5"/"h6" sin estilos, "span" texto gris sin formato',
|
|
32
32
|
label: 'Etiqueta del título',
|
|
33
|
-
options: ['h1', 'h2', 'h3', 'h4', 'h4-20', 'h5', 'h6', 'span'],
|
|
34
|
-
options_labels: ['H1', 'H2', 'H3', 'H4', 'H4 20px', 'H5', 'H6', 'Span'],
|
|
33
|
+
options: ['h1', 'h2', 'h3', 'h3-20', 'h4', 'h4-20', 'h5', 'h6', 'span'],
|
|
34
|
+
options_labels: ['H1', 'H2', 'H3', 'H3 20px', 'H4', 'H4 20px', 'H5', 'H6', 'Span'],
|
|
35
35
|
example_value: 'h2'
|
|
36
36
|
},
|
|
37
37
|
{
|
|
@@ -4,7 +4,7 @@ export const metadata: ComponentMetadata = {
|
|
|
4
4
|
component_name: 'Tabla_2026_Cadiz',
|
|
5
5
|
category: 'Contenido con listas',
|
|
6
6
|
name: 'Tabla de dos columnas independientes con título centrado 2026',
|
|
7
|
-
description: 'Tabla con título h2
|
|
7
|
+
description: 'Tabla con título centrado (etiqueta configurable h2 o p con estilos de h2), descripción HTML y dos columnas independientes (izquierda y derecha) con sus títulos e ítems respectivos (strings planos sin HTML). Las columnas no están relacionadas entre sí: cada una muestra sus propios ítems sin sincronizar filas ni flecha separadora. Sin fondo en el contenedor. Layout responsive: apilado en móvil, grid de 2 columnas en desktop. TERNARIO: si AMBAS columnas tienen contenido → grid de 2 columnas; si solo UNA tiene contenido → se renderiza una única tabla con esa columna. Incluye structured data schema.org: emite uno o dos ItemList raíz independientes (uno por columna no vacía) para SEO.',
|
|
8
8
|
framework: 'Astro',
|
|
9
9
|
priority: 1,
|
|
10
10
|
tags: ['texto', 'tabla', 'columnas', 'lista'],
|
|
@@ -12,11 +12,21 @@ export const metadata: ComponentMetadata = {
|
|
|
12
12
|
{
|
|
13
13
|
name: 'title',
|
|
14
14
|
type: 'text',
|
|
15
|
-
help: 'Título superior de la tabla
|
|
15
|
+
help: 'Título superior de la tabla, centrado. Solo se muestra si tiene valor; si se deja vacío, NO aparece',
|
|
16
16
|
label: 'Texto del título',
|
|
17
17
|
mandatory: false,
|
|
18
18
|
example_value: 'Nuestros servicios'
|
|
19
19
|
},
|
|
20
|
+
{
|
|
21
|
+
name: 'titleTag',
|
|
22
|
+
type: 'select',
|
|
23
|
+
help: 'Etiqueta HTML del título. "h2" es un encabezado semántico; "p" mantiene los mismos estilos visuales del h2 pero sin jerarquía de encabezado',
|
|
24
|
+
label: 'Tipo de título',
|
|
25
|
+
mandatory: false,
|
|
26
|
+
options: ['h2', 'p'],
|
|
27
|
+
options_labels: ['Encabezado h2', 'Párrafo (estilos de h2)'],
|
|
28
|
+
example_value: 'h2'
|
|
29
|
+
},
|
|
20
30
|
{
|
|
21
31
|
name: 'description',
|
|
22
32
|
type: 'text',
|
|
@@ -183,6 +183,7 @@ const {
|
|
|
183
183
|
tipo === "h1" ? <h1 class="font-poppins text-[#262626] text-[56px] font-normal text-left leading-[64px] mb-12">{title}</h1>
|
|
184
184
|
: tipo === "h2" ? <h2 class="font-poppins text-[#262626] text-[40px] font-normal text-left leading-[48px] mb-8">{title}</h2>
|
|
185
185
|
: tipo === "h3" ? <h3 class="font-poppins text-[#262626] text-2xl font-semibold text-left leading-8 mb-2">{title}</h3>
|
|
186
|
+
: tipo === "h3-20" ? <h3 class="font-poppins text-[#262626] text-center text-[20px] font-normal leading-8 mb-2">{title}</h3>
|
|
186
187
|
: tipo === "h4" ? <h4 class="font-poppins text-[#262626] text-2xl font-semibold text-left leading-8 mb-2">{title}</h4>
|
|
187
188
|
: tipo === "h4-20" ? <h4 class="font-poppins text-[#262626] text-center text-[20px] font-normal leading-8 mb-2">{title}</h4>
|
|
188
189
|
: tipo === "h5" ? <h5>{title}</h5>
|
|
@@ -8,6 +8,9 @@ const {
|
|
|
8
8
|
|
|
9
9
|
const allOpen = initialState === 'all-open';
|
|
10
10
|
|
|
11
|
+
// Prefijo único por instancia para enlazar botón ↔ panel (aria-controls / aria-labelledby) sin colisionar si hay varios FAQ en la misma página.
|
|
12
|
+
const uid = 'faq-' + Math.random().toString(36).substring(2, 10);
|
|
13
|
+
|
|
11
14
|
const stripHtml = (html: string) => html.replace(/<[^>]*>/g, '');
|
|
12
15
|
|
|
13
16
|
const structuredData = !noSchema && items.length > 0 ? `<script type="application/ld+json">
|
|
@@ -35,13 +38,15 @@ const structuredData = !noSchema && items.length > 0 ? `<script type="applicatio
|
|
|
35
38
|
const isOpen = allOpen || (initialState === 'first-open' && index === 0);
|
|
36
39
|
return (
|
|
37
40
|
<div class="faq-item w-full border-b border-[#E0E0E0] rounded-2xl shadow-[0_2px_4px_-2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)] mb-3">
|
|
38
|
-
<
|
|
39
|
-
<
|
|
40
|
-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
<h3 class="m-0">
|
|
42
|
+
<button id={`${uid}-header-${index}`} aria-expanded={isOpen ? 'true' : 'false'} aria-controls={`${uid}-panel-${index}`} class="faq-toggle flex items-center justify-between w-full py-6 cursor-pointer bg-transparent font-inter text-[#262626] text-base font-semibold leading-6 hover:bg-[rgba(0,25,120,0.04)] rounded-2xl transition-all text-left px-4">
|
|
43
|
+
<span>{item.question}</span>
|
|
44
|
+
<svg class={`faq-arrow shrink-0 -scale-y-100 transition-transform duration-300${isOpen ? ' rotate-180' : ''}`} xmlns="http://www.w3.org/2000/svg" width="12" height="17" viewBox="0 0 12 17" fill="none">
|
|
45
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.81854 0.0209452C5.76196 0.0379263 5.68058 0.075179 5.6377 0.103713C5.52731 0.177114 0.11211 5.94283 0.0713747 6.03031C0.0105434 6.16092 -0.0154752 6.35561 0.00932299 6.49458C0.0418748 6.67705 0.0949975 6.78302 0.218129 6.91116C0.413508 7.1145 0.688797 7.17488 0.952965 7.07237C1.07784 7.02393 1.17979 6.91976 3.19161 4.78509L5.29941 2.54856L5.30521 9.26125L5.31102 15.974L5.37143 16.0956C5.50041 16.3553 5.72556 16.5 6.00049 16.5C6.27542 16.5 6.50057 16.3553 6.62955 16.0956L6.68996 15.974L6.69577 9.26113L6.70158 2.54832L8.80938 4.78504C10.8221 6.92094 10.9231 7.02407 11.048 7.07247C11.3123 7.17484 11.5875 7.11443 11.7829 6.91116C11.9048 6.78422 11.9591 6.677 11.9905 6.50095C12.0179 6.34771 11.9843 6.13743 11.9115 6.00629C11.8822 5.95345 10.6293 4.6055 9.12716 3.01089C6.9192 0.666875 6.37592 0.102152 6.29081 0.0624731C6.1555 -0.000599483 5.95033 -0.0186613 5.81854 0.0209452Z" fill="#001978"/>
|
|
46
|
+
</svg>
|
|
47
|
+
</button>
|
|
48
|
+
</h3>
|
|
49
|
+
<div id={`${uid}-panel-${index}`} role="region" aria-labelledby={`${uid}-header-${index}`} class={`faq-answer pb-4 text-[#363942] font-inter text-base font-normal leading-6 p-4 prose prose-sm max-w-none ${isOpen ? '' : ' hidden'}`} set:html={item.answer} />
|
|
45
50
|
</div>
|
|
46
51
|
);
|
|
47
52
|
})}
|
|
@@ -66,16 +71,20 @@ const structuredData = !noSchema && items.length > 0 ? `<script type="applicatio
|
|
|
66
71
|
container.querySelectorAll('.faq-item').forEach((otherItem) => {
|
|
67
72
|
otherItem.querySelector('.faq-answer')?.classList.add('hidden');
|
|
68
73
|
otherItem.querySelector('.faq-arrow')?.classList.remove('rotate-180');
|
|
74
|
+
otherItem.querySelector('.faq-toggle')?.setAttribute('aria-expanded', 'false');
|
|
69
75
|
});
|
|
70
76
|
// Si no estaba abierto, abrirlo
|
|
71
77
|
if (!isOpen) {
|
|
72
78
|
answer?.classList.remove('hidden');
|
|
73
79
|
arrow?.classList.add('rotate-180');
|
|
80
|
+
button.setAttribute('aria-expanded', 'true');
|
|
74
81
|
}
|
|
75
82
|
} else {
|
|
76
83
|
// Toggle independiente
|
|
84
|
+
const willOpen = answer?.classList.contains('hidden');
|
|
77
85
|
answer?.classList.toggle('hidden');
|
|
78
86
|
arrow?.classList.toggle('rotate-180');
|
|
87
|
+
button.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
|
|
79
88
|
}
|
|
80
89
|
});
|
|
81
90
|
});
|
|
@@ -3,6 +3,7 @@ import { PAGE_ENTITY_ID } from '../../lib/functions.js';
|
|
|
3
3
|
|
|
4
4
|
const {
|
|
5
5
|
title = "",
|
|
6
|
+
titleTag = "p",
|
|
6
7
|
description = "",
|
|
7
8
|
leftTitle = "",
|
|
8
9
|
leftItems = [],
|
|
@@ -10,6 +11,9 @@ const {
|
|
|
10
11
|
rightItems = [],
|
|
11
12
|
} = Astro.props;
|
|
12
13
|
|
|
14
|
+
// Etiqueta del título: h2 (encabezado semántico) o p (mismos estilos visuales, sin jerarquía).
|
|
15
|
+
const TitleTag = titleTag === 'p' ? 'p' : 'h2';
|
|
16
|
+
|
|
13
17
|
// isPartOf hacia el nodo de página (#webpage por defecto). Genérico: opt-out con pageId="".
|
|
14
18
|
// itemListId opcional: se aplica SOLO a la lista izquierda/principal (la derecha nunca lleva @id,
|
|
15
19
|
// para no duplicar el mismo @id en la página).
|
|
@@ -48,7 +52,7 @@ const structuredData = [
|
|
|
48
52
|
|
|
49
53
|
<Fragment set:html={structuredData} />
|
|
50
54
|
<div class="w-full my-8 p-6 rounded-xl">
|
|
51
|
-
{title && <
|
|
55
|
+
{title && <TitleTag class="text-[#363942] font-poppins text-[32px] font-normal leading-[40px] mb-4 text-center">{title}</TitleTag>}
|
|
52
56
|
{description && <p class="text-[#363942] font-inter text-base font-normal leading-6 mb-4" set:html={description}></p>}
|
|
53
57
|
{hasBoth ? (
|
|
54
58
|
<>
|