Merge pull request #7784 from betagouv/fix-fc-button

fix: FranceConnect button visibility

app/assets/stylesheets/dsfr.scss

@@ -1,6 +1,10 @@
 @import "colors";
-// override default text underline of dsfr
-body [href]:not([class^="fr-"]):not(.fr-footer__bottom-copy *) {
+
+// Hacky override default text underline of DSFR because we don't want to underline links in our legacy UI.
+// We don't match links having a dsfr class (prefixed by fr-).
+// However DSFR components may contain links without fr- class on them,
+// so these links can be artificially matched by adding any fr-class on them, (like fr-underlined)
+body [href]:not([class^="fr-"]) {
   background-image: none;
 }
 

app/assets/stylesheets/france-connect-login.scss

@@ -7,7 +7,6 @@
   }
 }
 
-.france-connect-login-buttons,
 .france-connect-help-link {
   text-align: center;
 }

app/javascript/entrypoints/main.css

@@ -9,6 +9,7 @@
 @import '@gouvfr/dsfr/dist/component/button/button.css';
 @import '@gouvfr/dsfr/dist/component/alert/alert.css';
 @import '@gouvfr/dsfr/dist/component/callout/callout.css';
+@import '@gouvfr/dsfr/dist/component/connect/connect.css';
 @import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
 @import '@gouvfr/dsfr/dist/component/table/table.css';
 @import '@gouvfr/dsfr/dist/component/modal/modal.css';

app/views/shared/_france_connect_login.html.haml

@@ -4,10 +4,15 @@
       = t('views.shared.france_connect_login.title')
     %p
       = t('views.shared.france_connect_login.description')
-    .france-connect-login-buttons
-      = link_to t('views.shared.france_connect_login.login_button'), url, class: "france-connect-login-button"
-    .france-connect-help-link
-      = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "link"
+
+    .fr-connect-group.fr-my-2w
+      = link_to(url, class: "fr-btn fr-connect") do
+        %span.fr-connect__login
+          = t('views.shared.france_connect_login.login_button')
+        %span.fr-connect__brand FranceConnect
+      %p
+        = link_to t('views.shared.france_connect_login.help_link'), "https://franceconnect.gouv.fr/", target: "_blank", rel: "noopener", class: "fr-underlined"
+
     .france-connect-login-separator
       = t('views.shared.france_connect_login.separator')
 - else

app/views/users/_procedure_footer.html.haml

@@ -84,5 +84,5 @@
       .fr-footer__bottom-copy
         %p
           Sauf mention contraire, tous les contenus de ce site sont sous
-          %a{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank" } licence etalab-2.0
+          %a.fr-underlined{ href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target:"_blank" } licence etalab-2.0
         %br

config/locales/views/shared/en.yml

@@ -12,7 +12,7 @@ en:
       france_connect_login:
         title: "With FranceConnect"
         description: "FranceConnect is a solution proposed by the government to secure and simplify the connection to web services."
-        login_button: "Sign in with FranceConnect"
+        login_button: "Sign in with"
         help_link: What is FranceConnect?
         separator: or
       account:

config/locales/views/shared/fr.yml

@@ -12,7 +12,7 @@ fr:
       france_connect_login:
         title: 'Avec FranceConnect'
         description: "FranceConnect est la solution proposée par l’État pour sécuriser et simplifier la connexion aux services en ligne."
-        login_button: "S’identifier avec FranceConnect"
+        login_button: "S’identifier avec"
         help_link: "Qu’est-ce que FranceConnect ?"
         separator: 'ou'
       account:

spec/system/france_connect/france_connect_particulier_spec.rb

@@ -24,7 +24,7 @@ describe 'France Connect Particulier Connexion' do
     before { visit new_user_session_path }
 
     scenario 'link to France Connect is present' do
-      expect(page).to have_css('.france-connect-login-button')
+      expect(page).to have_css('.fr-connect')
     end
 
     context 'and click on france connect link' do
@@ -38,7 +38,7 @@ describe 'France Connect Particulier Connexion' do
           let(:france_connect_information) { build(:france_connect_information, user_info) }
 
           context 'and no user has the same email' do
-            before { page.find('.france-connect-login-button').click }
+            before { page.find('.fr-connect').click }
 
             scenario 'he is redirected to user dossiers page' do
               expect(page).to have_content('Dossiers')
@@ -50,7 +50,7 @@ describe 'France Connect Particulier Connexion' do
             let!(:user) { create(:user, email: email, password: 'my-s3cure-p4ssword') }
 
             before do
-              page.find('.france-connect-login-button').click
+              page.find('.fr-connect').click
             end
 
             scenario 'he is redirected to the merge page' do
@@ -99,7 +99,7 @@ describe 'France Connect Particulier Connexion' do
             create(:france_connect_information, :with_user, user_info.merge(created_at: Time.zone.parse('12/12/2012'), updated_at: Time.zone.parse('12/12/2012')))
           end
 
-          before { page.find('.france-connect-login-button').click }
+          before { page.find('.fr-connect').click }
 
           scenario 'he is redirected to user dossiers page' do
             expect(page).to have_content('Dossiers')
@@ -115,11 +115,11 @@ describe '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('.france-connect-login-button').click
+          page.find('.fr-connect').click
         end
 
         scenario 'he is redirected to login page' do
-          expect(page).to have_css('.france-connect-login-button')
+          expect(page).to have_css('.fr-connect')
         end
 
         scenario 'error message is displayed' do