Merge pull request #9015 from demarches-simplifiees/add_dsfr_components

Ajoute la liste de boutons et le composant toggle au format ds-fr
This commit is contained in:
LeSim 2023-05-09 15:40:42 +00:00 committed by GitHub
commit ef0238c9aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 0 deletions

View file

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

View file

@ -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' }

View file

@ -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

View file

@ -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

View file

@ -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';