Merge pull request #894 from alphagov/custom-org-logos

Add support for custom organisation logos

app/assets/stylesheets/govuk-component/_organisation-logo.scss

@@ -1,9 +1,6 @@
 // Default logo corresponds with the "medium stacked" Whitehall equivalent
 .govuk-organisation-logo {
-  // Variable defined in frontend toolkit
-  // scss-lint:disable NameFormat
-  font-family: $Helvetica-Regular;
-  // scss-lint:enable NameFormat
+  font-family: $helvetica-regular;
   font-size: 13px;
   line-height: (15 / 13);
   font-weight: 400;
@@ -25,6 +22,11 @@
     direction: ltr;
   }
 
+  // Scale images on smaller viewports
+  .logo-image {
+    max-width: 100%;
+  }
+
   .logo-with-crest {
     // Default brand colour
     border-left: 2px solid $black;

app/views/govuk_component/docs/organisation_logo.yml

@@ -3,6 +3,8 @@ description: "Organisation text with crest and branded border colour"
 body: |
   Organisation name must be provided with pre-formatted line breaks.
   These cannot be inferred from the name alone.
+
+  Alternatively a custom organisation logo can be provided as an image.
 fixtures:
   default:
     organisation:
@@ -91,3 +93,20 @@ fixtures:
       url: '/government/organisations/treasury-solicitor-s-department'
       brand: 'attorney-generals-office'
       crest: 'org'
+  land_registry:
+    organisation:
+      name: 'Land Registry'
+      url: '/government/organisations/land-registry'
+      brand: 'department-for-business-innovation-skills'
+      crest: null
+      image:
+        url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/69/LR_logo_265.png'
+        alt_text: 'Land Registry'
+  hm_prison_service:
+    organisation:
+      name: 'HM Prison Service'
+      url: '/government/organisations/hm-prison-service'
+      brand: 'ministry-of-justice'
+      image:
+        url: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/organisation/logo/321/HMPS.jpg'
+        alt_text: 'HM Prison Service'

app/views/govuk_component/organisation_logo.raw.html.erb

@@ -11,7 +11,15 @@
     <div class="<%= logo_container_class %>">
   <% end %>
 
-  <span><%= raw organisation[:name] %></span>
+  <% if organisation[:image] %>
+    <img
+      class="logo-image"
+      src="<%= organisation[:image][:url] %>"
+      <% if organisation[:image][:alt_text] %>alt="<%= organisation[:image][:alt_text] %>"<% end %>
+    />
+  <% else %>
+    <span><%= raw organisation[:name] %></span>
+  <% end %>
 
   <% if organisation[:url] %>
     </a>

test/govuk_component/organisation_logo_test.rb

@@ -31,4 +31,9 @@ def component_name
     render_component(organisation: { name: "Crested", crest: "single-identity" })
     assert_select ".logo-container.logo-with-crest.crest-single-identity"
   end
+
+  test "an image is rendered when specified" do
+    render_component(organisation: { name: "Custom image", image: { url: "url", "alt_text": "alt" } })
+    assert_select ".logo-container img[src='url'][alt='alt']"
+  end
 end