Merge pull request #4284 from alphagov/org-logo-inverse

Add inverse option for organisation logo
alphagov · Oct 16, 2024 · f40cfab · f40cfab
2 parents 4af06cf + e674adb
commit f40cfab
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Add inverse option for organisation logo ([PR #4284](https://github.com/alphagov/govuk_publishing_components/pull/4284))
+
 ## 44.3.0
 
 * Add variants required for square blue icon share links ([PR #4292](https://github.com/alphagov/govuk_publishing_components/pull/4292))

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss
@@ -82,6 +82,21 @@
   }
 }
 
+.gem-c-organisation-logo--inverse {
+  .gem-c-organisation-logo__container {
+    border-color: govuk-colour("white");
+    @include govuk-link-style-inverse;
+  }
+
+  .gem-c-organisation-logo__crest {
+    filter: brightness(0) invert(1);
+
+    &:focus {
+      filter: none;
+    }
+  }
+}
+
 @mixin crest($crest, $xpos:0, $ypos:0) {
   background: url("govuk_publishing_components/crests/#{$crest}_18px_x2.png") no-repeat $xpos $ypos;
   background-size: auto 32px;

diff --git a/app/views/govuk_publishing_components/components/_organisation_logo.html.erb b/app/views/govuk_publishing_components/components/_organisation_logo.html.erb
@@ -7,6 +7,7 @@
   organisation ||= {}
   heading_level ||= false
   inline ||= false
+  inverse ||= false
 
   # Check if `heading_level` is an appropriate number:
   use_heading = [*1..6].include?(heading_level)
@@ -16,6 +17,7 @@
 
   wrapper_classes = %w[gem-c-organisation-logo]
   wrapper_classes << brand_helper.brand_class
+  wrapper_classes << "gem-c-organisation-logo--inverse" if inverse
 
   container_classes = [
     logo_helper.logo_container_class,

diff --git a/app/views/govuk_publishing_components/components/docs/organisation_logo.yml b/app/views/govuk_publishing_components/components/docs/organisation_logo.yml
@@ -75,7 +75,7 @@ examples:
         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'
+        crest: 'eo'
   office_of_the_advocate_general_for_scotland:
     data:
       organisation:
@@ -182,3 +182,13 @@ examples:
         brand: cabinet-office
         crest: 'single-identity'
       inline: true
+  on_a_dark_background:
+    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: 'eo'
+      inverse: true
+    context:
+      dark_background: true
diff --git a/spec/components/organisation_logo_spec.rb b/spec/components/organisation_logo_spec.rb
@@ -71,4 +71,15 @@ def component_name
     render_component(organisation: { name: "Name", url: "/some-link" }, inline: true)
     assert_select "a.gem-c-organisation-logo__container--inline"
   end
+
+  it "renders on a dark background" do
+    render_component(organisation: { name: "Name", url: "/some-link" }, inverse: true)
+    assert_select ".gem-c-organisation-logo.gem-c-organisation-logo--inverse"
+  end
+
+  it "does not add the --inverse modifier when the inverse option is omitted" do
+    render_component(organisation: { name: "Name", url: "/some-link" })
+    assert_select ".gem-c-organisation-logo.gem-c-organisation-logo"
+    assert_select ".gem-c-organisation-logo.gem-c-organisation-logo--inverse", false
+  end
 end