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