feat(DSFR.breadcrumb): switch to DSFR breadcrumb style since it is part of new service UI

2022-08-17 13:53:07 +02:00 · 2022-08-17 13:53:07 +02:00 · 549eda6fe3
commit 549eda6fe3
parent 05dfc93b7e
40 changed files with 194 additions and 160 deletions
--- a/app/views/administrateurs/_breadcrumbs.html.haml
+++ b/app/views/administrateurs/_breadcrumbs.html.haml
@ -1,14 +1,32 @@
 #breadcrumbs.sub-header
  .container.flex.justify-between.align-baseline.column
-    %ul.breadcrumbs.mt-1.mb-3
-      - steps.each do |step|
-        %li= step
+    %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
+      %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
+        = t('show', scope: [:layouts, :breadcrumb])
+
+      .fr-collapse#breadcrumb-1
+        %ol.fr-breadcrumb__list
+          %li= link_to t('root', scope: [:layouts, :breadcrumb]), root_path, class: 'fr-breadcrumb__link'
+          - steps.each.with_index do |step, i|
+            - if i == steps.size - 1
+              %li{ aria: {current: "page"}}
+                %span.fr-breadcrumb__link= step[0]
+            - else
+              %li= link_to step[0], step[1], class: 'fr-breadcrumb__link'
+
    - if defined?(preview) && preview
      .mb-2
-        = link_to "Prévisualiser le formulaire", apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button'
-        = link_to "Continuer >", admin_procedure_path(@procedure), title: 'Vous pourrez revenir ici par la suite', class: 'button accepted'
+        = link_to t('preview', scope: [:layouts, :breadcrumb]), apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button'
+        = link_to t('continue', scope: [:layouts, :breadcrumb]), admin_procedure_path(@procedure), title: t('continue_title', scope: [:layouts, :breadcrumb]), class: 'button accepted'

    - if defined?(metadatas)
-      %ul.admin-metadata
-        - metadatas.each do |metadata|
-          %li= metadata
+      .metadatas.pb-3
+        %h1= t('created_at', number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb])
+        - if @procedure.close?
+          %h2= t('closed_at', date: @procedure.closed_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb])
+        %p
+          - if @procedure.locked?
+            = t('published', scope: [:layouts, :breadcrumb])
+            = link_to procedure_lien(@procedure), procedure_lien(@procedure)
+          - else
+            = t('draft', scope: [:layouts, :breadcrumb])
--- a/app/views/administrateurs/archives/index.html.haml
+++ b/app/views/administrateurs/archives/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Export et Archives'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Export et Archives']] }


 .container
--- a/app/views/administrateurs/attestation_templates/edit.html.haml
+++ b/app/views/administrateurs/attestation_templates/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Attestation'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Attestation']] }

 .procedure-form#attestation-template-edit
  .procedure-form__columns.container
--- a/app/views/administrateurs/dossier_submitted_messages/edit.html.haml
+++ b/app/views/administrateurs/dossier_submitted_messages/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Fin de dépot'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Fin de dépot']] }

 .procedure-form
  .procedure-form__columns.container
--- a/app/views/administrateurs/experts_procedures/index.html.haml
+++ b/app/views/administrateurs/experts_procedures/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Liste des experts'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Liste des experts']] }

 .container
  %h1.page-title.mt-2 Experts invités sur #{@procedure.libelle}
--- a/app/views/administrateurs/groupe_instructeurs/index.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/index.html.haml
@ -1,13 +1,13 @@
 - if @procedure.routee?
  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to(t('.procedures'), admin_procedures_path),
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      t('.instructors_group')] }
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                      [t('.instructors_group')]] }
 - else
  = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to('Démarches', admin_procedures_path),
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                      'Instructeurs'] }
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                      ['Instructeurs']] }

 .container.groupe-instructeur
  %h1 Gérer les instructeurs et les options d'instruction de « #{@procedure.libelle} »
--- a/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/reaffecter_dossiers.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
-                    @groupe_instructeur.label] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
+                    [@groupe_instructeur.label]] }

 .container.groupe-instructeur

--- a/app/views/administrateurs/groupe_instructeurs/show.html.haml
+++ b/app/views/administrateurs/groupe_instructeurs/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
-                    @groupe_instructeur.label] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
+                    [@groupe_instructeur.label]] }

 .container.groupe-instructeur
  = render partial: 'administrateurs/groups_header'
--- a/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
+++ b/app/views/administrateurs/jeton_particulier/api_particulier.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    Procedure.human_attribute_name(:jeton_api_particulier)] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier)]] }

 .container
  .flex
--- a/app/views/administrateurs/jeton_particulier/show.html.haml
+++ b/app/views/administrateurs/jeton_particulier/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
-                    'Jeton'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
+                    ['Jeton']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/mail_templates/edit.html.haml
+++ b/app/views/administrateurs/mail_templates/edit.html.haml
@ -3,10 +3,10 @@
  = render partial: 'admin/closed_mail_template_attestation_inconsistency_alert'

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to("Emails", admin_procedure_mail_templates_path(@procedure)),
-                    @mail_template.class.const_get(:DISPLAYED_NAME)] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ["Emails", admin_procedure_mail_templates_path(@procedure)],
+                    [@mail_template.class.const_get(:DISPLAYED_NAME)]] }

 .procedure-form
  .procedure-form__columns.container
--- a/app/views/administrateurs/mail_templates/index.html.haml
+++ b/app/views/administrateurs/mail_templates/index.html.haml
@ -1,6 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to("#{@procedure.libelle}", admin_procedure_path(@procedure)), "Configuration des emails"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)}", admin_procedure_path(@procedure)],
+                    ["Configuration des emails"]] }

 .container
  - @mail_templates.each do |mail_template|
--- a/app/views/administrateurs/procedure_administrateurs/index.html.haml
+++ b/app/views/administrateurs/procedure_administrateurs/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Administrateurs'], preview: false }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Administrateurs']], preview: false }

 .container
  %h1 Gérer les administrateurs de « #{@procedure.libelle} »
--- a/app/views/administrateurs/procedures/annotations.html.haml
+++ b/app/views/administrateurs/procedures/annotations.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Configuration des annotations privées'], preview: true }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Configuration des annotations privées']], preview: true }

 .container
  %h1 Configuration des annotations privées
--- a/app/views/administrateurs/procedures/champs.html.haml
+++ b/app/views/administrateurs/procedures/champs.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    'Configuration des champs'], preview: @procedure.draft_revision.valid? }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Configuration des champs']], preview: @procedure.draft_revision.valid? }

 .container
  %h1 Configuration des champs
--- a/app/views/administrateurs/procedures/close.html.haml
+++ b/app/views/administrateurs/procedures/close.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    "#{@procedure.libelle}", 'archiver'],
-            metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)} - archiver"]],
+            metadatas: true }

 .container
  .card
--- a/app/views/administrateurs/procedures/edit.html.haml
+++ b/app/views/administrateurs/procedures/edit.html.haml
@ -1,9 +1,9 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Description'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Description']] }
 .procedure-form
  .procedure-form__columns.container
    = form_for @procedure,
--- a/app/views/administrateurs/procedures/jeton.html.haml
+++ b/app/views/administrateurs/procedures/jeton.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Jeton'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Jeton']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/procedures/modifications.html.haml
+++ b/app/views/administrateurs/procedures/modifications.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Modifications'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Modifications']] }
 .container
  %h1.page-title
    Historique des modifications du formulaire
--- a/app/views/administrateurs/procedures/monavis.html.haml
+++ b/app/views/administrateurs/procedures/monavis.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'MonAvis'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['MonAvis']] }

 .container
  %h1.page-title
--- a/app/views/administrateurs/procedures/new.html.haml
+++ b/app/views/administrateurs/procedures/new.html.haml
@ -1,7 +1,7 @@
 - content_for(:root_class, 'scroll-margins-for-sticky-footer')

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
                    'Nouvelle'] }

 .procedure-form
--- a/app/views/administrateurs/procedures/publication.html.haml
+++ b/app/views/administrateurs/procedures/publication.html.haml
@ -1,8 +1,8 @@

 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Publication'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Publication']] }
 .container
  - if @procedure.draft_types_de_champ.dubious.present?
    .card.warning.mb-3
--- a/app/views/administrateurs/procedures/show.html.haml
+++ b/app/views/administrateurs/procedures/show.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    "#{@procedure.libelle}", ],
-            metadatas: ["Créée le #{@procedure.created_at.strftime('%d/%m/%Y')} - n° #{@procedure.id}", "#{@procedure.close? ? "Close le #{@procedure.closed_at.strftime('%d/%m/%Y')}" : @procedure.locked? ? "Publiée - #{procedure_lien(@procedure)}" : "Brouillon"}"] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    ["#{@procedure.libelle.truncate_words(4)}"]],
+            metadatas: true }

 .container.procedure-admin-container
  - if @procedure.draft_revision.valid?
--- a/app/views/administrateurs/procedures/transfert.html.haml
+++ b/app/views/administrateurs/procedures/transfert.html.haml
@ -1,6 +1,6 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    'Transfert'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Transfert']] }
 .container
  = render partial: 'procedure_transfert'
--- a/app/views/administrateurs/services/edit.html.haml
+++ b/app/views/administrateurs/services/edit.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
-                    'Modifier le service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
+                    ['Modifier le service']] }


 .container
--- a/app/views/administrateurs/services/index.html.haml
+++ b/app/views/administrateurs/services/index.html.haml
@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    'Choix du service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service']] }

 #services-index.container
  %h1.fr-h1 Liste des Services
--- a/app/views/administrateurs/services/new.html.haml
+++ b/app/views/administrateurs/services/new.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
-                    'Nouveau service'] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
+                    ['Nouveau service']] }

 .container
  %h1 Nouveau Service
--- a/app/views/administrateurs/sources_particulier/show.html.haml
+++ b/app/views/administrateurs/sources_particulier/show.html.haml
@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
-                    t('.data_sources')] }
+  locals: { steps: [['Démarches', admin_procedures_path],
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
+                    [t('.data_sources')]] }

 .container
  %h1.page-title= t('.title')