update primaryLinks js module

- Replace retired `visuallyhidden` class with a design system helper class
- Remove jQuery from module

Prompted by https://govuk.zendesk.com/agent/tickets/4737441

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 * Pass cookie consent to Digital Identity via query parameter ([PR #2344](https://github.com/alphagov/govuk_publishing_components/pull/2344))
 * Add explicit-cross-domain-links to account manage & security links ([PR #2347](https://github.com/alphagov/govuk_publishing_components/pull/2347))
+* update primaryLinks js module ([#2348](https://github.com/alphagov/govuk_publishing_components/pull/2348))
 
 ## 27.5.0
 

app/assets/javascripts/govuk_publishing_components/lib/primary-links.js

@@ -2,53 +2,69 @@
 ;(function (global) {
   'use strict'
 
-  var $ = global.jQuery
   var GOVUK = global.GOVUK || {}
 
   // Only show the first {n} items in a list, documentation is in the README.md
   var PrimaryList = function (el, selector) {
-    this.$el = $(el)
-    this.$extraLinks = this.$el.find('li:not(' + selector + ')')
+    this.el = el
+    this.extraLinks = this.el.querySelectorAll('li:not(' + selector + ')')
     // only hide more than one extra link
-    if (this.$extraLinks.length > 1) {
+    if (this.extraLinks.length > 1) {
       this.addToggleLink()
       this.hideExtraLinks()
     }
   }
 
   PrimaryList.prototype = {
     toggleText: function () {
-      if (this.$extraLinks.length > 1) {
-        return '+' + this.$extraLinks.length + ' others'
+      if (this.extraLinks.length > 1) {
+        return '+' + this.extraLinks.length + ' others'
       } else {
-        return '+' + this.$extraLinks.length + ' other'
+        return '+' + this.extraLinks.length + ' other'
       }
     },
     addToggleLink: function () {
-      this.$toggleLink = $('<a href="#">' + this.toggleText() + '</a>')
-      this.$toggleLink.click($.proxy(this.toggleLinks, this))
-      this.$toggleLink.insertAfter(this.$el)
+      this.toggleLink = document.createElement('a')
+      this.toggleLink.href = '#'
+      this.toggleLink.setAttribute('aria-expanded', 'false')
+      this.toggleLink.innerText = this.toggleText()
+
+      this.el.parentNode.insertBefore(this.toggleLink, this.el.nextSibling)
+      this.toggleLink.addEventListener('click', this.toggleLinks.bind(this))
     },
     toggleLinks: function (e) {
       e.preventDefault()
-      this.$toggleLink.remove()
+      this.toggleLink.remove()
       this.showExtraLinks()
     },
     hideExtraLinks: function () {
-      this.$extraLinks.addClass('visuallyhidden')
-      $(window).trigger('govuk.pageSizeChanged')
+      for (var i = 0; i < this.extraLinks.length; i++) {
+        this.extraLinks[i].className = 'primary-links--display-none'
+      }
     },
     showExtraLinks: function () {
-      this.$extraLinks.removeClass('visuallyhidden')
-      $(window).trigger('govuk.pageSizeChanged')
+      for (var i = 0; i < this.extraLinks.length; i++) {
+        this.extraLinks[i].className = ''
+      }
     }
   }
 
   GOVUK.PrimaryList = PrimaryList
 
   GOVUK.primaryLinks = {
     init: function (selector) {
-      $(selector).parent().each(function (i, el) {
+      var allListItems = document.querySelectorAll(selector)
+      var AllLists = []
+
+      for (var i = 0; i < allListItems.length; i++) {
+        var parent = allListItems[i].parentNode
+
+        if (AllLists.indexOf(parent) < 0) {
+          AllLists.push(parent)
+        }
+      }
+
+      AllLists.forEach(function (el, i) {
         new GOVUK.PrimaryList(el, selector) // eslint-disable-line no-new
       })
     }

app/assets/stylesheets/govuk_publishing_components/components/govspeak/_typography.scss

@@ -108,3 +108,11 @@
     @include govuk-link-style-inverse;
   }
 }
+
+// This helper class is for use by the primary links js module
+// We have this custom helper here with a single rule over using the design system helper class govuk-!-display-none
+// because jasmine tests don't like the "!" in the distributed helper class
+
+.primary-links--display-none {
+  display: none;
+}

spec/javascripts/govuk_publishing_components/lib/primary-links.spec.js

@@ -1,22 +1,27 @@
 /* global describe it expect beforeEach spyOn */
 
-var $ = window.jQuery
-
 describe('primary-links', function () {
   'use strict'
   var GOVUK = window.GOVUK
 
-  var shortList, mediumList
+  var shortList, mediumList, container
 
   beforeEach(function () {
-    shortList = $('<ul><li class="primary">one</li><li>two</li></ul>')
-    mediumList = $('<ul><li class="primary">one</li><li>two</li><li>three</li></ul>')
+    shortList = document.createElement('ul')
+    mediumList = document.createElement('ul')
+    container = document.createElement('div')
+
+    shortList.innerHTML = '<li class="primary">one</li><li>two</li>'
+    mediumList.innerHTML = '<li class="primary">one</li><li>two</li><li>three</li>'
+
+    container.appendChild(shortList)
+    container.appendChild(mediumList)
   })
 
   it('visually hides extra links', function () {
     new GOVUK.PrimaryList(mediumList, '.primary') // eslint-disable-line no-new
 
-    expect(mediumList.find('.visuallyhidden').length).toBe(2)
+    expect(mediumList.querySelectorAll('.primary-links--display-none').length).toBe(2)
   })
 
   it('creates appropriate toggle text', function () {
@@ -28,10 +33,9 @@ describe('primary-links', function () {
   })
 
   it('add a toggle link', function () {
-    var container = $('<div>').append(mediumList)
     new GOVUK.PrimaryList(mediumList, '.primary') // eslint-disable-line no-new
 
-    expect(container.find('a').length).toBe(1)
+    expect(container.querySelectorAll('a').length).toBe(1)
   })
 
   it('show extra links when toggled', function () {
@@ -49,7 +53,7 @@ describe('primary-links', function () {
     new GOVUK.PrimaryList(shortList, '.primary') // eslint-disable-line no-new
     new GOVUK.PrimaryList(mediumList, '.primary') // eslint-disable-line no-new
 
-    expect(shortList.find('.visuallyhidden').length).toBe(0)
-    expect(mediumList.find('.visuallyhidden').length).toBe(2)
+    expect(shortList.querySelectorAll('.primary-links--display-none').length).toBe(0)
+    expect(mediumList.querySelectorAll('.primary-links--display-none').length).toBe(2)
   })
 })