Add square blue share links icon variant

CHANGELOG.md

@@ -20,6 +20,7 @@
 * Update attachment link accessibility guidance ([PR #4278](https://github.com/alphagov/govuk_publishing_components/pull/4278))
 * Global print link class ([PR #4275](https://github.com/alphagov/govuk_publishing_components/pull/4275))
 * Add component wrapper to devolved nations component ([PR #4281](https://github.com/alphagov/govuk_publishing_components/pull/4281))
+* Add square blue icon share links variant ([PR #4292](https://github.com/alphagov/govuk_publishing_components/pull/4292))
 
 ## 43.5.0
 

app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss

@@ -36,6 +36,43 @@ $share-button-height: 30px;
   line-height: $share-button-height;
 }
 
+.gem-c-share-links__list--square-blue {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.gem-c-share-links__list-item--square-blue {
+  padding-left: 0;
+  padding-right: 0;
+  @include govuk-media-query($until: "desktop") {
+    min-width: 180px;
+  }
+}
+
+.gem-c-share-links__link--square-blue:hover .gem-c-share-links__link-icon--square-blue,
+.gem-c-share-links__link--square-blue:focus .gem-c-share-links__link-icon--square-blue {
+  background-color: govuk-colour("black");
+}
+
+.gem-c-share-links__link-icon--square-blue {
+  display: inline-block;
+  background-color: govuk-colour("dark-blue");
+  color: govuk-colour("white");
+  height: $share-button-height;
+  width: $share-button-width;
+  line-height: $share-button-height;
+  margin-right: govuk-spacing(2);
+  padding: govuk-spacing(2);
+  position: relative;
+  vertical-align: middle;
+}
+
+.gem-c-share-links__label--square-blue {
+  vertical-align: middle;
+  @include govuk-font(19, $weight: bold);
+}
+
 .gem-c-share-links__svg {
   width: 100%;
   height: 100%;
@@ -79,6 +116,10 @@ $column-width: 9.5em;
 }
 
 .gem-c-share-links--stacked {
+  .gem-c-share-links__list--square-blue {
+    display: block;
+  }
+
   .gem-c-share-links__list-item {
     display: block;
   }

app/views/govuk_publishing_components/components/_share_links.html.erb

@@ -19,6 +19,24 @@
 
   data_attributes ||= {}
   ((data_attributes[:module] ||= "") << " " << "ga4-link-tracker").strip! if track_as_sharing || track_as_follow
+
+  square_blue_icons ||= false
+
+  ul_classes = "gem-c-share-links__list"
+
+  li_classes = "gem-c-share-links__list-item"
+
+  share_link_classes = "govuk-link govuk-link--no-underline gem-c-share-links__link #{brand_helper.color_class}"
+
+  share_icon_classes = "gem-c-share-links__link-icon"
+
+  if square_blue_icons
+    ul_classes << " gem-c-share-links__list--square-blue"
+    li_classes << " gem-c-share-links__list-item--square-blue"
+    share_link_classes << " gem-c-share-links__link--square-blue"
+    share_icon_classes << " gem-c-share-links__link-icon--square-blue"
+    share_label_classes = "gem-c-share-links__label--square-blue"
+  end
 %>
 <% if links.any? %>
   <%= tag.div(class: classes, data: data_attributes) do %>
@@ -28,7 +46,7 @@
     <p class="govuk-body-s">
       <%= t('components.share_links.all_opens_in_new_tab') %>
     </p>
-    <ul class="gem-c-share-links__list">
+    <ul class="<%= ul_classes %>">
       <% links.each_with_index do |link, index| %>
         <% link_text = capture do %>
           <span class="govuk-visually-hidden">
@@ -43,7 +61,7 @@
             <%= t('components.share_links.opens_in_new_tab') %>
           </span>
         <% end %>
-        <li class="gem-c-share-links__list-item">
+        <li class="<%= li_classes %>">
           <%
             if track_as_sharing
               ga4_link_data = {
@@ -71,8 +89,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: share_link_classes do %>
+            <span class="<%= share_icon_classes %>">
               <% 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"/>
@@ -110,7 +128,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: share_label_classes) do %><%= link_text %><% end %><% end %>
         </li>
       <% end %>
     </ul>

app/views/govuk_publishing_components/components/docs/share_links.yml

@@ -256,3 +256,34 @@ examples:
           icon: 'youtube'
         }
       ]
+  with_square_blue_icons:
+    data:
+      brand: 'prime-ministers-office-10-downing-street'
+      square_blue_icons: 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'
+        }
+      ]

spec/components/share_links_spec.rb

@@ -124,4 +124,22 @@ 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_blue_icons is true" do
+    render_component(links:, square_blue_icons: true)
+    assert_select ".gem-c-share-links__list--square-blue"
+    assert_select ".gem-c-share-links__list-item--square-blue"
+    assert_select ".gem-c-share-links__link--square-blue"
+    assert_select ".gem-c-share-links__link-icon--square-blue"
+    assert_select ".gem-c-share-links__label--square-blue"
+  end
+
+  it "does not add extra classes when square_blue_icons is false" do
+    render_component(links:, square_blue_icons: false)
+    assert_select ".gem-c-share-links__list--square-blue", false
+    assert_select ".gem-c-share-links__list-item--square-blue", false
+    assert_select ".gem-c-share-links__link--square-blue", false
+    assert_select ".gem-c-share-links__link-icon--square-blue", false
+    assert_select ".gem-c-share-links__label--square-blue", false
+  end
 end