diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9f1550546..8ceac4e93c 100644
--- 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
index a9a185793c..30a6056e27 100644
--- 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
index 03fae0ea74..6df77aa264 100644
--- 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
index 3b69eb2a7a..f30c48ae06 100644
--- 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,
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,
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
index c77c529dd4..71ce64dfa7 100644
--- 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