From 798e0cd02bdc7bc7210dbbba2e21a33ebaa3b7db 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 | 33 +------------------ .../components/_share_links.html.erb | 13 +++++--- .../components/docs/share_links.yml | 18 ++++++++-- spec/components/share_links_spec.rb | 9 +++-- 5 files changed, 43 insertions(+), 42 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..a373df82ee 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--branded { + .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..ef7589f7d8 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); @@ -56,9 +26,8 @@ // so are written out here for our use .brand--prime-ministers-office-10-downing-street { - .brand__color { - color: govuk-colour("black"); + .brand__color { &: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..bc3a0a03c4 100644 --- a/app/views/govuk_publishing_components/components/_share_links.html.erb +++ b/app/views/govuk_publishing_components/components/_share_links.html.erb @@ -11,14 +11,17 @@ square_icons ||= false brand ||= false - brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand) + + if brand == "prime-ministers-office-10-downing-street" + black_links = true + end 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--branded" if brand + 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 +77,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..e6c6ff11de 100644 --- a/app/views/govuk_publishing_components/components/docs/share_links.yml +++ b/app/views/govuk_publishing_components/components/docs/share_links.yml @@ -81,9 +81,21 @@ examples: } ] 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. + description: Black branding can be added to the component icons as shown. data: - brand: 'attorney-generals-office' + brand: true + links: [ + { + href: 'share', + text: 'Follow the Attorney General on Twitter', + hidden_text: '', + icon: 'twitter' + } + ] + with_black_links: + description: Black branding can be added to the links as shown. + data: + black_links: true links: [ { href: 'share', @@ -208,7 +220,7 @@ examples: with_all_icons: data: stacked: true - brand: 'hm-treasury' + brand: true links: [ { href: '/facebook-share-link', diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb index cb9de4eb3b..42b1d3ec02 100644 --- a/spec/components/share_links_spec.rb +++ b/spec/components/share_links_spec.rb @@ -101,8 +101,13 @@ def links 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" + render_component(links: [links[0]], brand: true) + assert_select ".gem-c-share-links span.gem-c-share-links__link-icon.gem-c-share-links--black" + end + + it "has no branding by default" do + render_component(links: [links[0]]) + assert_select ".gem-c-share-links span.gem-c-share-links__link-icon.gem-c-share-links--black", false end it "arranges in columns" do