govuk_publishing_components 44.5.0 → 44.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a06ccc909d2c5fe51f6a478eedd4876f220cb6849c73a13dfca5b6c29d3090b0
-  data.tar.gz: c51dc4c54091b1b563d34fb932fc4a90ade85a44871e1ebeb7ac3af4d529027b
+  metadata.gz: 82f64e3191afbeb2850a910360ef1d52d51d4c20e3da6af8c876b95e5118f267
+  data.tar.gz: 4611f6340457666face57e7ae9b0625c7b30c8432b881c88db7d474f41191c32
 SHA512:
-  metadata.gz: e80f60c13cf467dac01ed345c743ff988e861241bb119519a5809520a38356b64928b066f12a60e6c7c8aa77de66274bbb3497c0281a6d12ebb1760bb54ebddd
-  data.tar.gz: 4a773e9819642fa42e050ef4a27fc32a23663a0a6187b4728d034439431442f4c85d895b4d3da1b58f346098deb2d91c60cf315932a5aa74acbf96eeca72721e
+  metadata.gz: 6c183fbef201a31897b2394602aa1eff29773cd15ee22730da0e4232300ca9b13ae391c430852d7679a4979132f0ca9f510647526235a58f1b142693b940f593
+  data.tar.gz: f975cd4193f22ccdd364f4a77a4dbf0429ebc2b87d2c273f9e6b973e524f5150a28caa8454b8c2a4512e0079abebd002d2460738c002d3c459eb297d16fd6421

data/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 {

data/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

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -32,9 +32,16 @@ examples:
       inverse: true
       block: |
         <h2>This is a title</h2>
-        <p>This is some body text with <a href="https://example.com">a link</a>.</p>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
     context:
       dark_background: true
+  with_margin_bottom:
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to no margin bottom, as spacing below is normally provided by elements within the component.
+    data:
+      margin_bottom: 9
+      block: |
+        <h2>This is a title</h2>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
   heading_levels:
     data:
       block: |

data/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',

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "44.5.0".freeze
+  VERSION = "44.6.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 44.5.0
+  version: 44.6.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-10-22 00:00:00.000000000 Z
+date: 2024-10-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chartkick