Merge pull request #4008 from alphagov/no-10-logo

Add No. 10 logo to organisation logo component

CHANGELOG.md

@@ -12,6 +12,7 @@
 * Limit GA4 view_item_list arrays to 15,000 UTF-16 code units ([PR #3994](https://github.com/alphagov/govuk_publishing_components/pull/3994))
 * Add custom_header and a custom_layout options ([PR #4004](https://github.com/alphagov/govuk_publishing_components/pull/4004))
 * Update LUX to 314 ([PR #4007](https://github.com/alphagov/govuk_publishing_components/pull/4007))
+* Add No. 10 logo to organisation logo component ([PR #4008](https://github.com/alphagov/govuk_publishing_components/pull/4008))
 
 ## 38.1.1
 

app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -104,6 +104,10 @@
   @include tall-crest;
 }
 
+.gem-c-organisation-logo__crest--no10 {
+  @include crest("no10_crest", $xpos: 8px);
+}
+
 .gem-c-organisation-logo__crest--single-identity,
 .gem-c-organisation-logo__crest--eo,
 .gem-c-organisation-logo__crest--org {

app/views/govuk_publishing_components/components/docs/organisation_logo.yml

@@ -51,8 +51,8 @@ examples:
   executive_office:
     data:
       organisation:
-        name: Prime Minister's Office, 10 Downing Street
-        url: '/government/organisations/prime-ministers-office-10-downing-street'
+        name: Example
+        url: '/government/organisations/'
         brand: 'executive-office'
         crest: 'eo'
   home_office:
@@ -69,6 +69,13 @@ examples:
         url: '/government/organisations/ministry-of-defence'
         brand: 'ministry-of-defence'
         crest: 'mod'
+  prime_ministers_office_10_downing_street:
+    data:
+      organisation:
+        name: "Prime Minister's Office,<br>10 Downing Street"
+        url: '/government/organisations/prime-ministers-office-10-downing-street'
+        brand: 'prime-ministers-office-10-downing-street'
+        crest: 'no10'
   office_of_the_advocate_general_for_scotland:
     data:
       organisation:

docs/organisation-logos.md

@@ -6,29 +6,15 @@ The [Organisation logo component](https://components.publishing.service.gov.uk/c
 
 This documentation provides details on how to update and add new logos that are part of the Government Identity System.
 
-## Images required
+## Image requirements
 
-The four images below are required for the organisation logo component. The images should be added to `app/assets/images/govuk_publishing_components/crests`. The image format required is a transparent PNG with the whitespace trimmed.
+The image should be added to `app/assets/images/govuk_publishing_components/crests`. The image format required is a transparent PNG, with the whitespace trimmed, unless whitespace has been agreed with a designer.
 
 ### Naming convention
 
 - `$crest` this is usually in the format `"[department_abbreviation]_crest"` all lowercase with underscores, for example `hmrc_crest`
-- `_13px/_18px` refers to the font-size used
-- `_x2` used to provide an @2x image for screens that support it
-
-### Mobile
-
-By default, the logo image used on mobile screen sizes, will have a height of `20px`.
-
-- `#{$crest}_13px.png`
-- `#{$crest}_13px_x2.png`
-
-### Tablet and Desktop
-
-By default, the logo image used from tablet screen sizes, will have a height of `26px`.
-
-- `#{$crest}_18px.png`
-- `#{$crest}_18px_x2.png`
+- `_18px` (deprecated) referred to the font-size used
+- `_x2` (deprecated) was used to provide an @2x image for screens that supported it
 
 ## Add the CSS required for new organisation logos
 
@@ -50,7 +36,7 @@ The value passed to the `crest` mixin here follows the naming convention mention
 
 ### Adjusting the logo height
 
-You can also use the `tall-crest` mixin to set the height of the logo to `25px` on mobile, and `34px` for tablet and desktop screen sizes, this can be used to help avoid the organisation logo appearing too narrow.
+You can also use the `tall-crest` mixin to increase the height of the logo. This can be used to help avoid the organisation logo appearing too narrow.
 
 Example used on the MOD organisation logo: