Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] **BREAKING** Add component wrapper helper to date input component #4355

Closed
wants to merge 2 commits into from
Closed

[WIP] **BREAKING** Add component wrapper helper to date input component #4355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
612ce50
Add component wrapper helper to date input component
AshGDS Oct 31, 2024
b1c573d
**BREAKING**: Rename uid=502(ashley.burnett) gid=20(staff) groups=20(…
AshGDS Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions app/views/govuk_publishing_components/components/_date_input.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<%
add_gem_component_stylesheet("date-input")

id ||= "input-#{SecureRandom.hex(4)}"
date_input_id ||= "input-#{SecureRandom.hex(4)}"
name ||= nil
items ||= [
{ :name => "day", :width => 2 },
Expand All @@ -16,9 +16,7 @@
describedby ||= nil
has_error ||= error_message || error_items.any?

css_classes = %w(gem-c-date-input govuk-date-input)
form_group_css_classes = %w(govuk-form-group)
form_group_css_classes << "govuk-form-group--error" if has_error
date_css_classes = %w(gem-c-date-input govuk-date-input)

hint_id = "hint-#{SecureRandom.hex(4)}"
error_id = "error-#{SecureRandom.hex(4)}"
Expand All @@ -31,9 +29,14 @@
aria_described_by << describedby if describedby
aria_described_by = aria_described_by.join(" ")
end

component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
component_helper.add_class("govuk-form-group")
component_helper.add_class("govuk-form-group--error") if has_error

%>

<%= content_tag :div, class: form_group_css_classes do %>
<%= tag.div(**component_helper.all_attributes) do %>
<% fieldset_content = capture do %>
<% if hint %>
<%= render "govuk_publishing_components/components/hint", {
Expand All @@ -51,7 +54,7 @@
} %>
<% end %>

<%= tag.div class: css_classes, id: id do %>
<%= tag.div class: date_css_classes, id: date_input_id do %>
<% items.each do |item| %>
<%= tag.div class: "govuk-date-input__item" do %>
<%= render "govuk_publishing_components/components/input", {
Expand Down
6 changes: 6 additions & 0 deletions app/views/govuk_publishing_components/components/docs/date_input.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
name: Form date input
description: Use the date input component to help users enter a memorable date or one they can easily look up.
uses_component_wrapper_helper: true
accessibility_criteria: |
Inputs in the component must:

Expand Down Expand Up @@ -69,3 +70,8 @@ examples:
name: dob-blwyddyn
width: 4
value: 1980
with_custom_date_id_value:
description: |
A custom id can be specified on the element that contains the date inputs. If omitted, a randomised id prefixed with `input-` will be used, for example `input-6c4c5730`.
data:
date_input_id: "hello_world"
Loading