Migration des cards du parcours prise RDV usager au DSFR #4894

AntoineGirard · 2024-12-11T17:58:53Z

Contexte

Dans le cadre du passage du produit au DSFR, on refont les cards utilisés dans la première partie du parcours usager.

Solution

Utilisation des cards DSFR
Changement de la couleur du bandeau
Suppression des alertes spécifiques aux RDV de suivi : suite à concertation de trio, nous décidons de supprimer cette alerte car :
- Elle ne concerne qu’une infime partie de nos usagers
- Elle n’est déjà pas vu parce que tout en bas des pages

Captures d'écran

Avant	Après

adipasquale

@AntoineGirard et @Teodora-Stanki énorme merci et félicitations pour cette grande étape 🙇

Ça fait très plaisir de voir ces pages bouger dans la bonne direction, et je crois que toute l’équipe sera ravie de découvrir ça.

J’ai fait énormément de remarques sur des petits détails d’implém Antoine, il n’y a rien de bloquant et c’est plus pour engager la discussion et éventuellement aligner certaines pratiques.

J’ai testé sur la review app, tout roule ! je note ici quelques remarques d’ordre plus général :

Je trouve la police du numéro de téléphone vraiment très petite ici

Je trouve aussi que l’alignement du petit icône calendrier de la phrase sur la prochaine dispo pourrait être un peu amélioré, peut-être qu’il faudrait plutôt que tout le texte s’aligne sur sa droite ?

Et enfin le padding intérieur des cards DSFR est encore plus grand que celui de bootstrap. Je trouve que sur les vues mobiles c’est assez dommageable, on fait déjà plein de retours à la ligne surprenants à cause du peu d’espace horizontal. J’ai regardé en diagonale sans trouver, mais est-ce que ce n’est pas configurable quelque part ?

adipasquale · 2024-12-17T08:10:41Z

app/javascript/stylesheets/components/_utilities.scss

+.rdv-color-active-blue {
+  color: var(--background-active-blue-france);
+}
+


il y a déjà des définitions de classes CSS pour utiliser des couleurs DSFR dans _utilities_dsfr.scss ça serait top de mettre cette nouvelle à côté.

j’avais aussi essayé de reprendre l’ensemble du token dans le nom de la classe donc éventuellement pour harmoniser : .rdv-color-background-active-blue-france

adipasquale · 2024-12-17T08:11:45Z

app/views/search/_banner.html.slim

  .fr-container
-    h1.mb-3.rdv-color-white
-      = render(current_domain.search_banner_template_name, context: context)
+    .fr-col-lg-10.fr-col-offset-lg-1


il me semblait que c’était nécessaire de mettre .fr-col-12 pour le défaut vue plus petite, non ?

Effectivement dans la doc, c'est comme ça
Je n’ai pas l’impression que ça change grand-chose parce que c’est déjà le comportement de base
Dans le doute je rajoute

adipasquale · 2024-12-17T15:06:21Z

app/views/search/_lieu_selection.html.slim

-              h4.card-title.mb-0.mt-0.rdv-color-text-default-success.rdv-font-weight-700= lieu.name
-              .mb-3.mt-0.rdv-color-text-default-success.rdv-font-weight-700.larger=lieu.organisation.name
-              .card-subtitle= lieu.address
-              .card-subtitle= context.service.name


Note pour moi-même : on n’affiche plus le nom du service dorénavant dans la card. J’imagine que c’est volontaire car le nom du service est déjà présent tout en haut 👍

Yes c’est volontaire et c’est exactement pour ça qu’on la retiré

adipasquale · 2024-12-17T15:14:25Z

app/views/search/_lieu_selection.html.slim

+            .fr-card__end
+              .fr-card__detail
+                p.fr-icon-calendar-2-fill
+                  = "#{t('.next_availability')} "


je crois que la syntaxe si tu souhaites un trailing space peut-être « simplifiée » en => t(".next_availability")

Justement non, ça ne fonctionne pas
Quand tu fais => t(".next_availability") ça affiche le >

arg :/ je crois qu’il faut qu’on mette à jour slim.

merci pour ta réponse.

adipasquale · 2024-12-17T15:17:50Z

app/views/search/_lieu_selection.html.slim

+        - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at))
+      - else
+        - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)), "data-turbolinks": false, data: { toggle: "modal", target: "#js-rdv-restriction-motif#{lieu.id}" }
+        = render "/common/modal", id: "js-rdv-restriction-motif#{lieu.id}", title: "À lire avant de prendre un rendez-vous", confirm_path: prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)) do


je ne suis pas sûr que ça soit une bonne idée de mettre la modale hors du li et qu’il y ait une div invisible enfant du ul. Mais c’est purement de l’intuition peut-être que ça ne pose aucun souci.

j’aurais tendance à dire que ça me dérange pas trop de répéter la condition if motif.restricton_for_rdv.blank? à plusieurs endroits de ce template si nécessaire

Intuitivement, j'aurais dit la même chose que toi

Dans les faits :

Le fait de mettre le dialogue dans la fr-card casse la modale en appliquant l’effet du lien accepter à toute la modale

Après quelques tests, ça n’a aucune incidence sur l’accessibilité

À terme, j'aimerais bien refondre ce système, car ici, on répète x fois la même modale. Mais je pense que ça peut être fait dans une autre PR et ça peut attendre de savoir ce qu’on veut faire sur cette partie en terme produit.

très clair, merci d’avoir pris le temps de répondre 🙇

app/views/search/_service_selection.html.slim

adipasquale · 2024-12-17T15:32:42Z

spec/features/agents/agent_can_prescribe_rdvs_spec.rb

@@ -55,16 +55,16 @@ def go_to_prescription_page
      expect(page).to have_content("Sélectionnez le service avec qui vous voulez prendre un RDV")
      expect(page).to have_content(motif_mds.service.name)
      expect(page).to have_content(motif_autre_service.service.name)
-      find("h3", text: motif_mds.service.name).ancestor("a").click
+      find("a", text: motif_mds.service.name).ancestor(".fr-card__title").click


j’ai testé et tu peux simplifier tout ça en click_on motif_mds.service.name, et j’imagine que la plupart des suivants similaires peuvent aussi l’être si tu as le courage.

adipasquale · 2024-12-17T15:34:27Z

spec/features/prescripteurs/can_add_a_user_to_a_rdv_collectif_spec.rb

@@ -26,7 +26,7 @@
    visit "http://www.rdv-aide-numerique-test.localhost/org/#{organisation.id}"
    click_on "Formation emails" # choix du motif

-    click_on "Prochaine disponibilité le" # choix du lieu
+    click_on lieu.name


personnellement j’aime bien utiliser les valeurs en dur dans les expect et les directives des features specs , ici ça donnerait click_on "Bureau" je crois.

ce n’est absolument pas nécessaire de changer, je te le signale au passage et ce n’est pas une pratique particulièrement recommandée par l’équipe en général.

Je trouve que ça rend les specs plus lisibles et ça évite de reproduire des erreurs dans le code des specs

adipasquale · 2024-12-17T15:35:58Z

spec/features/users/online_booking/creneaux_selection_spec.rb

@@ -26,7 +26,7 @@

      click_button("Rechercher")

-      find("h3", text: motif.name).click
+      find("a", text: motif.name).click


on peut probablement faire click_on motif.name ici aussi

Yes, j’ai hésité ! Je vais refaire une passe sur tous les petits éléments des tests dès qu’on a stabilisé le rendu

victormours

Plein de bonnes idées, mais c'est dommage qu'on perde un peu en ergonomie sur la card de choix de structure/lieux

victormours · 2024-12-17T16:21:41Z

app/views/search/_lieu_selection.html.slim

+        - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)), "data-turbolinks": false, data: { toggle: "modal", target: "#js-rdv-restriction-motif#{lieu.id}" }
+        = render "/common/modal", id: "js-rdv-restriction-motif#{lieu.id}", title: "À lire avant de prendre un rendez-vous", confirm_path: prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)) do
+          = restriction_for_rdv_to_html(motif)
+      li.fr-card.fr-enlarge-link.fr-card--lg.fr-card--horizontal.fr-mb-3w


J'ai des gros doutes sur comment on présente l'information dans cette card. D'un côté c'est très bien qu'on enlève le service, mais on a beauuuucoup fait descendre la date de prochaine dispo dans la hiérarchie de l'information, et on a cassé l'alignement qui permettait de comparer rapidement les adresses et les dates.

En tant qu'usager, à cette étape, j'essaye d'identifier le lieux qui a la combinaison "Adresse / date de prochaine dispo" la plus partique pour moi. Dans l'implémentation précédente, ces deux infos étaient alignées entre deux lieux successifs, donc je pouvais les comparer facilement. Maintenant je perds cet alignement, donc c'est plus difficile à comparerr, et la date de prochaine dispo est beaucoup moins visible.

Concernant cette carte, un travail de personnalisation de l'élément card avait été prévu au départ, pour faire ressortir la date dans un encadré bleu à l'intérieur de la card. Après une première investigation, il m'a semblé couteux que de continuer sur cette piste, et risqué quant à l'accessibilité du composant.
Aussi, nous avions comme parti pris de respecter les guidelines de la doc DSFR autant que possible, d'où le choix du composant card qui répond le plus à nos besoins.

Tu as raison quant au niveau de l'organisation des infos, mais le second parti pris a été de prioriser le rendu en mobile, en assumant que la majeure partie du traffic ce concentrait sur ce device. Du coup la question ne se pose pas étant donné que la disposition des info ne permet déjà pas ce type de comparaison en mobile.

Toutefois, en épluchant la doc, il est spécifié qu'on peut changer la couleur du texte de détail par une couleur plus prononcée. Je vais en discuter avec le trio pour voir ce qu'on peut faire a ce niveau là

victormours · 2024-12-17T16:23:33Z

app/views/search/_organisation_card_subtitles.html.slim

    = organisation.phone_number
 - if organisation.email?
-  .card-subtitle.my-2
-    .fa.fa-envelope>
+  .fr-card__detail.fr-icon-mail-fill


c'est vraiment accessible le niveau de contraste qu'on a sur cette card ? En plus le texte est vraiment petit

Le texte est par défaut en XS mais on peut le passer en SM, ce qui est préférable on est d'accord.
Pour la couleur, on prévoit d'en discuter en trio

victormours · 2024-12-17T16:27:45Z

app/views/search/_motif_selection.html.slim

-      .card.card-hoverable.mb-3
-        = link_to prendre_rdv_path(context.query_params.merge(motif_name_with_location_type: motif.name_with_location_type)), class: "rdv-background-image-none" do
-          = render "search/motif_selection_card", motif: motif
-  = render "search/referent_booking_card", context: context


on va appliquer chesterton's fence : on supprime cette card que si vous êtes capable de dire combien de rdv sont pris comme ça, et de retrouver le lien de l'issue dans laquelle elle a été créée (sans compter les réfactos qu'il y a eu dessus). Ça devrait pas prendre plus de 5mn :)
edit : désolé pour la formulation très sèche et pas correcte, et merci d'avoir sorti ça dans une autre pr

On a déjà fait une étude sur le sujet aujourd’hui avec Teo et Nessrine.
On va sortir cet élément de la PR et on va faire une autre proposition dans une PR séparée.

@victormours voici une contre-proposition pour ne pas supprimer le bandeau, mais mieux son apparition : #4918

app/views/search/_motif_selection.html.slim

AntoineGirard · 2024-12-19T14:28:52Z

Suite à vos retours et à nos différents échanges :

On augmente la police pour les infos de contacts (sans trop les augmenter non plus, car le but premier n’est pas de contacter l’organisation, mais de prendre RDV donc on ne veut pas donner + d’importance à cette information)
On change la couleur des dates de prochaines disponibilités en respectant le DSFR pour mieux voir cette information
On conserve quand même la date en bas de card puisque nous sommes ici sur du mobile first avec un usage à 90% mobile de la part de nos usagers

adipasquale

merci beaucoup pour votre patience avec mes retours @Teodora-Stanki et @AntoineGirard

Je suis fan 🙇 rien à redire.

Au passage je n’avais pas en tête qu’on affiche les emails des orgas dans le flow de prise de RDV usager, ça peut intéresser @victormours et @NesserineZarouri

adipasquale · 2024-12-19T14:37:33Z

app/views/search/_lieu_selection.html.slim

+        - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at))
+      - else
+        - link = link_to "#{lieu.name} - #{lieu.address}", prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)), "data-turbolinks": false, data: { toggle: "modal", target: "#js-rdv-restriction-motif#{lieu.id}" }
+        = render "/common/modal", id: "js-rdv-restriction-motif#{lieu.id}", title: "À lire avant de prendre un rendez-vous", confirm_path: prendre_rdv_path(context.query_params.merge(lieu_id: lieu.id, date: next_availability.starts_at)) do


très clair, merci d’avoir pris le temps de répondre 🙇

adipasquale · 2024-12-19T14:38:17Z

app/views/search/_lieu_selection.html.slim

+            .fr-card__end
+              .fr-card__detail
+                p.fr-icon-calendar-2-fill
+                  = "#{t('.next_availability')} "


arg :/ je crois qu’il faut qu’on mette à jour slim.

merci pour ta réponse.

adipasquale · 2024-12-19T14:39:24Z

spec/features/users/online_booking/creneaux_selection_spec.rb

@@ -26,7 +26,7 @@

      click_button("Rechercher")

-      find("h3", text: motif.name).click
+      find("a", text: motif.name).click


AntoineGirard added a11y DSFR labels Dec 11, 2024

AntoineGirard force-pushed the agd/migrate-prise-rdv-usager-link-cards branch 9 times, most recently from f683b47 to 99da19f Compare December 16, 2024 16:29

AntoineGirard marked this pull request as ready for review December 16, 2024 16:45

AntoineGirard requested review from Teodora-Stanki and adipasquale December 16, 2024 16:50

adipasquale approved these changes Dec 17, 2024

View reviewed changes

victormours reviewed Dec 17, 2024

View reviewed changes

AntoineGirard removed the request for review from Teodora-Stanki December 19, 2024 08:34

AntoineGirard added 3 commits December 19, 2024 11:32

Migration des cards du parcours prise RDV usager au DSFR

a0f43fb

Fix spec

4998864

Simplify col usage and fix prescription

89d9d56

AntoineGirard force-pushed the agd/migrate-prise-rdv-usager-link-cards branch from 99da19f to 6142195 Compare December 19, 2024 10:40

AntoineGirard added 2 commits December 19, 2024 12:40

Restore _referent_booking_card.html.slim

715374c

Review

94824cb

AntoineGirard force-pushed the agd/migrate-prise-rdv-usager-link-cards branch from 6142195 to 94824cb Compare December 19, 2024 12:36

AntoineGirard requested a review from Teodora-Stanki December 19, 2024 14:30

Teodora-Stanki approved these changes Dec 19, 2024

View reviewed changes

adipasquale approved these changes Dec 19, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migration des cards du parcours prise RDV usager au DSFR #4894

Migration des cards du parcours prise RDV usager au DSFR #4894

AntoineGirard commented Dec 11, 2024 •

edited

Loading

adipasquale left a comment

adipasquale Dec 17, 2024

adipasquale Dec 17, 2024

AntoineGirard Dec 19, 2024

adipasquale Dec 17, 2024

AntoineGirard Dec 17, 2024

adipasquale Dec 17, 2024

AntoineGirard Dec 17, 2024

adipasquale Dec 19, 2024

adipasquale Dec 17, 2024

AntoineGirard Dec 19, 2024

adipasquale Dec 19, 2024

adipasquale Dec 17, 2024

adipasquale Dec 17, 2024

adipasquale Dec 17, 2024

AntoineGirard Dec 19, 2024

adipasquale Dec 19, 2024

victormours left a comment

victormours Dec 17, 2024

Teodora-Stanki Dec 17, 2024 •

edited

Loading

victormours Dec 17, 2024

Teodora-Stanki Dec 17, 2024

victormours Dec 17, 2024 •

edited

Loading

AntoineGirard Dec 17, 2024

AntoineGirard Dec 19, 2024

AntoineGirard commented Dec 19, 2024

adipasquale left a comment

adipasquale Dec 19, 2024

adipasquale Dec 19, 2024

adipasquale Dec 19, 2024

Migration des cards du parcours prise RDV usager au DSFR #4894

Are you sure you want to change the base?

Migration des cards du parcours prise RDV usager au DSFR #4894

Conversation

AntoineGirard commented Dec 11, 2024 • edited Loading

Contexte

Solution

Captures d'écran

adipasquale left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

victormours left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Teodora-Stanki Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

victormours Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AntoineGirard commented Dec 19, 2024

adipasquale left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AntoineGirard commented Dec 11, 2024 •

edited

Loading

Teodora-Stanki Dec 17, 2024 •

edited

Loading

victormours Dec 17, 2024 •

edited

Loading