Merge pull request demarches-simplifiees#9225 from demarches-simplifi…

…ees/user-dashboard/change-design-from-table-to-tile

[design] Remplacer les cartes bleu et orange par des composants du DSFR

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;

app/components/dsfr/alert_component.rb

@@ -12,14 +12,21 @@ def prefix_for_state
     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

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

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)

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: {})
 

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?

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: [email protected]_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: [email protected]_revision.valid?, method: :get
 
 - if [email protected]_expires_when_termine_enabled?
   = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }

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)
-

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.

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'

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?
+    - elsif !dossier.brouillon? && dossier.procedure.discarded?
       %p
-        = t('users.dossiers.header.banner.procedure_close_content')
+        = t('users.dossiers.header.banner.procedure_deleted_dossier_en_cours_content')
     - else
       %p
-        = t('users.dossiers.header.banner.procedure_deleted_dossier_en_cours_content')
+        = 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 })

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
-
-        %h2.card-title= raison_sociale_or_name(etablissement)
-
-        = render partial: 'users/dossiers/etablissement/infos_entreprise', locals: { etablissement: etablissement }
+      = 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 }
 
-    .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'

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),

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…" }

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
 

config/locales/views/support/fr.yml

@@ -5,7 +5,7 @@ fr:
       intro_html: "<p>Contactez-nous via ce formulaire et nous vous répondrons dans les plus brefs délais.</p>
         <p>Pensez bien à nous donner le plus d’informations possible pour que nous puissions vous aider au mieux.</p>"
       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."