@lab-anssi/ui-kit 1.11.0 → 1.12.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/assets/illustrations/logo-anssi.svg +14 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte +158 -0
- package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte.d.ts +16 -0
- package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte +164 -0
- package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte.d.ts +22 -0
- package/dist/webcomponents/lab-anssi-ui-kit.iife.js +34 -33
- package/dist/webcomponents/lab-anssi-ui-kit.jsx.d.ts +7 -0
- package/package.json +1 -1
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
<svelte:options
|
|
2
|
+
customElement={{
|
|
3
|
+
tag: 'lab-anssi-brique-rejoindre-la-communaute',
|
|
4
|
+
props: {
|
|
5
|
+
titre: { reflect: false, type: 'String', attribute: 'titre' },
|
|
6
|
+
raisons: { reflect: false, type: 'Array', attribute: 'raisons' },
|
|
7
|
+
action: { reflect: false, type: 'Object', attribute: 'action' },
|
|
8
|
+
illustration: { reflect: false, type: 'Object', attribute: 'illustration' }
|
|
9
|
+
}
|
|
10
|
+
}} />
|
|
11
|
+
|
|
12
|
+
<script>import Brique from "./Brique.svelte";
|
|
13
|
+
export let titre;
|
|
14
|
+
export let raisons;
|
|
15
|
+
export let action = void 0;
|
|
16
|
+
export let illustration;
|
|
17
|
+
</script>
|
|
18
|
+
|
|
19
|
+
<Brique variation="primaire">
|
|
20
|
+
<div class="grille-contenu">
|
|
21
|
+
<div class="illustration">
|
|
22
|
+
<img src={illustration.lien} alt={illustration.alt} />
|
|
23
|
+
</div>
|
|
24
|
+
<div class="contenu">
|
|
25
|
+
<h2>{titre}</h2>
|
|
26
|
+
<p>
|
|
27
|
+
En tant que <b>membre de la communauté</b>, vous pourrez :
|
|
28
|
+
</p>
|
|
29
|
+
<ul>
|
|
30
|
+
{#each raisons as raison, idx (idx)}
|
|
31
|
+
<li>{raison}</li>
|
|
32
|
+
{/each}
|
|
33
|
+
</ul>
|
|
34
|
+
<div class="action">
|
|
35
|
+
{#if action}
|
|
36
|
+
<a role="button" href={action.lien} target="_blank">
|
|
37
|
+
{action.titre}
|
|
38
|
+
</a>
|
|
39
|
+
{/if}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</Brique>
|
|
44
|
+
|
|
45
|
+
<style>.visible-tablette {
|
|
46
|
+
display: none !important;
|
|
47
|
+
}
|
|
48
|
+
@media (min-width: 576px) {
|
|
49
|
+
.visible-tablette {
|
|
50
|
+
display: unset !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (min-width: 576px) {
|
|
55
|
+
.invisible-tablette {
|
|
56
|
+
display: none !important;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.visible-desktop {
|
|
61
|
+
display: none !important;
|
|
62
|
+
}
|
|
63
|
+
@media (min-width: 932px) {
|
|
64
|
+
.visible-desktop {
|
|
65
|
+
display: unset !important;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (min-width: 932px) {
|
|
70
|
+
.invisible-desktop {
|
|
71
|
+
display: none !important;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.grille-contenu {
|
|
76
|
+
display: grid;
|
|
77
|
+
grid-template-columns: 1fr;
|
|
78
|
+
grid-template-areas: "illustration" "contenu";
|
|
79
|
+
gap: 32px;
|
|
80
|
+
}
|
|
81
|
+
@media (min-width: 932px) {
|
|
82
|
+
.grille-contenu {
|
|
83
|
+
grid-template-columns: 1fr 1fr;
|
|
84
|
+
grid-template-areas: "illustration contenu";
|
|
85
|
+
column-gap: 24px;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
.grille-contenu .contenu {
|
|
89
|
+
grid-area: contenu;
|
|
90
|
+
display: flex;
|
|
91
|
+
flex-direction: column;
|
|
92
|
+
row-gap: 8px;
|
|
93
|
+
}
|
|
94
|
+
@media (min-width: 932px) {
|
|
95
|
+
.grille-contenu .contenu {
|
|
96
|
+
justify-content: center;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
.grille-contenu .contenu h2 {
|
|
100
|
+
font-size: 1.75rem;
|
|
101
|
+
line-height: 2.25rem;
|
|
102
|
+
font-weight: 700;
|
|
103
|
+
word-break: break-word;
|
|
104
|
+
margin: 0;
|
|
105
|
+
}
|
|
106
|
+
.grille-contenu .contenu p {
|
|
107
|
+
font-size: 1rem;
|
|
108
|
+
font-weight: 400;
|
|
109
|
+
line-height: 1.5rem;
|
|
110
|
+
margin: 0;
|
|
111
|
+
}
|
|
112
|
+
.grille-contenu .contenu .action {
|
|
113
|
+
margin-top: 32px;
|
|
114
|
+
}
|
|
115
|
+
.grille-contenu .contenu .action a[role=button] {
|
|
116
|
+
display: flex;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
text-decoration: none;
|
|
119
|
+
font-family: Marianne, sans-serif;
|
|
120
|
+
padding: 8px 16px;
|
|
121
|
+
max-width: 100%;
|
|
122
|
+
text-align: center;
|
|
123
|
+
font-weight: 500;
|
|
124
|
+
font-size: 1rem;
|
|
125
|
+
line-height: 24px;
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
background-color: var(--brique-contenu-deux-colonnes-action-bouton-background);
|
|
128
|
+
color: var(--brique-contenu-deux-colonnes-action-bouton-texte);
|
|
129
|
+
border: none;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
}
|
|
132
|
+
.grille-contenu .contenu .action a[role=button]:active {
|
|
133
|
+
background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-active);
|
|
134
|
+
box-shadow: none;
|
|
135
|
+
border: none;
|
|
136
|
+
}
|
|
137
|
+
.grille-contenu .contenu .action a[role=button]:hover {
|
|
138
|
+
background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-hover);
|
|
139
|
+
box-shadow: none;
|
|
140
|
+
border: none;
|
|
141
|
+
}
|
|
142
|
+
@media (min-width: 576px) {
|
|
143
|
+
.grille-contenu .contenu .action a[role=button] {
|
|
144
|
+
max-width: unset;
|
|
145
|
+
width: fit-content;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
.grille-contenu .illustration {
|
|
149
|
+
grid-area: illustration;
|
|
150
|
+
}
|
|
151
|
+
.grille-contenu .illustration img {
|
|
152
|
+
width: 100%;
|
|
153
|
+
max-height: 250px;
|
|
154
|
+
}
|
|
155
|
+
@media (min-width: 576px) {
|
|
156
|
+
.grille-contenu .illustration img {
|
|
157
|
+
max-height: none;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
@media (min-width: 932px) {
|
|
161
|
+
.grille-contenu .illustration img {
|
|
162
|
+
max-height: 330px;
|
|
163
|
+
}
|
|
164
|
+
}</style>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { Action, Image } from "../../../types";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
titre: string;
|
|
6
|
+
raisons: string[];
|
|
7
|
+
action?: Action | undefined;
|
|
8
|
+
illustration: Image;
|
|
9
|
+
};
|
|
10
|
+
events: {
|
|
11
|
+
[evt: string]: CustomEvent<any>;
|
|
12
|
+
};
|
|
13
|
+
slots: {};
|
|
14
|
+
exports?: {} | undefined;
|
|
15
|
+
bindings?: string | undefined;
|
|
16
|
+
};
|
|
17
|
+
export type RejoindreLaCommunauteProps = typeof __propDef.props;
|
|
18
|
+
export type RejoindreLaCommunauteEvents = typeof __propDef.events;
|
|
19
|
+
export type RejoindreLaCommunauteSlots = typeof __propDef.slots;
|
|
20
|
+
export default class RejoindreLaCommunaute extends SvelteComponent<RejoindreLaCommunauteProps, RejoindreLaCommunauteEvents, RejoindreLaCommunauteSlots> {
|
|
21
|
+
}
|
|
22
|
+
export {};
|