@ministryofjustice/frontend 3.3.1 → 3.5.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,218 @@
-MOJFrontend.removeAttributeValue = function(el, attr, value) {
-  var re, m;
-  if (el.getAttribute(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])?' ':''))
-      }
-    }
-  }
-}
-
-MOJFrontend.addAttributeValue = function(el, attr, value) {
-  var re;
-  if (!el.getAttribute(attr)) {
-    el.setAttribute(attr, value);
-  }
-  else {
-    re = new RegExp('(^|\\s)' + value + '(\\s|$)');
-    if (!re.test(el.getAttribute(attr))) {
-      el.setAttribute(attr, el.getAttribute(attr) + ' ' + value);
-    }
-  }
-};
-
-MOJFrontend.dragAndDropSupported = function() {
-  var div = document.createElement('div');
-  return typeof div.ondrop != 'undefined';
-};
-
-MOJFrontend.formDataSupported = function() {
-  return typeof FormData == 'function';
-};
-
-MOJFrontend.fileApiSupported = function() {
-  var input = document.createElement('input');
-  input.type = 'file';
-  return typeof input.files != 'undefined';
-};
-
-MOJFrontend.nodeListForEach = function(nodes, callback) {
-  if (window.NodeList.prototype.forEach) {
-    return nodes.forEach(callback)
-  }
-  for (var i = 0; i < nodes.length; i++) {
-    callback.call(window, nodes[i], i, nodes)
-  }
-};
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MOJFrontend = factory());
+})(this, (function () { 'use strict';
+
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
+	var helpers$1;
+	var hasRequiredHelpers;
+
+	function requireHelpers () {
+		if (hasRequiredHelpers) return helpers$1;
+		hasRequiredHelpers = 1;
+		function removeAttributeValue(el, attr, value) {
+		  let re, m;
+		  if (el.getAttribute(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] ? ' ' : '')
+		        );
+		      }
+		    }
+		  }
+		}
+
+		function addAttributeValue(el, attr, value) {
+		  let re;
+		  if (!el.getAttribute(attr)) {
+		    el.setAttribute(attr, value);
+		  } else {
+		    re = new RegExp(`(^|\\s)${value}(\\s|$)`);
+		    if (!re.test(el.getAttribute(attr))) {
+		      el.setAttribute(attr, `${el.getAttribute(attr)} ${value}`);
+		    }
+		  }
+		}
+
+		function dragAndDropSupported() {
+		  const div = document.createElement('div');
+		  return typeof div.ondrop !== 'undefined'
+		}
+
+		function formDataSupported() {
+		  return typeof FormData === 'function'
+		}
+
+		function fileApiSupported() {
+		  const input = document.createElement('input');
+		  input.type = 'file';
+		  return typeof input.files !== 'undefined'
+		}
+
+		function nodeListForEach(nodes, callback) {
+		  if (window.NodeList.prototype.forEach) {
+		    return nodes.forEach(callback)
+		  }
+		  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
+		 */
+		function getNextSibling($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
+		 */
+		function getPreviousSibling($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;
+		  }
+		}
+
+		function findNearestMatchingElement($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
+		 */
+		function setFocus($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();
+		}
+
+		helpers$1 = {
+		  removeAttributeValue,
+		  addAttributeValue,
+		  dragAndDropSupported,
+		  formDataSupported,
+		  fileApiSupported,
+		  nodeListForEach,
+		  getNextSibling,
+		  getPreviousSibling,
+		  findNearestMatchingElement,
+		  setFocus
+		};
+		return helpers$1;
+	}
+
+	var helpersExports = requireHelpers();
+	var helpers = /*@__PURE__*/getDefaultExportFromCjs(helpersExports);
+
+	return helpers;
+
+}));

package/moj/init.js

@@ -1,5 +1,5 @@
 if (window.GOVUKPrototypeKit && window.GOVUKPrototypeKit.documentReady) {
   window.GOVUKPrototypeKit.documentReady(function () {
-    window.MOJFrontend.initAll();
-  });
+    window.MOJFrontend.initAll()
+  })
 }