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

app/assets/stylesheets/breadcrumb.scss

@@ -1,27 +0,0 @@
-@import "colors";
-@import "constants";
-
-.breadcrumbs {
-  li {
-    display: inline-block;
-    font-weight: bold;
-    font-size: 14px;
-
-    a {
-      color: $black;
-      text-decoration: underline;
-    }
-
-    &::after {
-      content: " > ";
-    }
-
-    &:last-child {
-      color: $blue-france-500;
-
-      &::after {
-        content: none;
-      }
-    }
-  }
-}

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
+    %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
-      - steps.each do |step|
+      %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
-        %li= step
+        = 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 t('preview', scope: [:layouts, :breadcrumb]), 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('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.pb-3
-        - metadatas.each do |metadata|
+        %h1= t('created_at', number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'), scope: [:layouts, :breadcrumb])
-          %li= metadata
+        - 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])

app/views/administrateurs/archives/index.html.haml

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

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Attestation'] }
+                    ['Attestation']] }
 
 .procedure-form#attestation-template-edit
   .procedure-form__columns.container

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Fin de dépot'] }
+                    ['Fin de dépot']] }
 
 .procedure-form
   .procedure-form__columns.container

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Liste des experts'] }
+                    ['Liste des experts']] }
 
 .container
   %h1.page-title.mt-2 Experts invités sur #{@procedure.libelle}

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),
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                      t('.instructors_group')] }
+                      [t('.instructors_group')]] }
 - else
   = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to('Démarches', admin_procedures_path),
+    locals: { steps: [[t('.procedures'), admin_procedures_path],
-                      link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                      [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                      'Instructeurs'] }
+                      ['Instructeurs']] }
 
 .container.groupe-instructeur
   %h1 Gérer les instructeurs et les options d'instruction de « #{@procedure.libelle} »

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
-                    @groupe_instructeur.label] }
+                    [@groupe_instructeur.label]] }
 
 .container.groupe-instructeur
 

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to('Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)),
+                    ['Groupes d’instructeurs', admin_procedure_groupe_instructeurs_path(@procedure)],
-                    @groupe_instructeur.label] }
+                    [@groupe_instructeur.label]] }
 
 .container.groupe-instructeur
   = render partial: 'administrateurs/groups_header'

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    Procedure.human_attribute_name(:jeton_api_particulier)] }
+                    [Procedure.human_attribute_name(:jeton_api_particulier)]] }
 
 .container
   .flex

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
-                    'Jeton'] }
+                    ['Jeton']] }
 
 .container
   %h1.page-title

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to("Emails", admin_procedure_mail_templates_path(@procedure)),
+                    ["Emails", admin_procedure_mail_templates_path(@procedure)],
-                    @mail_template.class.const_get(:DISPLAYED_NAME)] }
+                    [@mail_template.class.const_get(:DISPLAYED_NAME)]] }
 
 .procedure-form
   .procedure-form__columns.container

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to("#{@procedure.libelle}", admin_procedure_path(@procedure)), "Configuration des emails"] }
+                    ["#{@procedure.libelle.truncate_words(4)}", admin_procedure_path(@procedure)],
+                    ["Configuration des emails"]] }
 
 .container
   - @mail_templates.each do |mail_template|

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Administrateurs'], preview: false }
+                    ['Administrateurs']], preview: false }
 
 .container
   %h1 Gérer les administrateurs de « #{@procedure.libelle} »

app/views/administrateurs/procedures/annotations.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Configuration des annotations privées'], preview: true }
+                    ['Configuration des annotations privées']], preview: true }
 
 .container
   %h1 Configuration des annotations privées

app/views/administrateurs/procedures/champs.html.haml

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

app/views/administrateurs/procedures/close.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    "#{@procedure.libelle}", 'archiver'],
+                    ["#{@procedure.libelle.truncate_words(4)} - 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"}"] }
+            metadatas: true }
 
 .container
   .card

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Description'] }
+                    ['Description']] }
 .procedure-form
   .procedure-form__columns.container
     = form_for @procedure,

app/views/administrateurs/procedures/jeton.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Jeton'] }
+                    ['Jeton']] }
 
 .container
   %h1.page-title

app/views/administrateurs/procedures/modifications.html.haml

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

app/views/administrateurs/procedures/monavis.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'MonAvis'] }
+                    ['MonAvis']] }
 
 .container
   %h1.page-title

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

app/views/administrateurs/procedures/publication.html.haml

@@ -1,8 +1,8 @@
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Publication'] }
+                    ['Publication']] }
 .container
   - if @procedure.draft_types_de_champ.dubious.present?
     .card.warning.mb-3

app/views/administrateurs/procedures/show.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    "#{@procedure.libelle}", ],
+                    ["#{@procedure.libelle.truncate_words(4)}"]],
-            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"}"] }
+            metadatas: true }
 
 .container.procedure-admin-container
   - if @procedure.draft_revision.valid?

app/views/administrateurs/procedures/transfert.html.haml

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

app/views/administrateurs/services/edit.html.haml

@@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
-                    'Modifier le service'] }
+                    ['Modifier le service']] }
 
 
 .container

app/views/administrateurs/services/index.html.haml

@@ -1,7 +1,7 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    'Choix du service'] }
+                    ['Choix du service']] }
 
 #services-index.container
   %h1.fr-h1 Liste des Services

app/views/administrateurs/services/new.html.haml

@@ -1,8 +1,8 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Démarches', admin_procedures_path),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to('Choix du service', admin_services_path(procedure_id: @procedure.id)),
+                    ['Choix du service', admin_services_path(procedure_id: @procedure.id)],
-                    'Nouveau service'] }
+                    ['Nouveau service']] }
 
 .container
   %h1 Nouveau Service

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),
+  locals: { steps: [['Démarches', admin_procedures_path],
-                    link_to(@procedure.libelle, admin_procedure_path(@procedure)),
+                    [@procedure.libelle.truncate_words(4), admin_procedure_path(@procedure)],
-                    link_to(Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)),
+                    [Procedure.human_attribute_name(:jeton_api_particulier), admin_procedure_api_particulier_path(@procedure)],
-                    t('.data_sources')] }
+                    [t('.data_sources')]] }
 
 .container
   %h1.page-title= t('.title')

app/views/instructeurs/archives/index.html.haml

@@ -1,8 +1,8 @@
 - content_for(:title, "Archives pour #{@procedure.libelle}")
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                    'Archives'] }
+                    ['Archives']] }
 
 .container
   %h1.mb-2 Archives

app/views/instructeurs/groupe_instructeurs/index.html.haml

@@ -1,8 +1,8 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                    'Groupes d’instructeurs'] }
+                    ['Groupes d’instructeurs']] }
 
 .container.groupe-instructeur
   .card

app/views/instructeurs/groupe_instructeurs/show.html.haml

@@ -2,9 +2,9 @@
   - content_for(:title, "Instructeurs du groupe #{@groupe_instructeur.label}")
 
   = render partial: 'administrateurs/breadcrumbs',
-    locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+    locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                      link_to('Groupes d’instructeurs', instructeur_groupes_path(@procedure)),
+                      ['Groupes d’instructeurs', instructeur_groupes_path(@procedure)],
-                      @groupe_instructeur.label] }
+                      [@groupe_instructeur.label]] }
 
 - else
   - content_for(:title, "Instructeurs de la démarche #{@procedure.libelle}")

app/views/instructeurs/procedures/email_notifications.html.haml

@@ -1,8 +1,8 @@
 - content_for(:title, "Notifications pour #{@procedure.libelle}")
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                    'Notifications'] }
+                    ['Notifications']] }
 
 .container
   %h1

app/views/instructeurs/procedures/email_usagers.html.haml

@@ -1,8 +1,8 @@
 - content_for(:title, "Contacter les usagers pour #{@procedure.libelle}")
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                    t('.contact_users')] }
+                    [t('.contact_users')]] }
 .messagerie.container
   - if @email_usagers_dossiers.present?
     %p.notice.mb-2.mt-4

app/views/instructeurs/procedures/stats.html.haml

@@ -2,7 +2,7 @@
 - content_for(:title, title)
 
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to(@procedure.libelle, instructeur_procedure_path(@procedure)),
+  locals: { steps: [[@procedure.libelle.truncate_words(4), instructeur_procedure_path(@procedure)],
-                    t('.title')] }
+                    [t('.title')]] }
 
 = render partial: 'shared/procedures/stats', locals: { title: title }

app/views/layouts/_account_dropdown.haml

@@ -1,23 +1,39 @@
-.dropdown.header-menu-opener{ data: { controller: 'menu-button' } }
+
-  %button.button.dropdown-button.icon-only.header-menu-button{ title: "Mon compte", data: { menu_button_target: 'button' } }
+%nav.fr-nav{ role: "navigation", "aria-label"=> t('menu_aria_label', scope: [:layouts]) }
-    %span.hidden= t("my_account", scope: [:layouts])
+  .fr-nav__item
-    = image_tag "icons/account-circle.svg", alt: 'Mon compte', width: 24, height: 24, loading: 'lazy'
+    %button.fr-translate__btn.fr-btn{ "aria-controls" => "account", "aria-expanded" => "false", :title => t('my_account', scope: [:layouts]) }
-  %ul.header-menu.dropdown-content#mon_compte_menu{ data: { menu_button_target: 'menu' } }
+      = image_tag "icons/account-circle.svg", alt: t('my_account', scope: [:layouts]), width: 20, height: 20, loading: 'lazy'
-    %li
+       
-      .menu-item{ title: current_email }
+      = " #{current_email}"
-        = current_email
+    #account.fr-collapse.fr-menu
-    - if super_admin_signed_in?
+      %ul.fr-menu__list
-      %li
+        - if super_admin_signed_in?
-        = link_to manager_root_path, class: "menu-item menu-link" do
+          %li
-          = image_tag "icons/super-admin.svg", alt: ''
+            = link_to manager_root_path, class: "fr-nav__link flex align-center" do
-          = t('go_superadmin', scope: [:layouts])
+              = image_tag "icons/super-admin.svg", alt: '',width: 20, height: 20, class: 'mr-1'
-    - if multiple_devise_profile_connect?
+              = t('go_superadmin', scope: [:layouts])
-      - if user_signed_in? && nav_bar_profile != :user
+        - if multiple_devise_profile_connect?
-        %li
+          - if user_signed_in? && nav_bar_profile != :user
-          = link_to dossiers_path, class: "menu-item menu-link" do
+            %li
-            = image_tag "icons/switch-profile.svg", alt: ''
+              = link_to dossiers_path, class: "fr-nav__link flex align-center" do
-            = t('go_user', scope: [:layouts])
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
-      - if instructeur_signed_in? && nav_bar_profile != :instructeur
+                = t('go_user', scope: [:layouts])
+          - if instructeur_signed_in? && nav_bar_profile != :instructeur
+            %li
+              = link_to instructeur_procedures_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+                = t('go_instructor', scope: [:layouts])
+          - if expert_signed_in? && nav_bar_profile != :expert
+            %li
+              = link_to expert_all_avis_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: ''
+                = t('go_expert', scope: [:layouts])
+          - if administrateur_signed_in? && nav_bar_profile != :administrateur
+            %li
+              = link_to admin_procedures_path, class: "fr-nav__link flex align-center" do
+                = image_tag "icons/switch-profile.svg", alt: '', width: 20, height: 20, class: 'mr-1'
+                = t('go_admin', scope: [:layouts])
+
         %li
           = link_to instructeur_procedures_path, class: "menu-item menu-link" do
             = image_tag "icons/switch-profile.svg", alt: ''

app/views/users/profil/show.html.haml

@@ -1,6 +1,6 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [link_to('Tableau de bord', tableau_de_bord_helper_path),
+  locals: { steps: [['Tableau de bord', tableau_de_bord_helper_path],
-                    'Profil'] }
+                    ['Profil']] }
 
 #profil-page.container
   %h1 Profil

config/locales/views/layouts/_breadcrumb.en.yml

@@ -0,0 +1,13 @@
+en:
+  layouts:
+    breadcrumb:
+      root: "Home"
+      you_are_here: "You are here"
+      show: Show breadcrumb
+      preview: "Preview the form"
+      continue: "Continue >"
+      continue_title: "You can comeback using this link"
+      created_at: "Created at %{date} - n° %{number}"
+      closed_at: "Closed at %{date}"
+      published: "Published"
+      draft: "Draft"

config/locales/views/layouts/_breadcrumb.fr.yml

@@ -0,0 +1,13 @@
+fr:
+  layouts:
+    breadcrumb:
+      root: "Accueil"
+      you_are_here: "Vous êtes ici"
+      show: "Voir le fil d’Ariane"
+      preview: "Prévisualiser le formulaire"
+      continue: "Continuer >"
+      continue_title: "Vous pourrez revenir ici par la suite"
+      created_at: "Créée le %{date} - n° %{number}"
+      closed_at: "Close le %{date}"
+      published: "Publiée – "
+      draft: "Brouillon"

spec/system/administrateurs/procedure_update_spec.rb

@@ -38,7 +38,7 @@ describe 'Administrateurs can edit procedures', js: true do
 
       click_on 'Enregistrer'
 
-      expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche')
+      expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')
     end
   end
 
@@ -55,7 +55,7 @@ describe 'Administrateurs can edit procedures', js: true do
 
       click_on 'Enregistrer'
 
-      expect(page).to have_selector('.breadcrumbs li', text: 'Ma petite démarche')
+      expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')
     end
   end
 end