[Documentation] Ajout d’un exemple montrant comment faire un paragrap…

…he avec une couleur de fond alternative (#165) * Add documentation for a div/paragraph with alt background color * Improve order of content in files * Make documentation more explicit
numerique-gouv · Aug 19, 2024 · 211047a · 211047a
1 parent d633aec
commit 211047a
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 24 deletions.
diff --git a/example_app/dsfr_components.py b/example_app/dsfr_components.py
@@ -633,6 +633,9 @@
     "quote": {
         "title": "Citation",
         "sample_data": [
+            {
+                "text": "Citation très basique, sans aucun des champs optionnels.",
+            },
             {
                 "text": "Développer vos sites et applications en utilisant des composants prêts à l’emploi, accessibles et ergonomiques",  # noqa
                 "source_url": "https://www.systeme-de-design.gouv.fr/",
@@ -648,9 +651,6 @@
                 "image_url": "/django-dsfr/static/img/placeholder.1x1.svg",
                 "extra_classes": "fr-quote--green-emeraude",
             },
-            {
-                "text": "Citation très basique, sans aucun des champs optionnels.",
-            },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/citation",
         "example_url": "https://main--ds-gouv.netlify.app/example/component/quote/",

diff --git a/example_app/forms.py b/example_app/forms.py
@@ -4,7 +4,7 @@
     inlineformset_factory,
 )  # /!\ In order to use formsets
 
-from dsfr.constants import COLOR_CHOICES_ILLUSTRATION
+from dsfr.constants import COLOR_CHOICES, COLOR_CHOICES_ILLUSTRATION
 from dsfr.forms import DsfrBaseForm
 
 # /!\ In order to use formsets
@@ -214,9 +214,17 @@ def __init__(self, *args, **kwargs):
 )
 
 
-class ColorForm(DsfrBaseForm):
-    color = forms.ChoiceField(
+class AccentColorForm(DsfrBaseForm):
+    color_accent = forms.ChoiceField(
         label="Choisissez une couleur",
         required=False,
         choices=[("", "----")] + COLOR_CHOICES_ILLUSTRATION,
     )
+
+
+class FullColorForm(DsfrBaseForm):
+    color_full = forms.ChoiceField(
+        label="Choisissez une couleur",
+        required=False,
+        choices=[("", "----")] + COLOR_CHOICES,
+    )
diff --git a/example_app/templates/example_app/page_colors.html b/example_app/templates/example_app/page_colors.html
@@ -26,7 +26,7 @@ <h2>
     Cartes et tuiles
   </h2>
   <p>
-    Les cartes et tuiles peuvent prendre un fond gris à la place de la couleur par défaut.
+    Les cartes et tuiles peuvent prendre un fond gris à la place de la couleur par défaut, respectivement avec les classes <code>fr-card--grey</code> et <code>fr-tile--grey</code>.
   </p>
   <div class="fr-grid-row fr-grid-row--gutters fr-mb-4w">
     <div class="fr-col-12 fr-col-md-6">
@@ -50,14 +50,42 @@ <h2>
       {% dsfr_tile components_data.tile.sample_data.0 extra_classes="fr-tile--grey" %}
     </div>
   </div>
+
+  <h2>
+    Couleurs de fond
+  </h2>
+  <form class="fr-mb-4w">
+    {% dsfr_form full_color_form %}
+  </form>
+  <p>
+    Il est possible de changer la couleur de fond d’un paragraphe ou d’une div. Les couleurs primaires, neutres et illustratives sont prises en compte.
+  </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>.)
+  </p>
+
+  <div class="fr-background-alt fr-px-2w fr-pt-2w fr-pb-2v fr-mb-2w">
+    {# (La classe fr-background-alt n’est pas nécessaire, elle est utilisée ici pour le script de changement de couleur en fonction du formulaire) #}
+    <p>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Optio tempore atque quis nulla repellat dolores quibusdam temporibus laborum velit rerum aliquam amet recusandae consectetur voluptas,
+      quasi asperiores veniam excepturi ipsam.
+    </p>
+    <p>
+      Totam harum magni quis laudantium esse? Quod, tenetur nobis ab nostrum minus rerum magnam? Tempora provident distinctio fugit sunt, rem magni harum?
+      Minus explicabo repudiandae placeat suscipit! Earum provident facere, unde quam recusandae cumque neque quas porro dolor a natus labore delectus vel necessitatibus.
+    </p>
+  </div>
+
   <h2>
     Couleurs d’accentuation
   </h2>
   <p>
     Certains composants prennent une couleur d’accentuation comme paramètre. Seules les couleurs illustratives sont prises en compte.
   </p>
   <form class="fr-mb-4w">
-    {% dsfr_form %}
+    {% dsfr_form accent_color_form %}
   </form>
   <div class="example-use">
     <h3>
@@ -66,27 +94,42 @@ <h3>
     <p>
       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>.)
+    </p>
     {% dsfr_quote components_data.quote.sample_data.0 %}
+
     <h3>
       Mise en avant
     </h3>
     <p>
       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>.)
+    </p>
     {% dsfr_callout components_data.callout.sample_data.0 %}
+
     <h3>
       Mise en exergue
     </h3>
     <p>
       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>.)
+    </p>
     {% dsfr_highlight components_data.highlight.sample_data.0 %}
+
     <h3>
       Tag
     </h3>
     <p>
       Personnalise la couleur de la bordure, du fond 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>.)
+    </p>
     <ul class="fr-tags-group">
       <li>
         {% dsfr_tag components_data.tag.sample_data.1 %}
@@ -100,6 +143,9 @@ <h3>
 {% block extra_js %}
   <script>
     const colors_list = [
+      "blue-france",
+      "red-marianne",
+      "grey",
       "green-tilleul-verveine",
       "green-bourgeon",
       "green-emeraude",
@@ -137,13 +183,17 @@ <h3>
       }
     }
 
-
-    document.getElementById('id_color').addEventListener('input', function (event) {
+    document.getElementById('id_color_accent').addEventListener('input', function (event) {
       manageColorClasses("fr-quote", event.target.value);
       manageColorClasses("fr-callout", event.target.value);
       manageColorClasses("fr-highlight", event.target.value);
-      manageColorClasses("fr-table", event.target.value);
       manageColorClasses("fr-tag", event.target.value);
     }, false);
+
+    document.getElementById('id_color_full').addEventListener('input', function (event) {
+      console.log("here");
+      manageColorClasses("fr-background-alt", event.target.value);
+    }, false);
+
   </script>
 {% endblock extra_js %}
diff --git a/example_app/views.py b/example_app/views.py
@@ -15,7 +15,7 @@
 
 from dsfr.utils import generate_summary_items
 
-from example_app.forms import ColorForm, ExampleForm
+from example_app.forms import AccentColorForm, ExampleForm, FullColorForm
 
 from example_app.dsfr_components import (
     ALL_IMPLEMENTED_COMPONENTS,
@@ -455,6 +455,20 @@ def doc_form(request):
     return render(request, "example_app/doc_markdown.html", payload)
 
 
+@require_safe
+def resource_colors(request):
+    payload = init_payload("Couleurs")
+
+    accent_color_form = AccentColorForm()
+    full_color_form = FullColorForm()
+
+    payload["accent_color_form"] = accent_color_form
+    payload["full_color_form"] = full_color_form
+    payload["components_data"] = IMPLEMENTED_COMPONENTS
+
+    return render(request, "example_app/page_colors.html", payload)
+
+
 @require_safe
 def resource_icons(request):
     payload = init_payload("Icônes")
@@ -498,18 +512,6 @@ def resource_pictograms(request):
     return render(request, "example_app/page_pictograms.html", payload)
 
 
-@require_safe
-def resource_colors(request):
-    payload = init_payload("Couleurs")
-
-    form = ColorForm()
-
-    payload["form"] = form
-    payload["components_data"] = IMPLEMENTED_COMPONENTS
-
-    return render(request, "example_app/page_colors.html", payload)
-
-
 @require_safe
 def search(request):
     payload = init_payload("Recherche")