Support other design systems

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

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

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

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))

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

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

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',

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

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

lib/govuk_design_system_formbuilder/containers/check_boxes.rb

@@ -1,23 +1,25 @@
 module GOVUKDesignSystemFormBuilder
   module Containers
     class CheckBoxes < Base
+      using PrefixableArray
+
       def initialize(builder, small:, classes: nil)
         @builder = builder
         @small   = small
         @classes = classes
       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
 
     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

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

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

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,18 +13,18 @@ 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
 
     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

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,

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

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