Merge pull request #7921 from mfo/US/refactor-admin-page-tile-with-dsfr-tile

design(page de configuration de procedure): passage de la grille au DSFR

app/assets/stylesheets/card_admin.scss

@@ -1,65 +1,6 @@
 @import "colors";
 @import "constants";
 
-.card-admin {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  width: 236px;
-  height: 200px;
-  border-radius: 4px;
-  border: solid 1px $border-grey;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 20px;
-  margin-right: 20px;
-
-  .card-admin-status-accept {
-    color: #50AA75;
-  }
-
-  .card-admin-status-todo {
-    color: $blue-france-500;
-  }
-
-  .card-admin-status-error {
-    color: $light-red;
-  }
-
-  .card-admin-title {
-    font-weight: bold;
-    font-size: 18px;
-    margin-bottom: $default-spacer;
-  }
-
-  .card-admin-subtitle {
-    font-size: 14px;
-  }
-
-  .card-admin-action {
-    margin-top: auto;
-  }
-
-  .button {
-    margin: auto auto 0 auto;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  &:hover {
-    color: $blue-france-500;
-
-    .button {
-      color: $blue-france-500;
-    }
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  .card-admin {
-    margin-left: auto;
-    margin-right: auto;
-  }
+.fr-tile-subtitle {
+  min-height: 7rem;
 }

app/assets/stylesheets/procedure_admin.scss

@@ -1,12 +1,3 @@
-.procedure-grid {
-  display: flex;
-  flex-wrap: wrap;
-
-  > a { // TODO, re-use DSFR https://github.com/betagouv/demarches-simplifiees.fr/issues/7884
-    background-image: none; // remove DSFR underline
-  }
-}
-
 .procedure-admin-container {
   display: flex;
   justify-content: flex-end;
@@ -38,12 +29,6 @@
   }
 }
 
-.procedure-admin-explanation {
-  font-weight: bold;
-  font-size: 20px;
-  margin-bottom: 20px;
-}
-
 .admin-metadata {
   margin-top: -8px;
   margin-bottom: 8px;

app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml

@@ -1,10 +1,12 @@
-= link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'card-admin' do
+= link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     %div
       %span.icon.accept
-    %p.card-admin-status-accept Validé
+      %p.fr-tile-status-accept Validé
     %div
-    %p.card-admin-title
-      %span.badge.baseline= @procedure.administrateurs.size
+      .line-count.fr-my-1w
+        %p.fr-tag= @procedure.administrateurs.size
+      %h3.fr-h6
         = t('.title', count: @procedure.administrateurs.size)
-    %p.card-admin-subtitle Gestion de la démarche
-  %p.button= t('views.shared.actions.edit')
+      %p.fr-tile-subtitle Gestion de la démarche
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/annotations_component/annotations_component.html.haml

@@ -1,19 +1,21 @@
-= link_to annotations_admin_procedure_path(@procedure), class: 'card-admin', title: error_messages do
+= link_to annotations_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link', title: error_messages do
+  .fr-tile__body.flex.justify-between
     - if error_messages.present?
       %div
         %span.icon.refuse
-      %p.card-admin-status-error À modifier
+        %p.fr-tile-status-error À modifier
     - elsif @count == 0
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À configurer
+        %p.fr-tile-status-todo À configurer
     - else
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     %div
-    %p.card-admin-title
-      %span.badge.baseline= @count
+      .line-count.fr-my-1w
+        %p.fr-tag= @count
+      %h3.fr-h6
         = t('.title')
-    %p.card-admin-subtitle Champs à remplir par l’administration
-  %p.button= t('views.shared.actions.edit')
+      %p.fr-tile-subtitle Champs à remplir par l’administration
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml

@@ -1,13 +1,14 @@
-= link_to jeton_admin_procedure_path(@procedure), class: 'card-admin' do
+= link_to jeton_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.api_entreprise_token.present?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À configurer
+        %p.fr-tile-status-todo À configurer
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Configurer le jeton API entreprise
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Configurer le jeton API entreprise
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml

@@ -1,13 +1,14 @@
-= link_to admin_procedure_api_particulier_path(@procedure), class: 'card-admin', id: 'api-particulier' do
+= link_to admin_procedure_api_particulier_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'api-particulier' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.api_particulier_token.present?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept= t('.ready')
+        %p.fr-tile-status-accept= t('.ready')
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo= t('.needs_configuration')
+        %p.fr-tile-status-todo= t('.needs_configuration')
     %div
-    %p.card-admin-title= Procedure.human_attribute_name(:api_particulier_token)
-    %p.card-admin-subtitle= t('.configure_api_particulier_token')
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= Procedure.human_attribute_name(:api_particulier_token)
+      %p.fr-tile-subtitle= t('.configure_api_particulier_token')
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/attestation_component/attestation_component.html.haml

@@ -1,13 +1,14 @@
-= link_to edit_admin_procedure_attestation_template_path(@procedure), class: 'card-admin' do
+= link_to edit_admin_procedure_attestation_template_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.draft_attestation_template&.activated?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Activée
+        %p.fr-tile-status-accept Activée
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo Désactivée
+        %p.fr-tile-status-todo Désactivée
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Délivrance automatique pour les dossiers acceptés
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Délivrance automatique pour les dossiers acceptés
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/champs_component/champs_component.html.haml

@@ -1,19 +1,22 @@
-= link_to champs_admin_procedure_path(@procedure), class: 'card-admin', title: error_messages do
+= link_to champs_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link', title: error_messages do
+  .fr-tile__body.flex.justify-between
     - if error_messages.present?
       %div
         %span.icon.refuse
-      %p.card-admin-status-error À modifier
+        %p.fr-tile-status-error À modifier
     - elsif @count == 0
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À faire
+        %p.fr-tile-status-todo À faire
     - else
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     %div
-    %p.card-admin-title
-      %span.badge.baseline= @count
+      .line-count.fr-my-1w
+        %p.fr-tag= @count
+
+      %h3.fr-h6
         = t('.title')
-    %p.card-admin-subtitle À remplir par les usagers
-  %p.button= t('views.shared.actions.edit')
+      %p.fr-tile-subtitle À remplir par les usagers
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml

@@ -1,13 +1,14 @@
-= link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'card-admin' do
+= link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.active_dossier_submitted_message.present?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À configurer
+        %p.fr-tile-status-todo À configurer
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Orienter l'usager suite à l'envoi de son dossier
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Orienter l'usager suite à l'envoi de son dossier
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/emails_component/emails_component.html.haml

@@ -1,8 +1,9 @@
-= link_to admin_procedure_mail_templates_path(@procedure), class: 'card-admin' do
+= link_to admin_procedure_mail_templates_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     %div
       %span.icon.clock
-    %p.card-admin-status-todo À configurer
+      %p.fr-tile-status-todo À configurer
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Notifications automatiques
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Notifications automatiques
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/experts_component/experts_component.html.haml

@@ -1,8 +1,9 @@
-= link_to admin_procedure_experts_path(@procedure), class: 'card-admin' do
+= link_to admin_procedure_experts_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     %div
       %span.icon.preview
-    %p.card-admin-status-todo À configurer
+      %p.fr-tile-status-todo À configurer
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Gérer les avis des experts invités
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Gérer les avis des experts invités
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml

@@ -1,19 +1,21 @@
-= link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'card-admin' do
+= link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.routee? || @procedure.instructeurs.size > 1
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À faire
+        %p.fr-tile-status-todo À faire
     %div
-    %p.card-admin-title
+      .line-count.fr-my-1w
         - if @procedure.routee?
-        %span.badge.baseline= @procedure.groupe_instructeurs.size
+          %p.fr-tag= @procedure.groupe_instructeurs.size
         - else
-        %span.badge.baseline= @procedure.instructeurs.size
+          %p.fr-tag= @procedure.instructeurs.size
 
+      %h3.fr-h6
         = @procedure.routee? ? t('.routee.title', count: @procedure.groupe_instructeurs.size) : t('.title', count: @procedure.instructeurs.size)
-    %p.card-admin-subtitle Suivi des dossiers
-  %p.button= t('views.shared.actions.edit')
+      %p.fr-tile-subtitle Suivi des dossiers
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/modifications_component/modifications_component.html.haml

@@ -1,11 +1,12 @@
-= link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'card-admin' do
+= link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     %div
       %span.icon.accept
-    %p.card-admin-status-accept Activée
+      %p.fr-tile-status-accept Activée
     %div
-    %p.card-admin-title
-      %span.badge.baseline= @procedure.revisions_count
+      %h3.fr-h6.fr-mt-10v
+        %p.fr-tag= @procedure.revisions_count
         = t('.title', count: @procedure.revisions_count)
 
-    %p.card-admin-subtitle Historique des modifications du formulaire
-  %p.button Voir
+      %p.fr-tile-subtitle Historique des modifications du formulaire
+    %p.fr-btn.fr-btn--tertiary Voir

app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml

@@ -1,13 +1,14 @@
-= link_to monavis_admin_procedure_path(@procedure), class: 'card-admin' do
+= link_to monavis_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.monavis_embed.present?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À configurer
+        %p.fr-tile-status-todo À configurer
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Avis des usagers sur votre démarche
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Avis des usagers sur votre démarche
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/presentation_component/presentation_component.html.haml

@@ -1,8 +1,9 @@
-= link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'card-admin' do
+= link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     %div
       %span.icon.accept
-    %p.card-admin-status-accept Validé
+      %p.fr-tile-status-accept Validé
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle Logo, nom, description
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle Logo, nom, description
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/service_component/service_component.html.haml

@@ -1,17 +1,18 @@
-= link_to service_link, class: 'card-admin', id: 'service' do
+= link_to service_link, class: 'fr-tile fr-enlarge-link', id: 'service' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.service_id.present?
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À faire
+        %p.fr-tile-status-todo À faire
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle
         - if @procedure.service_id.present?
           = @procedure.service.nom
         - else
           Choix du service administratif
-  %p.button= service_button_text
+    %p.fr-btn.fr-btn--tertiary= service_button_text

app/components/procedure/card/zones_component/zones_component.html.haml

@@ -1,13 +1,14 @@
-= link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'card-admin' do
+= link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'fr-tile fr-enlarge-link' do
+  .fr-tile__body.flex.justify-between
     - if @procedure.zones.size >= 1
       %div
         %span.icon.accept
-      %p.card-admin-status-accept Validé
+        %p.fr-tile-status-accept Validé
     - else
       %div
         %span.icon.clock
-      %p.card-admin-status-todo À faire
+        %p.fr-tile-status-todo À faire
     %div
-    %p.card-admin-title= t('.title')
-    %p.card-admin-subtitle= t('.subtitle')
-  %p.button= t('views.shared.actions.edit')
+      %h3.fr-h6.fr-mt-10v= t('.title')
+      %p.fr-tile-subtitle= t('.subtitle')
+    %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/javascript/entrypoints/main.css

@@ -21,6 +21,7 @@
 @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/tile/tile.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';

app/views/administrateurs/_breadcrumbs.html.haml

@@ -22,7 +22,7 @@
 
     - if defined?(metadatas)
       .metadatas.pb-3
-        %p.fr-h1.fr-mb-0= t('created_at', scope: [:layouts, :breadcrumb], number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'))
+        %h1.fr-h6.fr-mb-0= t('created_at', scope: [:layouts, :breadcrumb], number: @procedure.id, date: @procedure.created_at.strftime('%d/%m/%Y'))
         - if @procedure.close?
           %p.fr-h2= t('closed_at', scope: [:layouts, :breadcrumb], date: @procedure.closed_at.strftime('%d/%m/%Y'))
         %p

app/views/administrateurs/jeton_particulier/api_particulier.html.haml

@@ -9,13 +9,13 @@
       - if @procedure.api_particulier_token.blank?
         %div
           %span.icon.clock
-          %p.card-admin-status-todo= t('.needs_configuration')
+          %p.fr-text-default--info= t('.needs_configuration')
       - else
         %div
           %span.icon.accept
-          %p.card-admin-status-accept= t('.already_configured')
+          %p.fr-text-default--success= t('.already_configured')
       %div
-        %p.card-admin-title
+        %h3.fr-h6
           = Procedure.human_attribute_name(:jeton_api_particulier)
       %p.button= t('views.shared.actions.edit')
 
@@ -24,11 +24,11 @@
         - if @procedure.api_particulier_token.blank?
           %div
             %span.icon.clock
-            %p.card-admin-status-todo= t('.needs_configuration')
+            %p.fr-text-default--info= t('.needs_configuration')
         - else
           %div
             %span.icon.accept
-            %p.card-admin-status-accept= t('.already_configured')
+            %p.fr-text-default--success= t('.already_configured')
         %div
           %p.card-admin-title= t('administrateurs.sources_particulier.show.data_sources')
         %p.button= t('views.shared.actions.edit')

app/views/administrateurs/procedures/show.html.haml

@@ -55,24 +55,24 @@
 - if !@procedure.procedure_expires_when_termine_enabled?
   = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
 .container
-  %h2.procedure-admin-explanation Indispensable avant publication
-  .procedure-grid
-    = render Procedure::Card::PresentationComponent.new(procedure: @procedure)
-    = render Procedure::Card::ZonesComponent.new(procedure: @procedure) if @procedure.feature_enabled?(:zonage)
-    = render Procedure::Card::ChampsComponent.new(procedure: @procedure)
-    = render Procedure::Card::ServiceComponent.new(procedure: @procedure, administrateur: current_administrateur)
-    = render Procedure::Card::AdministrateursComponent.new(procedure: @procedure)
-    = render Procedure::Card::InstructeursComponent.new(procedure: @procedure)
-    = render Procedure::Card::ModificationsComponent.new(procedure: @procedure)
+  %h2.fr-mt-5w.fr-mb-3w.fr-h1 Indispensable avant publication
+  .fr-grid-row.fr-grid-row--gutters
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::PresentationComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ZonesComponent.new(procedure: @procedure) if @procedure.feature_enabled?(:zonage)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ChampsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ServiceComponent.new(procedure: @procedure, administrateur: current_administrateur)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AdministrateursComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::InstructeursComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ModificationsComponent.new(procedure: @procedure)
 
-  %h2.procedure-admin-explanation Pour aller plus loin
-  .procedure-grid
-    = render Procedure::Card::AttestationComponent.new(procedure: @procedure)
-    = render Procedure::Card::ExpertsComponent.new(procedure: @procedure)
-    = render Procedure::Card::EmailsComponent.new(procedure: @procedure)
-    = render Procedure::Card::AnnotationsComponent.new(procedure: @procedure)
-    = render Procedure::Card::APIEntrepriseComponent.new(procedure: @procedure)
-    = render Procedure::Card::APIParticulierComponent.new(procedure: @procedure)
-    = render Procedure::Card::MonAvisComponent.new(procedure: @procedure)
-    = render Procedure::Card::DossierSubmittedMessageComponent.new(procedure: @procedure)
+  %h2.fr-mt-5w.fr-mb-3w.fr-h1 Pour aller plus loin
+  .fr-grid-row.fr-grid-row--gutters
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AttestationComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::ExpertsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::EmailsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::AnnotationsComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::APIEntrepriseComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::APIParticulierComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::MonAvisComponent.new(procedure: @procedure)
+    .fr-col-6.fr-col-md-4.fr-col-lg-3= render Procedure::Card::DossierSubmittedMessageComponent.new(procedure: @procedure)
 

config/locales/views/layouts/_breadcrumb.en.yml

@@ -7,7 +7,7 @@ en:
       preview: "Preview the form"
       continue: "Continue"
       continue_title: "You can comeback using this link"
-      created_at: "Created at %{date} - n° %{number}"
+      created_at: "Procedure n° %{number} created at %{date}"
       closed_at: "Closed at %{date}"
       published: "Published"
       draft: "Draft"

config/locales/views/layouts/_breadcrumb.fr.yml

@@ -7,7 +7,7 @@ fr:
       preview: "Prévisualiser le formulaire"
       continue: "Continuer"
       continue_title: "Vous pourrez revenir ici par la suite"
-      created_at: "Créée le %{date} - n° %{number}"
+      created_at: "Démarche n° %{number}, créée le %{date}"
       closed_at: "Close le %{date}"
       published: "Publiée – "
       draft: "Brouillon"

spec/system/administrateurs/procedure_attestation_template_spec.rb

@@ -15,7 +15,7 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
 
   def find_attestation_card(with_nested_selector: nil)
     full_selector = [
-      ".card-admin[href=\"#{edit_admin_procedure_attestation_template_path(procedure)}\"]",
+      "a[href=\"#{edit_admin_procedure_attestation_template_path(procedure)}\"]",
       with_nested_selector
     ].compact.join(" ")
     page.find(full_selector)

spec/system/administrateurs/procedure_cloning_spec.rb

@@ -26,7 +26,7 @@ describe 'As an administrateur I wanna clone a procedure', js: true do
       expect(page).to have_current_path(admin_procedure_path(id: Procedure.last))
 
       # select service
-      find("#service .button").click
+      find("#service .fr-btn").click
       click_on "Assigner"
 
       # then publish

spec/system/administrateurs/procedure_creation_spec.rb

@@ -64,7 +64,7 @@ describe 'Creating a new procedure', js: true do
       click_link procedure.libelle
       expect(page).to have_current_path(admin_procedure_path(procedure))
 
-      champs_card = find('.card-admin', text: 'Champs du formulaire')
+      champs_card = find('.fr-tile', text: 'Champs du formulaire')
       expect(champs_card).to have_selector('.icon.refuse')
       expect(champs_card).to have_content('À modifier')
     end