style: download links (notice & template) with expected DSFR design & details

Closes #7829

app/components/attachment/edit_component/edit_component.html.haml

@@ -2,10 +2,12 @@
   - if template&.attached?
     %p.mb-1
       Veuillez télécharger, remplir et joindre
-      = link_to('le modèle suivant', url_for(template), target: '_blank', rel: 'noopener')
+      = link_to(url_for(template), download: true, class: "fr-link fr-link--icon-right fr-icon-download-line mr-2") do
+        le modèle suivant
 
       - if helpers.administrateur_signed_in?
-        %em.fr-text-mention--grey.fr-text--xs.visible-on-previous-hover
+        %span.ml-2.fr-text--xs.fr-text-mention--grey.visible-on-previous-hover
+          %span.fr-text-action-high--blue-france.fr-icon-questionnaire-line{ "aria-hidden": "true" }
           = t('shared.ephemeral_link')
 
   - if persisted?

app/helpers/application_helper.rb

@@ -128,4 +128,8 @@ module ApplicationHelper
   def external_link_attributes
     { target: "_blank", rel: "noopener noreferrer" }
   end
+
+  def download_details(attachment)
+    "#{attachment.filename.extension.upcase} – #{number_to_human_size(attachment.byte_size)}"
+  end
 end

app/javascript/entrypoints/main.css

@@ -12,6 +12,7 @@
 @import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
 @import '@gouvfr/dsfr/dist/component/callout/callout.css';
 @import '@gouvfr/dsfr/dist/component/connect/connect.css';
+@import '@gouvfr/dsfr/dist/component/download/download.css';
 @import '@gouvfr/dsfr/dist/component/highlight/highlight.css';
 @import '@gouvfr/dsfr/dist/component/input/input.css';
 @import '@gouvfr/dsfr/dist/component/checkbox/checkbox.css';

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

@@ -21,15 +21,18 @@
             = t('views.shared.dossiers.edit.autosave')
 
           - if notice_url(dossier.procedure).present?
-            %br
+            .fr-download
-            = link_to t("views.shared.dossiers.edit.notice"), notice_url(dossier.procedure),
+              %p
-                class: "fr-btn fr-btn--secondary mt-2",
+                = link_to notice_url(dossier.procedure), download: true, class: "fr-download__link mr-2", title: t("views.shared.dossiers.edit.notice_title") do
-                title: t("views.shared.dossiers.edit.notice_title"), **external_link_attributes
+                  = t("views.shared.dossiers.edit.notice")
+                  - if dossier.procedure.notice.attached?
+                    %span.fr-download__detail
+                      = download_details(dossier.procedure.notice)
 
-            - if administrateur_signed_in?
+                - if administrateur_signed_in?
-              %em.ml-1.fr-text-mention--grey.visible-on-previous-hover
+                  %span.fr-text--xs.fr-text-mention--grey.visible-on-previous-hover
-                %span.fr-icon-feedback-line{ "aria-hidden": "true" }
+                    %span.fr-text-action-high--blue-france.fr-icon-questionnaire-line{ "aria-hidden": "true" }
-                  = t('shared.ephemeral_link')
+                    = t('shared.ephemeral_link')
 
     - if dossier.show_groupe_instructeur_selector?
       %span{ data: { controller: 'autosave' } }

config/locales/en.yml

@@ -136,7 +136,7 @@ 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: "Download the notice of the procedure"
           notice_title: "To help you complete your file, you can consult the notice to this procedure."
           submit_dossier: Submit the file
         messages:

config/locales/fr.yml

@@ -131,7 +131,7 @@ 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: Télécharger le 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:

spec/views/users/dossiers/brouillon.html.haml_spec.rb

@@ -19,8 +19,9 @@ describe 'users/dossiers/brouillon.html.haml', type: :view do
     end
 
     it 'affiche un lien vers la notice' do
-      expect(response).to have_css("a[href*='/rails/active_storage/blobs/']", text: "Guide de la démarche")
+      expect(response).to have_css("a[href*='/rails/active_storage/blobs/']", text: "Télécharger le guide de la démarche")
       expect(rendered).not_to have_text("Ce lien est éphémère")
+      expect(rendered).to have_text("TXT – 11 octets")
     end
 
     it 'affiche les boutons de validation' do
@@ -33,7 +34,7 @@ describe 'users/dossiers/brouillon.html.haml', type: :view do
 
     context 'quand la démarche ne comporte pas de notice' do
       let(:procedure) { create(:procedure) }
-      it { is_expected.not_to have_link("Guide de la démarche") }
+      it { is_expected.not_to have_link("Télécharger le guide de la démarche") }
     end
   end