diff --git a/components/accordion/index.html b/components/accordion/index.html index aa3be5972..1c0b721f9 100644 --- a/components/accordion/index.html +++ b/components/accordion/index.html @@ -171,7 +171,9 @@ -
{'content': 'Contenu d’exemple avec du gras et de ' 'l’italique', 'id': 'sample-accordion', @@ -1546,11 +1548,11 @@ + nonce="pdrLcqkZDfkc7xGChBS7ZA=="> + nonce="pdrLcqkZDfkc7xGChBS7ZA=="> diff --git a/components/accordion_group/index.html b/components/accordion_group/index.html index 94123b8d1..07e2c3dea 100644 --- a/components/accordion_group/index.html +++ b/components/accordion_group/index.html @@ -171,7 +171,9 @@
Contenu d’exemple avec du gras et de ' 'l’italique
[{'content': 'Contenu d’exemple avec du gras et de ' 'l’italique (1)', 'id': 'sample-accordion-1', @@ -1555,11 +1557,11 @@ + nonce="nlfd8qNbzy/jwvO6uqGg8A=="> + nonce="nlfd8qNbzy/jwvO6uqGg8A=="> diff --git a/components/alert/index.html b/components/alert/index.html index f7e1bbd33..63a842d8f 100644 --- a/components/alert/index.html +++ b/components/alert/index.html @@ -171,7 +171,9 @@
Contenu d’exemple avec du gras et de ' 'l’italique (1)
{'content': 'Cliquer sur la croix pour fermer l’alerte.', 'heading_tag': 'h3', 'id': 'alert-success-tag', @@ -1434,11 +1436,11 @@ + aria-controls="accordion-odzddwefuchlufqy"> Données d’exemple - + {'content': 'Cliquer sur la croix pour fermer l’alerte.', 'heading_tag': 'h3', 'is_collapsible': True, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-uaoqsbxcapormaft"> Données d’exemple - + {'content': 'Cette alerte n’a pas de croix de fermeture.', 'heading_tag': 'h3', 'title': 'Alerte non-refermable de type info', @@ -1541,11 +1543,11 @@ + aria-controls="accordion-dgwocqsstfvfppqt"> Données d’exemple - + {'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'} @@ -1584,11 +1586,11 @@ + aria-controls="accordion-smvqtzvnyxjioprw"> Données d’exemple - + {'content': 'Petite alerte sans titre.', 'extra_classes': 'fr-alert--sm', 'type': 'warning'} @@ -1760,11 +1762,11 @@ + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> diff --git a/components/back_to_top/index.html b/components/back_to_top/index.html index 63c52f013..452c897a3 100644 --- a/components/back_to_top/index.html +++ b/components/back_to_top/index.html @@ -155,7 +155,9 @@ - + + nonce="npb/Xf/YTzs2808/T6eu0A=="> + nonce="npb/Xf/YTzs2808/T6eu0A=="> diff --git a/components/badge/index.html b/components/badge/index.html index 0bef2d518..7ab567c91 100644 --- a/components/badge/index.html +++ b/components/badge/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-sywkiqtvrhzzuhqe"> Données d’exemple - + {'extra_classes': '', 'label': 'Badge simple'} @@ -1408,11 +1410,11 @@ + aria-controls="accordion-ycaccddmzbdhrxgy"> Données d’exemple - + {'extra_classes': 'fr-badge--sm', 'label': 'Petit badge'} @@ -1444,11 +1446,11 @@ + aria-controls="accordion-csekdghtndpdvfvc"> Données d’exemple - + {'extra_classes': 'fr-badge--green-menthe', 'label': 'Badge coloré'} @@ -1480,11 +1482,11 @@ + aria-controls="accordion-sacqkcztpflscqik"> Données d’exemple - + {'extra_classes': 'fr-badge--success', 'label': 'Badge système'} @@ -1645,11 +1647,11 @@ + nonce="borTGj/ivWMBixAtFt2dWw=="> + nonce="borTGj/ivWMBixAtFt2dWw=="> diff --git a/components/badge_group/index.html b/components/badge_group/index.html index 81349417e..59a21e270 100644 --- a/components/badge_group/index.html +++ b/components/badge_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-wlrbiueutquqzjhk"> Données d’exemple - + [{'extra_classes': 'fr-badge--success', 'label': 'Succès'}, {'extra_classes': 'fr-badge--info', 'label': 'Info'}, {'extra_classes': 'fr-badge--warning', 'label': 'Avertissement'}, @@ -1538,11 +1540,11 @@ + nonce="0RoefmhIkr7UzEJEhEEceA=="> + nonce="0RoefmhIkr7UzEJEhEEceA=="> diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index 35242bc98..bbe8380bc 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -171,7 +171,9 @@ - + + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> diff --git a/components/button/index.html b/components/button/index.html index 4a664677a..95a2d1c2f 100644 --- a/components/button/index.html +++ b/components/button/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-ltvmvtrreriayzfu"> Données d’exemple - + {'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"} @@ -1420,11 +1422,11 @@ + aria-controls="accordion-rzpnershkpstgsrp"> Données d’exemple - + {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton secondaire', 'name': 'secundary-button', @@ -1464,11 +1466,11 @@ + aria-controls="accordion-ysrhghiikmqochqk"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary', 'label': 'Bouton tertiaire', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"} @@ -1506,11 +1508,11 @@ + aria-controls="accordion-qqkgtruzvjhwaaql"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary-no-outline', 'label': 'Bouton tertiaire sans bordure', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')", @@ -1678,11 +1680,11 @@ + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> diff --git a/components/button_group/index.html b/components/button_group/index.html index c00cdacd3..2da0522f1 100644 --- a/components/button_group/index.html +++ b/components/button_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-yqtohwpgfzidcvje"> Données d’exemple - + {'extra_classes': 'fr-btns-group--icon-left', 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left', 'label': 'Bouton principal', @@ -1443,11 +1445,11 @@ + aria-controls="accordion-nvnrtahetlxalntt"> Données d’exemple - + {'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'content': 'Cliquer sur la croix pour fermer l’alerte.', 'heading_tag': 'h3', 'is_collapsible': True, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-uaoqsbxcapormaft"> Données d’exemple - + {'content': 'Cette alerte n’a pas de croix de fermeture.', 'heading_tag': 'h3', 'title': 'Alerte non-refermable de type info', @@ -1541,11 +1543,11 @@ + aria-controls="accordion-dgwocqsstfvfppqt"> Données d’exemple - + {'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'} @@ -1584,11 +1586,11 @@ + aria-controls="accordion-smvqtzvnyxjioprw"> Données d’exemple - + {'content': 'Petite alerte sans titre.', 'extra_classes': 'fr-alert--sm', 'type': 'warning'} @@ -1760,11 +1762,11 @@ + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> diff --git a/components/back_to_top/index.html b/components/back_to_top/index.html index 63c52f013..452c897a3 100644 --- a/components/back_to_top/index.html +++ b/components/back_to_top/index.html @@ -155,7 +155,9 @@ - + + nonce="npb/Xf/YTzs2808/T6eu0A=="> + nonce="npb/Xf/YTzs2808/T6eu0A=="> diff --git a/components/badge/index.html b/components/badge/index.html index 0bef2d518..7ab567c91 100644 --- a/components/badge/index.html +++ b/components/badge/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-sywkiqtvrhzzuhqe"> Données d’exemple - + {'extra_classes': '', 'label': 'Badge simple'} @@ -1408,11 +1410,11 @@ + aria-controls="accordion-ycaccddmzbdhrxgy"> Données d’exemple - + {'extra_classes': 'fr-badge--sm', 'label': 'Petit badge'} @@ -1444,11 +1446,11 @@ + aria-controls="accordion-csekdghtndpdvfvc"> Données d’exemple - + {'extra_classes': 'fr-badge--green-menthe', 'label': 'Badge coloré'} @@ -1480,11 +1482,11 @@ + aria-controls="accordion-sacqkcztpflscqik"> Données d’exemple - + {'extra_classes': 'fr-badge--success', 'label': 'Badge système'} @@ -1645,11 +1647,11 @@ + nonce="borTGj/ivWMBixAtFt2dWw=="> + nonce="borTGj/ivWMBixAtFt2dWw=="> diff --git a/components/badge_group/index.html b/components/badge_group/index.html index 81349417e..59a21e270 100644 --- a/components/badge_group/index.html +++ b/components/badge_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-wlrbiueutquqzjhk"> Données d’exemple - + [{'extra_classes': 'fr-badge--success', 'label': 'Succès'}, {'extra_classes': 'fr-badge--info', 'label': 'Info'}, {'extra_classes': 'fr-badge--warning', 'label': 'Avertissement'}, @@ -1538,11 +1540,11 @@ + nonce="0RoefmhIkr7UzEJEhEEceA=="> + nonce="0RoefmhIkr7UzEJEhEEceA=="> diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index 35242bc98..bbe8380bc 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -171,7 +171,9 @@ - + + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> diff --git a/components/button/index.html b/components/button/index.html index 4a664677a..95a2d1c2f 100644 --- a/components/button/index.html +++ b/components/button/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-ltvmvtrreriayzfu"> Données d’exemple - + {'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"} @@ -1420,11 +1422,11 @@ + aria-controls="accordion-rzpnershkpstgsrp"> Données d’exemple - + {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton secondaire', 'name': 'secundary-button', @@ -1464,11 +1466,11 @@ + aria-controls="accordion-ysrhghiikmqochqk"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary', 'label': 'Bouton tertiaire', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"} @@ -1506,11 +1508,11 @@ + aria-controls="accordion-qqkgtruzvjhwaaql"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary-no-outline', 'label': 'Bouton tertiaire sans bordure', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')", @@ -1678,11 +1680,11 @@ + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> diff --git a/components/button_group/index.html b/components/button_group/index.html index c00cdacd3..2da0522f1 100644 --- a/components/button_group/index.html +++ b/components/button_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-yqtohwpgfzidcvje"> Données d’exemple - + {'extra_classes': 'fr-btns-group--icon-left', 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left', 'label': 'Bouton principal', @@ -1443,11 +1445,11 @@ + aria-controls="accordion-nvnrtahetlxalntt"> Données d’exemple - + {'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'content': 'Cette alerte n’a pas de croix de fermeture.', 'heading_tag': 'h3', 'title': 'Alerte non-refermable de type info', @@ -1541,11 +1543,11 @@ + aria-controls="accordion-dgwocqsstfvfppqt"> Données d’exemple - + {'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'} @@ -1584,11 +1586,11 @@ + aria-controls="accordion-smvqtzvnyxjioprw"> Données d’exemple - + {'content': 'Petite alerte sans titre.', 'extra_classes': 'fr-alert--sm', 'type': 'warning'} @@ -1760,11 +1762,11 @@ + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> + nonce="nV+bVQd0UqsVXWOJ5Knxjw=="> diff --git a/components/back_to_top/index.html b/components/back_to_top/index.html index 63c52f013..452c897a3 100644 --- a/components/back_to_top/index.html +++ b/components/back_to_top/index.html @@ -155,7 +155,9 @@ - + + nonce="npb/Xf/YTzs2808/T6eu0A=="> + nonce="npb/Xf/YTzs2808/T6eu0A=="> diff --git a/components/badge/index.html b/components/badge/index.html index 0bef2d518..7ab567c91 100644 --- a/components/badge/index.html +++ b/components/badge/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-sywkiqtvrhzzuhqe"> Données d’exemple - + {'extra_classes': '', 'label': 'Badge simple'} @@ -1408,11 +1410,11 @@ + aria-controls="accordion-ycaccddmzbdhrxgy"> Données d’exemple - + {'extra_classes': 'fr-badge--sm', 'label': 'Petit badge'} @@ -1444,11 +1446,11 @@ + aria-controls="accordion-csekdghtndpdvfvc"> Données d’exemple - + {'extra_classes': 'fr-badge--green-menthe', 'label': 'Badge coloré'} @@ -1480,11 +1482,11 @@ + aria-controls="accordion-sacqkcztpflscqik"> Données d’exemple - + {'extra_classes': 'fr-badge--success', 'label': 'Badge système'} @@ -1645,11 +1647,11 @@ + nonce="borTGj/ivWMBixAtFt2dWw=="> + nonce="borTGj/ivWMBixAtFt2dWw=="> diff --git a/components/badge_group/index.html b/components/badge_group/index.html index 81349417e..59a21e270 100644 --- a/components/badge_group/index.html +++ b/components/badge_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-wlrbiueutquqzjhk"> Données d’exemple - + [{'extra_classes': 'fr-badge--success', 'label': 'Succès'}, {'extra_classes': 'fr-badge--info', 'label': 'Info'}, {'extra_classes': 'fr-badge--warning', 'label': 'Avertissement'}, @@ -1538,11 +1540,11 @@ + nonce="0RoefmhIkr7UzEJEhEEceA=="> + nonce="0RoefmhIkr7UzEJEhEEceA=="> diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index 35242bc98..bbe8380bc 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -171,7 +171,9 @@ - + + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> + nonce="rOSSKSn+PGpHKM4wgWKo0A=="> diff --git a/components/button/index.html b/components/button/index.html index 4a664677a..95a2d1c2f 100644 --- a/components/button/index.html +++ b/components/button/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-ltvmvtrreriayzfu"> Données d’exemple - + {'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"} @@ -1420,11 +1422,11 @@ + aria-controls="accordion-rzpnershkpstgsrp"> Données d’exemple - + {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton secondaire', 'name': 'secundary-button', @@ -1464,11 +1466,11 @@ + aria-controls="accordion-ysrhghiikmqochqk"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary', 'label': 'Bouton tertiaire', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"} @@ -1506,11 +1508,11 @@ + aria-controls="accordion-qqkgtruzvjhwaaql"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary-no-outline', 'label': 'Bouton tertiaire sans bordure', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')", @@ -1678,11 +1680,11 @@ + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> diff --git a/components/button_group/index.html b/components/button_group/index.html index c00cdacd3..2da0522f1 100644 --- a/components/button_group/index.html +++ b/components/button_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-yqtohwpgfzidcvje"> Données d’exemple - + {'extra_classes': 'fr-btns-group--icon-left', 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left', 'label': 'Bouton principal', @@ -1443,11 +1445,11 @@ + aria-controls="accordion-nvnrtahetlxalntt"> Données d’exemple - + {'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'heading_tag': 'h3', 'title': 'Alerte medium sans contenu', 'type': 'warning'}
{'content': 'Petite alerte sans titre.', 'extra_classes': 'fr-alert--sm', 'type': 'warning'}
{'extra_classes': '', 'label': 'Badge simple'}
{'extra_classes': 'fr-badge--sm', 'label': 'Petit badge'}
{'extra_classes': 'fr-badge--green-menthe', 'label': 'Badge coloré'}
{'extra_classes': 'fr-badge--success', 'label': 'Badge système'}
[{'extra_classes': 'fr-badge--success', 'label': 'Succès'}, {'extra_classes': 'fr-badge--info', 'label': 'Info'}, {'extra_classes': 'fr-badge--warning', 'label': 'Avertissement'}, @@ -1538,11 +1540,11 @@ + nonce="0RoefmhIkr7UzEJEhEEceA=="> + nonce="0RoefmhIkr7UzEJEhEEceA=="> diff --git a/components/breadcrumb/index.html b/components/breadcrumb/index.html index 35242bc98..bbe8380bc 100644 --- a/components/breadcrumb/index.html +++ b/components/breadcrumb/index.html @@ -171,7 +171,9 @@
{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}
{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton secondaire', 'name': 'secundary-button', @@ -1464,11 +1466,11 @@ + aria-controls="accordion-ysrhghiikmqochqk"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary', 'label': 'Bouton tertiaire', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"} @@ -1506,11 +1508,11 @@ + aria-controls="accordion-qqkgtruzvjhwaaql"> Données d’exemple - + {'extra_classes': 'fr-btn--tertiary-no-outline', 'label': 'Bouton tertiaire sans bordure', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')", @@ -1678,11 +1680,11 @@ + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> diff --git a/components/button_group/index.html b/components/button_group/index.html index c00cdacd3..2da0522f1 100644 --- a/components/button_group/index.html +++ b/components/button_group/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-yqtohwpgfzidcvje"> Données d’exemple - + {'extra_classes': 'fr-btns-group--icon-left', 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left', 'label': 'Bouton principal', @@ -1443,11 +1445,11 @@ + aria-controls="accordion-nvnrtahetlxalntt"> Données d’exemple - + {'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-btn--tertiary', 'label': 'Bouton tertiaire', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire')"}
{'extra_classes': 'fr-btn--tertiary-no-outline', 'label': 'Bouton tertiaire sans bordure', 'onclick': "alert('Vous avez cliqué sur le bouton tertiaire sans bordure')", @@ -1678,11 +1680,11 @@ + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> + nonce="mANfUgM9hY9pmcOXMLtAEQ=="> diff --git a/components/button_group/index.html b/components/button_group/index.html index c00cdacd3..2da0522f1 100644 --- a/components/button_group/index.html +++ b/components/button_group/index.html @@ -171,7 +171,9 @@
{'extra_classes': 'fr-btns-group--icon-left', 'items': [{'extra_classes': 'fr-icon-checkbox-circle-line fr-btn--icon-left', 'label': 'Bouton principal', @@ -1443,11 +1445,11 @@ + aria-controls="accordion-nvnrtahetlxalntt"> Données d’exemple - + {'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-btns-group--equisized', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1539,11 +1541,11 @@ + aria-controls="accordion-bnjyszgijckxhhix"> Données d’exemple - + {'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dxlhpttzsceohmog"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-btns-group--inline-sm', 'items': [{'label': 'Bouton principal', 'onclick': "alert('Vous avez cliqué sur le bouton principal')"}, @@ -1764,11 +1766,11 @@ + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> + nonce="2hZvkS/86HBt6rCUUdQTPQ=="> diff --git a/components/callout/index.html b/components/callout/index.html index 9d820c9f5..d1b05d296 100644 --- a/components/callout/index.html +++ b/components/callout/index.html @@ -171,7 +171,9 @@
{'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton normal', 'onclick': "alert('Ce bouton est bien un bouton')"}, @@ -1437,11 +1439,11 @@ + aria-controls="accordion-mcbycnuyndfyhezs"> Données d’exemple - + {'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'button': {'extra_classes': 'fr-btn--secondary', 'label': 'Bouton qui est un lien', 'url': 'https://www.systeme-de-design.gouv.fr/'}, @@ -1491,11 +1493,11 @@ + aria-controls="accordion-kyyejajkcnwikozp"> Données d’exemple - + {'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pytzlpzfnodqiktv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-callout--green-emeraude', 'icon_class': 'fr-icon-palette-line', 'text': 'Cette mise en avant a une classe de couleur', @@ -1668,11 +1670,11 @@ + nonce="jebQ4bHbBseyDfghnNVdoQ=="> + nonce="jebQ4bHbBseyDfghnNVdoQ=="> diff --git a/components/card/index.html b/components/card/index.html index af40df06d..dbf7ff358 100644 --- a/components/card/index.html +++ b/components/card/index.html @@ -171,7 +171,9 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1503,11 +1505,11 @@ + aria-controls="accordion-kclcskjwswcrldto"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1587,11 +1589,11 @@ + aria-controls="accordion-qppdjgmcbjzdogpr"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1671,11 +1673,11 @@ + aria-controls="accordion-yvswjyhvqupbjldy"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -1755,11 +1757,11 @@ + aria-controls="accordion-vgvkgzrbpkcbtulx"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1848,11 +1850,11 @@ + aria-controls="accordion-ikjfhbxieuknxcaw"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -1954,11 +1956,11 @@ + aria-controls="accordion-loikdmkzctiizlcv"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères.\n' ' ', @@ -2068,11 +2070,11 @@ + aria-controls="accordion-dbgfjfdfwhbuvibq"> Données d’exemple - + {'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'bottom_detail': {'icon': 'fr-icon-warning-fill', 'text': 'Détail (optionnel)'}, 'description': 'Texte de la carte.\n' @@ -2149,11 +2151,11 @@ + aria-controls="accordion-fmhvfvpimvtotsna"> Données d’exemple - + {'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'call_to_action': {'buttons': [{'extra_classes': 'fr-btn--secondary', 'label': 'Bouton 1'}, {'label': 'Bouton 2'}]}, @@ -2263,11 +2265,11 @@ + aria-controls="accordion-shdihngikjyilham"> Données d’exemple - + {'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'call_to_action': {'links': [{'label': 'Lien interne', 'url': '/'}, {'is_external': True, 'label': 'Lien externe', @@ -2380,11 +2382,11 @@ + aria-controls="accordion-nxncfnbjcysjuuuu"> Données d’exemple - + {'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Texte de la carte.\n' ' Il peut prendre jusqu’à 200 caractères, ' 'ce qui devrait correspondre\n' @@ -2466,11 +2468,11 @@ + aria-controls="accordion-omsdekgqrykwcftp"> Données d’exemple - + {'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@ - + + nonce="tv4JXTf5My/BP0tOpguopA=="> + nonce="tv4JXTf5My/BP0tOpguopA=="> diff --git a/components/consent/index.html b/components/consent/index.html index 50716472b..015ed7207 100644 --- a/components/consent/index.html +++ b/components/consent/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-jvvsxzhjidbtamiw"> Données d’exemple - + {'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-kyvgipvwwfeitxhe"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'description': 'Peut être utile au besoin.', 'enlarge_link': False, 'extra_classes': 'fr-card--horizontal', @@ -2666,11 +2668,11 @@ + nonce="f5USiM2vI6domkN1IN7s4A=="> + nonce="f5USiM2vI6domkN1IN7s4A=="> diff --git a/components/checkbox/index.html b/components/checkbox/index.html index 663f9f249..9a929bdf9 100644 --- a/components/checkbox/index.html +++ b/components/checkbox/index.html @@ -155,7 +155,9 @@
{'content': '\n' ' Bienvenue ! Nous utilisons des cookies pour ' 'améliorer votre expérience et les\n' @@ -1584,11 +1586,11 @@ + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> + nonce="RN3UZpXpbiuJVi1kFUI+Qw=="> diff --git a/components/content/index.html b/components/content/index.html index 7a4084311..d056d6884 100644 --- a/components/content/index.html +++ b/components/content/index.html @@ -171,7 +171,9 @@
{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 16x9', @@ -1459,11 +1461,11 @@ + aria-controls="accordion-unlbqoztpfgnyfmf"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image en largeur normale et en 4x3', @@ -1514,11 +1516,11 @@ + aria-controls="accordion-aifyaykjyisqqjhx"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image plus large que la colonne de contenu', @@ -1569,11 +1571,11 @@ + aria-controls="accordion-twvlranplxjpwvuq"> Données d’exemple - + {'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'alt_text': 'Silhouette stylisée représentant le soleil au-dessus de deux ' 'montagnes.', 'caption': 'Image SVG avec un lien dans la légende.\n' @@ -2167,11 +2169,11 @@ + aria-controls="accordion-uyrxfizhaokphpme"> Données d’exemple - + {'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'alt_text': '', 'caption': 'Vidéo avec transcription', 'iframe': {'height': '450', @@ -2354,25 +2356,25 @@ + aria-controls="fr-transcription__collapse-transcription-lnocjtagtpdwsmra"> Transcription - + - + aria-labelledby="fr-transcription-modal-transcription-lnocjtagtpdwsmra-title"> @@ -2380,13 +2382,13 @@ Fermer - Transcription @@ -2605,11 +2607,11 @@ + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> + nonce="bBQ4u7o4EVGGzgBgNfOkbg=="> diff --git a/components/css/index.html b/components/css/index.html index 4494cc179..852156e47 100644 --- a/components/css/index.html +++ b/components/css/index.html @@ -171,7 +171,9 @@ - + + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> + nonce="UXrF8/3GWa5NfKTf2KpSGg=="> diff --git a/components/django_messages/index.html b/components/django_messages/index.html index b8df3734f..fb5368449 100644 --- a/components/django_messages/index.html +++ b/components/django_messages/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-nnyhxetytsezvsja"> Données d’exemple - + {'is_collapsible': True} @@ -1641,11 +1643,11 @@ + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> + nonce="fmT3MG5S0R+fOCIl8dPA7Q=="> diff --git a/components/download/index.html b/components/download/index.html index 5ac06e8bc..0bdc1b74c 100644 --- a/components/download/index.html +++ b/components/download/index.html @@ -155,7 +155,9 @@ - + + nonce="mky01IPOmZnGSuWWSaC33g=="> + nonce="mky01IPOmZnGSuWWSaC33g=="> diff --git a/components/favicon/index.html b/components/favicon/index.html index d59f99d07..5a94f79eb 100644 --- a/components/favicon/index.html +++ b/components/favicon/index.html @@ -171,7 +171,9 @@ - + + nonce="a3rGfc7H53GZwOPEv6VbNg=="> + nonce="a3rGfc7H53GZwOPEv6VbNg=="> diff --git a/components/file_upload/index.html b/components/file_upload/index.html index c1d023f72..4e0c00aa0 100644 --- a/components/file_upload/index.html +++ b/components/file_upload/index.html @@ -155,7 +155,9 @@ - + + nonce="5mKhXMCXK962Y0A6bTFu5g=="> + nonce="5mKhXMCXK962Y0A6bTFu5g=="> diff --git a/components/follow/index.html b/components/follow/index.html index 8f39869c1..39f1825e6 100644 --- a/components/follow/index.html +++ b/components/follow/index.html @@ -156,7 +156,9 @@ - + + nonce="N4iN4omum9ik8soTpGdIIQ=="> + nonce="N4iN4omum9ik8soTpGdIIQ=="> diff --git a/components/footer/index.html b/components/footer/index.html index e9fe64ef8..a20c5c41c 100644 --- a/components/footer/index.html +++ b/components/footer/index.html @@ -156,7 +156,9 @@ - + Blocs dépréciés + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> + nonce="XLW3u2cFbAN3RTHrTiHpCw=="> diff --git a/components/form/index.html b/components/form/index.html index 58421fc0c..9bc126de2 100644 --- a/components/form/index.html +++ b/components/form/index.html @@ -171,7 +171,9 @@ - + + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> + nonce="pNsUZZOaBGUs/gf+OfULJQ=="> diff --git a/components/form_field/index.html b/components/form_field/index.html index 63c684965..c8264a1a0 100644 --- a/components/form_field/index.html +++ b/components/form_field/index.html @@ -171,7 +171,9 @@ - + + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> + nonce="FgZzLZOkqCAUmaAJKI2Mgw=="> diff --git a/components/france_connect/index.html b/components/france_connect/index.html index 4abd1ead0..6f4744a9e 100644 --- a/components/france_connect/index.html +++ b/components/france_connect/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-dspsoyrospoqabfj"> Données d’exemple - + {} @@ -1385,7 +1387,7 @@ + id="franceconnect-bwsvtmmllknwxadn"> S’identifier avec FranceConnect @@ -1417,11 +1419,11 @@ + aria-controls="accordion-zwxcaeguxqmthyfa"> Données d’exemple - + {'id': 'france-connect-plus', 'plus': True} @@ -1598,11 +1600,11 @@ + nonce="8AvGmmLcXPV66qwghBg4bQ=="> + nonce="8AvGmmLcXPV66qwghBg4bQ=="> diff --git a/components/header/index.html b/components/header/index.html index 4e439a376..bc139aa2d 100644 --- a/components/header/index.html +++ b/components/header/index.html @@ -156,7 +156,9 @@ - + Opengraph + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> + nonce="7G80uubsEkpw2Ht/Wn7SyA=="> diff --git a/components/highlight/index.html b/components/highlight/index.html index 22774ba9c..0fbb342fc 100644 --- a/components/highlight/index.html +++ b/components/highlight/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-xcqwtbcnirmvpbeg"> Données d’exemple - + {'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-iibhuimdkubjxftk"> Données d’exemple - + {'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'} @@ -1581,11 +1583,11 @@ + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> + nonce="EDtOEoHEO6tuSeEPVOZ00A=="> diff --git a/components/index.html b/components/index.html index 2d91b0fb9..07f9141c7 100644 --- a/components/index.html +++ b/components/index.html @@ -156,7 +156,9 @@ - + + nonce="RGA7f6wmb5Af30i3y0sJKg=="> + nonce="RGA7f6wmb5Af30i3y0sJKg=="> diff --git a/components/input/index.html b/components/input/index.html index bc701f9e9..3f222873c 100644 --- a/components/input/index.html +++ b/components/input/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-pamvvysqmrqexhyp"> Données d’exemple - + {'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'is_collapsible': True}
{}
{'id': 'france-connect-plus', 'plus': True}
{'content': 'Contenu de la mise en exergue', 'size_class': 'fr-text--sm'}
{'content': 'Mise en exergue avec bordure colorée', 'extra_classes': 'fr-highlight--green-emeraude'}
{'id': 'example-input-id', 'label': 'Label du champ de saisie', 'onchange': 'alert(value)', @@ -1422,11 +1424,11 @@ + aria-controls="accordion-psajturkfjqjlyiq"> Données d’exemple - + {'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'label': 'Champ de saisie de date', 'max': '2021-09-23', 'min': '2021-09-04', @@ -1445,13 +1447,13 @@ - + Champ de saisie de date + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> + nonce="E6CPtQUJU6cyPaNMeBBKTg=="> diff --git a/components/js/index.html b/components/js/index.html index 09d6480d6..e6e88614e 100644 --- a/components/js/index.html +++ b/components/js/index.html @@ -171,7 +171,9 @@ - + + nonce="JMC4L0f4beNJBSJm3MdUhg=="> + nonce="JMC4L0f4beNJBSJm3MdUhg=="> diff --git a/components/link/index.html b/components/link/index.html index 661eee5e0..b58983977 100644 --- a/components/link/index.html +++ b/components/link/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-lgfmypakpshdrsbu"> Données d’exemple - + {'label': 'Lien interne', 'url': '/django-dsfr/components/link/'} @@ -1413,11 +1415,11 @@ + aria-controls="accordion-xvyipgddjnsxwydk"> Données d’exemple - + {'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'label': 'Lien interne', 'url': '/django-dsfr/components/link/'}
{'extra_classes': 'fr-link--lg', 'is_external': True, 'label': 'Lien externe, large', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-pvdbebvcfxmjfycv"> Données d’exemple - + {'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-icon-arrow-right-line fr-link--icon-right fr-link--sm', 'is_external': False, 'label': 'Petit lien interne avec flèche', @@ -1501,11 +1503,11 @@ + aria-controls="accordion-zgopysajqwkdshxf"> Données d’exemple - + {'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'} @@ -1672,11 +1674,11 @@ + nonce="y42Rq0DJwO+vrQntHwg14g=="> + nonce="y42Rq0DJwO+vrQntHwg14g=="> diff --git a/components/modal/index.html b/components/modal/index.html index 2e649f2d6..9a81d40b9 100644 --- a/components/modal/index.html +++ b/components/modal/index.html @@ -155,7 +155,9 @@ - + + nonce="7KhJC67gyVp2xbazfN0jYg=="> + nonce="7KhJC67gyVp2xbazfN0jYg=="> diff --git a/components/navigation/index.html b/components/navigation/index.html index b46cc3d7f..b9325d672 100644 --- a/components/navigation/index.html +++ b/components/navigation/index.html @@ -155,7 +155,9 @@ - + + nonce="tsBrkmfobSrJ4I2jehD8gA=="> + nonce="tsBrkmfobSrJ4I2jehD8gA=="> diff --git a/components/notice/index.html b/components/notice/index.html index da8dbabc9..d8496fe28 100644 --- a/components/notice/index.html +++ b/components/notice/index.html @@ -171,7 +171,9 @@ - + Returns a notice item. Takes a dict as parameter, with the following structure: data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", } +Possible values for type: + +info +warning +alert +weather-orange +weather-red +weather-purple +attack +witness +cyberattack + All of the keys of the dict can be passed directly as named parameters of the tag. Tag name: dsfr_notice @@ -1365,21 +1383,155 @@ + aria-controls="accordion-alrtlukwonrshgkw"> Données d’exemple - + + {'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'} + + + + + + + + + Résultat + + + + + + + + + + + Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + {'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'} + ' un lien au fil du texte, avec une ' + 'croix de fermeture.', + 'type': 'alert'} @@ -1393,15 +1545,428 @@ - + + + - - Label titre du bandeau d’information importante, comprenant un texte assez long + + Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'} + + + + + + + + + Résultat + + + + + + + + + + + Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'} + + + + + + + + + Résultat + + + + + + + + + + + Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'} + + + + + + + + + Résultat + + + + + + + + + + + Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + + + + Masquer le message + + + + + + + + + + Données + + + + + + + + + + Données d’exemple + + + + {'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'} + + + + + + + + + Résultat + + + + + + + + + + + Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + + nonce="ekYtTLOsEwIJON0OuQmR8w=="> + nonce="ekYtTLOsEwIJON0OuQmR8w=="> diff --git a/components/pagination/index.html b/components/pagination/index.html index 9ed16f1f9..298927e4b 100644 --- a/components/pagination/index.html +++ b/components/pagination/index.html @@ -171,7 +171,9 @@ - + + nonce="LLCLTHTp+0/qlB/ugwswpg=="> + nonce="LLCLTHTp+0/qlB/ugwswpg=="> diff --git a/components/password/index.html b/components/password/index.html index 9d68c93cc..5175f3e52 100644 --- a/components/password/index.html +++ b/components/password/index.html @@ -155,7 +155,9 @@ - + + nonce="4tBFaCE2zTON4Onq+BLkxA=="> + nonce="4tBFaCE2zTON4Onq+BLkxA=="> diff --git a/components/quote/index.html b/components/quote/index.html index a5877d930..6fa324e2e 100644 --- a/components/quote/index.html +++ b/components/quote/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bxyxykoczlrvqcju"> Données d’exemple - + {'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'extra_classes': 'fr-link--download', 'label': 'Lien de téléchargement', 'url': '/django-dsfr/components/link/'}
Returns a notice item. Takes a dict as parameter, with the following structure:
data_dict = { - "title": "Content of the notice item (can include html)", + "title": "Title of the notice item (can include html)", + "description": "(Optional) Content of the notice item (can include html)", + "link": "(Optional) Standardized link at the end of the notice.", + "type": "(Optional) The type of notice. See below for allowed values (default: info)", + "icon": "(Optional) The icon class for weather-related notices", "is_collapsible" : "(Optional) Boolean, set to true to add a 'close' button for the notice (default: false)", }
Possible values for type:
All of the keys of the dict can be passed directly as named parameters of the tag.
Tag name: dsfr_notice
{'is_collapsible': False, + 'title': 'Bandeau d’information importante par défaut, comprenant dans le ' + 'titre un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, sans croix ' + 'de fermeture.'}
+ Bandeau d’information importante par défaut, comprenant dans le titre un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, sans croix de fermeture. + + +
{'description': 'Il comprend en description un texte assez long\n' + ' pour être sur deux lignes, et \n' + ' un lien au fil du texte, avec ' + 'une croix de fermeture.', + 'is_collapsible': True, + 'title': 'Bandeau d’information importante de niveau warning.', + 'type': 'warning'}
+ Bandeau d’information importante de niveau warning. + + Il comprend en description un texte assez long + pour être sur deux lignes, et + un lien au fil du texte, avec une croix de fermeture. + + +
{'is_collapsible': True, - 'title': 'Label titre du bandeau d’information importante, comprenant un ' + 'title': 'Bandeau d’information importante de niveau alert, comprenant un ' 'texte assez long\n' ' pour être sur deux lignes, et \n' - ' un lien au fil du texte, ainsi ' - 'qu’une croix de fermeture.'}
- Label titre du bandeau d’information importante, comprenant un texte assez long +
+ Bandeau d’information importante de niveau alert, comprenant un texte assez long pour être sur deux lignes, et - un lien au fil du texte, ainsi qu’une croix de fermeture. + un lien au fil du texte, avec une croix de fermeture. + + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'icon': 'fr-icon-windy-fill', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo orange', + 'type': 'weather-orange'}
+ Vigilance météo orange + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo rouge', + 'type': 'weather-red'}
+ Vigilance météo rouge + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Vigilance météo violette', + 'type': 'weather-purple'}
+ Vigilance météo violette + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Attentat en cours', + 'type': 'attack'}
+ Attentat en cours + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Appel à témoins', + 'type': 'witness'}
+ Appel à témoins + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation + +
{'description': 'Attention, l’utilisation de ce type de bandeau est encadrée, ' + 'cf. documentation.', + 'is_collapsible': True, + 'link': 'https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/bandeau-d-information-importante/', + 'title': 'Cyber-attaque', + 'type': 'cyberattack'}
+ Cyber-attaque + + Attention, l’utilisation de ce type de bandeau est encadrée, cf. documentation. + + + Lien de consultation +
{'author': 'Auteur', 'details': [{'text': 'Détail sans lien'}, {'link': 'https://template.incubateur.net/', @@ -1458,11 +1460,11 @@ + aria-controls="accordion-txwmklglqiigjcew"> Données d’exemple - + {'text': 'Citation très basique, sans aucun des champs optionnels.'} @@ -1634,11 +1636,11 @@ + nonce="/KZHzYhSzUVFBzUfejqUOw=="> + nonce="/KZHzYhSzUVFBzUfejqUOw=="> diff --git a/components/radio/index.html b/components/radio/index.html index 5242d71bf..336d85928 100644 --- a/components/radio/index.html +++ b/components/radio/index.html @@ -155,7 +155,9 @@ - + + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> + nonce="AMPR7TvJP11PA/hDW/v5Jg=="> diff --git a/components/radio_rich/index.html b/components/radio_rich/index.html index 23a0bd2c9..ae42ae8ab 100644 --- a/components/radio_rich/index.html +++ b/components/radio_rich/index.html @@ -155,7 +155,9 @@ - + + nonce="CDVsnALz9VPaNESUTsmP2w=="> + nonce="CDVsnALz9VPaNESUTsmP2w=="> diff --git a/components/range/index.html b/components/range/index.html index 49f7169b4..fa18e48b3 100644 --- a/components/range/index.html +++ b/components/range/index.html @@ -155,7 +155,9 @@ - + + nonce="ZHu17SiUDDK1amNUZZO39Q=="> + nonce="ZHu17SiUDDK1amNUZZO39Q=="> diff --git a/components/search_bar/index.html b/components/search_bar/index.html index 2139c4d84..50deea264 100644 --- a/components/search_bar/index.html +++ b/components/search_bar/index.html @@ -155,7 +155,9 @@ - + + nonce="n9pb2JJMxf6imXpKi3TGdg=="> + nonce="n9pb2JJMxf6imXpKi3TGdg=="> diff --git a/components/segmented_control/index.html b/components/segmented_control/index.html index 8d7d9bd7d..2483a3fb8 100644 --- a/components/segmented_control/index.html +++ b/components/segmented_control/index.html @@ -155,7 +155,9 @@ - + + nonce="phMqpCZCpfiqVdG0vGzByQ=="> + nonce="phMqpCZCpfiqVdG0vGzByQ=="> diff --git a/components/select/index.html b/components/select/index.html index 3b3d80cd3..5daf89660 100644 --- a/components/select/index.html +++ b/components/select/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-tykakjqpagvknlgh"> Données d’exemple - + {'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@ - + + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> + nonce="Nnz4NrO8R0gpP3DIEO5nDA=="> diff --git a/components/sidemenu/index.html b/components/sidemenu/index.html index 3828ca348..bff9fe05f 100644 --- a/components/sidemenu/index.html +++ b/components/sidemenu/index.html @@ -171,7 +171,9 @@ - + + aria-controls="accordion-bztuwiucahwxmrhn"> Données d’exemple - + {'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@
{'text': 'Citation très basique, sans aucun des champs optionnels.'}
{'default': {'disabled': True, 'hidden': True, 'text': 'Choisissez une option'}, 'id': 'select-example-id', 'label': 'Label de l’élément select', @@ -1579,11 +1581,11 @@ + nonce="xJu9onOhlxhfLodswAkcFA=="> + nonce="xJu9onOhlxhfLodswAkcFA=="> diff --git a/components/share/index.html b/components/share/index.html index 9e0d8c462..ca639d638 100644 --- a/components/share/index.html +++ b/components/share/index.html @@ -155,7 +155,9 @@
{'items': [{'items': [{'label': 'Une page', 'link': '#'}, {'label': 'Une autre page', 'link': '/sidemenu'}], 'label': 'Menu replié'}, @@ -1696,11 +1698,11 @@