From 28dcbcb85b7250c40f6fbaa3819fec3116a4582c Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 2 Apr 2019 15:03:26 +0200
Subject: [PATCH 1/6] auth: move the FranceConnect button to a partial

---
 app/assets/stylesheets/new_design/auth.scss   | 22 ---------------
 .../new_design/france-connect-login.scss      | 28 +++++++++++++++++++
 .../shared/_france_connect_login.html.haml    |  7 +++++
 app/views/users/registrations/new.html.haml   | 10 +------
 app/views/users/sessions/new.html.haml        | 10 +------
 .../france_connect_particulier_spec.rb        | 12 ++++----
 6 files changed, 43 insertions(+), 46 deletions(-)
 create mode 100644 app/assets/stylesheets/new_design/france-connect-login.scss
 create mode 100644 app/views/shared/_france_connect_login.html.haml

diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss
index 9196f0fa1..b67a98935 100644
--- a/app/assets/stylesheets/new_design/auth.scss
+++ b/app/assets/stylesheets/new_design/auth.scss
@@ -15,28 +15,6 @@
     margin-bottom: 0;
   }
 
-  .separation {
-    font-size: 14px;
-    color: $grey;
-    margin: 24px 0;
-  }
-
-  .login-with-fc {
-    display: inline-block;
-    height: 52px;
-    width: 186px;
-    margin: auto;
-    margin-bottom: 8px;
-    background-image: image-url("login-with-fc.svg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    cursor: pointer;
-
-    &:hover {
-      background-image: image-url("login-with-fc-hover.svg");
-    }
-  }
-
   hr {
     margin-top: 30px;
     margin-bottom: 30px;
diff --git a/app/assets/stylesheets/new_design/france-connect-login.scss b/app/assets/stylesheets/new_design/france-connect-login.scss
new file mode 100644
index 000000000..020352b09
--- /dev/null
+++ b/app/assets/stylesheets/new_design/france-connect-login.scss
@@ -0,0 +1,28 @@
+@import "colors";
+
+.france-connect-login {
+  text-align: center;
+}
+
+.france-connect-login-button {
+  display: inline-block;
+  height: 52px;
+  width: 186px;
+  margin: auto;
+  margin-bottom: 8px;
+  background-image: image-url("login-with-fc.svg"), image-url("login-with-fc-hover.svg");
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  font-size: 0;
+
+  &:hover {
+    background-image: image-url("login-with-fc-hover.svg");
+  }
+}
+
+.france-connect-login-separator {
+  margin: 24px 0;
+  font-size: 14px;
+  color: $grey;
+}
diff --git a/app/views/shared/_france_connect_login.html.haml b/app/views/shared/_france_connect_login.html.haml
new file mode 100644
index 000000000..4bd33221c
--- /dev/null
+++ b/app/views/shared/_france_connect_login.html.haml
@@ -0,0 +1,7 @@
+.france-connect-login
+  .france-connect-login-separator
+    ou
+  .france-connect-login-buttons
+    = link_to "S’identifier avec FranceConnect", url, class: "france-connect-login-button"
+  .france-connect-help-link
+    = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"
diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml
index 083f8fb59..fa3c1755a 100644
--- a/app/views/users/registrations/new.html.haml
+++ b/app/views/users/registrations/new.html.haml
@@ -11,12 +11,4 @@
 
     = f.submit "Créer un compte", class: "button large primary expand"
 
-  .separation.center
-    ou
-
-  .center
-    = image_tag "login-with-fc-hover.svg", style: "display: none"
-    = link_to "", france_connect_particulier_path, class: "login-with-fc"
-
-  .center
-    = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"
+  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml
index 302217ffe..0a2d49af9 100644
--- a/app/views/users/sessions/new.html.haml
+++ b/app/views/users/sessions/new.html.haml
@@ -28,12 +28,4 @@
 
     = f.submit "Se connecter", class: "button large primary expand"
 
-  .separation.center
-    ou
-
-  .center
-    = image_tag "login-with-fc-hover.svg", style: "display: none"
-    = link_to "", france_connect_particulier_path, class: "login-with-fc"
-
-  .center
-    = link_to "Qu’est-ce que FranceConnect ?", "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"
+  = render partial: 'shared/france_connect_login', locals: { url: france_connect_particulier_path }
diff --git a/spec/features/france_connect/france_connect_particulier_spec.rb b/spec/features/france_connect/france_connect_particulier_spec.rb
index dd221153e..ac26aa26a 100644
--- a/spec/features/france_connect/france_connect_particulier_spec.rb
+++ b/spec/features/france_connect/france_connect_particulier_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-feature 'France Connect Particulier  Connexion' do
+feature 'France Connect Particulier Connexion' do
   let(:code) { 'plop' }
   let(:given_name) { 'titi' }
   let(:family_name) { 'toto' }
@@ -28,7 +28,7 @@ feature 'France Connect Particulier  Connexion' do
     end
 
     scenario 'link to France Connect is present' do
-      expect(page).to have_css('a.login-with-fc')
+      expect(page).to have_css('.france-connect-login-button')
     end
 
     context 'and click on france connect link' do
@@ -53,7 +53,7 @@ feature 'France Connect Particulier  Connexion' do
 
         context 'when is the first connexion' do
           before do
-            page.find('.login-with-fc').click
+            page.find('.france-connect-login-button').click
           end
 
           scenario 'he is redirected to user dossiers page' do
@@ -64,7 +64,7 @@ feature 'France Connect Particulier  Connexion' do
         context 'when is not the first connexion' do
           before do
             create(:user, france_connect_information: france_connect_information)
-            page.find('.login-with-fc').click
+            page.find('.france-connect-login-button').click
           end
 
           scenario 'he is redirected to user dossiers page' do
@@ -77,11 +77,11 @@ feature 'France Connect Particulier  Connexion' do
         before do
           allow_any_instance_of(FranceConnectParticulierClient).to receive(:authorization_uri).and_return(france_connect_particulier_callback_path(code: code))
           allow(FranceConnectService).to receive(:retrieve_user_informations_particulier) { raise Rack::OAuth2::Client::Error.new(500, error: 'Unknown') }
-          page.find('.login-with-fc').click
+          page.find('.france-connect-login-button').click
         end
 
         scenario 'he is redirected to login page' do
-          expect(page).to have_css('a.login-with-fc')
+          expect(page).to have_css('.france-connect-login-button')
         end
 
         scenario 'error message is displayed' do

From 22f2ca105e300c22913c776f7c5c16fc01d617ed Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Tue, 2 Apr 2019 15:03:35 +0200
Subject: [PATCH 2/6] commencer: display a FranceConnect button

Fix #3640
---
 app/controllers/users/commencer_controller.rb |  5 ++++
 app/views/commencer/show.html.haml            |  1 +
 config/routes.rb                              |  1 +
 .../users/commencer_controller_spec.rb        | 24 +++++++++++++++++++
 spec/views/commencer/show.html.haml_spec.rb   |  1 +
 5 files changed, 32 insertions(+)

diff --git a/app/controllers/users/commencer_controller.rb b/app/controllers/users/commencer_controller.rb
index f42c5c31c..a20a009fe 100644
--- a/app/controllers/users/commencer_controller.rb
+++ b/app/controllers/users/commencer_controller.rb
@@ -34,6 +34,11 @@ module Users
       redirect_to new_user_registration_path
     end
 
+    def france_connect
+      store_user_location!
+      redirect_to france_connect_particulier_path
+    end
+
     def procedure_for_help
       Procedure.publiees.find_by(path: params[:path]) || Procedure.brouillons.find_by(path: params[:path])
     end
diff --git a/app/views/commencer/show.html.haml b/app/views/commencer/show.html.haml
index bed41a69f..1f584df63 100644
--- a/app/views/commencer/show.html.haml
+++ b/app/views/commencer/show.html.haml
@@ -8,6 +8,7 @@
       %span.optional-on-small-screens
         demarches-simplifiees.fr
     = link_to 'J’ai déjà un compte', commencer_sign_in_path(path: @procedure.path), class: ['button large expand']
+    = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path) }
 
   - else
     - dossiers = current_user.dossiers.where(procedure: @procedure)
diff --git a/config/routes.rb b/config/routes.rb
index 4bab577c4..409795dce 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -270,6 +270,7 @@ Rails.application.routes.draw do
       get '/:path', action: 'commencer'
       get '/:path/sign_in', action: 'sign_in', as: :sign_in
       get '/:path/sign_up', action: 'sign_up', as: :sign_up
+      get '/:path/france_connect', action: 'france_connect', as: :france_connect
     end
 
     resources :dossiers, only: [:index, :show, :new] do
diff --git a/spec/controllers/users/commencer_controller_spec.rb b/spec/controllers/users/commencer_controller_spec.rb
index cb6e8b069..ae8f2d01a 100644
--- a/spec/controllers/users/commencer_controller_spec.rb
+++ b/spec/controllers/users/commencer_controller_spec.rb
@@ -112,4 +112,28 @@ describe Users::CommencerController, type: :controller do
       it { expect(subject).to redirect_to(new_user_registration_path) }
     end
   end
+
+  describe '#france_connect' do
+    context 'for a published procedure' do
+      subject { get :france_connect, params: { path: published_procedure.path } }
+
+      it 'set the path to return after sign-up to the procedure start page' do
+        subject
+        expect(controller.stored_location_for(:user)).to eq(commencer_path(path: published_procedure.path))
+      end
+
+      it { expect(subject).to redirect_to(france_connect_particulier_path) }
+    end
+
+    context 'for a draft procedure' do
+      subject { get :france_connect, params: { path: draft_procedure.path } }
+
+      it 'set the path to return after sign-up to the draft procedure start page' do
+        subject
+        expect(controller.stored_location_for(:user)).to eq(commencer_test_path(path: draft_procedure.path))
+      end
+
+      it { expect(subject).to redirect_to(france_connect_particulier_path) }
+    end
+  end
 end
diff --git a/spec/views/commencer/show.html.haml_spec.rb b/spec/views/commencer/show.html.haml_spec.rb
index b07600502..c8119d7d9 100644
--- a/spec/views/commencer/show.html.haml_spec.rb
+++ b/spec/views/commencer/show.html.haml_spec.rb
@@ -21,6 +21,7 @@ RSpec.describe 'commencer/show.html.haml', type: :view do
       subject
       expect(rendered).to have_link('Créer un compte')
       expect(rendered).to have_link('J’ai déjà un compte')
+      expect(rendered).to have_link('S’identifier avec FranceConnect')
     end
   end
 

From a997f683f5284aba052f6c4454407f4f7149a892 Mon Sep 17 00:00:00 2001
From: Mathieu Magnin <mathieu.magnin@gmail.com>
Date: Wed, 3 Apr 2019 14:53:45 +0200
Subject: [PATCH 3/6] =?UTF-8?q?Fix=20p=C3=A9touille=20on=20service=20form?=
 =?UTF-8?q?=20placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/new_administrateur/services/_form.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/new_administrateur/services/_form.html.haml b/app/views/new_administrateur/services/_form.html.haml
index 847090742..9b92b49a3 100644
--- a/app/views/new_administrateur/services/_form.html.haml
+++ b/app/views/new_administrateur/services/_form.html.haml
@@ -43,12 +43,12 @@
   = f.label :horaires do
     Horaires
     %span.mandatory *
-  = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30\nLe samedi de 9 h 30 à 12 h", required: true
+  = f.text_area :horaires, placeholder: "Du lundi au vendredi de 9 h 30 à 17 h 30. Le samedi de 9 h 30 à 12 h.", required: true
 
   = f.label :adresse do
     Adresse
     %span.mandatory *
-  = f.text_area :adresse, placeholder: "20 avenue de Ségur\n75007 Paris", required: true
+  = f.text_area :adresse, placeholder: "20 avenue de Ségur, 75007 Paris", required: true
 
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id

From 5d54b134b7f039391e3d26748370e3514a13f86a Mon Sep 17 00:00:00 2001
From: Paul Chavard <git@paul.chavard.net>
Date: Wed, 3 Apr 2019 17:09:32 +0200
Subject: [PATCH 4/6] Add babel plugins to production dependencies

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d4a6f0016..ffc49a853 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "@turf/area": "^6.0.1",
     "activestorage": "^5.2.2",
     "autocomplete.js": "^0.36.0",
+    "babel-plugin-macros": "^2.5.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "chartkick": "^3.0.1",
     "debounce": "^1.2.0",
     "dom4": "^2.1.3",
@@ -29,8 +31,6 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "babel-plugin-macros": "^2.5.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "eclint": "^2.8.0",
     "eslint": "^5.9.0",
     "eslint-config-prettier": "^3.3.0",

From e896310e344fdc5720c518d5d0ec3ae39af790aa Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 1 Apr 2019 15:04:11 +0200
Subject: [PATCH 5/6] procedure_context: display the procedure description on
 small screens

Fix #3658
---
 .../stylesheets/new_design/commencer.scss     |  6 ++-
 app/assets/stylesheets/new_design/forms.scss  |  2 +-
 .../new_design/procedure_context.scss         | 39 +++++++++++++++++--
 .../new_design/procedure-context.js           | 20 ++++++++++
 app/javascript/packs/application.js           |  1 +
 .../_procedure_description.html.haml          |  4 +-
 6 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/new_design/procedure-context.js

diff --git a/app/assets/stylesheets/new_design/commencer.scss b/app/assets/stylesheets/new_design/commencer.scss
index 3244987c7..cb43fc95a 100644
--- a/app/assets/stylesheets/new_design/commencer.scss
+++ b/app/assets/stylesheets/new_design/commencer.scss
@@ -1,8 +1,10 @@
 @import "constants";
 
 .commencer {
-  .button:first-of-type {
-    margin-top: 4 * $default-spacer;
+  @media (min-width: $two-columns-breakpoint) {
+    .button:first-of-type {
+      margin-top: 4 * $default-spacer;
+    }
   }
 
   .button {
diff --git a/app/assets/stylesheets/new_design/forms.scss b/app/assets/stylesheets/new_design/forms.scss
index 58547b25d..c260ec713 100644
--- a/app/assets/stylesheets/new_design/forms.scss
+++ b/app/assets/stylesheets/new_design/forms.scss
@@ -7,7 +7,7 @@
     margin-bottom: 20px;
 
     @media (max-width: $two-columns-breakpoint) {
-      font-size: 28px;
+      font-size: 26px;
     }
   }
 
diff --git a/app/assets/stylesheets/new_design/procedure_context.scss b/app/assets/stylesheets/new_design/procedure_context.scss
index f2fa9502b..54df80fd2 100644
--- a/app/assets/stylesheets/new_design/procedure_context.scss
+++ b/app/assets/stylesheets/new_design/procedure_context.scss
@@ -2,6 +2,7 @@
 @import "constants";
 
 $procedure-context-breakpoint: $two-columns-breakpoint;
+$procedure-description-line-height: 22px;
 
 .procedure-preview {
   font-size: 24px;
@@ -25,12 +26,13 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
   }
 
   .procedure-title {
-    font-size: 30px;
+    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;
     }
   }
@@ -39,11 +41,40 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
     font-size: 16px;
 
     p:not(:last-of-type) {
-      margin-bottom: 2 * $default-spacer;
+      // Space the paragraphs by exactly one line height,
+      // so that the text always is truncated in the middle of a line,
+      // regarless of the number of paragraphs.
+      margin-bottom: 3 * $default-spacer;
     }
+  }
 
-    @media (max-width: $procedure-context-breakpoint) {
-      display: none; // TO FIX : make this description available for small devices
+  .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: hidden;
+        border-bottom: 1px solid $border-grey;
+
+        + .read-more-button {
+          display: block;
+          position: relative;
+          margin-left: auto;
+          margin-right: auto;
+          top: -19px;
+          margin-bottom: -19px;
+        }
+      }
     }
   }
 
diff --git a/app/javascript/new_design/procedure-context.js b/app/javascript/new_design/procedure-context.js
new file mode 100644
index 000000000..a6de9431d
--- /dev/null
+++ b/app/javascript/new_design/procedure-context.js
@@ -0,0 +1,20 @@
+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('turbolinks:load', updateReadMoreVisibility);
+addEventListener('resize', updateReadMoreVisibility);
+
+delegate('click', '.read-more-button', expandProcedureDescription);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 4398cfadb..7f61db545 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -18,6 +18,7 @@ import '../shared/toggle-target';
 
 import '../new_design/dropdown';
 import '../new_design/form-validation';
+import '../new_design/procedure-context';
 import '../new_design/select2';
 import '../new_design/spinner';
 import '../new_design/support';
diff --git a/app/views/layouts/commencer/_procedure_description.html.haml b/app/views/layouts/commencer/_procedure_description.html.haml
index 5df533231..04a05ffac 100644
--- a/app/views/layouts/commencer/_procedure_description.html.haml
+++ b/app/views/layouts/commencer/_procedure_description.html.haml
@@ -5,4 +5,6 @@
 %h2.procedure-title
   = procedure.libelle
 .procedure-description
-  = h string_to_html(procedure.description)
+  .procedure-description-body.read-more-enabled.read-more-collapsed
+    = h string_to_html(procedure.description)
+  = button_tag "Afficher la description complète", class: 'button read-more-button'

From adefd26413c407a047c1813604562f89e1f6a4c0 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Mon, 1 Apr 2019 15:03:13 +0200
Subject: [PATCH 6/6] procedure_context: hide the description on auth pages

---
 app/assets/stylesheets/new_design/auth.scss | 13 +++++++++++++
 app/views/layouts/application.html.haml     |  2 +-
 app/views/users/registrations/new.html.haml |  2 ++
 app/views/users/sessions/new.html.haml      |  2 ++
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/new_design/auth.scss b/app/assets/stylesheets/new_design/auth.scss
index b67a98935..ea9cfeba4 100644
--- a/app/assets/stylesheets/new_design/auth.scss
+++ b/app/assets/stylesheets/new_design/auth.scss
@@ -3,6 +3,19 @@
 @import "placeholders";
 @import "mixins";
 
+#auth {
+  // On small screens, hide the procedure description text on auth pages.
+  // It avoids pushing the sign-in/sign-up form out of the viewport.
+  //
+  // The procedure description can still be read from the /commencer
+  // pages.
+  @media (max-width: $two-columns-breakpoint) {
+    .procedure-description {
+      display: none;
+    }
+  }
+}
+
 .auth-form {
   .auth-options {
     display: flex;
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index c5b496135..e1358ece0 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -23,7 +23,7 @@
     - if Rails.env.development?
       = stylesheet_link_tag :xray
 
-  %body{ class: browser.platform.ios? ? 'ios' : nil }
+  %body{ id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil }
     .page-wrapper
       = render partial: "layouts/outdated_browser_banner"
       = render partial: 'layouts/pre_maintenance'
diff --git a/app/views/users/registrations/new.html.haml b/app/views/users/registrations/new.html.haml
index fa3c1755a..d21b184be 100644
--- a/app/views/users/registrations/new.html.haml
+++ b/app/views/users/registrations/new.html.haml
@@ -1,3 +1,5 @@
+= content_for(:page_id, 'auth')
+
 .auth-form
   = devise_error_messages!
   = form_for resource, url: user_registration_path, html: { class: "form" } do |f|
diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml
index 0a2d49af9..89e7d737a 100644
--- a/app/views/users/sessions/new.html.haml
+++ b/app/views/users/sessions/new.html.haml
@@ -1,3 +1,5 @@
+= content_for(:page_id, 'auth')
+
 .auth-form.sign-in-form
   - if resource_name == :user
     %p.register