ETQ administrateur, je souhaite que la page "publier" soit plus claire

app/assets/stylesheets/flex.scss

@@ -63,3 +63,7 @@
 .flex-gap-2 {
   gap: 2 * $default-spacer; // scss-lint:disable PropertySpelling
 }
+
+.flex-1 {
+  flex: 1;
+}

app/assets/stylesheets/forms.scss

@@ -3,6 +3,23 @@
 @import "placeholders";
 
 .form {
+  input.unstyled {
+    padding: 0 !important;
+    background: none !important;
+    border: none !important;
+    width: auto !important;
+
+    &:focus {
+      box-shadow: none !important;
+      background-color: $white !important;
+    }
+  }
+
+  .placeholder {
+    color: $dark-grey;
+    font-style: italic;
+  }
+
   hr {
     width: 100%;
     height: 0;
@@ -312,36 +329,6 @@
     margin-bottom: $default-fields-spacer;
   }
 
-  select {
-    // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: #FFFFFF;
-    background-image: image-url("icons/chevron-down.svg");
-    background-repeat: no-repeat;
-    background-size: 14px;
-    background-position: right 10px center;
-    padding-right: 4 * $default-spacer;
-    max-width: 100%;
-
-    &.small {
-      padding-right: 3 * $default-spacer;
-    }
-
-    // CAUTION: IE hackery ahead
-    &::-ms-expand {
-      display: none; // remove default arrow in IE 10 and 11 */
-    }
-
-    // target Internet Explorer 9 to undo the custom arrow */
-    @media screen and (min-width:0\0) {
-      select {
-        background: none\9;
-      }
-    }
-  }
-
   [data-reach-combobox-input] {
     min-height: 62px;
     border-radius: 4px;

app/views/administrateurs/_breadcrumbs.html.haml

@@ -39,6 +39,9 @@
             = t('since', scope: [:layouts, :breadcrumb], number: @procedure.id, date: l(@procedure.published_at.to_date))
 
         - else
+          %p.fr-mb-1w
+            = t('more_info_on_test', scope: [:layouts, :breadcrumb])
+            = link_to t('go_to_FAQ', scope: [:layouts, :breadcrumb]), t("url_FAQ", scope: [:layouts, :breadcrumb]), title: new_tab_suffix(t('go_to_FAQ', scope: [:layouts, :breadcrumb])), **external_link_attributes
           .flex
             %span.fr-badge.fr-badge--new.fr-mr-1w
               = t('draft', scope: [:layouts, :breadcrumb])

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

@@ -132,7 +132,7 @@
   %p.notice
     Le
     - value = @procedure.auto_archive_on ? @procedure.auto_archive_on - 1.day : nil
-    = f.date_field :auto_archive_on, id: 'auto_archive_on', value: value
+    = f.date_field :auto_archive_on, id: 'auto_archive_on', class: 'fr-input', value: value
     #{procedure_auto_archive_time(@procedure)}.
 
   = render Dsfr::CalloutComponent.new(title: "Démarche déclarative") do |c|
@@ -143,7 +143,7 @@
         Soit il passe immédiatement « en instruction » pour être traité soit il est immédiatement « accepté ».
 
   = f.label :declarative_with_state, 'Mentionnez l’état d’avancement (facultatif)', class: 'fr-label fr-mb-2w'
-  = f.select :declarative_with_state, Procedure.declarative_attributes_for_select, { include_blank: 'Non' }, class: 'form-control'
+  = f.select :declarative_with_state, Procedure.declarative_attributes_for_select, { include_blank: 'Non' }, class: 'fr-select'
 
   - if !@procedure.piece_justificative_multiple?
     .fr-checkbox-group

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

@@ -1,15 +1,39 @@
-.card.mb-4
-  %h2.card-title Publiez votre démarche
-  = form_tag admin_procedure_publish_path(procedure_id: procedure.id), method: :put, class: 'form' do
-    = render Procedure::PublicationWarningComponent.new(procedure: procedure)
-    .mt-2
-      - if procedure.draft_changed?
-        %p.mb-2 Publiez une nouvelle version de votre démarche. Les modifications suivantes seront appliquées :
-        = render Procedure::RevisionChangesComponent.new changes: procedure.revision_changes, previous_revision: procedure.published_revision
-        - if procedure.close?
-          = render partial: 'publication_form_inputs', locals: { procedure: procedure, closed_procedures: @closed_procedures }
-      - else
-        = render partial: 'publication_form_inputs', locals: { procedure: procedure, closed_procedures: @closed_procedures }
-
-    .flex.justify-end
-      = submit_tag procedure_publish_label(procedure, :submit), { disabled: procedure.errors.present?, class: "fr-btn fr-btn--primary", id: 'publish' }
+= form_for procedure,
+  url: admin_procedure_publish_path(procedure_id: procedure.id),
+  method: :put,
+  html: { class: 'form' } do |f|
+  = render Procedure::PublicationWarningComponent.new(procedure: procedure)
+  .mt-2
+    - if procedure.draft_changed?
+      %p.mb-2= t('.draft_changed_procedure_alert')
+      = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+        - c.body do
+          = render Procedure::RevisionChangesComponent.new changes: procedure.revision_changes, previous_revision: procedure.published_revision
+      - if procedure.close?
+        = render partial: 'publication_form_inputs', locals: { procedure: procedure, closed_procedures: @closed_procedures, form: f }
+    - elsif @procedure.brouillon? && @procedure.missing_steps.empty?
+      = render partial: 'publication_form_inputs', locals: { procedure: procedure, closed_procedures: @closed_procedures, form: f }
+      = render Dsfr::CalloutComponent.new(title: t('.dpd_title'), heading_level: 'h2') do |c|
+        - c.with_body do
+          %p.fr-mb-2w
+            = t('.dpd_part_1')
+            %a{ href:'https://www.cnil.fr/fr/protection-des-donnees-les-bons-reflexes', target:'_blank' }
+              https://www.cnil.fr/fr/protection-des-donnees-les-bons-reflexes
+
+          %p.fr-mb-2w
+            = t('.dpd_part_2')
+
+          %p.fr-mb-2w
+            = t('.dpd_part_3')
+            %a{ href:'https://www.cnil.fr/fr/RGDP-le-registre-des-activites-de-traitement', target:'_blank' }
+              https://www.cnil.fr/fr/RGDP-le-registre-des-activites-de-traitement
+
+          %p.fr-mb-2w
+            = t('.dpd_part_4')
+
+    - else
+      = render partial: 'publication_form_inputs', locals: { procedure: procedure, closed_procedures: @closed_procedures, form: f }
+
+  %ul.fr-btns-group.fr-btns-group--inline-md.fr-btns-group--icon-left
+    = f.submit t('.submit'), { disabled: procedure.errors.present?, class: "fr-btn fr-btn--primary", id: 'publish' }
+    = link_to t('.back_to_procedure'), admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-arrow-go-back-line fr-ml-1w'

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

@@ -1,27 +1,44 @@
-%p.mb-4{ :class => ("mt-4" if procedure.close? && procedure.draft_changed?) } Publiez votre démarche, et partagez la à vos usagers.
-%p Personnalisez le lien public de la démarche pour en faciliter l’accès (<strong>obligatoire pour publier votre démarche</strong>) :
-%p.empty-text
-  = commencer_url(path: '')
-  = text_field_tag(:path, procedure.path,
-                  id: 'procedure_path',
-                  label: 'Adresse de diffusion',
-                  placeholder: 'chemin-de-la-démarche',
-                  required: true,
-                  class: 'form',
-                  pattern: '^[a-z0-9_-]{3,200}$',
-                  title: "De 3 à 200 caractères; minuscules, chiffres et tiret seulement",
-                  autocomplete: 'off',
-                  style: 'width: 300px; display: inline;')
-  .text-info.mb-4
-    Attention, diffusez toujours le <strong>lien complet</strong> affiché ci-dessus, et non pas un lien générique vers #{APPLICATION_NAME}. Ne dites pas non plus aux usagers de se rendre sur le site générique #{APPLICATION_NAME}, donnez-leur toujours le lien complet.
-  - if closed_procedures.present?
-    %h2.card-title Cette démarche remplace une close ? Si oui, veuillez indiquer le n° de la démarche remplacée
-    = select_tag :old_procedure, options_for_select(@closed_procedures), include_blank: true
-  %h2.card-title Diffusion de la démarche
-  %p Où les utilisateurs trouveront-ils le lien de la démarche ? Typiquement, il s’agit d’une page de votre site web.
-  %p.center
-    = text_field_tag(:lien_site_web, procedure.lien_site_web,
+.fr-input-group
+  = label_tag :procedure_path, class: 'fr-label' do
+    = t('activerecord.attributes.procedure.procedure_path')
+
+    %span.fr-hint-text
+      = t('activerecord.attributes.procedure.hints.procedure_path')
+
+  .fr-input
+    .flex
+      %span.placeholder
+        = commencer_url(path: '')
+      = text_field_tag(:path, procedure.path,
+                      id: 'procedure_path',
+                      placeholder: t('activerecord.attributes.procedure.procedure_path_placeholder'),
+                      required: true,
+                      class: 'unstyled flex-1',
+                      pattern: '^[a-z0-9_-]{3,200}$',
+                      autocomplete: 'off')
+
+= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-4w') do |c|
+  - c.body do
+    = t('activerecord.attributes.procedure.procedure_path_alert', link: APPLICATION_NAME)
+
+.fr-input-group
+  = label_tag :lien_site_web, class: 'fr-label' do
+    = t('activerecord.attributes.procedure.lien_site_web')
+
+    %span.fr-hint-text
+      = t('activerecord.attributes.procedure.hints.lien_site_web')
+
+  = text_field_tag(:lien_site_web, procedure.lien_site_web,
                     required: true,
-                    class: 'form-control',
-                    autocomplete: 'off',
-                    placeholder: 'https://exemple.gouv.fr/ma_demarche')
+                    class: 'fr-input',
+                    autocomplete: 'off')
+
+- if closed_procedures.present?
+  .fr-select-group
+    = form.label :old_procedure, class: 'fr-label' do
+      = t('activerecord.attributes.procedure.old_procedure')
+      = t('utils.no_mandatory')
+
+      %span.fr-hint-text
+        = t('activerecord.attributes.procedure.hints.old_procedure')
+    = select_tag :old_procedure, options_for_select(@closed_procedures), include_blank: true, class: 'fr-select'

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

@@ -11,14 +11,14 @@
   html: { class: 'form procedure_tags_combo', multipart: true } do |f|
   .fr-container
     .fr-grid-row
-      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+      .fr-col-12.fr-col-offset-md-2.fr-col-md-8
         %h1.fr-h2 Description
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
   .sticky-action-footer
     .fr-container
       .fr-grid-row
-        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        .fr-col-12.fr-col-offset-md-2.fr-col-md-8
           = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
           = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}

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

@@ -10,14 +10,14 @@
   html: { class: 'form procedure_tags_combo', multipart: true } do |f|
   .fr-container
     .fr-grid-row
-      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+      .fr-col-12.fr-col-offset-md-2.fr-col-md-8
         %h1.fr-h2 Nouvelle démarche
 
         = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
   .sticky-action-footer
     .fr-container
       .fr-grid-row
-        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        .fr-col-12.fr-col-offset-md-2.fr-col-md-8
           = f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w'
           = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}