Remove brand colour link class and make branded share links black

alphagov · Sep 24, 2024 · 8f5dde3 · 8f5dde3
1 parent f8d8c29
commit 8f5dde3
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 54 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
@@ -83,3 +83,7 @@ $column-width: 9.5em;
     display: block;
   }
 }
+
+.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,21 +26,6 @@
 // so are written out here for our use
 
 .brand--prime-ministers-office-10-downing-street {
-  .brand__color {
-    color: govuk-colour("black");
-
-    &:link,
-    &:visited,
-    &:active {
-      color: govuk-colour("black");
-    }
-
-    &:hover,
-    &:focus {
-      color: $govuk-focus-text-colour;
-    }
-  }
-
   &.brand__border-color,
   .brand__border-color {
     border-color: govuk-colour("black");

diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -10,12 +10,14 @@
   columns ||= false
 
   brand ||= false
-  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+
+  if brand
+    brand_class = 'gem-c-share-links--black'
+  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 << brand_helper.brand_class
 
   data_attributes ||= {}
   ((data_attributes[:module] ||= "") << " " << "ga4-link-tracker").strip! if track_as_sharing || track_as_follow
@@ -71,8 +73,8 @@
             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 %>
-            <span class="gem-c-share-links__link-icon">
+            class: "govuk-link govuk-link--no-underline gem-c-share-links__link" do %>
+            <span class="gem-c-share-links__link-icon <%= brand_class %>">
               <% 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">
                   <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>

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