Add flexbox option to share links component

alphagov · Oct 18, 2024 · 7a462bf · 7a462bf
1 parent 17d4719
commit 7a462bf
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 6 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
@@ -84,18 +84,40 @@ $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 {
+    display: inline-block;
+    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
@@ -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
@@ -256,10 +256,45 @@ examples:
           icon: 'youtube'
         }
       ]
+  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:
     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
@@ -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:, square_icons: 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"