Merge pull request #7731 from betagouv/fix-home-buttons

Fix home hover buttons, convert to DSFR style

.rubocop.yml

@@ -11,7 +11,7 @@ inherit_mode:
     - Include
 
 AllCops:
-  TargetRubyVersion: 3.0
+  TargetRubyVersion: 3.1
   DisabledByDefault: true
   SuggestExtensions: false
   Include:

app/assets/stylesheets/landing.scss

@@ -162,7 +162,7 @@ $landing-breakpoint: 1040px;
 .usagers-panel,
 .numbers-panel,
 .cta-panel-2 {
-  background-color: $light-grey;
+  background-color: $alt-blue-france;
 }
 
 .more-info {
@@ -252,6 +252,10 @@ $users-breakpoint: 950px;
 .cta-panel {
   background-color: $blue-france-500;
   color: #FFFFFF;
+
+  .fr-btn {
+    box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
+  }
 }
 
 .role-panel-wrapper,

app/components/dsfr/button_component.rb

@@ -1,12 +0,0 @@
-class Dsfr::ButtonComponent < ApplicationComponent
-  private
-
-  def initialize(label:, form: nil, url: nil, class_names: [])
-    @form = form
-    @label = label
-    @url = url
-    @class_names = Array(class_names)
-  end
-
-  attr_reader :form, :url, :label, :class_names
-end

app/components/dsfr/button_component/button_component.html.haml

@@ -1,5 +0,0 @@
-- if form
-  = form.submit label, class: "fr-btn #{class_names.join(" ")}"
-- elsif url
-  = link_to label, url, class: "fr-btn #{class_names.join(" ")}"
-

app/components/dsfr/card_vertical_component.rb

@@ -0,0 +1,10 @@
+class Dsfr::CardVerticalComponent < ApplicationComponent
+  renders_many :footer_buttons
+
+  attr_reader :title, :desc
+
+  def initialize(title: nil, desc: nil)
+    @title = title
+    @desc = desc
+  end
+end

app/components/dsfr/card_vertical_component/card_vertical_component.html.haml

@@ -0,0 +1,16 @@
+.fr-card
+  .fr-card__body
+    .fr-card__content
+      - if title
+        %h2.fr-card__title
+          = title
+      - if desc
+        %p.fr-card__desc
+          = desc
+
+    - if footer_buttons?
+      .fr-card__footer
+        %ul.fr-btns-group.fr-btns-group--inline-reverse.fr-btns-group--inline-lg
+          - footer_buttons.each do |button|
+            %li
+              = button

app/helpers/application_helper.rb

@@ -195,4 +195,8 @@ module ApplicationHelper
       Rails.env.production? || ENV['VITE_LEGACY'] == 'enabled'
     end
   end
+
+  def external_link_attributes
+    { target: "_blank", rel: "noopener noreferrer" }
+  end
 end

app/javascript/entrypoints/main.css

@@ -3,6 +3,7 @@
 @import '@gouvfr/dsfr/dist/component/logo/logo.css';
 @import '@gouvfr/dsfr/dist/component/form/form.css';
 @import '@gouvfr/dsfr/dist/component/badge/badge.css';
+@import '@gouvfr/dsfr/dist/component/card/card.css';
 @import '@gouvfr/dsfr/dist/component/navigation/navigation.css';
 @import '@gouvfr/dsfr/dist/component/button/button.css';
 @import '@gouvfr/dsfr/dist/component/alert/alert.css';

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

@@ -72,6 +72,6 @@
     = hidden_field_tag :procedure_id, procedure_id
 
   .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
-    = render Dsfr::ButtonComponent.new(label: "Annuler et revenir à la page de suivi", url: admin_procedure_path(id: @procedure.id), class_names: ['fr-btn--secondary'])
+    = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
-    = render Dsfr::ButtonComponent.new(form: f, label: "Enregistrer", class_names: [''])
+    = f.submit "Enregistrer", class: "fr-btn"
 

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

@@ -13,7 +13,7 @@
         %th{ scope: "col" }
           Nom
         %th.change{ scope: "col" }
-          = render Dsfr::ButtonComponent.new(label: "Nouveau service", url: new_admin_service_path(procedure_id: @procedure.id), class_names: ['fr-btn--secondary'])
+          = link_to "Nouveau service", new_admin_service_path(procedure_id: @procedure.id), class: "fr-btn fr-btn--secondary"
 
     %tbody
       - @services.each do |service|

app/views/root/administration.html.haml

@@ -20,19 +20,10 @@
           %h1.role-panel-title Est-ce fait pour mon administration ?
           %p.role-panel-explanation Découvrez notre outil et posez nous vos questions lors de notre démonstration en ligne ou lisez notre documentation
 
-          = link_to "Participer à notre démonstration en ligne",
+          = link_to "Participer à notre démonstration en ligne", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w", **external_link_attributes
-            "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr",
+          = link_to "Documentation", DOC_URL, class: "fr-btn fr-btn--secondary fr-btn--lg", **external_link_attributes
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "role-panel-button-primary"
 
-          = link_to "Documentation",
+        .role-panel-30.role-more-info-image.fr-mt-2w
-            DOC_URL,
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "role-panel-button-secondary"
-
-        .role-panel-30.role-more-info-image
           %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
 
 .landing-panel.usagers-panel
@@ -46,11 +37,8 @@
         %p.role-panel-explanation Créez un premier formulaire de test en quelques minutes
 
 
+        = link_to "Créer votre compte administrateur", DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, class: "fr-btn fr-btn--lg"
 
-        = link_to "Créer votre compte administrateur",
-            DEMANDE_INSCRIPTION_ADMIN_PAGE_URL,
-            class: "role-panel-button-primary",
-            rel: "noopener noreferrer"
         %br
         %br
         %br
@@ -113,26 +101,17 @@
 
   = render partial: "root/users" if  LANDING_USERS_ENABLED
 
-  .landing-panel.cta-panel-2
+  .container
-    .container
+    .fr-grid-row.fr-grid-row--gutters.fr-py-5w
-      .half.first-half
+      .fr-col-md-6.fr-col-12
-        %h1.cta-panel-title Vous êtes prêt pour dématérialiser ?
+        = render Dsfr::CardVerticalComponent.new(title: "Vous êtes prêt pour dématérialiser ?", desc: "Réduisez vos temps d’instruction de 50 %") do |c|
-        %p.cta-panel-explanation Réduisez vos temps d’instruction de 50 %
+          - c.with_footer_button do
-        = link_to "Créer votre compte administrateur",
+            = link_to("Créer votre compte administrateur", DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, class: "fr-btn", **external_link_attributes)
-          DEMANDE_INSCRIPTION_ADMIN_PAGE_URL,
-          class: "cta-panel-button-blue"
 
-      .half
+      .fr-col-md-6.fr-col-12
-        %h1.cta-panel-title Vous voulez en savoir plus ?
+        = render Dsfr::CardVerticalComponent.new(title: "Vous voulez en savoir plus ?", desc: "Participez à notre prochain Webinaire") do |c|
-        %p.cta-panel-explanation Participez à notre prochain Webinaire
+          - c.with_footer_button do
-        -# haml-lint:disable ApplicationNameLinter
+            = link_to("Inscription à notre prochain webinanire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes)
-        = link_to "Inscription à notre webinaire",
-          "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr",
-          target: "_blank",
-          class: "cta-panel-button-blue"
-        -# haml-lint:enable ApplicationNameLinter
-
-      .clearfix
 
   .landing-panel.cta-panel
     .container
@@ -141,5 +120,4 @@
           %h1.cta-panel-title Une question, un problème ?
           %p.cta-panel-explanation Consultez notre FAQ
         %div
-          %a.cta-panel-button-white{ rel: 'noopener noreferrer', href:"#{ FAQ_URL }" }
+          = link_to "Voir la FAQ", FAQ_URL, class: "fr-btn fr-btn--lg", **external_link_attributes
-            Voir la FAQ

app/views/root/landing.html.haml

@@ -26,15 +26,8 @@
           %h2.role-panel-title Vous souhaitez effectuer une demande auprès d’une administration ?
           %p.role-panel-explanation Réalisez vos demandes en toute simplicité et retrouvez vos dossiers en ligne
 
-          = link_to "Comment trouver ma démarche ?",
+          = link_to "Comment trouver ma démarche ?", COMMENT_TROUVER_MA_DEMARCHE_URL, class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w", **external_link_attributes
-            COMMENT_TROUVER_MA_DEMARCHE_URL,
+          = link_to "Se connecter", new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg", **external_link_attributes
-            target: "_blank",
-            rel: "noopener noreferrer",
-            class: "role-panel-button-primary"
-
-          = link_to "Se connecter",
-            new_user_session_path,
-            class: "role-panel-button-secondary"
 
   - cache "numbers-panel", :expires_in => 3.hours do
     .landing-panel
@@ -70,10 +63,7 @@
           %h2.cta-panel-title Une question, un problème ?
           %p.cta-panel-explanation La réponse est dans l’aide en ligne
         %div
-          = link_to "Accéder à l’aide en ligne", FAQ_URL,
+          = link_to "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn fr-btn--lg", **external_link_attributes
-            class: "cta-panel-button-white",
-            target: "_blank",
-            rel: "noopener noreferrer"
         -#   We temporarily disable the link to the contact page on the homepage
         -#   %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
         -# %div
@@ -90,6 +80,4 @@
           %h2.cta-panel-title.grey Administration : vous voulez dématerialiser ?
           %p.cta-panel-explanation.grey Proposez à vos usagers de remplir leurs dossiers en ligne
         %div
-          = link_to "Découvrez notre outil",
+          = link_to "Découvrez notre outil", administration_path, class: "fr-btn fr-btn--lg"
-            administration_path,
-            class: "cta-panel-button-blue"

app/views/root/patron.html.haml

@@ -304,3 +304,18 @@
   .container
     %h2.empty-text Aucun dossier
     %p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.
+
+  .container
+    %h1 Dsfr::CardVerticalComponent
+    = link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes
+
+    .fr-grid-row.fr-grid-row--gutters.fr-py-5w
+      .fr-col-md-6.fr-col-12
+        = render Dsfr::CardVerticalComponent.new(title: "Optional title", desc: "Optional description")
+
+      .fr-col-md-6.fr-col-12
+        = render Dsfr::CardVerticalComponent.new(title: "With footer buttons") do |c|
+          - c.with_footer_button do
+            = link_to "Button 1", "#", class: "fr-btn", **external_link_attributes
+          - c.with_footer_button do
+            = button_tag "Button 2", class: "fr-btn fr-btn--secondary"

config/initializers/02_urls.rb

@@ -18,6 +18,7 @@ DS_PROXY_URL = ENV.fetch("DS_PROXY_URL", "")
 
 # External services URLs
 WEBINAIRE_URL = "https://app.livestorm.co/demarches-simplifiees"
+INSCRIPTION_WEBINAIRE_URL = "https://app.livestorm.co/demarches-simplifiees/inscription-webinaire-les-avances-de-la-demarche-simplifiee"
 CALENDLY_URL = "https://calendly.com/demarches-simplifiees/accompagnement-administrateur-demarches-simplifiees-fr"
 
 DOC_URL = ENV.fetch("DOC_URL", "https://doc.demarches-simplifiees.fr")