Skip to content

Commit

Permalink
Add extra_letter_spacing argument to text inputs
Browse files Browse the repository at this point in the history 
When true, the extra_letter_spacing argument adds the class
'govuk-input--extra-letter-spacing' to the text input element. It is
available for all text fields and defaults to false.

alphagov/govuk-frontend#2230
  • Loading branch information
@peteryates
peteryates committed Apr 23, 2023
1 parent 46b40fd commit f0ba61e
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 22 deletions.
36 changes: 24 additions & 12 deletions lib/govuk_design_system_formbuilder/builder.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ module Builder
#
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -50,8 +52,8 @@ module Builder
# = f.govuk_text_field :callsign,
# label: -> { tag.h3('Call-sign') }
#
def govuk_text_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Text.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_text_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, extra_letter_spacing: false, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Text.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a input of type +tel+
Expand All @@ -63,6 +65,8 @@ def govuk_text_field(attribute_name, hint: {}, label: {}, caption: {}, width: ni
# @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -102,8 +106,8 @@ def govuk_text_field(attribute_name, hint: {}, label: {}, caption: {}, width: ni
# = f.govuk_phone_field :work_number,
# label: -> { tag.h3('Work number') }
#
def govuk_phone_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Phone.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_phone_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, extra_letter_spacing: false, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Phone.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a input of type +email+
Expand All @@ -115,6 +119,8 @@ def govuk_phone_field(attribute_name, hint: {}, label: {}, caption: {}, width: n
# @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -152,8 +158,8 @@ def govuk_phone_field(attribute_name, hint: {}, label: {}, caption: {}, width: n
# = f.govuk_email_field :personal_email,
# label: -> { tag.h3('Personal email address') }
#
def govuk_email_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Email.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_email_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, extra_letter_spacing: false, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Email.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a input of type +password+
Expand All @@ -165,6 +171,8 @@ def govuk_email_field(attribute_name, hint: {}, label: {}, caption: {}, width: n
# @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -201,8 +209,8 @@ def govuk_email_field(attribute_name, hint: {}, label: {}, caption: {}, width: n
# = f.govuk_password_field :passcode,
# label: -> { tag.h3('What is your secret pass code?') }
#
def govuk_password_field(attribute_name, hint: {}, label: {}, width: nil, form_group: {}, caption: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Password.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_password_field(attribute_name, hint: {}, label: {}, width: nil, extra_letter_spacing: false, form_group: {}, caption: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Password.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a input of type +url+
Expand All @@ -214,6 +222,8 @@ def govuk_password_field(attribute_name, hint: {}, label: {}, width: nil, form_g
# @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -251,8 +261,8 @@ def govuk_password_field(attribute_name, hint: {}, label: {}, width: nil, form_g
# = f.govuk_url_field :work_website,
# label: -> { tag.h3("Enter your company's website") }
#
def govuk_url_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::URL.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_url_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, extra_letter_spacing: false, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::URL.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a input of type +number+
Expand All @@ -264,6 +274,8 @@ def govuk_url_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil
# @option hint kwargs [Hash] additional arguments are applied as attributes to the hint
# @param width [Integer,String] sets the width of the input, can be +2+, +3+ +4+, +5+, +10+ or +20+ characters
# or +one-quarter+, +one-third+, +one-half+, +two-thirds+ or +full+ width of the container
# @param extra_letter_spacing [Boolean] when true adds space between characters to increase the readability of
# sequences of letters and numbers. Defaults to +false+.
# @param label [Hash,Proc] configures or sets the associated label content
# @option label text [String] the label text
# @option label size [String] the size of the label font, can be +xl+, +l+, +m+, +s+ or nil
Expand Down Expand Up @@ -304,8 +316,8 @@ def govuk_url_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil
# = f.govuk_url_field :personal_best_over_100m,
# label: -> { tag.h3("How many seconds does it take you to run 100m?") }
#
def govuk_number_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Number.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
def govuk_number_field(attribute_name, hint: {}, label: {}, caption: {}, width: nil, extra_letter_spacing: false, form_group: {}, prefix_text: nil, suffix_text: nil, **kwargs, &block)
Elements::Inputs::Number.new(self, object_name, attribute_name, hint: hint, label: label, caption: caption, width: width, extra_letter_spacing: extra_letter_spacing, form_group: form_group, prefix_text: prefix_text, suffix_text: suffix_text, **kwargs, &block).html
end

# Generates a +textarea+ element with a label, optional hint. Also offers
Expand Down
25 changes: 15 additions & 10 deletions lib/govuk_design_system_formbuilder/traits/input.rb
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
module GOVUKDesignSystemFormBuilder
module Traits
module Input
def initialize(builder, object_name, attribute_name, hint:, label:, caption:, prefix_text:, suffix_text:, width:, form_group:, **kwargs, &block)
def initialize(builder, object_name, attribute_name, hint:, label:, caption:, prefix_text:, suffix_text:, width:, extra_letter_spacing:, form_group:, **kwargs, &block)
super(builder, object_name, attribute_name, &block)

@width = width
@label = label
@caption = caption
@hint = hint
@prefix_text = prefix_text
@suffix_text = suffix_text
@html_attributes = kwargs
@form_group = form_group
@width = width
@label = label
@caption = caption
@hint = hint
@prefix_text = prefix_text
@suffix_text = suffix_text
@html_attributes = kwargs
@form_group = form_group
@extra_letter_spacing = extra_letter_spacing
end

def html
Expand Down Expand Up @@ -53,13 +54,17 @@ def options
end

def classes
[%(#{brand}-input)].push(width_classes, error_classes).compact
[%(#{brand}-input)].push(width_classes, error_classes, extra_letter_spacing_classes).compact
end

def error_classes
%(#{brand}-input--error) if has_errors?
end

def extra_letter_spacing_classes
%(#{brand}-input--extra-letter-spacing) if @extra_letter_spacing
end

def width_classes
return if @width.blank?

Expand Down
8 changes: 8 additions & 0 deletions spec/support/shared/shared_text_field_examples.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,14 @@
end
end

describe 'extra letter spacing' do
subject { builder.send(method, :name, extra_letter_spacing: true) }

specify 'has extra letter spacing class on the input element' do
expect(subject).to have_tag('input', with: { class: 'govuk-input--extra-letter-spacing' })
end
end

describe 'affixes' do
let(:prefix_text) { '£' }
let(:suffix_text) { 'per item' }
Expand Down

0 comments on commit f0ba61e

Please sign in to comment.