Merge pull request #9074 from demarches-simplifiees/add-more-info-on-procedure-description

[Refonte page accueil demarche] Détailler la description pour plus de clarté pour l'usager

app/assets/stylesheets/commencer.scss

@@ -1,16 +1,6 @@
 @import "constants";
 
 .commencer {
-  @media (min-width: $two-columns-breakpoint) {
-    .button:first-of-type {
-      margin-top: 4 * $default-spacer;
-    }
-  }
-
-  .button {
-    margin-bottom: 2 * $default-spacer;
-  }
-
   .optional-on-small-screens {
     color: #FFFFFF;
   }

app/assets/stylesheets/procedure_context.scss

@@ -2,7 +2,6 @@
 @import "constants";
 
 $procedure-context-breakpoint: $two-columns-breakpoint;
-$procedure-description-line-height: 22px;
 
 .procedure-preview {
   .paperless-logo {
@@ -31,23 +30,6 @@ $procedure-description-line-height: 22px;
     font-size: 12px;
   }
 
-  .procedure-title {
-    font-size: 26px;
-    margin: 0 0 20px 0;
-    text-align: center;
-
-    @media (min-width: $procedure-context-breakpoint) {
-      margin: 50px 0 32px;
-      font-size: 30px;
-      text-align: left;
-    }
-  }
-
-  .procedure-configuration {
-    font-size: 20px;
-    margin-bottom: 32px;
-  }
-
   .procedure-configuration--auto-archive {
     cursor: pointer;
 
@@ -72,39 +54,8 @@ $procedure-description-line-height: 22px;
     border-bottom: 1px dotted $blue-france-500;
   }
 
-  .read-more-button {
-    display: none;
-  }
-
-  @media (max-width: $procedure-context-breakpoint) {
-    // Truncate description and display the "Read more" UI if the text is too long
-    .procedure-description-body.read-more-collapsed {
-      // Setting the description at 25% of the viewport height:
-      // - displays more text on screens having more vertical space (like small tablets);
-      // - is enough for the action buttons to be visible on the bottom (even on mobiles).
-      max-height: 25vh;
-
-      // If the text exceeds the max-height,
-      // truncate it and displays the "Read more" button.
-      &.read-more-enabled {
-        overflow: auto;
-        border-bottom: 1px solid $border-grey;
-
-        + .read-more-button {
-          display: block;
-          position: relative;
-          margin-left: auto;
-          margin-right: auto;
-          top: -19px;
-          margin-bottom: -19px;
-        }
-      }
-    }
-  }
-
   .procedure-logos {
     display: flex;
-    justify-content: space-around;
     align-items: center;
     margin-bottom: 20px;
 
@@ -116,16 +67,8 @@ $procedure-description-line-height: 22px;
       max-width: 100%;
       max-height: 50px;
 
-      // Fix Chrome flexbox issue
-      // See https://github.com/philipwalton/flexbugs/issues/225
-      width: 100%;
-      height: 100%;
-      min-width: 0;
-      object-fit: contain;
-
       @media (min-width: $procedure-context-breakpoint) {
-        max-width: 500px;
+        max-height: 90px;
-        max-height: 130px;
       }
     }
   }

app/controllers/administrateurs/procedures_controller.rb

@@ -457,6 +457,7 @@ module Administrateurs
       editable_params = [
         :libelle,
         :description,
+        :description_target_audience,
         :organisation,
         :direction,
         :lien_site_web,

app/controllers/users/dossiers_controller.rb

@@ -92,10 +92,12 @@ module Users
     def identite
       @dossier = dossier
       @user = current_user
+      @no_description = true
     end
 
     def update_identite
       @dossier = dossier
+      @no_description = true
 
       if @dossier.individual.update(individual_params)
         @dossier.update!(autorisation_donnees: true, identity_updated_at: Time.zone.now)
@@ -110,10 +112,12 @@ module Users
 
     def siret
       @dossier = dossier
+      @no_description = true
     end
 
     def update_siret
       @dossier = dossier
+      @no_description = true
 
       # We use the user as the holder model object for the siret value
       # (so that we can restore it on the form in case of error).

app/controllers/users/registrations_controller.rb

@@ -5,7 +5,7 @@ class Users::RegistrationsController < Devise::RegistrationsController
   # before_action :configure_account_update_params, only: [:update]
   before_action :restore_procedure_context, only: [:new, :create]
 
-  layout 'procedure_context', only: [:new, :create]
+  layout 'login', only: [:new, :create]
 
   # GET /resource/sign_up
   def new

app/controllers/users/sessions_controller.rb

@@ -3,7 +3,7 @@ class Users::SessionsController < Devise::SessionsController
   include TrustedDeviceConcern
   include ActionView::Helpers::DateHelper
 
-  layout 'procedure_context', only: [:new, :create]
+  layout 'login', only: [:new, :create]
 
   before_action :restore_procedure_context, only: [:new, :create]
 

app/javascript/entrypoints/application.js

@@ -12,7 +12,6 @@ import '../shared/toggle-target';
 import { registerControllers } from '../shared/stimulus-loader';
 
 import '../new_design/form-validation';
-import '../new_design/procedure-context';
 import '../new_design/procedure-form';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';

app/javascript/new_design/procedure-context.js

@@ -1,20 +0,0 @@
-import { delegate } from '@utils';
-
-function updateReadMoreVisibility() {
-  const descBody = document.querySelector('.procedure-description-body');
-  if (descBody) {
-    // If the description text overflows, display a "Read more" button.
-    const isOverflowing = descBody.scrollHeight > descBody.clientHeight;
-    descBody.classList.toggle('read-more-enabled', isOverflowing);
-  }
-}
-
-function expandProcedureDescription() {
-  const descBody = document.querySelector('.procedure-description-body');
-  descBody.classList.remove('read-more-collapsed');
-}
-
-addEventListener('DOMContentLoaded', updateReadMoreVisibility);
-addEventListener('resize', updateReadMoreVisibility);
-
-delegate('click', '.read-more-button', expandProcedureDescription);

app/javascript/new_design/procedure-form.js

@@ -10,8 +10,17 @@ function syncInputToElement(fromSelector, toSelector) {
 
 function syncFormToPreview() {
   syncInputToElement('#procedure_libelle', '.procedure-title');
-  syncInputToElement('#procedure_description', '.procedure-description-body');
+  syncInputToElement('#procedure_description', '.js_description p');
+  syncInputToElement(
+    '#procedure_description_target_audience',
+    '.js_description_target_audience p'
+  );
 }
 
 delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview);
 delegate('input', '.procedure-form #procedure_description', syncFormToPreview);
+delegate(
+  'input',
+  '.procedure-form #procedure_description_target_audience',
+  syncFormToPreview
+);

app/models/procedure.rb

@@ -16,6 +16,7 @@
 #  closed_at                                 :datetime
 #  declarative_with_state                    :string
 #  description                               :string
+#  description_target_audience               :string
 #  dossiers_count_computed_at                :datetime
 #  duree_conservation_dossiers_dans_ds       :integer
 #  duree_conservation_etendue_par_ds         :boolean          default(FALSE), not null

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

@@ -3,21 +3,17 @@
     .card-title Cette démarche est publiée.
     Certains éléments de la description ne sont plus modifiables.
 
-= f.label :libelle do
+= render Dsfr::InputComponent.new(form: f, attribute: :libelle, input_type: :text_field, opts: {})
-  Titre de la démarche
-  %span.mandatory *
-= f.text_field :libelle, class: 'form-control', placeholder: 'Titre', required: true
 
-= f.label :description do
+= render Dsfr::InputComponent.new(form: f, attribute: :description, input_type: :text_area, opts: {})
-  Description
+
-  %span.mandatory *
+= render Dsfr::InputComponent.new(form: f, attribute: :description_target_audience, input_type: :text_area, opts: {}, required: false)
-= f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control', required: true
 
 %h3.header-subsection Logo de la démarche
 = render Attachment::EditComponent.new(attached_file: @procedure.logo, view_as: :link)
 
 %h3.header-subsection Conservation des données
-= f.label :duree_conservation_dossiers_dans_ds do
+= f.label :duree_conservation_dossiers_dans_ds, class: 'fr-label' do
   Sur #{APPLICATION_NAME}
   %span.mandatory *
 
@@ -25,12 +21,10 @@
   = t(:notice, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds])
   - if f.object.duree_conservation_dossiers_dans_ds.to_i < Procedure::NEW_MAX_DUREE_CONSERVATION
     = t(:new_duration_constraint, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds], new_duration_in_month: f.object.max_duree_conservation_dossiers_dans_ds)
-= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'form-control', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
+= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
 
 - if @procedure.created_at.present?
-  = f.label :lien_site_web do
+  = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
-    Où les usagers trouveront-ils le lien vers la démarche ?
-  = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
 
 %h3.header-subsection
   Cadre juridique
@@ -48,10 +42,9 @@
 %p.notice
   Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
 
-= f.label :cadre_juridique, 'Lien vers le texte'
+= render Dsfr::InputComponent.new(form: f, attribute: :cadre_juridique, input_type: :text_field, opts: {})
-= f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
 
-= f.label :deliberation, 'Importer le texte'
+= f.label :deliberation, 'Importer le texte', class: 'fr-label'
 = render Attachment::EditComponent.new(attached_file: @procedure.deliberation, view_as: :download)
 
 %h3.header-subsection
@@ -59,8 +52,7 @@
 %p.notice
   Pour certaines démarches, veuillez indiquer soit le mail de contact de votre délégué à la protection des données, soit un lien web pointant vers les informations
 
-= f.label :lien_dpo, 'Lien ou email pour contacter le Délégué à la Protection des Données (DPO)'
+= render Dsfr::InputComponent.new(form: f, attribute: :lien_dpo, input_type: :text_field, opts: {}, required: false)
-= f.text_field :lien_dpo, class: 'form-control'
 
 - if Rails.application.config.ds_opendata_enabled
   %h3.header-subsection= t(:opendata_header, scope: [:administrateurs, :informations])
@@ -78,7 +70,7 @@
 %p.notice
   Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
 
-= f.label :notice, 'Notice'
+= f.label :notice, 'Notice', class: 'fr-label'
 %p.notice
   Formats acceptés : .doc, .odt, .pdf, .ppt, .pptx
 = render Attachment::EditComponent.new(attached_file: @procedure.notice, view_as: :download)
@@ -91,7 +83,7 @@
       Ma démarche s’adresse à un particulier
       %p.notice En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
 
-    = f.label :for_individual, value: false do
+    = f.label :for_individual, value: false, class: 'fr-label' do
       = f.radio_button :for_individual, false
       Ma démarche s’adresse à une personne morale
       %p.notice
@@ -119,14 +111,14 @@
     %h3.header-subsection Options avancées
 
   - if feature_enabled?(:administrateur_web_hook)
-    = f.label :web_hook_url do
+    = f.label :web_hook_url, class: 'fr-label' do
       Lien de rappel HTTP (webhook)
     %p.notice
       Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour informer un service tiers du changement de l'état d’un dossier de cette démarche sur #{APPLICATION_NAME}.
       = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
-    = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
+    = f.text_field :web_hook_url, class: 'fr-input', placeholder: 'https://callback.exemple.fr/'
 
-  = f.label :auto_archive_on do
+  = f.label :auto_archive_on, class: 'fr-label' do
     Date limite de dépôt des dossiers
   %p.notice
     Si une date est définie, aucun dossier ne pourra plus être déposé ou modifié après cette limite.
@@ -136,7 +128,7 @@
     = f.date_field :auto_archive_on, id: 'auto_archive_on', value: value
     #{procedure_auto_archive_time(@procedure)}.
 
-  = f.label :declarative_with_state do
+  = f.label :declarative_with_state, class: 'fr-label' do
     Démarche déclarative
   %p.notice
     Par défaut, un dossier déposé peut être complété ou corrigé par le demandeur jusqu'à sa mise en instruction.<br>

app/views/commencer/show.html.haml

@@ -2,13 +2,14 @@
 
 .commencer.form
   - if !user_signed_in?
-    %h2.huge-title= t('views.commencer.show.start_procedure')
+    = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.start_procedure"), heading_level: 'h2') do |c|
+      - c.body do
         = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token) }
-    = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--lg fr-my-2w' do
+        = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-mb-2w fr-mr-2w' do
           = t('views.shared.account.create')
           %span.optional-on-small-screens.fr-ml-1v
             #{APPLICATION_NAME}
-    = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary fr-btn--lg fr-my-2w'
+        = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
   - else
     - revision = @revision.draft? ? @revision : @procedure.revisions.where.not(id: @procedure.draft_revision_id)
@@ -17,37 +18,42 @@
     - not_drafts = dossiers.merge(Dossier.state_not_brouillon)
 
     - if @prefilled_dossier
-      %h2.huge-title= t('views.commencer.show.prefilled_draft')
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.prefilled_draft"), heading_level: 'h2') do |c|
+        - c.body do
           %p= t('views.commencer.show.prefilled_draft_detail_html', time_ago: time_ago_in_words(@prefilled_dossier.created_at), procedure: @procedure.libelle)
-      = link_to t('views.commencer.show.go_to_prefilled_file'), url_for_dossier(@prefilled_dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+          = link_to t('views.commencer.show.go_to_prefilled_file'), url_for_dossier(@prefilled_dossier), class: 'fr-btn fr-mb-2w'
 
     - elsif dossiers.empty?
-      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-my-2w'
+      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: 'fr-btn fr-mb-2w'
 
     - elsif drafts.size == 1 && not_drafts.empty?
       - dossier = drafts.first
-      %h2.huge-title= t('views.commencer.show.already_draft')
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.already_draft"), heading_level: 'h2') do |c|
+        - c.body do
           %p
             = t('views.commencer.show.already_draft_detail_html', time_ago: time_ago_in_words(dossier.created_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.continue_file'), url_for_dossier(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+          = link_to t('views.commencer.show.continue_file'), url_for_dossier(dossier), class: 'fr-btn fr-mb-2w'
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
     - elsif not_drafts.size == 1
       - dossier = not_drafts.first
-      %h2.huge-title= t('views.commencer.show.already_not_draft')
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.already_not_draft"), heading_level: 'h2') do |c|
+        - c.body do
           %p
             = t('views.commencer.show.already_not_draft_detail_html', time_ago: time_ago_in_words(dossier.depose_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.show_my_submitted_file'), url_for_dossier(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+          = link_to t('views.commencer.show.show_my_submitted_file'), url_for_dossier(dossier), class: 'fr-btn fr-mb-2w'
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
     - else
-      %h2.huge-title= t('views.commencer.show.existing_dossiers')
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.existing_dossiers"), heading_level: 'h2') do |c|
-      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-btn--lg fr-my-2w"
+        - c.body do
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
+          = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-mb-2w"
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--secondary fr-mb-2w"
+
 
   - if @procedure.feature_enabled?(:dossier_pdf_vide)
     %hr
     %p= t('views.commencer.show.want_empty_pdf', service: @procedure&.service&.nom, adresse: @procedure&.service&.adresse)
 
     %br
-    = link_to t('views.commencer.show.download_empty_pdf'), commencer_dossier_vide_for_revision_path(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
+    = link_to t('views.commencer.show.download_empty_pdf'), commencer_dossier_vide_for_revision_path(@revision), class: "fr-btn fr-btn--secondary fr-mb-2w"

app/views/layouts/login.html.haml

@@ -0,0 +1,17 @@
+- procedure = @procedure || @dossier&.procedure || nil
+
+- content_for :content do
+  .two-columns.procedure-context
+    .columns-container
+      .column.procedure-preview
+        = yield
+      .column.procedure-context-content
+        = render partial: 'layouts/commencer/no_procedure'
+
+- content_for :footer do
+  - if procedure
+    = render partial: 'users/procedure_footer', locals: { procedure: procedure, dossier: @dossier }
+  - else
+    = render partial: 'users/dossiers/index_footer'
+
+= render template: 'layouts/application'

app/views/layouts/procedure_context.html.haml

@@ -1,17 +1,11 @@
 - procedure = @procedure || @dossier&.procedure || nil
 
 - content_for :content do
-  .two-columns.procedure-context
+  .fr-container.fr-mt-5w
-    .columns-container
+    .fr-grid-row
-
+      .fr-col-12.fr-col-md-8.fr-col-offset-md-2
-      .column.procedure-preview
+        .procedure-preview.fr-mb-5w
-        - if procedure
           = render partial: 'shared/procedure_description', locals: { procedure: procedure }
-        - else
-          = render partial: 'layouts/commencer/no_procedure'
-
-      .column.procedure-context-content
-        = yield
 
 - content_for :footer do
   - if procedure

app/views/shared/_procedure_description.html.haml

@@ -5,23 +5,37 @@
   = image_tag procedure.logo_url, alt: procedure_logo_alt
   - if procedure.euro_flag
     = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
-%h1.procedure-title
+%h1.procedure-title.fr-h2
   = procedure.libelle
 
 - if procedure.persisted? && procedure.estimated_duration_visible?
-  %p.procedure-configuration.procedure-configuration--fill-duration
+  %p
-    %span.icon.clock
+    %small
+      %span.fr-icon-timer-line
       = t('shared.procedure_description.estimated_fill_duration', estimated_minutes: estimated_fill_duration_minutes(procedure))
 
+
+= yield
+
 - if procedure.auto_archive_on
-  %details.procedure-configuration.procedure-configuration--auto-archive
+  %details.procedure-configuration--auto-archive
     %summary
       %span.icon.edit
 
       %span.procedure-auto-archive-title Date limite : #{procedure_auto_archive_date(procedure)}
     %p Vous pouvez déposer vos dossiers jusqu’au #{procedure_auto_archive_datetime(procedure)}.
 
-.procedure-description
+- unless @no_description
-  .procedure-description-body.read-more-enabled.read-more-collapsed{ tabindex: "0", role: "region", "aria-label": t('views.users.dossiers.identite.description') }
+  .fr-accordions-group
+    %section.fr-accordion
+      %h2.fr-accordion__title
+        %button.fr-accordion__btn{ "aria-controls" => "accordion-114", "aria-expanded" => "true" } Quel est l’objet de cette démarche ?
+      #accordion-114.fr-collapse.js_description
         = h render SimpleFormatComponent.new(procedure.description, allow_a: true)
-  = button_tag "Afficher la description complète", class: 'button read-more-button'
+
+    - if procedure.description_target_audience.present?
+      %section.fr-accordion
+        %h2.fr-accordion__title
+          %button.fr-accordion__btn{ "aria-controls" => "accordion-115", "aria-expanded" => "false" } À qui s’adresse la démarche ?
+        #accordion-115.fr-collapse.js_description_target_audience
+          = h render SimpleFormatComponent.new(procedure.description_target_audience, allow_a: true)

app/views/users/dossiers/siret.html.haml

@@ -2,7 +2,7 @@
 
 - if !dossier_submission_is_closed?(@dossier)
   = form_for current_user, url: siret_dossier_path(@dossier), html: { class: 'form', method: 'post' } do |f|
-    %h2.huge-title Identifier votre établissement
+    %h2.fr-h4 Identifier votre établissement
 
     %p.mb-1 Merci de remplir le numéro de SIRET de votre entreprise, administration ou association pour commencer la démarche.
 

config/locales/en.yml

@@ -396,7 +396,6 @@ en:
           identity_data: Identity data
           all_required: All fields are required.
           civility: Civility
-          description: Description of the procedure
           first_name: First Name
           last_name: Last Name
           birthdate: Date de naissance

config/locales/fr.yml

@@ -397,7 +397,6 @@ fr:
           identity_data: Données d’identité
           all_required: Tous les champs sont obligatoires.
           civility: Civilité
-          description: Description de la démarche
           first_name: Prénom
           last_name: Nom
           birthdate: Date de naissance

config/locales/models/procedure/en.yml

@@ -6,8 +6,18 @@ en:
         other: Procedure
     attributes:
       procedure:
+        hints:
+          description: Describe in a few lines the context, the aim etc.
+          description_target_audience: Describe in a few lines the final recipients of the process, the eligibility criteria if there are any, the prerequisites, etc.
+          lien_site_web: "Exemple: 'https://exemple.gouv.fr/ma_demarche'"
+          cadre_juridique: "Exemple: 'https://www.legifrance.gouv.fr/'"
         path: Public link
         organisation: Service
+        description: What is the purpose of this procedure?
+        description_target_audience: Who is the procedure intended for?
+        lien_site_web: Where will users find the link to the procedure?
+        cadre_juridique: Link to the legal text
+        lien_dpo: Link or email to contact the data protection officer (DPO)
         duree_conservation_dossiers_dans_ds: Duration files will be kept
         max_duree_conservation_dossiers_dans_ds: Max duration allowed to keep files
         aasm_state:

config/locales/models/procedure/fr.yml

@@ -6,12 +6,22 @@ fr:
         other: Démarches
     attributes:
       procedure:
+        hints:
+          description: Décrivez en quelques lignes le contexte, la finalité etc.
+          description_target_audience: Décrivez en quelques lignes les destinataires finaux de la démarche, les critères d’éligibilité s’il y en a, les pré-requis, etc.
+          lien_site_web: "Exemple: 'https://exemple.gouv.fr/ma_demarche'"
+          cadre_juridique: "Exemple: 'https://www.legifrance.gouv.fr/'"
         path: Lien public
         organisation: Organisme
         duree_conservation_dossiers_dans_ds: Durée de conservation des dossiers sur demarches-simplifiees.fr (choisi par un usager)
         max_duree_conservation_dossiers_dans_ds: Durée de conservation des dossiers maximum (autorisé par un super admin de DS)
         id: Id
-        libelle: Libelle
+        libelle: Titre de la démarche
+        description: Quel est l’objet de la démarche ?
+        description_target_audience: À qui s’adresse la démarche ?
+        lien_site_web: Où les usagers trouveront-ils le lien vers la démarche ?
+        cadre_juridique: Lien vers le texte
+        lien_dpo: Lien ou email pour contacter le Délégué à la Protection des Données (DPO)
         published_at: 'Date de publication'
         aasm_state: 'Statut'
         admin_count: 'Nb administrateurs'

db/migrate/20230516132925_add_description_target_audience_to_procedure.rb

@@ -0,0 +1,5 @@
+class AddDescriptionTargetAudienceToProcedure < ActiveRecord::Migration[7.0]
+  def change
+    add_column :procedures, :description_target_audience, :string
+  end
+end

spec/support/feature_matchers.rb

@@ -1,9 +0,0 @@
-module Capybara
-  class Session
-    # Find the description of a procedure on the page
-    # Usage: expect(page).to have_procedure_description(procedure)
-    def has_procedure_description?(procedure)
-      has_content?(procedure.libelle) && has_content?(procedure.description) && has_content?(procedure.service.email)
-    end
-  end
-end

spec/system/administrateurs/procedure_spec_helper.rb

@@ -1,7 +1,8 @@
 module ProcedureSpecHelper
   def fill_in_dummy_procedure_details(fill_path: true)
     fill_in 'procedure_libelle', with: 'libelle de la procedure'
-    fill_in 'procedure_description', with: 'description de la procedure'
+    fill_in 'procedure_description', with: "description de l'objet de la procedure"
+    fill_in 'procedure_description_target_audience', with: "description d'à qui s'adresse la procedure"
     fill_in 'procedure_cadre_juridique', with: 'cadre juridique'
     fill_in 'procedure_duree_conservation_dossiers_dans_ds', with: '3'
   end

spec/system/sessions/sign_in_spec.rb

@@ -35,7 +35,6 @@ describe 'Signin in:' do
     scenario 'an existing user can sign-in and fill the procedure' do
       click_on 'J’ai déjà un compte'
       expect(page).to have_current_path new_user_session_path
-      expect(page).to have_procedure_description(procedure)
 
       sign_in_with user.email, password
 
@@ -43,7 +42,7 @@ describe 'Signin in:' do
       click_on 'Commencer la démarche'
 
       expect(page).to have_current_path identite_dossier_path(user.reload.dossiers.last)
-      expect(page).to have_procedure_description(procedure)
+      expect(page).to have_content(procedure.libelle)
       expect(page).to have_content "Données d’identité"
     end
   end

spec/system/users/dossier_creation_spec.rb

@@ -19,7 +19,6 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path identite_dossier_path(user.reload.dossiers.last)
-        expect(page).to have_procedure_description(procedure)
         expect(page).to have_title(libelle)
 
         choose 'Monsieur'
@@ -91,7 +90,7 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path siret_dossier_path(dossier)
-        expect(page).to have_procedure_description(procedure)
+        expect(page).to have_content(procedure.libelle)
 
         fill_in 'Numéro SIRET', with: siret
         click_on 'Valider'
@@ -108,7 +107,7 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path(siret_dossier_path(dossier))
-        expect(page).to have_procedure_description(procedure)
+        expect(page).to have_content(procedure.libelle)
 
         fill_in 'Numéro SIRET', with: '0000'
         click_on 'Valider'

spec/system/users/sign_up_spec.rb

@@ -70,7 +70,6 @@ describe 'Signing up:' do
 
       click_on 'Créer un compte'
       expect(page).to have_current_path new_user_registration_path
-      expect(page).to have_procedure_description(procedure)
 
       sign_up_with user_email, user_password
       expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
@@ -84,7 +83,7 @@ describe 'Signing up:' do
       click_on 'Commencer la démarche'
 
       expect(page).to have_current_path identite_dossier_path(procedure.reload.dossiers.last)
-      expect(page).to have_procedure_description(procedure)
+      expect(page).to have_content(procedure.libelle)
     end
   end
 
@@ -141,7 +140,6 @@ describe 'Signing up:' do
       click_procedure_sign_in_link_for user_email
 
       expect(page).to have_current_path new_user_session_path
-      expect(page).to have_procedure_description(procedure)
     end
   end
 end

spec/views/layouts/procedure_context.html.haml_spec.rb

@@ -51,18 +51,4 @@ describe 'layouts/procedure_context', type: :view do
       expect(subject).to have_text(dossier.procedure.service.email)
     end
   end
-
-  context 'when neither procedure or dossier are assigned' do
-    it 'renders a placeholder for the procedure' do
-      expect(subject).to have_selector('.no-procedure')
-    end
-
-    it 'renders the inner content' do
-      expect(subject).to have_text('Column content')
-    end
-
-    it 'renders a generic footer' do
-      expect(subject).to have_text('Mentions légales')
-    end
-  end
 end