npm - @ministryofjustice/frontend - Versions diffs - 7.0.0 → 7.1.0 - Mend

@ministryofjustice/frontend 7.0.0 → 7.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

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

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

package/moj/components/domain-specific/probation/header/README.md CHANGED Viewed

@@ -7,7 +7,15 @@
   environmentName: 'DEV',
   environmentNameColour: 'govuk-tag--green',
   name: 'Account name',
-  manageDetailsLink: '#'
+  manageDetailsLink: '#',
+  servicesLink: '#',
+  services: [
+    {
+      heading: 'Service 1',
+      href: '#',
+      target: '_blank'
+    }
+  ]
 }) }}
 ```
@@ -23,6 +31,17 @@ This component accepts the following arguments.
 | environmentNameColour      | string | No      | Custom colour for the environment tag, overriding the default.                |
 | name        | string  | Yes       | The display name of the user.                           |
 | manageDetailsLink  | string | Yes       | URL linking to the user account management page.   |
+| servicesLink  | string | No | URL linking to a services page when JavaScript is disabled |
+| services | list | Yes | List of services. See [services](#services)
+### services
+| Name              | Type   | Required | Description                                                                                   |
+| ----------------- | ------ | -------- | --------------------------------------------------------------------------------------------- |
+| href | string | Yes      | URL linking to the service |
+| heading      | string | Yes      | The service's label |
+| target | string | No | The link's target
 _Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with `.html` can be at risk from [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. More information about security vulnerabilities can be found in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning)._

package/moj/components/domain-specific/probation/header/_header.scss CHANGED Viewed

@@ -309,7 +309,8 @@
       width: 100%;
       margin-bottom: 0;
       font-weight: bold;
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr 1fr;
+      grid-auto-flow: column;
       gap: 15px;
       justify-items: start;
     }

package/moj/components/domain-specific/probation/header/_header.scss.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/header/_header.scss"],"names":[],"mappings":"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","file":"_header.scss","sourcesContent":["/* stylelint-disable max-nesting-depth, selector-no-qualifying-type /\n@use \"../../../../vendor/govuk-frontend\" as ;\n\n/* ==========================================================================\n PROBATION#HEADER\n ========================================================================== */\n\n.probation-common-header {\n [hidden] {\n display: none;\n }\n color: govuk-colour(\"white\");\n\n background-color: govuk-colour(\"black\");\n\n &__logo {\n @include govuk-responsive-margin(3, \"right\");\n position: relative;\n top: -2px;\n padding: 15px 0;\n fill: govuk-colour(\"white\");\n }\n\n &__title {\n display: flex;\n\n &__organisation-name {\n @include govuk-responsive-margin(2, \"right\");\n @include govuk-font($size: 24, $weight: \"bold\");\n display: flex;\n align-items: center;\n }\n\n .govuk-tag {\n margin: auto 0;\n\n @include govuk-media-query($until: 985px) {\n display: none;\n }\n }\n }\n\n &__submenu-link {\n @include govuk-link-common;\n @include govuk-link-style-no-visited-state;\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:active {\n color: govuk-colour(\"white\");\n font-weight: normal;\n text-decoration: none;\n }\n\n &:focus {\n color: govuk-colour(\"black\");\n box-shadow: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n svg {\n fill: govuk-colour(\"black\");\n }\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__button-width-container {\n position: relative;\n }\n\n &__button-container {\n @include govuk-media-query(925px) {\n position: absolute;\n top: -70px;\n right: 0;\n background-color: govuk-colour(\"black\");\n }\n }\n\n &__navigation {\n display: flex;\n height: 70px;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-direction: row;\n align-items: center;\n\n &__item {\n position: relative;\n height: 100%;\n\n > button,\n > a {\n display: flex;\n height: 100%;\n padding: 0;\n overflow: hidden;\n border: none;\n color: govuk-colour(\"white\");\n background: govuk-colour(\"black\");\n cursor: pointer;\n align-items: center;\n justify-content: center;\n @include govuk-font(16);\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n\n &.probation-common-header__menu-toggle {\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n\n &::before {\n content: \"\";\n display: inline-block;\n width: 8px;\n height: 8px;\n margin: 3px 15px 0 3px;\n -ms-transform: translateY(-35%) rotate(45deg) scale(1);\n -webkit-transform: translateY(-35%) rotate(45deg) scale(1);\n transform: translateY(-35%) rotate(45deg) scale(1);\n border-right: 2px solid govuk-colour(\"white\");\n border-bottom: 2px solid govuk-colour(\"white\");\n vertical-align: middle;\n }\n }\n\n svg {\n margin: 0 15px 0 0;\n }\n\n &:hover {\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"mid-grey\");\n border-bottom: 2px solid govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &.probation-common-header__toggle-open {\n color: govuk-colour(\"blue\");\n background: govuk-colour(\"light-grey\");\n\n > span {\n &::before {\n -ms-transform: translateY(-0%) rotate(225deg) scale(1);\n -webkit-transform: translateY(-0%) rotate(225deg) scale(1);\n transform: translateY(-0%) rotate(225deg) scale(1);\n border-right: 2px solid govuk-colour(\"blue\");\n border-bottom: 2px solid govuk-colour(\"blue\");\n }\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"blue\");\n }\n }\n\n &:hover {\n color: govuk-colour(\"dark-grey\");\n }\n }\n\n &:focus-visible {\n outline: 3px solid transparent;\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"yellow\");\n box-shadow: none;\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"black\");\n border-bottom: 2px solid govuk-colour(\"black\");\n }\n }\n }\n }\n\n &.item-open {\n + div {\n > button,\n > a {\n > span {\n border-left: 1px solid transparent;\n }\n }\n }\n }\n }\n }\n\n .probation-common-header__user-menu {\n position: relative;\n z-index: 10000000;\n padding: 15px;\n background: govuk-colour(\"light-grey\");\n\n a {\n display: block;\n margin-bottom: 15px;\n font-weight: 700;\n }\n }\n\n &__pushdown-menu {\n padding: 30px 0 60px;\n background: govuk-colour(\"light-grey\");\n }\n\n &__icon-link-wrapper {\n display: flex;\n position: relative;\n height: 100%;\n\n img,\n svg {\n margin: 0 15px 0 0;\n }\n\n a {\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &__services-menu {\n ul {\n display: grid;\n width: 100%;\n margin-bottom: 0;\n font-weight: bold;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 15px;\n justify-items: start;\n }\n }\n\n &__user-menu-link {\n width: 181px;\n }\n\n &__services-menu-link {\n width: 107px;\n }\n\n &__menu-toggle-label {\n display: block;\n text-align: left;\n }\n\n @media print {\n display: none;\n }\n}\n"]}
1	+ {"version":3,"sources":["../../../../../../src/moj/components/domain-specific/probation/header/_header.scss"],"names":[],"mappings":"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","file":"_header.scss","sourcesContent":["/* stylelint-disable max-nesting-depth, selector-no-qualifying-type /\n@use \"../../../../vendor/govuk-frontend\" as ;\n\n/* ==========================================================================\n PROBATION#HEADER\n ========================================================================== */\n\n.probation-common-header {\n [hidden] {\n display: none;\n }\n color: govuk-colour(\"white\");\n\n background-color: govuk-colour(\"black\");\n\n &__logo {\n @include govuk-responsive-margin(3, \"right\");\n position: relative;\n top: -2px;\n padding: 15px 0;\n fill: govuk-colour(\"white\");\n }\n\n &__title {\n display: flex;\n\n &__organisation-name {\n @include govuk-responsive-margin(2, \"right\");\n @include govuk-font($size: 24, $weight: \"bold\");\n display: flex;\n align-items: center;\n }\n\n .govuk-tag {\n margin: auto 0;\n\n @include govuk-media-query($until: 985px) {\n display: none;\n }\n }\n }\n\n &__submenu-link {\n @include govuk-link-common;\n @include govuk-link-style-no-visited-state;\n }\n\n &__link {\n @include govuk-link-common;\n @include govuk-link-style-default;\n\n &:link,\n &:visited,\n &:active {\n color: govuk-colour(\"white\");\n font-weight: normal;\n text-decoration: none;\n }\n\n &:focus {\n color: govuk-colour(\"black\");\n box-shadow: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n svg {\n fill: govuk-colour(\"black\");\n }\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &__button-width-container {\n position: relative;\n }\n\n &__button-container {\n @include govuk-media-query(925px) {\n position: absolute;\n top: -70px;\n right: 0;\n background-color: govuk-colour(\"black\");\n }\n }\n\n &__navigation {\n display: flex;\n height: 70px;\n margin: 0;\n padding: 0;\n list-style: none;\n flex-direction: row;\n align-items: center;\n\n &__item {\n position: relative;\n height: 100%;\n\n > button,\n > a {\n display: flex;\n height: 100%;\n padding: 0;\n overflow: hidden;\n border: none;\n color: govuk-colour(\"white\");\n background: govuk-colour(\"black\");\n cursor: pointer;\n align-items: center;\n justify-content: center;\n @include govuk-font(16);\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n\n &.probation-common-header__menu-toggle {\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n\n &::before {\n content: \"\";\n display: inline-block;\n width: 8px;\n height: 8px;\n margin: 3px 15px 0 3px;\n -ms-transform: translateY(-35%) rotate(45deg) scale(1);\n -webkit-transform: translateY(-35%) rotate(45deg) scale(1);\n transform: translateY(-35%) rotate(45deg) scale(1);\n border-right: 2px solid govuk-colour(\"white\");\n border-bottom: 2px solid govuk-colour(\"white\");\n vertical-align: middle;\n }\n }\n\n svg {\n margin: 0 15px 0 0;\n }\n\n &:hover {\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"mid-grey\");\n border-bottom: 2px solid govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &.probation-common-header__toggle-open {\n color: govuk-colour(\"blue\");\n background: govuk-colour(\"light-grey\");\n\n > span {\n &::before {\n -ms-transform: translateY(-0%) rotate(225deg) scale(1);\n -webkit-transform: translateY(-0%) rotate(225deg) scale(1);\n transform: translateY(-0%) rotate(225deg) scale(1);\n border-right: 2px solid govuk-colour(\"blue\");\n border-bottom: 2px solid govuk-colour(\"blue\");\n }\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"blue\");\n }\n }\n\n &:hover {\n color: govuk-colour(\"dark-grey\");\n }\n }\n\n &:focus-visible {\n outline: 3px solid transparent;\n color: govuk-colour(\"black\");\n background-color: govuk-colour(\"yellow\");\n box-shadow: none;\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"black\");\n }\n\n > span {\n &::before {\n border-right: 2px solid govuk-colour(\"black\");\n border-bottom: 2px solid govuk-colour(\"black\");\n }\n }\n }\n }\n\n &.item-open {\n + div {\n > button,\n > a {\n > span {\n border-left: 1px solid transparent;\n }\n }\n }\n }\n }\n }\n\n .probation-common-header__user-menu {\n position: relative;\n z-index: 10000000;\n padding: 15px;\n background: govuk-colour(\"light-grey\");\n\n a {\n display: block;\n margin-bottom: 15px;\n font-weight: 700;\n }\n }\n\n &__pushdown-menu {\n padding: 30px 0 60px;\n background: govuk-colour(\"light-grey\");\n }\n\n &__icon-link-wrapper {\n display: flex;\n position: relative;\n height: 100%;\n\n img,\n svg {\n margin: 0 15px 0 0;\n }\n\n a {\n box-sizing: border-box;\n display: block;\n width: 100%;\n padding: 10px 0;\n\n > span {\n display: flex;\n height: 100%;\n padding: 0 15px;\n border-left: 1px solid govuk-colour(\"white\");\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n color: govuk-colour(\"mid-grey\");\n text-decoration: none;\n\n &::after {\n content: \"\";\n position: absolute;\n top: auto;\n right: 15px;\n bottom: 0;\n left: 15px;\n height: 3px;\n background: govuk-colour(\"mid-grey\");\n }\n }\n }\n }\n\n &__services-menu {\n ul {\n display: grid;\n width: 100%;\n margin-bottom: 0;\n font-weight: bold;\n grid-template-rows: 1fr 1fr 1fr 1fr;\n grid-auto-flow: column;\n gap: 15px;\n justify-items: start;\n }\n }\n\n &__user-menu-link {\n width: 181px;\n }\n\n &__services-menu-link {\n width: 107px;\n }\n\n &__menu-toggle-label {\n display: block;\n text-align: left;\n }\n\n @media print {\n display: none;\n }\n}\n"]}

package/moj/components/domain-specific/probation/header/header.bundle.js CHANGED Viewed

@@ -16,15 +16,21 @@
       this.$tabOpenClass = 'probation-common-header__toggle-open';
       const $userToggle = this.$root.querySelector('.probation-common-header__user-menu-toggle');
       const $userMenu = this.$root.querySelector('#probation-common-header-user-menu');
-      if (!$userToggle || !$userMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement)) {
+      const $servicesToggle = this.$root.querySelector('.probation-common-header__services-menu-toggle');
+      const $servicesMenu = this.$root.querySelector('#probation-common-header-services-menu');
+      if (!$userToggle || !$userMenu || !$servicesToggle || !$servicesMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement) || !($servicesToggle instanceof HTMLElement) || !($servicesMenu instanceof HTMLElement)) {
         return 0;
       }
       this.hideFallbackLinks();
       $userToggle.removeAttribute('hidden');
-      this.closeTabs([[$userToggle, $userMenu]]);
+      $servicesToggle.removeAttribute('hidden');
+      this.closeTabs([[$userToggle, $userMenu], [$servicesToggle, $servicesMenu]]);
       $userToggle.addEventListener('click', _event => {
         this.toggleMenu($userToggle, $userMenu);
       });
+      $servicesToggle.addEventListener('click', _event => {
+        this.toggleMenu($servicesToggle, $servicesMenu);
+      });
     }
     /**
@@ -60,7 +66,9 @@
     }
     hideFallbackLinks() {
       const $userLink = this.$root.querySelector('.probation-common-header__user-menu-link');
+      const $servicesLink = this.$root.querySelector('.probation-common-header__services-menu-link');
       if ($userLink) $userLink.setAttribute('hidden', 'hidden');
+      if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden');
     }
     /**

package/moj/components/domain-specific/probation/header/header.bundle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.bundle.js","sources":["../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /*\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n\n this.closeTabs([[$userToggle, $userMenu]])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["PdsHeader","Component","constructor","$root","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","HTMLElement","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","setAttribute","classList","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink","moduleName"],"mappings":";;;;;;EAEO,MAAMA,SAAS,SAASC,uBAAS,CAAC;EACvC;EACF;EACA;IACEC,WAAWA,CAACC,KAAK,EAAE;MACjB,KAAK,CAACA,KAAK,CAAC;MACZ,IAAI,CAACC,UAAU,EAAE;EACnB,EAAA;EAEAA,EAAAA,UAAUA,GAAG;MACX,IAAI,CAACC,aAAa,GAAG,sCAAsC;MAC3D,MAAMC,WAAW,GAAG,IAAI,CAACH,KAAK,CAACI,aAAa,CAC1C,4CACF,CAAC;MACD,MAAMC,SAAS,GAAG,IAAI,CAACL,KAAK,CAACI,aAAa,CACxC,oCACF,CAAC;EAED,IAAA,IACE,CAACD,WAAW,IACZ,CAACE,SAAS,IACV,~~EAAEF~~,WAAW,~~YAAYG~~,WAAW,CAAC,IACrC,~~EAAED~~,SAAS,YAAYC,WAAW,CAAC,~~EACnC~~;EACA,MAAA,OAAO,CAAC;EACV,IAAA;MAEA,IAAI,CAACC,iBAAiB,EAAE;~~EACxBJ~~,IAAAA,WAAW,~~CAACK~~,eAAe,CAAC,QAAQ,CAAC;~~MAErC~~,IAAI,CAACC,SAAS,CAAC,~~CAAC~~,~~CAACN~~,WAAW,EAAEE,SAAS,CAAC,CAAC,CAAC;~~EAE1CF~~,IAAAA,WAAW,~~CAACO~~,gBAAgB,CAAC,OAAO,EAAGC,MAAM,IAAK;EAChD,MAAA,IAAI,CAACC,UAAU,~~CAACT~~,WAAW,EAAEE,SAAS,CAAC;EACzC,IAAA,CAAC,CAAC;EACJ,EAAA;;EAEA;EACF;EACA;IACEI,SAASA,CAACI,SAAS,EAAE;MACnBA,SAAS,CAACC,OAAO,CAAC,CAAC,CAACC,MAAM,EAAEC,IAAI,CAAC,KAAK;QACpC,IAAIA,IAAI,IAAID,MAAM,EAAE;EAClBC,QAAAA,IAAI,CAACC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;UACrCF,MAAM,CAACG,SAAS,CAACC,MAAM,CAAC,IAAI,~~CAACjB~~,aAAa,CAAC;~~UAC3Ca~~,MAAM,CAACK,aAAa,CAACF,SAAS,CAACC,MAAM,CAAC,WAAW,CAAC;EAClDJ,QAAAA,MAAM,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;EAC7C,QAAA,IAAIF,MAAM,CAACM,OAAO,CAACC,WAAW,EAC5BP,MAAM,CAACE,YAAY,CAAC,YAAY,EAAEF,MAAM,CAACM,OAAO,CAACC,WAAW,CAAC;EACjE,MAAA;EACF,IAAA,CAAC,CAAC;EACJ,EAAA;;EAEA;EACF;EACA;EACA;EACEV,EAAAA,UAAUA,CAACG,MAAM,EAAEC,IAAI,EAAE;MACvB,MAAMO,MAAM,GAAG,CAACP,IAAI,CAACQ,YAAY,CAAC,QAAQ,CAAC;EAE3C,IAAA,IAAID,MAAM,EAAE;QACV,IAAI,CAACd,SAAS,CAAC,CAAC,CAACM,MAAM,EAAEC,IAAI,CAAC,CAAC,CAAC;EAClC,IAAA,CAAC,MAAM,IAAIA,IAAI,IAAID,MAAM,EAAE;EACzBC,MAAAA,IAAI,CAACR,eAAe,CAAC,QAAQ,CAAC;QAC9BO,MAAM,CAACG,SAAS,CAACO,GAAG,CAAC,IAAI,~~CAACvB~~,aAAa,CAAC;~~QACxCa~~,MAAM,CAACK,aAAa,CAACF,SAAS,CAACO,GAAG,CAAC,WAAW,CAAC;EAC/CV,MAAAA,MAAM,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;EAC5C,MAAA,IAAIF,MAAM,CAACM,OAAO,CAACK,WAAW,EAC5BX,MAAM,CAACE,YAAY,CAAC,YAAY,EAAEF,MAAM,CAACM,OAAO,CAACK,WAAW,CAAC;EACjE,IAAA;EACF,EAAA;EAEAnB,EAAAA,iBAAiBA,GAAG;MAClB,MAAMoB,SAAS,GAAG,IAAI,~~CAAC3B~~,KAAK,CAACI,aAAa,CACxC,0CACF,CAAC;MACD,~~IAAIuB~~,SAAS,EAAEA,SAAS,CAACV,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;~~EAC3D~~,EAAA;;EAEA;EACF;EACA;EAEA;~~EAnFapB~~,SAAS,~~CAkFb+B~~,UAAU,GAAG,YAAY;;;;;;;;"}
1	+ {"version":3,"file":"header.bundle.js","sources":["../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /*\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n const $servicesToggle = this.$root.querySelector(\n '.probation-common-header__services-menu-toggle'\n )\n\n const $servicesMenu = this.$root.querySelector(\n '#probation-common-header-services-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !$servicesToggle \|\|\n !$servicesMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement) \|\|\n !($servicesToggle instanceof HTMLElement) \|\|\n !($servicesMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n $servicesToggle.removeAttribute('hidden')\n\n this.closeTabs([\n [$userToggle, $userMenu],\n [$servicesToggle, $servicesMenu]\n ])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n\n $servicesToggle.addEventListener('click', (_event) => {\n this.toggleMenu($servicesToggle, $servicesMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n const $servicesLink = this.$root.querySelector(\n '.probation-common-header__services-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["PdsHeader","Component","constructor","$root","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","$servicesToggle","$servicesMenu","HTMLElement","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","setAttribute","classList","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink","$servicesLink","moduleName"],"mappings":"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"}

package/moj/components/domain-specific/probation/header/header.bundle.mjs CHANGED Viewed

@@ -140,15 +140,21 @@ class PdsHeader extends Component {
     this.$tabOpenClass = 'probation-common-header__toggle-open';
     const $userToggle = this.$root.querySelector('.probation-common-header__user-menu-toggle');
     const $userMenu = this.$root.querySelector('#probation-common-header-user-menu');
-    if (!$userToggle || !$userMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement)) {
+    const $servicesToggle = this.$root.querySelector('.probation-common-header__services-menu-toggle');
+    const $servicesMenu = this.$root.querySelector('#probation-common-header-services-menu');
+    if (!$userToggle || !$userMenu || !$servicesToggle || !$servicesMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement) || !($servicesToggle instanceof HTMLElement) || !($servicesMenu instanceof HTMLElement)) {
       return 0;
     }
     this.hideFallbackLinks();
     $userToggle.removeAttribute('hidden');
-    this.closeTabs([[$userToggle, $userMenu]]);
+    $servicesToggle.removeAttribute('hidden');
+    this.closeTabs([[$userToggle, $userMenu], [$servicesToggle, $servicesMenu]]);
     $userToggle.addEventListener('click', _event => {
       this.toggleMenu($userToggle, $userMenu);
     });
+    $servicesToggle.addEventListener('click', _event => {
+      this.toggleMenu($servicesToggle, $servicesMenu);
+    });
   }
   /**
@@ -184,7 +190,9 @@ class PdsHeader extends Component {
   }
   hideFallbackLinks() {
     const $userLink = this.$root.querySelector('.probation-common-header__user-menu-link');
+    const $servicesLink = this.$root.querySelector('.probation-common-header__services-menu-link');
     if ($userLink) $userLink.setAttribute('hidden', 'hidden');
+    if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden');
   }
   /**

package/moj/components/domain-specific/probation/header/header.bundle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.bundle.mjs","sources":["../../../../../../node_modules/govuk-frontend/dist/govuk/common/index.mjs","../../../../../../node_modules/govuk-frontend/dist/govuk/errors/index.mjs","../../../../../../node_modules/govuk-frontend/dist/govuk/component.mjs","../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["function getBreakpoint(name) {\n const property = `--govuk-breakpoint-${name}`;\n const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);\n return {\n property,\n value: value \|\| undefined\n };\n}\nfunction setFocus($element, options = {}) {\n var _options$onBeforeFocu;\n const isFocusable = $element.getAttribute('tabindex');\n if (!isFocusable) {\n $element.setAttribute('tabindex', '-1');\n }\n function onFocus() {\n $element.addEventListener('blur', onBlur, {\n once: true\n });\n }\n function onBlur() {\n var _options$onBlur;\n (_options$onBlur = options.onBlur) == null \|\| _options$onBlur.call($element);\n if (!isFocusable) {\n $element.removeAttribute('tabindex');\n }\n }\n $element.addEventListener('focus', onFocus, {\n once: true\n });\n (_options$onBeforeFocu = options.onBeforeFocus) == null \|\| _options$onBeforeFocu.call($element);\n $element.focus();\n}\nfunction isInitialised($root, moduleName) {\n return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);\n}\n\n/*\n Checks if GOV.UK Frontend is supported on this page\n \n Some browsers will load and run our JavaScript but GOV.UK Frontend\n * won't be supported.\n \n @param {HTMLElement \| null} [$scope] - (internal) `<body>` HTML element checked for browser support\n * @returns {boolean} Whether GOV.UK Frontend is supported on this page\n /\nfunction isSupported($scope = document.body) {\n if (!$scope) {\n return false;\n }\n return $scope.classList.contains('govuk-frontend-supported');\n}\nfunction isArray(option) {\n return Array.isArray(option);\n}\nfunction isObject(option) {\n return !!option && typeof option === 'object' && !isArray(option);\n}\nfunction isScope($scope) {\n return !!$scope && ($scope instanceof Element \|\| $scope instanceof Document);\n}\nfunction formatErrorMessage(Component, message) {\n return `${Component.moduleName}: ${message}`;\n}\n/\n @typedef ComponentWithModuleName\n * @property {string} moduleName - Name of the component\n /\n\nexport { formatErrorMessage, getBreakpoint, isInitialised, isObject, isScope, isSupported, setFocus };\n//# sourceMappingURL=index.mjs.map\n","import { isObject, formatErrorMessage } from '../common/index.mjs';\n\nclass GOVUKFrontendError extends Error {\n constructor(...args) {\n super(...args);\n this.name = 'GOVUKFrontendError';\n }\n}\nclass SupportError extends GOVUKFrontendError {\n /\n Checks if GOV.UK Frontend is supported on this page\n \n @param {HTMLElement \| null} [$scope] - HTML element `<body>` checked for browser support\n /\n constructor($scope = document.body) {\n const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class=\"govuk-frontend-supported\">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';\n super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type=\"module\">`');\n this.name = 'SupportError';\n }\n}\nclass ConfigError extends GOVUKFrontendError {\n constructor(...args) {\n super(...args);\n this.name = 'ConfigError';\n }\n}\nclass ElementError extends GOVUKFrontendError {\n constructor(messageOrOptions) {\n let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';\n if (isObject(messageOrOptions)) {\n const {\n component,\n identifier,\n element,\n expectedType\n } = messageOrOptions;\n message = identifier;\n message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';\n if (component) {\n message = formatErrorMessage(component, message);\n }\n }\n super(message);\n this.name = 'ElementError';\n }\n}\nclass InitError extends GOVUKFrontendError {\n constructor(componentOrMessage) {\n const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\\`$root\\`) already initialised`);\n super(message);\n this.name = 'InitError';\n }\n}\n/\n @import { ComponentWithModuleName } from '../common/index.mjs'\n /\n\nexport { ConfigError, ElementError, GOVUKFrontendError, InitError, SupportError };\n//# sourceMappingURL=index.mjs.map\n","import { isInitialised, isSupported } from './common/index.mjs';\nimport { InitError, ElementError, SupportError } from './errors/index.mjs';\n\nclass Component {\n /\n Returns the root element of the component\n \n @protected\n * @returns {RootElementType} - the root element of component\n /\n get $root() {\n return this._$root;\n }\n constructor($root) {\n this._$root = void 0;\n const childConstructor = this.constructor;\n if (typeof childConstructor.moduleName !== 'string') {\n throw new InitError(`\\`moduleName\\` not defined in component`);\n }\n if (!($root instanceof childConstructor.elementType)) {\n throw new ElementError({\n element: $root,\n component: childConstructor,\n identifier: 'Root element (`$root`)',\n expectedType: childConstructor.elementType.name\n });\n } else {\n this._$root = $root;\n }\n childConstructor.checkSupport();\n this.checkInitialised();\n const moduleName = childConstructor.moduleName;\n this.$root.setAttribute(`data-${moduleName}-init`, '');\n }\n checkInitialised() {\n const constructor = this.constructor;\n const moduleName = constructor.moduleName;\n if (moduleName && isInitialised(this.$root, moduleName)) {\n throw new InitError(constructor);\n }\n }\n static checkSupport() {\n if (!isSupported()) {\n throw new SupportError();\n }\n }\n}\n\n/\n @typedef ChildClass\n * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component\n /\n\n/\n @typedef {typeof Component & ChildClass} ChildClassConstructor\n /\nComponent.elementType = HTMLElement;\n\nexport { Component };\n//# sourceMappingURL=component.mjs.map\n","import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n\n this.closeTabs([[$userToggle, $userMenu]])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["isInitialised","$root","moduleName","HTMLElement","hasAttribute","isSupported","$scope","document","body","classList","contains","isArray","option","Array","isObject","formatErrorMessage","Component","message","GOVUKFrontendError","Error","constructor","args","name","SupportError","supportMessage","HTMLScriptElement","prototype","ElementError","messageOrOptions","component","identifier","element","expectedType","InitError","componentOrMessage","_$root","childConstructor","elementType","checkSupport","checkInitialised","setAttribute","PdsHeader","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink"],"mappings":"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","x_google_ignoreList":[0,1,2]}
1	+ {"version":3,"file":"header.bundle.mjs","sources":["../../../../../../node_modules/govuk-frontend/dist/govuk/common/index.mjs","../../../../../../node_modules/govuk-frontend/dist/govuk/errors/index.mjs","../../../../../../node_modules/govuk-frontend/dist/govuk/component.mjs","../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["function getBreakpoint(name) {\n const property = `--govuk-breakpoint-${name}`;\n const value = window.getComputedStyle(document.documentElement).getPropertyValue(property);\n return {\n property,\n value: value \|\| undefined\n };\n}\nfunction setFocus($element, options = {}) {\n var _options$onBeforeFocu;\n const isFocusable = $element.getAttribute('tabindex');\n if (!isFocusable) {\n $element.setAttribute('tabindex', '-1');\n }\n function onFocus() {\n $element.addEventListener('blur', onBlur, {\n once: true\n });\n }\n function onBlur() {\n var _options$onBlur;\n (_options$onBlur = options.onBlur) == null \|\| _options$onBlur.call($element);\n if (!isFocusable) {\n $element.removeAttribute('tabindex');\n }\n }\n $element.addEventListener('focus', onFocus, {\n once: true\n });\n (_options$onBeforeFocu = options.onBeforeFocus) == null \|\| _options$onBeforeFocu.call($element);\n $element.focus();\n}\nfunction isInitialised($root, moduleName) {\n return $root instanceof HTMLElement && $root.hasAttribute(`data-${moduleName}-init`);\n}\n\n/*\n Checks if GOV.UK Frontend is supported on this page\n \n Some browsers will load and run our JavaScript but GOV.UK Frontend\n * won't be supported.\n \n @param {HTMLElement \| null} [$scope] - (internal) `<body>` HTML element checked for browser support\n * @returns {boolean} Whether GOV.UK Frontend is supported on this page\n /\nfunction isSupported($scope = document.body) {\n if (!$scope) {\n return false;\n }\n return $scope.classList.contains('govuk-frontend-supported');\n}\nfunction isArray(option) {\n return Array.isArray(option);\n}\nfunction isObject(option) {\n return !!option && typeof option === 'object' && !isArray(option);\n}\nfunction isScope($scope) {\n return !!$scope && ($scope instanceof Element \|\| $scope instanceof Document);\n}\nfunction formatErrorMessage(Component, message) {\n return `${Component.moduleName}: ${message}`;\n}\n/\n @typedef ComponentWithModuleName\n * @property {string} moduleName - Name of the component\n /\n\nexport { formatErrorMessage, getBreakpoint, isInitialised, isObject, isScope, isSupported, setFocus };\n//# sourceMappingURL=index.mjs.map\n","import { isObject, formatErrorMessage } from '../common/index.mjs';\n\nclass GOVUKFrontendError extends Error {\n constructor(...args) {\n super(...args);\n this.name = 'GOVUKFrontendError';\n }\n}\nclass SupportError extends GOVUKFrontendError {\n /\n Checks if GOV.UK Frontend is supported on this page\n \n @param {HTMLElement \| null} [$scope] - HTML element `<body>` checked for browser support\n /\n constructor($scope = document.body) {\n const supportMessage = 'noModule' in HTMLScriptElement.prototype ? 'GOV.UK Frontend initialised without `<body class=\"govuk-frontend-supported\">` from template `<script>` snippet' : 'GOV.UK Frontend is not supported in this browser';\n super($scope ? supportMessage : 'GOV.UK Frontend initialised without `<script type=\"module\">`');\n this.name = 'SupportError';\n }\n}\nclass ConfigError extends GOVUKFrontendError {\n constructor(...args) {\n super(...args);\n this.name = 'ConfigError';\n }\n}\nclass ElementError extends GOVUKFrontendError {\n constructor(messageOrOptions) {\n let message = typeof messageOrOptions === 'string' ? messageOrOptions : '';\n if (isObject(messageOrOptions)) {\n const {\n component,\n identifier,\n element,\n expectedType\n } = messageOrOptions;\n message = identifier;\n message += element ? ` is not of type ${expectedType != null ? expectedType : 'HTMLElement'}` : ' not found';\n if (component) {\n message = formatErrorMessage(component, message);\n }\n }\n super(message);\n this.name = 'ElementError';\n }\n}\nclass InitError extends GOVUKFrontendError {\n constructor(componentOrMessage) {\n const message = typeof componentOrMessage === 'string' ? componentOrMessage : formatErrorMessage(componentOrMessage, `Root element (\\`$root\\`) already initialised`);\n super(message);\n this.name = 'InitError';\n }\n}\n/\n @import { ComponentWithModuleName } from '../common/index.mjs'\n /\n\nexport { ConfigError, ElementError, GOVUKFrontendError, InitError, SupportError };\n//# sourceMappingURL=index.mjs.map\n","import { isInitialised, isSupported } from './common/index.mjs';\nimport { InitError, ElementError, SupportError } from './errors/index.mjs';\n\nclass Component {\n /\n Returns the root element of the component\n \n @protected\n * @returns {RootElementType} - the root element of component\n /\n get $root() {\n return this._$root;\n }\n constructor($root) {\n this._$root = void 0;\n const childConstructor = this.constructor;\n if (typeof childConstructor.moduleName !== 'string') {\n throw new InitError(`\\`moduleName\\` not defined in component`);\n }\n if (!($root instanceof childConstructor.elementType)) {\n throw new ElementError({\n element: $root,\n component: childConstructor,\n identifier: 'Root element (`$root`)',\n expectedType: childConstructor.elementType.name\n });\n } else {\n this._$root = $root;\n }\n childConstructor.checkSupport();\n this.checkInitialised();\n const moduleName = childConstructor.moduleName;\n this.$root.setAttribute(`data-${moduleName}-init`, '');\n }\n checkInitialised() {\n const constructor = this.constructor;\n const moduleName = constructor.moduleName;\n if (moduleName && isInitialised(this.$root, moduleName)) {\n throw new InitError(constructor);\n }\n }\n static checkSupport() {\n if (!isSupported()) {\n throw new SupportError();\n }\n }\n}\n\n/\n @typedef ChildClass\n * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component\n /\n\n/\n @typedef {typeof Component & ChildClass} ChildClassConstructor\n /\nComponent.elementType = HTMLElement;\n\nexport { Component };\n//# sourceMappingURL=component.mjs.map\n","import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n const $servicesToggle = this.$root.querySelector(\n '.probation-common-header__services-menu-toggle'\n )\n\n const $servicesMenu = this.$root.querySelector(\n '#probation-common-header-services-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !$servicesToggle \|\|\n !$servicesMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement) \|\|\n !($servicesToggle instanceof HTMLElement) \|\|\n !($servicesMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n $servicesToggle.removeAttribute('hidden')\n\n this.closeTabs([\n [$userToggle, $userMenu],\n [$servicesToggle, $servicesMenu]\n ])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n\n $servicesToggle.addEventListener('click', (_event) => {\n this.toggleMenu($servicesToggle, $servicesMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n const $servicesLink = this.$root.querySelector(\n '.probation-common-header__services-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["isInitialised","$root","moduleName","HTMLElement","hasAttribute","isSupported","$scope","document","body","classList","contains","isArray","option","Array","isObject","formatErrorMessage","Component","message","GOVUKFrontendError","Error","constructor","args","name","SupportError","supportMessage","HTMLScriptElement","prototype","ElementError","messageOrOptions","component","identifier","element","expectedType","InitError","componentOrMessage","_$root","childConstructor","elementType","checkSupport","checkInitialised","setAttribute","PdsHeader","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","$servicesToggle","$servicesMenu","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink","$servicesLink"],"mappings":"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","x_google_ignoreList":[0,1,2]}

package/moj/components/domain-specific/probation/header/header.mjs CHANGED Viewed

@@ -12,15 +12,21 @@ class PdsHeader extends Component {
     this.$tabOpenClass = 'probation-common-header__toggle-open';
     const $userToggle = this.$root.querySelector('.probation-common-header__user-menu-toggle');
     const $userMenu = this.$root.querySelector('#probation-common-header-user-menu');
-    if (!$userToggle || !$userMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement)) {
+    const $servicesToggle = this.$root.querySelector('.probation-common-header__services-menu-toggle');
+    const $servicesMenu = this.$root.querySelector('#probation-common-header-services-menu');
+    if (!$userToggle || !$userMenu || !$servicesToggle || !$servicesMenu || !($userToggle instanceof HTMLElement) || !($userMenu instanceof HTMLElement) || !($servicesToggle instanceof HTMLElement) || !($servicesMenu instanceof HTMLElement)) {
       return 0;
     }
     this.hideFallbackLinks();
     $userToggle.removeAttribute('hidden');
-    this.closeTabs([[$userToggle, $userMenu]]);
+    $servicesToggle.removeAttribute('hidden');
+    this.closeTabs([[$userToggle, $userMenu], [$servicesToggle, $servicesMenu]]);
     $userToggle.addEventListener('click', _event => {
       this.toggleMenu($userToggle, $userMenu);
     });
+    $servicesToggle.addEventListener('click', _event => {
+      this.toggleMenu($servicesToggle, $servicesMenu);
+    });
   }
   /**
@@ -56,7 +62,9 @@ class PdsHeader extends Component {
   }
   hideFallbackLinks() {
     const $userLink = this.$root.querySelector('.probation-common-header__user-menu-link');
+    const $servicesLink = this.$root.querySelector('.probation-common-header__services-menu-link');
     if ($userLink) $userLink.setAttribute('hidden', 'hidden');
+    if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden');
   }
   /**

package/moj/components/domain-specific/probation/header/header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.mjs","sources":["../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /*\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n\n this.closeTabs([[$userToggle, $userMenu]])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["PdsHeader","Component","constructor","$root","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","HTMLElement","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","setAttribute","classList","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink","moduleName"],"mappings":";;AAEO,MAAMA,SAAS,SAASC,SAAS,CAAC;AACvC;AACF;AACA;EACEC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IACZ,IAAI,CAACC,UAAU,EAAE;AACnB,EAAA;AAEAA,EAAAA,UAAUA,GAAG;IACX,IAAI,CAACC,aAAa,GAAG,sCAAsC;IAC3D,MAAMC,WAAW,GAAG,IAAI,CAACH,KAAK,CAACI,aAAa,CAC1C,4CACF,CAAC;IACD,MAAMC,SAAS,GAAG,IAAI,CAACL,KAAK,CAACI,aAAa,CACxC,oCACF,CAAC;AAED,IAAA,IACE,CAACD,WAAW,IACZ,CAACE,SAAS,IACV,~~EAAEF~~,WAAW,~~YAAYG~~,WAAW,CAAC,IACrC,~~EAAED~~,SAAS,YAAYC,WAAW,CAAC,~~EACnC~~;AACA,MAAA,OAAO,CAAC;AACV,IAAA;IAEA,IAAI,CAACC,iBAAiB,EAAE;~~AACxBJ~~,IAAAA,WAAW,~~CAACK~~,eAAe,CAAC,QAAQ,CAAC;~~IAErC~~,IAAI,CAACC,SAAS,CAAC,~~CAAC~~,~~CAACN~~,WAAW,EAAEE,SAAS,CAAC,CAAC,CAAC;~~AAE1CF~~,IAAAA,WAAW,~~CAACO~~,gBAAgB,CAAC,OAAO,EAAGC,MAAM,IAAK;AAChD,MAAA,IAAI,CAACC,UAAU,~~CAACT~~,WAAW,EAAEE,SAAS,CAAC;AACzC,IAAA,CAAC,CAAC;AACJ,EAAA;;AAEA;AACF;AACA;EACEI,SAASA,CAACI,SAAS,EAAE;IACnBA,SAAS,CAACC,OAAO,CAAC,CAAC,CAACC,MAAM,EAAEC,IAAI,CAAC,KAAK;MACpC,IAAIA,IAAI,IAAID,MAAM,EAAE;AAClBC,QAAAA,IAAI,CAACC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;QACrCF,MAAM,CAACG,SAAS,CAACC,MAAM,CAAC,IAAI,~~CAACjB~~,aAAa,CAAC;~~QAC3Ca~~,MAAM,CAACK,aAAa,CAACF,SAAS,CAACC,MAAM,CAAC,WAAW,CAAC;AAClDJ,QAAAA,MAAM,CAACE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC;AAC7C,QAAA,IAAIF,MAAM,CAACM,OAAO,CAACC,WAAW,EAC5BP,MAAM,CAACE,YAAY,CAAC,YAAY,EAAEF,MAAM,CAACM,OAAO,CAACC,WAAW,CAAC;AACjE,MAAA;AACF,IAAA,CAAC,CAAC;AACJ,EAAA;;AAEA;AACF;AACA;AACA;AACEV,EAAAA,UAAUA,CAACG,MAAM,EAAEC,IAAI,EAAE;IACvB,MAAMO,MAAM,GAAG,CAACP,IAAI,CAACQ,YAAY,CAAC,QAAQ,CAAC;AAE3C,IAAA,IAAID,MAAM,EAAE;MACV,IAAI,CAACd,SAAS,CAAC,CAAC,CAACM,MAAM,EAAEC,IAAI,CAAC,CAAC,CAAC;AAClC,IAAA,CAAC,MAAM,IAAIA,IAAI,IAAID,MAAM,EAAE;AACzBC,MAAAA,IAAI,CAACR,eAAe,CAAC,QAAQ,CAAC;MAC9BO,MAAM,CAACG,SAAS,CAACO,GAAG,CAAC,IAAI,~~CAACvB~~,aAAa,CAAC;~~MACxCa~~,MAAM,CAACK,aAAa,CAACF,SAAS,CAACO,GAAG,CAAC,WAAW,CAAC;AAC/CV,MAAAA,MAAM,CAACE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC;AAC5C,MAAA,IAAIF,MAAM,CAACM,OAAO,CAACK,WAAW,EAC5BX,MAAM,CAACE,YAAY,CAAC,YAAY,EAAEF,MAAM,CAACM,OAAO,CAACK,WAAW,CAAC;AACjE,IAAA;AACF,EAAA;AAEAnB,EAAAA,iBAAiBA,GAAG;IAClB,MAAMoB,SAAS,GAAG,IAAI,~~CAAC3B~~,KAAK,CAACI,aAAa,CACxC,0CACF,CAAC;IACD,~~IAAIuB~~,SAAS,EAAEA,SAAS,CAACV,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;~~AAC3D~~,EAAA;;AAEA;AACF;AACA;AAEA;~~AAnFapB~~,SAAS,~~CAkFb+B~~,UAAU,GAAG,YAAY;;;;"}
1	+ {"version":3,"file":"header.mjs","sources":["../../../../../../src/moj/components/domain-specific/probation/header/header.mjs"],"sourcesContent":["import { Component } from 'govuk-frontend'\n\nexport class PdsHeader extends Component {\n /*\n @param {Element \| null} $root - HTML element to use for PDS header\n /\n constructor($root) {\n super($root)\n this.initHeader()\n }\n\n initHeader() {\n this.$tabOpenClass = 'probation-common-header__toggle-open'\n const $userToggle = this.$root.querySelector(\n '.probation-common-header__user-menu-toggle'\n )\n const $userMenu = this.$root.querySelector(\n '#probation-common-header-user-menu'\n )\n\n const $servicesToggle = this.$root.querySelector(\n '.probation-common-header__services-menu-toggle'\n )\n\n const $servicesMenu = this.$root.querySelector(\n '#probation-common-header-services-menu'\n )\n\n if (\n !$userToggle \|\|\n !$userMenu \|\|\n !$servicesToggle \|\|\n !$servicesMenu \|\|\n !($userToggle instanceof HTMLElement) \|\|\n !($userMenu instanceof HTMLElement) \|\|\n !($servicesToggle instanceof HTMLElement) \|\|\n !($servicesMenu instanceof HTMLElement)\n ) {\n return 0\n }\n\n this.hideFallbackLinks()\n $userToggle.removeAttribute('hidden')\n $servicesToggle.removeAttribute('hidden')\n\n this.closeTabs([\n [$userToggle, $userMenu],\n [$servicesToggle, $servicesMenu]\n ])\n\n $userToggle.addEventListener('click', (_event) => {\n this.toggleMenu($userToggle, $userMenu)\n })\n\n $servicesToggle.addEventListener('click', (_event) => {\n this.toggleMenu($servicesToggle, $servicesMenu)\n })\n }\n\n /\n @param {[any, any][]} tabTuples\n /\n closeTabs(tabTuples) {\n tabTuples.forEach(([toggle, menu]) => {\n if (menu && toggle) {\n menu.setAttribute('hidden', 'hidden')\n toggle.classList.remove(this.$tabOpenClass)\n toggle.parentElement.classList.remove('item-open')\n toggle.setAttribute('aria-expanded', 'false')\n if (toggle.dataset.textForShow)\n toggle.setAttribute('aria-label', toggle.dataset.textForShow)\n }\n })\n }\n\n /\n @param {HTMLElement} toggle\n * @param {HTMLElement} menu\n /\n toggleMenu(toggle, menu) {\n const isOpen = !menu.getAttribute('hidden')\n\n if (isOpen) {\n this.closeTabs([[toggle, menu]])\n } else if (menu && toggle) {\n menu.removeAttribute('hidden')\n toggle.classList.add(this.$tabOpenClass)\n toggle.parentElement.classList.add('item-open')\n toggle.setAttribute('aria-expanded', 'true')\n if (toggle.dataset.textForHide)\n toggle.setAttribute('aria-label', toggle.dataset.textForHide)\n }\n }\n\n hideFallbackLinks() {\n const $userLink = this.$root.querySelector(\n '.probation-common-header__user-menu-link'\n )\n const $servicesLink = this.$root.querySelector(\n '.probation-common-header__services-menu-link'\n )\n if ($userLink) $userLink.setAttribute('hidden', 'hidden')\n if ($servicesLink) $servicesLink.setAttribute('hidden', 'hidden')\n }\n\n /\n Name for the component used when initialising using data-module attributes.\n */\n static moduleName = 'pds-header'\n}\n"],"names":["PdsHeader","Component","constructor","$root","initHeader","$tabOpenClass","$userToggle","querySelector","$userMenu","$servicesToggle","$servicesMenu","HTMLElement","hideFallbackLinks","removeAttribute","closeTabs","addEventListener","_event","toggleMenu","tabTuples","forEach","toggle","menu","setAttribute","classList","remove","parentElement","dataset","textForShow","isOpen","getAttribute","add","textForHide","$userLink","$servicesLink","moduleName"],"mappings":"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"}

package/moj/components/domain-specific/probation/header/template.njk CHANGED Viewed

@@ -100,10 +100,47 @@
             </div>
             {# END USER MENU #}
+            {# SERVICES MENU #}
+            <div class="probation-common-header__navigation__item">
+              <button data-qa="probation-common-header__menu-toggle" class="probation-common-header__menu-toggle probation-common-header__services-menu-toggle" aria-controls="probation-common-header-services-menu" aria-expanded="false" data-text-for-show="Show services menu" data-text-for-hide="Hide services menu" type="button" hidden='hidden'>
+                  <span>
+                    <span class='govuk-!-font-size-19 govuk-!-font-weight-bold'>Menu</span>
+                  </span>
+              </button>
+              <div class="probation-common-header__icon-link-wrapper probation-common-header__services-menu-link">
+                <a class="probation-common-header__link" href="{{ params.servicesLink }}">
+                    <span>
+                      <span class="govuk-visually-hidden"> Services</span>
+                      <span>Menu</span>
+                    </span>
+                </a>
+              </div>
+            </div>
+            {# END SERVICES MENU #}
           </div>
         </div>
       </div>
       {#  END MENU #}
+      {# SERVICES MENU #}
+      <div id="probation-common-header-services-menu" class="probation-common-header__pushdown-menu probation-common-header__services-menu" hidden="hidden">
+        <div class="govuk-width-container">
+          <div class="govuk-grid-row">
+            <div class="govuk-grid-column-full">
+              <h3 class="govuk-heading-m">
+                Services
+              </h3>
+              <ul class='govuk-list'>
+                {% for service in params.services %}
+                  <li><a href='{{ service.href }}' class='probation-common-header__submenu-link' target="{{ service.target | default('_self') }}" {% if service.target == '_blank' %}rel="noopener noreferrer"{% endif %}>{{ service.heading }}</a></li>
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      {#  END SERVICES MENU #}
     </nav>
   </div>
 </header>

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

@@ -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.0.0";
+  --moj-frontend-version: "7.1.0";
 }
 /*# sourceMappingURL=_moj-frontend-properties.scss.map */