feat(dsfr): new NoticeComponent

app/components/dsfr/notice_component.rb

@@ -0,0 +1,12 @@
+# see: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information-importante/
+class Dsfr::NoticeComponent < ApplicationComponent
+  renders_one :title
+
+  def initialize(closable: false)
+    @closable = closable
+  end
+
+  def closable?
+    !!@closable
+  end
+end

app/components/dsfr/notice_component/notice_component.en.yml

@@ -0,0 +1,4 @@
+---
+en:
+  close_notice: Hide message
+

app/components/dsfr/notice_component/notice_component.fr.yml

@@ -0,0 +1,4 @@
+---
+fr:
+  close_notice: Masquer le message
+

app/components/dsfr/notice_component/notice_component.html.haml

@@ -0,0 +1,9 @@
+.fr-notice.fr-notice--info
+  .fr-container
+    .fr-notice__body
+      %p.fr-notice__title
+        = title
+
+      - if closable?
+        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'const notice = this.parentNode.parentNode.parentNode; notice.parentNode.removeChild' }
+          = t('.close_notice')

app/views/root/patron.html.haml

@@ -335,3 +335,14 @@
             = 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"
+
+    %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
+    .my-3
+      = render Dsfr::NoticeComponent.new(closable: true) do |c|
+        - c.with_title do
+          Titre de cette notice
+          = link_to "avec un lien optionnel.", "#"
+          Des marges verticales ont ici été rajoutées.
+
+