Remove brand colour link class and make branded share icons black

alphagov · Oct 21, 2024 · e6d295a · e6d295a
1 parent 84a278b
commit e6d295a
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 39 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
@@ -115,3 +115,7 @@ $column-width: 9.5em;
     @include govuk-font(19, $weight: bold);
   }
 }
+
+.gem-c-share-links--black {
+  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
@@ -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
@@ -11,7 +11,6 @@
   square_icons ||= false
 
   brand ||= false
-  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 
   classes = %w(gem-c-share-links govuk-!-display-none-print)
   classes << "gem-c-share-links--stacked" if stacked
@@ -74,7 +73,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 %>
             <span class="gem-c-share-links__link-icon">
               <% if link[:icon] == 'facebook' %>
                 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" width="0" height="0" class="gem-c-share-links__svg">

diff --git 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,9 @@ 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',
@@ -208,7 +208,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
@@ -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