From af5af67750ee325cb2d1927845d03e004d5e6532 Mon Sep 17 00:00:00 2001
From: mfo <mfo@users.noreply.github.com>
Date: Mon, 2 Dec 2024 10:32:56 +0100
Subject: [PATCH] ui(navigation_icons): use span icons which are bolder [asked
 by design]. ensure next/prev links are always on oneline, make back button
 bigger [same as design], align back/next/prev to top when there is more than
 oneline for h1 [either procedure name, either dossier name]

---
 app/assets/stylesheets/buttons.scss           |  4 ++++
 .../instructeurs/back_button_component.rb     |  4 +++-
 .../dossiers_navigation_component.rb          | 22 ++++++++++---------
 .../dossiers_navigation_component.html.haml   |  4 ++--
 .../instructeurs/procedures/_header.html.haml |  2 +-
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index 53fe0130c..4a3e7fcac 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -397,3 +397,7 @@ ul.dropdown-items {
     content: none !important;
   }
 }
+
+.back-btn {
+  line-height: 1.75rem;
+}
diff --git a/app/components/instructeurs/back_button_component.rb b/app/components/instructeurs/back_button_component.rb
index 316a05d3d..ae373aaf8 100644
--- a/app/components/instructeurs/back_button_component.rb
+++ b/app/components/instructeurs/back_button_component.rb
@@ -6,6 +6,8 @@ class Instructeurs::BackButtonComponent < ApplicationComponent
   end
 
   def call
-    link_to "", @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-icon-arrow-left-line', title: t('.back')
+    link_to @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-px-1v', title: t('.back') do
+      dsfr_icon("fr-icon-arrow-left-line")
+    end
   end
 end
diff --git a/app/components/instructeurs/dossiers_navigation_component.rb b/app/components/instructeurs/dossiers_navigation_component.rb
index 8a79d2ffa..71d83b6bc 100644
--- a/app/components/instructeurs/dossiers_navigation_component.rb
+++ b/app/components/instructeurs/dossiers_navigation_component.rb
@@ -16,25 +16,27 @@ class Instructeurs::DossiersNavigationComponent < ApplicationComponent
   end
 
   def link_next
-    options = { class: "fr-link fr-icon-arrow-right-line fr-link--icon-right fr-ml-3w" }
-
     if has_next?
-      tag.a(t('.next'), **options.merge(href: next_instructeur_dossier_path(dossier:, statut:)))
+      html_tag = :a
+      options = { class: "fr-link no-wrap fr-ml-3w", href: next_instructeur_dossier_path(dossier:, statut:) }
     else
-      options[:class] = "#{options[:class]} fr-text-mention--grey"
-      tag.span(t('.next'), **options)
+      html_tag = :span
+      options = { class: "fr-link no-wrap fr-ml-3w fr-text-mention--grey" }
     end
+
+    tag.send(html_tag, t('.next').html_safe + tag.span(class: 'fr-icon-arrow-right-line fr-ml-1w'), **options)
   end
 
   def link_previous
-    options = { class: "fr-link fr-icon-arrow-left-line fr-link--icon-left" }
-
     if has_previous?
-      tag.a(t('.previous'), **options.merge(href: previous_instructeur_dossier_path(dossier:, statut:)))
+      html_tag = :a
+      options = { class: "fr-link no-wrap", href: previous_instructeur_dossier_path(dossier:, statut:) }
     else
-      options[:class] = "#{options[:class]} fr-text-mention--grey"
-      tag.span(t('.previous'), **options)
+      html_tag = :span
+      options = { class: "fr-link no-wrap fr-text-mention--grey" }
     end
+
+    tag.send(html_tag, tag.span(class: 'fr-icon-arrow-left-line fr-mr-1w') + t('.previous'), **options)
   end
 
   def has_next? = @has_next ||= @cache.next_dossier_id(from_id: dossier.id).present?
diff --git a/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
index 0a29b5fc5..e95fe3b13 100644
--- a/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
+++ b/app/components/instructeurs/dossiers_navigation_component/dossiers_navigation_component.html.haml
@@ -1,10 +1,10 @@
-.flex.fr-mb-1w.align-center
+.flex.fr-mb-1w.align-start
   = render Instructeurs::BackButtonComponent.new(to: instructeur_procedure_path(dossier.procedure, **back_url_options))
 
   %h1.fr-h3.fr-mb-0
     = t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name)
 
-  .fr.ml-auto.align-center.flex
+  .fr.ml-auto.align-center.flex.fr-mt-1v
     = link_previous
     = link_next
 
diff --git a/app/views/instructeurs/procedures/_header.html.haml b/app/views/instructeurs/procedures/_header.html.haml
index 3f8f5e199..1209e15a7 100644
--- a/app/views/instructeurs/procedures/_header.html.haml
+++ b/app/views/instructeurs/procedures/_header.html.haml
@@ -1,5 +1,5 @@
 .procedure-header
-  .clipboard-container.flex
+  .align-start.flex
     = render Instructeurs::BackButtonComponent.new(to: instructeur_procedures_path)
     %h1.fr-h3.fr-mb-0
       = "#{procedure_libelle procedure} (n°#{procedure.id})"