Ajouter les nouvelles variations sur les composants Tuile et Carte (#70

) * Improved the tile component to match the DSFR 1.10 * Add download card example to card component * Newline at the end of edited html files * Newline at the end of edited html files
numerique-gouv · Oct 30, 2023 · a709eed · a709eed
1 parent ec75723
commit a709eed
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 19 deletions.
diff --git a/dsfr/templates/dsfr/card.html b/dsfr/templates/dsfr/card.html
@@ -1,5 +1,5 @@
 {% load dsfr_tags %}
-<div class="fr-card{% if self.enlarge_link %} fr-enlarge-link{% endif %}{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}">
+<div class="fr-card{% if self.enlarge_link %} fr-enlarge-link{% endif %}{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}"{% if self.id %} id="{{ self.id }}"{% endif %}>
     <div class="fr-card__body">
         <div class="fr-card__content">
             <{{ self.heading_tag | default:"p" }} class="fr-card__title">
@@ -84,4 +84,4 @@
             {% endif %}
         {% endif %}
     </div>
-</div>
+</div>
diff --git a/dsfr/templates/dsfr/tile.html b/dsfr/templates/dsfr/tile.html
@@ -1,12 +1,51 @@
-<div class="fr-tile fr-enlarge-link{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}">
+{% load dsfr_tags %}
+<div class="fr-tile{% if self.enlarge_link %} fr-enlarge-link{% endif %}{% if self.extra_classes %} {{ self.extra_classes }}{% endif %}"{% if self.id %} id="{{ self.id }}"{% endif %}>
   <div class="fr-tile__body">
-    <p class="fr-tile__title">
-      <a class="fr-tile__link" href="{{ self.url }}">
-        {{ self.title }}
-      </a>
-    </p>
+    <div class="fr-tile__content">
+      <{{ self.heading_tag | default:"h3" }} class="fr-tile__title">
+        <a class="fr-tile__link" href="{{ self.url }}">
+          {{ self.title }}
+        </a>
+      </{{ self.heading_tag | default:"h3" }}>
+      {% if self.description %}<p class="fr-tile__desc">{{ self.description }}</p>{% endif %}
+      {% if self.detail %}<p class="fr-tile__detail">{{ self.detail }}</p>{% endif %}
+      {% if self.top_detail %}
+        <div class="fr-tile__start">
+          {% if self.top_detail.tags %}
+            <ul class="fr-tags-group">
+              {% for tag in self.top_detail.tags %}
+                <li>
+                  {% dsfr_tag tag %}
+                </li>
+              {% endfor %}
+            </ul>
+          {% elif self.top_detail.badges %}
+            <ul class="fr-badges-group">
+              {% for badge in self.top_detail.badges %}
+                  <li>
+                    {% dsfr_badge badge %}
+                  </li>
+              {% endfor %}
+            </ul>
+          {% endif %}
+        </div>
+      {% endif %}
+    </div>
   </div>
-  <div class="fr-tile__img" role="presentation">
-    <img src="{{ self.image_path }}" class="fr-responsive-img" alt="" />
+
+  <div class="fr-tile__header">
+    {% if self.svg_path %}
+      <div class="fr-tile__pictogram">
+          <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
+              <use class="fr-artwork-decorative" href="{{ self.svg_path }}#artwork-decorative"></use>
+              <use class="fr-artwork-minor" href="{{ self.svg_path }}#artwork-minor"></use>
+              <use class="fr-artwork-major" href="{{ self.svg_path }}#artwork-major"></use>
+          </svg>
+      </div>
+    {% else %}
+      <div class="fr-tile__img" role="presentation">
+        <img src="{{ self.image_path }}" class="fr-responsive-img" alt="" />
+      </div>
+    {% endif %}
   </div>
-</div>
+</div>
diff --git a/dsfr/templatetags/dsfr_tags.py b/dsfr/templatetags/dsfr_tags.py
@@ -383,6 +383,7 @@ def dsfr_card(*args, **kwargs) -> dict:
         "top_detail": "(Optional) dict with a top detail content and optional tags or badges",
         "bottom_detail": "(Optional) a detail string and optional icon",
         "call_to_action": "(Optional) a list of buttons or links at the bottom of the card,
+        "id": "(Optional) id of the tile item",
     }
 
     All of the keys of the dict can be passed directly as named parameters of the tag.
@@ -391,6 +392,7 @@ 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
 
     Format of the top_detail dict (every field is optional):
     top_detail = {
@@ -428,6 +430,7 @@ def dsfr_card(*args, **kwargs) -> dict:
         "top_detail",
         "bottom_detail",
         "call_to_action",
+        "id",
     ]
     tag_data = parse_tag_args(args, kwargs, allowed_keys)
 
@@ -834,11 +837,32 @@ def dsfr_tile(*args, **kwargs) -> dict:
         "title": "Title of the tile item",
         "url": "URL of the link of the tile item",
         "image_path": "path of the tile image",
+        "svg_path": "path of the tile image if this is a SVG",
+        "description": "(Optional) description of the tile item",
+        "detail": "(Optional) detail zone of the tile tiem
+        "top_detail": "(Optional) dict with a top detail content and optional tags or badges",
+        "heading_tag": "(Optional) Heading tag for the alert title (default: h3)",
+        "id": "(Optional) id of the tile item",
+        "enlarge_link": (Optional) boolean. If true (default), the link covers the whole card",
         "extra_classes: (Optional) string with names of extra classes"
     }
 
     All of the keys of the dict can be passed directly as named parameters of the tag.
 
+    Relevant extra_classes:
+    - fr-tile--sm: for a small (SM) tile
+    - fr-tile--horizontal: for an horizontal tile
+    - fr-tile--download: Replaces the forward arrow icon with a download one
+
+    Format of the top_detail dict (every field is optional):
+    top_detail = {
+        "tags": "a list of tag items (mutually exclusive with badges)",
+        "badges": "a list of badge items (mutually exclusive with tags)"
+    }
+
+    Note: "image_path" will work even if a SVG is provided, but "svg_path" will use a
+    <svg> html tag instead of the <img> tag.
+
     **Tag name**::
         dsfr_tile
     **Usage**::
@@ -848,10 +872,19 @@ def dsfr_tile(*args, **kwargs) -> dict:
         "title",
         "url",
         "image_path",
+        "svg_path",
+        "description",
+        "detail",
+        "top_detail",
+        "id",
+        "enlarge_link",
         "extra_classes",
     ]
     tag_data = parse_tag_args(args, kwargs, allowed_keys)
 
+    if "enlarge_link" not in tag_data:
+        tag_data["enlarge_link"] = True
+
     return {"self": tag_data}
 
 

diff --git a/example_app/tag_specifics.py b/example_app/tag_specifics.py
@@ -1,3 +1,5 @@
+from django.templatetags.static import static
+
 IMPLEMENTED_TAGS = {
     "accordion": {
         "title": "Accordéon (accordion)",
@@ -76,7 +78,7 @@
                 "type": "button",
                 "extra_classes": "fr-btn--secondary",
                 "onclick": "alert('Vous avez cliqué sur le bouton secondaire')",
-            }
+            },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton",
     },
@@ -257,6 +259,18 @@
                     ]
                 },
             },
+            {
+                "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.""",
+                "link": "https://www.systeme-de-design.gouv.fr/",
+                "image_url": "/django-dsfr/static/img/placeholder.1x1.svg",
+                "new_tab": True,
+                "bottom_detail": {
+                    "text": "PNG — 1,1 ko",
+                },
+                "extra_classes": "fr-card--horizontal fr-card--download",
+            },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte",
     },
@@ -483,10 +497,54 @@
         "title": "Tuile (tile)",
         "sample_data": [
             {
-                "title": "Titre de la tuile",
+                "title": "Tuile basique (verticale, MD)",
                 "url": "/",
-                "image_path": "/django-dsfr/static/img/placeholder.1x1.svg",
-            }
+                "image_path": static("img/placeholder.1x1.svg"),
+            },
+            {
+                "title": "Tuile horizontale",
+                "description": "Tuile horizontale (MD)",
+                "detail": "Avec un pictogramme SVG",
+                "url": "/",
+                "id": "tile-cityhall",
+                "extra_classes": "fr-tile--horizontal",
+                "svg_path": static(
+                    "dsfr/dist/artwork/pictograms/buildings/city-hall.svg"
+                ),
+            },
+            {
+                "title": "Tuile verticale (SM)",
+                "url": "/",
+                "id": "tile-nuclear-plant",
+                "extra_classes": "fr-tile--sm",
+                "svg_path": static(
+                    "dsfr/dist/artwork/pictograms/buildings/nuclear-plant.svg"
+                ),
+            },
+            {
+                "title": "Tuile horizontale (SM)",
+                "url": "/",
+                "id": "tile-map",
+                "extra_classes": "fr-tile--horizontal fr-tile--sm",
+                "top_detail": {
+                    "badges": [
+                        {
+                            "label": "Badge coloré",
+                            "extra_classes": "fr-badge--sm fr-badge--purple-glycine",
+                        },
+                    ]
+                },
+                "svg_path": static("dsfr/dist/artwork/pictograms/map/map.svg"),
+            },
+            {
+                "title": "Tuile de téléchargement",
+                "extra_classes": "fr-tile--horizontal fr-tile--download",
+                "detail": "PDF — 1,7 Mo",
+                "url": "/",
+                "svg_path": static(
+                    "dsfr/dist/artwork/pictograms/document/document-signature.svg"
+                ),
+            },
         ],
         "doc_url": "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/tuile",
     },

diff --git a/example_app/templates/example_app/page_tag.html b/example_app/templates/example_app/page_tag.html
@@ -98,10 +98,10 @@ <h3>Résultat</h3>
             {% dsfr_tag sample_data_item %}
           {% elif tag_name == "tile" %}
             <div class="fr-grid-row fr-grid-row--gutters">
-                <div class="fr-col-12 fr-col-md-3">
-                  {% dsfr_tile sample_data_item %}
-                </div>
+              <div class="fr-col-12">
+                {% dsfr_tile sample_data_item %}
               </div>
+            </div>
           {% endif %}
         {% endfor %}
       {% else %}
@@ -127,4 +127,4 @@ <h2>Résultat</h2>
     </div>
   </div>
 <br />
-{% endblock content %}
+{% endblock content %}