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

Commit

Permalink
updates markup and styling of errors
Browse files Browse the repository at this point in the history 
This commit updates the markup that this gem produces so that its closer
inline with the markup that GOVUK Elements uses

https://govuk-elements.herokuapp.com/form-elements/example-date/

It also fixes an issue with error styling which was broken as a result
of GDS changing the css class name used to style error messages. The
class name changes from `error` to `form-group-error` also each input
field also receives a `form-control-error`

https://github.com/alphagov/govuk_elements/releases/tag/v3.0.0
alphagov/govuk_elements#405

As this commit introduces new markup and potentially breaking changes
for any services relying on the markup for styling or js interaction
may want to upgrade with caution.

In addition to this update if your project is using GOVUK Elements < 3.0
then you will also need to update your GOVUK Elements version
  • Loading branch information
@aliuk2012
aliuk2012 committed May 3, 2018
1 parent aa7ac65 commit 19c8311
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 126 deletions.
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
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 19c8311

Please sign in to comment.