libreria-astro-lefebvre 0.1.82 → 0.1.84
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/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "libreria-astro-lefebvre",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.84",
|
|
4
4
|
"description": "Librería de componentes Astro, React y Vue para Lefebvre",
|
|
5
5
|
"author": "Equipo web desarrollo Lefebvre",
|
|
6
6
|
"type": "module",
|
|
@@ -42,4 +42,3 @@
|
|
|
42
42
|
"typescript": "^5.8.3"
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
|
|
@@ -16,6 +16,18 @@ const {
|
|
|
16
16
|
fontSize = 'base',
|
|
17
17
|
alignItems = 'center',
|
|
18
18
|
h2Size = 'default',
|
|
19
|
+
h2SizeBreakpoint = 'lg',
|
|
20
|
+
h2MarginBottom = 'mb-8',
|
|
21
|
+
h2AlignClass = 'text-center lg:text-left',
|
|
22
|
+
h2TrackingClass = '',
|
|
23
|
+
imageAspectClass = 'h-auto',
|
|
24
|
+
imageSizeClass = 'md:max-w-xl w-full md:w-[75%]',
|
|
25
|
+
columnGapClass = 'gap-6',
|
|
26
|
+
contentPaddingClass = 'p-4 pr-4',
|
|
27
|
+
rowBreakpoint = 'md',
|
|
28
|
+
contentWidthBreakpoint = 'lg',
|
|
29
|
+
outerPaddingClass = '',
|
|
30
|
+
rowMaxWidthClass = '',
|
|
19
31
|
loading = 'lazy' as 'lazy' | 'eager',
|
|
20
32
|
|
|
21
33
|
showBtn = false,
|
|
@@ -34,6 +46,23 @@ const {
|
|
|
34
46
|
const imageModalUrl = extractImageUrl(imageModal);
|
|
35
47
|
const randomId = Math.floor(Math.random() * 1000);
|
|
36
48
|
|
|
49
|
+
// Tailwind necesita ver cada clase completa de forma literal en el código para
|
|
50
|
+
// generarla — no puede resolver un prefijo de breakpoint interpolado en runtime
|
|
51
|
+
// (`${breakpoint}:utilidad`). Por eso aquí se enumeran las dos combinaciones
|
|
52
|
+
// posibles (md/lg) en vez de construir el prefijo dinámicamente.
|
|
53
|
+
const rowFlexClass = rowBreakpoint === 'lg' ? 'lg:flex' : 'md:flex';
|
|
54
|
+
const rowWidthClass = rowBreakpoint === 'lg' ? 'lg:w-4/5' : 'md:w-4/5';
|
|
55
|
+
const rowFlex1Class = rowBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
|
|
56
|
+
const rowMinW0Class = rowBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
|
|
57
|
+
const contentFlex1Class = contentWidthBreakpoint === 'lg' ? 'lg:flex-1' : 'md:flex-1';
|
|
58
|
+
const contentMinW0Class = contentWidthBreakpoint === 'lg' ? 'lg:min-w-0' : 'md:min-w-0';
|
|
59
|
+
const h2AltSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[40px]' : 'md:text-[40px]';
|
|
60
|
+
const h2AltLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[48px]' : 'md:leading-[48px]';
|
|
61
|
+
const h2IcoSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[46px]' : 'md:text-[46px]';
|
|
62
|
+
const h2IcoLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[54px]' : 'md:leading-[54px]';
|
|
63
|
+
const h2LargeSizeClass = h2SizeBreakpoint === 'lg' ? 'lg:text-[56px]' : 'md:text-[56px]';
|
|
64
|
+
const h2LargeLeadingClass = h2SizeBreakpoint === 'lg' ? 'lg:leading-[64px]' : 'md:leading-[64px]';
|
|
65
|
+
|
|
37
66
|
// Extraer todos los crops definidos en el carbin (base, skyscraper)
|
|
38
67
|
// Funciona igual con JSON de PageBuilder o con objeto simple { base: "url", skyscraper: "url" }
|
|
39
68
|
const crops = extractAllCrops(image) as Record<string, string>;
|
|
@@ -56,7 +85,7 @@ const videoUrl = iframeSrc || '';
|
|
|
56
85
|
<section class="w-full flex items-center justify-center">
|
|
57
86
|
{showImage ? (
|
|
58
87
|
<article class={`w-${width} flex flex-col items-center justify-center py-6`}>
|
|
59
|
-
<div class={`flex-col
|
|
88
|
+
<div class={`flex-col ${rowFlexClass} ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full ${rowWidthClass} ${rowMaxWidthClass} items-${alignItems} ${columnGapClass} ${outerPaddingClass}`}>
|
|
60
89
|
{showIco ? (
|
|
61
90
|
<div class={`flex ${flexOrientation === 'row' ? 'flex-row' : 'flex-col'} w-full md:w-1/2 gap-6 p-4`}>
|
|
62
91
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[30px]">
|
|
@@ -69,7 +98,7 @@ const videoUrl = iframeSrc || '';
|
|
|
69
98
|
</svg>
|
|
70
99
|
<div class={`w-full ${orientation === 'left' ? `pl-[${paddingLeft}px]` : `pr-[${paddingLeft}px]`}`}>
|
|
71
100
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
72
|
-
<h2 class={`font-poppins text-[#262626] font-normal
|
|
101
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2IcoSizeClass} leading-[44px] ${h2IcoLeadingClass}`}`} set:html={subtitle}></h2>
|
|
73
102
|
|
|
74
103
|
<div
|
|
75
104
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
@@ -103,10 +132,10 @@ const videoUrl = iframeSrc || '';
|
|
|
103
132
|
}
|
|
104
133
|
}
|
|
105
134
|
</style>
|
|
106
|
-
<div class={`w-full
|
|
135
|
+
<div class={`w-full ${contentFlex1Class} ${contentMinW0Class} ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
|
|
107
136
|
style={{ 'padding-left': `${paddingLeft}px` }}>
|
|
108
137
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
109
|
-
<h2 class={`font-poppins text-[#262626] font-normal
|
|
138
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
110
139
|
<div
|
|
111
140
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
112
141
|
set:html={description}
|
|
@@ -127,13 +156,13 @@ const videoUrl = iframeSrc || '';
|
|
|
127
156
|
|
|
128
157
|
)}
|
|
129
158
|
|
|
130
|
-
<div class={`w-full
|
|
159
|
+
<div class={`w-full ${rowFlex1Class} ${rowMinW0Class} p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'} aspect-auto`}>
|
|
131
160
|
{videoUrl ? (
|
|
132
161
|
<video autoplay loop muted playsinline preload="metadata" width="600" height="450" class="md:max-w-xl w-full md:w-[75%] h-auto object-cover rounded-lg m-auto">
|
|
133
162
|
<source src={videoUrl} type="video/mp4" />
|
|
134
163
|
</video>
|
|
135
164
|
) : (
|
|
136
|
-
<img src={imageUrl} alt={title} width="600" height="450" class=
|
|
165
|
+
<img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass} object-cover rounded-lg m-auto ${imageAspectClass}`} loading={loading} />
|
|
137
166
|
)}
|
|
138
167
|
</div>
|
|
139
168
|
|
|
@@ -158,7 +187,7 @@ const videoUrl = iframeSrc || '';
|
|
|
158
187
|
|
|
159
188
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
160
189
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
161
|
-
<h2 class={`font-poppins text-[#262626] font-normal
|
|
190
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
162
191
|
<div
|
|
163
192
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
164
193
|
set:html={description}
|
|
@@ -181,7 +210,7 @@ const videoUrl = iframeSrc || '';
|
|
|
181
210
|
) : (
|
|
182
211
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
183
212
|
{title && <h1 class="font-poppins text-[#262626] text-center lg:text-left text-base font-normal leading-6 rounded bg-[#F2F3F8] mb-8 w-fit py-2 px-3 mx-auto lg:mx-0" set:html={title}></h1>}
|
|
184
|
-
<h2 class={`font-poppins text-[#262626] font-normal
|
|
213
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? `${h2AltSizeClass} leading-[44px] ${h2AltLeadingClass}` : `${h2LargeSizeClass} leading-[44px] ${h2LargeLeadingClass}`}`} set:html={subtitle}></h2>
|
|
185
214
|
<div
|
|
186
215
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
187
216
|
set:html={description}
|
|
@@ -3,7 +3,10 @@ const {
|
|
|
3
3
|
title,
|
|
4
4
|
items = [],
|
|
5
5
|
initialState = "all-open",
|
|
6
|
-
noSchema = false
|
|
6
|
+
noSchema = false,
|
|
7
|
+
questionClass = 'font-inter text-base font-semibold leading-6',
|
|
8
|
+
arrowIconSvg,
|
|
9
|
+
arrowIconClass = ''
|
|
7
10
|
} = Astro.props;
|
|
8
11
|
|
|
9
12
|
const allOpen = initialState === 'all-open';
|
|
@@ -39,11 +42,15 @@ const structuredData = !noSchema && items.length > 0 ? `<script type="applicatio
|
|
|
39
42
|
return (
|
|
40
43
|
<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">
|
|
41
44
|
<h3 class="m-0">
|
|
42
|
-
<button id={`${uid}-header-${index}`} aria-expanded={isOpen ? 'true' : 'false'} aria-controls={`${uid}-panel-${index}`} class=
|
|
45
|
+
<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 text-[#262626] hover:bg-[rgba(0,25,120,0.04)] rounded-2xl transition-all text-left px-4 ${questionClass}`}>
|
|
43
46
|
<span>{item.question}</span>
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
+
{arrowIconSvg ? (
|
|
48
|
+
<span class={`faq-arrow inline-flex shrink-0 transition-transform duration-300 [&>svg]:w-full [&>svg]:h-full${isOpen ? ' rotate-180' : ''} ${arrowIconClass}`} set:html={arrowIconSvg} />
|
|
49
|
+
) : (
|
|
50
|
+
<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">
|
|
51
|
+
<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"/>
|
|
52
|
+
</svg>
|
|
53
|
+
)}
|
|
47
54
|
</button>
|
|
48
55
|
</h3>
|
|
49
56
|
<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} />
|