govuk_publishing_components 35.15.5 → 35.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3117de6a0b4a66caea24d67e4c462c728ef09fdc3cd3503ca0e2429673726631
-  data.tar.gz: 164a43d2a5ccc732f37fbdf6eb862fc500311f473b9cf1aca998515d6c978c14
+  metadata.gz: d631949b7bdb6aa90aff397986118f929cbae4071ef96b3a623c123c6496224d
+  data.tar.gz: ef75a103619c27bc964664673a17475579132d0b909e254fce0afcc6316256d9
 SHA512:
-  metadata.gz: f9e56a63dc6f33e2df012aa4993cdd9404d07d8c96ecfe39ffe253676aa443deabadc47062b4a9443ee8e2f0fa89943629dd145b8e673f9c1ddef6e56fb5624d
-  data.tar.gz: ca4f944dbcbf4d77171f797bc1f3b16caad24b513dbb2c49d0749edba6570f9acb701922cd0fa4d33259ec2b80ebbabd5ad8e9390bfa2fb0e54aa58e5eab14d5
+  metadata.gz: '01786b90a26218b6b5dff054852d4e67a77f36d307029ff6fd03f8b15cd005e9264f8719a03f78f05dc776f284c24c972eb6101940e8afd41a44a696c3b404f5'
+  data.tar.gz: 775eb1304962e2349b3e19c8ce7acfb92dc927443a7a01253692909c174f6b5e196129d40104f773794b2ac8e1674e0c65361e605808910f01163b9d69ad5f6a

data/app/assets/config/govuk_publishing_components_manifest.js

@@ -60,6 +60,7 @@
 //= link govuk_publishing_components/components/_metadata.css
 //= link govuk_publishing_components/components/_modal-dialogue.css
 //= link govuk_publishing_components/components/_notice.css
+//= link govuk_publishing_components/components/_option-select.css
 //= link govuk_publishing_components/components/_organisation-logo.css
 //= link govuk_publishing_components/components/_panel.css
 //= link govuk_publishing_components/components/_phase-banner.css

data/app/assets/images/option-select/input-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="40" height="40">
+  <path d="M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z" fill="currentColor" />
+</svg>

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -59,7 +59,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
             cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined,
             intervention: this.getInterventionPresence(),
-            query_string: this.getQueryString()
+            query_string: this.getQueryString(),
+            search_term: this.getSearchTerm()
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -74,6 +75,23 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       return window.location.search
     },
 
+    getSearchTerm: function () {
+      var queryString = this.getSearch()
+
+      if (!queryString) {
+        return undefined
+      }
+
+      var searchTerm = queryString.match(/keywords=([^&]*)/)
+      if (!searchTerm) {
+        return undefined
+      }
+
+      searchTerm = searchTerm[0].replace('keywords=', '')
+      searchTerm = this.PIIRemover.stripPIIWithOverride(searchTerm, true, true)
+      return searchTerm
+    },
+
     getQueryString: function () {
       var queryString = this.getSearch()
       if (queryString) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js

@@ -2,7 +2,7 @@
   'use strict'
 
   var GOVUK = global.GOVUK || {}
-  var EMAIL_PATTERN = /[^\s=/?&#]+(?:@|%40)[^\s=/?&]+/g
+  var EMAIL_PATTERN = /[^\s=/?&#+]+(?:@|%40)[^\s=/?&+]+/g
   var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
   var DATE_PATTERN_NUMERIC = /\d{4}(-?)\d{2}(-?)\d{2}/g
   var DATE_PATTERN_STRING = /\d{1,2}\s(January|February|March|April|May|June|July|August|September|October|November|December)\s\d{4}/g

data/app/assets/javascripts/govuk_publishing_components/components/option-select.js

@@ -0,0 +1,312 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  /* This JavaScript provides two functional enhancements to option-select components:
+    1) A count that shows how many results have been checked in the option-container
+    2) Open/closing of the list of checkboxes
+  */
+  function OptionSelect ($module) {
+    this.$optionSelect = $module
+    this.$options = this.$optionSelect.querySelectorAll("input[type='checkbox']")
+    this.$optionsContainer = this.$optionSelect.querySelector('.js-options-container')
+    this.$optionList = this.$optionsContainer.querySelector('.js-auto-height-inner')
+    this.$allCheckboxes = this.$optionsContainer.querySelectorAll('.govuk-checkboxes__item')
+    this.hasFilter = this.$optionSelect.getAttribute('data-filter-element') || ''
+
+    this.checkedCheckboxes = []
+
+    this.mq = window.matchMedia('(min-width: 641px)')
+    this.isClosedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
+    this.isClosedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
+  }
+
+  OptionSelect.prototype.init = function () {
+    if (this.hasFilter.length) {
+      var filterEl = document.createElement('div')
+      filterEl.innerHTML = this.hasFilter
+
+      var optionSelectFilter = document.createElement('div')
+      optionSelectFilter.classList.add('gem-c-option-select__filter')
+      optionSelectFilter.innerHTML = filterEl.childNodes[0].nodeValue
+
+      this.$optionsContainer.parentNode.insertBefore(optionSelectFilter, this.$optionsContainer)
+
+      this.$filter = this.$optionSelect.querySelector('input[name="option-select-filter"]')
+      this.$filterCount = document.getElementById(this.$filter.getAttribute('aria-describedby'))
+      this.filterTextSingle = ' ' + this.$filterCount.getAttribute('data-single')
+      this.filterTextMultiple = ' ' + this.$filterCount.getAttribute('data-multiple')
+      this.filterTextSelected = ' ' + this.$filterCount.getAttribute('data-selected')
+      this.checkboxLabels = []
+      this.filterTimeout = 0
+
+      this.getAllCheckedCheckboxes()
+      for (var i = 0; i < this.$allCheckboxes.length; i++) {
+        this.checkboxLabels.push(this.cleanString(this.$allCheckboxes[i].textContent))
+      }
+
+      this.$filter.addEventListener('keyup', this.typeFilterText.bind(this))
+    }
+
+    // Attach listener to update checked count
+    this.$optionsContainer.querySelector('.gem-c-checkboxes__list').addEventListener('change', this.updateCheckedCount.bind(this))
+
+    // Replace div.container-head with a button
+    this.replaceHeadingSpanWithButton()
+
+    // Add js-collapsible class to parent for CSS
+    this.$optionSelect.classList.add('js-collapsible')
+
+    // Add open/close listeners
+    var button = this.$optionSelect.querySelector('.js-container-button')
+    button.addEventListener('click', this.toggleOptionSelect.bind(this))
+
+    // Toggle option visibility depending on screen size (min-width: 641px) and
+    // presence of any 'closed' properties (`data-closed-on-load`, `data-closed-on-load-mobile`).
+    // See https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/settings/_media-queries.scss#L10-L14
+    if (this.mq.matches) {
+      this.toggleVisibility(true)
+    } else {
+      this.toggleVisibility(false)
+    }
+
+    var checkedString = this.checkedString()
+    if (checkedString) {
+      this.attachCheckedCounter(checkedString)
+    }
+  }
+
+  OptionSelect.prototype.toggleVisibility = function (isTabletOrLarger) {
+    if (isTabletOrLarger) {
+      if (this.isClosedOnLoad === 'true') {
+        this.close()
+      } else {
+        this.setupHeight()
+      }
+    } else {
+      if (this.isClosedOnLoadMobile === 'true' || this.isClosedOnLoad === 'true') {
+        this.close()
+      } else {
+        this.setContainerHeight(201)
+      }
+    }
+  }
+
+  OptionSelect.prototype.typeFilterText = function (event) {
+    event.stopPropagation()
+    var ENTER_KEY = 13
+
+    if (event.keyCode !== ENTER_KEY) {
+      clearTimeout(this.filterTimeout)
+      this.filterTimeout = setTimeout(
+        function () { this.doFilter(this) }.bind(this),
+        300
+      )
+    } else {
+      event.preventDefault() // prevents finder forms from being submitted when user presses ENTER
+    }
+  }
+
+  OptionSelect.prototype.cleanString = function cleanString (text) {
+    text = text.replace(/&/g, 'and')
+    text = text.replace(/[’',:–-]/g, '') // remove punctuation characters
+    text = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // escape special characters
+    return text.trim().replace(/\s\s+/g, ' ').toLowerCase() // replace multiple spaces with one
+  }
+
+  OptionSelect.prototype.getAllCheckedCheckboxes = function getAllCheckedCheckboxes () {
+    this.checkedCheckboxes = []
+
+    for (var i = 0; i < this.$options.length; i++) {
+      if (this.$options[i].checked) {
+        this.checkedCheckboxes.push(i)
+      }
+    }
+  }
+
+  OptionSelect.prototype.doFilter = function doFilter (obj) {
+    var filterBy = obj.cleanString(obj.$filter.value)
+    var showCheckboxes = obj.checkedCheckboxes.slice()
+    var i = 0
+
+    for (i = 0; i < obj.$allCheckboxes.length; i++) {
+      if (showCheckboxes.indexOf(i) === -1 && obj.checkboxLabels[i].search(filterBy) !== -1) {
+        showCheckboxes.push(i)
+      }
+    }
+
+    for (i = 0; i < obj.$allCheckboxes.length; i++) {
+      obj.$allCheckboxes[i].style.display = 'none'
+    }
+
+    for (i = 0; i < showCheckboxes.length; i++) {
+      obj.$allCheckboxes[showCheckboxes[i]].style.display = 'block'
+    }
+
+    var lenChecked = obj.$optionsContainer.querySelectorAll('.govuk-checkboxes__input:checked').length
+    var len = showCheckboxes.length + lenChecked
+    var html = len + (len === 1 ? obj.filterTextSingle : obj.filterTextMultiple) + ', ' + lenChecked + obj.filterTextSelected
+    obj.$filterCount.innerHTML = html
+  }
+
+  OptionSelect.prototype.replaceHeadingSpanWithButton = function replaceHeadingSpanWithButton () {
+    /* Replace the span within the heading with a button element. This is based on feedback from Léonie Watson.
+     * The button has all of the accessibility hooks that are used by screen readers and etc.
+     * We do this in the JavaScript because if the JavaScript is not active then the button shouldn't
+     * be there as there is no JS to handle the click event.
+    */
+    var containerHead = this.$optionSelect.querySelector('.js-container-button')
+    var jsContainerHeadHTML = containerHead.innerHTML
+
+    // Create button and replace the preexisting html with the button.
+    var button = document.createElement('button')
+    button.setAttribute('class', 'js-container-button gem-c-option-select__title gem-c-option-select__button')
+    // Add type button to override default type submit when this component is used within a form
+    button.setAttribute('type', 'button')
+    button.setAttribute('aria-expanded', true)
+    button.setAttribute('id', containerHead.getAttribute('id'))
+    button.setAttribute('aria-controls', this.$optionsContainer.getAttribute('id'))
+    button.innerHTML = jsContainerHeadHTML
+    containerHead.parentNode.replaceChild(button, containerHead)
+
+    // GA4 Accordion tracking. Relies on the ga4-finder-tracker setting the index first, so we wrap this in a custom event.
+    window.addEventListener('ga4-filter-indexes-added', function () {
+      if (window.GOVUK.analyticsGa4) {
+        if (window.GOVUK.analyticsGa4.Ga4FinderTracker) {
+          window.GOVUK.analyticsGa4.Ga4FinderTracker.addFilterButtonTracking(button, button.innerHTML)
+        }
+      }
+    })
+  }
+
+  OptionSelect.prototype.attachCheckedCounter = function attachCheckedCounter (checkedString) {
+    var element = document.createElement('div')
+    element.setAttribute('class', 'gem-c-option-select__selected-counter js-selected-counter')
+    element.innerHTML = checkedString
+    this.$optionSelect.querySelector('.js-container-button').insertAdjacentElement('afterend', element)
+  }
+
+  OptionSelect.prototype.updateCheckedCount = function updateCheckedCount () {
+    var checkedString = this.checkedString()
+    var checkedStringElement = this.$optionSelect.querySelector('.js-selected-counter')
+
+    if (checkedString) {
+      if (checkedStringElement === null) {
+        this.attachCheckedCounter(checkedString)
+      } else {
+        checkedStringElement.textContent = checkedString
+      }
+    } else if (checkedStringElement) {
+      checkedStringElement.parentNode.removeChild(checkedStringElement)
+    }
+  }
+
+  OptionSelect.prototype.checkedString = function checkedString () {
+    this.getAllCheckedCheckboxes()
+    var count = this.checkedCheckboxes.length
+    var checkedString = false
+    if (count > 0) {
+      checkedString = count + ' selected'
+    }
+
+    return checkedString
+  }
+
+  OptionSelect.prototype.toggleOptionSelect = function toggleOptionSelect (e) {
+    if (this.isClosed()) {
+      this.open()
+    } else {
+      this.close()
+    }
+    e.preventDefault()
+  }
+
+  OptionSelect.prototype.open = function open () {
+    if (this.isClosed()) {
+      this.$optionSelect.querySelector('.js-container-button').setAttribute('aria-expanded', true)
+      this.$optionSelect.classList.remove('js-closed')
+      this.$optionSelect.classList.add('js-opened')
+      if (!this.$optionsContainer.style.height) {
+        this.setupHeight()
+      }
+    }
+  }
+
+  OptionSelect.prototype.close = function close () {
+    this.$optionSelect.classList.remove('js-opened')
+    this.$optionSelect.classList.add('js-closed')
+    this.$optionSelect.querySelector('.js-container-button').setAttribute('aria-expanded', false)
+  }
+
+  OptionSelect.prototype.isClosed = function isClosed () {
+    return this.$optionSelect.classList.contains('js-closed')
+  }
+
+  OptionSelect.prototype.setContainerHeight = function setContainerHeight (height) {
+    this.$optionsContainer.style.height = height + 'px'
+  }
+
+  OptionSelect.prototype.isCheckboxVisible = function isCheckboxVisible (option) {
+    var initialOptionContainerHeight = this.$optionsContainer.clientHeight
+    var optionListOffsetTop = this.$optionList.getBoundingClientRect().top
+    var distanceFromTopOfContainer = option.getBoundingClientRect().top - optionListOffsetTop
+    return distanceFromTopOfContainer < initialOptionContainerHeight
+  }
+
+  OptionSelect.prototype.getVisibleCheckboxes = function getVisibleCheckboxes () {
+    var visibleCheckboxes = []
+    for (var i = 0; i < this.$options.length; i++) {
+      if (this.isCheckboxVisible(this.$options[i])) {
+        visibleCheckboxes.push(this.$options[i])
+      }
+    }
+
+    // add an extra checkbox, if the label of the first is too long it collapses onto itself
+    if (this.$options[visibleCheckboxes.length]) {
+      visibleCheckboxes.push(this.$options[visibleCheckboxes.length])
+    }
+    return visibleCheckboxes
+  }
+
+  OptionSelect.prototype.isFacetsContainerHidden = function isFacetsContainerHidden () {
+    var facetsContent = this.$optionSelect.parentElement
+    var isFacetsContentHidden = false
+    // check whether this is hidden by progressive disclosure,
+    // because height calculations won't work
+    // would use offsetParent === null but for IE10+
+    if (facetsContent) {
+      isFacetsContentHidden = !(facetsContent.offsetWidth || facetsContent.offsetHeight || facetsContent.getClientRects().length)
+    }
+
+    return isFacetsContentHidden
+  }
+
+  OptionSelect.prototype.setupHeight = function setupHeight () {
+    var initialOptionContainerHeight = this.$optionsContainer.clientHeight
+    var height = this.$optionList.offsetHeight
+
+    var isFacetsContainerHidden = this.isFacetsContainerHidden()
+
+    if (isFacetsContainerHidden) {
+      initialOptionContainerHeight = 200
+      height = 200
+    }
+
+    // Resize if the list is only slightly bigger than its container
+    // If isFacetsContainerHidden is true, then 200 < 250
+    // And the container height is always set to 201px
+    if (height < initialOptionContainerHeight + 50) {
+      this.setContainerHeight(height + 1)
+      return
+    }
+
+    // Resize to cut last item cleanly in half
+    var visibleCheckboxes = this.getVisibleCheckboxes()
+
+    var lastVisibleCheckbox = visibleCheckboxes[visibleCheckboxes.length - 1]
+    var position = lastVisibleCheckbox.parentNode.offsetTop // parent element is relative
+    this.setContainerHeight(position + (lastVisibleCheckbox.clientHeight / 1.5))
+  }
+
+  Modules.OptionSelect = OptionSelect
+})(window.GOVUK.Modules)

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -57,6 +57,7 @@ $govuk-new-link-styles: true;
 @import "components/metadata";
 @import "components/modal-dialogue";
 @import "components/notice";
+@import "components/option-select";
 @import "components/organisation-logo";
 @import "components/panel";
 @import "components/phase-banner";

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -41,6 +41,13 @@
   }
 }
 
+@include govuk-media-query($from: tablet) {
+  .gem-c-image-card.gem-c-image-card--two-thirds {
+    margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
+    display: block;
+  }
+}
+
 @include govuk-media-query($from: mobile, $until: tablet) {
   .gem-c-image-card {
     margin: 0 (- govuk-spacing(3)) govuk-spacing(6) (- govuk-spacing(3));
@@ -53,6 +60,25 @@
   .gem-c-image-card__text-wrapper {
     @include govuk-grid-column($width: one-half, $at: mobile);
   }
+
+  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+    @include govuk-grid-column($width: one-third, $float: right, $at: mobile);
+  }
+
+  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
+    @include govuk-grid-column($width: two-thirds, $float: right, $at: mobile);
+  }
+}
+
+@include govuk-media-query($from: tablet) {
+  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+    @include govuk-grid-column($width: one-third, $float: right, $at: tablet);
+  }
+
+  .gem-c-image-card__text-wrapper.gem-c-image-card__text-wrapper--two-thirds {
+    @include govuk-grid-column($width: two-thirds, $float: right, $at: tablet);
+    padding-left: 0;
+  }
 }
 
 .gem-c-image-card__image {

data/app/assets/stylesheets/govuk_publishing_components/components/_option-select.scss

@@ -0,0 +1,172 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-option-select {
+  position: relative;
+  padding: 0 0 govuk-spacing(2);
+  margin-bottom: govuk-spacing(2);
+  border-bottom: 1px solid $govuk-border-colour;
+
+  @include govuk-media-query($from: desktop) {
+    // Redefine scrollbars on desktop where these lists are scrollable
+    // so they are always visible in option lists
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 7px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+
+      background-color: rgba(0, 0, 0, .5);
+      -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .87);
+    }
+  }
+
+  .gem-c-checkboxes {
+    margin: 0;
+  }
+}
+
+.gem-c-option-select__title {
+  @include govuk-font(19);
+  margin: 0;
+}
+
+.gem-c-option-select__button {
+  z-index: 1;
+  background: none;
+  border: 0;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+  color: $govuk-link-colour;
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: .1em;
+    @include govuk-link-hover-decoration;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:focus {
+    outline: none;
+    text-decoration: none;
+    @include govuk-focused-text;
+  }
+
+  &[disabled] {
+    background-image: none;
+    color: inherit;
+  }
+
+  // Extend the touch area of the button to span the heading
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
+}
+
+.gem-c-option-select__icon {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 9px;
+  width: 30px;
+  height: 40px;
+  fill: govuk-colour("black");
+}
+
+.gem-c-option-select__container {
+  position: relative;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: govuk-colour("white");
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.gem-c-option-select__container--large {
+  max-height: 600px;
+}
+
+.gem-c-option-select__container-inner {
+  padding: govuk-spacing(1) 13px;
+}
+
+.gem-c-option-select__filter {
+  position: relative;
+  background: govuk-colour("white");
+  padding: 13px 13px govuk-spacing(2) 13px;
+}
+
+.gem-c-option-select__filter-input {
+  @include govuk-font(19);
+  background: image-url("option-select/input-icon.svg") govuk-colour("white") no-repeat -5px -3px;
+
+  @include govuk-media-query($from: tablet) {
+    @include govuk-font(16);
+  }
+}
+
+.gem-c-option-select__filter-input.govuk-input {
+  padding-left: 33px;
+}
+
+.js-enabled {
+  .gem-c-option-select__heading {
+    position: relative;
+    padding: 10px 8px 5px 43px;
+    margin: 0;
+  }
+
+  [aria-expanded="true"] ~ .gem-c-option-select__icon--up {
+    display: block;
+  }
+
+  [aria-expanded="false"] ~ .gem-c-option-select__icon--down {
+    display: block;
+  }
+
+  .gem-c-option-select__container {
+    height: 200px;
+  }
+
+  .gem-c-option-select__container--large {
+    height: 600px;
+  }
+
+  [data-closed-on-load="true"] .gem-c-option-select__container {
+    display: none;
+  }
+}
+
+.gem-c-option-select__selected-counter {
+  @include govuk-font($size: 14);
+  color: $govuk-text-colour;
+  margin-top: 3px;
+}
+
+.gem-c-option-select.js-closed {
+  .gem-c-option-select__filter,
+  .gem-c-option-select__container {
+    display: none;
+  }
+}
+
+.gem-c-option-select.js-opened {
+  .gem-c-option-select__filter,
+  .gem-c-option-select__container {
+    display: block;
+  }
+}

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

@@ -7,11 +7,17 @@
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   classes = %w[gem-c-image-card]
+  classes << "govuk-grid-row" if card_helper.two_thirds
   classes << "gem-c-image-card--large" if card_helper.large
+  classes << "gem-c-image-card--two-thirds" if card_helper.two_thirds
   classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
   classes << brand_helper.brand_class if brand_helper.brand_class
 
+  text_wrapper_classes = %w[gem-c-image-card__text-wrapper]
+  text_wrapper_classes << "gem-c-image-card__text-wrapper--two-thirds" if card_helper.two_thirds
+
   font_size ||= card_helper.large ? 'm' : 's'
   heading_class = %w[gem-c-image-card__title]
   heading_class << shared_helper.get_heading_size(font_size, 's')
@@ -33,7 +39,7 @@
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
   <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
-    <div class="gem-c-image-card__text-wrapper">
+    <%= content_tag(:div, class: text_wrapper_classes) do %>
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
           <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
@@ -69,7 +75,7 @@
       <% if card_helper.metadata %>
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
-    </div>
+    <% end %>
     <%= card_helper.media %>
   <% end %>
 <% end %>