remove previsualisation from procedure creation form

app/assets/stylesheets/forms.scss

@@ -3,15 +3,6 @@
 @import "placeholders";
 
 .form {
-  h1 {
-    text-align: center;
-    margin-bottom: 20px;
-
-    @media (max-width: $two-columns-breakpoint) {
-      font-size: 26px;
-    }
-  }
-
   hr {
     width: 100%;
     height: 0;
@@ -649,6 +640,13 @@ textarea::placeholder {
   color: $dark-grey;
 }
 
-.send-wrapper--with-border-top {
+.sticky-action-footer {
-  border-top: 2px solid rgba(0, 0, 145, 1);
+  border-top: 2px solid $blue-france-500;
+  position: sticky;
+  // scss-lint:disable VendorPrefix
+  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+  // scss-lint:enable VendorPrefix
+  bottom: 0;
+  padding: $default-padding 0;
+  background-color: $white;
 }

app/assets/stylesheets/procedure_form.scss

@@ -69,8 +69,6 @@
 
 .procedure-form__actions {
   display: flex;
-  margin-left: -$default-padding;
-  margin-right: -$default-padding;
   padding: $default-spacer $default-padding;
   background: $light-grey;
   border-top: 1px solid $border-grey;

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-form';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';
 import {

app/javascript/new_design/procedure-form.js

@@ -1,26 +0,0 @@
-import { delegate } from '@utils';
-
-function syncInputToElement(fromSelector, toSelector) {
-  const fromElement = document.querySelector(fromSelector);
-  const toElement = document.querySelector(toSelector);
-  if (toElement && fromElement) {
-    toElement.innerText = fromElement.value;
-  }
-}
-
-function syncFormToPreview() {
-  syncInputToElement('#procedure_libelle', '.procedure-title');
-  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/views/administrateurs/procedures/_informations.html.haml

@@ -21,7 +21,9 @@
   = 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: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
+
+.fr-input-group
+  = 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?
   = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
@@ -89,11 +91,11 @@
       %p.notice
         En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
 
-  %p.explication
+  %p
     Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire.
 
 %h3.header-subsection Ajouter des tags
-%p.explication Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
+%p Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
 = hidden_field_tag  'procedure[tags]', JSON.generate(@procedure.tags)
 = react_component("ComboMultiple",
   id: "procedure_tags_combo",

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

@@ -4,25 +4,21 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Description']] }
-.procedure-form
-  .procedure-form__columns.container
-    = render  NestedForms::FormOwnerComponent.new
-    = form_for @procedure,
-      url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form',
-              multipart: true } do |f|
 
-      %h1.page-title Description
+= render  NestedForms::FormOwnerComponent.new
+= form_for @procedure,
+  url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
+  html: { class: 'form', multipart: true } do |f|
+  .fr-container
+    .fr-grid-row
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Description
 
-      = render partial: 'administrateurs/procedures/informations', locals: { f: f }
+        = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-      .procedure-form__actions.sticky--bottom
+  .sticky-action-footer
-        .actions-right
+    .fr-container
-          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
+      .fr-grid-row
-          = f.button 'Enregistrer', class: 'fr-btn'
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
-
+          = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
-    .procedure-form__column--preview
+          = 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 ?'}
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }

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

@@ -4,25 +4,20 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     ['Nouvelle']] }
 
-.procedure-form
+= render NestedForms::FormOwnerComponent.new
-  .procedure-form__columns.container
+= form_for @procedure,
-    = render NestedForms::FormOwnerComponent.new
+  url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
-    = form_for @procedure,
+  html: { class: 'form', multipart: true } do |f|
-      url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
+  .fr-container
-      html: { class: 'form procedure-form__column--form', multipart: true } do |f|
+    .fr-grid-row
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Nouvelle démarche
 
-      %h1.page-title Nouvelle démarche
+        = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-
+  .sticky-action-footer
-      = render partial: 'administrateurs/procedures/informations', locals: { f: f }
+    .fr-container
-
+      .fr-grid-row
-      .procedure-form__actions.sticky--bottom
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
-        .actions-right
+          = 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 fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
+          = 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 ?'}
-          = f.button 'Créer la démarche', class: 'fr-btn'
-
-    .procedure-form__column--preview
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }

app/views/administrateurs/services/_form.html.haml

@@ -71,7 +71,6 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
+  .sticky-action-footer
+    = f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
     = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
-    = f.submit "Enregistrer", class: "fr-btn"
-

app/views/shared/_procedure_description.html.haml

@@ -5,7 +5,7 @@
   = 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.fr-h2
+%h1.fr-h2
   = procedure.libelle
 
 - if procedure.persisted? && procedure.estimated_duration_visible?