Améliorations mineures de qualité de code (#211)

* Remove two warnings in dsfr_tags.py

* Rename make recipe 'checkstyle' to 'quality'

* Remove unused code

* Update code examples with the selected color

* remove warnings

* Update test

* Make the example change work for the background example too

* Remove deprecated checksum

* Update translations

* Replace prints with stdout writes

* Replace prints with stdout writes

* Fix typo in Makefile

CONTRIBUTING.md

@@ -60,7 +60,7 @@ Concernant les langues :
 Pour vérifier son code, on peut intégrer le linter adapté à son IDE et aussi faire ceci :
 
 ```{ .bash }
-make checkstyle
+make quality
 ```
 
 Une vérification automatique est faite via des *pre-commit hooks*, qui ont normalement été installés via le `make init`.

Makefile

@@ -12,12 +12,12 @@ else
 endif
 
 # Commands
-checkstyle:
-	poetry run pre-commit run --all-files
 
+.PHONY: collectstatic
 collectstatic:
 	poetry run python manage.py collectstatic --noinput
 
+.PHONY: init
 init:
 	poetry install
 	poetry run pre-commit install
@@ -34,22 +34,31 @@ messages:
 compilemessages:
 	poetry run django-admin compilemessages
 
+.PHONY: quality
+quality:
+	poetry run pre-commit run --all-files
+
+.PHONY: runserver
 runserver:
 	poetry run python manage.py runserver $(local_port)
 
+.PHONY: test
 test:
 	poetry run python manage.py test
 
+.PHONY: update_dsfr
 update_dsfr:
 	bash scripts/download_latest.sh
 	poetry run python manage.py trim_dist
 	poetry run python manage.py integrity_checksums
 	poetry run python manage.py make_icon_picker_files
 	make collectstatic
 
+.PHONY: static_server
 static_server:
 	python -m http.server 1$(local_port) -d docs/
 
+.PHONY: export_static
 export_static:
 	poetry run python manage.py migrate
 	poetry run python manage.py import_sample_data

dsfr/checksums.py

@@ -23,11 +23,6 @@
     "sha384-pXDVyHuMGAo5xGPXnYhmr6rOcGwSZsrAVCJdC6J2PRRxcJL9jFMK//yzaUqMhsBw"
 )
 
-# dsfr/static/dsfr/dist/utility/icons/icons.min.css
-INTEGRITY_CSS_ICONS = (
-    "sha384-00cql3NHF4SSck9bB/Ca/LHBQnO4sy17TUWBr2QlKc1fqcPQ9EIG4g6Mt22uP9Vp"
-)
-
 # dsfr/static/dsfr/dist/favicon/apple-touch-icon.png
 INTEGRITY_FAVICON_APPLE = (
     "sha384-bE/sjT09LYXMMjd/7ovUY40XBU2WQoLkIRw4/eBcHdBVsJOhoomJuSSa+qEFGku/"

dsfr/locale/fr/LC_MESSAGES/django.po

@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-08-23 11:10+0200\n"
-"PO-Revision-Date: 2024-08-23 11:12+0200\n"
+"POT-Creation-Date: 2025-03-03 16:55+0100\n"
+"PO-Revision-Date: 2025-03-03 16:55+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: fr\n"
@@ -440,12 +440,12 @@ msgstr "Qu’est-ce que FranceConnect ?"
 msgid "Menu"
 msgstr "Menu"
 
-#: dsfr/templates/dsfr/header.html:87 dsfr/templates/dsfr/theme_modale.html:13
+#: dsfr/templates/dsfr/header.html:91 dsfr/templates/dsfr/theme_modale.html:13
 #: dsfr/templates/dsfr/transcription.html:30
 msgid "Close"
 msgstr "Fermer"
 
-#: dsfr/templates/dsfr/header.html:91
+#: dsfr/templates/dsfr/header.html:95
 msgid "Main menu"
 msgstr "Menu principal"
 

dsfr/management/commands/integrity_checksums.py

@@ -17,7 +17,6 @@ def handle(self, *args, **options):
             {"path": "dsfr/dsfr.nomodule.min.js", "constant": "INTEGRITY_JS_NOMODULE"},
             {"path": "dsfr/dsfr.min.css", "constant": "INTEGRITY_CSS"},
             {"path": "utility/utility.min.css", "constant": "INTEGRITY_UTILITY_CSS"},
-            {"path": "utility/icons/icons.min.css", "constant": "INTEGRITY_CSS_ICONS"},
             {
                 "path": "favicon/apple-touch-icon.png",
                 "constant": "INTEGRITY_FAVICON_APPLE",

dsfr/management/commands/make_icon_picker_files.py

@@ -45,4 +45,6 @@ def handle(self, *args, **options):
                 json.dump(icons_dict, fp)
                 fp.write("\n")
 
-        print("Folders created or updated: ", all_folders)
+        self.stdout.write(
+            self.style.SUCCESS(f"Folders created or updated: {all_folders}")
+        )

dsfr/management/commands/trim_dist.py

@@ -10,7 +10,8 @@ class Command(BaseCommand):
     BASE_PATH = "dsfr/static/dsfr/dist"
 
     def handle(self, *args, **options):
-        print("Delete CSS map files and non-minified CSS files")
+        self.stdout.write("Delete CSS map files and non-minified CSS files")
+
         deleted_files = 0
         all_css_map_files = self.get_files_by_ext("*.css.map")
         for file in all_css_map_files:
@@ -22,9 +23,10 @@ def handle(self, *args, **options):
             os.remove(file)
             deleted_files += 1
 
-        print(f"{deleted_files} files deleted.")
+        self.stdout.write(f"{deleted_files} files deleted.")
+
+        self.stdout.write("Delete JS map files and non-minified files")
 
-        print("Delete JS map files and non-minified files")
         deleted_files = 0
         all_js_map_files = self.get_files_by_ext("*.js.map")
         for file in all_js_map_files:
@@ -36,9 +38,9 @@ def handle(self, *args, **options):
             os.remove(file)
             deleted_files += 1
 
-        print(f"{deleted_files} files deleted.")
+        self.stdout.write(f"{deleted_files} files deleted.")
 
-        print("Removing mentions of deleted files")
+        self.stdout.write("Removing mentions of deleted files")
         edited_files = 0
         all_minified_js_files = self.get_files_by_ext("*.min.js")
         for filename in all_minified_js_files:
@@ -51,7 +53,7 @@ def handle(self, *args, **options):
                 file.truncate()
                 edited_files += 1
 
-        print(f"{edited_files} files edited.")
+        self.stdout.write(f"{edited_files} files edited.")
 
     def get_files_by_ext(self, extension) -> list:
         return [

dsfr/templatetags/dsfr_tags.py

@@ -12,7 +12,6 @@
 from dsfr.checksums import (
     INTEGRITY_CSS,
     INTEGRITY_UTILITY_CSS,
-    INTEGRITY_CSS_ICONS,
     INTEGRITY_FAVICON_APPLE,
     INTEGRITY_FAVICON_ICO,
     INTEGRITY_FAVICON_MANIFEST,
@@ -228,7 +227,7 @@ def dsfr_alert(*args, **kwargs) -> dict:
         "collapsible_attrs",
         {
             "onclick": (
-                "const alert = this.parentNode; " "alert.parentNode.removeChild(alert)"
+                "const alert = this.parentNode; alert.parentNode.removeChild(alert);"
             )
         },
     )

dsfr/test/test_templatetags.py

@@ -175,7 +175,7 @@ def test_alert_tag_has_collapse_button(self):
         rendered_template = self.template_to_render.render(self.context)
         self.assertInHTML(
             """
-            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)">
+            <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert);">
               Masquer le message
             </button>
             """,  # noqa

example_app/locale/fr/LC_MESSAGES/django.po

@@ -7,8 +7,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-08-23 11:21+0200\n"
-"PO-Revision-Date: 2024-08-23 11:22+0200\n"
+"POT-Creation-Date: 2025-03-03 16:55+0100\n"
+"PO-Revision-Date: 2025-03-03 16:55+0100\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: fr\n"
@@ -105,7 +105,7 @@ msgstr "Menu"
 msgid "Close"
 msgstr "Fermer"
 
-#: example_app/templates/example_app/blocks/language_selector.html:10
+#: example_app/templates/example_app/blocks/language_selector.html:7
 msgid "Select language"
 msgstr "Sélectionner une langue"
 

example_app/templates/example_app/blocks/language_selector.html

@@ -4,10 +4,11 @@
   {% get_available_languages as LANGUAGES %}
   {% get_language_info_list for LANGUAGES as languages %}
   <div class="fr-nav__item">
+    {% translate "Select language" as select_language %}
     <button class="fr-translate__btn fr-btn fr-btn--tertiary"
             aria-controls="translate-menu"
             aria-expanded="false"
-            title="{% translate 'Select language' %}">
+            title="{{ select_language }}">
       {% get_language_info for LANGUAGE_CODE as current_lang %}{{ current_lang.code|upper }}
       <span class="fr-hidden-lg"> - {{ current_lang.name_local |title }}</span>
     </button>

example_app/templates/example_app/index.html

@@ -2,12 +2,6 @@
 {% load static dsfr_tags %}
 
 {% block extra_css %}
-  <style nonce="{{ request.csp_nonce }}">
-.code_sample {
-  background-color: var(--g300);
-  padding: 1rem;
-}
-  </style>
 {% endblock extra_css %}
 
 {% block breadcrumb %}

example_app/templates/example_app/page_colors.html

@@ -62,7 +62,7 @@ <h2>
   </p>
 
   <p>
-    Il faut utiliser une classe de type <code>fr-background-alt--&lt;color-name&gt;</code> (par exemple, <code>fr-background-alt--green-archipel</code>.)
+    Il faut utiliser une classe de type <code>fr-background-alt--&lt;color-name&gt;</code> (par exemple, <code>fr-background-alt--<span class="example-color-name-full">green-archipel</span></code>.)
   </p>
 
   <div class="fr-background-alt fr-px-2w fr-pt-2w fr-pb-2v fr-mb-2w">
@@ -95,7 +95,7 @@ <h3>
       Personnalise la couleur du fond et du texte.
     </p>
     <p>
-      Il faut utiliser une classe de type <code>fr-badge--&lt;color-name&gt;</code> (par exemple, <code>fr-quote--green-archipel</code>.)
+      Il faut utiliser une classe de type <code>fr-badge--&lt;color-name&gt;</code> (par exemple, <code>fr-badge--<span class="example-color-name-accent">green-archipel</span></code>.)
     </p>
 
     <p>
@@ -109,7 +109,7 @@ <h3>
       Personnalise la couleur de l’icône.
     </p>
     <p>
-      Il faut utiliser une classe de type <code>fr-quote--&lt;color-name&gt;</code> (par exemple, <code>fr-quote--green-archipel</code>.)
+      Il faut utiliser une classe de type <code>fr-quote--&lt;color-name&gt;</code> (par exemple, <code>fr-quote--<span class="example-color-name-accent">green-archipel</span></code>.)
     </p>
     {% dsfr_quote components_data.quote.sample_data.0 %}
 
@@ -120,7 +120,7 @@ <h3>
       Personnalise la couleur du fond et de la bordure.
     </p>
     <p>
-      Il faut utiliser une classe de type <code>fr-callout--&lt;color-name&gt;</code> (par exemple, <code>fr-callout--green-archipel</code>.)
+      Il faut utiliser une classe de type <code>fr-callout--&lt;color-name&gt;</code> (par exemple, <code>fr-callout--<span class="example-color-name-accent">green-archipel</span></code>.)
     </p>
     {% dsfr_callout components_data.callout.sample_data.0 %}
 
@@ -131,7 +131,7 @@ <h3>
       Personnalise la couleur de la bordure.
     </p>
     <p>
-      Il faut utiliser une classe de type <code>fr-highlight--&lt;color-name&gt;</code> (par exemple, <code>fr-highlight--green-archipel</code>.)
+      Il faut utiliser une classe de type <code>fr-highlight--&lt;color-name&gt;</code> (par exemple, <code>fr-highlight--<span class="example-color-name-accent">green-archipel</span></code>.)
     </p>
     {% dsfr_highlight components_data.highlight.sample_data.0 %}
 
@@ -142,7 +142,7 @@ <h3>
       Personnalise la couleur du fond, du texte et de l’icône. Seuls les tags cliquables sont pris en compte.
     </p>
     <p>
-      Il faut utiliser une classe de type <code>fr-tag--&lt;color-name&gt;</code> (par exemple, <code>fr-tag--green-archipel</code>.)
+      Il faut utiliser une classe de type <code>fr-tag--&lt;color-name&gt;</code> (par exemple, <code>fr-tag--<span class="example-color-name-accent">green-archipel</span></code>.)
     </p>
     <ul class="fr-tags-group">
       <li>
@@ -155,7 +155,7 @@ <h3>
   </div>
 {% endblock content %}
 {% block extra_js %}
-  <script>
+  <script nonce="{{ request.csp_nonce }}">
     const colors_list = [
       "blue-france",
       "red-marianne",
@@ -197,17 +197,28 @@ <h3>
       }
     }
 
+    function manageExampleColorNames(color, group) {
+      if (color == "") {
+        color = "green-archipel"
+      }
+      const collection = document.getElementsByClassName("example-color-name-" + group);
+      for (const element of collection){
+        element.innerHTML= color;
+      }
+    }
+
     document.getElementById('id_color_accent').addEventListener('input', function (event) {
       manageColorClasses("fr-badge", event.target.value);
       manageColorClasses("fr-quote", event.target.value);
       manageColorClasses("fr-callout", event.target.value);
       manageColorClasses("fr-highlight", event.target.value);
       manageColorClasses("fr-tag", event.target.value);
+      manageExampleColorNames(event.target.value, "accent");
     }, false);
 
     document.getElementById('id_color_full').addEventListener('input', function (event) {
-      console.log("here");
       manageColorClasses("fr-background-alt", event.target.value);
+      manageExampleColorNames(event.target.value, "full");
     }, false);
 
   </script>