From 80daf3ede1f7ab8d82cfc979582359499879f65f Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Tue, 13 Sep 2022 12:21:09 +0200
Subject: [PATCH] style(dsfr): dossier form header + notice link

---
 app/javascript/entrypoints/main.css       |  1 +
 app/views/shared/dossiers/_edit.html.haml | 25 +++++++++++++----------
 config/locales/en.yml                     |  2 ++
 config/locales/fr.yml                     |  2 ++
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css
index 06a27acd7..5821362f4 100644
--- a/app/javascript/entrypoints/main.css
+++ b/app/javascript/entrypoints/main.css
@@ -11,6 +11,7 @@
 @import '@gouvfr/dsfr/dist/component/callout/callout.css';
 @import '@gouvfr/dsfr/dist/component/connect/connect.css';
 @import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
+@import '@gouvfr/dsfr/dist/component/highlight/highlight.css';
 @import '@gouvfr/dsfr/dist/component/table/table.css';
 @import '@gouvfr/dsfr/dist/component/modal/modal.css';
 @import '@gouvfr/dsfr/dist/component/input/input.css';
diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml
index 71d1ee544..4205b54ee 100644
--- a/app/views/shared/dossiers/_edit.html.haml
+++ b/app/views/shared/dossiers/_edit.html.haml
@@ -8,19 +8,22 @@
 
   = form_for dossier, form_options.merge({ html: { id: 'dossier-edit-form', class: 'form', multipart: true, novalidate: 'novalidate' } }) do |f|
 
-    .prologue
-      %p.mandatory-explanation= t('utils.asterisk_html')
-      - if dossier.brouillon?
-        %p.mandatory-explanation
-          = t('views.shared.dossiers.edit.autosave')
+    %header.mb-6
+      .fr-highlight
+        %p.fr-text--sm
+          %strong
+            = t('utils.asterisk_html')
+          - if dossier.brouillon?
+            = t('views.shared.dossiers.edit.autosave')
+
+          - if notice_url(dossier.procedure).present?
+            %br
+            = link_to t("views.shared.dossiers.edit.notice"), notice_url(dossier.procedure),
+                class: "fr-btn fr-btn--secondary mt-2",
+                title: t("views.shared.dossiers.edit.notice_title"), **external_link_attributes
+
       - if dossier.france_connect_information.present?
         = render partial: "shared/dossiers/france_connect_informations", locals: { user_information: dossier.france_connect_information }
-      - if notice_url(dossier.procedure).present?
-        = link_to notice_url(dossier.procedure), target: '_blank', rel: 'noopener', 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
 
     - if dossier.show_groupe_instructeur_selector?
       %span{ data: { controller: 'autosave' } }
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 11bd01d58..9b35c0651 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -136,6 +136,8 @@ en:
       dossiers:
         edit:
           autosave: Your file is automatically saved after each modification. You can close the window at any time and pick up where you left off later.
+          notice: "Notice to the procedure"
+          notice_title: "To help you complete your file, you can consult the notice to this procedure."
           submit_dossier: Submit the file
         messages:
           form:
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 1d3178bbd..768c715d1 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -131,6 +131,8 @@ fr:
       dossiers:
         edit:
           autosave: Votre dossier est enregistré automatiquement après chaque modification. Vous pouvez à tout moment fermer la fenêtre et reprendre plus tard là où vous en étiez.
+          notice: Guide de la démarche
+          notice_title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche."
           submit_dossier: Déposer le dossier
         messages:
           form: