From a8652d43e5b7ea47c9bd2259b70b1dcd742212de Mon Sep 17 00:00:00 2001 From: Christa Hartsock Date: Tue, 1 Sep 2020 17:16:19 -0700 Subject: [PATCH] Add documentation page for CfaV2FormBuilder Adds text input Still needs: - Remaining implemented fields - Styles for form builder methods --- .../cfa/styleguide/pages_controller.rb | 7 ++++++- ...lder.html.erb => form_builder_v1.html.erb} | 21 ++++++++++--------- .../styleguide/pages/form_builder_v2.html.erb | 17 +++++++++++++++ .../{ => v1}/_cfa_checkbox_set.html.erb | 0 .../_cfa_checkbox_set_with_none.html.erb | 0 .../{ => v1}/_cfa_date_select.html.erb | 0 .../{ => v1}/_cfa_input_field.html.erb | 0 .../{ => v1}/_cfa_radio_set.html.erb | 0 .../_cfa_radio_set_with_follow_up.html.erb | 0 .../{ => v1}/_cfa_range_field.html.erb | 0 .../{ => v1}/_cfa_select.html.erb | 0 .../{ => v1}/_cfa_single_tap_button.html.erb | 0 .../{ => v1}/_cfa_textarea.html.erb | 0 .../form_builder/v2/_cfa_text_input.html.erb | 9 ++++++++ app/views/layouts/_sidebar_nav.html.erb | 3 ++- config/routes.rb | 3 ++- spec/system/pages_spec.rb | 18 +++++++++++++++- 17 files changed, 64 insertions(+), 14 deletions(-) rename app/views/cfa/styleguide/pages/{form_builder.html.erb => form_builder_v1.html.erb} (70%) create mode 100644 app/views/cfa/styleguide/pages/form_builder_v2.html.erb rename app/views/examples/form_builder/{ => v1}/_cfa_checkbox_set.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_checkbox_set_with_none.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_date_select.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_input_field.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_radio_set.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_radio_set_with_follow_up.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_range_field.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_select.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_single_tap_button.html.erb (100%) rename app/views/examples/form_builder/{ => v1}/_cfa_textarea.html.erb (100%) create mode 100644 app/views/examples/form_builder/v2/_cfa_text_input.html.erb diff --git a/app/controllers/cfa/styleguide/pages_controller.rb b/app/controllers/cfa/styleguide/pages_controller.rb index 14560b14..5d739718 100644 --- a/app/controllers/cfa/styleguide/pages_controller.rb +++ b/app/controllers/cfa/styleguide/pages_controller.rb @@ -3,7 +3,12 @@ module Styleguide class PagesController < ApplicationController layout "main" - def form_builder + def form_builder_v1 + @form = Cfa::Styleguide::FormExample.new + @form.valid? + end + + def form_builder_v2 @form = Cfa::Styleguide::FormExample.new @form.valid? end diff --git a/app/views/cfa/styleguide/pages/form_builder.html.erb b/app/views/cfa/styleguide/pages/form_builder_v1.html.erb similarity index 70% rename from app/views/cfa/styleguide/pages/form_builder.html.erb rename to app/views/cfa/styleguide/pages/form_builder_v1.html.erb index b0a550fd..8bfed7fc 100644 --- a/app/views/cfa/styleguide/pages/form_builder.html.erb +++ b/app/views/cfa/styleguide/pages/form_builder_v1.html.erb @@ -8,13 +8,14 @@ -<%= render 'section', title: 'Input Field', example: 'form_builder/cfa_input_field' %> -<%= render 'section', title: 'Range Field', example: 'form_builder/cfa_range_field' %> -<%= render 'section', title: 'Text area', example: 'form_builder/cfa_textarea' %> -<%= render 'section', title: 'Date select', example: 'form_builder/cfa_date_select' %> -<%= render 'section', title: 'Checkbox set', example: 'form_builder/cfa_checkbox_set' %> -<%= render 'section', title: 'Checkbox set with none', example: 'form_builder/cfa_checkbox_set_with_none' %> -<%= render 'section', title: 'Radio set', example: 'form_builder/cfa_radio_set' %> -<%= render 'section', title: 'Radio set with follow up', example: 'form_builder/cfa_radio_set_with_follow_up' %> -<%= render 'section', title: 'Single tap button', example: 'form_builder/cfa_single_tap_button' %> -<%= render 'section', title: 'Select', example: 'form_builder/cfa_select' %> + +<%= render 'section', title: 'Input Field', example: 'form_builder/v1/cfa_input_field' %> +<%= render 'section', title: 'Range Field', example: 'form_builder/v1/cfa_range_field' %> +<%= render 'section', title: 'Text area', example: 'form_builder/v1/cfa_textarea' %> +<%= render 'section', title: 'Date select', example: 'form_builder/v1/cfa_date_select' %> +<%= render 'section', title: 'Checkbox set', example: 'form_builder/v1/cfa_checkbox_set' %> +<%= render 'section', title: 'Checkbox set with none', example: 'form_builder/v1/cfa_checkbox_set_with_none' %> +<%= render 'section', title: 'Radio set', example: 'form_builder/v1/cfa_radio_set' %> +<%= render 'section', title: 'Radio set with follow up', example: 'form_builder/v1/cfa_radio_set_with_follow_up' %> +<%= render 'section', title: 'Single tap button', example: 'form_builder/v1/cfa_single_tap_button' %> +<%= render 'section', title: 'Select', example: 'form_builder/v1/cfa_select' %> diff --git a/app/views/cfa/styleguide/pages/form_builder_v2.html.erb b/app/views/cfa/styleguide/pages/form_builder_v2.html.erb new file mode 100644 index 00000000..ac7e0183 --- /dev/null +++ b/app/views/cfa/styleguide/pages/form_builder_v2.html.erb @@ -0,0 +1,17 @@ +<% content_for(:template_name) { "styleguide" } %> + +
+
+
+

CfaV2FormBuilder

+

CfAV2FormBuilder is a helper that generates accessible form fields for the styleguide.

+
+
+
+ +<%= render 'section', title: 'Text Input', example: 'form_builder/v2/cfa_text_input' %> +<%#= render 'section', title: 'Radio Button', example: 'form_builder/v2/cfa_radio' %> +<%#= render 'section', title: 'Radiogroup', example: 'form_builder/v2/cfa_radiogroup' %> +<%#= render 'section', title: 'Select', example: 'form_builder/v2/cfa_select' %> +<%#= render 'section', title: 'Date Input', example: 'form_builder/v2/cfa_date_input' %> +<%#= render 'section', title: 'Checkbox', example: 'form_builder/v2/cfa_checkbox' %> diff --git a/app/views/examples/form_builder/_cfa_checkbox_set.html.erb b/app/views/examples/form_builder/v1/_cfa_checkbox_set.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_checkbox_set.html.erb rename to app/views/examples/form_builder/v1/_cfa_checkbox_set.html.erb diff --git a/app/views/examples/form_builder/_cfa_checkbox_set_with_none.html.erb b/app/views/examples/form_builder/v1/_cfa_checkbox_set_with_none.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_checkbox_set_with_none.html.erb rename to app/views/examples/form_builder/v1/_cfa_checkbox_set_with_none.html.erb diff --git a/app/views/examples/form_builder/_cfa_date_select.html.erb b/app/views/examples/form_builder/v1/_cfa_date_select.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_date_select.html.erb rename to app/views/examples/form_builder/v1/_cfa_date_select.html.erb diff --git a/app/views/examples/form_builder/_cfa_input_field.html.erb b/app/views/examples/form_builder/v1/_cfa_input_field.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_input_field.html.erb rename to app/views/examples/form_builder/v1/_cfa_input_field.html.erb diff --git a/app/views/examples/form_builder/_cfa_radio_set.html.erb b/app/views/examples/form_builder/v1/_cfa_radio_set.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_radio_set.html.erb rename to app/views/examples/form_builder/v1/_cfa_radio_set.html.erb diff --git a/app/views/examples/form_builder/_cfa_radio_set_with_follow_up.html.erb b/app/views/examples/form_builder/v1/_cfa_radio_set_with_follow_up.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_radio_set_with_follow_up.html.erb rename to app/views/examples/form_builder/v1/_cfa_radio_set_with_follow_up.html.erb diff --git a/app/views/examples/form_builder/_cfa_range_field.html.erb b/app/views/examples/form_builder/v1/_cfa_range_field.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_range_field.html.erb rename to app/views/examples/form_builder/v1/_cfa_range_field.html.erb diff --git a/app/views/examples/form_builder/_cfa_select.html.erb b/app/views/examples/form_builder/v1/_cfa_select.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_select.html.erb rename to app/views/examples/form_builder/v1/_cfa_select.html.erb diff --git a/app/views/examples/form_builder/_cfa_single_tap_button.html.erb b/app/views/examples/form_builder/v1/_cfa_single_tap_button.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_single_tap_button.html.erb rename to app/views/examples/form_builder/v1/_cfa_single_tap_button.html.erb diff --git a/app/views/examples/form_builder/_cfa_textarea.html.erb b/app/views/examples/form_builder/v1/_cfa_textarea.html.erb similarity index 100% rename from app/views/examples/form_builder/_cfa_textarea.html.erb rename to app/views/examples/form_builder/v1/_cfa_textarea.html.erb diff --git a/app/views/examples/form_builder/v2/_cfa_text_input.html.erb b/app/views/examples/form_builder/v2/_cfa_text_input.html.erb new file mode 100644 index 00000000..17204c53 --- /dev/null +++ b/app/views/examples/form_builder/v2/_cfa_text_input.html.erb @@ -0,0 +1,9 @@ +<%= fields_for(:form, @form, builder: Cfa::Styleguide::CfaV2FormBuilder) do |f| %> + <%= f.cfa_text_input(:example_method_name, 'Example input') %> + <%= f.cfa_text_input(:example_method_name, 'Example input (required)', required: true) %> + <%= f.cfa_text_input(:example_method_name, 'Example input with help text', help_text: "You could answer this any way you like.") %> + <%= f.cfa_text_input(:example_method_name, 'Example input with wrapper class', wrapper_classes: ['blue']) %> + <%= f.cfa_text_input(:example_method_name, 'Example input with options', options: { placeholder: 'Enter text here.' }) %> + + <%= f.cfa_text_input(:example_method_with_validation, 'Example input with error') %> +<% end %> \ No newline at end of file diff --git a/app/views/layouts/_sidebar_nav.html.erb b/app/views/layouts/_sidebar_nav.html.erb index 0e3aaa23..0043c0cc 100644 --- a/app/views/layouts/_sidebar_nav.html.erb +++ b/app/views/layouts/_sidebar_nav.html.erb @@ -44,7 +44,8 @@ For Engineers diff --git a/config/routes.rb b/config/routes.rb index d4c27762..69b1f067 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -1,6 +1,7 @@ Cfa::Styleguide::Engine.routes.draw do get "/styleguide" => "pages#index", as: :styleguide_main - get "/styleguide/form-builder" => "pages#form_builder", as: :styleguide_form_builder + get "/styleguide/form-builder/v1" => "pages#form_builder_v1", as: :styleguide_form_builder_v1 + get "/styleguide/form-builder/v2" => "pages#form_builder_v2", as: :styleguide_form_builder_v2 get "/styleguide/examples/*example_path" => "examples#show", as: :styleguide_example get "/styleguide/emojis" => "pages#emojis", as: :styleguide_emojis end diff --git a/spec/system/pages_spec.rb b/spec/system/pages_spec.rb index 7ab0f854..b538bf84 100644 --- a/spec/system/pages_spec.rb +++ b/spec/system/pages_spec.rb @@ -24,7 +24,7 @@ it "can use the CfaFormBuilder" do visit "/cfa/styleguide" - click_link "Form Builder" + click_link "Form Builder V1" expect(page).to have_content("Example input") expect(page).to have_content("Example textarea") @@ -37,4 +37,20 @@ expect(page).to have_content("Example radio set with follow up") expect(page).to have_content("Example select") end + + it "can use the CfaFormV2Builder" do + visit "/cfa/styleguide" + click_link "Form Builder V2" + + expect(page).to have_content("CfAV2FormBuilder") + # expect(page).to have_content("Example textarea") + # expect(page).to have_content("Example range") + # expect(page).to have_content("Example date select") + # + # expect(page).to have_content("Example choice 1") + # expect(page).to have_content("Example choice 2") + # expect(page).to have_content("Example radio set (regular)") + # expect(page).to have_content("Example radio set with follow up") + # expect(page).to have_content("Example select") + end end