style(dsfr/callout): more theming for callout component

app/components/dsfr/callout_component.rb

@@ -2,11 +2,28 @@
 class Dsfr::CalloutComponent < ApplicationComponent
   renders_one :body
 
+  attr_reader :title, :theme, :icon
+
+  def initialize(title:, theme: :info, icon: nil)
+    @title = title
+    @theme = theme
+    @icon = icon
+  end
+
+  def callout_class
+    ["fr-callout", theme_class, icon]
+  end
+
   private
 
-  def initialize(title:)
+  def theme_class
-    @title = title
+    case theme
+    when :warning
+      "fr-callout--brown-caramel"
+    when :success
+      "fr-callout--green-emeraude"
+    else
+      # info is default theme
+    end
   end
-
-  attr_reader :title
 end

app/components/dsfr/callout_component/callout_component.html.haml

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

app/views/root/patron.html.haml

@@ -304,6 +304,24 @@
     %p.empty-text-details Vous n’avez commencé aucune démarche pour l’instant.
 
   .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
+
+    = render Dsfr::CalloutComponent.new(title: "Information minimale") do |c|
+      - c.with_body do
+        %p Ceci est le minimum pour afficher un callout.
+
+    = 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.
+
+    = render Dsfr::CalloutComponent.new(title: "Titre d'une information positive", theme: :success, icon: "fr-icon-message-2-fill") do |c|
+      - c.with_body do
+        %p
+          N'importe quelle icône
+          = link_to("du jeu d'icônes", "https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-techniques/icones", **external_link_attributes)
+          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