Fix missing hidden CSS class

A CSS class of 'hidden' is referenced but no longer present causing all UNAVAILABLE
statuses to be visible on the page.

Replace 'hidden' class with GOV.UK 'govuk-!-display-none' class from the GOV.UK
components gem.

Author: gclssvglx

app/assets/javascripts/webchat/library.js

@@ -91,8 +91,8 @@
     function advisorStateChange (state) {
       state = state.toLowerCase()
       var currentState = $el.find('.' + webchatStateClass + state)
-      $el.find('[class^="' + webchatStateClass + '"]').addClass('hidden')
-      currentState.removeClass('hidden')
+      $el.find('[class^="' + webchatStateClass + '"]').addClass('govuk-!-display-none')
+      currentState.removeClass('govuk-!-display-none')
       trackEvent(state)
     }
 

app/views/shared/_webchat.html.erb

@@ -12,13 +12,13 @@
       <span class="js-webchat-advisers-error">
         <%= t("shared.webchat.technical_problem") %>
       </span>
-      <span class="js-webchat-advisers-unavailable hidden">
+      <span class="js-webchat-advisers-unavailable govuk-!-display-none">
         <%= t("shared.webchat.closed") %>
       </span>
-      <span class="js-webchat-advisers-busy hidden">
+      <span class="js-webchat-advisers-busy govuk-!-display-none">
         <%= t("shared.webchat.busy") %>
       </span>
-      <span class="js-webchat-advisers-available hidden">
+      <span class="js-webchat-advisers-available govuk-!-display-none">
         <%= t("shared.webchat.available") %>
         <a href="#" data-redirect="<%=  @content_item.webchat.open_url_redirect.present? ? 'true' : 'false' %>" rel="external" class="js-webchat-open-button"><%= t("shared.webchat.speak_to_adviser") %></a>.
       </span>

spec/javascripts/webchat.spec.js

@@ -12,9 +12,9 @@ describe('Webchat', function () {
 
   var INSERTION_HOOK = '<div class="js-webchat" data-availability-url="' + CHILD_BENEFIT_API_URL + '" data-open-url="' + CHILD_BENEFIT_API_URL + '" data-redirect="true">' +
     '<div class="js-webchat-advisers-error">Error</div>' +
-    '<div class="js-webchat-advisers-unavailable hidden">Unavailable</div>' +
-    '<div class="js-webchat-advisers-busy hidden">Busy</div>' +
-    '<div class="js-webchat-advisers-available hidden">' +
+    '<div class="js-webchat-advisers-unavailable govuk-!-display-none">Unavailable</div>' +
+    '<div class="js-webchat-advisers-busy govuk-!-display-none">Busy</div>' +
+    '<div class="js-webchat-advisers-available govuk-!-display-none">' +
       'Available, <div class="js-webchat-open-button">chat now</div>' +
     '</div>' +
   '</div>'
@@ -69,47 +69,47 @@ describe('Webchat', function () {
         options.success(jsonNormalisedAvailable)
       })
       mount()
-      expect($advisersAvailable.hasClass('hidden')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether advisors are unavailable', function () {
       spyOn($, 'ajax').and.callFake(function (options) {
         options.success(jsonNormalisedUnavailable)
       })
       mount()
-      expect($advisersUnavailable.hasClass('hidden')).toBe(false)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether advisors are busy', function () {
       spyOn($, 'ajax').and.callFake(function (options) {
         options.success(jsonNormalisedBusy)
       })
       mount()
-      expect($advisersBusy.hasClass('hidden')).toBe(false)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should inform user whether there was an error', function () {
       spyOn($, 'ajax').and.callFake(function (options) {
         options.success(jsonNormalisedError)
       })
       mount()
-      expect($advisersError.hasClass('hidden')).toBe(false)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
     })
 
     it('should only track once per state change', function () {
@@ -136,18 +136,18 @@ describe('Webchat', function () {
       })
 
       mount()
-      expect($advisersAvailable.hasClass('hidden')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(false)
 
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersError.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
 
       clock.tick(POLL_INTERVAL)
 
-      expect($advisersError.hasClass('hidden')).toBe(false)
-      expect($advisersAvailable.hasClass('hidden')).toBe(true)
-      expect($advisersBusy.hasClass('hidden')).toBe(true)
-      expect($advisersUnavailable.hasClass('hidden')).toBe(true)
+      expect($advisersError.hasClass('govuk-!-display-none')).toBe(false)
+      expect($advisersAvailable.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersBusy.hasClass('govuk-!-display-none')).toBe(true)
+      expect($advisersUnavailable.hasClass('govuk-!-display-none')).toBe(true)
       expect(analyticsCalled).toBe(2)
       expect(analyticsReceived).toEqual(analyticsExpects)
       clock.tick(POLL_INTERVAL)