Skip to content

Commit

Permalink
Use example partials for form builder (#45)
Browse files Browse the repository at this point in the history 
* Use example component partial as code example and screenshotable component

* Form builder code examples are rendered via partials

Signed-off-by: Whitney Schaefer <[email protected]>
  • Loading branch information
@wschaefer-cfa
wschaefer-cfa authored Jan 3, 2019
1 parent 356a307 commit 1c11f93
Show file tree
Hide file tree
Showing 17 changed files with 135 additions and 176 deletions.
11 changes: 11 additions & 0 deletions app/controllers/cfa/styleguide/examples_controller.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module Cfa
module Styleguide
class ExamplesController < ApplicationController
layout false

def show
@partial_path = "examples/#{params[:example_path]}"
end
end
end
end
17 changes: 8 additions & 9 deletions app/helpers/cfa/styleguide/pages_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,17 @@ def styleguide_example
end
end

def styleguide_example_with_code(code, f = nil)
# This `f` arg is sneaky -- it's the form context for CfAFormBuilder, and ERB will need
# it when we are trying to render form elements (e.g. `f.cfa_input_field`)
content = styleguide_example { ERB.new("<%= #{code} %>").result(binding).html_safe }
content << styleguide_described_code(code)
end
def styleguide_example_with_code(partial_path)
partial = lookup_context.find_template(partial_path, [], true)

filepath = partial.inspect
partial_contents = File.open(filepath, 'r') { |file| file.read }

def styleguide_described_code(code)
content_tag(:div, class: 'pattern__code') do
content = styleguide_example { partial.render(self, {}) }
content << content_tag(:div, class: 'pattern__code') do
content_tag(:pre, class: 'language-ruby language-markup') do
content_tag(:code, class: 'language-ruby') do
code
partial_contents
end
end
end
Expand Down
10 changes: 10 additions & 0 deletions app/views/cfa/styleguide/examples/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= stylesheet_link_tag 'cfa_styleguide_main', media: 'all' %>
<%= javascript_include_tag 'cfa_styleguide_main' %>
</head>
<body>
<%= render @partial_path %>
</body>
13 changes: 13 additions & 0 deletions app/views/cfa/styleguide/pages/_section.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<% title = local_assigns.fetch(:title) %>
<% example = local_assigns.fetch(:example) %>

<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help"><%= title %></p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code("examples/#{example}") %>
</div>
</div>
</section>
163 changes: 16 additions & 147 deletions app/views/cfa/styleguide/pages/form_builder.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,149 +1,18 @@
<% content_for(:template_name) { "styleguide" } %>

<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<section class="slab slab--styleguide">
<div class="grid">
<div class="grid__item">
<h1>CfaFormBuilder</h1>
<p class="text--help">CfAFormBuilder is a helper that generates accessible form fields for the styleguide.</p>
<p class="text--help">They can be used within a form as follows:</p>
<%= styleguide_described_code "\<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %\>" %>
<%= styleguide_described_code " \<%= f.cfa_input_field(:example_input, 'Example input') %\>" %>
<%= styleguide_described_code "\<% end %\>" %>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Input Field</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code "f.cfa_input_field(:example_input, 'Example input')", f %>
<%= styleguide_example_with_code "f.cfa_input_field(:example_input, 'Example input (with prefix and postfix)', prefix: '$', postfix: '/hr', classes: ['form-width--phone'])", f %>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Range Field</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code "f.cfa_range_field(:example_range_upper, :example_range_lower, 'Example range')", f %>
<%= styleguide_example_with_code "f.cfa_range_field(:example_range_upper, :example_range_lower, 'Example range (with help text)', help_text: 'Estimate if you are not sure.')", f %>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Textarea</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code "f.cfa_textarea :example_textarea, 'Example textarea', options: {rows: '2'}", f %>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Date select</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code <<~CODE, f
f.cfa_date_select(
:example_date_select,
'Example date select',
options: {
start_year: Time.now.year,
end_year: Time.now.year - 3,
}
)
CODE
%>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Checkbox set</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code <<~CODE, f
f.cfa_checkbox_set(
:example_method_name,
[
{ method: :example_checkbox_choice1, label: "Example choice 1" },
{ method: :example_checkbox_choice2, label: "Example choice 2" }
]
)
CODE
%>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Checkbox set with none</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code <<~CODE, f
f.cfa_checkbox_set_with_none(
:example_method_name,
[
{ method: :example_checkbox_choice1, label: "Example choice 1" },
{ method: :example_checkbox_choice2, label: "Example choice 2" }
],
none_text: "Neither"
)
CODE
%>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Radio set</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code <<~CODE, f
f.cfa_radio_set(
:example_radio_set,
label_text: "Example radio set (regular)",
legend_class: "sr-only",
collection: [
{ value: :option1, label: "Option 1" },
{ value: :option2, label: "Option 2" },
]
)
CODE
%>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Radio set with follow up</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code <<~CODE, f
f.cfa_radio_set_with_follow_up(
:example_radio_set_with_follow_up,
label_text: "Example radio set (with follow up)",
collection: [
{ value: :yes, label: "Yes" },
{ value: :no, label: "No" },
],
first_follow_up: ->{ f.cfa_input_field :example_input, "Example input 1" },
second_follow_up: ->{ f.cfa_input_field :example_input, "Example input 2" }
)
CODE
%>
</div>
</div>
</section>
<% end %>
<section class="slab slab--styleguide">
<div class="grid">
<div class="grid__item">
<h1>CfaFormBuilder</h1>
<p class="text--help">CfAFormBuilder is a helper that generates accessible form fields for the styleguide.</p>
</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' %>
22 changes: 2 additions & 20 deletions app/views/cfa/styleguide/pages/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,26 +186,8 @@
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Progress indicator</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example { render partial: 'examples/molecules/progress_indicator' } %>
</div>
</div>
</section>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
<p class="text--help">Progress step bar</p>
</div>
<div class="grid__item width-three-fourths">
<%= styleguide_example_with_code("render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5 }") %>
</div>
</div>
</section>
<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator' %>
<%= render 'section', title: 'Progress step bar', example: 'molecules/progress_step_bar' %>
<section class="slab">
<div class="grid">
<div class="grid__item width-one-fourth">
Expand Down
9 changes: 9 additions & 0 deletions app/views/examples/form_builder/_cfa_checkbox_set.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_checkbox_set(
:example_method_name,
[
{ method: :example_checkbox_choice1, label: "Example choice 1" },
{ method: :example_checkbox_choice2, label: "Example choice 2" }
]
) %>
<% end %>
9 changes: 9 additions & 0 deletions app/views/examples/form_builder/_cfa_checkbox_set_with_none.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_checkbox_set_with_none(
:example_method_name,
[
{ method: :example_checkbox_choice1, label: "Example choice 1" },
{ method: :example_checkbox_choice2, label: "Example choice 2" }
],
none_text: "Neither") %>
<% end %>
10 changes: 10 additions & 0 deletions app/views/examples/form_builder/_cfa_date_select.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_date_select(
:example_date_select,
'Example date select',
options: {
start_year: Time.now.year,
end_year: Time.now.year - 3,
}
) %>
<% end %>
4 changes: 4 additions & 0 deletions app/views/examples/form_builder/_cfa_input_field.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_input_field(:example_input, 'Example input') %>
<%= f.cfa_input_field(:example_input, 'Example input (with prefix and postfix)', prefix: '$', postfix: '/hr', classes: ['form-width--phone']) %>
<% end %>
12 changes: 12 additions & 0 deletions app/views/examples/form_builder/_cfa_radio_set.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_radio_set(
:example_radio_set,
label_text: "Example radio set (regular)",
legend_class: "sr-only",
collection: [
{ value: :option1, label: "Option 1" },
{ value: :option2, label: "Option 2" },
]
)
%>
<% end %>
13 changes: 13 additions & 0 deletions app/views/examples/form_builder/_cfa_radio_set_with_follow_up.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_radio_set_with_follow_up(
:example_radio_set_with_follow_up,
label_text: "Example radio set (with follow up)",
collection: [
{ value: :yes, label: "Yes" },
{ value: :no, label: "No" },
],
first_follow_up: ->{ f.cfa_input_field :example_input, "Example input 1" },
second_follow_up: ->{ f.cfa_input_field :example_input, "Example input 2" }
)
%>
<% end %>
4 changes: 4 additions & 0 deletions app/views/examples/form_builder/_cfa_range_field.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_range_field(:example_range_upper, :example_range_lower, 'Example range') %>
<%= f.cfa_range_field(:example_range_upper, :example_range_lower, 'Example range (with help text)', help_text: 'Estimate if you are not sure.') %>
<% end %>
3 changes: 3 additions & 0 deletions app/views/examples/form_builder/_cfa_textarea.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<%= fields_for(:form, Cfa::Styleguide::FormExample.new, builder: Cfa::Styleguide::CfaFormBuilder) do |f| %>
<%= f.cfa_textarea :example_textarea, 'Example textarea', options: {rows: '2'} %>
<% end %>
1 change: 1 addition & 0 deletions app/views/examples/molecules/_progress_step_bar.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<%= render partial: 'components/molecules/progress_step_bar', locals: { current_step: 3, step_count: 5 } %>
1 change: 1 addition & 0 deletions config/routes.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@
get '/styleguide/current' => 'pages#current', as: :styleguide_current
get '/styleguide/custom-docs' => 'pages#custom_docs', as: :styleguide_custom_docs
get '/styleguide/form-builder' => 'pages#form_builder', as: :styleguide_form_builder
get '/styleguide/examples/*example_path' => 'examples#show', as: :styleguide_example
end
9 changes: 9 additions & 0 deletions spec/feature/examples_spec.rb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
require 'spec_helper'

feature 'Examples' do
scenario 'can render out a specific example' do
visit '/cfa/styleguide/examples/molecules/progress_step_bar'

expect(page.status_code).to eq 200
end
end

0 comments on commit 1c11f93

Please sign in to comment.