diff --git a/app/assets/javascripts/modules/components/super-navigation-header.js b/app/assets/javascripts/modules/components/super-navigation-header.js deleted file mode 100644 index c3ad090a2..000000000 --- a/app/assets/javascripts/modules/components/super-navigation-header.js +++ /dev/null @@ -1,103 +0,0 @@ -window.GOVUK = window.GOVUK || {} -window.GOVUK.Modules = window.GOVUK.Modules || {}; - -(function (Modules) { - function SuperNavigationHeader () { } - - SuperNavigationHeader.prototype.start = function ($module) { - this.module = $module[0] - this.initDropDownMenu() - this.initShadowListener() - } - - SuperNavigationHeader.prototype.initDropDownMenu = function () { - var menuLinks = this.module.querySelectorAll('.js-app-c-super-navigation-header__item-link') - - for (var index = 0; index < menuLinks.length; index++) { - var menuLink = menuLinks[index] - - var button = document.createElement('button') - button.innerHTML = menuLink.innerHTML - button.setAttribute('class', menuLink.getAttribute('class') + ' app-c-super-navigation-header__item-link--button') - button.setAttribute('data-target-dropdown', menuLink.getAttribute('data-target-dropdown')) - button.setAttribute('aria-controls', menuLink.getAttribute('data-target-dropdown')) - button.setAttribute('aria-expanded', 'false') - - var parentElement = menuLink.parentElement - parentElement.insertBefore(button, menuLink) - parentElement.removeChild(menuLink) - - button.addEventListener('click', function (e) { - e.preventDefault() - var target = e.target - if (!target.classList.contains('js-app-c-super-navigation-header__item-link')) { - target = target.parentElement - } - - var dropdownId = target.getAttribute('data-target-dropdown') - var dropdown = this.module.querySelector('[data-dropdown-id=' + dropdownId + ']') - var dropdownBackdrop = this.module.querySelector('.app-c-super-navigation-header__dropdown-menu-full-width-backdrop') - var shadow = this.module.querySelector('.js-app-c-super-navigation-header__dropdown-shadow') - var alreadyShown = target.classList.contains('app-c-super-navigation-header__item-link--active') - - if (alreadyShown) this.hideActiveDropDown() - else { - this.hideActiveDropDown(target, dropdown) - this.showDropDown(target, dropdown, shadow, dropdownBackdrop) - } - }.bind(this)) - } - } - - SuperNavigationHeader.prototype.initShadowListener = function () { - var shadow = this.module.querySelector('.js-app-c-super-navigation-header__dropdown-shadow') - - shadow.addEventListener('click', function (e) { - this.hideActiveDropDown() - }.bind(this)) - } - - SuperNavigationHeader.prototype.showDropDown = function (target, dropdown, shadow, dropdownBackdrop) { - dropdown.classList.add('app-c-super-navigation-header__dropdown-menu--active') - shadow.classList.add('app-c-super-navigation-header__dropdown-shadow--active') - target.classList.add('app-c-super-navigation-header__item-link--active') - target.setAttribute('aria-expanded', 'true') - dropdownBackdrop.style.height = dropdown.offsetHeight.toString() + 'px' - dropdownBackdrop.classList.add('app-c-super-navigation-header__dropdown-menu-full-width-backdrop--active') - } - - SuperNavigationHeader.prototype.hideActiveDropDown = function (newTarget, newTargetDropdown) { - // shadow - if (!newTarget || !newTargetDropdown) { - var activeShadow = this.module.querySelector('.app-c-super-navigation-header__dropdown-shadow--active') - if (activeShadow) activeShadow.classList.remove('app-c-super-navigation-header__dropdown-shadow--active') - } - - // nav link - var navLinks = this.module.querySelectorAll('.app-c-super-navigation-header__item-link--active') - for (var index = 0; index < navLinks.length; index++) { - var navLink = navLinks[index] - if (!newTarget || navLinks !== newTarget) { - navLink.classList.remove('app-c-super-navigation-header__item-link--active') - navLink.setAttribute('aria-expanded', 'false') - } - } - - // dropdown menu - var dropDownMenus = this.module.querySelectorAll('.app-c-super-navigation-header__dropdown-menu--active') - for (var menuIndex = 0; menuIndex < dropDownMenus.length; menuIndex++) { - var dropDown = dropDownMenus[menuIndex] - if (!newTargetDropdown || dropDown !== newTargetDropdown) { - dropDown.classList.remove('app-c-super-navigation-header__dropdown-menu--active') - } - } - - // dropdown backdrop - if (!newTarget || !newTargetDropdown) { - this.module.querySelector('.app-c-super-navigation-header__dropdown-menu-full-width-backdrop') - .classList.remove('app-c-super-navigation-header__dropdown-menu-full-width-backdrop--active') - } - } - - Modules.SuperNavigationHeader = SuperNavigationHeader -})(window.GOVUK.Modules) diff --git a/app/assets/stylesheets/components/_super-navigation-header.scss b/app/assets/stylesheets/components/_super-navigation-header.scss deleted file mode 100644 index 3ab4c72b4..000000000 --- a/app/assets/stylesheets/components/_super-navigation-header.scss +++ /dev/null @@ -1,329 +0,0 @@ -$breakpoint: 769px; -$header-height: 55px; -$logo-padding-visually-centered: (govuk-spacing(2) + 4) 0 govuk-spacing(2) govuk-spacing(3); -$header-z-index-level-1: 20; -$header-z-index-level-2: 21; -$header-z-index-level-3: 22; - -.app-c-super-navigation-header, -.app-c-super-navigation-header__container { - border-bottom: 0; - margin-bottom: 0; - padding-top: 0; - z-index: $header-z-index-level-3; -} - -.app-c-super-navigation-header__container.govuk-width-container { - margin-left: 0; - margin-right: 0; - - @include govuk-media-query($from: $breakpoint) { - margin-left: auto; - margin-right: auto; - } -} - -.app-c-super-navigation-header__header-logo { - padding: $logo-padding-visually-centered; - margin-bottom: 0; - - @include govuk-media-query($from: $breakpoint) { - padding-left: 0; - } -} - -.app-c-super-navigation-header__content { - @include govuk-media-query($from: $breakpoint) { - text-align: right; - } -} - -.app-c-super-navigation-header__content .govuk-header__navigation--open { - height: 200vh; - - @include govuk-media-query($from: $breakpoint) { - height: auto; - } -} - -.app-c-super-navigation-header__items { - margin-bottom: 0; - - @include govuk-media-query($from: $breakpoint) { - padding: 0; - } - - &.govuk-header__navigation { - @include govuk-media-query($from: $breakpoint) { - display: flex; - justify-content: flex-end; - } - } -} - -.app-c-super-navigation-header__item { - display: flex; - margin-right: 0; - padding: 0; - flex-direction: column; - border-bottom: 1px solid $govuk-border-colour; - - @include govuk-media-query($from: $breakpoint) { - display: inline-flex; - flex-direction: row; - border-bottom: none; - } -} - -.app-c-super-navigation-header__item-link { - padding: govuk-spacing(4) 0; - - @include govuk-media-query($from: $breakpoint) { - padding: govuk-spacing(3) + 2; - width: auto; - } -} - -.app-c-super-navigation-header__item-icon { - display: none; -} - -// Search - -.app-c-super-navigation-header__item--search { - @include govuk-media-query($from: $breakpoint) { - height: $header-height; - width: $header-height; - padding: 0; - margin-right: govuk-spacing(3); - background-color: govuk-colour('blue'); - } -} - -.app-c-super-navigation-header__item-link--search { - @include govuk-media-query($from: $breakpoint) { - background-image: image-url("search-icon.svg"); - background-position: 50%; - background-size: 35%; - background-repeat: no-repeat; - display: inherit; - width: $header-height; - - &:focus, - &.app-c-super-navigation-header__item-link--active { - background-image: image-url("search-icon--black.svg"); - } - } -} - -.app-c-super-navigation-header__item-link-text--search { - @include govuk-media-query($from: $breakpoint) { - display: block; - text-indent: -5000px; - overflow: hidden; - } -} - -.app-c-super-navigation-header__menu-button { - font-size: 19px; - font-weight: bold; - line-height: 1.3; - border-left: 1px solid govuk-colour("mid-grey"); - padding: govuk-spacing(3) govuk-spacing(4); - top: 0; -} - -// Dropdown styling - -.app-c-super-navigation-header__menu-button.govuk-header__menu-button--open { - background-color: govuk-colour("white"); - color: govuk-colour("black"); -} - -.app-c-super-navigation-header__dropdown-menu { - display: none; - background-color: govuk-colour('light-grey'); - width: 100%; - z-index: $header-z-index-level-3; - padding: govuk-spacing(3) 0; - - @include govuk-media-query($from: $breakpoint) { - padding: govuk-spacing(8) 0; - background-color: govuk-colour('white'); - } - - &.app-c-super-navigation-header__dropdown-menu--active { - display: block; - } -} - -.app-c-super-navigation-header__dropdown-menu--inline { - @include govuk-media-query($from: $breakpoint) { - position: absolute; - top: 100%; - width: 100%; - right: 0; - left: 0; - text-align: left; - } -} - -.app-c-super-navigation-header__dropdown-menu-full-width-backdrop { - display: none; - height: 550px; - background: govuk-colour('white'); - z-index: $header-z-index-level-2; - width: 100%; - position: absolute; -} - -.app-c-super-navigation-header__dropdown-menu-full-width-backdrop--active { - @include govuk-media-query($from: $breakpoint) { - display: block; - } -} - -.app-c-super-navigation-header__dropdown-menu .app-c-super-navigation-header__dropdown-list-item { - margin-bottom: govuk-spacing(4); - min-height: govuk-spacing(6); -} - -.app-c-super-navigation-header__dropdown-list-item .app-c-super-navigation-header__dropdown-list-item-link { - @include govuk-font(27, $weight: bold); - - @include govuk-media-query($from: $breakpoint) { - @include govuk-font(19, $weight: bold); - } -} - -.app-c-super-navigation-header__dropdown-list-item-description { - min-height: govuk-spacing(7); -} - -.app-c-super-navigation-header__dropdown-menu--search .app-c-super-navigation-header__dropdown-list-item { - min-height: govuk-spacing(7); -} - -.app-c-super-navigation-header__dropdown-shadow { - display: none; - position: fixed; - top: -$header-height; - width: 200vw; - height: 120vh; - background: govuk-colour("black"); - opacity: .8; - z-index: $header-z-index-level-1; - - &.app-c-super-navigation-header__dropdown-shadow--active { - display: none; - - @include govuk-media-query($from: $breakpoint) { - display: block; - } - } -} - -// JS Enabled Styling - -.js-enabled .app-c-super-navigation-header__content { - background-color: govuk-colour('white'); - - @include govuk-media-query($from: $breakpoint) { - text-align: right; - background-color: govuk-colour('black'); - } -} - -.js-enabled .app-c-super-navigation-header__item-link { - @include govuk-font(27, $weight: bold); - - color: $govuk-link-colour; - text-decoration: underline; - padding: govuk-spacing(6) govuk-spacing(3); - - .app-c-super-navigation-header__item-icon--white { - display: none; - } - - .app-c-super-navigation-header__item-icon--black { - display: inline; - } - - @include govuk-media-query($from: $breakpoint) { - @include govuk-font(16, $weight: bold); - - color: govuk-colour('white'); - padding: govuk-spacing(3) + 2; - text-decoration: none; - - .app-c-super-navigation-header__item-icon--white { - display: inline; - } - - .app-c-super-navigation-header__item-icon--black { - display: none; - } - - &:focus { - @include govuk-focused-text; - - .app-c-super-navigation-header__item-icon--white { - display: none; - } - - .app-c-super-navigation-header__item-icon--black { - display: inline; - } - } - } -} - -.js-enabled .app-c-super-navigation-header__item-link--button { - border: none; - background-color: inherit; - text-align: left; -} - -.js-enabled .app-c-super-navigation-header__item-link--active { - color: govuk-colour('black'); - background-color: govuk-colour('light-grey'); - - &:visited, - &:link { - color: govuk-colour('black'); - } - - .app-c-super-navigation-header__item-icon--white { - display: none; - } - - .app-c-super-navigation-header__item-icon--black { - display: inline; - } - - @include govuk-media-query($from: $breakpoint) { - background-color: govuk-colour('white'); - } -} - -.js-enabled .app-c-super-navigation-header__item-icon { - display: inline; - position: absolute; - right: 0; - padding-right: govuk-spacing(3); - padding-top: govuk-spacing(1); - width: govuk-spacing(3); - - @include govuk-media-query($from: $breakpoint) { - padding-left: govuk-spacing(1); - padding-right: 0; - padding-top: 0; - position: relative; - right: none; - width: auto; - } -} - -.js-enabled .app-c-super-navigation-header__item-icon--black { - display: none; -}