From 55c3733e262bebe93f28d94a3e13f9bba733836a Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Wed, 4 Sep 2024 10:49:18 +0100 Subject: [PATCH] Remove brand colour link class and make branded share icons black Share links need to have a black icon with blue links, but the no 10 page needs to retain black links. --- .../components/_share-links.scss | 12 +++++++ .../components/helpers/_brand-colours.scss | 32 ------------------- .../components/_share_links.html.erb | 12 +++---- .../components/docs/share_links.yml | 17 +++++++--- spec/components/share_links_spec.rb | 21 ++++++++++-- 5 files changed, 49 insertions(+), 45 deletions(-) diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss index 5b43a550d6..970b09f9a9 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss @@ -115,3 +115,15 @@ $column-width: 9.5em; @include govuk-font(19, $weight: bold); } } + +.gem-c-share-links--black-icons { + .gem-c-share-links__link-icon { + color: govuk-colour("black"); + } +} + +.gem-c-share-links--black-links { + .gem-c-share-links__label { + color: govuk-colour("black"); + } +} diff --git a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss index 454e6d29aa..75edce9a12 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/helpers/_brand-colours.scss @@ -1,21 +1,6 @@ @mixin organisation-brand-colour { @each $organisation in map-keys($govuk-colours-organisations) { .brand--#{$organisation} { - .brand__color { - color: govuk-organisation-colour($organisation); - - &:link, - &:visited, - &:active { - color: govuk-organisation-colour($organisation); - } - - &:hover, - &:focus { - color: $govuk-focus-text-colour; - } - } - // the & declaration allows border-color to also be applied to the parent // element as required by the heading component, adds 2KB to the CSS &.brand__border-color, @@ -32,21 +17,6 @@ // the "the" prefix was dropped, this is maintained here for backwards // compatibility .brand--the-office-of-the-leader-of-the-house-of-commons { - .brand__color { - color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons"); - - &:link, - &:visited, - &:active { - color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons"); - } - - &:hover, - &:focus { - color: $govuk-focus-text-colour; - } - } - &.brand__border-color, .brand__border-color { border-color: govuk-organisation-colour("office-of-the-leader-of-the-house-of-commons", $contrast-safe: false); @@ -57,8 +27,6 @@ .brand--prime-ministers-office-10-downing-street { .brand__color { - color: govuk-colour("black"); - &:link, &:visited, &:active { diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb index f80c08c130..55514f1b6f 100644 --- a/app/views/govuk_publishing_components/components/_share_links.html.erb +++ b/app/views/govuk_publishing_components/components/_share_links.html.erb @@ -10,15 +10,15 @@ columns ||= false square_icons ||= false - brand ||= false - brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) + black_icons ||= false + black_links ||= false classes = %w(gem-c-share-links govuk-!-display-none-print) classes << "gem-c-share-links--stacked" if stacked classes << "gem-c-share-links--columns" if columns classes << "gem-c-share-links--square-icons" if square_icons - - classes << brand_helper.brand_class + classes << "gem-c-share-links--black-icons" if black_icons + classes << "gem-c-share-links--black-links" if black_links data_attributes ||= {} ((data_attributes[:module] ||= "") << " " << "ga4-link-tracker").strip! if track_as_sharing || track_as_follow @@ -74,7 +74,7 @@ target: "_blank", rel: "noopener noreferrer external", data: data_attributes, - class: "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}" do %> + class: "govuk-link govuk-link--no-underline gem-c-share-links__link" do %> <% if link[:icon] == 'facebook' %> <% end %> - <%= tag.span(class: "gem-c-share-links__label") do %><%= link_text %><% end %><% end %> + <%= tag.span(class: "gem-c-share-links__label #{}") do %><%= link_text %><% end %><% end %> <% end %> diff --git a/app/views/govuk_publishing_components/components/docs/share_links.yml b/app/views/govuk_publishing_components/components/docs/share_links.yml index cc4aa46e52..64c81eb5eb 100644 --- a/app/views/govuk_publishing_components/components/docs/share_links.yml +++ b/app/views/govuk_publishing_components/components/docs/share_links.yml @@ -80,10 +80,20 @@ examples: icon: 'facebook' } ] - with_branding: - description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/component_branding.md) can be added to the component as shown. + with_black_icons: data: - brand: 'attorney-generals-office' + black_icons: true + links: [ + { + href: 'share', + text: 'Follow the Attorney General on Twitter', + hidden_text: '', + icon: 'twitter' + } + ] + with_black_links: + data: + black_links: true links: [ { href: 'share', @@ -208,7 +218,6 @@ examples: with_all_icons: data: stacked: true - brand: 'hm-treasury' links: [ { href: '/facebook-share-link', diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb index cb9de4eb3b..1e69ed52d1 100644 --- a/spec/components/share_links_spec.rb +++ b/spec/components/share_links_spec.rb @@ -100,9 +100,24 @@ def links assert_select '.gem-c-share-links__link[data-ga4-link="{\"event_name\":\"navigation\",\"type\":\"overwritten type 2\",\"index_link\":1,\"index_total\":1,\"section\":\"This is another section\"}"]' end - it "adds branding correctly" do - render_component(links: [links[0]], brand: "attorney-generals-office") - assert_select ".gem-c-share-links.brand--attorney-generals-office .gem-c-share-links__link.brand__color" + it "adds black links correctly" do + render_component(links: [links[0]], black_links: true) + assert_select ".gem-c-share-links.gem-c-share-links--black-links" + end + + it "has no black links by default" do + render_component(links: [links[0]]) + assert_select ".gem-c-share-links.gem-c-share-links--black-links", false + end + + it "adds black icons correctly" do + render_component(links: [links[0]], black_icons: true) + assert_select ".gem-c-share-links.gem-c-share-links--black-links" + end + + it "has no black icons by default" do + render_component(links: [links[0]]) + assert_select ".gem-c-share-links.gem-c-share-links--black-icons", false end it "arranges in columns" do