From 0509804d634e02b85b2d3ca9e048ad5fc4311d56 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Mon, 7 Oct 2024 08:18:01 +0100 Subject: [PATCH 1/3] Add inverse option for organisation logo --- .../components/_organisation-logo.scss | 15 +++++++++++++++ .../components/_organisation_logo.html.erb | 2 ++ .../components/docs/organisation_logo.yml | 10 ++++++++++ spec/components/organisation_logo_spec.rb | 5 +++++ 4 files changed, 32 insertions(+) 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..607b564c86 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--eo { + 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..0b4bf4618b 100644 --- a/app/views/govuk_publishing_components/components/docs/organisation_logo.yml +++ b/app/views/govuk_publishing_components/components/docs/organisation_logo.yml @@ -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: 'no10' + inverse: true + context: + dark_background: true diff --git a/spec/components/organisation_logo_spec.rb b/spec/components/organisation_logo_spec.rb index c77c529dd4..0e360bcc2e 100644 --- a/spec/components/organisation_logo_spec.rb +++ b/spec/components/organisation_logo_spec.rb @@ -71,4 +71,9 @@ 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 end From fe98ca02fc4781657161627db761c5b413311985 Mon Sep 17 00:00:00 2001 From: James Chan Date: Wed, 16 Oct 2024 13:57:27 +0100 Subject: [PATCH 2/3] Address PR commits - to be squashed --- .../components/_organisation-logo.scss | 2 +- .../components/docs/organisation_logo.yml | 4 ++-- spec/components/organisation_logo_spec.rb | 6 ++++++ 3 files changed, 9 insertions(+), 3 deletions(-) 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 607b564c86..30a6056e27 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss @@ -88,7 +88,7 @@ @include govuk-link-style-inverse; } - .gem-c-organisation-logo__crest--eo { + .gem-c-organisation-logo__crest { filter: brightness(0) invert(1); &:focus { 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 0b4bf4618b..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: @@ -188,7 +188,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' inverse: true context: dark_background: true diff --git a/spec/components/organisation_logo_spec.rb b/spec/components/organisation_logo_spec.rb index 0e360bcc2e..71ce64dfa7 100644 --- a/spec/components/organisation_logo_spec.rb +++ b/spec/components/organisation_logo_spec.rb @@ -76,4 +76,10 @@ def component_name 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 From e674adbf39cd8059ae96a4c9912041fe612fedc4 Mon Sep 17 00:00:00 2001 From: James Chan Date: Wed, 16 Oct 2024 14:01:13 +0100 Subject: [PATCH 3/3] Update CHANGELOG.md --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) 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))