refactor(landings): with DSFR button & card components

app/components/dsfr/card_component.rb

@@ -0,0 +1,15 @@
+class Dsfr::CardComponent < ApplicationComponent
+  def footer_button(*args)
+    @footer_buttons.push args
+  end
+
+  private
+
+  def initialize(title: nil, desc: nil, footer_buttons: [])
+    @title = title
+    @desc = desc
+    @footer_buttons = footer_buttons
+  end
+
+  attr_reader :title, :desc, :footer_buttons
+end

app/components/dsfr/card_component/card_component.html.haml

@@ -0,0 +1,16 @@
+.fr-card
+  .fr-card__body
+    .fr-card__content
+      - if title
+        %h1.fr-card__title
+          = title
+      - if desc
+        %p.fr-card__desc
+          = desc
+
+    - if footer_buttons.any?
+      .fr-card__footer
+        .fr-btns-group.fr-btns-group--inline-reverse.fr-btns-group--inline-lg
+          %ul
+            %li
+              = render Dsfr::ButtonComponent.with_collection(footer_buttons)

app/views/root/administration.html.haml

@@ -20,17 +20,8 @@
           %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",
+          = render Dsfr::ButtonComponent.new("Participer à notre démonstration en ligne", "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr", class: "fr-btn--lg frm-mr-1w fr-mb-2w", external: true)
-            "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr",
+          = render Dsfr::ButtonComponent.new("Documentation", DOC_URL, class: "fr-btn--secondary fr-btn--lg", external: true)
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w"
-
-          = link_to "Documentation",
-            DOC_URL,
-            rel: "noopener noreferrer",
-            target: "_blank",
-            class: "fr-btn fr-btn--secondary fr-btn--lg"
 
         .role-panel-30.role-more-info-image.fr-mt-2w
           %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
@@ -46,11 +37,8 @@
         %p.role-panel-explanation Créez un premier formulaire de test en quelques minutes
 
 
+        = render Dsfr::ButtonComponent.new("Créer votre compte administrateur", DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, class: "fr-btn--lg")
 
-        = link_to "Créer votre compte administrateur",
-            DEMANDE_INSCRIPTION_ADMIN_PAGE_URL,
-            class: "fr-btn fr-btn--lg",
-            rel: "noopener noreferrer"
         %br
         %br
         %br
@@ -116,41 +104,16 @@
   .container
     .fr-grid-row.fr-grid-row--gutters.fr-py-5w
       .fr-col-md-6.fr-col-12
-        .fr-card
+        = render Dsfr::CardComponent.new(title: "Vous êtes prêt pour dématérialiser ?",
-          .fr-card__body
+                                         desc: "Réduisez vos temps d’instruction de 50 %",
-            .fr-card__content
+                                         footer_buttons: [{ url: DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, label: "Créer votre compte administrateur", external: true }],
-              %h1.fr-card__title
+                                         )
-                Vous êtes prêt pour dématérialiser ?
-              %p.fr-card__desc
-                Réduisez vos temps d’instruction de 50 %
-            .fr-card__footer
-              .fr-btns-group.fr-btns-group--inline-reverse.fr-btns-group--inline-lg
-                .ul
-                  .li
-                    = link_to "Créer votre compte administrateur",
-                      DEMANDE_INSCRIPTION_ADMIN_PAGE_URL,
-                      rel: "noopener noreferrer",
-                      target: "_blank",
-                      class: "fr-btn"
 
       .fr-col-md-6.fr-col-12
-        .fr-card
+        = render Dsfr::CardComponent.new(title: "Vous voulez en savoir plus ?",
-          .fr-card__body
+                                         desc: "Participez à notre prochain Webinaire",
-            .fr-card__content
+                                         footer_buttons: [{ url: "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr", label: "Inscription à notre prochain webinaire", external: true }],
-              %h1.fr-card__title
+                                         )
-                Vous voulez en savoir plus ?
-              %p.fr-card__desc
-                Participez à notre prochain Webinaire
-            .fr-card__footer
-              .fr-btns-group.fr-btns-group--inline-reverse.fr-btns-group--inline-lg
-                .ul
-                  .li
-                    = link_to "Inscription à notre webinaire",
-                      "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr",
-                      rel: "noopener noreferrer",
-                      target: "_blank",
-                      class: "fr-btn"
-
   .landing-panel.cta-panel
     .container
       .cta-panel-wrapper
@@ -158,5 +121,4 @@
           %h1.cta-panel-title Une question, un problème ?
           %p.cta-panel-explanation Consultez notre FAQ
         %div
-          %a.fr-btn.fr-btn--lg{ rel: 'noopener noreferrer', href:"#{ FAQ_URL }" }
+          = render Dsfr::ButtonComponent.new("Voir la FAQ", FAQ_URL, external: true, class: "fr-btn--lg")
-            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 ?",
+          = render Dsfr::ButtonComponent.new("Comment trouver ma démarche ?", COMMENT_TROUVER_MA_DEMARCHE_URL, class: "fr-btn--lg fr-mr-1w fr-mb-2w", external: true)
-            COMMENT_TROUVER_MA_DEMARCHE_URL,
+          = render Dsfr::ButtonComponent.new("Se connecter", new_user_session_path, class: "fr-btn--secondary fr-btn--lg", external: true)
-            target: "_blank",
-            rel: "noopener noreferrer",
-            class: "fr-btn fr-btn--lg fr-mr-1w fr-mb-2w"
-
-          = link_to "Se connecter",
-            new_user_session_path,
-            class: "fr-btn fr-btn--secondary fr-btn--lg"
 
   - 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,
+          = render Dsfr::ButtonComponent.new "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn--lg", external: true
-            class: "fr-btn fr-btn--lg",
-            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",
+          = render Dsfr::ButtonComponent.new "Découvrez notre outil", administration_path, class: "fr-btn--lg"
-            administration_path,
-            class: "fr-btn fr-btn--lg"