Merge pull request #2229 from betagouv/new-invites

Ajout d'un bouton vers la notice dans le formulaire

app/assets/images/icons/info-blue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M0-2h24v24H0z"/><path d="M9 8.011h3M9.011 16.99h5.978M12 8v9" stroke="#0069cc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" fill="#0069cc"/></g></svg>

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

@@ -12,10 +12,27 @@
 
     h1 {
       font-size: 22px;
+
+      .icon.folder {
+        vertical-align: -3px;
+      }
     }
   }
 
-  .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/assets/stylesheets/new_design/forms.scss

@@ -7,6 +7,15 @@
     margin-bottom: 20px;
   }
 
+  hr {
+    width: 100%;
+    height: 0;
+    margin-top: $default-padding;
+    margin-bottom: 2 * $default-padding;
+    border: none;
+    border-bottom: 1px solid $border-grey;
+  }
+
   @mixin notice-text-style {
     font-size: 14px;
     color: $grey;

app/assets/stylesheets/new_design/icons.scss

@@ -60,4 +60,33 @@
   &.printer {
     background-image: image-url("icons/printer.svg");
   }
+
+  &.account {
+    background-image: image-url("icons/account-circle.svg");
+  }
+
+  &.person {
+    background-image: image-url("icons/blue-person.svg");
+  }
+
+  &.super-admin {
+    background-image: image-url("icons/super-admin.svg");
+  }
+
+  &.mail {
+    background-image: image-url("icons/mail.svg");
+  }
+
+  &.search {
+    background-image: image-url("icons/search-blue.svg");
+  }
+
+  &.sign-out {
+    background-image: image-url("icons/sign-out.svg");
+  }
+
+  &.info {
+    background-image: image-url("icons/info-blue.svg");
+    object-fit: contain;
+  }
 }

app/views/new_user/dossiers/modifier.html.haml

@@ -4,6 +4,8 @@
 .dossier-edit
   .dossier-header
     .container
-      %h1= @dossier.procedure.libelle
+      %h1
+        %span.icon.folder
+        = @dossier.procedure.libelle
 
   = render partial: "shared/dossiers/edit", locals: { dossier: @dossier, apercu: false }

app/views/root/patron.html.haml

@@ -16,6 +16,13 @@
     %span.icon.attachment
     %span.icon.lock
     %span.icon.printer
+    %span.icon.account
+    %span.icon.person
+    %span.icon.super-admin
+    %span.icon.mail
+    %span.icon.search
+    %span.icon.sign-out
+    %span.icon.info
 
     %h1 Formulaires
 
@@ -31,6 +38,8 @@
           = f.submit 'Enregistrer un brouillon (formnovalidate)', formnovalidate: true, class: 'button send'
           = f.submit 'Envoyer', class: 'button send'
 
+        %hr
+
     %h1 Boutons
 
     %p

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

@@ -8,16 +8,19 @@
 
   = 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
-        = link_to 'le guide de cette démarche', notice_url(dossier.procedure), { target: '_blank'  }
-
-    %p.thanks
         Les champs avec une astérisque (
         %span.mandatory> *
         ) sont obligatoires.
 
+      - if notice_url(dossier.procedure).present?
+        = 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.icon.info>
+          Guide de la démarche
+
+    %hr
+
     = f.fields_for :champs, dossier.champs do |champ_form|
       - champ = champ_form.object
       = render partial: "shared/dossiers/editable_champs/editable_champ",

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

@@ -1,7 +1,8 @@
 require 'spec_helper'
 
 describe 'new_user/dossiers/modifier.html.haml', type: :view do
-  let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, for_individual: true)) }
+  let(:procedure) { create(:procedure, :with_api_carto, :with_two_type_de_piece_justificative, :with_notice, for_individual: true) }
+  let(:dossier) { create(:dossier, :with_entreprise, :with_service, state: 'brouillon', procedure: procedure) }
   let(:footer) { view.content_for(:footer) }
 
   before do
@@ -9,15 +10,16 @@ describe 'new_user/dossiers/modifier.html.haml', type: :view do
     assign(:dossier, dossier)
   end
 
-  context 'test de composition de la page' do
+  subject! { render }
-    before do
-      render
-    end
 
   it 'affiche le libellé de la procédure' 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
@@ -25,5 +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