govuk_publishing_components 63.0.0 → 63.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90f9e9423db2ea202bab6f85c3e7074c123d71a9905b1736355eca6b0487d0ef
-  data.tar.gz: 512dc157f628a2e58004215a191f9ea2fadc95157e711107a8ab4e2d37da4fac
+  metadata.gz: 6d7be3bd8faf1d55b317bda8101dce15b87de9bc7ef96a090e8394d8f174442f
+  data.tar.gz: 77796278e71f2963c5898e84f587ea9ba08bf599ff24a9a7a785aeda2d3d5226
 SHA512:
-  metadata.gz: afc7f05626ebca0e9ae1f224580c07feff4d0dd44fff9eb25afcd054665246cde4c98270ca73838767ffb6dcf5ba0ec36df04a1f976f36c4d7682e36012f9a53
-  data.tar.gz: 814ab32a098c3f9709579f7c34604927f96668f3aeb615d4e4b0f512d041f3f58a2cea640085d6351e8f91748135de87bce7cac9e35157489d58e8f0a9bc5a30
+  metadata.gz: 61d1ad004cbfbcc2eee95cfc4a17930fcb7d38c7bb20b7cbec01861d0aaf35975af38e08d91216a339a1cee6efb0a628acc658439518eb5225c05acf1182907e
+  data.tar.gz: a2d709fbe8a6a84a7b0773db6f276d4a02595853039a6c0085a85c9536c048f47faf97ef7356ce7294e7f3e563b0f393505792b55c8dddcad59ac92580af535d

data/app/assets/javascripts/govuk_publishing_components/components/add-another.js

@@ -1,3 +1,4 @@
+//= require sortablejs/Sortable.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -27,6 +28,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.createAddAnotherButton()
     this.createRemoveButtons()
     this.removeEmptyFieldset()
+    if (this.module.dataset.sortable === 'true') {
+      this.makeSortable()
+    }
     this.updateFieldsetsAndButtons()
   }
 
@@ -102,12 +106,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     visibleFields.forEach(function (field, index) {
       field.querySelector('legend').textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
 
-      var trackedRemoveButton = field.parentNode.querySelector('.js-add-another__remove-button[data-ga4-event]')
+      var trackedButtons = field.parentNode.querySelectorAll(
+        '.js-add-another__remove-button[data-ga4-event], .gem-c-add-another__move-button[data-ga4-event]'
+      )
 
-      if (trackedRemoveButton) {
-        trackedRemoveButton.dataset.indexSection = this.startIndex + index
-        trackedRemoveButton.dataset.indexSectionCount = this.indexSectionCount || visibleFields.length
-      }
+      trackedButtons.forEach(function (button) {
+        button.dataset.indexSection = this.startIndex + index
+        button.dataset.indexSectionCount = this.indexSectionCount || visibleFields.length
+      }.bind(this))
     }.bind(this))
 
     if (this.module.dataset.emptyFields === 'false') {
@@ -117,6 +123,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       )
     }
 
+    if (this.module.dataset.sortable === 'true') {
+      this.disableTopAndBottomButtons()
+    }
+
     var trackedAddAnotherButton = this.module.querySelector('.js-add-another__add-button[data-ga4-event]')
 
     if (trackedAddAnotherButton) {
@@ -125,15 +135,30 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
+  // Disable the top "Move up" and bottom "Move down" buttons when the list is sortable.
+  AddAnother.prototype.disableTopAndBottomButtons = function () {
+    this.module.querySelectorAll('.gem-c-add-another__move-button').forEach(function (button) {
+      button.removeAttribute('disabled')
+    })
+
+    var topMoveUpButton = this.module.querySelector('.js-add-another__fieldset:first-of-type .gem-c-add-another__move-button[data-action="move-up"]')
+    topMoveUpButton.setAttribute('disabled', true)
+
+    var bottomMoveDownButton = this.module.querySelector('.js-add-another__fieldset:last-of-type .gem-c-add-another__move-button[data-action="move-down"]')
+    bottomMoveDownButton.setAttribute('disabled', true)
+  }
+
   AddAnother.prototype.addNewFieldset = function (event) {
-    var button = event.target
     var newFieldsetTemplate = this.module.querySelector('.js-add-another__empty-template')
     var newFieldset = newFieldsetTemplate.content.cloneNode(true).children[0]
     newFieldset.classList.add('js-add-another__fieldset')
     this.createRemoveButton(newFieldset, this.removeNewFieldset.bind(this))
-    button.before(newFieldset)
+    newFieldsetTemplate.before(newFieldset)
 
-    this.incrementAttributes(newFieldsetTemplate.content)
+    this.updateAttributes(newFieldsetTemplate.content)
+    if (this.module.dataset.sortable === 'true') {
+      this.makeSortable()
+    }
     this.updateFieldsetsAndButtons()
 
     // Initialise any modules included in new fieldset
@@ -160,7 +185,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   // Set attribute values for id, for and name of supplied fieldset
-  AddAnother.prototype.incrementAttributes = function (fieldset) {
+  AddAnother.prototype.updateAttributes = function (fieldset, newIndex = null) {
     var matcher = /(.*[_[])([0-9]+)([_\]].*?)$/
     fieldset
       .querySelectorAll('label, input, select, textarea')
@@ -169,11 +194,117 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
           var value = element.getAttribute(attribute)
           var matched = matcher.exec(value)
           if (!matched) return
-          var index = parseInt(matched[2], 10) + 1
+          var index = newIndex == null ? (parseInt(matched[2], 10) + 1) : newIndex
           element.setAttribute(attribute, matched[1] + index + matched[3])
         })
       })
   }
 
+  AddAnother.prototype.makeSortable = function () {
+    this.removeMoveButtons()
+    this.addMoveButtons()
+    this.hideOrderInputs()
+    this.sortableList = window.Sortable.create(this.module, {
+      dataIdAttr: 'data-sortable-id',
+      disabled: true
+    })
+  }
+
+  AddAnother.prototype.getOrderInputs = function () {
+    return this.module.querySelectorAll('.js-add-another__fieldset:not([hidden]) .js-add-another__order-input input')
+  }
+
+  AddAnother.prototype.hideOrderInputs = function () {
+    this.getOrderInputs().forEach(function (orderInput) {
+      orderInput.closest('.js-add-another__order-input').hidden = true
+    })
+  }
+
+  AddAnother.prototype.addMoveButtons = function () {
+    var visibleFields = this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])')
+    visibleFields.forEach(function (field, index) {
+      field.dataset.sortableId = 'js-add-another__sortable-' + index + '-fieldset'
+      var wrapper = document.createElement('div')
+      wrapper.className = 'gem-c-add-another__move-button-wrapper'
+      this.addButton(wrapper, 'move-up')
+      this.addButton(wrapper, 'move-down')
+      field.prepend(wrapper)
+    }.bind(this))
+  }
+
+  AddAnother.prototype.addButton = function (wrapper, action) {
+    var button = document.createElement('button')
+    button.className = 'govuk-button gem-c-button--secondary-quiet gem-c-add-another__move-button'
+    button.innerText = action === 'move-up' ? 'Move up' : 'Move down'
+    button.dataset.action = action
+    if (!this.disableGa4) {
+      button.dataset.ga4Event = this.createEventData({ action: action })
+    }
+
+    button.addEventListener('click', this.moveFieldset.bind(this))
+    wrapper.prepend(button)
+  }
+
+  AddAnother.prototype.moveFieldset = function (event) {
+    event.preventDefault()
+
+    var button = event.currentTarget
+    var action = button.dataset.action
+    var fieldset = button.closest('.js-add-another__fieldset')
+
+    var sortableId = fieldset.dataset.sortableId
+
+    var order = this.sortableList.toArray()
+    var index = order.indexOf(sortableId)
+
+    // pull the item we're moving out of the order
+    order.splice(index, 1)
+
+    // put it back in at the correct position
+    if (action === 'move-down') {
+      order.splice(index + 1, 0, sortableId)
+    } else if (action === 'move-up') {
+      order.splice(index - 1, 0, sortableId)
+    }
+
+    this.sortableList.sort(order, true)
+    this.updateFieldsetsAndButtons()
+
+    var visibleFields = this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])')
+    visibleFields.forEach(function (field, index) {
+      this.updateAttributes(field, index)
+    }.bind(this))
+
+    var triggeredByKeyboard = event.detail === 0
+    if (triggeredByKeyboard) {
+      this.preserveElementFocus(button, fieldset, action, visibleFields)
+    }
+
+    this.updateOrderInputs()
+  }
+
+  AddAnother.prototype.preserveElementFocus = function (button, fieldset, action, visibleFields) {
+    let target = button
+    if (action === 'move-up' && fieldset === visibleFields[0]) {
+      target = button.parentNode.querySelector('button[data-action="move-down"]')
+    } else if (action === 'move-down' && fieldset === visibleFields[visibleFields.length - 1]) {
+      target = button.parentNode.querySelector('button[data-action="move-up"]')
+    }
+    target.focus()
+  }
+
+  AddAnother.prototype.removeMoveButtons = function () {
+    var wrappers = this.module.querySelectorAll('.gem-c-add-another__move-button-wrapper')
+    wrappers.forEach((button) => {
+      button.remove()
+    })
+  }
+
+  AddAnother.prototype.updateOrderInputs = function () {
+    this.getOrderInputs().forEach(function (orderInput, index) {
+      orderInput.value = index + 1
+    })
+  }
+
   Modules.AddAnother = AddAnother
 })(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/components/_add-another.scss

@@ -11,4 +11,22 @@
   .js-add-another__remove-button--hidden {
     display: none;
   }
+
+  .gem-c-fieldset {
+    position: relative;
+  }
+
+  .gem-c-add-another__move-button[disabled] {
+    display: none;
+  }
+
+  .gem-c-add-another__move-button-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .gem-c-add-another__move-button {
+    margin-left: govuk-spacing(2);
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_figure.scss

@@ -1,46 +1,24 @@
 @import "govuk_publishing_components/individual_component_support";
 
+$gap: govuk-spacing(1);
+
 .gem-c-figure {
-  border-top: 1px solid $govuk-border-colour;
-  padding-top: govuk-spacing(3);
   margin: 0;
-  margin-bottom: govuk-spacing(8);
-  @include govuk-clearfix;
-
-  @include govuk-media-query($until: tablet) {
-    margin-bottom: govuk-spacing(6);
-  }
+  display: table;
 }
 
 .gem-c-figure__image {
-  display: block;
-  width: 100%;
-
-  @include govuk-media-query($from: tablet) {
-    float: inline-start;
-    width: 50%;
-  }
+  max-width: 100%;
+  display: table-row;
 }
 
 .gem-c-figure__figcaption {
-  @include govuk-font(16);
-
-  @include govuk-media-query($from: tablet) {
-    display: block;
-    vertical-align: top;
-    box-sizing: border-box;
-    float: inline-end;
-    padding-inline-start: govuk-spacing(3);
-    width: 50%;
-  }
-
-  @include govuk-media-query($until: tablet) {
-    margin-top: govuk-spacing(2);
-  }
+  display: table-caption;
+  caption-side: bottom;
 }
 
 .gem-c-figure__figcaption-text {
-  margin: 0;
-  margin-bottom: govuk-spacing(2);
-  @include govuk-font(16);
+  margin: govuk-spacing(2) 0 0 0;
+  color: $govuk-secondary-text-colour;
+  @include govuk-font(19);
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_pagination.scss

@@ -3,7 +3,7 @@
 
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
-  .govuk-pagination * {
+  .gem-c-pagination * {
     color: $govuk-print-text-colour !important;
   }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_images.scss

@@ -13,21 +13,23 @@
   }
 
   figure {
-    width: 100%;
-    clear: both;
-    overflow: hidden;
     margin: 0 0 govuk-spacing(4) 0;
+    display: table;
 
     img {
-      display: inline;
-      text-align: center;
-      width: auto;
-      height: auto;
       max-width: 100%;
+      display: table-row;
     }
 
     figcaption {
-      @include govuk-font($size: 16);
+      display: table-caption;
+      caption-side: bottom;
+    }
+
+    figcaption p {
+      margin: govuk-spacing(2) 0 0 0;
+      color: $govuk-secondary-text-colour;
+      @include govuk-font(19);
     }
   }
 }

data/app/views/govuk_publishing_components/components/_add_another.html.erb

@@ -6,6 +6,7 @@
   add_button_text ||= "Add another"
   empty_fields ||= false
   disable_ga4 ||= nil
+  sortable ||= false
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-add-another")
@@ -15,6 +16,7 @@
     fieldset_legend:,
     empty_fields:,
     disable_ga4:,
+    sortable:,
   })
 %>
 
@@ -26,6 +28,14 @@
         legend_text: "#{fieldset_legend} #{index + 1}",
         heading_size: "m",
       } do %>
+        <% if sortable %>
+          <div class="js-add-another__order-input">
+            <label class="gem-c-label govuk-label">
+              Position<span class='govuk-visually-hidden'> for <%= fieldset_legend %></span>
+              <%= item[:order_input] %>
+            </label>
+          </div>
+        <% end %>
         <div class="js-add-another__destroy-checkbox">
           <%= item[:destroy_checkbox] %>
         </div>

data/app/views/govuk_publishing_components/components/_breadcrumbs.html.erb

@@ -5,6 +5,8 @@
   breadcrumbs ||= []
   collapse_on_mobile ||= false
   inverse ||= false
+  local_assigns[:aria] ||= {}
+  local_assigns[:aria][:label] ||= "Breadcrumb"
 
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
@@ -15,7 +17,6 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(classes.join(" "))
-  component_helper.add_aria_attribute({ label: "Breadcrumb" })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" })
 %>
 

data/app/views/govuk_publishing_components/components/_figure.html.erb

@@ -5,6 +5,7 @@
   credit ||= ""
   src ||= nil
   local_assigns[:lang] ||= "en"
+  local_assigns[:margin_bottom] ||= 8
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-figure")
 %>

data/app/views/govuk_publishing_components/components/_image_card.html.erb

@@ -5,7 +5,7 @@
   brand ||= false
 
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
+  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-image-card")

data/app/views/govuk_publishing_components/components/_pagination.html.erb

@@ -4,29 +4,10 @@
   items ||= nil
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.add_class("govuk-pagination")
+  component_helper.add_class("gem-c-pagination govuk-pagination")
   component_helper.add_class("govuk-pagination--block") if items.blank?
   component_helper.add_aria_attribute({ label: t("components.pagination.pagination") })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
-%>
-<% prev_icon = capture do %>
-  <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-    <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
-  </svg>
-<% end %>
-<% next_icon = capture do %>
-  <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
-    <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
-  </svg>
-<% end %>
-<%
-  if local_assigns[:next_page].present?
-    local_assigns[:next_page][:icon] = next_icon
-  end
-
-  if local_assigns[:previous_page].present?
-    local_assigns[:previous_page][:icon] = prev_icon
-  end
 
   pagination_helper = GovukPublishingComponents::Presenters::PaginationHelper.new(local_assigns)
 

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

@@ -121,3 +121,49 @@ examples:
           <option value="92bbe2da-8d5f-480b-8da1-50b18e317654">Accelerated Capability Environment</option>
           </select>
         <div class="govuk-form-group">
+  sortable:
+    description: | 
+      Adding `sortable` to the component will allow users to rearrange the items in the list.
+      
+      This component uses SortableJS. When JavaScript is disabled a set of inputs will be shown allowing users to 
+      provide an order index for each item.
+      
+      For this to work, each field must have an `order_index` input provided.
+    data:
+      fieldset_legend: "Person"
+      add_button_text: "Add another person"
+      sortable: true
+      items:
+        - fields: >
+            <div class="govuk-form-group">
+              <label for="sortable_person_0_name" class="gem-c-label govuk-label">Full name</label>
+              <input class="gem-c-input govuk-input" id="sortable_person_0_name" name="person[0]name" value="Person A">
+            </div>
+          destroy_checkbox: >
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input type="checkbox" name="person[0][_destroy]" id="sortable_person_0__destroy" class="govuk-checkboxes__input">
+                <label for="sortable_person_0__destroy" class="govuk-label govuk-checkboxes__label">Delete</label>
+              </div>
+            </div>
+          order_input: >
+            <input class="gem-c-input govuk-input govuk-input--width-2" id="sortable_person_0_order" name="person[0]order" value="1">
+        - fields: >
+            <div class="govuk-form-group">
+              <label for="sortable_person_1_name" class="gem-c-label govuk-label">Full name</label>
+              <input class="gem-c-input govuk-input" id="sortable_person_1_name" name="person[1]name" value="Person B">
+            </div>
+          destroy_checkbox: >
+            <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+              <div class="govuk-checkboxes__item">
+                <input type="checkbox" name="person[1][_destroy]" id="sortable_person_1__destroy" class="govuk-checkboxes__input">
+                <label for="sortable_person_1__destroy" class="govuk-label govuk-checkboxes__label">Delete</label>
+              </div>
+            </div>
+          order_input: >
+            <input class="gem-c-input govuk-input govuk-input--width-2" id="sortable_person_1_order" name="person[1]order" value="2">
+      empty:
+        <div class="govuk-form-group">
+          <label for="sortable_person_2_name" class="gem-c-label govuk-label">Full name</label>
+          <input class="gem-c-input govuk-input" id="sortable_person_2_name" name="person[2]name">
+        </div>

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

@@ -1,5 +1,5 @@
 name: Figure
-description: A figure containing an image that never exceeds the component’s width
+description: A figure containing an image and optional caption.
 body: |
   A figure should be used for images that are referenced within a page, but which can be moved around without affecting the flow of the page [(see guidance here)](https://developer.mozilla.org/en/docs/Web/HTML/Element/figure)
 
@@ -15,29 +15,30 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg
   figure_with_alt_text:
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
-      alt: 'An image of the lords chamber'
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg
+      alt: An image of the lords chamber
   figure_with_caption:
+    description: The image will fill the available space but not exceed the width of the container or its own width. The caption will always be the same width as the image.
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
-      alt: 'An image of the lords chamber'
-      caption: 'The Lords Chamber'
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg
+      alt: An image of the lords chamber
+      caption: The Lords Chamber on the 14th of August. A large number of people are in attendance, filling the seats in the lower and upper areas. Several people are wearing hats.
   right_to_left_with_caption:
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg'
-      alt: 'تأشيرات'
-      caption: 'تأشيرات'
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg
+      alt: تأشيرات
+      caption: تأشيرات
     context:
       right_to_left: true
   figure_with_credit:
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
-      credit: Wallis Crankled
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg
+      credit: Roger Harris
   figure_with_caption_and_credit:
     data:
-      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
-      caption: The Lords Chamber
-      credit: Wallis Crankled
+      src: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg
+      caption: The Lords Chamber on the 14th of August. A large number of people are in attendance, filling the seats in the lower and upper areas. Several people are wearing hats.
+      credit: Roger Harris

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

@@ -849,6 +849,7 @@ examples:
         <h5>This is a h5 title</h5>
         <h6>This is a h6 title</h6>
   image:
+    description: Govspeak images are styled to mimic the [figure component](/component-guide/figure).
     data:
       block: |
         <figure class="image embedded">
@@ -859,6 +860,7 @@ examples:
             <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
           </figcaption>
         </figure>
+        <p>This is a regular paragraph of text to demonstrate the spacing between it and the image above.</p>
   lists:
     data:
       block: |

data/lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -6,12 +6,11 @@ module GovukPublishingComponents
 
       attr_reader :href, :large, :extra_details, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading, :image_src, :two_thirds, :large_font_size_mobile
 
-      def initialize(local_assigns, brand_helper)
+      def initialize(local_assigns)
         @href = local_assigns[:href]
         @extra_details = local_assigns[:extra_details] || []
         @image_src = local_assigns[:image_src]
         @image_alt = local_assigns[:image_alt] || ""
-        @image_loading = local_assigns[:image_loading] || "auto"
         @srcset = local_assigns[:srcset] || nil
         @sizes = local_assigns[:sizes] || nil
         @image_loading = local_assigns[:image_loading] || "auto"
@@ -24,8 +23,6 @@ module GovukPublishingComponents
         @extra_details_no_indent = local_assigns[:extra_details_no_indent]
         @metadata = local_assigns[:metadata]
         @lang = local_assigns[:lang]
-
-        @brand_helper = brand_helper
       end
 
       def large_mobile_font_size?
@@ -36,18 +33,13 @@ module GovukPublishingComponents
       end
 
       def media
-        image
-      end
-
-      def image
-        classes = %w[gem-c-image-card__image-wrapper]
         height = 200
         width = 300
         height = 90 if @two_thirds
         width = 90 if @two_thirds
 
         if @image_src
-          content_tag(:figure, class: classes) do
+          content_tag(:figure, class: "gem-c-image-card__image-wrapper") do
             image_tag(
               @image_src,
               class: "gem-c-image-card__image",
@@ -67,6 +59,7 @@ module GovukPublishingComponents
 
         content_tag(:p, class: "gem-c-image-card__context") do
           if @context[:date]
+            @context[:date] = Date.parse(@context[:date]) if @context[:date].is_a? String
             date = content_tag(:time, l(@context[:date], format: "%e %B %Y"), datetime: @context[:date].iso8601, lang: "en")
             dash = content_tag(:span, " — ", 'aria-hidden': true)
 
@@ -82,9 +75,11 @@ module GovukPublishingComponents
       end
 
       def description
-        return content_tag(:div, @description, class: "gem-c-image-card__description gem-c-image-card__description--large-font-size-mobile") if @description && large_mobile_font_size?
+        return unless @description
 
-        content_tag(:div, @description, class: "gem-c-image-card__description") if @description
+        classes = %w[gem-c-image-card__description]
+        classes << "gem-c-image-card__description--large-font-size-mobile" if large_mobile_font_size?
+        content_tag(:div, @description, class: classes)
       end
     end
   end

data/lib/govuk_publishing_components/presenters/pagination_helper.rb

@@ -11,6 +11,7 @@ module GovukPublishingComponents
           next: local_assigns[:next_page] || nil,
           prev: local_assigns[:previous_page] || nil,
         }
+
         @items = local_assigns[:items] || nil
 
         @disable_ga4 = local_assigns[:disable_ga4] || nil
@@ -32,7 +33,7 @@ module GovukPublishingComponents
       end
 
       def has_links?
-        has_pages? || @prev_link || @next_link
+        has_pages? || @prev_link.present? || @next_link.present?
       end
 
       def has_pages?
@@ -72,7 +73,7 @@ module GovukPublishingComponents
       def arrow_link_helper(direction:)
         arrow_link_options = @arrow_links[direction.to_sym]
 
-        return if arrow_link_options.blank?
+        return if arrow_link_options.blank? || !valid_link?(arrow_link_options)
 
         { href: nil, label: nil, title: nil, icon: nil, **arrow_link_options.symbolize_keys } => { href:, label:, title:, icon: }
 
@@ -86,6 +87,11 @@ module GovukPublishingComponents
           next: "Next",
         }[direction.to_sym]
 
+        icon = {
+          prev: previous_icon,
+          next: next_icon,
+        }[direction.to_sym]
+
         ga4_link = ga4_link_event(text: label || title, section:)
 
         link_text_classes = %w[govuk-pagination__link-title]
@@ -101,6 +107,24 @@ module GovukPublishingComponents
           end
         end
       end
+
+    private
+
+      def previous_icon
+        '<svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+          <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+        </svg>'.squish.html_safe
+      end
+
+      def next_icon
+        '<svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+          <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+        </svg>'.squish.html_safe
+      end
+
+      def valid_link?(link)
+        link.key?(:href)
+      end
     end
   end
 end

data/lib/govuk_publishing_components/presenters/related_navigation_helper.rb

@@ -124,14 +124,26 @@ module GovukPublishingComponents
       end
 
       def related_world_locations
-        content_item_links_for("world_locations").each do |link|
-          build_world_locations_path_for link
+        links = Array(@content_item.dig("links", "world_locations"))
+
+        links.map do |link|
+          {
+            path: build_world_locations_path_for(link),
+            text: link["title"],
+            locale: link["locale"],
+          }
         end
       end
 
       def build_world_locations_path_for(link)
-        slug = link[:text].parameterize
-        link[:path] ||= "/world/#{slug}/news"
+        if link["document_type"] == "world_location_news"
+          link["base_path"]
+        elsif link["document_type"] == "world_location" && link.dig("links", "world_location_news").any?
+          link.dig("links", "world_location_news", 0, "base_path")
+        else
+          slug = link["title"].parameterize
+          "/world/#{slug}/news"
+        end
       end
 
       def related_statistical_data_sets

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "63.0.0".freeze
+  VERSION = "63.1.0".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 63.0.0
+  version: 63.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
@@ -2118,7 +2118,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.1
+rubygems_version: 4.0.2
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications
 test_files: []