dsfr(checkbox): ajoute un composant pour les checkboxes DSFR
This commit is contained in:
parent
892d9a2b6b
commit
1e820b124e
2 changed files with 42 additions and 0 deletions
22
app/components/dsfr/checkbox_component.rb
Normal file
22
app/components/dsfr/checkbox_component.rb
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
class Dsfr::CheckboxComponent < ApplicationComponent
|
||||||
|
attr_reader :error
|
||||||
|
|
||||||
|
def initialize(form:, target:, checkboxes:, error: nil)
|
||||||
|
@form = form
|
||||||
|
@target = target
|
||||||
|
@checkboxes = checkboxes
|
||||||
|
@error = error
|
||||||
|
end
|
||||||
|
|
||||||
|
def error?
|
||||||
|
# TODO: mettre correctement le aria-labelled-by avec l'id du div qui contient les erreurs
|
||||||
|
# https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bouton-radio/
|
||||||
|
@error.present?
|
||||||
|
end
|
||||||
|
|
||||||
|
def each_checkboxes
|
||||||
|
@checkboxes.each do |button|
|
||||||
|
yield(*button.values_at(:label, :checked_value, :unchecked_value, :hint), button.except(:label, :checked_value, :unchecked_value, :hint))
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
|
@ -0,0 +1,20 @@
|
||||||
|
%fieldset{ class: class_names("fr-fieldset": true, "fr-fieldset--error": error?), 'aria-labelledby': 'radio-hint-element-legend radio-hint-element-messages', role: error? ? :group : nil }
|
||||||
|
%legend.fr-fieldset__legend--regular.fr-fieldset__legend
|
||||||
|
= content
|
||||||
|
|
||||||
|
- each_checkboxes do |label, checked_value, unchecked_value, hint, button_options|
|
||||||
|
.fr-fieldset__element
|
||||||
|
.fr-checkbox-group
|
||||||
|
= @form.check_box @target, button_options.merge(id: checked_value.to_s.parameterize, multiple: true), checked_value, unchecked_value
|
||||||
|
= @form.label @target, for: checked_value.to_s.parameterize, class: 'fr-label' do
|
||||||
|
- capture do
|
||||||
|
= label
|
||||||
|
|
||||||
|
= button_options[:after_label] if button_options[:after_label]
|
||||||
|
|
||||||
|
%span.fr-hint-text= hint if hint
|
||||||
|
|
||||||
|
.fr-messages-group{ 'aria-live': 'assertive' }
|
||||||
|
- if error?
|
||||||
|
%p.fr-message.fr-message--error= error
|
||||||
|
|
Loading…
Add table
Reference in a new issue