From ac3462f9c2659233d39475f9fd75496612425526 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Fri, 18 Oct 2024 11:00:11 +0100
Subject: [PATCH] Add flexbox option to share links component

---
 CHANGELOG.md                                  |  4 ++
 .../components/_share-links.scss              | 31 ++++++++++++---
 .../components/_share_links.html.erb          |  2 +
 .../components/docs/share_links.yml           | 39 ++++++++++++++++++-
 spec/components/share_links_spec.rb           | 10 +++++
 5 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1feff7b592..1b5cd4e8ae 100644
--- 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
+
+* Use flexbox for share links with square icons ([PR #4316](https://github.com/alphagov/govuk_publishing_components/pull/4316))
+
 ## 44.5.0
 
 * Add component wrapper to error alert component ([PR #4287](https://github.com/alphagov/govuk_publishing_components/pull/4287))
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..55e365c17a 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
@@ -84,18 +84,39 @@ $column-width: 9.5em;
   }
 }
 
-.gem-c-share-links--square-icons {
+.gem-c-share-links--flexbox {
+  .gem-c-share-links__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .gem-c-share-links__list-item {
-    padding-left: 60px;
-    padding-top: 12px;
-    margin-bottom: 30px;
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 180px;
+  }
+
+  .gem-c-share-links__link-icon {
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+    margin-right: govuk-spacing(2);
+  }
+
+  .gem-c-share-links__label {
+    vertical-align: middle;
   }
 
+  .gem-c-share-links__link {
+    display: inline-block;
+  }
+}
+
+.gem-c-share-links--square-icons {
   .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 {
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..6ee6569b90 100644
--- a/app/views/govuk_publishing_components/components/_share_links.html.erb
+++ b/app/views/govuk_publishing_components/components/_share_links.html.erb
@@ -8,6 +8,7 @@
   ga4_extra_data ||= {}
   stacked ||= false
   columns ||= false
+  flexbox ||= false
   square_icons ||= false
 
   brand ||= false
@@ -16,6 +17,7 @@
   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--flexbox" if flexbox
   classes << "gem-c-share-links--square-icons" if square_icons
 
   classes << brand_helper.brand_class
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..73f3e84404 100644
--- a/app/views/govuk_publishing_components/components/docs/share_links.yml
+++ b/app/views/govuk_publishing_components/components/docs/share_links.yml
@@ -256,10 +256,45 @@ examples:
           icon: 'youtube'
         }
       ]
-  with_square_icons:
+  with_flexbox:
+    data:
+      flexbox: 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'
+        },
+      ]
+  with_square_icons_and_flexbox:
     data:
       square_icons: true
-      columns: true
+      flexbox: true
       links: [
         {
           href: '/twitter-share-link',
diff --git a/spec/components/share_links_spec.rb b/spec/components/share_links_spec.rb
index cb9de4eb3b..ac47fb4c85 100644
--- a/spec/components/share_links_spec.rb
+++ b/spec/components/share_links_spec.rb
@@ -125,6 +125,16 @@ def 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 flexbox is true" do
+    render_component(links:, flexbox: true)
+    assert_select ".gem-c-share-links--flexbox"
+  end
+
+  it "does not add extra classes when flexbox is false" do
+    render_component(links:, flexbox: false)
+    assert_select ".gem-c-share-links--flexbox", false
+  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"