Merge pull request #7760 from betagouv/dsfr-dossier-top-form

DSFR: convert dossier top form elements

.scss-lint.yml

@@ -166,7 +166,8 @@ linters:
 
   SelectorFormat:
     enabled: true
-    convention: hyphenated_lowercase
+    # hyphenated_lowercase + any dsfr selector which are not hyphenated
+    convention: ^(?:fr-[^A-Z]+|[^_A-Z]+)$
 
   Shorthand:
     enabled: false

app/assets/stylesheets/france-connect-informations.scss

@@ -1,12 +0,0 @@
-@import "constants";
-
-.france-connect-informations.card {
-  width: 100%;
-  padding-top: $default-spacer;
-  padding-bottom: $default-spacer;
-}
-
-.france-connect-informations-logo img {
-  width: 100px;
-  margin-right: $default-padding;
-}

app/assets/stylesheets/new_header.scss

@@ -12,8 +12,12 @@ $header-mobile-breakpoint: 550px;
   background-color: #FFFFFF;
 }
 
-.new-header-with-border {
-  border-bottom: 1px solid $border-grey;
+// No drop shadow when a notice is shown.
+.fr-header.fr-header__with-notice-info {
+  &,
+  .fr-header__brand {
+    filter: none;
+  }
 }
 
 .header-inner-content {

app/components/dsfr/notice_component.rb

@@ -0,0 +1,12 @@
+# see: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante/
+class Dsfr::NoticeComponent < ApplicationComponent
+  renders_one :title
+
+  def initialize(closable: false)
+    @closable = closable
+  end
+
+  def closable?
+    !!@closable
+  end
+end

app/components/dsfr/notice_component/notice_component.en.yml

@@ -0,0 +1,4 @@
+---
+en:
+  close_notice: Hide message
+

app/components/dsfr/notice_component/notice_component.fr.yml

@@ -0,0 +1,4 @@
+---
+fr:
+  close_notice: Masquer le message
+

app/components/dsfr/notice_component/notice_component.html.haml

@@ -0,0 +1,9 @@
+.fr-notice.fr-notice--info{ "data-dsfr-header-target": "notice" }
+  .fr-container
+    .fr-notice__body
+      %p.fr-notice__title
+        = title
+
+      - if closable?
+        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), data: { action: "dsfr-header#closeNotice" } }
+          = t('.close_notice')

app/helpers/dossier_helper.rb

@@ -115,4 +115,16 @@ module DossierHelper
       end
     end
   end
+
+  def france_connect_informations(user_information)
+    if user_information.full_name.empty?
+      t("shared.dossiers.france_connect_informations.details_no_name")
+    elsif user_information.updated_at.present?
+      t("shared.dossiers.france_connect_informations.details_updated",
+          name: user_information.full_name,
+          date: l(user_information.updated_at.to_date, format: :default))
+    else
+      t("shared.dossiers.france_connect_informations.details", name: user_information.full_name)
+    end
+  end
 end

app/javascript/controllers/dsfr_header_controller.ts

@@ -0,0 +1,13 @@
+import { ApplicationController } from './application_controller';
+
+export class DSFRHeaderController extends ApplicationController {
+  static targets = ['notice'];
+
+  declare readonly noticeTarget: HTMLElement;
+
+  closeNotice() {
+    this.noticeTarget.parentNode?.removeChild(this.noticeTarget);
+
+    this.element.classList.remove('fr-header__with-notice-info');
+  }
+}

app/javascript/entrypoints/main.css

@@ -1,20 +1,27 @@
 @import '@gouvfr/dsfr/dist/core/core.css';
 @import '@gouvfr/dsfr/dist/utility/utility.css';
+
+/* These base components may be dependencies of other components */
 @import '@gouvfr/dsfr/dist/component/link/link.css';
-@import '@gouvfr/dsfr/dist/component/logo/logo.css';
 @import '@gouvfr/dsfr/dist/component/form/form.css';
-@import '@gouvfr/dsfr/dist/component/badge/badge.css';
-@import '@gouvfr/dsfr/dist/component/card/card.css';
-@import '@gouvfr/dsfr/dist/component/navigation/navigation.css';
 @import '@gouvfr/dsfr/dist/component/button/button.css';
+
+/* Verify README of each component to insert them in the expected order. */
 @import '@gouvfr/dsfr/dist/component/alert/alert.css';
+@import '@gouvfr/dsfr/dist/component/badge/badge.css';
+@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/breadcrumb/breadcrumb.css';
-@import '@gouvfr/dsfr/dist/component/table/table.css';
-@import '@gouvfr/dsfr/dist/component/modal/modal.css';
+@import '@gouvfr/dsfr/dist/component/highlight/highlight.css';
 @import '@gouvfr/dsfr/dist/component/input/input.css';
-@import '@gouvfr/dsfr/dist/component/search/search.css';
-@import '@gouvfr/dsfr/dist/component/translate/translate.css';
+@import '@gouvfr/dsfr/dist/component/logo/logo.css';
+@import '@gouvfr/dsfr/dist/component/modal/modal.css';
+@import '@gouvfr/dsfr/dist/component/navigation/navigation.css';
+@import '@gouvfr/dsfr/dist/component/notice/notice.css';
+@import '@gouvfr/dsfr/dist/component/table/table.css';
+@import '@gouvfr/dsfr/dist/component/tag/tag.css';
+@import '@gouvfr/dsfr/dist/component/card/card.css';
 @import '@gouvfr/dsfr/dist/component/header/header.css';
 @import '@gouvfr/dsfr/dist/component/footer/footer.css';
+@import '@gouvfr/dsfr/dist/component/search/search.css';
+@import '@gouvfr/dsfr/dist/component/translate/translate.css';

app/models/france_connect_information.rb

@@ -56,4 +56,8 @@ class FranceConnectInformation < ApplicationRecord
   def delete_merge_token!
     update(merge_token: nil, merge_token_created_at: nil)
   end
+
+  def full_name
+    [given_name, family_name].compact.join(" ")
+  end
 end

app/views/dossiers/show.pdf.prawn

@@ -236,7 +236,7 @@ prawn_document(page_size: "A4") do |pdf|
   add_title(pdf, "Identité du demandeur")
 
   if @dossier.france_connect_information.present?
-    format_in_2_columns(pdf, 'Informations France Connect', "Le dossier a été déposé par le compte de #{@dossier.france_connect_information.given_name} #{@dossier.france_connect_information.family_name}, authentifié par France Connect le #{@dossier.france_connect_information.updated_at.strftime('%d/%m/%Y')}")
+    format_in_2_columns(pdf, 'Informations FranceConnect', france_connect_informations(@dossier.france_connect_information))
   end
 
   format_in_2_columns(pdf, "Email", @dossier.user_email_for(:display))

app/views/layouts/_header.haml

@@ -6,7 +6,7 @@
 - is_expert_context = nav_bar_profile == :expert && expert_signed_in?
 - is_user_context = nav_bar_profile == :user
 - is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any?
-%header{ class: current_page?(root_path) ? "fr-header" : "fr-header new-header-with-border", role: "banner" }
+%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner", "data-controller": "dsfr-header" }
   .fr-header__body
     .fr-container
       .fr-header__body-row
@@ -100,3 +100,6 @@
             %li.fr-nav__item= active_link_to t('.files'), dossiers_path, active: :inclusive, class: 'fr-nav__link'
             - if current_user.expert && current_expert.avis_summary[:total] > 0
               = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
+
+  = yield(:notice_info)
+

app/views/layouts/application.html.haml

@@ -48,6 +48,7 @@
       = render partial: "layouts/header"
       %main{ role: :main }
         = render partial: "layouts/flash_messages"
+
         = content_for?(:content) ? yield(:content) : yield
 
       - if content_for?(:footer)

app/views/root/patron.html.haml

@@ -335,3 +335,14 @@
             = link_to "Button 1", "#", class: "fr-btn", **external_link_attributes
           - c.with_footer_button do
             = button_tag "Button 2", class: "fr-btn fr-btn--secondary"
+
+    %h1 Dsfr::NoticeComponent
+    = link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
+    .my-3
+      = render Dsfr::NoticeComponent.new(closable: true) do |c|
+        - c.with_title do
+          Titre de cette notice
+          = link_to "avec un lien optionnel.", "#"
+          Des marges verticales ont ici été rajoutées.
+
+

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

@@ -1,3 +1,7 @@
+- if dossier.france_connect_information.present?
+  - content_for(:notice_info) do
+    = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
+
 .container
   - if dossier.depose_at.present?
     .card
@@ -12,8 +16,6 @@
         = try_format_datetime(dossier.identity_updated_at)
 
   .card
-    - if dossier.france_connect_information.present?
-      = render partial: "shared/dossiers/france_connect_informations", locals: { user_information: dossier.france_connect_information }
     = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 
     - if dossier.etablissement.present?

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

@@ -1,3 +1,7 @@
+- if dossier.france_connect_information.present?
+  - content_for(:notice_info) do
+    = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
+
 .dossier-edit.container
   = render partial: "shared/dossiers/submit_is_over", locals: { dossier: dossier }
 
@@ -8,19 +12,19 @@
 
   = 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')
-      - 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
+    %header.mb-6
+      .fr-highlight
+        %p.fr-text--sm
+          %strong
+            = t('utils.asterisk_html')
+          - if dossier.brouillon?
+            = t('views.shared.dossiers.edit.autosave')
 
-    %hr
+          - 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.show_groupe_instructeur_selector?
       %span{ data: { controller: 'autosave' } }

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

@@ -1,8 +0,0 @@
-.france-connect-informations.card.featured.flex.align-center
-  .france-connect-informations-logo
-    = image_tag "logo-france-connect.png", alt: "France Connect logo"
-  %div
-    - if user_information.updated_at.present?
-      Le dossier a été déposé par le compte de #{user_information&.given_name} #{user_information&.family_name}, authentifié par France Connect le #{user_information.updated_at.strftime('%d/%m/%Y')}.
-    - else
-      Le dossier a été déposé par le compte de #{user_information&.given_name} #{user_information&.family_name}.

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

@@ -0,0 +1,3 @@
+= render Dsfr::NoticeComponent.new(closable: true) do |c|
+  - c.with_title do
+    = france_connect_informations(user_information)

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:

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:

config/locales/shared.en.yml

@@ -1,6 +1,10 @@
 en:
   shared:
     dossiers:
+      france_connect_informations:
+        details_no_name: "The file was submitted by a FranceConnect account."
+        details: "The file was submitted by the account of %{name}."
+        details_updated: "The file was submitted by the account of %{name}, authenticated by FranceConnect on %{date}."
       header:
         expires_at:
           brouillon: "Expires on %{date} (%{duree_conservation_totale} months after this file was created)"

config/locales/shared.fr.yml

@@ -1,6 +1,10 @@
 fr:
   shared:
     dossiers:
+      france_connect_informations:
+        details_no_name: "Le dossier a été déposé par un compte FranceConnect."
+        details: "Le dossier a été déposé par le compte de %{name}."
+        details_updated: "Le dossier a été déposé par le compte de %{name}, authentifié par FranceConnect le %{date}."
       header:
         expires_at:
           brouillon: "Expirera le %{date} (%{duree_conservation_totale} mois après la création du dossier)"

spec/helpers/dossier_helper_spec.rb

@@ -215,4 +215,40 @@ RSpec.describe DossierHelper, type: :helper do
       it { is_expected.to eq('without_continuation') }
     end
   end
+
+  describe ".france_connect_information" do
+    subject { france_connect_informations(user_information) }
+
+    context "with complete france_connect information" do
+      let(:user_information) { build(:france_connect_information, updated_at: Time.zone.now) }
+      it {
+        expect(subject).to have_text("Le dossier a été déposé par le compte de #{user_information.given_name} #{user_information.family_name}, authentifié par FranceConnect le #{user_information.updated_at.strftime('%d/%m/%Y')}")
+      }
+    end
+
+    context "with missing updated_at" do
+      let(:user_information) { build(:france_connect_information, updated_at: nil) }
+
+      it {
+        expect(subject).to have_text("Le dossier a été déposé par le compte de #{user_information.given_name} #{user_information.family_name}")
+        expect(subject).not_to have_text("authentifié par FranceConnect le ")
+      }
+    end
+
+    context "with missing given_name" do
+      let(:user_information) { build(:france_connect_information, given_name: nil) }
+
+      it {
+        expect(subject).to have_text("Le dossier a été déposé par le compte de #{user_information.family_name}")
+      }
+    end
+
+    context "with all names missing" do
+      let(:user_information) { build(:france_connect_information, given_name: nil, family_name: nil) }
+
+      it {
+        expect(subject).to have_text("Le dossier a été déposé par un compte FranceConnect.")
+      }
+    end
+  end
 end

spec/views/instructeur/dossiers/show.html.haml_spec.rb

@@ -30,7 +30,7 @@ describe 'instructeurs/dossiers/show.html.haml', type: :view do
     end
 
     it 'fills the individual with the informations from France Connect' do
-      expect(rendered).to have_text("Le dossier a été déposé par le compte de #{france_connect_information.given_name} #{france_connect_information.family_name}, authentifié par France Connect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}")
+      expect(view.content_for(:notice_info)).to have_text("Le dossier a été déposé par le compte de #{france_connect_information.given_name} #{france_connect_information.family_name}, authentifié par FranceConnect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}")
     end
   end
 

spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb

@@ -1,32 +0,0 @@
-describe 'shared/dossiers/france_connect_informations.html.haml', type: :view do
-  subject do
-    render(
-      'shared/dossiers/france_connect_informations.html.haml',
-      user_information: user_information
-    )
-  end
-
-  context "with complete france_connect information" do
-    let(:user_information) { build(:france_connect_information, updated_at: Time.zone.now) }
-    it {
-      expect(subject).to have_text("Le dossier a été déposé par le compte de #{user_information.given_name} #{user_information.family_name}, authentifié par France Connect le #{user_information.updated_at.strftime('%d/%m/%Y')}")
-    }
-  end
-
-  context "with missing updated_at" do
-    let(:user_information) { build(:france_connect_information, updated_at: nil) }
-
-    it {
-      expect(subject).to have_text("Le dossier a été déposé par le compte de #{user_information.given_name} #{user_information.family_name}")
-      expect(subject).not_to have_text("authentifié par France Connect le ")
-    }
-  end
-
-  context "with missing given_name" do
-    let(:user_information) { build(:france_connect_information, given_name: nil) }
-
-    it {
-      expect(subject).to have_text("Le dossier a été déposé par le compte de  #{user_information.family_name}")
-    }
-  end
-end

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

@@ -45,7 +45,7 @@ describe 'users/dossiers/demande.html.haml', type: :view do
     end
 
     it 'fills the individual with the informations from France Connect' do
-      expect(rendered).to have_text("Le dossier a été déposé par le compte de #{france_connect_information.given_name} #{france_connect_information.family_name}, authentifié par France Connect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}")
+      expect(view.content_for(:notice_info)).to have_text("Le dossier a été déposé par le compte de #{france_connect_information.given_name} #{france_connect_information.family_name}, authentifié par FranceConnect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}")
     end
   end
 end