ETQ utilisateur je peux voir le statut open data d'une fiche de jeu de données

[DaFrenchFrog]

Design

Carte jeu de données

• [ ] Ajouter un badge sur la carte (maquette ici)

Fiche jeu de données

La maquette et ses deux statuts possible (open data ou restreint) est ici : https://www.figma.com/file/42KOPuvkD1jpubEe2mMtXr/DATALOGUE-maquettes?node-id=1578%3A62167

Conditions d'acceptation

• [ ] L'état du composant dépend de la présence ou non d'un lien. S'il y a un lien, on affiche l'option "open data", s'il n'y en a pas on affiche l'option "restreint"

• [ ] Dans le cas open data le lien est clicable et ouvre un nouvel onglet

[Volubyl]

@DaFrenchFrog j'ai une petite interrogation par rapport aux badges.

Dans le DSFR, j'ai l'impression que les badges n'autorisent qu'un nombre limité d'icone et qu'ils déconseillent d'utiliser une icone "custom"

Voir doc ici : https://gouvfr.atlassian.net/wiki/spaces/DB/pages/851869737/Badges et la partie "ne pas faire"

Bref, si on est rigoriste par rapport au DSFR on ne pourrait pas utiliser de badge (mon intepretation est elle juste ?)

Sauf que là c'est la deuxième fois que l'on est bloqué par le DSFR et je ne sais quelle attitude adopter.

Pour le coup, ma propal serait de outrepasser le DSFR et faire un composant html avec du CSS qui n'utilise pas le DSFR.

Genre :

<a class="badge" href="#" > 
   <span class="fr-fi-fixxx"/> 
   open data 
 </a>

 <style>

 .badge {
   background-color : var(<la variable de couleur qui va bien>)
   ....
 }
</style>

@florimondmanca tu en penses quoi ?

[Volubyl]

D'ailleurs pourrais tu m'expliquer comment je récupère une icone depuis figma #noob que je suis ^^

[florimondmanca]

D'après le Slack DSFR, le composant badge est assez jeune, il a été ajouté avec la version 1.3.0 du DSFR publiée en janvier 2022. Ça explique peut-être pourquoi il a ces limites.

Ou alors c'est par conception : la page de documentation insiste lourdement sur le fait qu'un badge est pensé pour refléter un "état" ou un "statut". Par ailleurs un encart décourage spécifiquement d'utiliser des icônes :

À ne pas faire - Utiliser une icône dans un badge standard

On lit aussi:

Pour catégoriser, classer, organiser des contenus à l'aide de mots-clés, utiliser plutôt le composant Tag.

La classification "Open data / Restreint / Privé" consiste bien à "catégoriser, classer, organiser des contenus". Dès lors le DSFR nous enjoint à utiliser des tags.

Ça semble faisable cette fois, car contrairement à ici https://github.com/etalab/catalogage-donnees/issues/209#issuecomment-1117398147 où les tags auraient été gris (non cliquables), le tag open data serait cliquable (lien vers la page open data), et serait donc coloré en bleu. Et le DSFR prévoit bien des icônes arbitraires pour les tags. Ça pourrait donc peut-être convenir ? @DaFrenchFrog

[florimondmanca]

D'ailleurs pourrais tu m'expliquer comment je récupère une icone depuis figma #noob que je suis ^^

@Volubyl Si l'icône n'est pas disponible par défaut il faut l'ajouter manuellement à notre fonte d'icônes custom. J'avais déjà dû le faire pour certaines ici donc on a un outil Python tout fait. J'ai écrit une doc ici : https://github.com/etalab/catalogage-donnees/blob/master/docs/fr/outils.md#icônes-supplémentaires

[DaFrenchFrog]

Je vais poser la question mais je suis assez convaincu que l'on peut faire les choses comme maquettées. Chez nous le statut d'ouverture est un sujet majeur et je ne vois pas de raison qui empêcherait l'utilisation d'un badge.

@Volubyl pour récupérer les icone tu peux aller ici et à partir de là le plus simple je pense est de faire clic droit :

Sinon tu as la fonction export en bas à droite dans l'onglet design. Dis-moi si c'est ok.

Sinon pour tous les pictos autres que les pictos open data (qui sont custom), la source est la librairie Remix icons qui est utilisée par le DSFR : https://remixicon.com/

[DaFrenchFrog]

@Volubyl @florimondmanca Après avoir vu avec les équipes DSFR les badges avec icônes sont "réservés".

Du coup j'ai modifié les cartes.

• On reprend le même modèle d'item que pour les formats et couverture territoriale
• Selon le statut on change l'icône afférente

[florimondmanca]

Lien vers la doc Fontello pour préparer les icônes cc @DaFrenchFrog https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images

[DaFrenchFrog]

@Volubyl peux tu me dire si ce code fonctionne :

`

`

[Volubyl]

@DaFrenchFrog c'est ok pour le SVG ! Merci!

Tu pourrais me filer celui pour l'autre icone ?

[DaFrenchFrog]

@Volubyl Top. Voici : `

`

[DaFrenchFrog]

@Volubyl avec un seul path : `

`