dossier: add details header

app/assets/stylesheets/new_design/dossier_show.scss

@@ -0,0 +1,25 @@
+@import "colors";
+@import "constants";
+
+#dossier-show {
+  h1 {
+    color: $black;
+    font-size: 22px;
+    margin-bottom: 0;
+
+    .icon.folder {
+      vertical-align: -3px;
+    }
+  }
+
+  h2 {
+    margin-left: 31px;
+    margin-bottom: $default-padding;
+    color: $grey;
+    font-weight: bold;
+  }
+
+  .sub-header .label {
+    flex-shrink: 0;
+  }
+}

app/views/new_user/dossiers/show.html.haml

@@ -1,3 +1,2 @@
-%h1
+#dossier-show
-  Dossier
+  = render partial: 'new_user/dossiers/show/header', locals: { dossier: @dossier }
-  = @dossier.id

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

@@ -0,0 +1,15 @@
+.sub-header
+  .container
+    .flex.justify-between.align-baseline
+      .title-container
+        %h1
+          %span.icon.folder
+          = dossier.procedure.libelle
+        %h2
+          Dossier nº #{dossier.id}
+
+      = render partial: 'shared/dossiers/status', locals: { dossier: dossier }
+
+    %ul.tabs
+      %li.active
+        = link_to "Résumé", dossier_path(dossier)

spec/views/new_user/dossiers/show.html.haml_spec.rb

@@ -11,6 +11,7 @@ describe 'new_user/dossiers/show.html.haml', type: :view do
   subject! { render }
 
   it 'affiche les informations du dossier' do
-    expect(rendered).to have_text("Dossier #{dossier.id}")
+    expect(rendered).to have_text(dossier.procedure.libelle)
+    expect(rendered).to have_text("Dossier nº #{dossier.id}")
   end
 end