Merge pull request #4292 from alphagov/social-links-tweaks

Add variants required for square blue icon share links
alphagov · Oct 11, 2024 · 51476f5 · 51476f5
2 parents 6274467 + 3e63ea4
commit 51476f5
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 1 deletion.
diff --git 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 variants required for square blue icon share links ([PR #4292](https://github.com/alphagov/govuk_publishing_components/pull/4292))
+
 ## 44.2.0
 
 * Upgrade to version 5.7.0 of govuk-frontend ([PR #4298](https://github.com/alphagov/govuk_publishing_components/pull/4298))

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,35 @@ $column-width: 9.5em;
     display: block;
   }
 }
+
+.gem-c-share-links--square-icons {
+  .gem-c-share-links__list-item {
+    padding-left: 60px;
+    padding-top: 12px;
+    margin-bottom: 30px;
+  }
+
+  .gem-c-share-links__link-icon {
+    background-color: govuk-colour("dark-blue");
+    color: govuk-colour("white");
+    padding: govuk-spacing(2);
+    margin-right: govuk-spacing(2);
+  }
+
+  .gem-c-share-links__link:hover {
+    .gem-c-share-links__link-icon {
+      background-color: govuk-colour("black");
+    }
+  }
+
+  .gem-c-share-links__link:focus {
+    .gem-c-share-links__link-icon {
+      background-color: govuk-colour("black");
+    }
+  }
+
+  .gem-c-share-links__label {
+    color: govuk-colour("black");
+    @include govuk-font(19, $weight: bold);
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_share_links.html.erb b/app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -8,13 +8,16 @@
   ga4_extra_data ||= {}
   stacked ||= false
   columns ||= false
+  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
   classes << "gem-c-share-links--columns" if columns
+  classes << "gem-c-share-links--square-icons" if square_icons
+
   classes << brand_helper.brand_class
 
   data_attributes ||= {}
@@ -110,7 +113,7 @@
                   <path fill="currentColor" d="M36.92,0A36.92,36.92,0,1,0,73.84,36.92,36.92,36.92,0,0,0,36.92,0ZM56.3,48.27a1.42,1.42,0,0,1-1.42,1.42h-19v9.18l-9.18-9.18H19a1.43,1.43,0,0,1-1.43-1.43V20.52A1.43,1.43,0,0,1,19,19.09H54.88a1.43,1.43,0,0,1,1.42,1.42Z"/>
                 </svg>
               <% end %>
-            </span><%= link_text %><% end %>
+            </span><%= tag.span(class: "gem-c-share-links__label") do %><%= link_text %><% end %><% end %>
         </li>
       <% end %>
     </ul>

diff --git a/app/views/govuk_publishing_components/components/docs/share_links.yml b/app/views/govuk_publishing_components/components/docs/share_links.yml
@@ -256,3 +256,39 @@ examples:
           icon: 'youtube'
         }
       ]
+  with_square_icons:
+    data:
+      square_icons: true
+      columns: true
+      links: [
+        {
+          href: '/twitter-share-link',
+          text: 'Twitter',
+          icon: 'twitter'
+        },
+        {
+          href: '/instagram-share-link',
+          text: 'Instagram',
+          icon: 'instagram'
+        },
+                {
+          href: '/flickr-share-link',
+          text: 'Flickr',
+          icon: 'flickr'
+        },
+        {
+          href: '/facebook-share-link',
+          text: 'Facebook',
+          icon: 'facebook'
+        },
+        {
+          href: '/youtube-share-link',
+          text: 'YouTube',
+          icon: 'youtube'
+        },
+        {
+          href: '/other-share-link',
+          text: 'Anything else that might be included that could have quite a long name',
+          icon: 'other'
+        },
+      ]
diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb
@@ -124,4 +124,14 @@ def links
     render_component(links:)
     assert_select ".gem-c-share-links .gem-c-share-links__link[href=\"/twitter\"] .govuk-visually-hidden", text: "Tweet to"
   end
+
+  it "adds the correct classes when square_icons is true" do
+    render_component(links:, square_icons: true)
+    assert_select ".gem-c-share-links--square-icons"
+  end
+
+  it "does not add extra classes when square_icons is false" do
+    render_component(links:, square_icons: false)
+    assert_select ".gem-c-share-links--square-icons", false
+  end
 end