From a55cfc03248e844c34bb2ee8689053c7f4dc7818 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <gemmaleigh@users.noreply.github.com>
Date: Mon, 24 Oct 2016 16:12:41 +0100
Subject: [PATCH] Add a check for a .js-sticky-resize class (#343)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If it exists soon the sticky element, then find the width of the parent
element (as we’re assuming by having set this class that it’s in a
grid-column that will change it’s width when resized).

Get the width of the parent element and set the width of the shim and
the width of the sticky element to match when the window is resized.

In the tests, create a wrapper element with a width defined (300px) to
check that the width is also set for the sticky element and shim.
---
 .../govuk/stick-at-top-when-scrolling.js      |  9 +++++++++
 spec/unit/stick-at-top-when-scrolling.spec.js | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/javascripts/govuk/stick-at-top-when-scrolling.js b/javascripts/govuk/stick-at-top-when-scrolling.js
index 37132df0..8acc33af 100644
--- a/javascripts/govuk/stick-at-top-when-scrolling.js
+++ b/javascripts/govuk/stick-at-top-when-scrolling.js
@@ -91,6 +91,15 @@
         sticky.$els.each(function (i, el) {
           var $el = $(el)
 
+          var elResize = $el.hasClass('js-sticky-resize')
+          if (elResize) {
+            var $shim = $('.shim')
+            var $elParent = $el.parent('div')
+            var elParentWidth = $elParent.width()
+            $shim.css('width', elParentWidth)
+            $el.css('width', elParentWidth)
+          }
+
           if (windowDimensions.width <= 768) {
             sticky.release($el)
           }
diff --git a/spec/unit/stick-at-top-when-scrolling.spec.js b/spec/unit/stick-at-top-when-scrolling.spec.js
index 281a0556..09618f9b 100644
--- a/spec/unit/stick-at-top-when-scrolling.spec.js
+++ b/spec/unit/stick-at-top-when-scrolling.spec.js
@@ -80,6 +80,25 @@ describe('stick-at-top-when-scrolling', function () {
       expect($stickyElement.hasClass('content-fixed')).toBe(true)
     })
 
+    it('should check the width of the parent, and make the width of the element and the shim the same on resize', function () {
+      var $stickyResizeElement = $('<div class="stick-at-top-when-scrolling js-sticky-resize"></div>')
+      var $stickyResizeWrapper = $('<div class="column-third" style="width:300px;">').append($stickyResizeElement)
+      $('body').append($stickyResizeWrapper)
+
+      GOVUK.stickAtTopWhenScrolling.$els = $stickyResizeElement
+      GOVUK.stickAtTopWhenScrolling._hasResized = true
+      GOVUK.stickAtTopWhenScrolling.checkResize()
+
+      var stickyElementParentWidth = $stickyResizeElement.parent('div').width()
+      expect(stickyElementParentWidth).toBe(300)
+
+      var stickyElementWidth = $stickyResizeElement.width()
+      expect(stickyElementWidth).toBe(300)
+
+      var stickElementShimWidth = $('.shim').width()
+      expect(stickElementShimWidth).toBe(300)
+    })
+
     it('should unstick, if the scroll position is less than the point at which scrolling started', function () {
       GOVUK.stickAtTopWhenScrolling.getWindowPositions = function () {
         return {