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

Fix home hover buttons, convert to DSFR style
2022-09-07 18:02:32 +02:00 · 2022-09-07 18:02:32 +02:00 · 685ef54062
commit 685ef54062
parent aa7a25712f c927f2c250
14 changed files with 75 additions and 75 deletions
--- a/.rubocop.yml
+++ b/.rubocop.yml
@ -11,7 +11,7 @@ inherit_mode:
    - Include

 AllCops:
-  TargetRubyVersion: 3.0
+  TargetRubyVersion: 3.1
  DisabledByDefault: true
  SuggestExtensions: false
  Include:
--- a/app/assets/stylesheets/landing.scss
+++ b/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,
--- a/app/components/dsfr/button_component.rb
+++ b/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
--- a/app/components/dsfr/button_component/button_component.html.haml
+++ b/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(" ")}"
-
--- a/app/components/dsfr/card_vertical_component.rb
+++ b/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
--- a/app/components/dsfr/card_vertical_component/card_vertical_component.html.haml
+++ b/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
--- a/app/helpers/application_helper.rb
+++ b/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
--- a/app/javascript/entrypoints/main.css
+++ b/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';
--- a/app/views/administrateurs/services/_form.html.haml
+++ b/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'])
-    = render Dsfr::ButtonComponent.new(form: f, label: "Enregistrer", class_names: [''])
+    = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
+    = f.submit "Enregistrer", class: "fr-btn"

--- a/app/views/administrateurs/services/index.html.haml
+++ b/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|
--- a/app/views/root/administration.html.haml
+++ b/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",
-            "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr",
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "role-panel-button-primary"
+          = 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
+          = link_to "Documentation", DOC_URL, class: "fr-btn fr-btn--secondary fr-btn--lg", **external_link_attributes

-          = link_to "Documentation",
-            DOC_URL,
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "role-panel-button-secondary"
-
-        .role-panel-30.role-more-info-image
+        .role-panel-30.role-more-info-image.fr-mt-2w
          %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
-      .half.first-half
-        %h1.cta-panel-title Vous êtes prêt pour dématérialiser ?
-        %p.cta-panel-explanation Réduisez vos temps d’instruction de 50 %
-        = link_to "Créer votre compte administrateur",
-          DEMANDE_INSCRIPTION_ADMIN_PAGE_URL,
-          class: "cta-panel-button-blue"
+    .fr-grid-row.fr-grid-row--gutters.fr-py-5w
+      .fr-col-md-6.fr-col-12
+        = render Dsfr::CardVerticalComponent.new(title: "Vous êtes prêt pour dématérialiser ?", desc: "Réduisez vos temps d’instruction de 50 %") do |c|
+          - c.with_footer_button do
+            = link_to("Créer votre compte administrateur", DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, class: "fr-btn", **external_link_attributes)

-      .half
-        %h1.cta-panel-title Vous voulez en savoir plus ?
-        %p.cta-panel-explanation Participez à notre prochain Webinaire
-        -# haml-lint:disable ApplicationNameLinter
-        = 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
+      .fr-col-md-6.fr-col-12
+        = render Dsfr::CardVerticalComponent.new(title: "Vous voulez en savoir plus ?", desc: "Participez à notre prochain Webinaire") do |c|
+          - c.with_footer_button do
+            = link_to("Inscription à notre prochain webinanire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes)

  .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 }" }
-            Voir la FAQ
+          = link_to "Voir la FAQ", FAQ_URL, class: "fr-btn fr-btn--lg", **external_link_attributes
--- a/app/views/root/landing.html.haml
+++ b/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 ?",
-            COMMENT_TROUVER_MA_DEMARCHE_URL,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            class: "role-panel-button-primary"
-
-          = link_to "Se connecter",
-            new_user_session_path,
-            class: "role-panel-button-secondary"
+          = 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
+          = link_to "Se connecter", new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg", **external_link_attributes

  - 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,
-            class: "cta-panel-button-white",
-            target: "_blank",
-            rel: "noopener noreferrer"
+          = link_to "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn fr-btn--lg", **external_link_attributes
        -#   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",
-            administration_path,
-            class: "cta-panel-button-blue"
+          = link_to "Découvrez notre outil", administration_path, class: "fr-btn fr-btn--lg"
--- a/app/views/root/patron.html.haml
+++ b/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"
--- a/config/initializers/02_urls.rb
+++ b/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")