@ministryofjustice/frontend 5.1.5 → 5.2.0

package/moj/all.bundle.js

@@ -14,7 +14,7 @@
    *
    * {@link https://github.com/ministryofjustice/moj-frontend/releases}
    */
-  const version = '5.1.5';
+  const version = '5.2.0';
 
   class AddAnother extends govukFrontend.Component {
     /**
@@ -1512,6 +1512,71 @@
    * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
    */
 
+  class PdsHeader extends govukFrontend.Component {
+    /**
+     * @param {Element | null} $root - HTML element to use for PDS header
+     */
+    constructor($root) {
+      super($root);
+      this.initHeader();
+    }
+    initHeader() {
+      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)) {
+        return 0;
+      }
+      this.hideFallbackLinks();
+      $userToggle.removeAttribute('hidden');
+      this.closeTabs([[$userToggle, $userMenu]]);
+      $userToggle.addEventListener('click', _event => {
+        this.toggleMenu($userToggle, $userMenu);
+      });
+    }
+
+    /**
+     * @param {[any, any][]} tabTuples
+     */
+    closeTabs(tabTuples) {
+      tabTuples.forEach(([toggle, menu]) => {
+        if (menu && toggle) {
+          menu.setAttribute('hidden', 'hidden');
+          toggle.classList.remove(this.$tabOpenClass);
+          toggle.parentElement.classList.remove('item-open');
+          toggle.setAttribute('aria-expanded', 'false');
+          if (toggle.dataset.textForShow) toggle.setAttribute('aria-label', toggle.dataset.textForShow);
+        }
+      });
+    }
+
+    /**
+     * @param {HTMLElement} toggle
+     * @param {HTMLElement} menu
+     */
+    toggleMenu(toggle, menu) {
+      const isOpen = !menu.getAttribute('hidden');
+      if (isOpen) {
+        this.closeTabs([[toggle, menu]]);
+      } else if (menu && toggle) {
+        menu.removeAttribute('hidden');
+        toggle.classList.add(this.$tabOpenClass);
+        toggle.parentElement.classList.add('item-open');
+        toggle.setAttribute('aria-expanded', 'true');
+        if (toggle.dataset.textForHide) toggle.setAttribute('aria-label', toggle.dataset.textForHide);
+      }
+    }
+    hideFallbackLinks() {
+      const $userLink = this.$root.querySelector('.probation-common-header__user-menu-link');
+      if ($userLink) $userLink.setAttribute('hidden', 'hidden');
+    }
+
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
+  }
+  PdsHeader.moduleName = 'pds-header';
+
   /**
    * @augments {ConfigurableComponent<FilterToggleButtonConfig>}
    */
@@ -3047,7 +3112,7 @@
    * @param {Config} [config]
    */
   function initAll(config) {
-    for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable]) {
+    for (const Component of [AddAnother, Alert, ButtonMenu, DatePicker, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, PdsHeader]) {
       govukFrontend.createAll(Component, undefined, config);
     }
   }
@@ -3069,6 +3134,7 @@
   exports.MultiFileUpload = MultiFileUpload;
   exports.MultiSelect = MultiSelect;
   exports.PasswordReveal = PasswordReveal;
+  exports.PdsHeader = PdsHeader;
   exports.RichTextEditor = RichTextEditor;
   exports.SearchToggle = SearchToggle;
   exports.SortableTable = SortableTable;