@ons/design-system 48.0.3 → 49.0.0

package/scss/main.scss

@@ -24,7 +24,6 @@
 @import '../components/fieldset/fieldset';
 @import '../components/find-a-support-centre/find-a-support-centre';
 @import '../components/footer/footer';
-@import '../components/header/header-nav';
 @import '../components/header/header';
 @import '../components/hero/hero';
 @import '../components/icons/icons';
@@ -38,6 +37,7 @@
 @import '../components/message/message';
 @import '../components/metadata/metadata';
 @import '../components/modal/modal';
+@import '../components/navigation/navigation';
 @import '../components/pagination/pagination';
 @import '../components/panel/panel';
 @import '../components/phase-banner/phase-banner';

package/components/header/_header-nav.scss

@@ -1,108 +0,0 @@
-.ons-header-nav {
-  position: relative;
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    border-top: 1px solid rgba(255, 255, 255, 0.5);
-    display: block;
-    margin: 0;
-    padding: 0.3rem 0;
-
-    @include mq(m) {
-      border-bottom: 4px solid transparent;
-      border-top: 0;
-      display: inline-block;
-      margin: 0 0 0 1rem;
-      padding: 0 0 0.3rem;
-      position: relative;
-      text-align: center;
-
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &--active,
-      &:hover {
-        border-color: $color-white;
-      }
-    }
-  }
-
-  &__item + &__item--secondary {
-    border-top: 2px solid $color-white;
-    margin-top: 0.5rem;
-  }
-
-  &__link {
-    color: $color-white;
-    display: block;
-    font-size: 0.9rem;
-    margin: 0 0.35rem;
-    padding: 0 0.65rem;
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-      color: #c2ecff;
-      text-decoration: none;
-    }
-
-    @include mq(m) {
-      display: inline-block;
-      font-size: 1rem;
-      margin: 0;
-      padding: 0;
-
-      &:hover,
-      &:focus {
-        color: $color-white;
-      }
-    }
-  }
-
-  &__item--active &__link {
-    font-weight: 700;
-  }
-}
-
-.ons-header-service-nav {
-  display: inline-block;
-
-  &--mobile {
-    background: $color-branded-tint;
-    padding: 1rem;
-    width: 100%;
-  }
-
-  &__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__item {
-    display: inline-block;
-    margin: 0 0 0 1rem;
-    &--mobile {
-      display: block;
-      margin: 0 0 0.5rem;
-    }
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  .ons-language-links {
-    border-top: 1px solid $color-branded;
-    margin: 1.5rem 0 0;
-    padding: 1rem 0 0;
-
-    &__item {
-      margin: 0 0 0.5rem;
-    }
-  }
-}

package/components/header/header-nav.dom.js

@@ -1,31 +0,0 @@
-import domready from '../../js/domready';
-
-domready(async () => {
-  const toggleMainBtn = document.querySelector('.ons-js-toggle-main');
-  const navEl = document.querySelector('.ons-js-header-nav');
-  const navHideClass = 'ons-u-d-no@xxs@m';
-  const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
-  const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
-  const servicesHideClass = 'ons-u-d-no';
-  const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
-  const searchEl = document.querySelector('.ons-js-header-search');
-  const searchHideClass = 'ons-u-d-no@xs@m';
-
-  if (toggleMainBtn) {
-    const NavToggle = (await import('./header-nav')).default;
-
-    new NavToggle(toggleMainBtn, navEl, navHideClass).registerEvents();
-  }
-
-  if (toggleSearchBtn) {
-    const searchToggle = (await import('./header-nav')).default;
-
-    new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
-  }
-
-  if (toggleServicesBtn) {
-    const servicesToggle = (await import('./header-nav')).default;
-
-    new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
-  }
-});