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

Fix home hover buttons, convert to DSFR style
This commit is contained in:
Colin Darie 2022-09-07 18:02:32 +02:00 committed by GitHub
commit 685ef54062
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 75 additions and 75 deletions

View file

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

View file

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

View file

@ -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

View file

@ -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(" ")}"

View file

@ -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

View file

@ -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

View file

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

View file

@ -3,6 +3,7 @@
@import '@gouvfr/dsfr/dist/component/logo/logo.css'; @import '@gouvfr/dsfr/dist/component/logo/logo.css';
@import '@gouvfr/dsfr/dist/component/form/form.css'; @import '@gouvfr/dsfr/dist/component/form/form.css';
@import '@gouvfr/dsfr/dist/component/badge/badge.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/navigation/navigation.css';
@import '@gouvfr/dsfr/dist/component/button/button.css'; @import '@gouvfr/dsfr/dist/component/button/button.css';
@import '@gouvfr/dsfr/dist/component/alert/alert.css'; @import '@gouvfr/dsfr/dist/component/alert/alert.css';

View file

@ -72,6 +72,6 @@
= hidden_field_tag :procedure_id, procedure_id = hidden_field_tag :procedure_id, procedure_id
.send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3 .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"

View file

@ -13,7 +13,7 @@
%th{ scope: "col" } %th{ scope: "col" }
Nom Nom
%th.change{ scope: "col" } %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 %tbody
- @services.each do |service| - @services.each do |service|

View file

@ -20,19 +20,10 @@
%h1.role-panel-title Est-ce fait pour mon administration ? %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 %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: "" } %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
.landing-panel.usagers-panel .landing-panel.usagers-panel
@ -46,11 +37,8 @@
%p.role-panel-explanation Créez un premier formulaire de test en quelques minutes %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 %br
%br %br
@ -113,26 +101,17 @@
= render partial: "root/users" if LANDING_USERS_ENABLED = 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 dinstruction de 50 %") do |c|
%p.cta-panel-explanation Réduisez vos temps dinstruction 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 .landing-panel.cta-panel
.container .container
@ -141,5 +120,4 @@
%h1.cta-panel-title Une question, un problème ? %h1.cta-panel-title Une question, un problème ?
%p.cta-panel-explanation Consultez notre FAQ %p.cta-panel-explanation Consultez notre FAQ
%div %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

View file

@ -26,15 +26,8 @@
%h2.role-panel-title Vous souhaitez effectuer une demande auprès dune administration ? %h2.role-panel-title Vous souhaitez effectuer une demande auprès dune administration ?
%p.role-panel-explanation Réalisez vos demandes en toute simplicité et retrouvez vos dossiers en ligne %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 - cache "numbers-panel", :expires_in => 3.hours do
.landing-panel .landing-panel
@ -70,10 +63,7 @@
%h2.cta-panel-title Une question, un problème ? %h2.cta-panel-title Une question, un problème ?
%p.cta-panel-explanation La réponse est dans laide en ligne %p.cta-panel-explanation La réponse est dans laide en ligne
%div %div
= link_to "Accéder à laide en ligne", FAQ_URL, = link_to "Accéder à laide 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 -# 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 -# %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
-# %div -# %div
@ -90,6 +80,4 @@
%h2.cta-panel-title.grey Administration : vous voulez dématerialiser ? %h2.cta-panel-title.grey Administration : vous voulez dématerialiser ?
%p.cta-panel-explanation.grey Proposez à vos usagers de remplir leurs dossiers en ligne %p.cta-panel-explanation.grey Proposez à vos usagers de remplir leurs dossiers en ligne
%div %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"

View file

@ -304,3 +304,18 @@
.container .container
%h2.empty-text Aucun dossier %h2.empty-text Aucun dossier
%p.empty-text-details Vous navez commencé aucune démarche pour linstant. %p.empty-text-details Vous navez commencé aucune démarche pour linstant.
.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"

View file

@ -18,6 +18,7 @@ DS_PROXY_URL = ENV.fetch("DS_PROXY_URL", "")
# External services URLs # External services URLs
WEBINAIRE_URL = "https://app.livestorm.co/demarches-simplifiees" 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" CALENDLY_URL = "https://calendly.com/demarches-simplifiees/accompagnement-administrateur-demarches-simplifiees-fr"
DOC_URL = ENV.fetch("DOC_URL", "https://doc.demarches-simplifiees.fr") DOC_URL = ENV.fetch("DOC_URL", "https://doc.demarches-simplifiees.fr")