From 80daf3ede1f7ab8d82cfc979582359499879f65f Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Tue, 13 Sep 2022 12:21:09 +0200 Subject: [PATCH 1/9] 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: From a5e1d8865b03cde7ae04effb340b4211756308b2 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Tue, 13 Sep 2022 14:27:07 +0200 Subject: [PATCH 2/9] style(france_connect_account): convert notice about FC user to DSFR --- app/javascript/entrypoints/main.css | 1 + app/models/france_connect_information.rb | 4 ++++ app/views/shared/dossiers/_demande.html.haml | 5 +++-- .../_france_connect_informations.html.haml | 21 ++++++++++++------- config/locales/fr.yml | 4 ++++ .../dossiers/show.html.haml_spec.rb | 2 +- ...ance_connect_information.html.haml_spec.rb | 14 ++++++++++--- .../users/dossiers/demande.html.haml_spec.rb | 2 +- 8 files changed, 38 insertions(+), 15 deletions(-) diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 5821362f4..67e9fc12e 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -5,6 +5,7 @@ @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/connect/connect.css'; @import '@gouvfr/dsfr/dist/component/navigation/navigation.css'; @import '@gouvfr/dsfr/dist/component/button/button.css'; @import '@gouvfr/dsfr/dist/component/alert/alert.css'; diff --git a/app/models/france_connect_information.rb b/app/models/france_connect_information.rb index 06180a43a..c41bef39f 100644 --- a/app/models/france_connect_information.rb +++ b/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 diff --git a/app/views/shared/dossiers/_demande.html.haml b/app/views/shared/dossiers/_demande.html.haml index f63474584..28e9836bd 100644 --- a/app/views/shared/dossiers/_demande.html.haml +++ b/app/views/shared/dossiers/_demande.html.haml @@ -11,9 +11,10 @@ modifié le = try_format_datetime(dossier.identity_updated_at) + - if dossier.france_connect_information.present? + = render partial: "shared/dossiers/france_connect_informations", locals: { user_information: dossier.france_connect_information } + .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? diff --git a/app/views/shared/dossiers/_france_connect_informations.html.haml b/app/views/shared/dossiers/_france_connect_informations.html.haml index bd73c94e9..81378ad1d 100644 --- a/app/views/shared/dossiers/_france_connect_informations.html.haml +++ b/app/views/shared/dossiers/_france_connect_informations.html.haml @@ -1,8 +1,13 @@ -.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}. +.fr-tile.fr-tile--horizontal.mb-4 + .fr-tile__body + %h4.fr-tile__title + FranceConnect + %p + - if user_information.full_name.empty? + = t("views.shared.dossiers.france_connect_informations.details_no_name") + - elsif user_information.updated_at.present? + = t("views.shared.dossiers.france_connect_informations.details_updated", name: user_information.full_name, date: l(user_information.updated_at.to_date, format: :default)) + - else + = t("views.shared.dossiers.france_connect_informations.details", name: user_information.full_name) + .fr-tile__img + = image_tag "logo-france-connect.png", alt: "", class: "fr-responsive-img" diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 768c715d1..3ac131bb1 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -145,6 +145,10 @@ fr: form: "Formulaire" edit_siret: "Modifier le SIRET" edit_identity: "Modifier l’identité" + 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}." instructeurs: dossiers: tab_steps: diff --git a/spec/views/instructeur/dossiers/show.html.haml_spec.rb b/spec/views/instructeur/dossiers/show.html.haml_spec.rb index 7eb30ba0a..15be1e83f 100644 --- a/spec/views/instructeur/dossiers/show.html.haml_spec.rb +++ b/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(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 FranceConnect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}") end end end diff --git a/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb b/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb index 1d8f76e16..19de91cdd 100644 --- a/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb +++ b/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb @@ -9,7 +9,7 @@ describe 'shared/dossiers/france_connect_informations.html.haml', type: :view do 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')}") + 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 @@ -18,7 +18,7 @@ describe 'shared/dossiers/france_connect_informations.html.haml', type: :view do 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 ") + expect(subject).not_to have_text("authentifié par FranceConnect le ") } end @@ -26,7 +26,15 @@ describe 'shared/dossiers/france_connect_informations.html.haml', type: :view 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}") + 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 diff --git a/spec/views/users/dossiers/demande.html.haml_spec.rb b/spec/views/users/dossiers/demande.html.haml_spec.rb index 67aeb8459..15dce5776 100644 --- a/spec/views/users/dossiers/demande.html.haml_spec.rb +++ b/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(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 FranceConnect le #{france_connect_information.updated_at.strftime('%d/%m/%Y')}") end end end From ab821285857e9ad3a3e4ec3e9247ccd46403c385 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 14 Sep 2022 15:32:56 +0200 Subject: [PATCH 3/9] feat(dsfr): new NoticeComponent --- app/components/dsfr/notice_component.rb | 12 ++++++++++++ .../dsfr/notice_component/notice_component.en.yml | 4 ++++ .../dsfr/notice_component/notice_component.fr.yml | 4 ++++ .../dsfr/notice_component/notice_component.html.haml | 9 +++++++++ app/views/root/patron.html.haml | 11 +++++++++++ 5 files changed, 40 insertions(+) create mode 100644 app/components/dsfr/notice_component.rb create mode 100644 app/components/dsfr/notice_component/notice_component.en.yml create mode 100644 app/components/dsfr/notice_component/notice_component.fr.yml create mode 100644 app/components/dsfr/notice_component/notice_component.html.haml diff --git a/app/components/dsfr/notice_component.rb b/app/components/dsfr/notice_component.rb new file mode 100644 index 000000000..557f5a20e --- /dev/null +++ b/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 diff --git a/app/components/dsfr/notice_component/notice_component.en.yml b/app/components/dsfr/notice_component/notice_component.en.yml new file mode 100644 index 000000000..d7faa38a2 --- /dev/null +++ b/app/components/dsfr/notice_component/notice_component.en.yml @@ -0,0 +1,4 @@ +--- +en: + close_notice: Hide message + diff --git a/app/components/dsfr/notice_component/notice_component.fr.yml b/app/components/dsfr/notice_component/notice_component.fr.yml new file mode 100644 index 000000000..1303e8317 --- /dev/null +++ b/app/components/dsfr/notice_component/notice_component.fr.yml @@ -0,0 +1,4 @@ +--- +fr: + close_notice: Masquer le message + diff --git a/app/components/dsfr/notice_component/notice_component.html.haml b/app/components/dsfr/notice_component/notice_component.html.haml new file mode 100644 index 000000000..a009516a5 --- /dev/null +++ b/app/components/dsfr/notice_component/notice_component.html.haml @@ -0,0 +1,9 @@ +.fr-notice.fr-notice--info + .fr-container + .fr-notice__body + %p.fr-notice__title + = title + + - if closable? + %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild' } + = t('.close_notice') diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index 823857395..57364e78f 100644 --- a/app/views/root/patron.html.haml +++ b/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. + + From fcb478eb53d55cd94eadd49ee0595157681646b4 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 14 Sep 2022 16:19:14 +0200 Subject: [PATCH 4/9] refactor(fc_info): use Dsfr::Notice for france connect informations --- .../france-connect-informations.scss | 12 ------ app/helpers/dossier_helper.rb | 12 ++++++ app/views/layouts/_header.haml | 3 ++ app/views/layouts/application.html.haml | 1 + app/views/shared/dossiers/_demande.html.haml | 7 ++-- app/views/shared/dossiers/_edit.html.haml | 7 ++-- .../_france_connect_informations.html.haml | 13 ------ ...ance_connect_informations_notice.html.haml | 3 ++ config/locales/fr.yml | 4 -- config/locales/shared.en.yml | 4 ++ config/locales/shared.fr.yml | 4 ++ spec/helpers/dossier_helper_spec.rb | 36 +++++++++++++++++ .../dossiers/show.html.haml_spec.rb | 2 +- ...ance_connect_information.html.haml_spec.rb | 40 ------------------- .../users/dossiers/demande.html.haml_spec.rb | 2 +- 15 files changed, 73 insertions(+), 77 deletions(-) delete mode 100644 app/assets/stylesheets/france-connect-informations.scss delete mode 100644 app/views/shared/dossiers/_france_connect_informations.html.haml create mode 100644 app/views/shared/dossiers/_france_connect_informations_notice.html.haml delete mode 100644 spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb diff --git a/app/assets/stylesheets/france-connect-informations.scss b/app/assets/stylesheets/france-connect-informations.scss deleted file mode 100644 index 739c9734f..000000000 --- a/app/assets/stylesheets/france-connect-informations.scss +++ /dev/null @@ -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; -} diff --git a/app/helpers/dossier_helper.rb b/app/helpers/dossier_helper.rb index 61496b0cf..fc18c15d2 100644 --- a/app/helpers/dossier_helper.rb +++ b/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 diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 474b1f2eb..5bbe9d008 100644 --- a/app/views/layouts/_header.haml +++ b/app/views/layouts/_header.haml @@ -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) + diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index a35632fe2..742c6e85a 100644 --- a/app/views/layouts/application.html.haml +++ b/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) diff --git a/app/views/shared/dossiers/_demande.html.haml b/app/views/shared/dossiers/_demande.html.haml index 28e9836bd..3f7957e23 100644 --- a/app/views/shared/dossiers/_demande.html.haml +++ b/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 @@ -11,9 +15,6 @@ modifié le = try_format_datetime(dossier.identity_updated_at) - - if dossier.france_connect_information.present? - = render partial: "shared/dossiers/france_connect_informations", locals: { user_information: dossier.france_connect_information } - .card = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) } diff --git a/app/views/shared/dossiers/_edit.html.haml b/app/views/shared/dossiers/_edit.html.haml index 4205b54ee..1eced6ae7 100644 --- a/app/views/shared/dossiers/_edit.html.haml +++ b/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 } @@ -22,9 +26,6 @@ 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 dossier.show_groupe_instructeur_selector? %span{ data: { controller: 'autosave' } } = f.label :groupe_instructeur_id do diff --git a/app/views/shared/dossiers/_france_connect_informations.html.haml b/app/views/shared/dossiers/_france_connect_informations.html.haml deleted file mode 100644 index 81378ad1d..000000000 --- a/app/views/shared/dossiers/_france_connect_informations.html.haml +++ /dev/null @@ -1,13 +0,0 @@ -.fr-tile.fr-tile--horizontal.mb-4 - .fr-tile__body - %h4.fr-tile__title - FranceConnect - %p - - if user_information.full_name.empty? - = t("views.shared.dossiers.france_connect_informations.details_no_name") - - elsif user_information.updated_at.present? - = t("views.shared.dossiers.france_connect_informations.details_updated", name: user_information.full_name, date: l(user_information.updated_at.to_date, format: :default)) - - else - = t("views.shared.dossiers.france_connect_informations.details", name: user_information.full_name) - .fr-tile__img - = image_tag "logo-france-connect.png", alt: "", class: "fr-responsive-img" diff --git a/app/views/shared/dossiers/_france_connect_informations_notice.html.haml b/app/views/shared/dossiers/_france_connect_informations_notice.html.haml new file mode 100644 index 000000000..d283af0d3 --- /dev/null +++ b/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) diff --git a/config/locales/fr.yml b/config/locales/fr.yml index 3ac131bb1..768c715d1 100644 --- a/config/locales/fr.yml +++ b/config/locales/fr.yml @@ -145,10 +145,6 @@ fr: form: "Formulaire" edit_siret: "Modifier le SIRET" edit_identity: "Modifier l’identité" - 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}." instructeurs: dossiers: tab_steps: diff --git a/config/locales/shared.en.yml b/config/locales/shared.en.yml index 1276e41a5..a718d09a5 100644 --- a/config/locales/shared.en.yml +++ b/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)" diff --git a/config/locales/shared.fr.yml b/config/locales/shared.fr.yml index 1b055183d..16bfeb13b 100644 --- a/config/locales/shared.fr.yml +++ b/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)" diff --git a/spec/helpers/dossier_helper_spec.rb b/spec/helpers/dossier_helper_spec.rb index 9835cba2d..72dcc91b6 100644 --- a/spec/helpers/dossier_helper_spec.rb +++ b/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 diff --git a/spec/views/instructeur/dossiers/show.html.haml_spec.rb b/spec/views/instructeur/dossiers/show.html.haml_spec.rb index 15be1e83f..a7aea8390 100644 --- a/spec/views/instructeur/dossiers/show.html.haml_spec.rb +++ b/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 FranceConnect 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 diff --git a/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb b/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb deleted file mode 100644 index 19de91cdd..000000000 --- a/spec/views/shared/dossiers/_france_connect_information.html.haml_spec.rb +++ /dev/null @@ -1,40 +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 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 diff --git a/spec/views/users/dossiers/demande.html.haml_spec.rb b/spec/views/users/dossiers/demande.html.haml_spec.rb index 15dce5776..a87d710b0 100644 --- a/spec/views/users/dossiers/demande.html.haml_spec.rb +++ b/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 FranceConnect 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 From 7e6624753a27bddefb69422605aae5ad2b5d390a Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 14 Sep 2022 16:20:05 +0200 Subject: [PATCH 5/9] refactor(dossier/pdf): use new france_connect_informations helper --- app/views/dossiers/show.pdf.prawn | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/dossiers/show.pdf.prawn b/app/views/dossiers/show.pdf.prawn index 03996bd13..69c8445e5 100644 --- a/app/views/dossiers/show.pdf.prawn +++ b/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)) From 4d5f03b99c293f6fee14cde11b0fe27f528883de Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Wed, 14 Sep 2022 19:23:40 +0200 Subject: [PATCH 6/9] style(header): remove fr-header__with-notice-info when notice is closed --- app/assets/stylesheets/new_header.scss | 8 ++++++-- .../notice_component/notice_component.html.haml | 2 +- app/javascript/entrypoints/application.js | 5 ++++- app/javascript/new_design/header.js | 16 ++++++++++++++++ app/views/layouts/_header.haml | 2 +- 5 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 app/javascript/new_design/header.js diff --git a/app/assets/stylesheets/new_header.scss b/app/assets/stylesheets/new_header.scss index 1482377f1..d8ce97ae2 100644 --- a/app/assets/stylesheets/new_header.scss +++ b/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 { diff --git a/app/components/dsfr/notice_component/notice_component.html.haml b/app/components/dsfr/notice_component/notice_component.html.haml index a009516a5..30bbae4ad 100644 --- a/app/components/dsfr/notice_component/notice_component.html.haml +++ b/app/components/dsfr/notice_component/notice_component.html.haml @@ -5,5 +5,5 @@ = title - if closable? - %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild' } + %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'javascript:DS.closeNoticeInfo(event)' } = t('.close_notice') diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index 6e3ec2bc6..9af25b61e 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -37,6 +37,8 @@ import { showNewAccountPasswordConfirmation } from '../new_design/fc-fusion'; +import { closeNoticeInfo } from '../new_design/header'; + const application = Application.start(); registerControllers(application); @@ -52,7 +54,8 @@ const DS = { showNewAccountPasswordConfirmation, replaceSemicolonByComma, acceptEmailSuggestion, - discardEmailSuggestionBox + discardEmailSuggestionBox, + closeNoticeInfo }; // Start Rails helpers diff --git a/app/javascript/new_design/header.js b/app/javascript/new_design/header.js new file mode 100644 index 000000000..248a130c6 --- /dev/null +++ b/app/javascript/new_design/header.js @@ -0,0 +1,16 @@ +export function closeNoticeInfo(event) { + // DSFR usptream code + const notice = event.target.parentNode.parentNode.parentNode; + notice.parentNode.removeChild(notice); + + // Update class accordingly because + // header style is slightly different with or without notice + if (document.querySelector) { + const klass = 'fr-header__with-notice-info'; + const header = document.querySelector('.' + klass); + + if (header) { + header.classList.remove(klass); + } + } +} diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 5bbe9d008..72768047b 100644 --- a/app/views/layouts/_header.haml +++ b/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" } .fr-header__body .fr-container .fr-header__body-row From a2c32b44c09adfbac75af340c1fc673456827231 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Thu, 15 Sep 2022 11:42:59 +0200 Subject: [PATCH 7/9] chore(scss): support dsfr prefixed fr- not being hyphenated --- .scss-lint.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index b917c6e0c..dfa4bc00d 100644 --- a/.scss-lint.yml +++ b/.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 From 55fd4307a1e91d81df0f60497dfc75c4e388dd7d Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Mon, 19 Sep 2022 16:13:41 +0200 Subject: [PATCH 8/9] refactor(header/notice): convert JS to stimulus --- .../notice_component/notice_component.html.haml | 4 ++-- .../controllers/dsfr_header_controller.ts | 13 +++++++++++++ app/javascript/entrypoints/application.js | 5 +---- app/javascript/new_design/header.js | 16 ---------------- app/views/layouts/_header.haml | 4 ++-- 5 files changed, 18 insertions(+), 24 deletions(-) create mode 100644 app/javascript/controllers/dsfr_header_controller.ts delete mode 100644 app/javascript/new_design/header.js diff --git a/app/components/dsfr/notice_component/notice_component.html.haml b/app/components/dsfr/notice_component/notice_component.html.haml index 30bbae4ad..3ff0e4642 100644 --- a/app/components/dsfr/notice_component/notice_component.html.haml +++ b/app/components/dsfr/notice_component/notice_component.html.haml @@ -1,9 +1,9 @@ -.fr-notice.fr-notice--info +.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'), onclick: 'javascript:DS.closeNoticeInfo(event)' } + %button.fr-btn--close.fr-btn{ title: t('.close_notice'), data: { action: "dsfr-header#closeNotice" } } = t('.close_notice') diff --git a/app/javascript/controllers/dsfr_header_controller.ts b/app/javascript/controllers/dsfr_header_controller.ts new file mode 100644 index 000000000..7015ef29a --- /dev/null +++ b/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'); + } +} diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js index 9af25b61e..6e3ec2bc6 100644 --- a/app/javascript/entrypoints/application.js +++ b/app/javascript/entrypoints/application.js @@ -37,8 +37,6 @@ import { showNewAccountPasswordConfirmation } from '../new_design/fc-fusion'; -import { closeNoticeInfo } from '../new_design/header'; - const application = Application.start(); registerControllers(application); @@ -54,8 +52,7 @@ const DS = { showNewAccountPasswordConfirmation, replaceSemicolonByComma, acceptEmailSuggestion, - discardEmailSuggestionBox, - closeNoticeInfo + discardEmailSuggestionBox }; // Start Rails helpers diff --git a/app/javascript/new_design/header.js b/app/javascript/new_design/header.js deleted file mode 100644 index 248a130c6..000000000 --- a/app/javascript/new_design/header.js +++ /dev/null @@ -1,16 +0,0 @@ -export function closeNoticeInfo(event) { - // DSFR usptream code - const notice = event.target.parentNode.parentNode.parentNode; - notice.parentNode.removeChild(notice); - - // Update class accordingly because - // header style is slightly different with or without notice - if (document.querySelector) { - const klass = 'fr-header__with-notice-info'; - const header = document.querySelector('.' + klass); - - if (header) { - header.classList.remove(klass); - } - } -} diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml index 72768047b..a452923d1 100644 --- a/app/views/layouts/_header.haml +++ b/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: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], 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 @@ -101,5 +101,5 @@ - if current_user.expert && current_expert.avis_summary[:total] > 0 = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert } -= yield(:notice_info) + = yield(:notice_info) From 53cd0410602829125a61f42f62fa69b789371d39 Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Mon, 19 Sep 2022 16:40:42 +0200 Subject: [PATCH 9/9] refactor(dsfr): components import order accordingly to their README --- app/javascript/entrypoints/main.css | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/app/javascript/entrypoints/main.css b/app/javascript/entrypoints/main.css index 67e9fc12e..8b41500dd 100644 --- a/app/javascript/entrypoints/main.css +++ b/app/javascript/entrypoints/main.css @@ -1,22 +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/connect/connect.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/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'; -@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';