diff --git a/app/assets/stylesheets/govuk-component/_organisation-logo.scss b/app/assets/stylesheets/govuk-component/_organisation-logo.scss index e7e0d8ce5..758d2dd9f 100644 --- a/app/assets/stylesheets/govuk-component/_organisation-logo.scss +++ b/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; diff --git a/app/views/govuk_component/docs/organisation_logo.yml b/app/views/govuk_component/docs/organisation_logo.yml index baeae7fb0..48d06c0da 100644 --- a/app/views/govuk_component/docs/organisation_logo.yml +++ b/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' diff --git a/app/views/govuk_component/organisation_logo.raw.html.erb b/app/views/govuk_component/organisation_logo.raw.html.erb index ec2e911c8..b68606e49 100644 --- a/app/views/govuk_component/organisation_logo.raw.html.erb +++ b/app/views/govuk_component/organisation_logo.raw.html.erb @@ -11,7 +11,15 @@
<% end %> - <%= raw organisation[:name] %> + <% if organisation[:image] %> + alt="<%= organisation[:image][:alt_text] %>"<% end %> + /> + <% else %> + <%= raw organisation[:name] %> + <% end %> <% if organisation[:url] %> diff --git a/test/govuk_component/organisation_logo_test.rb b/test/govuk_component/organisation_logo_test.rb index af1123e6f..6774a0226 100644 --- a/test/govuk_component/organisation_logo_test.rb +++ b/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