diff --git a/guide/content/css/govuk-design-system-formbuilder-guide.sass b/guide/content/css/govuk-design-system-formbuilder-guide.sass index e5ce74f8..70c0c8b7 100644 --- a/guide/content/css/govuk-design-system-formbuilder-guide.sass +++ b/guide/content/css/govuk-design-system-formbuilder-guide.sass @@ -55,7 +55,14 @@ $tablet: 768px article > pre @include blue-left-border -figure +figure.image + margin: 0 0 2rem 0 + + img + width: 100% + max-width: 30em + +figure.full-sample @media screen and (max-width: $tablet) @include blue-top-border @media screen and (min-width: $tablet) @@ -152,6 +159,12 @@ p, li, dt, dd, td, th &.govuk-tag-red background-color: $red + &.govuk-tag-govuk + background-color: govuk-colour('black') + +.govuk-summary-list__key > a + text-decoration: none + .important background-color: govuk-tint(govuk_colour('yellow'), 80%) padding: 1.5em 1em diff --git a/guide/content/introduction/configuration.slim b/guide/content/introduction/configuration.slim index 34d0a6d2..989bdf50 100644 --- a/guide/content/introduction/configuration.slim +++ b/guide/content/introduction/configuration.slim @@ -17,6 +17,8 @@ p.govuk-body pre code.highlight.language-ruby | GOVUKDesignSystemFormBuilder.configure do |conf| + conf.brand = 'swanky-new-design-system' # govuk + conf.default_submit_button_text = 'Apply' # Continue conf.default_error_summary_title = 'Uh-oh, spaghettios' # There is a problem conf.default_legend_tag = 'h3' # h1 @@ -32,9 +34,9 @@ p.govuk-body p.govuk-body | For a full list and description of configuration options - #{link_to('check the documentation', config_documentation_link).html_safe} - and for more information on setting up localisations for your application, there's - a #{link_to('dedicated page in this guide', '/building-blocks/localisation').html_safe}. + #{link_to('check the documentation', config_documentation_link).html_safe} and + for an in-depth look at localising the form builder see + #{link_to('the guide page on localisation', '/building-blocks/localisation').html_safe}. p.govuk-body | If there are any settings you'd like to be able to set defaults for but diff --git a/guide/content/introduction/supported-versions.slim b/guide/content/introduction/supported-versions.slim index d9473c7f..355e7ef6 100644 --- a/guide/content/introduction/supported-versions.slim +++ b/guide/content/introduction/supported-versions.slim @@ -9,38 +9,38 @@ p.govuk-body latest stable versions of the GOV.UK Design System, Ruby and Rails. dl.govuk-summary-list - div.govuk-summary-list__row + .govuk-summary-list__row dt.govuk-summary-list__key - | GOV.UK Design System + == link_to('GOV.UK Design System', design_system_link) dl.govuk-summary-list__value ul.govuk-list li - span.govuk-tag + span.govuk-tag.govuk-tag-govuk | Version 3.6.0 - div.govuk-summary-list__row + .govuk-summary-list__row dt.govuk-summary-list__key - | Ruby + == link_to('Ruby', 'https://www.ruby-lang.org') dl.govuk-summary-list__value ul.govuk-list li span.govuk-tag.govuk-tag-red - | 2.5.7 + | 2.7.0 li span.govuk-tag.govuk-tag-red | 2.6.5 li span.govuk-tag.govuk-tag-red - | 2.7.0 + | 2.5.7 - div.govuk-summary-list__row + .govuk-summary-list__row dt.govuk-summary-list__key - | Rails + == link_to('Ruby on Rails', 'https://rubyonrails.org/') dl.govuk-summary-list__value ul.govuk-list li span.govuk-tag.govuk-tag-red - | 5.2.4 + | 6.0.2 li span.govuk-tag.govuk-tag-red - | 6.0.2 + | 5.2.4 diff --git a/guide/layouts/partials/example-fig.slim b/guide/layouts/partials/example-fig.slim index 2dc6ec72..da0c86d3 100644 --- a/guide/layouts/partials/example-fig.slim +++ b/guide/layouts/partials/example-fig.slim @@ -1,7 +1,7 @@ - if defined?(custom_config) - custom_config -figure +figure.full-sample figcaption h3.govuk-heading-m.example-heading id=anchor_id(caption) == link_to caption, "#".concat(anchor_id(caption)) diff --git a/guide/layouts/partials/landing-page/links.slim b/guide/layouts/partials/landing-page/links.slim index 6b1a9740..d239eeb1 100644 --- a/guide/layouts/partials/landing-page/links.slim +++ b/guide/layouts/partials/landing-page/links.slim @@ -18,6 +18,7 @@ section#links.govuk-width-container li== link_to 'Injecting content', '/building-blocks/injecting-content' li== link_to 'Fieldsets', '/building-blocks/fieldsets' li== link_to 'Localisation', '/building-blocks/localisation' + / li== link_to 'Other design systems', '/building-blocks/other-design-systems' .govuk-grid-column-one-third h2.govuk-heading-m Form elements diff --git a/guide/lib/helpers/link_helpers.rb b/guide/lib/helpers/link_helpers.rb index 67dd18de..7af06df0 100644 --- a/guide/lib/helpers/link_helpers.rb +++ b/guide/lib/helpers/link_helpers.rb @@ -85,5 +85,9 @@ def ruby_proc_link def project_new_issue_link 'https://github.com/DFE-Digital/govuk_design_system_formbuilder/issues' end + + def nhs_design_system_link + 'https://service-manual.nhs.uk/design-system' + end end end diff --git a/lib/govuk_design_system_formbuilder.rb b/lib/govuk_design_system_formbuilder.rb index 6cc8e552..988ba522 100644 --- a/lib/govuk_design_system_formbuilder.rb +++ b/lib/govuk_design_system_formbuilder.rb @@ -11,6 +11,9 @@ module GOVUKDesignSystemFormBuilder # Default form builder configuration # + # * +:brand+ sets the value used to prefix all classes, used to allow the + # builder to be branded for alternative (similar) design systems. + # # * +:default_legend_size+ controls the default size of legend text. # Can be either +xl+, +l+, +m+ or +s+. # @@ -38,6 +41,8 @@ module GOVUKDesignSystemFormBuilder # particular context, allowing them to be independently customised. # === DEFAULTS = { + brand: 'govuk', + default_legend_size: 'm', default_legend_tag: 'h1', default_submit_button_text: 'Continue', diff --git a/lib/govuk_design_system_formbuilder/base.rb b/lib/govuk_design_system_formbuilder/base.rb index 21269cba..a8cb2bda 100644 --- a/lib/govuk_design_system_formbuilder/base.rb +++ b/lib/govuk_design_system_formbuilder/base.rb @@ -1,4 +1,12 @@ module GOVUKDesignSystemFormBuilder + module PrefixableArray + refine Array do + def prefix(text, delimiter: '-') + map { |item| text + delimiter + item } + end + end + end + class Base delegate :capture, :content_tag, :safe_join, :tag, :raw, :link_to, to: :@builder delegate :config, to: GOVUKDesignSystemFormBuilder @@ -12,6 +20,10 @@ def initialize(builder, object_name, attribute_name, &block) private + def brand(override = nil) + override || config.brand + end + # returns the id value used for the input # # @note field_id is overridden so that the error summary can link to the diff --git a/lib/govuk_design_system_formbuilder/containers/character_count.rb b/lib/govuk_design_system_formbuilder/containers/character_count.rb index 28b68e2a..ec98c10c 100644 --- a/lib/govuk_design_system_formbuilder/containers/character_count.rb +++ b/lib/govuk_design_system_formbuilder/containers/character_count.rb @@ -16,8 +16,8 @@ def html content_tag( 'div', - class: 'govuk-character-count', - data: { module: 'govuk-character-count' }.merge(**limit, **threshold).compact + class: %(#{brand}-character-count), + data: { module: %(#{brand}-character-count) }.merge(**limit, **threshold).compact ) do yield end diff --git a/lib/govuk_design_system_formbuilder/containers/check_boxes.rb b/lib/govuk_design_system_formbuilder/containers/check_boxes.rb index 52b37a0a..4454bc8a 100644 --- a/lib/govuk_design_system_formbuilder/containers/check_boxes.rb +++ b/lib/govuk_design_system_formbuilder/containers/check_boxes.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Containers class CheckBoxes < Base + using PrefixableArray + def initialize(builder, small:, classes: nil) @builder = builder @small = small @@ -8,7 +10,7 @@ def initialize(builder, small:, classes: nil) end def html - content_tag('div', class: check_boxes_classes, data: { module: 'govuk-checkboxes' }) do + content_tag('div', class: check_boxes_classes, data: { module: %(#{brand}-checkboxes) }) do yield end end @@ -16,8 +18,8 @@ def html private def check_boxes_classes - %w(govuk-checkboxes).tap do |c| - c.push('govuk-checkboxes--small') if @small + %w(checkboxes).prefix(brand).tap do |c| + c.push(%(#{brand}-checkboxes--small)) if @small c.push(@classes) if @classes end end diff --git a/lib/govuk_design_system_formbuilder/containers/fieldset.rb b/lib/govuk_design_system_formbuilder/containers/fieldset.rb index 937b3a57..e2a90288 100644 --- a/lib/govuk_design_system_formbuilder/containers/fieldset.rb +++ b/lib/govuk_design_system_formbuilder/containers/fieldset.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Containers class Fieldset < Base + using PrefixableArray + include Traits::Localisation LEGEND_SIZES = %w(xl l m s).freeze @@ -43,21 +45,20 @@ def legend_text end def fieldset_classes - %w(govuk-fieldset) + %w(fieldset).prefix(brand) end def legend_classes size = @legend.dig(:size) fail "invalid size '#{size}', must be #{LEGEND_SIZES.join(', ')}" unless size.in?(LEGEND_SIZES) - classes = %W(govuk-fieldset__legend govuk-fieldset__legend--#{size}) - classes.push('govuk-visually-hidden') if @legend.dig(:hidden) - - classes + [%(fieldset__legend), %(fieldset__legend--#{size})].prefix(brand).tap do |classes| + classes.push(%(#{brand}-visually-hidden)) if @legend.dig(:hidden) + end end def legend_heading_classes - %(govuk-fieldset__heading) + %w(fieldset__heading).prefix(brand) end end end diff --git a/lib/govuk_design_system_formbuilder/containers/form_group.rb b/lib/govuk_design_system_formbuilder/containers/form_group.rb index 0e631942..c91b31d1 100644 --- a/lib/govuk_design_system_formbuilder/containers/form_group.rb +++ b/lib/govuk_design_system_formbuilder/containers/form_group.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Containers class FormGroup < Base + using PrefixableArray + def initialize(builder, object_name, attribute_name) super(builder, object_name, attribute_name) end @@ -14,8 +16,8 @@ def html private def form_group_classes - %w(govuk-form-group).tap do |classes| - classes.push('govuk-form-group--error') if has_errors? + %w(form-group).prefix(brand).tap do |classes| + classes.push(%(#{brand}-form-group--error)) if has_errors? end end end diff --git a/lib/govuk_design_system_formbuilder/containers/radios.rb b/lib/govuk_design_system_formbuilder/containers/radios.rb index 2a39251a..cd1b9180 100644 --- a/lib/govuk_design_system_formbuilder/containers/radios.rb +++ b/lib/govuk_design_system_formbuilder/containers/radios.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Containers class Radios < Base + using PrefixableArray + include Traits::Hint def initialize(builder, inline:, small:, classes:) @@ -11,7 +13,7 @@ def initialize(builder, inline:, small:, classes:) end def html - content_tag('div', class: radios_classes, data: { module: 'govuk-radios' }) do + content_tag('div', class: radios_classes, data: { module: %(#{brand}-radios) }) do yield end end @@ -19,10 +21,10 @@ def html private def radios_classes - %w(govuk-radios).tap do |c| - c.push('govuk-radios--inline') if @inline - c.push('govuk-radios--small') if @small - c.push(@classes) if @classes + %w(radios).prefix(brand).tap do |c| + c.push(%(#{brand}-radios--inline)) if @inline + c.push(%(#{brand}-radios--small)) if @small + c.push(@classes) if @classes end end end diff --git a/lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb b/lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb index 639a605b..c5203396 100644 --- a/lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb +++ b/lib/govuk_design_system_formbuilder/elements/check_boxes/collection_check_box.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module CheckBoxes class CollectionCheckBox < Base + using PrefixableArray + include Traits::CollectionItem include Traits::Hint @@ -16,12 +18,12 @@ def initialize(builder, object_name, attribute_name, checkbox, hint_method = nil end def html - content_tag('div', class: 'govuk-checkboxes__item') do + content_tag('div', class: %(#{brand}-checkboxes__item)) do safe_join( [ @checkbox.check_box( id: field_id(link_errors: @link_errors), - class: "govuk-checkboxes__input", + class: %(#{brand}-checkboxes__input), aria: { describedby: hint_id } ), label_element.html, diff --git a/lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb b/lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb index a95cf183..40f694f4 100644 --- a/lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb +++ b/lib/govuk_design_system_formbuilder/elements/check_boxes/fieldset_check_box.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module CheckBoxes class FieldsetCheckBox < Base + using PrefixableArray + include Traits::Hint include Traits::Conditional @@ -23,7 +25,7 @@ def initialize(builder, object_name, attribute_name, value, label:, hint_text:, def html safe_join( [ - content_tag('div', class: 'govuk-checkboxes__item') do + content_tag('div', class: %(#{brand}-checkboxes__item)) do safe_join( [ input, @@ -63,11 +65,11 @@ def hint_element end def conditional_classes - %w(govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden) + %w(checkboxes__conditional checkboxes__conditional--hidden).prefix(brand) end def check_box_classes - %w(govuk-checkboxes__input) + %w(checkboxes__input).prefix(brand) end end end diff --git a/lib/govuk_design_system_formbuilder/elements/check_boxes/label.rb b/lib/govuk_design_system_formbuilder/elements/check_boxes/label.rb index dd6c1112..9c59332a 100644 --- a/lib/govuk_design_system_formbuilder/elements/check_boxes/label.rb +++ b/lib/govuk_design_system_formbuilder/elements/check_boxes/label.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module CheckBoxes class Label < Base + using PrefixableArray + include Traits::Localisation def initialize(builder, object_name, attribute_name, checkbox, value:, link_errors: true) @@ -21,7 +23,7 @@ def html private def label_classes - %w(govuk-label govuk-checkboxes__label) + %w(label checkboxes__label).prefix(brand) end end end diff --git a/lib/govuk_design_system_formbuilder/elements/date.rb b/lib/govuk_design_system_formbuilder/elements/date.rb index 65dd03c8..6eeff7ce 100644 --- a/lib/govuk_design_system_formbuilder/elements/date.rb +++ b/lib/govuk_design_system_formbuilder/elements/date.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class Date < Base + using PrefixableArray + include Traits::Error include Traits::Hint include Traits::Supplemental @@ -24,7 +26,7 @@ def html supplemental_content.html, hint_element.html, error_element.html, - content_tag('div', class: 'govuk-date-input') do + content_tag('div', class: %(#{brand}-date-input)) do safe_join([day, month, year]) end ] @@ -56,8 +58,8 @@ def year def date_input_item(segment, width: 2, link_errors: false) value = @builder.object.try(@attribute_name).try(segment) - content_tag('div', class: %w(govuk-date-input__item)) do - content_tag('div', class: %w(govuk-form-group)) do + content_tag('div', class: %w(date-input__item).prefix(brand)) do + content_tag('div', class: %w(form-group).prefix(brand)) do safe_join( [ tag.label( @@ -83,14 +85,14 @@ def date_input_item(segment, width: 2, link_errors: false) end def date_input_classes(width) - %w(govuk-input govuk-date-input__input).tap do |classes| - classes.push("govuk-input--width-#{width}") - classes.push("govuk-input--error") if has_errors? + %w(input date-input__input).prefix(brand).tap do |classes| + classes.push(%(#{brand}-input--width-#{width})) + classes.push(%(#{brand}-input--error)) if has_errors? end end def date_input_label_classes - %w(govuk-label govuk-date-input__label) + %w(label date-input__label).prefix(brand) end # if the field has errors we want the govuk_error_summary to diff --git a/lib/govuk_design_system_formbuilder/elements/error_message.rb b/lib/govuk_design_system_formbuilder/elements/error_message.rb index b86c5763..858300bc 100644 --- a/lib/govuk_design_system_formbuilder/elements/error_message.rb +++ b/lib/govuk_design_system_formbuilder/elements/error_message.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class ErrorMessage < Base + using PrefixableArray + include Traits::Error def initialize(builder, object_name, attribute_name) @@ -10,10 +12,10 @@ def initialize(builder, object_name, attribute_name) def html return nil unless has_errors? - content_tag('span', class: 'govuk-error-message', id: error_id) do + content_tag('span', class: %(#{brand}-error-message), id: error_id) do safe_join( [ - tag.span('Error: ', class: 'govuk-visually-hidden'), + tag.span('Error: ', class: %(#{brand}-visually-hidden)), message ] ) diff --git a/lib/govuk_design_system_formbuilder/elements/error_summary.rb b/lib/govuk_design_system_formbuilder/elements/error_summary.rb index 511fc841..802598f0 100644 --- a/lib/govuk_design_system_formbuilder/elements/error_summary.rb +++ b/lib/govuk_design_system_formbuilder/elements/error_summary.rb @@ -17,7 +17,7 @@ def html [ tag.h2(@title, id: error_summary_title_id, class: summary_class('title')), content_tag('div', class: summary_class('body')) do - content_tag('ul', class: ['govuk-list', summary_class('list')]) do + content_tag('ul', class: [%(#{brand}-list), summary_class('list')]) do safe_join( @builder.object.errors.messages.map do |attribute, messages| error_list_item(attribute, messages.first) @@ -50,9 +50,9 @@ def same_page_link(target) def summary_class(part = nil) if part - 'govuk-error-summary'.concat('__', part) + %(#{brand}-error-summary).concat('__', part) else - 'govuk-error-summary' + %(#{brand}-error-summary) end end @@ -73,7 +73,7 @@ def error_summary_attributes tabindex: -1, role: 'alert', data: { - module: 'govuk-error-summary' + module: %(#{brand}-error-summary) }, aria: { labelledby: error_summary_title_id diff --git a/lib/govuk_design_system_formbuilder/elements/file.rb b/lib/govuk_design_system_formbuilder/elements/file.rb index 1a4c9331..5bfad207 100644 --- a/lib/govuk_design_system_formbuilder/elements/file.rb +++ b/lib/govuk_design_system_formbuilder/elements/file.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class File < Base + using PrefixableArray + include Traits::Error include Traits::Hint include Traits::Label @@ -37,8 +39,8 @@ def html private def file_classes - %w(govuk-file-upload).tap do |c| - c.push('govuk-file-upload--error') if has_errors? + %w(file-upload).prefix(brand).tap do |c| + c.push(%(#{brand}-file-upload--error)) if has_errors? end end end diff --git a/lib/govuk_design_system_formbuilder/elements/hint.rb b/lib/govuk_design_system_formbuilder/elements/hint.rb index d5bf9206..e798f08e 100644 --- a/lib/govuk_design_system_formbuilder/elements/hint.rb +++ b/lib/govuk_design_system_formbuilder/elements/hint.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class Hint < Base + using PrefixableArray + include Traits::Hint include Traits::Localisation @@ -29,15 +31,15 @@ def hint_text(supplied) end def hint_classes - %w(govuk-hint).push(@radio_class, @checkbox_class).compact + %w(hint).prefix(brand).push(@radio_class, @checkbox_class).compact end def radio_class(radio) - radio ? 'govuk-radios__hint' : nil + radio ? %(#{brand}-radios__hint) : nil end def checkbox_class(checkbox) - checkbox ? 'govuk-checkboxes__hint' : nil + checkbox ? %(#{brand}-checkboxes__hint) : nil end end end diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/email.rb b/lib/govuk_design_system_formbuilder/elements/inputs/email.rb index 8d47b10c..dfef212e 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/email.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/email.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class Email < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/number.rb b/lib/govuk_design_system_formbuilder/elements/inputs/number.rb index a4038c75..8becae74 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/number.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/number.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class Number < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/password.rb b/lib/govuk_design_system_formbuilder/elements/inputs/password.rb index e850f50a..684ae893 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/password.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/password.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class Password < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/phone.rb b/lib/govuk_design_system_formbuilder/elements/inputs/phone.rb index 1fe15c4c..e33f52ba 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/phone.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/phone.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class Phone < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/text.rb b/lib/govuk_design_system_formbuilder/elements/inputs/text.rb index 431a712c..b337fb17 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/text.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/text.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class Text < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/inputs/url.rb b/lib/govuk_design_system_formbuilder/elements/inputs/url.rb index 9a1181d1..e4afabd9 100644 --- a/lib/govuk_design_system_formbuilder/elements/inputs/url.rb +++ b/lib/govuk_design_system_formbuilder/elements/inputs/url.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Inputs class URL < Base + using PrefixableArray + include Traits::Input include Traits::Error include Traits::Hint diff --git a/lib/govuk_design_system_formbuilder/elements/label.rb b/lib/govuk_design_system_formbuilder/elements/label.rb index 427c5f17..85df8a31 100644 --- a/lib/govuk_design_system_formbuilder/elements/label.rb +++ b/lib/govuk_design_system_formbuilder/elements/label.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class Label < Base + using PrefixableArray + include Traits::Localisation def initialize(builder, object_name, attribute_name, text: nil, value: nil, size: nil, hidden: false, radio: false, checkbox: false, tag: nil, link_errors: true) @@ -19,7 +21,7 @@ def html return nil if @text.blank? if @tag.present? - content_tag(@tag, class: 'govuk-label-wrapper') { build_label } + content_tag(@tag, class: %(#{brand}-label-wrapper)) { build_label } else build_label end @@ -32,7 +34,7 @@ def build_label @attribute_name, value: @value, for: field_id(link_errors: @link_errors), - class: %w(govuk-label).push(@size_class, @weight_class, @radio_class, @checkbox_class).compact + class: %w(label).prefix(brand).push(@size_class, @weight_class, @radio_class, @checkbox_class).compact ) do @text end @@ -42,26 +44,26 @@ def label_text(option_text, hidden) text = [option_text, localised_text(:label), @attribute_name.capitalize].compact.first.to_s if hidden - tag.span(text, class: %w(govuk-visually-hidden)) + tag.span(text, class: %w(visually-hidden).prefix(brand)) else text end end def radio_class(radio) - radio ? 'govuk-radios__label' : nil + radio ? %(#{brand}-radios__label) : nil end def checkbox_class(checkbox) - checkbox ? 'govuk-checkboxes__label' : nil + checkbox ? %(#{brand}-checkboxes__label) : nil end def label_size_class(size) case size - when 'xl' then "govuk-label--xl" - when 'l' then "govuk-label--l" - when 'm' then "govuk-label--m" - when 's' then "govuk-label--s" + when 'xl' then %(#{brand}-label--xl) + when 'l' then %(#{brand}-label--l) + when 'm' then %(#{brand}-label--m) + when 's' then %(#{brand}-label--s) when nil then nil else fail "invalid size '#{size}', must be xl, l, m, s or nil" diff --git a/lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb b/lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb index 6aa6d447..3979f799 100644 --- a/lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb +++ b/lib/govuk_design_system_formbuilder/elements/radios/collection_radio_button.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Radios class CollectionRadioButton < Base + using PrefixableArray + include Traits::Hint include Traits::CollectionItem @@ -21,7 +23,7 @@ def initialize(builder, object_name, attribute_name, item, value_method:, text_m end def html - content_tag('div', class: 'govuk-radios__item') do + content_tag('div', class: %(#{brand}-radios__item)) do safe_join( [ @builder.radio_button( @@ -29,7 +31,7 @@ def html @value, id: field_id(link_errors: @link_errors), aria: { describedby: hint_id }, - class: %w(govuk-radios__input) + class: %w(radios__input).prefix(brand) ), label_element.html, hint_element.html diff --git a/lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb b/lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb index 934654fa..7ef08488 100644 --- a/lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb +++ b/lib/govuk_design_system_formbuilder/elements/radios/fieldset_radio_button.rb @@ -2,6 +2,8 @@ module GOVUKDesignSystemFormBuilder module Elements module Radios class FieldsetRadioButton < Base + using PrefixableArray + include Traits::Hint include Traits::Conditional @@ -22,7 +24,7 @@ def initialize(builder, object_name, attribute_name, value, label:, hint_text:, def html safe_join( [ - content_tag('div', class: 'govuk-radios__item') do + content_tag('div', class: %(#{brand}-radios__item)) do safe_join( [ input, @@ -53,12 +55,12 @@ def input id: field_id(link_errors: @link_errors), aria: { describedby: hint_id }, data: { 'aria-controls' => @conditional_id }, - class: %w(govuk-radios__input) + class: %w(radios__input).prefix(brand) ) end def conditional_classes - %w(govuk-radios__conditional govuk-radios__conditional--hidden) + %w(radios__conditional radios__conditional--hidden).prefix(brand) end end end diff --git a/lib/govuk_design_system_formbuilder/elements/select.rb b/lib/govuk_design_system_formbuilder/elements/select.rb index 3db6426c..8738aa54 100644 --- a/lib/govuk_design_system_formbuilder/elements/select.rb +++ b/lib/govuk_design_system_formbuilder/elements/select.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class Select < Base + using PrefixableArray + include Traits::Error include Traits::Label include Traits::Hint @@ -50,8 +52,8 @@ def build_html_options end def select_classes - %w(govuk-select).tap do |classes| - classes.push('govuk-select--error') if has_errors? + %w(select).prefix(brand).tap do |classes| + classes.push(%(#{brand}-select--error)) if has_errors? end end end diff --git a/lib/govuk_design_system_formbuilder/elements/submit.rb b/lib/govuk_design_system_formbuilder/elements/submit.rb index cc1ff47d..d76b9568 100644 --- a/lib/govuk_design_system_formbuilder/elements/submit.rb +++ b/lib/govuk_design_system_formbuilder/elements/submit.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class Submit < Base + using PrefixableArray + def initialize(builder, text, warning:, secondary:, classes:, prevent_double_click:, validate:, &block) fail ArgumentError, 'buttons can be warning or secondary' if warning && secondary @@ -19,7 +21,7 @@ def html [ @builder.submit( @text, - class: %w(govuk-button).push( + class: %w(button).prefix(brand).push( warning_class, secondary_class, @classes, @@ -35,23 +37,22 @@ def html private def warning_class - 'govuk-button--warning' if @warning + %(#{brand}-button--warning) if @warning end def secondary_class - 'govuk-button--secondary' if @secondary + %(#{brand}-button--secondary) if @secondary end def padding_class(content_present) - 'govuk-!-margin-right-1' if content_present + %(#{brand}-!-margin-right-1) if content_present end def extra_args { formnovalidate: !@validate, data: { - module: 'govuk-button', - 'prevent-double-click' => @prevent_double_click + module: %(#{brand}-button), 'prevent-double-click' => @prevent_double_click }.select { |_k, v| v.present? } } end diff --git a/lib/govuk_design_system_formbuilder/elements/text_area.rb b/lib/govuk_design_system_formbuilder/elements/text_area.rb index e9fe6b0f..fc52a7d6 100644 --- a/lib/govuk_design_system_formbuilder/elements/text_area.rb +++ b/lib/govuk_design_system_formbuilder/elements/text_area.rb @@ -1,6 +1,8 @@ module GOVUKDesignSystemFormBuilder module Elements class TextArea < Base + using PrefixableArray + include Traits::Error include Traits::Hint include Traits::Label @@ -48,9 +50,9 @@ def html private def govuk_textarea_classes - %w(govuk-textarea).tap do |classes| - classes.push('govuk-textarea--error') if has_errors? - classes.push('govuk-js-character-count') if limit? + %w(textarea).prefix(brand).tap do |classes| + classes.push(%(#{brand}-textarea--error)) if has_errors? + classes.push(%(#{brand}-js-character-count)) if limit? end end @@ -69,11 +71,15 @@ def limit? def limit_description return nil unless limit? - content_tag('span', id: limit_id, class: %w(govuk-hint govuk-character-count__message), aria: { live: 'polite' }) do + content_tag('span', id: limit_id, class: limit_description_classes, aria: { live: 'polite' }) do "You can enter up to #{limit_quantity} #{limit_type}" end end + def limit_description_classes + %w(hint character-count__message).prefix(brand) + end + def limit_quantity @max_words || @max_chars end diff --git a/lib/govuk_design_system_formbuilder/traits/input.rb b/lib/govuk_design_system_formbuilder/traits/input.rb index 411abf1a..f630cee0 100644 --- a/lib/govuk_design_system_formbuilder/traits/input.rb +++ b/lib/govuk_design_system_formbuilder/traits/input.rb @@ -40,11 +40,11 @@ def html private def input_classes - %w(govuk-input).push(width_classes, error_classes).compact + [%(#{brand}-input)].push(width_classes, error_classes).compact end def error_classes - 'govuk-input--error' if has_errors? + %(#{brand}-input--error) if has_errors? end def width_classes @@ -53,20 +53,20 @@ def width_classes case @width # fixed (character) widths - when 20 then 'govuk-input--width-20' - when 10 then 'govuk-input--width-10' - when 5 then 'govuk-input--width-5' - when 4 then 'govuk-input--width-4' - when 3 then 'govuk-input--width-3' - when 2 then 'govuk-input--width-2' + when 20 then %(#{brand}-input--width-20) + when 10 then %(#{brand}-input--width-10) + when 5 then %(#{brand}-input--width-5) + when 4 then %(#{brand}-input--width-4) + when 3 then %(#{brand}-input--width-3) + when 2 then %(#{brand}-input--width-2) # fluid widths - when 'full' then 'govuk-!-width-full' - when 'three-quarters' then 'govuk-!-width-three-quarters' - when 'two-thirds' then 'govuk-!-width-two-thirds' - when 'one-half' then 'govuk-!-width-one-half' - when 'one-third' then 'govuk-!-width-one-third' - when 'one-quarter' then 'govuk-!-width-one-quarter' + when 'full' then %(#{brand}-!-width-full) + when 'three-quarters' then %(#{brand}-!-width-three-quarters) + when 'two-thirds' then %(#{brand}-!-width-two-thirds) + when 'one-half' then %(#{brand}-!-width-one-half) + when 'one-third' then %(#{brand}-!-width-one-third) + when 'one-quarter' then %(#{brand}-!-width-one-quarter) else fail(ArgumentError, "invalid width '#{@width}'") end diff --git a/lib/govuk_design_system_formbuilder/version.rb b/lib/govuk_design_system_formbuilder/version.rb index ececdaa9..f211bc3a 100644 --- a/lib/govuk_design_system_formbuilder/version.rb +++ b/lib/govuk_design_system_formbuilder/version.rb @@ -1,3 +1,3 @@ module GOVUKDesignSystemFormBuilder - VERSION = '1.1.11'.freeze + VERSION = '1.2.0b3'.freeze end diff --git a/spec/govuk_design_system_formbuilder/builder/check_boxes/check_box_spec.rb b/spec/govuk_design_system_formbuilder/builder/check_boxes/check_box_spec.rb index 8f3e826d..4dd5ee71 100644 --- a/spec/govuk_design_system_formbuilder/builder/check_boxes/check_box_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/check_boxes/check_box_spec.rb @@ -20,6 +20,8 @@ end end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports labels' do let(:label_text) { 'Project X' } # the reason we're specifying the type is that diff --git a/spec/govuk_design_system_formbuilder/builder/check_boxes/collection_spec.rb b/spec/govuk_design_system_formbuilder/builder/check_boxes/collection_spec.rb index 1cded6c3..bba3cafe 100644 --- a/spec/govuk_design_system_formbuilder/builder/check_boxes/collection_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/check_boxes/collection_spec.rb @@ -35,6 +35,8 @@ let(:described_element) { 'fieldset' } end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports setting the legend via localisation' it_behaves_like 'a field that supports setting the hint via localisation' diff --git a/spec/govuk_design_system_formbuilder/builder/check_boxes/fieldset_spec.rb b/spec/govuk_design_system_formbuilder/builder/check_boxes/fieldset_spec.rb index 3c457538..2d854b41 100644 --- a/spec/govuk_design_system_formbuilder/builder/check_boxes/fieldset_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/check_boxes/fieldset_spec.rb @@ -27,6 +27,8 @@ let(:error_identifier) { 'person-projects-error' } end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports setting the hint via localisation' it_behaves_like 'a field that supports setting the legend via localisation' diff --git a/spec/govuk_design_system_formbuilder/builder/date_spec.rb b/spec/govuk_design_system_formbuilder/builder/date_spec.rb index 2c32b56f..88670fa1 100644 --- a/spec/govuk_design_system_formbuilder/builder/date_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/date_spec.rb @@ -61,6 +61,7 @@ it_behaves_like 'a field that supports setting the legend via localisation' it_behaves_like 'a field that supports setting the hint via localisation' + it_behaves_like 'a field that supports custom branding' it_behaves_like 'a field that accepts a plain ruby object' do let(:described_element) { ['input', { count: 3 }] } diff --git a/spec/govuk_design_system_formbuilder/builder/file_spec.rb b/spec/govuk_design_system_formbuilder/builder/file_spec.rb index 5166181f..25fe575c 100644 --- a/spec/govuk_design_system_formbuilder/builder/file_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/file_spec.rb @@ -19,6 +19,7 @@ end it_behaves_like 'a field that supports labels' + it_behaves_like 'a field that supports custom branding' it_behaves_like 'a field that accepts arbitrary blocks of HTML' do let(:described_element) { 'input' } diff --git a/spec/govuk_design_system_formbuilder/builder/radios/collection_spec.rb b/spec/govuk_design_system_formbuilder/builder/radios/collection_spec.rb index a1abd3c2..d9caeaec 100644 --- a/spec/govuk_design_system_formbuilder/builder/radios/collection_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/radios/collection_spec.rb @@ -23,6 +23,8 @@ end end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports a fieldset with legend' do let(:legend_text) { 'Pick your favourite colour' } end diff --git a/spec/govuk_design_system_formbuilder/builder/radios/fieldset_spec.rb b/spec/govuk_design_system_formbuilder/builder/radios/fieldset_spec.rb index 1bf20fdb..fc91c67e 100644 --- a/spec/govuk_design_system_formbuilder/builder/radios/fieldset_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/radios/fieldset_spec.rb @@ -29,6 +29,8 @@ let(:error_identifier) { 'person-favourite-colour-error' } end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports setting the hint via localisation' it_behaves_like 'a field that supports setting the legend via localisation' diff --git a/spec/govuk_design_system_formbuilder/builder/radios/radio_button_spec.rb b/spec/govuk_design_system_formbuilder/builder/radios/radio_button_spec.rb index 5d5c90a6..a6b86998 100644 --- a/spec/govuk_design_system_formbuilder/builder/radios/radio_button_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/radios/radio_button_spec.rb @@ -10,6 +10,8 @@ subject { builder.send(*args) } + it_behaves_like 'a field that supports custom branding' + specify 'output should contain a radio item group with a radio input' do expect(subject).to have_tag('div', with: { class: 'govuk-radios__item' }) do |ri| expect(ri).to have_tag('input', with: { type: 'radio', value: value }) diff --git a/spec/govuk_design_system_formbuilder/builder/select_spec.rb b/spec/govuk_design_system_formbuilder/builder/select_spec.rb index 178e4d73..259fdd37 100644 --- a/spec/govuk_design_system_formbuilder/builder/select_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/select_spec.rb @@ -16,6 +16,7 @@ it_behaves_like 'a field that supports labels' it_behaves_like 'a field that supports hints' + it_behaves_like 'a field that supports custom branding' it_behaves_like 'a field that supports errors' do let(:error_message) { /Choose a favourite colour/ } diff --git a/spec/govuk_design_system_formbuilder/builder/submit_spec.rb b/spec/govuk_design_system_formbuilder/builder/submit_spec.rb index c4506ad6..cfa575dc 100644 --- a/spec/govuk_design_system_formbuilder/builder/submit_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/submit_spec.rb @@ -7,6 +7,8 @@ let(:args) { [method] } subject { builder.send(method, text) } + it_behaves_like 'a field that supports custom branding' + specify 'output should be a submit input' do expect(subject).to have_tag('input', with: { type: 'submit' }) end diff --git a/spec/govuk_design_system_formbuilder/builder/text_area_spec.rb b/spec/govuk_design_system_formbuilder/builder/text_area_spec.rb index 71c21ed6..f4ce2600 100644 --- a/spec/govuk_design_system_formbuilder/builder/text_area_spec.rb +++ b/spec/govuk_design_system_formbuilder/builder/text_area_spec.rb @@ -46,6 +46,8 @@ let(:aria_described_by_target) { 'textarea' } end + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that supports errors' do let(:object) { Person.new(cv: 'a' * 50) } # max length is 30 let(:aria_described_by_target) { 'textarea' } diff --git a/spec/support/shared/shared_supports_branding_examples.rb b/spec/support/shared/shared_supports_branding_examples.rb new file mode 100644 index 00000000..bb678f85 --- /dev/null +++ b/spec/support/shared/shared_supports_branding_examples.rb @@ -0,0 +1,20 @@ +shared_examples 'a field that supports custom branding' do + let(:default_brand) { 'govuk' } + let(:custom_brand) { 'globex-corp' } + + before do + GOVUKDesignSystemFormBuilder.configure do |conf| + conf.brand = custom_brand + end + end + + after { GOVUKDesignSystemFormBuilder.reset! } + + specify 'should contain the custom branding' do + expect(subject).to match(Regexp.new(custom_brand)) + end + + specify 'should not contain any default branding' do + expect(subject).not_to match(Regexp.new(default_brand)) + end +end diff --git a/spec/support/shared/shared_text_field_examples.rb b/spec/support/shared/shared_text_field_examples.rb index 320b6dff..da664a3e 100644 --- a/spec/support/shared/shared_text_field_examples.rb +++ b/spec/support/shared/shared_text_field_examples.rb @@ -25,6 +25,8 @@ it_behaves_like 'a field that supports hints' + it_behaves_like 'a field that supports custom branding' + it_behaves_like 'a field that accepts arbitrary blocks of HTML' do let(:described_element) { 'input' } end