diff --git a/app/components/dsfr/card_component.rb b/app/components/dsfr/card_component.rb new file mode 100644 index 000000000..fc2b15907 --- /dev/null +++ b/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 diff --git a/app/components/dsfr/card_component/card_component.html.haml b/app/components/dsfr/card_component/card_component.html.haml new file mode 100644 index 000000000..0e8790149 --- /dev/null +++ b/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) diff --git a/app/views/root/administration.html.haml b/app/views/root/administration.html.haml index 642d926a4..45746c2f5 100644 --- a/app/views/root/administration.html.haml +++ b/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", - "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr", - 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" + = 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) + = render Dsfr::ButtonComponent.new("Documentation", DOC_URL, class: "fr-btn--secondary fr-btn--lg", external: true) .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 - .fr-card__body - .fr-card__content - %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" + = render Dsfr::CardComponent.new(title: "Vous êtes prêt pour dématérialiser ?", + desc: "Réduisez vos temps d’instruction de 50 %", + footer_buttons: [{ url: DEMANDE_INSCRIPTION_ADMIN_PAGE_URL, label: "Créer votre compte administrateur", external: true }], + ) .fr-col-md-6.fr-col-12 - .fr-card - .fr-card__body - .fr-card__content - %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" - + = render Dsfr::CardComponent.new(title: "Vous voulez en savoir plus ?", + desc: "Participez à notre prochain Webinaire", + footer_buttons: [{ url: "https://app.livestorm.co/demarches-simplifiees/presentation-general-de-demarches-simplifieesfr", label: "Inscription à notre prochain webinaire", external: true }], + ) .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 }" } - Voir la FAQ + = render Dsfr::ButtonComponent.new("Voir la FAQ", FAQ_URL, external: true, class: "fr-btn--lg") diff --git a/app/views/root/landing.html.haml b/app/views/root/landing.html.haml index 7403ba6d8..5424484cd 100644 --- 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: "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" + = 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) + = render Dsfr::ButtonComponent.new("Se connecter", new_user_session_path, class: "fr-btn--secondary fr-btn--lg", external: true) - 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: "fr-btn fr-btn--lg", - target: "_blank", - rel: "noopener noreferrer" + = render Dsfr::ButtonComponent.new "Accéder à l’aide en ligne", FAQ_URL, class: "fr-btn--lg", external: true -# 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: "fr-btn fr-btn--lg" + = render Dsfr::ButtonComponent.new "Découvrez notre outil", administration_path, class: "fr-btn--lg"