Merge branch 'dev'

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,24 +7,37 @@
     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;
   }
 
+  .mandatory {
+    color: $dark-red;
+  }
+
   label {
     margin-bottom: $default-padding;
     display: block;
     font-weight: bold;
 
-    .mandatory {
-      color: $dark-red;
-    }
-
     .notice {
       @include notice-text-style;
       display: block;
       margin-top: $default-spacer;
+
+      p {
+        margin-bottom: $default-spacer;
+      }
     }
 
     &.required {
@@ -247,9 +260,13 @@
   }
 
   .explication {
-    background-color: $light-grey;
-    padding: $default-padding;
     margin-bottom: 2 * $default-padding;
+    padding: $default-padding;
+    background-color: $light-grey;
+
+    p:not(:last-child) {
+      margin-bottom: $default-padding;
+    }
   }
 
   .send-wrapper {

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/layouts/left_panels/_left_panel_admin_procedurescontroller_index.html.haml

@@ -2,7 +2,7 @@
   .en-cours
     %b
       = dossier_count = current_administrateur.procedures.count
-    = "Procedures".pluralize(dossier_count)
+    = "Procédure".pluralize(dossier_count)
 
 #action-block
 

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

@@ -1,19 +1,26 @@
 .container
   = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }
 
-  - if notice_url(dossier.procedure).present?
-    %p
-      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 (*) sont obligatoires.
-
   - if apercu
     - form_options = { url: '', method: :get, html: { class: 'form', multipart: true } }
   - else
     - form_options = { html: { class: 'form', multipart: true, novalidate: dossier.brouillon? } }
 
   = form_for dossier, form_options do |f|
+
+    .prologue
+      .mandatory-explanation
+        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,21 +10,26 @@ 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
+  it 'affiche le libellé de la procédure' do
-      expect(rendered).to have_text(dossier.procedure.libelle)
+    expect(rendered).to have_text(dossier.procedure.libelle)
-    end
+  end
 
-    it 'affiche les boutons de validation' do
+  it 'affiche un lien vers la notice' do
-      expect(rendered).to have_selector('.send-wrapper')
+    expect(rendered).to have_link("Guide de la démarche", href: url_for(procedure.notice))
-    end
+  end
 
-    it 'prépare le footer' do
+  it 'affiche les boutons de validation' do
-      expect(footer).to have_selector('footer')
+    expect(rendered).to have_selector('.send-wrapper')
-    end
+  end
+
+  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