form: move the procedure notice link to a button

app/assets/stylesheets/new_design/dossier-edit.scss

@@ -15,7 +15,20 @@
     }
   }
 
-  .thanks {
+  .prologue {
-    padding: (1.5 * $default-padding) 0;
+    margin: (1.5 * $default-padding) 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+
+    .mandatory-explanation {
+      flex-grow: 1;   // Push the "notice" button to the right
+      flex-shrink: 1; // Allow the text to shrink
+      margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
+    }
+
+    .button.notice {
+      flex-shrink: 0; // Display the button label on a single line
+    }
   }
 }

app/views/shared/dossiers/_edit.html.haml

@@ -8,15 +8,18 @@
 
   = form_for dossier, form_options do |f|
 
-    - if notice_url(dossier.procedure).present?
+    .prologue
-      %p
+      .mandatory-explanation
-        Pour vous aider à remplir votre dossier, vous pouvez consulter
+        Les champs avec une astérisque (
-        = link_to 'le guide de cette démarche', notice_url(dossier.procedure), { target: '_blank'  }
+        %span.mandatory> *
+        ) sont obligatoires.
 
-    %p.thanks
+      - if notice_url(dossier.procedure).present?
-      Les champs avec une astérisque (
+        = link_to notice_url(dossier.procedure), class: 'button notice', title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche." do
-      %span.mandatory> *
+          %span.icon.info>
-      ) sont obligatoires.
+          Guide de la démarche
+
+    %hr
 
     = f.fields_for :champs, dossier.champs do |champ_form|
       - champ = champ_form.object

spec/views/new_user/dossiers/modifier.html.haml_spec.rb

@@ -16,6 +16,10 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do
     expect(rendered).to have_text(dossier.procedure.libelle)
   end
 
+  it 'affiche un lien vers la notice' do
+    expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice))
+  end
+
   it 'affiche les boutons de validation' do
     expect(rendered).to have_selector('.send-wrapper')
   end
@@ -23,4 +27,9 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do
   it 'prépare le footer' do
     expect(footer).to have_selector('footer')
   end
+
+  context 'quand la procédure ne comporte pas de notice' do
+    let(:procedure) { create(:procedure) }
+    it { is_expected.not_to have_link("Guide de la démarche") }
+  end
 end