Testing branding changes

Gemfile

@@ -45,7 +45,7 @@ gem "activeresource"
 gem "pg", "~> 1.6"
 
 # For GOV.UK branding
-gem "govuk-components", "~> 6"
+gem "govuk-components", "~> 6.4"
 gem "govuk_design_system_formbuilder", "~> 6"
 
 # Our own custom markdown renderer

Gemfile.lock

@@ -250,7 +250,7 @@ GEM
       rake (~> 13.3)
     googleapis-common-protos-types (1.23.0)
       google-protobuf (~> 4.26)
-    govuk-components (6.3.1)
+    govuk-components (6.4.0)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
       pagy (>= 6, < 10)
       view_component (>= 4.9, < 4.13)
@@ -790,7 +790,7 @@ DEPENDENCIES
   dfe-autocomplete!
   factory_bot_rails
   faker
-  govuk-components (~> 6)
+  govuk-components (~> 6.4)
   govuk-forms-markdown!
   govuk_design_system_formbuilder (~> 6)
   govuk_notify_rails
@@ -897,7 +897,7 @@ CHECKSUMS
   google-protobuf (4.35.0-x86_64-linux-gnu) sha256=999226f3b00cd9fddb1b26851d16060212fa1d90c406aaad47e574682b716059
   google-protobuf (4.35.0-x86_64-linux-musl) sha256=be0218520d77b2aee898b363514b03819f6f63f9c041ae0d0d79b4ce5247bffd
   googleapis-common-protos-types (1.23.0) sha256=992e740a523794d9fc5f29a504465d8fc737aaa16c930fe7228e3346860faf0a
-  govuk-components (6.3.1) sha256=141715c9e65e65b1dad0a0476c7d81dac14dad220f5435496713c63e80df87f0
+  govuk-components (6.4.0) sha256=3bb3cdc1b48f2124ceadb86b82c90e07eb12caa761d9bd8b022572a9d60c495f
   govuk-forms-markdown (0.12.0)
   govuk_design_system_formbuilder (6.2.1) sha256=bab0fe460f02f8b4df07097fbfe5441c9b9bf6606dea44a09597a3ef3dc0ac83
   govuk_notify_rails (3.0.0) sha256=e0e1b8b0a7c47f90963034f290fb2982652aa8051a733c25c178680d44f2d7aa

app/components/footer_component/_index.scss

@@ -0,0 +1,3 @@
+.govuk-footer { 
+  border-top-color: var(--custom-footer-border-colour);
+}

app/components/footer_component/view.html.erb

@@ -1,3 +1,4 @@
+<%= custom_branding %>
 <%= govuk_footer(meta_items_title: t("footer.helpful_links"), copyright_text: t("footer.copyright"), meta_items: meta_links) do |footer| %>
   <% footer.with_meta_licence_html do %>
     <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">

app/components/footer_component/view.rb

@@ -23,6 +23,15 @@ def meta_links
       links
     end
 
+    def custom_branding
+      branding = BRANDING_CONFIG[@form.form_slug.to_s.gsub("-", "_")]
+      return unless branding
+
+      content_tag(:style) do
+        ":root { --custom-footer-border-colour: #{branding['border_colour']}; }".html_safe
+      end
+    end
+
   private
 
     def locale

app/components/form_header_component/_index.scss

@@ -16,3 +16,8 @@
   gap: .25em;
   flex-wrap: wrap;
 }
+
+.govuk-generic-header {
+  background: var(--custom-background-colour);
+  border-bottom-color: var(--custom-border-colour);
+}

app/components/form_header_component/view.rb

@@ -11,26 +11,58 @@ def initialize(current_context:, mode:, hosting_environment: HostingEnvironment)
 
     def call
       if @current_context.present?
-        homepage_url = @mode.preview? ? Settings.forms_admin.base_url : GOVUK_BASE_URL
-
-        safe_join([
-          govuk_header(homepage_url:,
-                       classes:) do |header|
-            header.with_product_name(name: product_name_with_tag)
-          end,
-          govuk_service_navigation(
-            service_name: form_name,
-            service_url: form_start_page_url,
-            navigation_items: navigation_items,
-          ),
-        ], "\n")
+        if BRANDING_CONFIG.key?(@current_context.form.form_slug.gsub("-", "_"))
+          branding = BRANDING_CONFIG[@current_context.form.form_slug.gsub("-", "_")]
+
+          safe_join([
+            "<style>
+              :root {
+                --custom-background-colour: #{branding['background_colour']};
+                --custom-border-colour: #{branding['border_colour']};
+              }
+            </style>".html_safe,
+            govuk_generic_header(logo_text: custom_heading(branding), url: branding["organisation_url"]) do |header|
+              header.with_service_navigation(
+                service_name: form_name,
+                service_url: form_start_page_url,
+                navigation_items: navigation_items,
+              )
+            end,
+          ]).html_safe
+        else
+          homepage_url = @mode.preview? ? Settings.forms_admin.base_url : GOVUK_BASE_URL
+
+          safe_join([
+            govuk_header(homepage_url:,
+                         classes:) do |header|
+              header.with_product_name(name: product_name_with_tag)
+            end,
+            govuk_service_navigation(
+              service_name: form_name,
+              service_url: form_start_page_url,
+              navigation_items: navigation_items,
+            ),
+          ], "\n")
+        end
       else
         govuk_header(homepage_url: GOVUK_BASE_URL, classes:) do |header|
           header.with_product_name(name: product_name_with_tag)
         end
       end
     end
 
+    def custom_background_colour
+      BRANDING_CONFIG[@current_context.form.form_slug]["background_colour"]
+    end
+
+    def custom_heading(branding)
+      branding["logo"].html_safe + branding["organisation_name"]
+    end
+
+    def custom_org_url
+      BRANDING_CONFIG[@current_context.form.form_slug]["organisation_url"]
+    end
+
   private
 
     def product_name_with_tag

app/frontend/entrypoints/application.scss

@@ -4,6 +4,7 @@ $govuk-global-styles: true;
 @import "pkg:govuk-frontend";
 @import "pkg:dfe-autocomplete";
 @import "../../components/form_header_component/";
+@import "../../components/footer_component/";
 @import "../../components/language_switcher_component/";
 @import "../../components/question/file_review_component/";
 @import "../styles/app-panel";

config/branding.yml

@@ -0,0 +1,11 @@
+form_with_branding:
+  background_colour: "blue"
+  border_colour: "green"
+  organisation_name: "Branded Forms County Council"
+  organisation_url: "https://www.example.com"
+  logo: | 
+    <svg width="120" height="40" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
+      <rect width="120" height="40" rx="4" fill="#3366FF"/>
+      <text x="60" y="25" font-family="sans-serif" font-size="14" fill="white" text-anchor="middle">BFCC Logo</text>
+    </svg>
+

config/initializers/branding.rb

@@ -0,0 +1 @@
+BRANDING_CONFIG = YAML.load_file(Rails.root.join("config/branding.yml")).freeze

package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "dfe-autocomplete": "github:DFE-Digital/dfe-autocomplete#1d4cc65039e11cc3ba9e7217a719b8128d0e4d53",
-    "govuk-frontend": "^6.2.0"
+    "govuk-frontend": "^6.3.0"
   },
   "standard": {
     "globals": [