Add documentation page for CfaV2FormBuilder

Adds text input Still needs: - Remaining implemented fields - Styles for form builder methods
codeforamerica · Sep 2, 2020 · a8652d4 · a8652d4
1 parent ef91444
commit a8652d4
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 14 deletions.
diff --git 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/...fa/styleguide/pages/form_builder.html.erb → ...styleguide/pages/form_builder_v1.html.erb b/...fa/styleguide/pages/form_builder.html.erb → ...styleguide/pages/form_builder_v1.html.erb
@@ -8,13 +8,14 @@
     </div>
   </div>
 </section>
-<%= 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
@@ -0,0 +1,17 @@
+<% content_for(:template_name) { "styleguide" } %>
+
+<section class="slab slab--styleguide">
+  <div class="grid">
+    <div class="grid__item">
+      <h1>CfaV2FormBuilder</h1>
+      <p class="text--help">CfAV2FormBuilder is a helper that generates accessible form fields for the styleguide.</p>
+    </div>
+  </div>
+</section>
+
+<%= 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/...s/form_builder/_cfa_checkbox_set.html.erb → ...orm_builder/v1/_cfa_checkbox_set.html.erb b/...s/form_builder/_cfa_checkbox_set.html.erb → ...orm_builder/v1/_cfa_checkbox_set.html.erb
diff --git a/...lder/_cfa_checkbox_set_with_none.html.erb → ...r/v1/_cfa_checkbox_set_with_none.html.erb b/...lder/_cfa_checkbox_set_with_none.html.erb → ...r/v1/_cfa_checkbox_set_with_none.html.erb
diff --git a/...es/form_builder/_cfa_date_select.html.erb → ...form_builder/v1/_cfa_date_select.html.erb b/...es/form_builder/_cfa_date_select.html.erb → ...form_builder/v1/_cfa_date_select.html.erb
diff --git a/...es/form_builder/_cfa_input_field.html.erb → ...form_builder/v1/_cfa_input_field.html.erb b/...es/form_builder/_cfa_input_field.html.erb → ...form_builder/v1/_cfa_input_field.html.erb
diff --git a/...ples/form_builder/_cfa_radio_set.html.erb → ...s/form_builder/v1/_cfa_radio_set.html.erb b/...ples/form_builder/_cfa_radio_set.html.erb → ...s/form_builder/v1/_cfa_radio_set.html.erb
diff --git a/...er/_cfa_radio_set_with_follow_up.html.erb → ...v1/_cfa_radio_set_with_follow_up.html.erb b/...er/_cfa_radio_set_with_follow_up.html.erb → ...v1/_cfa_radio_set_with_follow_up.html.erb
diff --git a/...es/form_builder/_cfa_range_field.html.erb → ...form_builder/v1/_cfa_range_field.html.erb b/...es/form_builder/_cfa_range_field.html.erb → ...form_builder/v1/_cfa_range_field.html.erb
diff --git a/...xamples/form_builder/_cfa_select.html.erb → ...ples/form_builder/v1/_cfa_select.html.erb b/...xamples/form_builder/_cfa_select.html.erb → ...ples/form_builder/v1/_cfa_select.html.erb
diff --git a/...m_builder/_cfa_single_tap_button.html.erb → ...uilder/v1/_cfa_single_tap_button.html.erb b/...m_builder/_cfa_single_tap_button.html.erb → ...uilder/v1/_cfa_single_tap_button.html.erb
diff --git a/...mples/form_builder/_cfa_textarea.html.erb → ...es/form_builder/v1/_cfa_textarea.html.erb b/...mples/form_builder/_cfa_textarea.html.erb → ...es/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
@@ -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 %>
diff --git a/app/views/layouts/_sidebar_nav.html.erb b/app/views/layouts/_sidebar_nav.html.erb
@@ -44,7 +44,8 @@
         <span class="section-header heading-25-small spacing-below-10">For Engineers</span>
         <ul class="sidebar__sub-items spacing-below-10">
           <li class="spacing-below-25"><%= link_to "Emojis", styleguide_emojis_path, class: '' %></li>
-          <li class="spacing-below-25"><%= link_to "Form Builder", styleguide_form_builder_path, class: '' %></li>
+          <li class="spacing-below-25"><%= link_to "Form Builder V1", styleguide_form_builder_v1_path, class: '' %></li>
+          <li class="spacing-below-25"><%= link_to "Form Builder V2", styleguide_form_builder_v2_path, class: '' %></li>
           <!--<li class="spacing-below-25"><%#= link_to "Css Conventions", styleguide_main_path(anchor: "atoms"), class: '' %></li>-->
         </ul>
       </li>

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