@ministryofjustice/frontend 7.1.1 → 7.2.0

package/moj/all.bundle.js

@@ -14,7 +14,7 @@
    *
    * {@link https://github.com/ministryofjustice/moj-frontend/releases}
    */
-  const version = '7.1.1';
+  const version = '7.2.0';
 
   class AddAnother extends govukFrontend.Component {
     /**

package/moj/all.bundle.mjs

@@ -341,7 +341,7 @@ function createAll(Component, config, scopeOrOptions) {
  *
  * {@link https://github.com/ministryofjustice/moj-frontend/releases}
  */
-const version = '7.1.1';
+const version = '7.2.0';
 
 class AddAnother extends Component {
   /**

package/moj/common/moj-frontend-version.mjs

@@ -8,7 +8,7 @@
  *
  * {@link https://github.com/ministryofjustice/moj-frontend/releases}
  */
-const version = '7.1.1';
+const version = '7.2.0';
 
 export { version };
 //# sourceMappingURL=moj-frontend-version.mjs.map

package/moj/components/header/_header.scss

@@ -83,6 +83,10 @@
     &:hover {
       border-color: transparent;
     }
+
+    @include govuk-media-query($until: tablet) {
+      margin-top: govuk-spacing(1);
+    }
   }
 
   &--service-name {

package/moj/components/header/_header.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/header/_header.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,6BAA6B;EAC7B,6CAA6C;EAC7C,uCAAuC;AACzC;;AAEA;EACE,kBAAkB;EAClB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,WAAW;EACb;AACF;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,YAAY;EACd;AACF;;AAEA;;EAEE,qBAAqB;EACrB,mBAAmB;EACnB,gBAAgB,EAAE,uCAAuC;EACzD,oCAAoC;EACpC,4BAA4B;EAC5B,iBAAiB,EAAE,2CAA2C;EAC9D,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,4BAA4B;IAC5B,qBAAqB;EACvB;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,yBAAyB;IACzB,4BAA4B;EAC9B;;EAEA;IACE,sBAAsB;IACtB,+CAA+C;;IAE/C;MACE,yBAAyB;IAC3B;EACF;;EAEA;IACE,sBAAsB;IACtB,iDAAiD;;IAEjD;MACE,cAAc;IAChB;IACA;MACE,6BAA6B;IAC/B;;IAEA;MACE,yBAAyB;IAC3B;EACF;AACF;;AAEA;EACE,kBAAkB;EAClB,2BAA2B;;EAE3B;IACE,mCAAmC;EACrC;;EAEA;IACE,mBAAmB;IACnB,sBAAsB;EACxB;AACF;AACA,yDAAyD;AACzD;EACE;IACE,yBAAyB;EAC3B;AACF;;AAEA,YAAY;AACZ;EACE,kCAAkC;EAClC,4BAA4B;AAC9B;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;EAC9B,uBAAuB;;EAEvB;IACE,eAAe;EACjB;AACF;;AAEA;EACE,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;IAGE,cAAc;IACd,qBAAqB;EACvB;;EAEA;IACE,sDAAsD;IACtD,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE,qBAAqB;AACvB","file":"_header.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #HEADER\n   ========================================================================== */\n\n.moj-header {\n  padding-top: govuk-spacing(3);\n  border-bottom: 10px solid $govuk-brand-colour;\n  background-color: govuk-colour(\"black\");\n}\n\n.moj-header__container {\n  position: relative;\n  @include moj-width-container;\n  @include govuk-clearfix;\n}\n\n.moj-header__logo {\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: desktop) {\n    float: left;\n  }\n}\n\n.moj-header__logotype-crown {\n  position: relative;\n  top: -4px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__logotype-crest {\n  position: relative;\n  top: -8px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__content {\n  padding-bottom: govuk-spacing(2);\n\n  @include govuk-media-query($from: desktop) {\n    float: right;\n  }\n}\n\n.moj-header__link,\n.moj-header__link > a {\n  display: inline-block;\n  margin-bottom: -1px;\n  overflow: hidden; // Fixes focus gaps in background colour\n  border-bottom: 1px solid transparent;\n  color: govuk-colour(\"white\");\n  line-height: 25px; // Override due to alignment issue in Chrome\n  vertical-align: middle;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: govuk-colour(\"white\");\n    text-decoration: none;\n  }\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  &:focus {\n    border-color: transparent;\n    color: govuk-colour(\"black\");\n  }\n\n  &--organisation-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"bold\");\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n\n  &--service-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"normal\");\n\n    @include govuk-media-query($until: desktop) {\n      display: block;\n    }\n    @include govuk-media-query($from: desktop) {\n      margin-left: govuk-spacing(1);\n    }\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n}\n\n.moj-header__link a {\n  margin-bottom: 1px;\n  vertical-align: text-bottom;\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  @include govuk-media-query($until: desktop) {\n    margin-bottom: -1px;\n    vertical-align: middle;\n  }\n}\n// stylelint-disable-next-line selector-no-qualifying-type\nspan.moj-header__link {\n  &:hover {\n    border-color: transparent;\n  }\n}\n\n// Navigation\n.moj-header__navigation {\n  margin-top: govuk-spacing(1) - 2px;\n  color: govuk-colour(\"white\");\n}\n\n.moj-header__navigation-list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-header__navigation-item {\n  display: inline-block;\n  margin-right: govuk-spacing(4);\n  @include govuk-font(19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-header__navigation-link {\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  &:hover {\n    // stylelint-disable-next-line declaration-no-important\n    text-decoration: underline !important;\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n\n.moj-header__navigation-link[aria-current=\"page\"] {\n  text-decoration: none;\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/header/_header.scss"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,6BAA6B;EAC7B,6CAA6C;EAC7C,uCAAuC;AACzC;;AAEA;EACE,kBAAkB;EAClB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,WAAW;EACb;AACF;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,8BAA8B;EAC9B,mBAAmB;AACrB;;AAEA;EACE,gCAAgC;;EAEhC;IACE,YAAY;EACd;AACF;;AAEA;;EAEE,qBAAqB;EACrB,mBAAmB;EACnB,gBAAgB,EAAE,uCAAuC;EACzD,oCAAoC;EACpC,4BAA4B;EAC5B,iBAAiB,EAAE,2CAA2C;EAC9D,sBAAsB;EACtB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,4BAA4B;IAC5B,qBAAqB;EACvB;;EAEA;IACE,mCAAmC;EACrC;;EAEA;IACE,yBAAyB;IACzB,4BAA4B;EAC9B;;EAEA;IACE,sBAAsB;IACtB,+CAA+C;;IAE/C;MACE,yBAAyB;IAC3B;;IAEA;MACE,4BAA4B;IAC9B;EACF;;EAEA;IACE,sBAAsB;IACtB,iDAAiD;;IAEjD;MACE,cAAc;IAChB;IACA;MACE,6BAA6B;IAC/B;;IAEA;MACE,yBAAyB;IAC3B;EACF;AACF;;AAEA;EACE,kBAAkB;EAClB,2BAA2B;;EAE3B;IACE,mCAAmC;EACrC;;EAEA;IACE,mBAAmB;IACnB,sBAAsB;EACxB;AACF;AACA,yDAAyD;AACzD;EACE;IACE,yBAAyB;EAC3B;AACF;;AAEA,YAAY;AACZ;EACE,kCAAkC;EAClC,4BAA4B;AAC9B;;AAEA;EACE,SAAS;EACT,UAAU;EACV,YAAY,EAAE,+DAA+D;EAC7E,gBAAgB;AAClB;;AAEA;EACE,qBAAqB;EACrB,8BAA8B;EAC9B,uBAAuB;;EAEvB;IACE,eAAe;EACjB;AACF;;AAEA;EACE,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;IAGE,cAAc;IACd,qBAAqB;EACvB;;EAEA;IACE,sDAAsD;IACtD,qCAAqC;EACvC;;EAEA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE,qBAAqB;AACvB","file":"_header.scss","sourcesContent":["@use \"../../objects/width-container\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #HEADER\n   ========================================================================== */\n\n.moj-header {\n  padding-top: govuk-spacing(3);\n  border-bottom: 10px solid $govuk-brand-colour;\n  background-color: govuk-colour(\"black\");\n}\n\n.moj-header__container {\n  position: relative;\n  @include moj-width-container;\n  @include govuk-clearfix;\n}\n\n.moj-header__logo {\n  padding-bottom: govuk-spacing(1);\n\n  @include govuk-media-query($from: desktop) {\n    float: left;\n  }\n}\n\n.moj-header__logotype-crown {\n  position: relative;\n  top: -4px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__logotype-crest {\n  position: relative;\n  top: -8px;\n  margin-right: govuk-spacing(1);\n  vertical-align: top;\n}\n\n.moj-header__content {\n  padding-bottom: govuk-spacing(2);\n\n  @include govuk-media-query($from: desktop) {\n    float: right;\n  }\n}\n\n.moj-header__link,\n.moj-header__link > a {\n  display: inline-block;\n  margin-bottom: -1px;\n  overflow: hidden; // Fixes focus gaps in background colour\n  border-bottom: 1px solid transparent;\n  color: govuk-colour(\"white\");\n  line-height: 25px; // Override due to alignment issue in Chrome\n  vertical-align: middle;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    color: govuk-colour(\"white\");\n    text-decoration: none;\n  }\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  &:focus {\n    border-color: transparent;\n    color: govuk-colour(\"black\");\n  }\n\n  &--organisation-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"bold\");\n\n    &:hover {\n      border-color: transparent;\n    }\n\n    @include govuk-media-query($until: tablet) {\n      margin-top: govuk-spacing(1);\n    }\n  }\n\n  &--service-name {\n    vertical-align: middle;\n    @include govuk-font($size: 24, $weight: \"normal\");\n\n    @include govuk-media-query($until: desktop) {\n      display: block;\n    }\n    @include govuk-media-query($from: desktop) {\n      margin-left: govuk-spacing(1);\n    }\n\n    &:hover {\n      border-color: transparent;\n    }\n  }\n}\n\n.moj-header__link a {\n  margin-bottom: 1px;\n  vertical-align: text-bottom;\n\n  &:hover {\n    border-color: govuk-colour(\"white\");\n  }\n\n  @include govuk-media-query($until: desktop) {\n    margin-bottom: -1px;\n    vertical-align: middle;\n  }\n}\n// stylelint-disable-next-line selector-no-qualifying-type\nspan.moj-header__link {\n  &:hover {\n    border-color: transparent;\n  }\n}\n\n// Navigation\n.moj-header__navigation {\n  margin-top: govuk-spacing(1) - 2px;\n  color: govuk-colour(\"white\");\n}\n\n.moj-header__navigation-list {\n  margin: 0;\n  padding: 0;\n  font-size: 0; // Removes white space when using inline-block on child element.\n  list-style: none;\n}\n\n.moj-header__navigation-item {\n  display: inline-block;\n  margin-right: govuk-spacing(4);\n  @include govuk-font(19);\n\n  &:last-child {\n    margin-right: 0;\n  }\n}\n\n.moj-header__navigation-link {\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:active {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  &:hover {\n    // stylelint-disable-next-line declaration-no-important\n    text-decoration: underline !important;\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n\n.moj-header__navigation-link[aria-current=\"page\"] {\n  text-decoration: none;\n}\n"]}

package/moj/components/pagination/_pagination.scss

@@ -1,116 +1,19 @@
 @use "../../vendor/govuk-frontend" as *;
 
-.moj-pagination {
-  // text-align: center;
-
-  @include govuk-media-query($from: desktop) {
-    margin-right: - govuk-spacing(1);
-
-    // Alignment adjustments
-    margin-left: - govuk-spacing(1);
-
-    // Hide whitespace between elements
-    font-size: 0;
-
-    // Trick to remove the need for floats
-    text-align: justify;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      width: 100%;
-    }
-  }
-}
-
-.moj-pagination__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
+.moj-pagination__pagination {
+  margin-bottom: govuk-spacing(2);
 }
 
 .moj-pagination__results {
   margin-top: 0;
-  padding: govuk-spacing(1);
-  @include govuk-font(19);
-  @include govuk-media-query($from: desktop) {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-}
-
-.moj-pagination__item {
-  display: inline-block;
-  @include govuk-font(19);
-}
-
-.moj-pagination__item--active,
-.moj-pagination__item--dots {
-  height: 25px;
-  padding: govuk-spacing(1) govuk-spacing(2);
-  font-weight: bold;
-  text-align: center;
-}
-
-.moj-pagination__item--dots {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.moj-pagination__item--prev .moj-pagination__link::before,
-.moj-pagination__item--next .moj-pagination__link::after {
-  content: "";
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  transform: rotate(-45deg);
-  border-style: solid;
-  color: govuk-colour("black");
-  background: transparent;
-}
-
-.moj-pagination__item--prev .moj-pagination__link::before {
-  margin-right: govuk-spacing(1);
-  border-width: 3px 0 0 3px;
-}
-
-.moj-pagination__item--next .moj-pagination__link::after {
-  margin-left: govuk-spacing(1);
-  border-width: 0 3px 3px 0;
-}
-
-.moj-pagination__link {
-  display: block;
-  min-width: 25px;
-  padding: govuk-spacing(1);
+  margin-bottom: govuk-spacing(6);
+  padding-right: govuk-spacing(1);
+  padding-left: govuk-spacing(1);
   text-align: center;
-  @include govuk-link-common;
-  @include govuk-link-style-default;
-
-  &:link,
-  &:visited,
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-
-  &:link,
-  &:visited {
-    color: $govuk-link-colour;
-  }
-
-  &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
-  }
+  @include govuk-font(19);
 
-  &:focus {
-    color: govuk-colour("black");
+  @include govuk-media-query($from: tablet) {
+    text-align: left;
   }
 }
 

package/moj/components/pagination/_pagination.scss.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/moj/components/pagination/_pagination.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,qBAAqB;;EAErB;IACE,gCAAgC;;IAEhC,uBAAuB;IACvB,+BAA+B;;IAE/B,kCAAkC;IAClC,YAAY;;IAEZ,qCAAqC;IACrC,mBAAmB;;IAEnB;MACE,WAAW;MACX,qBAAqB;MACrB,WAAW;IACb;EACF;AACF;;AAEA;EACE,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,aAAa;EACb,yBAAyB;EACzB,uBAAuB;EACvB;IACE,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;EACxB;AACF;;AAEA;EACE,qBAAqB;EACrB,uBAAuB;AACzB;;AAEA;;EAEE,YAAY;EACZ,0CAA0C;EAC1C,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE,gBAAgB;EAChB,eAAe;AACjB;;AAEA;;EAEE,WAAW;EACX,qBAAqB;EACrB,WAAW;EACX,YAAY;EAGZ,yBAAyB;EACzB,mBAAmB;EACnB,4BAA4B;EAC5B,uBAAuB;AACzB;;AAEA;EACE,8BAA8B;EAC9B,yBAAyB;AAC3B;;AAEA;EACE,6BAA6B;EAC7B,yBAAyB;AAC3B;;AAEA;EACE,cAAc;EACd,eAAe;EACf,yBAAyB;EACzB,kBAAkB;EAClB,0BAA0B;EAC1B,iCAAiC;;EAEjC;;;;IAIE,qBAAqB;EACvB;;EAEA;;IAEE,yBAAyB;EAC3B;;EAEA;IACE,yCAAyC;EAC3C;;EAEA;IACE,4BAA4B;EAC9B;AACF","file":"_pagination.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-pagination {\n  // text-align: center;\n\n  @include govuk-media-query($from: desktop) {\n    margin-right: - govuk-spacing(1);\n\n    // Alignment adjustments\n    margin-left: - govuk-spacing(1);\n\n    // Hide whitespace between elements\n    font-size: 0;\n\n    // Trick to remove the need for floats\n    text-align: justify;\n\n    &::after {\n      content: \"\";\n      display: inline-block;\n      width: 100%;\n    }\n  }\n}\n\n.moj-pagination__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    margin-bottom: 0;\n    vertical-align: middle;\n  }\n}\n\n.moj-pagination__results {\n  margin-top: 0;\n  padding: govuk-spacing(1);\n  @include govuk-font(19);\n  @include govuk-media-query($from: desktop) {\n    display: inline-block;\n    margin-bottom: 0;\n    vertical-align: middle;\n  }\n}\n\n.moj-pagination__item {\n  display: inline-block;\n  @include govuk-font(19);\n}\n\n.moj-pagination__item--active,\n.moj-pagination__item--dots {\n  height: 25px;\n  padding: govuk-spacing(1) govuk-spacing(2);\n  font-weight: bold;\n  text-align: center;\n}\n\n.moj-pagination__item--dots {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before,\n.moj-pagination__item--next .moj-pagination__link::after {\n  content: \"\";\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  -webkit-transform: rotate(-45deg);\n  -ms-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  border-style: solid;\n  color: govuk-colour(\"black\");\n  background: transparent;\n}\n\n.moj-pagination__item--prev .moj-pagination__link::before {\n  margin-right: govuk-spacing(1);\n  border-width: 3px 0 0 3px;\n}\n\n.moj-pagination__item--next .moj-pagination__link::after {\n  margin-left: govuk-spacing(1);\n  border-width: 0 3px 3px 0;\n}\n\n.moj-pagination__link {\n  display: block;\n  min-width: 25px;\n  padding: govuk-spacing(1);\n  text-align: center;\n  @include govuk-link-common;\n  @include govuk-link-style-default;\n\n  &:link,\n  &:visited,\n  &:hover,\n  &:active {\n    text-decoration: none;\n  }\n\n  &:link,\n  &:visited {\n    color: $govuk-link-colour;\n  }\n\n  &:hover {\n    color: govuk-tint($govuk-link-colour, 25);\n  }\n\n  &:focus {\n    color: govuk-colour(\"black\");\n  }\n}\n"]}
+{"version":3,"sources":["../../../../src/moj/components/pagination/_pagination.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;EACE,+BAA+B;AACjC;;AAEA;EACE,aAAa;EACb,+BAA+B;EAC/B,+BAA+B;EAC/B,8BAA8B;EAC9B,kBAAkB;EAClB,uBAAuB;;EAEvB;IACE,gBAAgB;EAClB;AACF","file":"_pagination.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-pagination__pagination {\n  margin-bottom: govuk-spacing(2);\n}\n\n.moj-pagination__results {\n  margin-top: 0;\n  margin-bottom: govuk-spacing(6);\n  padding-right: govuk-spacing(1);\n  padding-left: govuk-spacing(1);\n  text-align: center;\n  @include govuk-font(19);\n\n  @include govuk-media-query($from: tablet) {\n    text-align: left;\n  }\n}\n"]}

package/moj/components/pagination/template.njk

@@ -1,33 +1,60 @@
-<nav class="moj-pagination {{- " " + params.classes if params.classes}}" aria-label="Pagination navigation">
+{% from "govuk/components/pagination/macro.njk" import govukPagination %}
+{% set paginationItems = [] %}
 
-  <ul class="moj-pagination__list">
-    {%- if params.previous %}
-      <li class="moj-pagination__item  moj-pagination__item--prev">
-        <a class="moj-pagination__link" href="{{ params.previous.href }}">{{ params.previous.text }}<span class="govuk-visually-hidden"> page</span></a>
-      </li>
-    {% endif -%}
+{% if params.items %}
+  {%- for item in params.items %}
+    {% if item.type === "dots" or item.ellipsis %}
+      {% set paginationItem = {
+       "ellipsis": true
+      } %}
+    {% else %}
+      {% set paginationItem = {
+      "number": item.number if item.number else item.text,
+      "href": item.href,
+      "current": item.current if item.current else item.selected
+      } %}
+    {% endif %}
+    {% set paginationItems = paginationItems.concat(paginationItem) %}
+  {% endfor %}
+{% endif %}
 
-    {%- for item in params.items %}
-      {%- if item.type == "dots" %}
-        <li class="moj-pagination__item moj-pagination__item--dots">…</li>
-      {% else %}
-        {%- if item.selected %}
-          <li class="moj-pagination__item moj-pagination__item--active" aria-label="Page {{ item.text }} of {{ (params.items | last).text }}" aria-current="page">{{ item.text }}</li>
-        {% else %}
-          <li class="moj-pagination__item"><a class="moj-pagination__link" href="{{ item.href }}" aria-label="Page {{ item.text }} of {{ (params.items | last).text }}">{{ item.text }}</a></li>
-        {% endif -%}
-      {% endif -%}
-    {% endfor -%}
-
-    {%- if params.next %}
-      <li class="moj-pagination__item  moj-pagination__item--next">
-        <a class="moj-pagination__link" href="{{ params.next.href }}">{{ params.next.text }}<span class="govuk-visually-hidden"> page</span></a>
-      </li>
-    {% endif -%}
-  </ul>
+<div class="moj-pagination">
+  {% if paginationItems | length > 1 %}
+    {{ govukPagination({
+        items: paginationItems,
+        previous: params.previous,
+        next: params.next,
+        landmarkLabel: params.landmarkLabel,
+        classes: "moj-pagination__pagination " + (params.classes if params.classes),
+        attributes: params.attributes
+      })
+    }}
+  {% endif %}
 
   {%- if params.results %}
-    <p class="moj-pagination__results">Showing <b>{{ params.results.from }}</b> to <b>{{ params.results.to }}</b> of <b>{{params.results.count}}</b> {{ params.results.text | default("results") }}</p>
-  {% endif -%}
+    {% set results_string = '' %}
+    {% set results_term = params.results.text | default("results") %}
 
-</nav>
+    {% if paginationItems | length > 0 %}
+      {% if params.results.pages.current and params.results.pages.count %}
+        {% set results_string = "Page " + params.results.pages.current  + " of " + params.results.pages.count %}
+      {% elif params.results.from and params.results.to  %}
+        {% if params.results.count %}
+          {% set results_string = "Showing " + params.results.from  + " to " + params.results.to + " of " + params.results.count + " total " + results_term %}
+        {% else %}
+          {% set results_string = "Showing " + results_term + " " + params.results.from  + " to " + params.results.to %}
+        {% endif %}
+      {% elif params.results.count %}
+        {% set results_string = params.results.count + " total " + results_term %}
+      {% endif %}
+    {% else %}
+      {% if params.results.count %}
+        {% set results_string = params.results.count + " total " + results_term %}
+      {% endif %}
+    {% endif %}
+
+    {% if results_string != '' %}
+      <p class="moj-pagination__results">{{ results_string }}</p>
+    {% endif %}
+  {% endif -%}
+</div>

package/moj/core/_moj-frontend-properties.scss

@@ -1,7 +1,7 @@
 :root {
   // This variable is automatically overwritten during builds and releases.
   // It doesn't need to be updated manually.
-  --moj-frontend-version: "7.1.1";
+  --moj-frontend-version: "7.2.0";
 }
 
 /*# sourceMappingURL=_moj-frontend-properties.scss.map */