Add a page on branding to the guide with examples

guide/content/building-blocks/other-design-systems.slim

@@ -0,0 +1,36 @@
+---
+title: Other design systems
+---
+
+h1.govuk-heading-xl Other design systems
+
+p.govuk-body
+  | While this form builder was designed to work with and closely follow the
+    GOV.UK Design System, it can be configured to work with others that follow
+    the same structure and naming conventions.
+
+p.govuk-body
+  | In the GOV.UK Design System every CSS class name and data module is
+    prefixed with <code>govuk</code>.  To override this for compatible systems we
+    can override the <code>brand</code> setting.
+
+/ TODO: try to find out which other design systems are forks of the GOV.UK DS
+  and list them here
+
+p.govuk-body
+  | To reconfigure the builder to work with the #{link_to('NHS Design System', nhs_design_system_link).html_safe}.
+    add the following snippet to the form builder's initialiser:
+
+.code-sample
+  pre
+    code.highlight.language-ruby
+      | GOVUKDesignSystemFormBuilder.configure do |conf|
+          conf.brand = 'nhsuk'
+        end
+
+p.govuk-body
+  | With this setting in place, any application that uses the NHS Design System can use the
+    form builder.
+
+figure.image
+  img src="/images/nhs.png" alt="A NHS-branded form generated with the GOV.UK Design System form builder"

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

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,16 @@ 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}.
+
+p.govuk-body
+  | Other configuration options are covered in the following sections:
+
+ul.govuk-list.govuk-list--bullet
+  li
+    a #{link_to('branding', '/building-blocks/other-design-systems').html_safe}
+  li
+    a #{link_to('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/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