@ministryofjustice/frontend 3.3.0 → 3.4.0

package/moj/components/timeline/_timeline.scss

@@ -3,44 +3,43 @@
    ========================================================================== */
 
 .moj-timeline {
+  position: relative;
   margin-bottom: govuk-spacing(4);
   overflow: hidden;
-  position: relative;
 
-  &:before {
-    background-color: $govuk-brand-colour;
+  &::before {
     content: "";
-    height: 100%;
-    left: 0;
     position: absolute;
     top: govuk-spacing(2);
+    left: 0;
     width: 5px;
+    height: 100%;
+    background-color: $govuk-brand-colour;
   }
-
 }
 
 .moj-timeline--full {
   margin-bottom: 0;
-  &:before {
+
+  &::before {
     height: calc(100% - 75px);
   }
 }
 
 .moj-timeline__item {
+  position: relative;
   padding-bottom: govuk-spacing(6);
   padding-left: govuk-spacing(4);
-  position: relative;
 
-  &:before {
-    background-color: $govuk-brand-colour;
+  &::before {
     content: "";
-    height: 5px;
-    left: 0;
     position: absolute;
     top: govuk-spacing(2);
+    left: 0;
     width: 15px;
+    height: 5px;
+    background-color: $govuk-brand-colour;
   }
-
 }
 
 .moj-timeline__title {
@@ -50,9 +49,9 @@
 
 .moj-timeline__byline {
   @include govuk-font($size: 19);
-  color: $govuk-secondary-text-colour;
   display: inline;
   margin: 0;
+  color: $govuk-secondary-text-colour;
 }
 
 .moj-timeline__date {
@@ -71,9 +70,9 @@
    ========================================================================== */
 
 .moj-timeline__documents {
-  list-style: none;
   margin-bottom: 0;
   padding-left: 0;
+  list-style: none;
 }
 
 .moj-timeline__document-item {
@@ -82,14 +81,13 @@
   &:last-child {
     margin-bottom: 0;
   }
-
 }
 
 .moj-timeline__document-icon {
-  float: left;
   margin-top: 4px;
   margin-right: 4px;
-  fill: currentColor;
+  float: left;
+  fill: currentcolor;
 
   @media screen and (forced-colors: active) {
     fill: linkText;
@@ -97,11 +95,11 @@
 }
 
 .moj-timeline__document-link {
+  padding-left: govuk-spacing(5);
   background-image: url(#{$moj-images-path}icon-document.svg);
   background-repeat: no-repeat;
-  background-size: 20px 16px;
   background-position: 0 50%;
-  padding-left: govuk-spacing(5);
+  background-size: 20px 16px;
 
   &:focus {
     color: govuk-colour("black"); // Focus colour on yellow should really be black.

package/moj/filters/all.js

@@ -1,41 +1,41 @@
-const moment = require('moment');
+const moment = require('moment')
 
 module.exports = function () {
   /**
    * Instantiate object used to store the methods registered as a
    * 'filter' (of the same name) within nunjucks. You can override
    * gov.uk core filters by creating filter methods of the same name.
-   * @type {Object}
+   *
+   * @type {object}
    */
-  let filters = {}
+  const filters = {}
 
   /* ------------------------------------------------------------------
     date filter for use in Nunjucks
     example: {{ params.date | date("DD/MM/YYYY") }}
     outputs: 01/01/1970
   ------------------------------------------------------------------ */
-  filters.date = function(timestamp, format) {
-    return moment(timestamp).format(format);
+  filters.date = function (timestamp, format) {
+    return moment(timestamp).format(format)
   }
 
   /* ------------------------------------------------------------------
     utility functions for use in mojDate function/filter
   ------------------------------------------------------------------ */
   function govDate(timestamp) {
-    return moment(timestamp).format('D MMMM YYYY');
+    return moment(timestamp).format('D MMMM YYYY')
   }
-  
+
   function govShortDate(timestamp) {
-    return moment(timestamp).format('D MMM YYYY');
+    return moment(timestamp).format('D MMM YYYY')
   }
-  
+
   function govTime(timestamp) {
-    let t = moment(timestamp);
-    if(t.minutes() > 0) {
-      return t.format('h:mma');
-    } else {
-      return t.format('ha');
+    const t = moment(timestamp)
+    if (t.minutes() > 0) {
+      return t.format('h:mma')
     }
+    return t.format('ha')
   }
 
   /* ------------------------------------------------------------------
@@ -43,27 +43,25 @@ module.exports = function () {
     example: {{ params.date | mojDate("datetime") }}
     outputs: 1 Jan 1970 at 1:32pm
   ------------------------------------------------------------------ */
-  filters.mojDate = function(timestamp, type) {
-
-    switch(type) {
-      case "datetime":
-        return govDate(timestamp) + " at " + govTime(timestamp);
-      case "shortdatetime":
-        return govShortDate(timestamp) + " at " + govTime(timestamp);
-      case "date":
-        return govDate(timestamp);
-      case "shortdate":
-        return govShortDate(timestamp);
-      case "time":
-        return govTime(timestamp);
+  filters.mojDate = function (timestamp, type) {
+    switch (type) {
+      case 'datetime':
+        return `${govDate(timestamp)} at ${govTime(timestamp)}`
+      case 'shortdatetime':
+        return `${govShortDate(timestamp)} at ${govTime(timestamp)}`
+      case 'date':
+        return govDate(timestamp)
+      case 'shortdate':
+        return govShortDate(timestamp)
+      case 'time':
+        return govTime(timestamp)
       default:
-        return timestamp;
+        return timestamp
     }
-
   }
 
   /* ------------------------------------------------------------------
     keep the following line to return your filters to the app
   ------------------------------------------------------------------ */
-  return filters;
+  return filters
 }

package/moj/filters/prototype-kit-13-filters.js

@@ -1,8 +1,9 @@
 const { addFilter } = require('govuk-prototype-kit').views
+
 const getAllFilters = require('./all')
 
 const allFilters = getAllFilters()
 
-Object.keys(allFilters).forEach(name => {
+Object.keys(allFilters).forEach((name) => {
   addFilter(name, allFilters[name])
 })

package/moj/helpers/_all.scss

@@ -1 +1,2 @@
 @import "hidden";
+@import "links";

package/moj/helpers/_hidden.scss

@@ -1,3 +1,3 @@
 @mixin moj-hidden() {
   display: none;
-}
+}

package/moj/helpers/_links.scss

@@ -0,0 +1,20 @@
+@import '../settings/colours';
+
+@mixin moj-link-style-warning {
+  &:link,
+  &:visited {
+    color: $moj-warning-link-colour;
+  }
+
+  &:hover {
+    color: scale-color($moj-warning-link-colour, $lightness: -30%);
+  }
+
+  &:active {
+    color: $moj-warning-colour;
+  }
+
+  &:focus {
+    color: $govuk-focus-text-colour;
+  }
+}

package/moj/helpers.js

@@ -1,51 +1,180 @@
-MOJFrontend.removeAttributeValue = function(el, attr, value) {
-  var re, m;
+MOJFrontend.removeAttributeValue = function (el, attr, value) {
+  let re, m
   if (el.getAttribute(attr)) {
-    if (el.getAttribute(attr) == value) {
-      el.removeAttribute(attr);
+    if (el.getAttribute(attr) === value) {
+      el.removeAttribute(attr)
     } else {
-      re = new RegExp('(^|\\s)' + value + '(\\s|$)');
-      m = el.getAttribute(attr).match(re);
-      if (m && m.length == 3) {
-        el.setAttribute(attr, el.getAttribute(attr).replace(re, (m[1] && m[2])?' ':''))
+      re = new RegExp(`(^|\\s)${value}(\\s|$)`)
+      m = el.getAttribute(attr).match(re)
+      if (m && m.length === 3) {
+        el.setAttribute(
+          attr,
+          el.getAttribute(attr).replace(re, m[1] && m[2] ? ' ' : '')
+        )
       }
     }
   }
 }
 
-MOJFrontend.addAttributeValue = function(el, attr, value) {
-  var re;
+MOJFrontend.addAttributeValue = function (el, attr, value) {
+  let re
   if (!el.getAttribute(attr)) {
-    el.setAttribute(attr, value);
-  }
-  else {
-    re = new RegExp('(^|\\s)' + value + '(\\s|$)');
+    el.setAttribute(attr, value)
+  } else {
+    re = new RegExp(`(^|\\s)${value}(\\s|$)`)
     if (!re.test(el.getAttribute(attr))) {
-      el.setAttribute(attr, el.getAttribute(attr) + ' ' + value);
+      el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`)
     }
   }
-};
+}
 
-MOJFrontend.dragAndDropSupported = function() {
-  var div = document.createElement('div');
-  return typeof div.ondrop != 'undefined';
-};
+MOJFrontend.dragAndDropSupported = function () {
+  const div = document.createElement('div')
+  return typeof div.ondrop !== 'undefined'
+}
 
-MOJFrontend.formDataSupported = function() {
-  return typeof FormData == 'function';
-};
+MOJFrontend.formDataSupported = function () {
+  return typeof FormData === 'function'
+}
 
-MOJFrontend.fileApiSupported = function() {
-  var input = document.createElement('input');
-  input.type = 'file';
-  return typeof input.files != 'undefined';
-};
+MOJFrontend.fileApiSupported = function () {
+  const input = document.createElement('input')
+  input.type = 'file'
+  return typeof input.files !== 'undefined'
+}
 
-MOJFrontend.nodeListForEach = function(nodes, callback) {
+MOJFrontend.nodeListForEach = function (nodes, callback) {
   if (window.NodeList.prototype.forEach) {
     return nodes.forEach(callback)
   }
-  for (var i = 0; i < nodes.length; i++) {
+  for (let i = 0; i < nodes.length; i++) {
     callback.call(window, nodes[i], i, nodes)
   }
-};
+}
+
+/**
+ * Find an elements next sibling
+ *
+ * Utility function to find an elements next sibling matching the provided
+ * selector.
+ *
+ * @param {HTMLElement} element - Element to find siblings for
+ * @param {string} selector - selector for required sibling
+ */
+MOJFrontend.getNextSibling = function ($element, selector) {
+  if (!$element) return
+  // Get the next sibling element
+  let $sibling = $element.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return $sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while ($sibling) {
+    if ($sibling.matches(selector)) return $sibling
+    $sibling = $sibling.nextElementSibling
+  }
+}
+
+/**
+ * Find an elements preceding sibling
+ *
+ * Utility function to find an elements previous sibling matching the provided
+ * selector.
+ *
+ * @param {HTMLElement} element - Element to find siblings for
+ * @param {string} selector - selector for required sibling
+ */
+MOJFrontend.getPreviousSibling = function ($element, selector) {
+  if (!$element) return
+  // Get the previous sibling element
+  let $sibling = $element.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return $sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while ($sibling) {
+    if ($sibling.matches(selector)) return $sibling
+    $sibling = $sibling.previousElementSibling
+  }
+}
+
+MOJFrontend.findNearestMatchingElement = function ($element, selector) {
+  // If no element or selector is provided, return null
+  if (!$element) return
+  if (!selector) return
+
+  // Start with the current element
+  let $currentElement = $element
+
+  while ($currentElement) {
+    // First check the current element
+    if ($currentElement.matches(selector)) {
+      return $currentElement
+    }
+
+    // Check all previous siblings
+    let $sibling = $currentElement.previousElementSibling
+    while ($sibling) {
+      // Check if the sibling itself is a heading
+      if ($sibling.matches(selector)) {
+        return $sibling
+      }
+      $sibling = $sibling.previousElementSibling
+    }
+
+    // If no match found in siblings, move up to parent
+    $currentElement = $currentElement.parentElement
+  }
+}
+
+/**
+ * Move focus to element
+ *
+ * Sets tabindex to -1 to make the element programmatically focusable,
+ * but removes it on blur as the element doesn't need to be focused again.
+ *
+ * @param {HTMLElement} $element - HTML element
+ * @param {object} [options] - Handler options
+ * @param {function(this: HTMLElement): void} [options.onBeforeFocus] - Callback before focus
+ * @param {function(this: HTMLElement): void} [options.onBlur] - Callback on blur
+ */
+MOJFrontend.setFocus = function ($element, options = {}) {
+  const isFocusable = $element.getAttribute('tabindex')
+
+  if (!isFocusable) {
+    $element.setAttribute('tabindex', '-1')
+  }
+
+  /**
+   * Handle element focus
+   */
+  function onFocus() {
+    $element.addEventListener('blur', onBlur, { once: true })
+  }
+
+  /**
+   * Handle element blur
+   */
+  function onBlur() {
+    if (options.onBlur) {
+      options.onBlur.call($element)
+    }
+
+    if (!isFocusable) {
+      $element.removeAttribute('tabindex')
+    }
+  }
+
+  // Add listener to reset element on blur, after focus
+  $element.addEventListener('focus', onFocus, { once: true })
+
+  // Focus element
+  if (options.onBeforeFocus) {
+    options.onBeforeFocus.call($element)
+  }
+  $element.focus()
+}

package/moj/helpers.spec.js

@@ -0,0 +1,235 @@
+require('./helpers.js')
+
+describe('helpers', () => {
+  describe('getNextSibling', () => {
+    beforeEach(() => {
+      const html = `
+        <div id="container">
+          <h1 id="title">Heading 1</h1>
+          <p>this is some text</p>
+          <ul id="list">
+            <li id="item-1" class="item">item 1</li>
+            <li id="item-2" class="item">item 2</li>
+            <li id="item-3" class="selected">item 3</li>
+            <li id="item-4" class="item">item 4</li>
+          </ul>
+        </div>`
+
+      document.body.insertAdjacentHTML('afterbegin', html)
+    })
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('returns undefined with no element', () => {
+      const result = MOJFrontend.getNextSibling()
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns null with no selector if no sibling', () => {
+      const element = document.querySelector('#item-4')
+      const result = MOJFrontend.getNextSibling(element)
+
+      expect(result).toBeNull()
+    })
+
+    test('returns first sibling with no selector', () => {
+      const element = document.querySelector('#item-2')
+      const expected = document.querySelector('#item-3')
+      const result = MOJFrontend.getNextSibling(element)
+
+      expect(result).toBe(expected)
+    })
+
+    test('returns undefined if no sibling matches selector', () => {
+      const element = document.querySelector('#item-1')
+      const result = MOJFrontend.getNextSibling(element, '#not-present')
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns matching sibling', () => {
+      const element = document.querySelector('#item-1')
+      const expected = document.querySelector('#item-3')
+      const result = MOJFrontend.getNextSibling(element, '.selected')
+
+      expect(result).toBe(expected)
+    })
+
+    test('returns first matching sibling', () => {
+      const element = document.querySelector('#item-1')
+      const expected = document.querySelector('#item-2')
+      const result = MOJFrontend.getNextSibling(element, '.item')
+
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe('getPreviousSibling', () => {
+    beforeEach(() => {
+      const html = `
+        <div id="container">
+          <h1 id="title">Heading 1</h1>
+          <p>this is some text</p>
+          <ul id="list">
+            <li id="item-1" class="item">item 1</li>
+            <li id="item-2" class="item">item 2</li>
+            <li id="item-3" class="selected">item 3</li>
+            <li id="item-4" class="item">item 4</li>
+          </ul>
+        </div>`
+
+      document.body.insertAdjacentHTML('afterbegin', html)
+    })
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('returns undefined with no element', () => {
+      const result = MOJFrontend.getPreviousSibling()
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns undefined with no selector if no sibling', () => {
+      const element = document.querySelector('#item-1')
+      const result = MOJFrontend.getPreviousSibling(element)
+
+      expect(result).toBeNull()
+    })
+
+    test('returns first sibling with no selector', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#item-2')
+      const result = MOJFrontend.getPreviousSibling(element)
+
+      expect(result).toBe(expected)
+    })
+
+    test('returns undefined if no sibling matches selector', () => {
+      const element = document.querySelector('#item-4')
+      const result = MOJFrontend.getPreviousSibling(element, '#not-present')
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns matching sibling', () => {
+      const element = document.querySelector('#item-4')
+      const expected = document.querySelector('#item-3')
+      const result = MOJFrontend.getPreviousSibling(element, '.selected')
+
+      expect(result).toBe(expected)
+    })
+
+    test('returns first matching sibling', () => {
+      const element = document.querySelector('#item-4')
+      const expected = document.querySelector('#item-2')
+      const result = MOJFrontend.getPreviousSibling(element, '.item')
+
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe('findNearestMatchingElement', () => {
+    beforeEach(() => {
+      const html = `
+        <div id="container">
+          <h1 id="title">Heading 1</h1>
+          <p>this is some text</p>
+          <ul id="list">
+            <li id="item-1" class="item">item 1</li>
+            <li id="item-2" class="item">item 2</li>
+            <li id="item-3" class="selected">item 3</li>
+            <li id="item-4" class="item">item 4</li>
+          </ul>
+        </div>`
+
+      document.body.insertAdjacentHTML('afterbegin', html)
+    })
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('returns undefined with no element', () => {
+      const result = MOJFrontend.findNearestMatchingElement()
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns undefined with no selector', () => {
+      const element = document.querySelector('#item-1')
+      const result = MOJFrontend.findNearestMatchingElement(element)
+
+      expect(result).toBeUndefined()
+    })
+
+    test('returns undefined if element not found', () => {
+      const element = document.querySelector('#item-1')
+      const result = MOJFrontend.findNearestMatchingElement(
+        element,
+        '#not-present'
+      )
+
+      expect(result).toBeUndefined()
+    })
+
+    test("doesn't find next siblings", () => {
+      const element = document.querySelector('#item-2')
+      const result = MOJFrontend.findNearestMatchingElement(element, '#item-3')
+
+      expect(result).toBeUndefined()
+    })
+
+    test('finds previous sibling', () => {
+      const element = document.querySelector('#item-2')
+      const expected = document.querySelector('#item-1')
+      const result = MOJFrontend.findNearestMatchingElement(element, '#item-1')
+
+      expect(result).toBe(expected)
+    })
+
+    test('finds first matching sibling', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#item-2')
+      const result = MOJFrontend.findNearestMatchingElement(element, '.item')
+
+      expect(result).toBe(expected)
+    })
+
+    test('returns element if matching', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#item-3')
+      const result = MOJFrontend.findNearestMatchingElement(element, 'li')
+
+      expect(result).toBe(expected)
+    })
+
+    test('if no sibling, finds matching ancestor', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#list')
+      const result = MOJFrontend.findNearestMatchingElement(element, 'ul')
+
+      expect(result).toBe(expected)
+    })
+
+    test('return an ancestor sibling if matched', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#title')
+      const result = MOJFrontend.findNearestMatchingElement(element, 'h1')
+
+      expect(result).toBe(expected)
+    })
+
+    test('continues traversing until match is found', () => {
+      const element = document.querySelector('#item-3')
+      const expected = document.querySelector('#container')
+      const result = MOJFrontend.findNearestMatchingElement(element, 'div')
+
+      expect(result).toBe(expected)
+    })
+  })
+})