ministryofjustice / govuk_elements_form_builder

Form builder helper methods to develop GOV.UK elements styled applications in Ruby on Rails
https://govuk-elements-rails-guide.herokuapp.com/
MIT License
6 stars 14 forks source link

Extend functionality to allow revealing panels #95

Closed zheileman closed 6 years ago

zheileman commented 7 years ago

This PR will extend the functionality (but still NO breaking changes and totally backward compatible) for radio options and check boxes to reveal/hide linked panels with content inside, following the GOV.UK elements guidelines:

https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content

Example of use for radio options:

In this case, the radio button list includes one option "Do you have a 'help with fees' reference number?" If the user clicks to select that radio button, extra content is revealed including a text field for the user to enter their reference number.

f.radio_button_fieldset :help_paying do |fieldset|
  fieldset.radio_input(HelpPaying::YES_WITH_REF_NUMBER) {
    f.text_field :hwf_reference_number
  }
  fieldset.radio_input(HelpPaying::YES_WITHOUT_REF_NUMBER) {
    t('.hwf_reference_number_help_html')
  }
  fieldset.radio_input(HelpPaying::NOT_NEEDED)
end

The revealed content panel ID is autogenerated, but if you need a specific ID, you can pass it like this:

fieldset.radio_input(HelpPaying::YES_WITH_REF_NUMBER, panel_id: 'foo') {
  f.text_field :hwf_reference_number
}

Example of use for check boxes:

In this case, the user ticks the checkbox for "I don't know the date of birth," and is then shown a text field in which to enter their estimate of the person's age.

f.check_box_fieldset :dob_unknown, [:dob_unknown] do |fieldset|
  fieldset.check_box_input(:dob_unknown) { f.text_field :age_estimate }
end

The revealed content panel does not have to be directly adjacent to the radio button or checkbox that reveals it. As part of commit a1849b0, you can also create a panel elsewhere in the fieldset, which is especially useful when you need radio buttons inside radio button lists:

In this case, the user clicks a radio button to indicate that they have asked for help, and is shown a text field to enter whom they asked, and a pair of yes/no radio buttons to indicate whether or not they received help.

f.radio_button_fieldset :asked_for_help, inline: true do |fieldset|
  fieldset.radio_input(GenericYesNo::YES, panel_id: :asked_for_help_panel)
  fieldset.radio_input(GenericYesNo::NO)
  fieldset.revealing_panel(:asked_for_help_panel) do |panel|
    panel.text_field(:help_party)
    panel.radio_button_fieldset(:help_provided, inline: true, choices: GenericYesNo.values)
    panel.text_area(:help_description, size: '40x4', class: 'form-control-3-4')
  end
end