Add dsfr_notice tag (and relevant site config), improve i18n

numerique-gouv · Apr 2, 2024 · 34bccc9 · 34bccc9
1 parent 7480cd1
commit 34bccc9
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 14 deletions.
diff --git a/dsfr/admin.py b/dsfr/admin.py
@@ -5,7 +5,7 @@
 @admin.register(DsfrConfig)
 class DsfrConfigAdmin(admin.ModelAdmin):
     fieldsets = (
-        ("Site", {"fields": ("site_title", "site_tagline", "mourning")}),
+        ("Site", {"fields": ("site_title", "site_tagline", "notice", "mourning")}),
         (
             "En-tête",
             {

diff --git a/dsfr/migrations/0005_dsfrconfig_notice.py b/dsfr/migrations/0005_dsfrconfig_notice.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.0.3 on 2024-04-02 13:29
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("dsfr", "0004_dsfrconfig_beta_tag_dsfrconfig_operator_logo_alt_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="dsfrconfig",
+            name="notice",
+            field=models.CharField(
+                blank=True,
+                default="",
+                max_length=200,
+                verbose_name="Bandeau d’information importante",
+            ),
+        ),
+    ]
diff --git a/dsfr/models.py b/dsfr/models.py
@@ -25,6 +25,12 @@ class DsfrConfig(models.Model):
     site_tagline = models.CharField(
         "Sous-titre du site", max_length=200, default="Sous-titre du site", blank=True
     )
+    notice = models.CharField(
+        "Bandeau d’information importante",
+        max_length=200,
+        default="",
+        blank=True,
+    )
 
     # Header
     header_brand = models.CharField(

diff --git a/dsfr/templates/dsfr/base.html b/dsfr/templates/dsfr/base.html
@@ -1,6 +1,6 @@
 {% load static dsfr_tags %}
 <!DOCTYPE html>
-<html lang="fr"
+<html lang="{% block lang %}fr{% endblock lang %}"
       data-fr-scheme="system"
       {% if SITE_CONFIG.mourning %}data-fr-mourning{% endif %}>
   <head>
@@ -30,6 +30,9 @@
     {% block header %}
     {% endblock header %}
     {% dsfr_theme_modale %}
+    {% if SITE_CONFIG.notice %}
+      {% dsfr_notice title=SITE_CONFIG.notice %}
+    {% endif %}
     <div class="fr-container fr-mt-4w fr-mb-6w">
       {% dsfr_breadcrumb %}
       <main id="content" role="main">

diff --git a/dsfr/templates/dsfr/breadcrumb.html b/dsfr/templates/dsfr/breadcrumb.html
@@ -1,14 +1,18 @@
-<nav role="navigation" class="fr-breadcrumb" aria-label="vous êtes ici :">
+{% load i18n %}
+{% translate "you are here:" as you_are_here %}
+<nav role="navigation"
+     class="fr-breadcrumb"
+     aria-label="{{ you_are_here }}">
   <button type="button"
           class="fr-breadcrumb__button"
           aria-expanded="false"
           aria-controls="breadcrumb-1">
-    Voir le fil d’Ariane
+    {% translate "See breadcrumb" %}
   </button>
   <div class="fr-collapse" id="breadcrumb-1">
     <ol class="fr-breadcrumb__list">
       <li>
-        <a class="fr-breadcrumb__link" href="{{ self.root_dir | default:'/' }}">Accueil</a>
+        <a class="fr-breadcrumb__link" href="{{ self.root_dir | default:'/' }}">{% translate "Home page" %}</a>
       </li>
       {% for link in self.links %}
         <li>

diff --git a/dsfr/templates/dsfr/notice.html b/dsfr/templates/dsfr/notice.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+{% translate "Hide message" as hide_message %}
+<div class="fr-notice fr-notice--info">
+  <div class="fr-container">
+    <div class="fr-notice__body">
+      <p class="fr-notice__title">
+        {{ self.title|safe }}
+      </p>
+      {% if self.is_collapsible %}
+        <button class="fr-btn--close fr-btn"
+                title="{{ hide_message }}"
+                onclick="const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild(notice)">
+          {{ hide_message }}
+        </button>
+      {% endif %}
+    </div>
+  </div>
+</div>
diff --git a/dsfr/templatetags/dsfr_tags.py b/dsfr/templatetags/dsfr_tags.py
@@ -582,6 +582,36 @@ def dsfr_link(*args, **kwargs) -> dict:
     return {"self": tag_data}
 
 
+@register.inclusion_tag("dsfr/notice.html")
+def dsfr_notice(*args, **kwargs) -> dict:
+    """
+    Returns a notice item. Takes a dict as parameter, with the following structure:
+
+    ```python
+    data_dict = {
+        "title": "Content of the notice item (can include html)",
+        "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)",
+    }
+    ```
+
+    All of the keys of the dict can be passed directly as named parameters of the tag.
+
+    **Tag name**:
+        dsfr_notice
+
+    **Usage**:
+        `{% dsfr_notice data_dict %}`
+    """
+
+    allowed_keys = [
+        "title",
+        "is_collapsible",
+    ]
+    tag_data = parse_tag_args(args, kwargs, allowed_keys)
+
+    return {"self": tag_data}
+
+
 @register.inclusion_tag("dsfr/pagination.html", takes_context=True)
 def dsfr_pagination(context: Context, page_obj: Page) -> dict:
     """

diff --git a/example_app/dsfr_components.py b/example_app/dsfr_components.py
@@ -348,6 +348,21 @@
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liens",
         "example_url": "https://main--ds-gouv.netlify.app/example/component/link/",
     },
+    "notice": {
+        "title": "Bandeau d’information importante",
+        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/notice/",
+        "sample_data": [
+            {
+                "title": """Label titre du bandeau d’information importante, comprenant un texte assez long
+                            pour être sur deux lignes, et <a href='#'
+                            rel='noopener external'
+                            title="intitulé - nouvelle fenêtre" target='_blank'>
+                            un lien au fil du texte</a>, ainsi qu’une croix de fermeture.""",
+                "is_collapsible": True,
+            }
+        ],
+    },
     "pagination": {
         "title": "Pagination",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pagination",
@@ -679,11 +694,6 @@
 ALL_IMPLEMENTED_COMPONENTS = dict(sorted(unsorted_IMPLEMENTED_COMPONENTS.items()))
 
 NOT_YET_IMPLEMENTED_COMPONENTS = {
-    "notice": {
-        "title": "Bandeau d’information importante",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/notice/",
-    },
     "search_bar": {
         "title": "Barre de recherche",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/barre-de-recherche",

diff --git a/example_app/static/js/common.js b/example_app/static/js/common.js
@@ -1,6 +1,6 @@
 const language_selectors = document.querySelectorAll(".fr-translate__language")
 
 language_selectors.forEach(el => el.addEventListener("click", event => {
-    document.cookie = "django_language=" + el.lang;
+    document.cookie = "django_language=" + el.lang + ";Path=\"/django-dsfr\";SameSite=Strict"
     window.location.reload()
 }));
diff --git a/example_app/templates/example_app/base.html b/example_app/templates/example_app/base.html
@@ -1,12 +1,19 @@
 {% extends "dsfr/base.html" %}
-{% load static %}
+{% load static i18n %}
+
 {% block header %}
   {% include "example_app/blocks/header.html" %}
 {% endblock header %}
+
 {% block footer %}
   {% include "example_app/blocks/footer.html" %}
 {% endblock footer %}
+
 {% block extra_js %}
   <script src="{% static 'js/common.js' %}">
   </script>
 {% endblock extra_js %}
+
+{# djlint:off #}
+{% block lang %}{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE }}{% endblock lang %}
+{# djlint:on #}
diff --git a/example_app/templates/example_app/index.html b/example_app/templates/example_app/index.html
@@ -21,10 +21,10 @@ <h2>
       <a href="https://www.systeme-de-design.gouv.fr/">système de design de l’État</a> dans des projets Django.
     </p>
     <p>
-      Elle a été développée dans le cadre du défi
+      Elle a initialement été développée dans le cadre du défi
       <a href="https://github.com/entrepreneur-interet-general/opencollectivites">Open Collectivités</a>
       et est un travail en cours (les composants sont actuellement développés au fur et à mesure de leur
-      utilisation dans le cadre d’Open Collectivités), cf. la page <a href="{% url 'components_index' %}">Composants</a>.
+      utilisation), cf. la page <a href="{% url 'components_index' %}">Composants</a>.
     </p>
   </div>
   <div class="fr-grid-row fr-grid-row--gutters fr-mb-3w">

diff --git a/example_app/templates/example_app/page_component.html b/example_app/templates/example_app/page_component.html
@@ -55,6 +55,7 @@ <h3 class="fr-mt-3w">
           <div class="fr-my-2w">
             {# djlint:off #}
             {% with sample_data_item|pprint as raw_sample_code %}
+              {# djlint:off #}
               {% with '<pre class="dsfr-code">'|concatenate:raw_sample_code|concatenate:"</pre>" as sample_data_code %}
                 {% dsfr_accordion title="Données d’exemple" content=sample_data_code %}
               {% endwith %}
@@ -98,6 +99,8 @@ <h3>
             {% dsfr_input sample_data_item %}
           {% elif tag_name == "link" %}
             {% dsfr_link sample_data_item %}
+          {% elif tag_name == "notice" %}
+            {% dsfr_notice sample_data_item %}
           {% elif tag_name == "quote" %}
             {% dsfr_quote sample_data_item %}
           {% elif tag_name == "select" %}

diff --git a/pyproject.toml b/pyproject.toml
@@ -67,6 +67,7 @@ requires = ["poetry-core>=1.0.0"]
 
 [tool.djlint]
 line_break_after_multiline_tag = true
+max_blank_lines = 1
 ignore = "H030,H031,H006"
 indent = 2