amelioration(users/dossiers#demande): passage a la nouvelle ui/ux

wip

app/assets/stylesheets/02_utils.scss

@@ -133,6 +133,7 @@
   }
 }
 
+
 // who known
 .highlighted {
   background: $orange-bg;

app/assets/stylesheets/demande.scss

@@ -1,27 +1,25 @@
 @import "colors";
 @import "constants";
 
-.demande {
+.container {
-  padding-top: 3 * $default-padding;
+  @media (max-width: 48em) {
-  padding-bottom: 3 * $default-padding;
+    .d-block-sm {
-
+      display: block;
-  h1 {
+    }
-    margin-bottom: $default-padding;
+  }
 }
 
-  .intro {
+.champ-content {
-    margin: $default-padding 0;
+  padding: 0 0 ,5rem;
+
+  p {
+    padding: 0;
+    margin: 0;
+  }
 }
 
-  b {
+.top-bordered {
-    font-weight: bold;
+  border-top: 1px solid var(--border-default-grey);
 }
 
-  hr {
+
-    border: none;
-    height: 1px;
-    background-color: $grey;
-    margin-top: 2 * $default-padding;
-    margin-bottom: 2 * $default-padding;
-  }
-}

app/assets/stylesheets/dossier_champs.scss

@@ -11,14 +11,22 @@
     width: 325px;
   }
 
-  td.libelle,
-  td.updated-at {
-    width: 50%;
-  }
-
   td.updated-at {
     font-size: 13px;
     color: $dark-grey;
-    text-align: left;
+    text-align: right;
+    width: 190px;
+
+    > span {
+      opacity: 0;
+
+      &.highlighted {
+        opacity: 1;
+      }
+    }
+  }
+
+  tr:hover .updated-at > span {
+    opacity: 1;
   }
 }

app/assets/stylesheets/sections.scss

@@ -29,32 +29,32 @@
     counter-reset: h7;
   }
 
-  .header-section.fr-h2::before {
+  .header-section.section-2::before {
     counter-increment: h2;
     content: counter(h2) ". ";
   }
 
-  .header-section.fr-h3::before {
+  .header-section.section-3::before {
     counter-increment: h3;
     content: counter(h2) "." counter(h3) ". ";
   }
 
-  .header-section.fr-h4::before {
+  .header-section.section-4::before {
     counter-increment: h4;
     content: counter(h2) "." counter(h3) "." counter(h4) ". ";
   }
 
-  .header-section.fr-h5::before {
+  .header-section.section-5::before {
     counter-increment: h5;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
   }
 
-  .header-section.fr-h6::before {
+  .header-section.section-6::before {
     counter-increment: h6;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
   }
 
-  .header-section.fr-h7::before {
+  .header-section.section-7::before {
     counter-increment: h7;
     content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". ";
   }

app/components/dossiers/champ_row_show_component.rb

@@ -0,0 +1,21 @@
+class Dossiers::ChampRowShowComponent < ApplicationComponent
+  include ChampHelper
+  include DossierHelper
+  include ApplicationHelper
+  def initialize(champs:, demande_seen_at:, profile:, repetition:)
+    @repetition = repetition
+    @champs = champs
+    @demande_seen_at = demande_seen_at
+    @profile = profile
+  end
+
+  def updated_after_deposer?(champ)
+    return false if champ.dossier.depose_at.blank?
+    champ.updated_at > champ.dossier.depose_at
+  end
+
+  def number_with_html_delimiter(num)
+    # we are using the span delimiter that doesn't insert spaces when copying and pasting the number
+    number_with_delimiter(num, delimiter: tag.span(class: 'numbers-delimiter'))
+  end
+end

app/components/dossiers/champ_row_show_component/champ_row_show_component.en.yml

@@ -0,0 +1,3 @@
+---
+en:
+  blank: "blank (optional)"

app/components/dossiers/champ_row_show_component/champ_row_show_component.fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  blank: "non saisi (facultatif)"

app/components/dossiers/champ_row_show_component/champ_row_show_component.html.haml

@@ -0,0 +1,64 @@
+- @champs.each do |champ|
+  .fr-px-4v.fr-my-2v
+    - if champ.repetition?
+      = champ.libelle
+      - champ.rows.each do |row|
+        = render Dossiers::ChampRowShowComponent.new(champs: row, demande_seen_at: @demande_seen_at, profile: @profile, repetition: true)
+
+    - else
+      .flex.d-block-sm
+        %p.flex-grow.fr-text-action-high--grey.fr-mb-0= "#{champ.libelle} :"
+        %p.champ-updated-at.fr-mb-0.fr-text--sm
+          - if updated_after_deposer?(champ)
+            %span{ class: highlight_if_unseen_class(@demande_seen_at, champ.updated_at) }
+              modifié le
+              = try_format_datetime(champ.updated_at)
+
+      - if champ.blank?
+        .champ-content.fr-text-mention--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          %p= t('.blank')
+      - else
+        .champ-content.fr-text-action-high--grey{ class: [highlight_if_unseen_class(@demande_seen_at, champ.updated_at), champ.type_champ] }
+          - case champ.type_champ
+          - when TypeDeChamp.type_champs.fetch(:carte)
+            = render partial: "shared/champs/carte/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:dossier_link)
+            = render partial: "shared/champs/dossier_link/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:multiple_drop_down_list)
+            = render partial: "shared/champs/multiple_drop_down_list/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:piece_justificative), TypeDeChamp.type_champs.fetch(:titre_identite)
+            = render partial: "shared/champs/piece_justificative/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:siret)
+            = render partial: "shared/champs/siret/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:iban)
+            = render partial: "shared/champs/iban/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:textarea)
+            = render partial: "shared/champs/textarea/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:annuaire_education)
+            = render partial: "shared/champs/annuaire_education/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:cnaf)
+            = render partial: "shared/champs/cnaf/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:dgfip)
+            = render partial: "shared/champs/dgfip/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:pole_emploi)
+            = render partial: "shared/champs/pole_emploi/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:mesri)
+            = render partial: "shared/champs/mesri/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:address)
+            = render partial: "shared/champs/address/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:communes)
+            = render partial: "shared/champs/communes/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:regions)
+            = render partial: "shared/champs/regions/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:rna)
+            = render partial: "shared/champs/rna/show", locals: { champ: champ, profile: @profile }
+          - when TypeDeChamp.type_champs.fetch(:epci)
+            = render partial: "shared/champs/epci/show", locals: { champ: champ }
+          - when TypeDeChamp.type_champs.fetch(:date)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:datetime)
+            %p= champ.to_s
+          - when TypeDeChamp.type_champs.fetch(:number)
+            %p= number_with_html_delimiter(champ.to_s)
+          - else
+            %p= format_text_value(champ.to_s.strip) unless champ.blank?

app/components/editable_champ/header_section_component.rb

@@ -1,21 +1,28 @@
 class EditableChamp::HeaderSectionComponent < ApplicationComponent
-  def initialize(form: nil, champ:, seen_at: nil)
+  def initialize(form: nil, champ:, seen_at: nil, html_class: {})
     @champ = champ
+    @html_class = html_class
   end
 
   def level
     @champ.level + 1 # skip one heading level
   end
 
+  def collapsible?
+    @champ.level == 1
+  end
+
   def libelle
     @champ.libelle
   end
 
   def header_section_classnames
     class_names(
-      "fr-h#{level}": true,
+      {
+        "section-#{level}": true,
         'header-section': @champ.dossier.auto_numbering_section_headers_for?(@champ),
         'hidden': !@champ.visible?
+      }.merge(@html_class)
     )
   end
 

app/components/viewable_champ/section_component.rb

@@ -0,0 +1,45 @@
+class ViewableChamp::SectionComponent < ApplicationComponent
+  include ApplicationHelper
+  include TreeableConcern
+
+  def initialize(champs: nil, nodes: nil, demande_seen_at:, profile:)
+    @demande_seen_at, @profile, @repetition = demande_seen_at, profile
+    if nodes.nil?
+      nodes = to_tree(champs:)
+    end
+    @nodes = to_sections(nodes:)
+  end
+
+  def section_id
+    @section_id ||= header_section ? dom_id(header_section, :content) : SecureRandom.uuid
+  end
+
+  def header_section
+    return @nodes.first if @nodes.first.is_a?(Champs::HeaderSectionChamp)
+  end
+
+  def champs
+    tail.filter { _1.is_a?(Champ) && _1.visible? && !_1.exclude_from_view? }
+  end
+
+  def sections
+    tail.filter { !_1.is_a?(Champ) }
+  end
+
+  def tail
+    return @nodes if header_section.blank?
+    _, *rest_of_champ = @nodes
+
+    rest_of_champ
+  end
+
+  def tag_for_depth
+    "h#{header_section.level + 1}" if header_section
+  end
+
+  private
+
+  def to_sections(nodes:)
+    nodes.map { _1.is_a?(Array) ? ViewableChamp::SectionComponent.new(nodes: _1, demande_seen_at: @demande_seen_at, profile: @profile) : _1 }
+  end
+end

app/components/viewable_champ/section_component/section_component.en.yml

@@ -0,0 +1,3 @@
+---
+en:
+  toggle_section: "Show/hide fields of « %{section} »"

app/components/viewable_champ/section_component/section_component.fr.yml

@@ -0,0 +1,3 @@
+---
+fr:
+  toggle_section: "Afficher/Cacher les champs de la section « %{section} »"

app/components/viewable_champ/section_component/section_component.html.haml

@@ -0,0 +1,14 @@
+= tag.div(class: "reset-#{tag_for_depth} fr-mt-4v", 'data-controller': 'expand') do
+  - if header_section
+    %div{ class: class_names(flex: true, "top-bordered" => header_section.level == 1) }
+      = render EditableChamp::HeaderSectionComponent.new(champ:  header_section, html_class: {' fr-m-0 fr-text--md fr-px-4v flex-grow' => true, "fr-text-action-high--blue-france" => header_section.level == 1, 'fr-py-3v' => header_section.level == 1, 'fr-pt-3v' => header_section.level == 1})
+      - if ![champs, sections].map(&:empty?).all? && header_section.level == 1
+        %button{ type: "button", aria: { controls: section_id, "expanded": "true", label: t('.toggle_section', section: header_section.libelle) }, href: section_id, 'data-action': 'click->expand#toggle', class: "fr-btn fr-btn--tertiary-no-outline" }
+          %i.fr-icon-arrow-up-s-line{ 'aria-hidden': 'true', 'data-expand-target': 'icon' }
+
+  %div{ id: section_id, 'data-expand-target': 'content' }
+    - if !champs.empty?
+      = render Dossiers::ChampRowShowComponent.new(champs: champs, demande_seen_at: @demande_seen_at, profile: @profile, repetition: false)
+
+    - sections.each do |section|
+      = render section

app/javascript/controllers/expand_controller.ts

@@ -8,8 +8,15 @@ export class ExpandController extends ApplicationController {
   declare readonly iconTarget: HTMLElement;
 
   toggle(event: Event) {
+    const target = event.currentTarget as HTMLButtonElement;
+
     event.preventDefault();
     toggle(this.contentTarget);
     toggleExpandIcon(this.iconTarget);
+    if (this.contentTarget.classList.contains('hidden')) {
+      target.setAttribute('aria-expanded', 'false');
+    } else {
+      target.setAttribute('aria-expanded', 'true');
+    }
   }
 }

app/javascript/shared/utils.test.ts

@@ -37,14 +37,14 @@ suite('@utils', () => {
 
   test('toggleExpandIcon', () => {
     const icon = document.createElement('icon');
-    icon.classList.add('fr-icon-add-line');
+    icon.classList.add('fr-icon-arrow-down-s-line');
 
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-add-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeFalsy();
     toggleExpandIcon(icon);
-    expect(icon.classList.contains('fr-icon-add-line')).toBeTruthy();
+    expect(icon.classList.contains('fr-icon-arrow-down-s-line')).toBeTruthy();
-    expect(icon.classList.contains('fr-icon-subtract-line')).toBeFalsy();
+    expect(icon.classList.contains('fr-icon-arrow-up-s-line')).toBeFalsy();
   });
 
   test('isSelectElement', () => {

app/javascript/shared/utils.ts

@@ -88,8 +88,8 @@ export function toggle(el: Element | null, force?: boolean) {
 }
 
 export function toggleExpandIcon(icon: Element | null) {
-  icon?.classList.toggle('fr-icon-add-line');
+  icon?.classList.toggle('fr-icon-arrow-down-s-line');
-  icon?.classList?.toggle('fr-icon-subtract-line');
+  icon?.classList?.toggle('fr-icon-arrow-up-s-line');
 }
 
 export function enable(

app/views/shared/champs/address/_show.html.haml

@@ -1,4 +1,6 @@
-= format_text_value(champ.to_s)
+- if champ.to_s.present?
+  %p= format_text_value(champ.to_s)
 - if champ.data.present?
+  %p
     Code INSEE :
     = champ.data['city_code']

app/views/shared/champs/communes/_show.html.haml

@@ -1,9 +1,9 @@
-= champ.to_s
+%p= champ.to_s
 - if champ.code?
-  %p.text-sm
+  %p.fr-text--sm
     Code INSEE :
     = champ.code
 - if champ.departement?
-      %br
+  %p.fr-text--sm
     Departement :
     = champ.departement_code_and_name

app/views/shared/champs/dossier_link/_show.html.haml

@@ -2,10 +2,10 @@
 - if dossier
   - path = dossier_linked_path(current_instructeur || current_user, dossier)
   - if path.present?
-    = link_to("Dossier nº #{dossier.id}", path, target: '_blank', rel: 'noopener')
+    %p= link_to("Dossier nº #{dossier.id}", path, target: '_blank', rel: 'noopener')
   - else
-    Dossier nº #{dossier.id}
+    %p Dossier nº #{dossier.id}
   %br
-  = sanitize(dossier.text_summary)
+  %p= sanitize(dossier.text_summary)
 - else
-  Pas de dossier associé
+  %p Pas de dossier associé

app/views/shared/dossiers/_champ_row.html.haml

@@ -1,72 +0,0 @@
-- champs.reject(&:exclude_from_view?).filter(&:visible?).each do |c|
-  - if c.type_champ == TypeDeChamp.type_champs.fetch(:repetition)
-    %tr
-      %td.libelle.repetition{ colspan: 3 }
-        = "#{c.libelle} :"
-    - c.rows.each do |champs|
-      = render partial: "shared/dossiers/champ_row", locals: { champs: champs, demande_seen_at: demande_seen_at, profile: profile, repetition: true }
-      %tr
-        %td.libelle{ colspan: 4 }
-  - else
-    %tr
-      - if c.type_champ == TypeDeChamp.type_champs.fetch(:header_section)
-        %th.header-section{ colspan: 3, class: c.dossier.auto_numbering_section_headers_for?(c) ? "header-section-counter" : nil }= c.libelle
-      - else
-        %td.libelle{ class: repetition ? 'padded' : '' }
-          = "#{c.libelle} :"
-      - if c.type_champ != TypeDeChamp.type_champs.fetch(:header_section)
-        %td.updated-at
-          %span{ class: highlight_if_unseen_class(demande_seen_at, c.updated_at) }
-            modifié le
-            = try_format_datetime(c.updated_at)
-
-        %tr
-          %td.rich-text{ class: c.type_champ }
-            %div{ class: highlight_if_unseen_class(demande_seen_at, c.updated_at) }
-            - case c.type_champ
-            - when TypeDeChamp.type_champs.fetch(:carte)
-              = render partial: "shared/champs/carte/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:dossier_link)
-              = render partial: "shared/champs/dossier_link/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:multiple_drop_down_list)
-              = render partial: "shared/champs/multiple_drop_down_list/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:piece_justificative)
-              = render partial: "shared/champs/piece_justificative/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:titre_identite)
-              = render partial: "shared/champs/piece_justificative/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:siret)
-              = render partial: "shared/champs/siret/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:iban)
-              = render partial: "shared/champs/iban/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:textarea)
-              = render partial: "shared/champs/textarea/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:annuaire_education)
-              = render partial: "shared/champs/annuaire_education/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:cnaf)
-              = render partial: "shared/champs/cnaf/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:dgfip)
-              = render partial: "shared/champs/dgfip/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:pole_emploi)
-              = render partial: "shared/champs/pole_emploi/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:mesri)
-              = render partial: "shared/champs/mesri/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:address)
-              = render partial: "shared/champs/address/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:communes)
-              = render partial: "shared/champs/communes/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:regions)
-              = render partial: "shared/champs/regions/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:rna)
-              = render partial: "shared/champs/rna/show", locals: { champ: c, profile: profile }
-            - when TypeDeChamp.type_champs.fetch(:epci)
-              = render partial: "shared/champs/epci/show", locals: { champ: c }
-            - when TypeDeChamp.type_champs.fetch(:date)
-              = c.to_s
-            - when TypeDeChamp.type_champs.fetch(:datetime)
-              = c.to_s
-            - when TypeDeChamp.type_champs.fetch(:number)
-              = number_with_html_delimiter(c.to_s)
-            - else
-              = format_text_value(c.to_s) unless c.blank?
-
-

app/views/shared/dossiers/_champs.html.haml

@@ -1,10 +1,16 @@
-%table.table.vertical.dossier-champs.counter-start-header-section{ role: :presentation }
-  %tbody
 - if dossier.show_groupe_instructeur_details?
-      %td.libelle= dossier.procedure.routing_criteria_name
+  .fr-my-4v.fr-px-4v
-      %td{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }= dossier.groupe_instructeur.label
+    .flex
-      %td.updated-at
+
+      %p.flex-grow.fr-text-action-high--grey.fr-mb-0= dossier.procedure.routing_criteria_name
+      %p.champ-updated-at.fr-mb-0.fr-text--sm
+        - if demande_seen_at&.<(dossier.groupe_instructeur_updated_at)
           %span{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
             modifié le
             = try_format_datetime(dossier.updated_at)
-    = render partial: "shared/dossiers/champ_row", locals: { champs: champs, demande_seen_at: demande_seen_at, profile: profile, repetition: false }
+
+    .champ-content.fr-text-action-high--grey{ class: highlight_if_unseen_class(demande_seen_at, dossier.groupe_instructeur_updated_at) }
+      %p= dossier.groupe_instructeur.label
+
+
+= render ViewableChamp::SectionComponent.new(champs: champs, demande_seen_at: demande_seen_at, profile: profile)

app/views/shared/dossiers/_demande.html.haml

@@ -2,38 +2,40 @@
   - content_for(:notice_info) do
     = render partial: "shared/dossiers/france_connect_informations_notice", locals: { user_information: dossier.france_connect_information }
 
-.container
+.container.counter-start-header-section
+  %h2.fr-h6.fr-background-alt--grey.fr-mb-0
+    .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.en_construction')
+
   - if dossier.depose_at.present?
-    .card
     = render partial: "shared/dossiers/infos_generales", locals: { dossier: dossier }
 
   .tab-title
-    %h2.fr-h6= t('views.shared.dossiers.demande.requester_identity')
+    %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
+      .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.requester_identity')
+      - if dossier.etablissement.present? && profile == 'usager' && !dossier.read_only?
+        = link_to t('views.shared.dossiers.demande.edit_siret'), siret_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
+
+      - if dossier.individual.present? && profile == 'usager' && !dossier.read_only?
+        = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-py-3v fr-btn fr-btn--tertiary-no-outline'
+
 
     - if dossier.identity_updated_at.present? && demande_seen_at&.<(dossier.identity_updated_at)
       %span.highlighted
         modifié le
         = try_format_datetime(dossier.identity_updated_at)
 
-  .card
+  .fr-my-4v.fr-px-4v
     = render partial: "shared/dossiers/user_infos", locals: { user_deleted: dossier.user_deleted?, email: dossier.user_email_for(:display) }
 
     - if dossier.etablissement.present?
       = render partial: "shared/dossiers/identite_entreprise", locals: { etablissement: dossier.etablissement, profile: profile }
 
-      - if profile == 'usager' && !dossier.read_only?
-        .flex.row-reverse
-          = link_to t('views.shared.dossiers.demande.edit_siret'), siret_dossier_path(dossier), class: 'button'
-
     - if dossier.individual.present?
       = render partial: "shared/dossiers/identite_individual", locals: { individual: dossier.individual }
 
-      - if profile == 'usager' && !dossier.read_only?
+  %h2.fr-h6.fr-background-alt--grey.fr-mb-0.flex
-        .flex.row-reverse
+    .flex-grow.fr-py-3v.fr-px-4v= t('views.shared.dossiers.demande.form')
-          = link_to t('views.shared.dossiers.demande.edit_identity'), identite_dossier_path(dossier), class: 'fr-btn fr-btn--tertiary'
 
-  %h2.fr-h6= t('views.shared.dossiers.demande.form')
   - champs = dossier.champs_public
   - if champs.any? || dossier.procedure.routing_enabled?
-    .card
     = render partial: "shared/dossiers/champs", locals: { champs: champs, dossier: dossier, demande_seen_at: demande_seen_at, profile: profile }

app/views/shared/dossiers/_identite_entreprise.html.haml

@@ -1,89 +1,96 @@
 - if etablissement.as_degraded_mode?
-  %table.table.vertical.dossier-champs{ role: :presentation }
-    %tbody
-      %tr
-        %td{ colspan: 2 }
   .fr-alert.fr-alert--warning.fr-alert--sm
     %p
       LʼINSEE est indisponible, les informations sur lʼentreprise arriveront dʼici quelques heures.
       - if profile == "instructeur"
-                %br
+        %p
           Il nʼest pas possible dʼaccepter ou de refuser un dossier sans cette étape.
-
+  .fr-my-2v
-
+    %p.fr-text-action-high--grey.fr-mb-0 SIRET :
-
+    .champ-content.fr-text-action-high--grey
-      %tr
+      %p= etablissement.siret
-        %td.libelle SIRET :
-        %td= etablissement.siret
 - else
-  %table.table.vertical.dossier-champs{ role: :presentation }
-    %tbody
   - if etablissement.diffusable_commercialement == false && profile != 'instructeur'
-        %tr
+    .fr-my-2v
-          %td= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
+      .champ-content.fr-text-action-high--grey
+        %p= t('warning_for_private_info', scope: 'views.shared.dossiers.identite_entreprise', siret: pretty_siret(etablissement.siret))
   - else
-        %tr
+    .fr-my-2v
-          %td.libelle Dénomination :
+      %p.fr-text-action-high--grey.fr-mb-0 Dénomination :
-          %td= raison_sociale_or_name(etablissement)
+      .champ-content.fr-text-action-high--grey
-        %tr
+        %p= raison_sociale_or_name(etablissement)
-          %td.libelle SIRET :
+    .fr-my-2v
-          %td #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
+      %p.fr-text-action-high--grey.fr-mb-0 SIRET :
+      .champ-content.fr-text-action-high--grey
+        %p #{pretty_siret(etablissement.siret)} #{ render Dsfr::CopyButtonComponent.new(text: etablissement.siret, title: "Copier le siret dans le presse-papier", success: "Le siret a été copié dans le presse-papier") }
 
 
     - unless local_assigns[:short_identity]
       - if etablissement.siret != etablissement.entreprise.siret_siege_social
-            %tr
+        .fr-my-2v
-              %td.libelle SIRET du siège social:
+          %p.fr-text-action-high--grey.fr-mb-0 SIRET du siège social:
-              %td= etablissement.entreprise.siret_siege_social
+          .champ-content.fr-text-action-high--grey
-          %tr
+            %p= etablissement.entreprise.siret_siege_social
-            %td.libelle Forme juridique :
+      .fr-my-2v
-            %td= sanitize(etablissement.entreprise.forme_juridique)
+        %p.fr-text-action-high--grey.fr-mb-0 Forme juridique :
-          %tr
+        .champ-content.fr-text-action-high--grey
-            %td.libelle Libellé NAF :
+          %p= sanitize(etablissement.entreprise.forme_juridique)
-            %td= etablissement.libelle_naf
+      .fr-my-2v
-          %tr
+        %p.fr-text-action-high--grey.fr-mb-0 Libellé NAF :
-            %td.libelle Code NAF :
+        .champ-content.fr-text-action-high--grey
-            %td= etablissement.naf
+          %p= etablissement.libelle_naf
-          %tr
+      .fr-my-2v
-            %td.libelle Date de création :
+        %p.fr-text-action-high--grey.fr-mb-0 Code NAF :
-            %td
+        .champ-content.fr-text-action-high--grey
+          %p= etablissement.naf
+      .fr-my-2v
+        %p.fr-text-action-high--grey.fr-mb-0 Date de création :
+        .champ-content.fr-text-action-high--grey
+          %p
           = try_format_date(etablissement.entreprise.date_creation)
 
           - if etablissement.entreprise_etat_administratif.present?
             %span.label= humanized_entreprise_etat_administratif(etablissement)
 
       - if profile == 'instructeur'
-            %tr
+        .fr-my-2v
-              %td.libelle
+          %p.fr-text-action-high--grey.fr-mb-0
             Effectif mensuel
             = try_format_mois_effectif(etablissement)
             (URSSAF) :
-              %td= etablissement.entreprise_effectif_mensuel
+          .champ-content.fr-text-action-high--grey
-            %tr
+            %p= etablissement.entreprise_effectif_mensuel
-              %td.libelle
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0
             Effectif moyen annuel
             = etablissement.entreprise_effectif_annuel_annee
             (URSSAF) :
-              %td= etablissement.entreprise_effectif_annuel
+          .champ-content.fr-text-action-high--grey
-          %tr
+            %p= etablissement.entreprise_effectif_annuel
-            %td.libelle Effectif de l'organisation (INSEE) :
+      .fr-my-2v
-            %td
+        %p.fr-text-action-high--grey.fr-mb-0 Effectif de l'organisation (INSEE) :
+        .champ-content.fr-text-action-high--grey
+          %p
           = effectif(etablissement)
-          %tr
+      .fr-my-2v
-            %td.libelle Numéro de TVA intracommunautaire :
+        %p.fr-text-action-high--grey.fr-mb-0 Numéro de TVA intracommunautaire :
-            %td= etablissement.entreprise.numero_tva_intracommunautaire
+        .champ-content.fr-text-action-high--grey
-          %tr
+          %p= etablissement.entreprise.numero_tva_intracommunautaire
-            %td.libelle Adresse :
+      .fr-my-2v
-            %td
+        %p.fr-text-action-high--grey.fr-mb-0 Adresse :
+        .champ-content.fr-text-action-high--grey
+          %p
           - etablissement.adresse.split("\n").each do |line|
             = line
             %br
-          %tr
+      .fr-my-2v
-            %td.libelle Capital social :
+        %p.fr-text-action-high--grey.fr-mb-0 Capital social :
-            %td= pretty_currency(etablissement.entreprise.capital_social)
+        .champ-content.fr-text-action-high--grey
-          %tr
+          %p= pretty_currency(etablissement.entreprise.capital_social)
-            %td.libelle Chiffre d’affaires :
+      .fr-my-2v
-            %td
+        %p.fr-text-action-high--grey.fr-mb-0 Chiffre d’affaires :
+        .champ-content.fr-text-action-high--grey
+          %p
           - if profile == 'instructeur'
             %details
               - etablissement.exercices.each_with_index do |exercice, index|
@@ -107,13 +114,14 @@
 
           = render partial: 'shared/dossiers/identite_entreprise_bilan_detail',
             locals: { libelle: 'Besoin en fonds de roulement', key: 'besoin_en_fonds_de_roulement', etablissement: etablissement }
-              %tr
+          .fr-my-2v
-                %td.libelle
+            %p.fr-text-action-high--grey.fr-mb-0
               Chiffres financiers clés (Banque de France)
               = "en #{pretty_currency_unit(etablissement.entreprise_bilans_bdf_monnaie)} :"
 
             - if controller.is_a?(Instructeurs::AvisController)
-                  %td
+              .champ-content.fr-text-action-high--grey
+                %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_avis_path(@avis, format: 'csv')
                 ,
@@ -121,7 +129,8 @@
                 ou
                 = link_to "au format ods", bilans_bdf_instructeur_avis_path(@avis, format: 'ods')
             - else
-                  %td
+              .champ-content.fr-text-action-high--grey
+                %p
                 Les consulter
                 = link_to "au format csv", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'csv')
                 ,
@@ -129,45 +138,56 @@
                 ou
                 = link_to "au format ods", bilans_bdf_instructeur_dossier_path(procedure_id: @dossier.procedure.id, dossier_id: @dossier.id, format: 'ods')
         - else
-              %tr
+          .fr-my-2v
-                %td.libelle
+            %p.fr-text-action-high--grey.fr-mb-0
               Bilans Banque de France :
-                %td Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
+            .champ-content.fr-text-action-high--grey
+              %p Les 3 derniers bilans connus de votre entreprise par la Banque de France ont été joints à votre dossier.
       - if etablissement.entreprise_attestation_sociale.attached?
-            %tr
+        .fr-my-2v
-              %td.libelle Attestation sociale :
+          %p.fr-text-action-high--grey.fr-mb-0 Attestation sociale :
           - if profile == 'instructeur'
-                %td= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
+            .champ-content.fr-text-action-high--grey
+              %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_sociale)
           - else
-                %td Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
+            .champ-content.fr-text-action-high--grey
+              %p Une attestation de vigilance délivrée par l'ACOSS a été jointe à votre dossier.
 
       - if etablissement.entreprise_attestation_fiscale.attached?
-            %tr
+        .fr-my-2v
-              %td.libelle Attestation fiscale :
+          %p.fr-text-action-high--grey.fr-mb-0 Attestation fiscale :
           - if profile == 'instructeur'
-                %td= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
+            .champ-content.fr-text-action-high--grey
+              %p= link_to "Consulter l'attestation", url_for(etablissement.entreprise_attestation_fiscale)
           - else
-                %td Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
+            .champ-content.fr-text-action-high--grey
+              %p Une attestation fiscale délivrée par l'URSSAF a été jointe à votre dossier.
 
       - if etablissement.association?
-            %tr
+        .fr-my-2v
-              %td.libelle Numéro RNA :
+          %p.fr-text-action-high--grey.fr-mb-0 Numéro RNA :
-              %td= etablissement.association_rna
+          .champ-content.fr-text-action-high--grey
-            %tr
+            %p= etablissement.association_rna
-              %td.libelle Titre :
+        .fr-my-2v
-              %td= etablissement.association_titre
+          %p.fr-text-action-high--grey.fr-mb-0 Titre :
-            %tr
+          .champ-content.fr-text-action-high--grey
-              %td.libelle Objet :
+            %p= etablissement.association_titre
-              %td= etablissement.association_objet
+        .fr-my-2v
-            %tr
+          %p.fr-text-action-high--grey.fr-mb-0 Objet :
-              %td.libelle Date de création :
+          .champ-content.fr-text-action-high--grey
-              %td= try_format_date(etablissement.association_date_creation)
+            %p= etablissement.association_objet
-            %tr
+        .fr-my-2v
-              %td.libelle Date de publication :
+          %p.fr-text-action-high--grey.fr-mb-0 Date de création :
-              %td= try_format_date(etablissement.association_date_publication)
+          .champ-content.fr-text-action-high--grey
-            %tr
+            %p= try_format_date(etablissement.association_date_creation)
-              %td.libelle Date de déclaration :
+        .fr-my-2v
-              %td= try_format_date(etablissement.association_date_declaration)
+          %p.fr-text-action-high--grey.fr-mb-0 Date de publication :
+          .champ-content.fr-text-action-high--grey
+            %p= try_format_date(etablissement.association_date_publication)
+        .fr-my-2v
+          %p.fr-text-action-high--grey.fr-mb-0 Date de déclaration :
+          .champ-content.fr-text-action-high--grey
+            %p= try_format_date(etablissement.association_date_declaration)
 
 - unless local_assigns[:short_identity]
   %p

app/views/shared/dossiers/_identite_individual.html.haml

@@ -1,19 +1,18 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
+
-  %tbody
+.fr-my-2v
-    %tr
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.civility')
-      %td.libelle
+  .champ-content.fr-text-action-high--grey
-        = t('views.users.dossiers.identite.civility')
+    %p= individual.gender
-      %td= individual.gender
+.fr-my-2v
-    %tr
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.first_name')
-      %td.libelle
+  .champ-content.fr-text-action-high--grey
-        = t('views.users.dossiers.identite.first_name')
+    %p= individual.prenom
-      %td= individual.prenom
+.fr-my-2v
-    %tr
+  %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.last_name')
-      %td.libelle
+  .champ-content.fr-text-action-high--grey
-        = t('views.users.dossiers.identite.last_name')
+    %p= individual.nom
-      %td= individual.nom
 - if individual.birthdate.present?
-      %tr
+  .fr-my-2v
-        %td.libelle
+    %p.fr-text-action-high--grey.fr-mb-0= t('views.users.dossiers.identite.birthdate')
-          = t('views.users.dossiers.identite.birthdate')
+    .champ-content.fr-text-action-high--grey
-        %td= try_format_date(individual.birthdate)
+      %p= try_format_date(individual.birthdate)

app/views/shared/dossiers/_infos_generales.html.haml

@@ -1,26 +1,26 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
+%div
-  %tbody
+  %p.fr-my-4v.fr-px-4v.fr-text-action-high--grey
-    %tr
+    = l(dossier.depose_at, format: '%d %B %Y %H:%m')
-      %td.libelle Déposé le :
+    - if dossier.updated_at != dossier.depose_at
-      %td= l(dossier.depose_at, format: '%d %B %Y')
+      = t('views.shared.dossiers.demande.updated_at', updated_at: l(dossier.updated_at, format: '%d %B %y %H:%m'))
 
   - if dossier.justificatif_motivation.attached?
-    %tr
+    .fr-my-4v.fr-px-4v
-      %td.libelle Justificatif :
+      %p.fr-text-action-high--grey.fr-mb-0 Justificatif :
-      %td
+      .champ-content.fr-text-action-high--grey
         .action
           = render Attachment::ShowComponent.new(attachment: dossier.justificatif_motivation.attachment)
 
   - if dossier.motivation.present?
-    %tr
+    .fr-my-4v.fr-px-4v
-      %td.libelle Motivation :
+      %p.fr-text-action-high--grey.fr-mb-0 Motivation :
-      %td
+      .champ-content.fr-text-action-high--grey
         .action
           = dossier.motivation
 
   - if dossier.attestation.present?
-    %tr
+    .fr-my-4v.fr-px-4v
-      %td.libelle Attestation :
+      %p.fr-text-action-high--grey.fr-mb-0 Attestation :
-      %td
+      .champ-content.fr-text-action-high--grey
         .action
           = link_to('Voir l’attestation', attestation_instructeur_dossier_path(dossier.procedure, dossier), target: '_blank', rel: 'noopener')

app/views/shared/dossiers/_user_infos.html.haml

@@ -1,5 +1,4 @@
-%table.table.vertical.dossier-champs{ role: :presentation }
+.fr-my-2v
-  %tbody
+  %p.fr-text-action-high--grey.fr-mb-0 Email :
-    %tr
+  .champ-content.fr-text-action-high--grey
-      %td.libelle Email :
+    %p= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email
-      %td= user_deleted ? "#{email} (l’usager a supprimé son compte)" : email

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

@@ -14,6 +14,7 @@
 
   = render partial: 'shared/dossiers/demande', locals: { dossier: @dossier, demande_seen_at: nil, profile: 'usager' }
 
+
   .container
     - if !@dossier.read_only?
       = link_to t('views.users.dossiers.demande.edit_dossier'), modifier_dossier_path(@dossier), class: 'fr-btn fr-btn-sm', 'title'=> "Modifier mon dossier tant qu'il n'est pas passé en instruction"

app/views/users/dossiers/show/_header.html.haml

@@ -18,7 +18,7 @@
         = render partial: 'invites/dropdown', locals: { dossier: dossier, morphing: false }
         - if dossier.can_be_updated_by_user? && !current_page?(modifier_dossier_path(dossier))
           = link_to t('views.users.dossiers.show.header.edit_dossier'), modifier_dossier_path(dossier), class: 'fr-btn fr-btn-sm',
-            title: { label: t('views.users.dossiers.show.header.edit_dossier_title') }
+            title: t('views.users.dossiers.show.header.edit_dossier_title')
         = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
 
     %nav.tabs

config/locales/en.yml

@@ -341,6 +341,8 @@ en:
             write_message_placeholder: "Write your message here"
             write_message_to_administration_placeholder: "Write your message to the administration here"
         demande:
+          en_construction: "File submission date"
+          updated_at: "updated at %{updated_at}"
           requester_identity: "Identity of the requester"
           my_identity: "My identity"
           form: "Form"

config/locales/fr.yml

@@ -341,9 +341,11 @@ fr:
             write_message_placeholder: "Écrivez votre message ici"
             write_message_to_administration_placeholder: "Écrivez votre message à l’administration ici"
         demande:
+          en_construction: "Date de dépôt du dossier"
+          updated_at: "mis à jour le %{updated_at}"
           requester_identity: "Identité du demandeur"
           my_identity: "Mon identité"
-          form: "Formulaire"
+          form: "Sections du formulaire"
           edit_siret: "Modifier le SIRET"
           edit_identity: "Modifier l’identité"
     instructeurs:

spec/views/shared/dossiers/_champs.html.haml_spec.rb

@@ -108,7 +108,7 @@ describe 'shared/dossiers/champs', type: :view do
     let(:champ) { create(:champ_dossier_link, dossier: dossier, value: nil) }
     let(:champs) { [champ] }
 
-    it { is_expected.to include("Pas de dossier associé") }
+    it { is_expected.to include("non saisi (facultatif)") }
   end
 
   context "with seen_at" do