From 33cc696d8113f419cc66b21d985284c47cabe834 Mon Sep 17 00:00:00 2001 From: Lisa Durand Date: Wed, 21 Jun 2023 12:24:45 +0200 Subject: [PATCH] replace info and warning old cards by DSFR components --- app/assets/stylesheets/card.scss | 16 ------ app/assets/stylesheets/etablissement.scss | 54 ------------------- app/components/dsfr/alert_component.rb | 11 +++- .../alert_component/alert_component.html.haml | 2 +- .../errors_summary/errors_summary.html.haml | 17 +++--- .../procedures/_informations.html.haml | 7 +-- .../procedures/publication.html.haml | 10 ++-- .../administrateurs/procedures/show.html.haml | 15 +++--- app/views/root/patron.html.haml | 11 ---- .../shared/dossiers/_submit_is_over.html.haml | 13 +++-- app/views/support/index.html.haml | 13 +++-- .../_procedure_removed_banner.html.haml | 32 ++++------- .../users/dossiers/etablissement.html.haml | 16 +++--- .../etablissement/_infos_entreprise.html.haml | 12 ++--- app/views/users/dossiers/siret.html.haml | 2 +- app/views/users/profil/show.html.haml | 10 ++-- config/locales/views/support/fr.yml | 2 +- 17 files changed, 78 insertions(+), 165 deletions(-) delete mode 100644 app/assets/stylesheets/etablissement.scss diff --git a/app/assets/stylesheets/card.scss b/app/assets/stylesheets/card.scss index 30b09f156..2db51bef0 100644 --- a/app/assets/stylesheets/card.scss +++ b/app/assets/stylesheets/card.scss @@ -20,22 +20,6 @@ margin-bottom: $default-spacer * 2; } - &.featured { - border-top: 8px solid $blue-france-500; - - .card-title { - color: $blue-france-500; - } - } - - &.warning { - border-top: 8px solid $orange; - - .card-title { - color: $orange; - } - } - &.feedback { max-width: 600px; margin: 30px auto; diff --git a/app/assets/stylesheets/etablissement.scss b/app/assets/stylesheets/etablissement.scss deleted file mode 100644 index 7b40056d8..000000000 --- a/app/assets/stylesheets/etablissement.scss +++ /dev/null @@ -1,54 +0,0 @@ -@import "constants"; -@import "colors"; - -.etablissement { - margin-top: $default-padding * 2; - margin-bottom: $default-padding * 2; - - h1 { - margin-bottom: $default-padding * 2; - } - - p { - margin-bottom: $default-padding; - } - - .etablissement-infos { - margin-top: $default-padding * 2; - margin-bottom: $default-padding * 2; - - > * { - margin-bottom: $default-padding; - - &:last-child { - margin-bottom: 0; - } - } - - ul { - line-height: 28px; - list-style-type: disc; - list-style-position: inside; - - // Inner lists - ul { - margin-left: $default-padding; - list-style-type: circle; - } - } - - .etablissement-exercices { - font-style: italic; - } - } - - .actions { - display: flex; - flex-wrap: wrap-reverse; - justify-content: space-between; - - .button { - margin-bottom: $default-padding; - } - } -} diff --git a/app/components/dsfr/alert_component.rb b/app/components/dsfr/alert_component.rb index 6323578a4..d1fe28566 100644 --- a/app/components/dsfr/alert_component.rb +++ b/app/components/dsfr/alert_component.rb @@ -12,14 +12,21 @@ class Dsfr::AlertComponent < ApplicationComponent end end + def alert_class(state) + ["fr-alert fr-alert--#{state}", extra_class_names].compact.flatten + end + private - def initialize(state:, title:, heading_level: 'h3') + def initialize(state:, title:, extra_class_names: nil, heading_level: 'h3') @state = state @title = title @block = block + @extra_class_names = extra_class_names @heading_level = heading_level end - attr_reader :state, :title, :block, :heading_level + attr_reader :state, :title, :block, :extra_class_names, :heading_level + + private end diff --git a/app/components/dsfr/alert_component/alert_component.html.haml b/app/components/dsfr/alert_component/alert_component.html.haml index c8b934124..b8e848bdb 100644 --- a/app/components/dsfr/alert_component/alert_component.html.haml +++ b/app/components/dsfr/alert_component/alert_component.html.haml @@ -1,4 +1,4 @@ -%div{ class: "fr-alert fr-alert--#{state}" } +%div{ class: alert_class(state) } = content_tag(heading_level, class: 'fr-alert__title') do = "#{prefix_for_state}#{title}" = body diff --git a/app/components/types_de_champ_editor/errors_summary/errors_summary.html.haml b/app/components/types_de_champ_editor/errors_summary/errors_summary.html.haml index b9dff099f..3b2c84db7 100644 --- a/app/components/types_de_champ_editor/errors_summary/errors_summary.html.haml +++ b/app/components/types_de_champ_editor/errors_summary/errors_summary.html.haml @@ -1,12 +1,11 @@ #errors-summary - if invalid? - .card.warning - .card-title Le formulaire contient des erreurs + = render Dsfr::AlertComponent.new(state: :warning, title: "Le formulaire contient des erreurs", extra_class_names: 'fr-mb-2w') do |c| + - c.body do + - if condition_errors? + %p= t('.fix_conditional', count: errors_for(:condition).size) + = error_message_for(:condition) - - if condition_errors? - %p.mb-2= t('.fix_conditional', count: errors_for(:condition).size) - = error_message_for(:condition) - - - if header_section_errors? - %p.mb-2= t('.fix_header_section', count: errors_for(:header_section).size) - = error_message_for(:header_section) + - if header_section_errors? + %p= t('.fix_header_section', count: errors_for(:header_section).size) + = error_message_for(:header_section) diff --git a/app/views/administrateurs/procedures/_informations.html.haml b/app/views/administrateurs/procedures/_informations.html.haml index 062fc4d21..88daf5c21 100644 --- a/app/views/administrateurs/procedures/_informations.html.haml +++ b/app/views/administrateurs/procedures/_informations.html.haml @@ -1,7 +1,8 @@ - if @procedure.locked? - .card.warning - .card-title Cette démarche est publiée. - Certains éléments de la description ne sont plus modifiables. + = render Dsfr::AlertComponent.new(state: :warning, title: "Cette démarche est publiée.", extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %p + Certains éléments de la description ne sont plus modifiables. = render Dsfr::InputComponent.new(form: f, attribute: :libelle, input_type: :text_field, opts: {}) diff --git a/app/views/administrateurs/procedures/publication.html.haml b/app/views/administrateurs/procedures/publication.html.haml index a691e45ed..d88bc5acb 100644 --- a/app/views/administrateurs/procedures/publication.html.haml +++ b/app/views/administrateurs/procedures/publication.html.haml @@ -5,11 +5,11 @@ ['Publication']] } .container - if @procedure.draft_revision.types_de_champ_public.dubious.present? - .card.warning.mb-3 - .card-title Attention, certains champs ne peuvent être demandés par l’administration. Voici les champs qui nous semblent suspects : - %ul - - @procedure.draft_revision.types_de_champ_public.dubious.each do |dubious_champs| - %li.dubious-champs= "#{dubious_champs.libelle} (#{dubious_champs.description})" + = render Dsfr::AlertComponent.new(state: :warning, title: "Attention, certains champs ne peuvent être demandés par l’administration. Voici les champs qui nous semblent suspects :", extra_class_names: 'fr-mb-2w') do |c| + - c.body do + %ul + - @procedure.draft_revision.types_de_champ_public.dubious.each do |dubious_champs| + %li.dubious-champs= "#{dubious_champs.libelle} (#{dubious_champs.description})" .lien-demarche %h1 - if @procedure.brouillon? diff --git a/app/views/administrateurs/procedures/show.html.haml b/app/views/administrateurs/procedures/show.html.haml index 1929d1e63..01b0e4960 100644 --- a/app/views/administrateurs/procedures/show.html.haml +++ b/app/views/administrateurs/procedures/show.html.haml @@ -32,13 +32,14 @@ - if @procedure.draft_changed? .fr-container - .card.featured - .card-title - = t(:has_changes, scope: [:administrateurs, :revision_changes]) - = render Procedure::RevisionChangesComponent.new changes: @procedure.revision_changes, previous_revision: @procedure.published_revision - .flex.mt-2.justify-end - = button_to "Réinitialiser les modifications", admin_procedure_reset_draft_path(@procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir réinitialiser les modifications ?' }, method: :put - = button_to 'Publier les modifications', admin_procedure_publication_path(@procedure), class: 'fr-btn', id: 'publish-procedure-link', data: { disable_with: "Publication..." }, disabled: !@procedure.draft_revision.valid?, method: :get + = render Dsfr::CalloutComponent.new(title: t(:has_changes, scope: [:administrateurs, :revision_changes]), icon: "fr-fi-information-line") do |c| + - c.body do + = render Procedure::RevisionChangesComponent.new changes: @procedure.revision_changes, previous_revision: @procedure.published_revision + + - c.bottom do + %ul.fr-mt-2w.fr-btns-group.fr-btns-group--inline + %li= button_to "Réinitialiser les modifications", admin_procedure_reset_draft_path(@procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir réinitialiser les modifications ?' }, method: :put + %li= button_to 'Publier les modifications', admin_procedure_publication_path(@procedure), class: 'fr-btn', id: 'publish-procedure-link', data: { disable_with: "Publication..." }, disabled: !@procedure.draft_revision.valid?, method: :get - if !@procedure.procedure_expires_when_termine_enabled? = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure } diff --git a/app/views/root/patron.html.haml b/app/views/root/patron.html.haml index a7ffeae8b..35c9f6be4 100644 --- a/app/views/root/patron.html.haml +++ b/app/views/root/patron.html.haml @@ -177,16 +177,6 @@ Titre de la carte %p Et voici le contenu de la carte - .card.featured - .card-title - Titre de la carte mise en avant - %p Et voici le contenu de la carte - - .card.warning - .card-title - Titre de la carte d’avertissement - %p Et voici le contenu de la carte - .card.feedback .card-title Titre de la carte pour demander un avis @@ -397,4 +387,3 @@ %h3.fr-mt-4w Existing attachment on generic object, view as download = render Attachment::EditComponent.new(attached_file: avis.introduction_file, attachment: attachment.reload, view_as: :download) - diff --git a/app/views/shared/dossiers/_submit_is_over.html.haml b/app/views/shared/dossiers/_submit_is_over.html.haml index 6c317cf71..61cdd1cef 100644 --- a/app/views/shared/dossiers/_submit_is_over.html.haml +++ b/app/views/shared/dossiers/_submit_is_over.html.haml @@ -1,8 +1,7 @@ - if dossier_submission_is_closed?(dossier) - .card.featured - .card-title - Le dépôt de dossier est fermé - - if dossier.procedure.closed_at.present? - Il n’est plus possible de déposer de dossier pour cette démarche en ligne depuis le #{try_format_date(dossier.procedure.closed_at)}. - - else - Il n’est plus possible de déposer de dossier pour cette démarche en ligne. + = render Dsfr::CalloutComponent.new(title: "Le dépôt de dossier est fermé") do |c| + - c.with_body do + - if dossier.procedure.closed_at.present? + %p Il n’est plus possible de déposer de dossier pour cette démarche en ligne depuis le #{try_format_date(dossier.procedure.closed_at)}. + - else + %p Il n’est plus possible de déposer de dossier pour cette démarche en ligne. diff --git a/app/views/support/index.html.haml b/app/views/support/index.html.haml index 01c05c156..2c4968485 100644 --- a/app/views/support/index.html.haml +++ b/app/views/support/index.html.haml @@ -34,13 +34,12 @@ = question - if link.present? - .support.card.featured.mb-4.ml-4.hidden{ id: "card-#{question_type}", "aria-hidden": true , data: { "support-target": "content" } } - %p.card-title - = t('.our_answer') - .card-content - -# i18n-tasks-use t("support.index.#{question_type}.answer_html") - = t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link) - + .fr-ml-3w.hidden{ id: "card-#{question_type}", "aria-hidden": true , data: { "support-target": "content" } } + = render Dsfr::CalloutComponent.new(title: t('.our_answer')) do |c| + - c.with_body do + %p + -# i18n-tasks-use t("support.index.#{question_type}.answer_html") + = t('answer_html', scope: [:support, :index, question_type], base_url: APPLICATION_BASE_URL, "link_#{question_type}": link) .fr-input-group = label_tag :dossier_id, t('file_number', scope: [:utils]), class: 'fr-label' diff --git a/app/views/users/dossiers/_procedure_removed_banner.html.haml b/app/views/users/dossiers/_procedure_removed_banner.html.haml index eb22c5f4d..a656b18ca 100644 --- a/app/views/users/dossiers/_procedure_removed_banner.html.haml +++ b/app/views/users/dossiers/_procedure_removed_banner.html.haml @@ -1,30 +1,20 @@ -.card.warning.mb-3.no-list - - if dossier.procedure.discarded? - .flex.justify-between - .card-title= t('users.dossiers.header.banner.procedure_deleted_title') - = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier}) if !dossier.brouillon? - - if dossier.termine? +- title = dossier.procedure.discarded? ? "procedure_deleted_title" : "procedure_close_title" += render Dsfr::AlertComponent.new(state: :warning, title: t("users.dossiers.header.banner.#{title}"), extra_class_names: 'fr-mb-2w') do |c| + - c.body do + - if dossier.termine? && dossier.procedure.discarded? %p = t('users.dossiers.header.banner.procedure_deleted_dossier_termine_content') - - elsif dossier.brouillon? - %p - = t('users.dossiers.header.banner.procedure_close_content') - - else + - elsif !dossier.brouillon? && dossier.procedure.discarded? %p = t('users.dossiers.header.banner.procedure_deleted_dossier_en_cours_content') + - else + %p + = t('users.dossiers.header.banner.procedure_close_content') = render partial: "users/dossiers/replacement_procedure", locals: { replacement_procedure: dossier.procedure.replaced_by_procedure } + %p = t('users.dossiers.header.banner.contact_service', service_name: dossier.procedure.service.nom, service_phone_number: dossier.procedure.service.telephone, service_email: dossier.procedure.service.email) - - else - .flex.justify-between - .card-title= t('users.dossiers.header.banner.procedure_close_title') - = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier }) if !dossier.brouillon? - %p - = t('users.dossiers.header.banner.procedure_close_content') - - = render partial: "users/dossiers/replacement_procedure", locals: { replacement_procedure: dossier.procedure.replaced_by_procedure } - %p - = t('users.dossiers.header.banner.contact_service', service_name: dossier.procedure.service.nom, service_phone_number: dossier.procedure.service.telephone, service_email: dossier.procedure.service.email) - + - if !dossier.brouillon? + = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier }) diff --git a/app/views/users/dossiers/etablissement.html.haml b/app/views/users/dossiers/etablissement.html.haml index 78be5fbac..bd8b1f7d2 100644 --- a/app/views/users/dossiers/etablissement.html.haml +++ b/app/views/users/dossiers/etablissement.html.haml @@ -3,7 +3,7 @@ - content_for :footer do = render partial: "users/procedure_footer", locals: { procedure: @dossier.procedure, dossier: @dossier } -.etablissement +.fr-mt-5w .container %h1 Informations sur l’établissement @@ -34,12 +34,10 @@ %p Ces informations seront jointes à votre dossier. - .etablissement-infos.card.featured + = render Dsfr::CalloutComponent.new(title: raison_sociale_or_name(etablissement)) do |c| + - c.with_body do + = render partial: 'users/dossiers/etablissement/infos_entreprise', locals: { etablissement: etablissement } - %h2.card-title= raison_sociale_or_name(etablissement) - - = render partial: 'users/dossiers/etablissement/infos_entreprise', locals: { etablissement: etablissement } - - .actions - = link_to 'Utiliser un autre numéro SIRET', siret_dossier_path(@dossier), class: 'fr-btn fr-btn--secondary' - = link_to 'Continuer avec ces informations', url_for_dossier(@dossier), class: 'fr-btn' + %ul.fr-mt-2w.fr-mb-5w.fr-btns-group.fr-btns-group--inline + %li= link_to 'Utiliser un autre numéro SIRET', siret_dossier_path(@dossier), class: 'fr-btn fr-btn--secondary' + %li= link_to 'Continuer avec ces informations', url_for_dossier(@dossier), class: 'fr-btn' diff --git a/app/views/users/dossiers/etablissement/_infos_entreprise.html.haml b/app/views/users/dossiers/etablissement/_infos_entreprise.html.haml index d41ea3384..bfacd2f8c 100644 --- a/app/views/users/dossiers/etablissement/_infos_entreprise.html.haml +++ b/app/views/users/dossiers/etablissement/_infos_entreprise.html.haml @@ -1,4 +1,4 @@ -%ul.etablissement-infos-entreprise +%ul %li Siret : = pretty_siret(etablissement.siret) @@ -16,19 +16,19 @@ - etablissement.adresse.split("\n").each do |line| = line - %p.etablissement-exercices + %p Nous allons également récupérer la forme juridique, la date de création, les effectifs, le numéro TVA intracommunautaire, le capital social de votre organisation. Pour les associations, nous récupérerons également l'objet, la date de création, de déclaration et de publication. - %p.etablissement-exercices Les exercices comptables des trois dernières années pourront être joints à votre dossier. + %p Les exercices comptables des trois dernières années pourront être joints à votre dossier. - procedure = etablissement.dossier.procedure - if procedure.api_entreprise_role?("attestations_sociales") - %p.etablissement-exercices Une attestation sociale sera jointe à votre dossier + %p Une attestation sociale sera jointe à votre dossier - if procedure.api_entreprise_role?("attestations_fiscales") - %p.etablissement-exercices Une attestation fiscale sera jointe à votre dossier + %p Une attestation fiscale sera jointe à votre dossier - if procedure.api_entreprise_role?("bilans_bdf") - %p.etablissement-exercices Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier. + %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier. %p = link_to "➡ Autres informations sur l’organisme sur « annuaire-entreprises.data.gouv.fr »", annuaire_link(etablissement.siret), diff --git a/app/views/users/dossiers/siret.html.haml b/app/views/users/dossiers/siret.html.haml index 64bc5a761..01f688e86 100644 --- a/app/views/users/dossiers/siret.html.haml +++ b/app/views/users/dossiers/siret.html.haml @@ -16,4 +16,4 @@ annuaire-entreprises.data.gouv.fr ou renseignez-vous auprès de votre service comptable. - = f.submit "Valider", class: "button large primary expand mt-1", data: { disable_with: "Récupération des informations…" } + = f.submit "Valider", class: "fr-btn", data: { disable_with: "Récupération des informations…" } diff --git a/app/views/users/profil/show.html.haml b/app/views/users/profil/show.html.haml index e8fe3b32a..4ced0acba 100644 --- a/app/views/users/profil/show.html.haml +++ b/app/views/users/profil/show.html.haml @@ -53,11 +53,11 @@ = submit_tag t('.transfer_my_files'), class: 'fr-btn fr-btn--secondary', data: { confirm: t('.transfer_confirmation') } - if @waiting_transfers.present? - .card.warning - .card-title= t('.waiting_transfers') - %ul - - @waiting_transfers.each do |email, nb_dossier| - %li= t('.one_waiting_transfer', email: email, count: nb_dossier) + = render Dsfr::AlertComponent.new(title: t('.waiting_transfers'), state: :warning, heading_level: 'h2', extra_class_names: 'fr-mt-2w') do |c| + - c.body do + %ul + - @waiting_transfers.each do |email, nb_dossier| + %li= t('.one_waiting_transfer', email: email, count: nb_dossier) = render Profile::APITokenCardComponent.new diff --git a/config/locales/views/support/fr.yml b/config/locales/views/support/fr.yml index 260a0f068..8450f1692 100644 --- a/config/locales/views/support/fr.yml +++ b/config/locales/views/support/fr.yml @@ -5,7 +5,7 @@ fr: intro_html: "

Contactez-nous via ce formulaire et nous vous répondrons dans les plus brefs délais.

Pensez bien à nous donner le plus d’informations possible pour que nous puissions vous aider au mieux.

" your_question: Votre question - our_answer: 👉 Notre réponse + our_answer: Notre réponse notice_pj_product: Une capture d’écran peut nous aider à identifier plus facilement l’endroit à améliorer. notice_pj_other: Une capture d’écran peut nous aider à identifier plus facilement le problème. notice_upload_group: "Taille maximale : 200 Mo. Formats supportés : jpg, png, pdf."