@lab-anssi/ui-kit 1.10.1 → 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 +4 -0
- package/dist/index.js +4 -0
- package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte +165 -0
- package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte.d.ts +23 -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 +14 -0
- package/package.json +1 -1
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<svelte:options
|
|
2
|
+
customElement={{
|
|
3
|
+
tag: 'lab-anssi-presentation-anssi',
|
|
4
|
+
}} />
|
|
5
|
+
|
|
6
|
+
<script>import Brique from "./Brique.svelte";
|
|
7
|
+
import { srcAsset } from "../../../assets/assets.js";
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<Brique variation="transparent">
|
|
11
|
+
<div class="presentation-anssi">
|
|
12
|
+
<div class="logo-anssi">
|
|
13
|
+
<img src={srcAsset("/illustrations/logo-anssi.svg")} alt="Logo de l'ANSSI" />
|
|
14
|
+
</div>
|
|
15
|
+
<div class="contenu">
|
|
16
|
+
<h2>Qu'est ce que l'ANSSI ?</h2>
|
|
17
|
+
<p>
|
|
18
|
+
Créée en 2009, l’Agence nationale de la sécurité des systèmes d’information (ANSSI) est l’autorité nationale en matière de cybersécurité et de cyberdéfense.
|
|
19
|
+
<br />
|
|
20
|
+
<br />
|
|
21
|
+
<b>
|
|
22
|
+
Son action pour la protection de la Nation face aux cyberattaques se traduit en quatre grandes missions : défendre, connaître, partager, accompagner.
|
|
23
|
+
</b>
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="encart-action">
|
|
27
|
+
<a class="action" role="button" href="https://cyber.gouv.fr/" target="_blank">En savoir plus</a>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</Brique>
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
<style>.visible-tablette {
|
|
34
|
+
display: none !important;
|
|
35
|
+
}
|
|
36
|
+
@media (min-width: 576px) {
|
|
37
|
+
.visible-tablette {
|
|
38
|
+
display: unset !important;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (min-width: 576px) {
|
|
43
|
+
.invisible-tablette {
|
|
44
|
+
display: none !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.visible-desktop {
|
|
49
|
+
display: none !important;
|
|
50
|
+
}
|
|
51
|
+
@media (min-width: 932px) {
|
|
52
|
+
.visible-desktop {
|
|
53
|
+
display: unset !important;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@media (min-width: 932px) {
|
|
58
|
+
.invisible-desktop {
|
|
59
|
+
display: none !important;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.presentation-anssi {
|
|
64
|
+
color: #3a3a3a;
|
|
65
|
+
display: grid;
|
|
66
|
+
grid-template-columns: 1fr;
|
|
67
|
+
grid-template-areas: "logo-anssi" "contenu" "encart-action";
|
|
68
|
+
row-gap: 24px;
|
|
69
|
+
padding: 16px 16px;
|
|
70
|
+
}
|
|
71
|
+
@media (min-width: 932px) {
|
|
72
|
+
.presentation-anssi {
|
|
73
|
+
grid-template-columns: 1fr 1fr;
|
|
74
|
+
grid-template-areas: "contenu logo-anssi" "encart-action logo-anssi";
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.presentation-anssi .logo-anssi {
|
|
78
|
+
grid-area: logo-anssi;
|
|
79
|
+
display: flex;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
}
|
|
82
|
+
@media (min-width: 932px) {
|
|
83
|
+
.presentation-anssi .logo-anssi {
|
|
84
|
+
align-items: center;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
.presentation-anssi .logo-anssi img {
|
|
88
|
+
max-width: 140px;
|
|
89
|
+
max-height: 140px;
|
|
90
|
+
}
|
|
91
|
+
.presentation-anssi .contenu {
|
|
92
|
+
text-align: center;
|
|
93
|
+
grid-area: contenu;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 8px;
|
|
97
|
+
align-items: center;
|
|
98
|
+
}
|
|
99
|
+
@media (min-width: 932px) {
|
|
100
|
+
.presentation-anssi .contenu {
|
|
101
|
+
text-align: start;
|
|
102
|
+
align-items: start;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
.presentation-anssi .contenu h2 {
|
|
106
|
+
color: var(--brique-presentation-anssi-titre-couleur);
|
|
107
|
+
font-size: 1.75rem;
|
|
108
|
+
font-style: normal;
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
line-height: 2.25rem;
|
|
111
|
+
margin: 0;
|
|
112
|
+
}
|
|
113
|
+
.presentation-anssi .contenu p {
|
|
114
|
+
font-size: 1rem;
|
|
115
|
+
font-style: normal;
|
|
116
|
+
font-weight: 400;
|
|
117
|
+
line-height: 1.5rem;
|
|
118
|
+
margin: 0;
|
|
119
|
+
}
|
|
120
|
+
.presentation-anssi .encart-action {
|
|
121
|
+
grid-area: encart-action;
|
|
122
|
+
width: 100%;
|
|
123
|
+
display: flex;
|
|
124
|
+
justify-content: center;
|
|
125
|
+
}
|
|
126
|
+
@media (min-width: 932px) {
|
|
127
|
+
.presentation-anssi .encart-action {
|
|
128
|
+
justify-content: start;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
.presentation-anssi .encart-action a[role=button] {
|
|
132
|
+
width: 100%;
|
|
133
|
+
text-decoration: none;
|
|
134
|
+
font-family: Marianne, sans-serif;
|
|
135
|
+
padding: 8px 16px;
|
|
136
|
+
text-align: center;
|
|
137
|
+
font-weight: 500;
|
|
138
|
+
font-size: 1rem;
|
|
139
|
+
line-height: 24px;
|
|
140
|
+
border-radius: 4px;
|
|
141
|
+
}
|
|
142
|
+
@media (min-width: 576px) {
|
|
143
|
+
.presentation-anssi .encart-action a[role=button] {
|
|
144
|
+
width: fit-content;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
.presentation-anssi .encart-action a[role=button].action {
|
|
148
|
+
background-color: var(--brique-presentation-anssi-bouton-background);
|
|
149
|
+
color: var(--brique-presentation-anssi-bouton-texte);
|
|
150
|
+
border: 1px solid var(--brique-presentation-anssi-bouton-texte);
|
|
151
|
+
cursor: pointer;
|
|
152
|
+
}
|
|
153
|
+
.presentation-anssi .encart-action a[role=button].action:active {
|
|
154
|
+
background-color: var(--brique-presentation-anssi-bouton-background-active);
|
|
155
|
+
}
|
|
156
|
+
.presentation-anssi .encart-action a[role=button].action:hover {
|
|
157
|
+
background-color: var(--brique-presentation-anssi-bouton-background-hover);
|
|
158
|
+
}</style>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
exports?: {} | undefined;
|
|
9
|
+
bindings?: string | undefined;
|
|
10
|
+
};
|
|
11
|
+
export type PresentationAnssiProps = typeof __propDef.props;
|
|
12
|
+
export type PresentationAnssiEvents = typeof __propDef.events;
|
|
13
|
+
export type PresentationAnssiSlots = typeof __propDef.slots;
|
|
14
|
+
export default class PresentationAnssi extends SvelteComponent<PresentationAnssiProps, PresentationAnssiEvents, PresentationAnssiSlots> {
|
|
15
|
+
}
|
|
16
|
+
export {};
|
|
@@ -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 {};
|