@ministryofjustice/frontend 3.3.0 → 3.4.0

package/moj/components/filter/README.md

@@ -1 +1 @@
-#Filters
+#Filters

package/moj/components/filter/_filter.scss

@@ -7,48 +7,48 @@
   box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
 
   &:focus {
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
+    box-shadow:
+      0 -2px $govuk-focus-colour,
+      0 4px $govuk-focus-text-colour;
   }
 }
 
-
 .moj-filter__header {
+  padding: govuk-spacing(2) govuk-spacing(4);
   background-color: govuk-colour("mid-grey");
   font-size: 0; // Hide whitespace between elements
-  padding: govuk-spacing(2) govuk-spacing(4);
   text-align: justify; // Trick to remove the need for floats
 
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     display: inline-block;
     width: 100%;
   }
 
-  [class^=govuk-heading-] {
+  [class^="govuk-heading-"] {
     margin-bottom: 0;
   }
-
 }
 
-
 // JavaScript
 .moj-filter__legend {
-  overflow: visible; // Override govuk to allow for focus style to be seen
   width: 100%;
+  overflow: visible; // Override govuk to allow for focus style to be seen
 
   button {
     @include govuk-font($size: 24, $weight: bold);
-    background-color: transparent;
+    appearance: none;
     box-sizing: border-box;
-    border-radius: 0;
-    border: 0 none;
-    cursor: pointer; // Adam would not approve
     display: block;
+    position: relative;
+    width: 100%;
     margin: 0;
     padding: 0;
-    position: relative;
+    border: 0 none;
+    border-radius: 0;
+    background-color: transparent;
     text-align: left;
-    width: 100%;
+    cursor: pointer; // Adam would not approve
     -webkit-appearance: none;
 
     // Fix unwanted button padding in Firefox
@@ -58,31 +58,24 @@
     }
 
     &::after {
-      background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);
-      background-position: 0 0;
       content: "";
       display: block;
+      position: absolute;
+      top: 50%;
+      right: 0;
+      width: 16px;
       height: 16px;
       margin-top: -8px; // Half the height of the icon
-      position: absolute; top: 50%; right: 0;
-      width: 16px;
-    }
-
-    &[aria-expanded="true"] {
-      &::after {
-        background-position: 16px 16px;
-      }
+      background-image: url(#{$moj-images-path}icon-toggle-plus-minus.svg);
+      background-position: 0 0;
     }
 
-    &:focus {
-      // @include govuk-focusable;
+    &[aria-expanded="true"]::after {
+      background-position: 16px 16px;
     }
-
   }
-
 }
 
-
 .moj-filter__header-title,
 .moj-filter__header-action {
   display: inline-block;
@@ -90,24 +83,26 @@
   vertical-align: middle;
 }
 
-
 .moj-filter__close {
+  @include govuk-font(19);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
   // @include govuk-focusable;
   color: govuk-colour("black");
-  cursor: pointer; // I know Adam won’t like this
   background-color: transparent;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
+  cursor: pointer; // I know Adam won’t like this
   -webkit-appearance: none;
-
+  appearance: none;
 
   &:focus {
-    background-color: $govuk-focus-colour;
-    color: $govuk-focus-text-colour;
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     outline: none;
+    color: $govuk-focus-text-colour;
+    background-color: $govuk-focus-colour;
+    box-shadow:
+      0 -2px $govuk-focus-colour,
+      0 4px $govuk-focus-text-colour;
   }
 
   // Fix unwanted button padding in Firefox
@@ -117,50 +112,39 @@
   }
 
   &::before {
-    background-image: url(#{$moj-images-path}icon-close-cross-black.svg);
     content: "";
     display: inline-block;
-    height: 14px;
-    margin-right: govuk-spacing(1);
     position: relative;
     top: -1px; // Alignment tweak
-    vertical-align: middle;
     width: 14px;
+    height: 14px;
+    margin-right: govuk-spacing(1);
+    background-image: url(#{$moj-images-path}icon-close-cross-black.svg);
+    vertical-align: middle;
   }
-
-}
-
-
-.moj-filter__close {
-  @include govuk-font(19);
 }
 
-
 .moj-filter__selected {
+  padding: govuk-spacing(4);
   background-color: govuk-colour("light-grey");
   box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
-  padding: govuk-spacing(4);
 
   ul:last-of-type {
     margin-bottom: 0; // IE9 +
   }
-
 }
 
-
 .moj-filter__selected-heading {
   font-size: 0; // Hide whitespace between elements
   text-align: justify; // Trick to remove the need for floats
 
-  &:after {
-    content: '';
+  &::after {
+    content: "";
     display: inline-block;
     width: 100%;
   }
-
 }
 
-
 .moj-filter__heading-title,
 .moj-filter__heading-action {
   @include govuk-font(16);
@@ -169,28 +153,25 @@
   vertical-align: middle;
 }
 
-
 .moj-filter-tags {
-  font-size: 0;
   margin-bottom: govuk-spacing(4); // Needs to adjust to 15px on mobile
   padding-left: 0;
+  font-size: 0;
 
   li {
     display: inline-block;
     margin-right: govuk-spacing(2);
   }
-
 }
 
-
 .moj-filter__tag {
   @include govuk-font(16);
-  background-color: govuk-colour("white");
-  border: 1px solid govuk-colour("black");
-  color: govuk-colour("black");
   display: inline-block;
   margin-top: govuk-spacing(1);
   padding: govuk-spacing(1);
+  border: 1px solid govuk-colour("black");
+  color: govuk-colour("black");
+  background-color: govuk-colour("white");
   text-decoration: none;
 
   &:link,
@@ -204,35 +185,32 @@
   }
 
   &:hover {
-    background-color: govuk-colour("black");
     color: govuk-colour("white");
+    background-color: govuk-colour("black");
   }
 
-  &:after {
-    background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);
+  &::after {
     content: "";
     display: inline-block;
-    font-weight: bold;
+    width: 10px;
     height: 10px;
     margin-left: govuk-spacing(1);
+    background-image: url(#{$moj-images-path}icon-tag-remove-cross.svg);
+    font-weight: bold;
     vertical-align: middle;
-    width: 10px;
   }
 
-  &:hover:after {
+  &:hover::after {
     background-image: url(#{$moj-images-path}icon-tag-remove-cross-white.svg);
   }
-
 }
 
-
 .moj-filter__options {
-  box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
   margin-top: -1px;
   padding: govuk-spacing(4);
+  box-shadow: inset 0 0 0 1px govuk-colour("mid-grey");
 
   div:last-of-type {
     margin-bottom: 0; // IE9 +
   }
-
 }

package/moj/components/filter-toggle-button/filter-toggle-button.js

@@ -1,87 +1,91 @@
-MOJFrontend.FilterToggleButton = function(options) {
-  this.options = options;
-  this.container = $(this.options.toggleButton.container);
-  this.filterContainer = $(this.options.filter.container);
+MOJFrontend.FilterToggleButton = function (options) {
+  this.options = options
+  this.container = $(this.options.toggleButton.container)
+  this.filterContainer = $(this.options.filter.container)
 
-  this.createToggleButton();
-  this.setupResponsiveChecks();
-  this.filterContainer.attr('tabindex', '-1');
-  if(this.options.startHidden) {
-    this.hideMenu();
+  this.createToggleButton()
+  this.setupResponsiveChecks()
+  this.filterContainer.attr('tabindex', '-1')
+  if (this.options.startHidden) {
+    this.hideMenu()
   }
-};
+}
 
-MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function() {
-  this.mq = window.matchMedia(this.options.bigModeMediaQuery);
-  this.mq.addListener($.proxy(this, 'checkMode'));
-  this.checkMode(this.mq);
-};
+MOJFrontend.FilterToggleButton.prototype.setupResponsiveChecks = function () {
+  this.mq = window.matchMedia(this.options.bigModeMediaQuery)
+  this.mq.addListener($.proxy(this, 'checkMode'))
+  this.checkMode(this.mq)
+}
 
-MOJFrontend.FilterToggleButton.prototype.createToggleButton = function() {
-  this.menuButton = $('<button class="govuk-button '+this.options.toggleButton.classes+'" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.showText+'</button>');
-  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'));
-  this.container.append(this.menuButton);
-};
+MOJFrontend.FilterToggleButton.prototype.createToggleButton = function () {
+  this.menuButton = $(
+    `<button class="govuk-button ${this.options.toggleButton.classes}" type="button" aria-haspopup="true" aria-expanded="false">${this.options.toggleButton.showText}</button>`
+  )
+  this.menuButton.on('click', $.proxy(this, 'onMenuButtonClick'))
+  this.container.append(this.menuButton)
+}
 
-MOJFrontend.FilterToggleButton.prototype.checkMode = function(mq) {
-  if(mq.matches) {
-    this.enableBigMode();
+MOJFrontend.FilterToggleButton.prototype.checkMode = function (mq) {
+  if (mq.matches) {
+    this.enableBigMode()
   } else {
-    this.enableSmallMode();
+    this.enableSmallMode()
   }
-};
+}
 
-MOJFrontend.FilterToggleButton.prototype.enableBigMode = function() {
-  this.showMenu();
-  this.removeCloseButton();
-};
+MOJFrontend.FilterToggleButton.prototype.enableBigMode = function () {
+  this.showMenu()
+  this.removeCloseButton()
+}
 
-MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function() {
-  this.hideMenu();
-  this.addCloseButton();
-};
+MOJFrontend.FilterToggleButton.prototype.enableSmallMode = function () {
+  this.hideMenu()
+  this.addCloseButton()
+}
 
-MOJFrontend.FilterToggleButton.prototype.addCloseButton = function() {
-  if(this.options.closeButton) {
-    this.closeButton = $('<button class="moj-filter__close" type="button">'+this.options.closeButton.text+'</button>');
-    this.closeButton.on('click', $.proxy(this, 'onCloseClick'));
-    $(this.options.closeButton.container).append(this.closeButton);
+MOJFrontend.FilterToggleButton.prototype.addCloseButton = function () {
+  if (this.options.closeButton) {
+    this.closeButton = $(
+      `<button class="moj-filter__close" type="button">${this.options.closeButton.text}</button>`
+    )
+    this.closeButton.on('click', $.proxy(this, 'onCloseClick'))
+    $(this.options.closeButton.container).append(this.closeButton)
   }
-};
+}
 
-MOJFrontend.FilterToggleButton.prototype.onCloseClick = function() {
-  this.hideMenu();
-  this.menuButton.focus();
-};
+MOJFrontend.FilterToggleButton.prototype.onCloseClick = function () {
+  this.hideMenu()
+  this.menuButton.focus()
+}
 
-MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function() {
-  if(this.closeButton) {
-    this.closeButton.remove();
-    this.closeButton = null;
+MOJFrontend.FilterToggleButton.prototype.removeCloseButton = function () {
+  if (this.closeButton) {
+    this.closeButton.remove()
+    this.closeButton = null
   }
-};
+}
 
-MOJFrontend.FilterToggleButton.prototype.hideMenu = function() {
-  this.menuButton.attr('aria-expanded', 'false');
-  this.filterContainer.addClass('moj-js-hidden');
-  this.menuButton.text(this.options.toggleButton.showText);
-};
+MOJFrontend.FilterToggleButton.prototype.hideMenu = function () {
+  this.menuButton.attr('aria-expanded', 'false')
+  this.filterContainer.addClass('moj-js-hidden')
+  this.menuButton.text(this.options.toggleButton.showText)
+}
 
-MOJFrontend.FilterToggleButton.prototype.showMenu = function() {
-  this.menuButton.attr('aria-expanded', 'true');
-  this.filterContainer.removeClass('moj-js-hidden');
-  this.menuButton.text(this.options.toggleButton.hideText);
-};
+MOJFrontend.FilterToggleButton.prototype.showMenu = function () {
+  this.menuButton.attr('aria-expanded', 'true')
+  this.filterContainer.removeClass('moj-js-hidden')
+  this.menuButton.text(this.options.toggleButton.hideText)
+}
 
-MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function() {
-  this.toggle();
-};
+MOJFrontend.FilterToggleButton.prototype.onMenuButtonClick = function () {
+  this.toggle()
+}
 
-MOJFrontend.FilterToggleButton.prototype.toggle = function() {
-  if(this.menuButton.attr('aria-expanded') == 'false') {
-    this.showMenu();
-    this.filterContainer.get(0).focus();
+MOJFrontend.FilterToggleButton.prototype.toggle = function () {
+  if (this.menuButton.attr('aria-expanded') === 'false') {
+    this.showMenu()
+    this.filterContainer.get(0).focus()
   } else {
-    this.hideMenu();
+    this.hideMenu()
   }
-};
+}