Composant Alert (#23)

_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>

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>"
+}) }}