@lab-anssi/ui-kit 1.9.0 → 1.10.0
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/dist/lab/vitrines-produits/briques/temoignages/IconeTemoignage.svelte +42 -0
- package/dist/lab/vitrines-produits/briques/temoignages/IconeTemoignage.svelte.d.ts +25 -0
- package/dist/lab/vitrines-produits/briques/temoignages/Temoignages.svelte +213 -0
- package/dist/lab/vitrines-produits/briques/temoignages/Temoignages.svelte.d.ts +20 -0
- package/dist/types.d.ts +5 -0
- package/dist/webcomponents/lab-anssi-ui-kit.jsx.d.ts +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g>
|
|
3
|
+
<g>
|
|
4
|
+
<path d="M13.3327 4.625H18.666C21.495 4.625 24.2081 5.74881 26.2085 7.74919C28.2089 9.74958 29.3327 12.4627 29.3327 15.2917C29.3327 18.1206 28.2089 20.8338 26.2085 22.8341C24.2081 24.8345 21.495 25.9583 18.666 25.9583V30.625C11.9993 27.9583 2.66602 23.9583 2.66602 15.2917C2.66602 12.4627 3.78982 9.74958 5.79021 7.74919C7.7906 5.74881 10.5037 4.625 13.3327 4.625ZM15.9993 23.2917H18.666C19.7166 23.2917 20.7569 23.0847 21.7275 22.6827C22.6981 22.2807 23.58 21.6914 24.3229 20.9485C25.0657 20.2057 25.655 19.3237 26.0571 18.3531C26.4591 17.3825 26.666 16.3422 26.666 15.2917C26.666 14.2411 26.4591 13.2008 26.0571 12.2302C25.655 11.2596 25.0657 10.3777 24.3229 9.63481C23.58 8.89194 22.6981 8.30267 21.7275 7.90063C20.7569 7.49859 19.7166 7.29167 18.666 7.29167H13.3327C11.211 7.29167 9.17612 8.13452 7.67583 9.63481C6.17554 11.1351 5.33268 13.1699 5.33268 15.2917C5.33268 20.105 8.61535 23.2463 15.9993 26.5983V23.2917Z" fill="#FFFFFF"/>
|
|
5
|
+
<path d="M15.5993 19.9583L12.7357 15.2917L15.5993 10.625H12.5084L9.59935 15.2917L12.5084 19.9583H15.5993ZM21.5993 19.9583L18.7357 15.2917L21.5993 10.625H18.5084L15.5993 15.2917L18.5084 19.9583H21.5993Z" fill="#FFFFFF"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
9
|
+
|
|
10
|
+
<style>.visible-tablette {
|
|
11
|
+
display: none !important;
|
|
12
|
+
}
|
|
13
|
+
@media (min-width: 576px) {
|
|
14
|
+
.visible-tablette {
|
|
15
|
+
display: unset !important;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (min-width: 576px) {
|
|
20
|
+
.invisible-tablette {
|
|
21
|
+
display: none !important;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.visible-desktop {
|
|
26
|
+
display: none !important;
|
|
27
|
+
}
|
|
28
|
+
@media (min-width: 932px) {
|
|
29
|
+
.visible-desktop {
|
|
30
|
+
display: unset !important;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (min-width: 932px) {
|
|
35
|
+
.invisible-desktop {
|
|
36
|
+
display: none !important;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
svg path {
|
|
41
|
+
fill: var(--brique-temoignages-icone-couleur);
|
|
42
|
+
}</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} IconeTemoignageProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} IconeTemoignageEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} IconeTemoignageSlots */
|
|
4
|
+
export default class IconeTemoignage extends SvelteComponent<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type IconeTemoignageProps = typeof __propDef.props;
|
|
11
|
+
export type IconeTemoignageEvents = typeof __propDef.events;
|
|
12
|
+
export type IconeTemoignageSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
exports?: undefined;
|
|
23
|
+
bindings?: undefined;
|
|
24
|
+
};
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
<svelte:options customElement={{
|
|
2
|
+
tag: 'lab-anssi-temoignages',
|
|
3
|
+
props: {
|
|
4
|
+
titre: { reflect: false, type: 'String', attribute: 'titre' },
|
|
5
|
+
temoignages: { reflect: false, type: 'Array', attribute: 'temoignages' },
|
|
6
|
+
}
|
|
7
|
+
}} />
|
|
8
|
+
|
|
9
|
+
<script>import Brique from "../Brique.svelte";
|
|
10
|
+
import IconeTemoignage from "./IconeTemoignage.svelte";
|
|
11
|
+
export let titre = "Les avis de nos utilisateurs";
|
|
12
|
+
export let temoignages = [];
|
|
13
|
+
let elementCarrousel;
|
|
14
|
+
var Direction = /* @__PURE__ */ ((Direction2) => {
|
|
15
|
+
Direction2[Direction2["DROITE"] = 1] = "DROITE";
|
|
16
|
+
Direction2[Direction2["GAUCHE"] = -1] = "GAUCHE";
|
|
17
|
+
return Direction2;
|
|
18
|
+
})(Direction || {});
|
|
19
|
+
const scrollVers = (direction) => {
|
|
20
|
+
const declageCourant = elementCarrousel.scrollLeft;
|
|
21
|
+
const largeurCarte = elementCarrousel.children[0].clientWidth;
|
|
22
|
+
elementCarrousel.scrollLeft = declageCourant + largeurCarte * direction;
|
|
23
|
+
};
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<Brique variation="transparent">
|
|
27
|
+
<div class="brique-temoignages">
|
|
28
|
+
<h3>{titre}</h3>
|
|
29
|
+
<div class="carrousel-temoignages">
|
|
30
|
+
<div class="conteneur-carrousel" bind:this={elementCarrousel}>
|
|
31
|
+
{#each temoignages as temoignage, idx (idx)}
|
|
32
|
+
<div class="temoignage">
|
|
33
|
+
<IconeTemoignage />
|
|
34
|
+
<h4>« {temoignage.citation} »</h4>
|
|
35
|
+
<h5>{temoignage.auteur}</h5>
|
|
36
|
+
<h6>{temoignage.source}</h6>
|
|
37
|
+
</div>
|
|
38
|
+
{/each}
|
|
39
|
+
</div>
|
|
40
|
+
<div class="conteneur-actions">
|
|
41
|
+
<button class="precedent" type="button" on:click={() => scrollVers(Direction.GAUCHE)}>Précédent</button>
|
|
42
|
+
<button class="suivant" type="button" on:click={() => scrollVers(Direction.DROITE)}>Suivant</button>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</Brique>
|
|
47
|
+
|
|
48
|
+
<style>.visible-tablette {
|
|
49
|
+
display: none !important;
|
|
50
|
+
}
|
|
51
|
+
@media (min-width: 576px) {
|
|
52
|
+
.visible-tablette {
|
|
53
|
+
display: unset !important;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media (min-width: 576px) {
|
|
58
|
+
.invisible-tablette {
|
|
59
|
+
display: none !important;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.visible-desktop {
|
|
64
|
+
display: none !important;
|
|
65
|
+
}
|
|
66
|
+
@media (min-width: 932px) {
|
|
67
|
+
.visible-desktop {
|
|
68
|
+
display: unset !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media (min-width: 932px) {
|
|
73
|
+
.invisible-desktop {
|
|
74
|
+
display: none !important;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.brique-temoignages {
|
|
79
|
+
font-family: Marianne;
|
|
80
|
+
}
|
|
81
|
+
.brique-temoignages h3 {
|
|
82
|
+
color: var(--brique-temoignages-titre-couleur);
|
|
83
|
+
font-size: 1.75rem;
|
|
84
|
+
font-weight: 700;
|
|
85
|
+
line-height: 2.25rem;
|
|
86
|
+
}
|
|
87
|
+
@media (min-width: 576px) {
|
|
88
|
+
.brique-temoignages h3 {
|
|
89
|
+
font-size: 2rem;
|
|
90
|
+
line-height: 2.5rem;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
.brique-temoignages .carrousel-temoignages {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 24px;
|
|
97
|
+
}
|
|
98
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel {
|
|
99
|
+
display: flex;
|
|
100
|
+
gap: 24px;
|
|
101
|
+
overflow-x: auto;
|
|
102
|
+
scroll-behavior: smooth;
|
|
103
|
+
scroll-snap-type: x mandatory;
|
|
104
|
+
scrollbar-width: none;
|
|
105
|
+
-ms-overflow-style: none;
|
|
106
|
+
-webkit-overflow-scrolling: touch;
|
|
107
|
+
padding-bottom: 24px;
|
|
108
|
+
}
|
|
109
|
+
@media (min-width: 576px) {
|
|
110
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: row;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
|
|
116
|
+
width: 100%;
|
|
117
|
+
box-sizing: border-box;
|
|
118
|
+
flex-shrink: 0;
|
|
119
|
+
scroll-snap-align: center;
|
|
120
|
+
padding: 0 8px 0 8px;
|
|
121
|
+
color: #161616;
|
|
122
|
+
font-size: 1.25rem;
|
|
123
|
+
font-style: normal;
|
|
124
|
+
font-weight: 700;
|
|
125
|
+
line-height: 2rem;
|
|
126
|
+
}
|
|
127
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage:after {
|
|
128
|
+
content: "";
|
|
129
|
+
border-bottom: 1px solid #dddddd;
|
|
130
|
+
width: 15%;
|
|
131
|
+
display: block;
|
|
132
|
+
padding-bottom: 32px;
|
|
133
|
+
margin: 0 auto 0 0;
|
|
134
|
+
}
|
|
135
|
+
@media (min-width: 932px) {
|
|
136
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage:after {
|
|
137
|
+
content: "";
|
|
138
|
+
border-bottom: none;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
@media (min-width: 932px) {
|
|
142
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
|
|
143
|
+
min-width: 388px;
|
|
144
|
+
width: 388px;
|
|
145
|
+
scroll-snap-align: start;
|
|
146
|
+
padding-left: 32px;
|
|
147
|
+
padding-right: 0;
|
|
148
|
+
border-left: 1px solid #dddddd;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h4 {
|
|
152
|
+
margin: 8px 0 0;
|
|
153
|
+
font-size: 1.25rem;
|
|
154
|
+
font-weight: 700;
|
|
155
|
+
line-height: 2rem;
|
|
156
|
+
}
|
|
157
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h5 {
|
|
158
|
+
margin: 16px 0 0;
|
|
159
|
+
color: #161616;
|
|
160
|
+
font-size: 0.875rem;
|
|
161
|
+
font-weight: 700;
|
|
162
|
+
line-height: 1.5rem;
|
|
163
|
+
}
|
|
164
|
+
@media (min-width: 576px) {
|
|
165
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h5 {
|
|
166
|
+
font-size: 1rem;
|
|
167
|
+
font-weight: 700;
|
|
168
|
+
line-height: 1.5rem;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h6 {
|
|
172
|
+
margin: 4px 0 0;
|
|
173
|
+
color: #666666;
|
|
174
|
+
font-size: 0.75rem;
|
|
175
|
+
font-style: italic;
|
|
176
|
+
font-weight: 400;
|
|
177
|
+
line-height: 1.25rem;
|
|
178
|
+
}
|
|
179
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions {
|
|
180
|
+
display: flex;
|
|
181
|
+
margin-top: 32px;
|
|
182
|
+
justify-content: center;
|
|
183
|
+
gap: 24px;
|
|
184
|
+
}
|
|
185
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions button {
|
|
186
|
+
background: none;
|
|
187
|
+
border: none;
|
|
188
|
+
color: #000091;
|
|
189
|
+
font-size: 1.125rem;
|
|
190
|
+
font-weight: 400;
|
|
191
|
+
line-height: 1.75rem;
|
|
192
|
+
cursor: pointer;
|
|
193
|
+
display: flex;
|
|
194
|
+
align-items: center;
|
|
195
|
+
gap: 8px;
|
|
196
|
+
font-family: Marianne;
|
|
197
|
+
}
|
|
198
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions .precedent:before,
|
|
199
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant:after {
|
|
200
|
+
content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche_gauche_bleue.svg");
|
|
201
|
+
display: flex;
|
|
202
|
+
width: 24px;
|
|
203
|
+
height: 24px;
|
|
204
|
+
line-height: 1.75rem;
|
|
205
|
+
}
|
|
206
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant:after {
|
|
207
|
+
transform: rotate(180deg);
|
|
208
|
+
}
|
|
209
|
+
.brique-temoignages .carrousel-temoignages .conteneur-actions button:hover {
|
|
210
|
+
text-decoration: underline;
|
|
211
|
+
text-underline-offset: 4px;
|
|
212
|
+
text-decoration-thickness: 2px;
|
|
213
|
+
}</style>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { Temoignage } from "../../../../types";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
titre?: string;
|
|
6
|
+
temoignages?: Temoignage[];
|
|
7
|
+
};
|
|
8
|
+
events: {
|
|
9
|
+
[evt: string]: CustomEvent<any>;
|
|
10
|
+
};
|
|
11
|
+
slots: {};
|
|
12
|
+
exports?: {} | undefined;
|
|
13
|
+
bindings?: string | undefined;
|
|
14
|
+
};
|
|
15
|
+
export type TemoignagesProps = typeof __propDef.props;
|
|
16
|
+
export type TemoignagesEvents = typeof __propDef.events;
|
|
17
|
+
export type TemoignagesSlots = typeof __propDef.slots;
|
|
18
|
+
export default class Temoignages extends SvelteComponent<TemoignagesProps, TemoignagesEvents, TemoignagesSlots> {
|
|
19
|
+
}
|
|
20
|
+
export {};
|
package/dist/types.d.ts
CHANGED