Skip to content
This repository has been archived by the owner on Dec 16, 2022. It is now read-only.

Commit

Permalink
Merge pull request #31 from ministryofjustice/error-styling
Browse files Browse the repository at this point in the history 
Error styling
  • Loading branch information
@aliuk2012
aliuk2012 authored May 3, 2018
2 parents aa7ac65 + bb1cf4f commit 2ca9776
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 128 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
gov_uk_date_fields (2.2.0)
gov_uk_date_fields (3.0.0)
rails (>= 5.0)

GEM
Expand Down
42 changes: 28 additions & 14 deletions lib/gov_uk_date_fields/form_fields.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,25 +66,30 @@ def generate_old_style_input_fields
def generate_start_fieldset
%Q|
#{generate_fieldset_tag}
#{generate_legend_tag}#{@options[:legend_text]}</legend>
<div class="form-date">
#{generate_legend_tag}
<span class="form-label-bold">#{@options[:legend_text]}</span>
<span class="form-hint" id="#{@hint_id}">#{@form_hint_text}</span>
#{generate_error_message}
<p class="form-hint" id="#{@hint_id}">#{@form_hint_text}</p>
</legend>
<div class="form-date">
|
end

def generate_fieldset_tag
result = "<fieldset"
css_class = "form-group gov_uk_date"
css_class += " form-group-error" if error_for_attr?

result = %Q|
<div class="#{css_class}"|
result += %Q| id="#{@fieldset_id}"| unless @fieldset_id.nil?
css_class = "gov_uk_date"
css_class += " error" if error_for_attr?
result += %Q| class="#{css_class}"|
result += ">"
result += %Q| <fieldset|
result += ">"
result
end

def generate_end_fieldset
"</div></fieldset>"
"</div></fieldset></div>"
end

def generate_legend_tag
Expand Down Expand Up @@ -139,28 +144,37 @@ def generate_end_div
end

def generate_day_input_field(day_value)
%Q|
css_class = "form-control"
css_class += " form-control-error" if error_for_attr?

result = %Q|
<div class="form-group form-group-day">
<label for="#{html_id(:day)}">Day</label>
<input class="form-control" id="#{html_id(:day)}" name="#{html_name(:day)}" type="number" min="0" max="31" aria-describedby="#{@hint_id}" value="#{day_value}">
<input class="#{css_class}" id="#{html_id(:day)}" name="#{html_name(:day)}" type="number" min="0" max="31" aria-describedby="#{@hint_id}" value="#{day_value}">
</div>
|
end

def generate_month_input_field(month_value)
%Q|
css_class = "form-control"
css_class += " form-control-error" if error_for_attr?

result = %Q|
<div class="form-group form-group-month">
<label for="#{html_id(:month)}">Month</label>
<input class="form-control" id="#{html_id(:month)}" name="#{html_name(:month)}" type="number" min="0" max="12" value="#{month_value}">
<input class="#{css_class}" id="#{html_id(:month)}" name="#{html_name(:month)}" type="number" min="0" max="12" value="#{month_value}">
</div>
|
end

def generate_year_input_field(year_value)
%Q|
css_class = "form-control"
css_class += " form-control-error" if error_for_attr?

result = %Q|
<div class="form-group form-group-year">
<label for="#{html_id(:year)}">Year</label>
<input class="form-control" id="#{html_id(:year)}" name="#{html_name(:year)}" type="number" min="0" max="2100" value="#{year_value}">
<input class="#{css_class}" id="#{html_id(:year)}" name="#{html_name(:year)}" type="number" min="0" max="2100" value="#{year_value}">
</div>
|
end
Expand Down
2 changes: 1 addition & 1 deletion lib/gov_uk_date_fields/version.rb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module GovUkDateFields
VERSION = "2.2.0"
VERSION = "3.0.0"
end
246 changes: 134 additions & 112 deletions test/dummy/test/models/form_fields_test.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,149 +103,171 @@ def expected_placeholder_output_without_fieldset

def expected_fieldset_output_with_error_class_and_message
%Q{
<fieldset id="employee_date_joined" class="gov_uk_date error">
<legend>Joining date</legend>
<div class="form-date">
<ul>
<li>
<span class="error-message">Invalid joining date</span>
</li>
<li>
<span class="error-message">Joining date must be in the past</span>
</li>
</ul>
<p class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</p>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
<div class="form-group gov_uk_date form-group-error" id="employee_date_joined">
<fieldset>
<legend>
<span class="form-label-bold">Joining date</span>
<span class="form-hint" id="employee_date_joined-hint">
For example, 31 3 1980
</span>
<ul>
<li><span class="error-message">Invalid joining date</span></li>
<li><span class="error-message">Joining date must be in the past</span></li>
</ul>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control form-control-error" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control form-control-error" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control form-control-error" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

def expected_fieldset_output_with_id
%Q{
<fieldset id="employee_date_joined" class="gov_uk_date">
<legend>Joining date</legend>
<div class="form-date">
<p class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</p>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
<div class="form-group gov_uk_date" id="employee_date_joined">
<fieldset>
<legend>
<span class="form-label-bold">Joining date</span>
<span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

def expected_fieldset_output_with_form_hint
%Q{
<fieldset class="gov_uk_date">
<legend class="govuk_legend_class">Date of birth</legend>
<div class="form-date">
<p class="form-hint" id="dob-hint">In the form: dd mm yyyy</p>
<div class="form-group form-group-day">
<label for="employee_dob_dd">Day</label>
<input class="form-control" id="employee_dob_dd" name="employee[dob_dd]" type="number" min="0" max="31" aria-describedby="dob-hint" value="7">
</div>
<div class="form-group form-group-month">
<label for="employee_dob_mm">Month</label>
<input class="form-control" id="employee_dob_mm" name="employee[dob_mm]" type="number" min="0" max="12" value="12">
</div>
<div class="form-group form-group-year">
<label for="employee_dob_yyyy">Year</label>
<input class="form-control" id="employee_dob_yyyy" name="employee[dob_yyyy]" type="number" min="0" max="2100" value="1963">
<div class="form-group gov_uk_date">
<fieldset>
<legend class="govuk_legend_class">
<span class="form-label-bold">Date of birth</span>
<span class="form-hint" id="dob-hint">In the form: dd mm yyyy</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label for="employee_dob_dd">Day</label>
<input class="form-control" id="employee_dob_dd" name="employee[dob_dd]" type="number" min="0" max="31" aria-describedby="dob-hint" value="7">
</div>
<div class="form-group form-group-month">
<label for="employee_dob_mm">Month</label>
<input class="form-control" id="employee_dob_mm" name="employee[dob_mm]" type="number" min="0" max="12" value="12">
</div>
<div class="form-group form-group-year">
<label for="employee_dob_yyyy">Year</label>
<input class="form-control" id="employee_dob_yyyy" name="employee[dob_yyyy]" type="number" min="0" max="2100" value="1963">
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

def expected_fieldset_output_with_legend_class
%Q{
<fieldset class="gov_uk_date">
<legend class="date-legend-class">Joining date</legend>
<div class="form-date">
<p class="form-hint" id="joined-hint">For example, 31 3 1980</p>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
<div class="form-group gov_uk_date">
<fieldset>
<legend class="date-legend-class">
<span class="form-label-bold">Joining date</span>
<span class="form-hint" id="joined-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

def expected_fieldset_output_with_unstyled_today_button
%Q{
<fieldset id="employee_date_joined" class="gov_uk_date">
<legend>Joining date</legend>
<div class="form-date">
<p class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</p>
<a class="button" role="button" href="#">Today</a>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
<div class="form-group gov_uk_date" id="employee_date_joined">
<fieldset>
<legend>
<span class="form-label-bold">Joining date</span>
<span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<a class="button" role="button" href="#">Today</a>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

def expected_fieldset_output_with_syled_today_button
%Q{
<fieldset id="employee_date_joined" class="gov_uk_date">
<legend>Joining date</legend>
<div class="form-date">
<p class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</p>
<a class="today-button-class" role="button" href="#">Today</a>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
<div class="form-group gov_uk_date" id="employee_date_joined">
<fieldset>
<legend>
<span class="form-label-bold">Joining date</span>
<span class="form-hint" id="employee_date_joined-hint">For example, 31 3 1980</span>
</legend>
<div class="form-date">
<a class="today-button-class" role="button" href="#">Today</a>
<div class="form-group form-group-day">
<label for="employee_joined_dd">Day</label>
<input class="form-control" id="employee_joined_dd" name="employee[joined_dd]" type="number" min="0" max="31" aria-describedby="employee_date_joined-hint" value="1">
</div>
<div class="form-group form-group-month">
<label for="employee_joined_mm">Month</label>
<input class="form-control" id="employee_joined_mm" name="employee[joined_mm]" type="number" min="0" max="12" value="4">
</div>
<div class="form-group form-group-year">
<label for="employee_joined_yyyy">Year</label>
<input class="form-control" id="employee_joined_yyyy" name="employee[joined_yyyy]" type="number" min="0" max="2100" value="2015">
</div>
</div>
</div>
</fieldset>
</fieldset>
</div>
}
end

Expand Down

0 comments on commit 2ca9776

Please sign in to comment.