Merge pull request #9015 from demarches-simplifiees/add_dsfr_components

Ajoute la liste de boutons et le composant toggle au format ds-fr

app/components/dsfr/radio_button_list_component.rb

@@ -0,0 +1,7 @@
+class Dsfr::RadioButtonListComponent < ApplicationComponent
+  def initialize(form:, target:, buttons:)
+    @form = form
+    @target = target
+    @buttons = buttons
+  end
+end

app/components/dsfr/radio_button_list_component/radio_button_list_component.html.haml

@@ -0,0 +1,13 @@
+%fieldset.fr-fieldset{ 'aria-labelledby': 'radio-hint-element-legend radio-hint-element-messages' }
+  %legend.fr-fieldset__legend--regular.fr-fieldset__legend
+    = content
+
+  - @buttons.map { _1.values_at(:label, :value, :hint) }.each do |label, value, hint|
+    .fr-fieldset__element
+      .fr-radio-group
+        = @form.radio_button @target, value
+        = @form.label @target, value: value, class: 'fr-label' do
+          - capture do
+            = label
+            %span.fr-hint-text= hint
+    .fr-messages-group{ 'aria-live': 'assertive' }

app/components/dsfr/toggle_component.rb

@@ -0,0 +1,9 @@
+class Dsfr::ToggleComponent < ApplicationComponent
+  def initialize(form:, target:, title:, hint:, disabled:)
+    @form = form
+    @target = target
+    @title = title
+    @hint = hint
+    @disabled = disabled
+  end
+end

app/components/dsfr/toggle_component/toggle_component.html.haml

@@ -0,0 +1,7 @@
+.fr-toggle.fr-toggle--border-bottom.fr-toggle--label-left
+  = @form.check_box @target, class: 'fr-toggle__input', disabled: @disabled
+  = @form.label @target,
+    @title,
+    class: 'fr-toggle__label',
+    data: { 'fr-checked-label': 'Activé', 'fr-unchecked-label': 'Désactivé' }
+  %p.fr-hint-text= @hint

app/javascript/entrypoints/main.css

@@ -35,3 +35,4 @@
 @import '@gouvfr/dsfr/dist/component/pagination/pagination.css';
 @import '@gouvfr/dsfr/dist/component/skiplink/skiplink.css';
 @import '@gouvfr/dsfr/dist/component/password/password.css';
+@import '@gouvfr/dsfr/dist/component/accordion/accordion.css';