@ministryofjustice/frontend 5.1.5 → 5.2.0

package/moj/all.bundle.mjs

@@ -312,7 +312,7 @@ function createAll(Component, config, createAllOptions) {
  *
  * {@link https://github.com/ministryofjustice/moj-frontend/releases}
  */
-const version = '5.1.5';
+const version = '5.2.0';
 
 class AddAnother extends Component {
   /**
@@ -1810,6 +1810,71 @@ class DSCalendarDay {
  * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
  */
 
+class PdsHeader extends 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>}
  */
@@ -3345,7 +3410,7 @@ SortableTable.schema = Object.freeze(/** @type {const} */{
  * @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]) {
     createAll(Component, undefined, config);
   }
 }
@@ -3358,5 +3423,5 @@ function initAll(config) {
  * @import * as GOVUKFrontend from 'govuk-frontend'
  */
 
-export { AddAnother, Alert, ButtonMenu, DatePicker, FilterToggleButton, FormValidator, MultiFileUpload, MultiSelect, PasswordReveal, RichTextEditor, SearchToggle, SortableTable, initAll, version };
+export { AddAnother, Alert, ButtonMenu, DatePicker, FilterToggleButton, FormValidator, MultiFileUpload, MultiSelect, PasswordReveal, PdsHeader, RichTextEditor, SearchToggle, SortableTable, initAll, version };
 //# sourceMappingURL=all.bundle.mjs.map