Improve cards

numerique-gouv · Apr 3, 2024 · 78b71d2 · 78b71d2
1 parent 16027ec
commit 78b71d2
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 44 deletions.
diff --git a/dsfr/templates/dsfr/card.html b/dsfr/templates/dsfr/card.html
@@ -4,11 +4,15 @@
   <div class="fr-card__body">
     <div class="fr-card__content">
       <{{ self.heading_tag | default:"p" }} class="fr-card__title">
-      <a href="{{ self.link }}"
-         target="{% if self.new_tab %}_blank{% else %}_self{% endif %}"
-         {% if self.new_tab %}rel="noopener noreferrer" title="{{ self.title }} - Ouvrir dans une nouvelle fenêtre"{% endif %}>
+      {% if self.link %}
+        <a href="{{ self.link }}"
+           target="{% if self.new_tab %}_blank{% else %}_self{% endif %}"
+           {% if self.new_tab %}rel="noopener noreferrer" title="{{ self.title }} - Ouvrir dans une nouvelle fenêtre"{% endif %}>
+          {{ self.title |truncatechars:100 }}
+        </a>
+      {% else %}
         {{ self.title |truncatechars:100 }}
-      </a>
+      {% endif %}
       </{{ self.heading_tag | default:"p" }}>
       <p class="fr-card__desc">
         {{ self.description |truncatechars:200 }}

diff --git a/dsfr/templatetags/dsfr_tags.py b/dsfr/templatetags/dsfr_tags.py
@@ -429,7 +429,7 @@ def dsfr_card(*args, **kwargs) -> dict:
         "image_alt": "(Optional) alt text of the image",
         "media_badges": "(Optional) list of badges for the media area (similar to a badge_group tag)"
         "new_tab": "(Optional) if True, forces links to open in a new tab",
-        "link": "(Optional) link of the tag",
+        "link": "(Optional) link of the card item",
         "enlarge_link": "(Optional) boolean. If true (default), the link covers the whole card",
         "extra_classes": "(Optional) string with names of extra classes",
         "top_detail": "(Optional) dict with a top detail content and optional tags or badges",
@@ -446,9 +446,15 @@ def dsfr_card(*args, **kwargs) -> dict:
     - `fr-card--horizontal`: makes the card horizontal
     - `fr-card--horizontal-tier`: allows a 33% ratio instead of the 40% default
     - `fr-card--horizontal-half`: allows a 50% ratio instead of the 40% default
-    - `fr-card--download`: Replaces the forward arrow icon with a download one
+    - `fr-card--download`: replaces the forward arrow icon with a download one
+    - `fr-card--grey`: adds a grey background on the card
+    - `fr-card--no-border`: removes the card border
+    - `fr-card--no-background`: removes the card background
+    - `fr-card--shadow`: adds a shadow to the card border
 
     Format of the top_detail dict (every field is optional):
+
+    ```python
     top_detail = {
         "detail": {
             "text": "the detail text",
@@ -457,12 +463,16 @@ def dsfr_card(*args, **kwargs) -> dict:
         "tags": "a list of tag items (mutually exclusive with badges)",
         "badges": "a list of badge items (mutually exclusive with tags)"
     }
+    ```
 
     Format of the bottom_detail dict :
+
+    ```python
     bottom_detail = {
         "text": "the detail text",
         "icon_class": "(Optional) an icon class (eg, fr-icon-warning-fill)"
-    },
+    }
+    ```
 
 
     **Tag name**:
@@ -573,7 +583,9 @@ def dsfr_highlight(*args, **kwargs) -> dict:
 @register.inclusion_tag("dsfr/input.html")
 def dsfr_input(*args, **kwargs) -> dict:
     """
-    Returns a input item. Takes a dict as parameter, with the following structure:
+    Returns a input item. Prefer the use of an actual form (see documentation)
+
+    Takes a dict as parameter, with the following structure:
 
     ```python
     data_dict = {

diff --git a/example_app/dsfr_components.py b/example_app/dsfr_components.py
@@ -290,24 +290,21 @@
                 },
             },
             {
-                "title": "Carte avec détails d’en-tête (badges)",
+                "title": "Carte avec image et détails d’en-tête (badges)",
                 "description": """Texte de la carte.
                     Il peut prendre jusqu’à 200 caractères.
                     """,
                 "link": "https://www.systeme-de-design.gouv.fr/",
                 "new_tab": True,
+                "image_url": "/django-dsfr/static/img/placeholder.16x9.svg",
                 "top_detail": {
                     "detail": {
                         "icon_class": "fr-icon-warning-fill",
                         "text": "Détail (optionnel)",
                     },
                     "badges": [
-                        {
-                            "label": "Badge 1",
-                        },
-                        {
-                            "label": "Badge 2",
-                        },
+                        {"label": "Badge 1"},
+                        {"extra_classes": "fr-badge--warning", "label": "Badge 2"},
                     ],
                 },
             },
@@ -365,16 +362,22 @@
                 },
             },
             {
-                "title": "Télécharger le fichier",
-                "description": """Exemple de carte de téléchargement, avec un texte un peu long, qui peut
-                aller jusqu’à 200 caractères.""",
+                "title": "Carte avec un fond gris et une ombre",
+                "description": """Texte de la carte.
+                    Il peut prendre jusqu’à 200 caractères, ce qui devrait correspondre
+                    à environ cinq lignes dans le mode vertical, et deux en horizontal.
+                    """,
                 "link": "https://www.systeme-de-design.gouv.fr/",
-                "image_url": "/django-dsfr/static/img/placeholder.1x1.svg",
+                "image_url": "/django-dsfr/static/img/placeholder.16x9.svg",
                 "new_tab": True,
-                "bottom_detail": {
-                    "text": "PNG — 1,1 ko",
-                },
-                "extra_classes": "fr-card--horizontal fr-card--download",
+                "extra_classes": "fr-card--grey fr-card--shadow",
+            },
+            {
+                "title": "Carte sans lien",
+                "description": """Peut être utile au besoin.""",
+                "image_url": "/django-dsfr/static/img/placeholder.1x1.svg",
+                "enlarge_link": False,
+                "extra_classes": "fr-card--horizontal",
             },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte",
@@ -416,13 +419,13 @@
         "sample_data": [
             {
                 "id": "example-input-id",
-                "label": "Label of the input item",
+                "label": "Label du champ de saisie",
                 "type": "text",
                 "onchange": "alert(value)",
-                "value": "(Optional) Value of the input item",
+                "value": "(Optionnel) valeur du champ de saisie",
             },
             {
-                "label": "Label of the input item",
+                "label": "Champ de saisie de date",
                 "type": "date",
                 "onchange": "alert(value)",
                 "value": "2021-09-16",
@@ -482,7 +485,10 @@
                     },
                 ],
                 "image_url": "/django-dsfr/static/img/placeholder.1x1.svg",
-            }
+            },
+            {
+                "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/",
@@ -792,25 +798,13 @@
 ALL_IMPLEMENTED_COMPONENTS = dict(sorted(unsorted_IMPLEMENTED_COMPONENTS.items()))
 
 NOT_YET_IMPLEMENTED_COMPONENTS = {
-    "search_bar": {
-        "title": "Barre de recherche",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/barre-de-recherche",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/search/",
-    },
-    "radio": {
-        "title": "Bouton radio",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
-    },
     "radio_rich": {
         "title": "Bouton radio riche",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio-riche",
         "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
-    },
-    "checkbox": {
-        "title": "Case à cocher",
-        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/case-a-cocher",
-        "example_url": "https://main--ds-gouv.netlify.app/example/component/checkbox/",
+        "note": """À implémenter au sein des formulaires et non comme un composant à part.
+        cf. [#126](https://github.com/numerique-gouv/django-dsfr/issues/126)
+        """,
     },
     "content": {
         "title": "Contenu média",
@@ -874,6 +868,24 @@
         "example_url": "https://main--ds-gouv.netlify.app/example/component/upload/",
         "reason": "Champ de formulaire.",
     },
+    "search_bar": {
+        "title": "Barre de recherche",
+        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/barre-de-recherche",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/search/",
+        "reason": "Champ de formulaire.",
+    },
+    "radio": {
+        "title": "Bouton radio",
+        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/boutons-radio",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/radio/",
+        "reason": "Champ de formulaire.",
+    },
+    "checkbox": {
+        "title": "Case à cocher",
+        "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/case-a-cocher",
+        "example_url": "https://main--ds-gouv.netlify.app/example/component/checkbox/",
+        "reason": "Champ de formulaire.",
+    },
     "modal": {
         "title": "Modale",
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/modale",

diff --git a/example_app/templates/example_app/components_index.html b/example_app/templates/example_app/components_index.html
@@ -90,6 +90,13 @@ <h2>
             (<a href="{{ data.doc_url }}" target="_blank" rel="noopener">Documentation <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>
             —
             <a href="{{ data.example_url }}" target="_blank" rel="noopener">Exemple <span class="fr-sr-only">Ouvre une nouvelle fenêtre</span></a>)
+            {% if data.note %}
+              <ul>
+                <li>
+                  Note : {{ data.note|safe }}
+                </li>
+              </ul>
+            {% endif %}
           </li>
         {% endfor %}
       </ul>

diff --git a/example_app/views.py b/example_app/views.py
@@ -115,7 +115,7 @@ def components_index(request):
     payload["extra_components"] = dict(
         sorted(EXTRA_COMPONENTS.items(), key=lambda k: k[1]["title"])
     )
-    payload["not_yet"] = dict(
+    not_yet = dict(
         sorted(NOT_YET_IMPLEMENTED_COMPONENTS.items(), key=lambda k: k[1]["title"])
     )
     wont_be = dict(sorted(WONT_BE_IMPLEMENTED.items(), key=lambda k: k[1]["title"]))
@@ -127,11 +127,17 @@ def components_index(request):
         ],
     )
 
+    for k, v in not_yet.items():
+        if "note" in not_yet[k]:
+            not_yet[k]["note"] = (
+                md.convert(v["note"]).replace("<p>", "").replace("</p>", "")
+            )
+    payload["not_yet"] = not_yet
+
     for k, v in wont_be.items():
         wont_be[k]["reason"] = (
             md.convert(v["reason"]).replace("<p>", "").replace("</p>", "")
         )
-
     payload["wont_be"] = wont_be
     return render(request, "example_app/components_index.html", payload)