//- Composant Alert
Le composant `Alert` permet de donner une information complémentaire à un élément, ou à un ensemble d’éléments.
Il peut être utilisé pour répondre à plusieurs besoins et peut donner une information plus ou moins importante selon la forme dans lequel il est utilisé.
{@link https://www.figma.com/design/7lJV29WBs310nj08MickBA/Alert Documentation Figma}
{@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=8583-1310 Composant Figma}
{@link https://maquettes.tools.df.maif.io/katya/base.html#alert Composant Katya}
{@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-alert--docs Composant React}
mixin content
p Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
p Veniam pariatur occaecat ullamco adipisicing.
a(href='#').button.-primary Bouton primaire
ul.bullet-list
li Proident ipsum quis laboris exercitation.
li Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
li Ut laboris culpa eiusmod ullamco.
ul.check-list
li Est Lorem est velit minim quis commodo nostrud.
li Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
li Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
a(href='#').button.-secondary Bouton secondaire
p Nisi nisi1 laborum incididunt ipsum elit sint.
.heading.type4.text-left Alert avec une priorité par défaut
// Alerte par défaut
.alert.-primary
p.sr-only Alerte d'information
i.maificon.maificon-information-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
.content
+content
.wrapper-button
button(type="button", onclick="this.closest('.alert').remove()").remove
span.sr-only Fermer
i.maificon.maificon-cross(aria-hidden="true")
// Alerte neutre
.alert.-secondary
p.sr-only Alerte d'information
i.maificon.maificon-information-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
.content
+content
// Alerte avec bordure
.alert.-tertiary
p.sr-only Alerte d'information
.wrapper-collapse
i.maificon.maificon-information-round-small(aria-hidden='true')
.title
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre facultatif (p/h2/h3/h4) et picto facultatif
.collapse.collapse-container#collapse-info-2
.collapse-content
+content
// Alerte en succès
.alert.success
p.sr-only Alerte de succès
i.maificon.maificon-check-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
.wrapper-button
button(type="button", onclick="this.closest('.alert').remove()").remove
span.sr-only Fermer
i.maificon.maificon-cross(aria-hidden="true")
// Alerte en avertissement
.alert.warning
p.sr-only Alerte d'avertissement
i.maificon.maificon-exclamation-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
// Alerte en erreur
.alert.error
p.sr-only Alerte en erreur
.wrapper-collapse
i.maificon.maificon-cross-round-small(aria-hidden='true')
.title
p
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre (p/h2/h3/h4) et picto
.collapse.collapse-container#collapse-info-2
.collapse-content
+content
.documentation-space
p.heading.type4.text-left Alert sur fond sombre
p Option d'affichage via la classe
code .-reverse
div(style="background: #5C5C5C; padding: 20px;")
// Alerte par defaut sur fond sombre
.alert.-primary.-reverse
p.sr-only Alerte d'information
i.maificon.maificon-information-round-small(aria-hidden="true")
.wrapper-content
.title
h2 Titre facultatif (p/h2/h3/h4) et picto facultatif
.content
+content
// Alerte neutre sur fond sombre
.alert.-secondary.-reverse
p.sr-only Échec de l'action
.wrapper-collapse
i.maificon.maificon-information-round-small(aria-hidden="true")
.title
h2
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-11", aria-expanded="false", aria-controls="#collapse-info-11") Titre (p/h2/h3/h4) et picto facultatif
.collapse.collapse-container#collapse-info-11
.collapse-content
+content
// Alerte en bordure sur fond sombre
.alert.-tertiary.-reverse
p.sr-only Alert d'information
i.maificon.maificon-information-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
.content
+content
// Alerte en succès
.alert.-reverse.success
p.sr-only Alerte d'information
i.maificon.maificon-check-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
.wrapper-button
button(type="button", onclick="this.closest('.alert').remove()").remove
span.sr-only Fermer
i.maificon.maificon-cross(aria-hidden="true")
// Alerte en avertissement
.alert.-reverse.warning
p.sr-only Alerte d'avertissement
i.maificon.maificon-exclamation-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
// Alerte en erreur
.alert.-reverse.error
p.sr-only Alerte en erreur
.wrapper-collapse
i.maificon.maificon-cross-round-small(aria-hidden='true')
.title
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre p/h2/h3/h4 et picto
.collapse.collapse-container#collapse-info-2
.collapse-content
+content
.documentation-space
p.heading.type4.text-left Alert avec une priorité haute
p Option d'affichage via la classe
code .-high
// Alerte de succès avec priorité haute
.alert.-high.success
p.sr-only Succès de l'action
i.maificon.maificon-check-round-small(aria-hidden="true")
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
// Alerte d'avertissement avec priorité haute
.alert.-high.warning
p.sr-only Attention
i.maificon.maificon-exclamation-round-small(aria-hidden="true")
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
// Alerte en erreur avec priorité haute
.alert.-high.error
p.sr-only Échec de l'action
.wrapper-collapse
i.maificon.maificon-cross-round-small(aria-hidden='true')
.title
h2
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-snackbar", aria-expanded="false", aria-controls="#collapse-info-snackbar") Titre (p/h2/h3/h4) et picto
.collapse.collapse-container#collapse-info-snackbar
.collapse-content
+content
.documentation-space
p.heading.type4.text-left Alert avec une priorité haute .-high sur fond sombre
p Option d'affichage via la classe
code .-constrat
div(style="background: #F0F0F0; padding: 20px;")
// Alerte de succès avec priorité haute et mise en évidence
.alert.-high.-contrast.success
p.sr-only Succès de l'action
i.maificon.maificon-check-round-small(aria-hidden="true")
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
.wrapper-button
button(type="button", onclick="this.closest('.-high').remove()").remove
span.sr-only Fermer
i.maificon.maificon-cross(aria-hidden="true")
div(style="background: #5C5C5C; padding: 20px;")
// Alerte d'avertissement avec priorité haute et mise en évidence
.alert.-high.-contrast.warning
p.sr-only Attention
i.maificon.maificon-exclamation-round-small(aria-hidden="true")
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
+content
// Alerte en erreur avec priorité haute et mise en évidence
.alert.-high.-contrast.error
p.sr-only Échec de l'action
.wrapper-collapse
i.maificon.maificon-cross-round-small(aria-hidden='true')
.title
h2
button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-snackbar", aria-expanded="false", aria-controls="#collapse-info-snackbar") Titre (p/h2/h3/h4) et picto
.collapse.collapse-container#collapse-info-snackbar
.collapse-content
+content