libreria-astro-lefebvre 0.1.82 → 0.1.83
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
|
@@ -16,6 +16,13 @@ const {
|
|
|
16
16
|
fontSize = 'base',
|
|
17
17
|
alignItems = 'center',
|
|
18
18
|
h2Size = 'default',
|
|
19
|
+
h2MarginBottom = 'mb-8',
|
|
20
|
+
h2AlignClass = 'text-center lg:text-left',
|
|
21
|
+
h2TrackingClass = '',
|
|
22
|
+
imageAspectClass = '',
|
|
23
|
+
imageSizeClass = 'md:max-w-xl w-full md:w-[75%]',
|
|
24
|
+
columnGapClass = 'gap-6',
|
|
25
|
+
contentPaddingClass = 'p-4 pr-4',
|
|
19
26
|
loading = 'lazy' as 'lazy' | 'eager',
|
|
20
27
|
|
|
21
28
|
showBtn = false,
|
|
@@ -56,7 +63,7 @@ const videoUrl = iframeSrc || '';
|
|
|
56
63
|
<section class="w-full flex items-center justify-center">
|
|
57
64
|
{showImage ? (
|
|
58
65
|
<article class={`w-${width} flex flex-col items-center justify-center py-6`}>
|
|
59
|
-
<div class={`flex-col md:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full md:w-4/5 items-${alignItems}
|
|
66
|
+
<div class={`flex-col md:flex ${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} w-full md:w-4/5 items-${alignItems} ${columnGapClass}`}>
|
|
60
67
|
{showIco ? (
|
|
61
68
|
<div class={`flex ${flexOrientation === 'row' ? 'flex-row' : 'flex-col'} w-full md:w-1/2 gap-6 p-4`}>
|
|
62
69
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[30px]">
|
|
@@ -69,7 +76,7 @@ const videoUrl = iframeSrc || '';
|
|
|
69
76
|
</svg>
|
|
70
77
|
<div class={`w-full ${orientation === 'left' ? `pl-[${paddingLeft}px]` : `pr-[${paddingLeft}px]`}`}>
|
|
71
78
|
{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
|
|
79
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[46px] leading-[44px] lg:leading-[54px]'}`} set:html={subtitle}></h2>
|
|
73
80
|
|
|
74
81
|
<div
|
|
75
82
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
@@ -103,10 +110,10 @@ const videoUrl = iframeSrc || '';
|
|
|
103
110
|
}
|
|
104
111
|
}
|
|
105
112
|
</style>
|
|
106
|
-
<div class={`w-full lg:w-1/2
|
|
113
|
+
<div class={`w-full lg:w-1/2 ${contentPaddingClass} ${orientation === 'left' ? 'css-mq-pl-767' : 'pr-[var(--padding-left)] pl-0' }`}
|
|
107
114
|
style={{ 'padding-left': `${paddingLeft}px` }}>
|
|
108
115
|
{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
|
|
116
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
|
|
110
117
|
<div
|
|
111
118
|
class={`text-[#363942] font-inter font-normal text-${fontSize} not-italic leading-6 flex flex-col gap-4 mb-8`}
|
|
112
119
|
set:html={description}
|
|
@@ -133,7 +140,7 @@ const videoUrl = iframeSrc || '';
|
|
|
133
140
|
<source src={videoUrl} type="video/mp4" />
|
|
134
141
|
</video>
|
|
135
142
|
) : (
|
|
136
|
-
<img src={imageUrl} alt={title} width="600" height="450" class=
|
|
143
|
+
<img src={imageUrl} alt={title} width="600" height="450" class={`${imageSizeClass} h-auto object-cover rounded-lg m-auto ${imageAspectClass}`} loading={loading} />
|
|
137
144
|
)}
|
|
138
145
|
</div>
|
|
139
146
|
|
|
@@ -158,7 +165,7 @@ const videoUrl = iframeSrc || '';
|
|
|
158
165
|
|
|
159
166
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
160
167
|
{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
|
|
168
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
|
|
162
169
|
<div
|
|
163
170
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
164
171
|
set:html={description}
|
|
@@ -181,7 +188,7 @@ const videoUrl = iframeSrc || '';
|
|
|
181
188
|
) : (
|
|
182
189
|
<div class="w-1/2 p-4 flex flex-col flex-wrap ">
|
|
183
190
|
{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
|
|
191
|
+
<h2 class={`font-poppins text-[#262626] font-normal ${h2AlignClass} ${h2TrackingClass} pr-6 ${h2MarginBottom} mx-auto lg:mx-0 text-[36px] ${h2Size === '40px' ? 'lg:text-[40px] leading-[44px] lg:leading-[48px]' : 'lg:text-[56px] leading-[44px] lg:leading-[64px]'}`} set:html={subtitle}></h2>
|
|
185
192
|
<div
|
|
186
193
|
class="text-[#363942] font-inter font-normal text-base not-italic leading-6 flex flex-col gap-4 mb-8"
|
|
187
194
|
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} />
|