hmrc-frontend 2.7.0 → 3.2.0

package/check-compatibility.js

@@ -14,11 +14,11 @@ if (!knownPrototypeKitNames.includes(consumerPackageJson.name)) {
 }
 
 const compatibility = {
-  2.4: {
-    'prototype-kit': ['9.14', '9.13', '9.12', '9.11', '9.10', '9.9', '9.8', '9.7', '9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0'],
+  3.2: {
+    'prototype-kit': ['11.0', '10.0', '9.15', '9.14', '9.13', '9.12', '9.11', '9.10', '9.9', '9.8', '9.7', '9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0'],
   },
   1.38: {
-    'prototype-kit': ['9.14', '9.13', '9.12', '9.11', '9.10', '9.9', '9.8', '9.7', '9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0'],
+    'prototype-kit': ['11.0', '10.0', '9.15', '9.14', '9.13', '9.12', '9.11', '9.10', '9.9', '9.8', '9.7', '9.6', '9.5', '9.4', '9.3', '9.2', '9.1', '9.0'],
   },
   0.6: {
     'prototype-kit': ['8.12', '8.11', '8.10', '8.9', '8.8', '8.7'],

package/hmrc/VERSION.txt

@@ -1 +1 @@
-2.7.0
+3.2.0

package/hmrc/all.js

@@ -861,21 +861,12 @@
     this.$module = document.querySelector($module);
     this.$moduleBottomMargin = this.$module.style.marginBottom;
     this.$mainNav = this.$module.querySelector('.hmrc-account-menu__main');
-    this.$subNav = this.$module.querySelector('.hmrc-subnav');
-    this.$showSubnavLink = this.$module.querySelector('#account-menu__main-2');
     this.$showNavLinkMobile = this.$module.querySelector('.hmrc-account-menu__link--menu');
-    this.$backLink = this.$module.querySelector('.hmrc-account-menu__link--back a');
     this.$currentBreakpoint = getCurrentBreakpoint();
   }
 
   AccountMenu.prototype.init = function init() {
     this.setup();
-    this.$showSubnavLink.addEventListener('click', this.eventHandlers.showSubnavLinkClick.bind(this));
-    this.$showSubnavLink.addEventListener('focusout', this.eventHandlers.showSubnavLinkFocusOut.bind(this));
-    this.$showSubnavLink.addEventListener('focusin', this.eventHandlers.showSubnavLinkFocusIn.bind(this));
-    this.$backLink.addEventListener('click', this.eventHandlers.backLinkClick.bind(this));
-    this.$subNav.addEventListener('focusout', this.eventHandlers.subNavFocusOut.bind(this));
-    this.$subNav.addEventListener('focusin', this.eventHandlers.subNavFocusIn.bind(this));
     this.$showNavLinkMobile.addEventListener('click', this.eventHandlers.showNavLinkMobileClick.bind(this));
     window.addEventListener('resize', debounce(this.reinstantiate.bind(this)));
   };
@@ -891,55 +882,11 @@
   };
 
   AccountMenu.prototype.eventHandlers = {
-    showSubnavLinkClick: function showSubnavLinkClick(event) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (isSmall(window)) {
-        // TODO: remove redundant check - showSubnavLink appears only when subnav is not expanded
-        if (!event.currentTarget.classList.contains('hmrc-account-menu__link--more-expanded')) {
-          this.hideMainNavMobile(event.currentTarget);
-          this.showSubnavMobile(event.currentTarget);
-        }
-      } else if (event.currentTarget.classList.contains('hmrc-account-menu__link--more-expanded')) {
-        this.hideSubnavDesktop();
-      } else {
-        this.showSubnavDesktop();
-      }
-    },
-    showSubnavLinkFocusOut: function showSubnavLinkFocusOut(event) {
-      if (!isSmall(window)) {
-        this.$module.querySelector(event.target.hash).dataset.subMenuTimer = setTimeout(function () {}, 0);
-      }
-    },
-    showSubnavLinkFocusIn: function showSubnavLinkFocusIn(event) {
-      if (!isSmall(window)) {
-        clearTimeout(this.$module.querySelector(event.target.hash).dataset.subMenuTimer);
-      }
-    },
-    backLinkClick: function backLinkClick(event) {
-      event.preventDefault(); // TODO: remove redundant check - backlink appears only when subnav is open
-
-      if (this.$mainNav.classList.contains('hmrc-subnav-is-open')) {
-        this.hideSubnavMobile();
-        this.showMainNavMobile();
-      }
-    },
-    subNavFocusOut: function subNavFocusOut(event) {
-      if (!isSmall(window)) {
-        // eslint-disable-next-line no-param-reassign
-        event.currentTarget.dataset.subMenuTimer = setTimeout(this.hideSubnavDesktop.bind(this), 0);
-      }
-    },
-    subNavFocusIn: function subNavFocusIn(event) {
-      clearTimeout(event.currentTarget.dataset.subMenuTimer);
-    },
     showNavLinkMobileClick: function showNavLinkMobileClick(event) {
       event.preventDefault();
 
       if (isSmall(window)) {
-        if (this.$mainNav.classList.contains('hmrc-subnav-is-open') || this.$mainNav.classList.contains('main-nav-is-open')) {
-          this.hideSubnavMobile();
+        if (this.$mainNav.classList.contains('main-nav-is-open')) {
           this.hideMainNavMobile(event.currentTarget);
         } else {
           this.showMainNavMobile();
@@ -949,55 +896,21 @@
   };
 
   AccountMenu.prototype.setup = function setup() {
-    this.$subNav.setAttribute('aria-hidden', 'true');
-    this.$subNav.setAttribute('tabindex', '-1');
-    this.$showSubnavLink.setAttribute('aria-controls', this.$showSubnavLink.hash.substr(1));
-    this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-
     if (isSmall(window)) {
       this.$module.classList.add('is-smaller');
       this.$showNavLinkMobile.setAttribute('aria-hidden', 'false');
       this.$showNavLinkMobile.removeAttribute('tabindex');
       this.$showNavLinkMobile.classList.remove('js-hidden');
-      this.hideSubnavMobile();
       this.hideMainNavMobile(this.$showNavLinkMobile);
     } else {
       this.$module.classList.remove('is-smaller');
       this.$mainNav.classList.remove('main-nav-is-open', 'js-hidden');
-      this.$subNav.classList.remove('js-hidden');
       this.$showNavLinkMobile.setAttribute('aria-hidden', 'true');
       this.$showNavLinkMobile.setAttribute('tabindex', '-1');
       this.$showNavLinkMobile.classList.add('js-hidden');
     }
   };
 
-  AccountMenu.prototype.showSubnavDesktop = function showSubnavDesktop() {
-    var self = this;
-    this.$module.classList.add('hmrc-subnav-is-open');
-    this.$mainNav.classList.add('hmrc-subnav-is-open');
-    this.$subNav.classList.add('hmrc-subnav-reveal');
-    this.$subNav.setAttribute('aria-hidden', 'false');
-    this.$subNav.setAttribute('aria-expanded', 'true');
-    var subNavHeight = this.$subNav.offsetHeight;
-    this.$module.style.marginBottom = "".concat(subNavHeight, "px");
-    setTimeout(function () {
-      self.$subNav.focus();
-    }, 500);
-    this.$showSubnavLink.classList.add('hmrc-account-menu__link--more-expanded');
-    this.$showSubnavLink.setAttribute('aria-expanded', 'true');
-  };
-
-  AccountMenu.prototype.hideSubnavDesktop = function hideSubnavDesktop() {
-    this.$module.classList.remove('main-nav-is-open', 'hmrc-subnav-is-open');
-    this.$mainNav.classList.remove('hmrc-subnav-is-open');
-    this.$subNav.classList.remove('hmrc-subnav-reveal');
-    this.$subNav.setAttribute('aria-hidden', 'true');
-    this.$subNav.setAttribute('aria-expanded', 'false');
-    this.$showSubnavLink.classList.remove('hmrc-account-menu__link--more-expanded');
-    this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-    this.$module.style.marginBottom = this.$moduleBottomMargin;
-  };
-
   AccountMenu.prototype.showMainNavMobile = function showMainNavMobile() {
     // TODO: shall we add main-nav-is-open to `nav`????
     this.$mainNav.classList.remove('js-hidden');
@@ -1012,64 +925,9 @@
     this.$mainNav.setAttribute('aria-expanded', 'false');
 
     if (element.classList.contains('hmrc-account-menu__link--menu')) {
-      this.$mainNav.classList.remove('hmrc-subnav-is-open');
       this.$mainNav.classList.add('js-hidden');
       this.$showNavLinkMobile.setAttribute('aria-expanded', 'false');
       this.$showNavLinkMobile.classList.remove('hmrc-account-home--account--is-open');
-    } else if (element.classList.contains('hmrc-account-menu__link--more')) {
-      this.$mainNav.classList.add('hmrc-subnav-is-open');
-    }
-  };
-
-  AccountMenu.prototype.showSubnavMobile = function showSubnavMobile(element) {
-    this.$module.classList.add('hmrc-subnav-is-open');
-    this.$mainNav.classList.remove('main-nav-is-open');
-    this.$mainNav.classList.add('hmrc-subnav-is-open');
-    this.$subNav.classList.remove('js-hidden');
-    this.$subNav.classList.add('hmrc-subnav-reveal');
-    this.$subNav.setAttribute('aria-hidden', 'false');
-    this.$subNav.setAttribute('aria-expanded', 'true');
-    this.$showSubnavLink.classList.add('hmrc-account-menu__link--more-expanded');
-    this.$showSubnavLink.setAttribute('aria-expanded', 'true');
-    this.$backLink.parentNode.setAttribute('aria-hidden', 'false');
-    this.$backLink.removeAttribute('tabindex');
-    this.$backLink.parentNode.classList.remove('hidden');
-    element.parentNode.classList.add('active-subnav-parent'); // TODO: modernise the following and polyfill it for IE8
-
-    var $elementSiblings = element.parentNode.parentNode.children;
-
-    for (var i = 0; i < $elementSiblings.length; i += 1) {
-      var sibling = $elementSiblings[i];
-
-      if (sibling !== this.$backLink.parentNode && sibling !== element.parentNode) {
-        sibling.classList.add('hidden');
-      }
-    }
-  };
-
-  AccountMenu.prototype.hideSubnavMobile = function hideSubnavMobile() {
-    this.$module.classList.remove('hmrc-subnav-is-open');
-    this.$mainNav.classList.remove('hmrc-subnav-is-open');
-    this.$mainNav.classList.add('main-nav-is-open');
-    this.$subNav.classList.add('js-hidden');
-    this.$subNav.classList.remove('hmrc-subnav-reveal');
-    this.$subNav.setAttribute('aria-hidden', 'true');
-    this.$subNav.setAttribute('aria-expanded', 'false');
-    this.$showSubnavLink.classList.remove('hmrc-account-menu__link--more-expanded');
-    this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-    this.$backLink.parentNode.setAttribute('aria-hidden', 'true');
-    this.$backLink.setAttribute('tabindex', '-1');
-    this.$backLink.parentNode.classList.add('hidden');
-    this.$showSubnavLink.parentNode.classList.remove('active-subnav-parent'); // TODO: modernise the following and polyfill it for IE8
-
-    var $backLinkSiblings = this.$backLink.parentNode.parentNode.children;
-
-    for (var i = 0; i < $backLinkSiblings.length; i += 1) {
-      var sibling = $backLinkSiblings[i];
-
-      if (sibling !== this.$backLink.parentNode) {
-        sibling.classList.remove('hidden');
-      }
     }
   };
 

package/hmrc/components/account-menu/README.md

@@ -1,14 +1,12 @@
 # HMRC Account Menu
 
+This component was updated in PLATUI-1419 to match current implementation used by PTA.
+
 ## Basic functionality
 
 - if the viewport is small, show the extra menu link (showNavLinkMobile)
 - if showNavLinkMobile is triggered, open the main nav (subNav)
-- if menusSub is open, add `is-open` to the nav container (nav)
 - if a menu link (accountLink) is triggered, close sub-nav (subNav)
-- if a menu link with sub-nav (showSubnavLink) is triggered, open it
-- if a sub-nav is open, add `is-open` to nav
 - if showNavLinkMobile is open, close it when triggered
-- if a menu link with sub-nav (showSubnavLink) is open, close it when triggered
 
 This code is open source software licensed under the [Apache 2.0 License]("http://www.apache.org/licenses/LICENSE-2.0.html").

package/hmrc/components/account-menu/_account-menu.scss

@@ -49,10 +49,6 @@ $hmrc-transition-type: "all";
   transition: #{$hmrc-transition-type} $hmrc-account-menu-transition-time ease-in-out;
   border-bottom: 1px solid govuk-colour("mid-grey");
   background-color: govuk-colour("white");
-
-  &.hmrc-subnav-is-open {
-    margin-bottom: 5em;
-  }
 }
 
 .is-smaller.hmrc-account-menu {
@@ -177,8 +173,7 @@ $hmrc-transition-type: "all";
     clear: both;
     background-color: govuk-colour("light-grey");
 
-    &.main-nav-is-open,
-    &.hmrc-subnav-is-open {
+    &.main-nav-is-open {
       position: relative;
       border-top: 1px solid govuk-colour("mid-grey");
 
@@ -212,8 +207,7 @@ $hmrc-transition-type: "all";
       overflow: hidden;
       border-bottom: 1px solid govuk-colour("mid-grey");
 
-      &:last-child,
-      &.active-subnav-parent {
+      &:last-child {
         border-bottom: 0;
       }
     }
@@ -249,128 +243,6 @@ $hmrc-transition-type: "all";
   }
 }
 
-.hmrc-subnav {
-  @include govuk-font($size: 16);
-  @include govuk-clearfix;
-
-  display: none;
-  position: absolute;
-  z-index: -1;
-  top: -61px;
-  left: 0;
-  width: 100%;
-  border-bottom: 1px solid govuk-colour("mid-grey");
-  outline: none;
-  //transition: margin .3s ease-in-out;
-  background-color: govuk-colour("light-grey");
-
-  p {
-    @include govuk-font($size: 16);
-  }
-
-  a {
-    text-decoration: none;
-
-    &:visited {
-      color: $govuk-brand-colour;
-    }
-
-    &:hover {
-      color: govuk-colour("light-blue");
-      text-decoration: underline;
-    }
-  }
-
-  &.hmrc-subnav-reveal {
-    display: block;
-    top: 48px;
-  }
-}
-
-.is-smaller .hmrc-subnav {
-  position: relative;
-  z-index: 1;
-  top: inherit;
-  margin: 0 0 0 10px;
-  padding: 0;
-  -webkit-transition: none;
-  transition: none;
-  border-bottom: 0;
-  outline: none;
-
-  &.hmrc-subnav-reveal {
-    display: block;
-  }
-}
-
-.hmrc-subnav .hmrc-subnav__section {
-  padding-top: 20px;
-  padding-bottom: 20px;
-
-  &:first-child {
-    > p,
-    > div {
-      padding-right: 15px;
-      padding-left: 30px;
-    }
-  }
-
-  &:nth-child(2) {
-    > p,
-    > div {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  &:last-child {
-    > p,
-    > div {
-      padding-right: 30px;
-    }
-  }
-}
-
-.is-smaller .hmrc-subnav__section {
-  width: 100%;
-  margin: 0;
-  padding: 1em 0 1em 0;
-  border-bottom: 1px solid govuk-colour("mid-grey");
-
-  &:last-child {
-    border-bottom: 0;
-  }
-
-  a:hover {
-    color: $govuk-brand-colour;
-  }
-
-  &:first-child,
-  &:nth-child(2),
-  &:last-child {
-    > p,
-    > div a {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-.hmrc-subnav__section__heading {
-  @include govuk-font(16, $weight: bold);
-
-  margin: 0;
-  padding-bottom: 5px;
-  font-weight: 400;
-}
-
-.is-smaller .hmrc-subnav__section__heading {
-  @include govuk-font(16, $weight: bold);
-
-  margin-bottom: 7px;
-  font-weight: 600;
-}
-
 .js-enabled .hmrc-account-menu__link--menu,
 .js-enabled .is-smaller .hmrc-account-menu__link--more {
   background-image: url("#{$hmrc-assets-path}components/account-menu/images/icon-chevron-right.svg");
@@ -448,10 +320,6 @@ $hmrc-transition-type: "all";
       display: inline;
     }
   }
-
-  .hmrc-subnav {
-    position: static;
-  }
 }
 
 $hmrc-banner-blue: #005ea5;

package/hmrc/components/account-menu/account-menu.js

@@ -8,22 +8,13 @@ function AccountMenu($module) {
   this.$module = document.querySelector($module);
   this.$moduleBottomMargin = this.$module.style.marginBottom;
   this.$mainNav = this.$module.querySelector('.hmrc-account-menu__main');
-  this.$subNav = this.$module.querySelector('.hmrc-subnav');
-  this.$showSubnavLink = this.$module.querySelector('#account-menu__main-2');
   this.$showNavLinkMobile = this.$module.querySelector('.hmrc-account-menu__link--menu');
-  this.$backLink = this.$module.querySelector('.hmrc-account-menu__link--back a');
   this.$currentBreakpoint = getCurrentBreakpoint();
 }
 
 AccountMenu.prototype.init = function init() {
   this.setup();
 
-  this.$showSubnavLink.addEventListener('click', this.eventHandlers.showSubnavLinkClick.bind(this));
-  this.$showSubnavLink.addEventListener('focusout', this.eventHandlers.showSubnavLinkFocusOut.bind(this));
-  this.$showSubnavLink.addEventListener('focusin', this.eventHandlers.showSubnavLinkFocusIn.bind(this));
-  this.$backLink.addEventListener('click', this.eventHandlers.backLinkClick.bind(this));
-  this.$subNav.addEventListener('focusout', this.eventHandlers.subNavFocusOut.bind(this));
-  this.$subNav.addEventListener('focusin', this.eventHandlers.subNavFocusIn.bind(this));
   this.$showNavLinkMobile.addEventListener('click', this.eventHandlers.showNavLinkMobileClick.bind(this));
 
   window.addEventListener('resize', debounce(this.reinstantiate.bind(this)));
@@ -39,56 +30,11 @@ AccountMenu.prototype.reinstantiate = function reinstantiate(resizeEvent) {
 };
 
 AccountMenu.prototype.eventHandlers = {
-  showSubnavLinkClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (isSmall(window)) {
-      // TODO: remove redundant check - showSubnavLink appears only when subnav is not expanded
-      if (!event.currentTarget.classList.contains('hmrc-account-menu__link--more-expanded')) {
-        this.hideMainNavMobile(event.currentTarget);
-        this.showSubnavMobile(event.currentTarget);
-      }
-    } else if (event.currentTarget.classList.contains('hmrc-account-menu__link--more-expanded')) {
-      this.hideSubnavDesktop();
-    } else {
-      this.showSubnavDesktop();
-    }
-  },
-  showSubnavLinkFocusOut(event) {
-    if (!isSmall(window)) {
-      this.$module.querySelector(event.target.hash).dataset.subMenuTimer = setTimeout(() => {}, 0);
-    }
-  },
-  showSubnavLinkFocusIn(event) {
-    if (!isSmall(window)) {
-      clearTimeout(this.$module.querySelector(event.target.hash).dataset.subMenuTimer);
-    }
-  },
-  backLinkClick(event) {
-    event.preventDefault();
-
-    // TODO: remove redundant check - backlink appears only when subnav is open
-    if (this.$mainNav.classList.contains('hmrc-subnav-is-open')) {
-      this.hideSubnavMobile();
-      this.showMainNavMobile();
-    }
-  },
-  subNavFocusOut(event) {
-    if (!isSmall(window)) {
-      // eslint-disable-next-line no-param-reassign
-      event.currentTarget.dataset.subMenuTimer = setTimeout(this.hideSubnavDesktop.bind(this), 0);
-    }
-  },
-  subNavFocusIn(event) {
-    clearTimeout(event.currentTarget.dataset.subMenuTimer);
-  },
   showNavLinkMobileClick(event) {
     event.preventDefault();
 
     if (isSmall(window)) {
-      if (this.$mainNav.classList.contains('hmrc-subnav-is-open') || this.$mainNav.classList.contains('main-nav-is-open')) {
-        this.hideSubnavMobile();
+      if (this.$mainNav.classList.contains('main-nav-is-open')) {
         this.hideMainNavMobile(event.currentTarget);
       } else {
         this.showMainNavMobile();
@@ -98,67 +44,22 @@ AccountMenu.prototype.eventHandlers = {
 };
 
 AccountMenu.prototype.setup = function setup() {
-  this.$subNav.setAttribute('aria-hidden', 'true');
-  this.$subNav.setAttribute('tabindex', '-1');
-
-  this.$showSubnavLink.setAttribute('aria-controls', this.$showSubnavLink.hash.substr(1));
-  this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-
   if (isSmall(window)) {
     this.$module.classList.add('is-smaller');
     this.$showNavLinkMobile.setAttribute('aria-hidden', 'false');
     this.$showNavLinkMobile.removeAttribute('tabindex');
     this.$showNavLinkMobile.classList.remove('js-hidden');
 
-    this.hideSubnavMobile();
     this.hideMainNavMobile(this.$showNavLinkMobile);
   } else {
     this.$module.classList.remove('is-smaller');
     this.$mainNav.classList.remove('main-nav-is-open', 'js-hidden');
-    this.$subNav.classList.remove('js-hidden');
     this.$showNavLinkMobile.setAttribute('aria-hidden', 'true');
     this.$showNavLinkMobile.setAttribute('tabindex', '-1');
     this.$showNavLinkMobile.classList.add('js-hidden');
   }
 };
 
-AccountMenu.prototype.showSubnavDesktop = function showSubnavDesktop() {
-  const self = this;
-
-  this.$module.classList.add('hmrc-subnav-is-open');
-
-  this.$mainNav.classList.add('hmrc-subnav-is-open');
-
-  this.$subNav.classList.add('hmrc-subnav-reveal');
-  this.$subNav.setAttribute('aria-hidden', 'false');
-  this.$subNav.setAttribute('aria-expanded', 'true');
-
-  const subNavHeight = this.$subNav.offsetHeight;
-  this.$module.style.marginBottom = `${subNavHeight}px`;
-
-  setTimeout(() => {
-    self.$subNav.focus();
-  }, 500);
-
-  this.$showSubnavLink.classList.add('hmrc-account-menu__link--more-expanded');
-  this.$showSubnavLink.setAttribute('aria-expanded', 'true');
-};
-
-AccountMenu.prototype.hideSubnavDesktop = function hideSubnavDesktop() {
-  this.$module.classList.remove('main-nav-is-open', 'hmrc-subnav-is-open');
-
-  this.$mainNav.classList.remove('hmrc-subnav-is-open');
-
-  this.$subNav.classList.remove('hmrc-subnav-reveal');
-  this.$subNav.setAttribute('aria-hidden', 'true');
-  this.$subNav.setAttribute('aria-expanded', 'false');
-
-  this.$showSubnavLink.classList.remove('hmrc-account-menu__link--more-expanded');
-  this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-
-  this.$module.style.marginBottom = this.$moduleBottomMargin;
-};
-
 AccountMenu.prototype.showMainNavMobile = function showMainNavMobile() {
   // TODO: shall we add main-nav-is-open to `nav`????
   this.$mainNav.classList.remove('js-hidden');
@@ -174,73 +75,10 @@ AccountMenu.prototype.hideMainNavMobile = function hideMainNavMobile(element) {
   this.$mainNav.setAttribute('aria-expanded', 'false');
 
   if (element.classList.contains('hmrc-account-menu__link--menu')) {
-    this.$mainNav.classList.remove('hmrc-subnav-is-open');
     this.$mainNav.classList.add('js-hidden');
 
     this.$showNavLinkMobile.setAttribute('aria-expanded', 'false');
     this.$showNavLinkMobile.classList.remove('hmrc-account-home--account--is-open');
-  } else if (element.classList.contains('hmrc-account-menu__link--more')) {
-    this.$mainNav.classList.add('hmrc-subnav-is-open');
-  }
-};
-
-AccountMenu.prototype.showSubnavMobile = function showSubnavMobile(element) {
-  this.$module.classList.add('hmrc-subnav-is-open');
-
-  this.$mainNav.classList.remove('main-nav-is-open');
-  this.$mainNav.classList.add('hmrc-subnav-is-open');
-
-  this.$subNav.classList.remove('js-hidden');
-  this.$subNav.classList.add('hmrc-subnav-reveal');
-  this.$subNav.setAttribute('aria-hidden', 'false');
-  this.$subNav.setAttribute('aria-expanded', 'true');
-
-  this.$showSubnavLink.classList.add('hmrc-account-menu__link--more-expanded');
-  this.$showSubnavLink.setAttribute('aria-expanded', 'true');
-
-  this.$backLink.parentNode.setAttribute('aria-hidden', 'false');
-  this.$backLink.removeAttribute('tabindex');
-  this.$backLink.parentNode.classList.remove('hidden');
-
-  element.parentNode.classList.add('active-subnav-parent');
-
-  // TODO: modernise the following and polyfill it for IE8
-  const $elementSiblings = element.parentNode.parentNode.children;
-  for (let i = 0; i < $elementSiblings.length; i += 1) {
-    const sibling = $elementSiblings[i];
-    if (sibling !== this.$backLink.parentNode && sibling !== element.parentNode) {
-      sibling.classList.add('hidden');
-    }
-  }
-};
-
-AccountMenu.prototype.hideSubnavMobile = function hideSubnavMobile() {
-  this.$module.classList.remove('hmrc-subnav-is-open');
-
-  this.$mainNav.classList.remove('hmrc-subnav-is-open');
-  this.$mainNav.classList.add('main-nav-is-open');
-
-  this.$subNav.classList.add('js-hidden');
-  this.$subNav.classList.remove('hmrc-subnav-reveal');
-  this.$subNav.setAttribute('aria-hidden', 'true');
-  this.$subNav.setAttribute('aria-expanded', 'false');
-
-  this.$showSubnavLink.classList.remove('hmrc-account-menu__link--more-expanded');
-  this.$showSubnavLink.setAttribute('aria-expanded', 'false');
-
-  this.$backLink.parentNode.setAttribute('aria-hidden', 'true');
-  this.$backLink.setAttribute('tabindex', '-1');
-  this.$backLink.parentNode.classList.add('hidden');
-
-  this.$showSubnavLink.parentNode.classList.remove('active-subnav-parent');
-
-  // TODO: modernise the following and polyfill it for IE8
-  const $backLinkSiblings = this.$backLink.parentNode.parentNode.children;
-  for (let i = 0; i < $backLinkSiblings.length; i += 1) {
-    const sibling = $backLinkSiblings[i];
-    if (sibling !== this.$backLink.parentNode) {
-      sibling.classList.remove('hidden');
-    }
   }
 };
 

package/hmrc/components/account-menu/template.njk

@@ -36,35 +36,9 @@
     </li>
 
     <li>
-      <a href="#subnav-your-account" id="account-menu__main-2" class="hmrc-account-menu__link hmrc-account-icon hmrc-account-menu__link--more" aria-haspopup="true" aria-owns="subnav-your-account">
-        {% if language == 'cy' %}Eich cyfrif{% else %}Your account{% endif %}
+      <a href="{{ params.yourProfile.href | default('#') }}" class="hmrc-account-menu__link{% if params.yourProfile.active %} hmrc-account-menu__link--active{% endif %}">
+        {% if language == 'cy' %}Eich proffil{% else %}Your profile{% endif %}
       </a>
-
-      <div class="hmrc-subnav" id="subnav-your-account" role="navigation" aria-labelledby="account-menu__main-2" aria-label="Your account">
-        <div class="govuk-grid-column-one-third hmrc-subnav__section">
-          <p class="hmrc-subnav__section__heading">
-            {% if language == 'cy' %}Gosodiadau di-bapur{% else %}Paperless settings{% endif %}
-          </p>
-
-          <div>
-            <a href="{{ params.paperlessSettings.href | default('#') }}">
-              {% if language == 'cy' %}Rheoli'ch gosodiadau di-bapur{% else %}Manage your paperless settings{% endif %}
-            </a>
-          </div>
-        </div>
-
-        <div class="govuk-grid-column-one-third hmrc-subnav__section">
-          <p class="hmrc-subnav__section__heading">
-            {% if language == 'cy' %}Manylion personol{% else %}Personal details{% endif %}
-          </p>
-
-          <div>
-            <a href="{{ params.personalDetails.href | default('#') }}">
-              {% if language == 'cy' %}Rheoli'ch manylion personol{% else %}Manage your personal details{% endif %}
-            </a>
-          </div>
-        </div>
-      </div>
     </li>
 
     <li>