replace info and warning old cards by DSFR components

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/assets/stylesheets/etablissement.scss

@@ -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;
-    }
-  }
-}

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

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
+    = render Dsfr::AlertComponent.new(state: :warning, title: "Le formulaire contient des erreurs", extra_class_names: 'fr-mb-2w') do |c|
-      .card-title Le formulaire contient des erreurs
+      - c.body do
+        - if condition_errors?
+          %p= t('.fix_conditional', count: errors_for(:condition).size)
+          = error_message_for(:condition)
 
-      - if condition_errors?
+        - if header_section_errors?
-        %p.mb-2= t('.fix_conditional', count: errors_for(:condition).size)
+          %p= t('.fix_header_section', count: errors_for(:header_section).size)
-        = error_message_for(:condition)
+          = error_message_for(:header_section)
-
-      - if header_section_errors?
-        %p.mb-2= 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
+  = render Dsfr::AlertComponent.new(state: :warning, title: "Cette démarche est publiée.", extra_class_names: 'fr-mb-2w') do |c|
-    .card-title Cette démarche est publiée.
+    - c.body do
-    Certains éléments de la description ne sont plus modifiables.
+      %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
+    = 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|
-      .card-title Attention, certains champs ne peuvent être demandés par l’administration. Voici les champs qui nous semblent suspects :
+      - c.body do
-      %ul
+        %ul
-        - @procedure.draft_revision.types_de_champ_public.dubious.each do |dubious_champs|
+          - @procedure.draft_revision.types_de_champ_public.dubious.each do |dubious_champs|
-          %li.dubious-champs= "#{dubious_champs.libelle} (#{dubious_champs.description})"
+            %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
+    = render Dsfr::CalloutComponent.new(title: t(:has_changes, scope: [:administrateurs, :revision_changes]), icon: "fr-fi-information-line") do |c|
-      .card-title
+      - c.body do
-        = t(:has_changes, scope: [:administrateurs, :revision_changes])
+        = render Procedure::RevisionChangesComponent.new changes: @procedure.revision_changes, previous_revision: @procedure.published_revision
-      = render Procedure::RevisionChangesComponent.new changes: @procedure.revision_changes, previous_revision: @procedure.published_revision
+
-      .flex.mt-2.justify-end
+      - c.bottom do
-        = 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
+        %ul.fr-mt-2w.fr-btns-group.fr-btns-group--inline
-        = 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
+          %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 }

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
+  = render Dsfr::CalloutComponent.new(title: "Le dépôt de dossier est fermé") do |c|
-    .card-title
+    - c.with_body do
-      Le dépôt de dossier est fermé
+      - if dossier.procedure.closed_at.present?
-    - 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)}.
-      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
-    - else
+        %p Il n’est plus possible de déposer de dossier pour cette démarche en ligne.
-      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" } }
+                .fr-ml-3w.hidden{ id: "card-#{question_type}", "aria-hidden": true , data: { "support-target": "content" } }
-                  %p.card-title
+                  = render Dsfr::CalloutComponent.new(title: t('.our_answer')) do |c|
-                    = t('.our_answer')
+                    - c.with_body do
-                  .card-content
+                      %p
-                    -# i18n-tasks-use t("support.index.#{question_type}.answer_html")
+                        -# 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)
+                        = 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
+- title = dossier.procedure.discarded? ? "procedure_deleted_title" : "procedure_close_title"
-  - if dossier.procedure.discarded?
+= render Dsfr::AlertComponent.new(state: :warning, title: t("users.dossiers.header.banner.#{title}"), extra_class_names: 'fr-mb-2w') do |c|
-    .flex.justify-between
+  - c.body do
-      .card-title= t('users.dossiers.header.banner.procedure_deleted_title')
+    - if dossier.termine? && dossier.procedure.discarded?
-      = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier}) if !dossier.brouillon?
-    - if dossier.termine?
       %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')
-    - else
       %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
+    - if !dossier.brouillon?
-    .flex.justify-between
+      = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
-      .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)
-

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)
+    %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'
-        = render partial: 'users/dossiers/etablissement/infos_entreprise', locals: { etablissement: etablissement }
+      %li= link_to 'Continuer avec ces informations', url_for_dossier(@dossier), class: 'fr-btn'
-
-    .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'

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
+        = render Dsfr::AlertComponent.new(title: t('.waiting_transfers'), state: :warning, heading_level: 'h2', extra_class_names: 'fr-mt-2w') do |c|
-          .card-title= t('.waiting_transfers')
+          - c.body do
-          %ul
+            %ul
-            - @waiting_transfers.each do |email, nb_dossier|
+              - @waiting_transfers.each do |email, nb_dossier|
-              %li= t('.one_waiting_transfer', email: email, count: 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."