From a66c19c83f08c9b1bc0bc4a7b24eff64a53e338a Mon Sep 17 00:00:00 2001
From: Sylvain Lafay <sylvain.lafay@ign.fr>
Date: Fri, 26 Jan 2024 09:56:59 +0100
Subject: [PATCH] Composant Alert (#23)

---
 _includes/components/alert.njk |  7 ++++
 content/fr/blog/posts/alert.md | 63 ++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 _includes/components/alert.njk
 create mode 100644 content/fr/blog/posts/alert.md

diff --git a/_includes/components/alert.njk b/_includes/components/alert.njk
new file mode 100644
index 0000000..419ff48
--- /dev/null
+++ b/_includes/components/alert.njk
@@ -0,0 +1,7 @@
+{% if not alert %}{% set alert = params %}{% endif %}
+<div class="fr-alert {% if alert.type %}fr-alert--{{ alert.type }}{% else %}fr-alert--info{% endif %} {% if not alert.title %}fr-alert--sm{% endif %}">
+    {% if alert.title %}
+        <h3 class="fr-alert__title">{{ alert.title | safe }}</h3>
+    {% endif %}
+    {% if alert.description %}{{ alert.description | safe }} {% endif %}
+</div>
\ No newline at end of file
diff --git a/content/fr/blog/posts/alert.md b/content/fr/blog/posts/alert.md
new file mode 100644
index 0000000..8f7a2d3
--- /dev/null
+++ b/content/fr/blog/posts/alert.md
@@ -0,0 +1,63 @@
+---
+title: Alert
+description: Comment intégrer une alerte
+date: git Last Modified
+tags:
+  - DSFR
+  - composant
+---
+
+Ce composant peut être inclus dans un fichier Nunjucks `.njk` ou Markdown `.md`.
+
+## Exemple d'utilisation
+
+```njk
+{% raw %}
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "info", {# info (par défaut), warning, error, success #}
+    title: "Test d'alerte",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
+{% endraw %}
+```
+
+Référence : [https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
+
+## Rendu
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "info",
+    title: "Titre de l'info",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "warning",
+    title: "Titre de l'avertissement",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "success",
+    description: "<p>Contenu de l'alerte seul</p>"
+}) }}
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    type: "error",
+    title: "Titre de l'erreur seul"
+}) }}
+
+----
+
+Alerte sans type précisé (défaut info) :
+
+{% from "components/component.njk" import component with context %}
+{{ component("alert", {
+    title: "Titre de l'info",
+    description: "<p>Le contenu de l'alerte</p>"
+}) }}
\ No newline at end of file