style(dsfr): callout component with support for a bottom section like buttons

This commit is contained in:
Colin Darie 2022-10-18 13:59:50 +02:00
parent 7f28f1fe4c
commit f5a0842c6e
3 changed files with 8 additions and 4 deletions

View file

@ -1,6 +1,7 @@
# see: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant
class Dsfr::CalloutComponent < ApplicationComponent
renders_one :body
renders_one :bottom
attr_reader :title, :theme, :icon

View file

@ -1,3 +1,4 @@
%div{ class: callout_class }
%h3.fr-callout__title= title
%p.fr-callout__text= body
= bottom

View file

@ -305,7 +305,7 @@
.container
%h1 Dsfr::CalloutComponent
= link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes
%p= link_to "Documentation DSFR Mis en avant (callout)", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant", **external_link_attributes
= render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
- c.with_body do
@ -313,7 +313,9 @@
= render Dsfr::CalloutComponent.new(title: "Information importante ou avertissement", theme: :warning) do |c|
- c.with_body do
%p Le contenu de cette description est libre.
Le contenu de cette description est libre.
- c.with_bottom do
%button.fr-btn Call to action
= render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
- c.with_body do
@ -323,7 +325,7 @@
peut être utilisée.
%h1 Dsfr::CardVerticalComponent
= link_to "Documentation DSFR Carte", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/carte", **external_link_attributes
%p= 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
@ -337,7 +339,7 @@
= button_tag "Button 2", class: "fr-btn fr-btn--secondary"
%h1 Dsfr::NoticeComponent
= link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
%p= link_to "Documentation DSFR Bandeau d'information", "https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante", **external_link_attributes
.my-3
= render Dsfr::NoticeComponent.new(closable: true) do |c|
- c.with_title do