@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/base/components/navigation/_main-nav.scss

@@ -0,0 +1,248 @@
+
+/* Main navigation menu styling  */ 
+.main-nav__wrapper {
+ 
+  .main-nav__burger {
+    float: right;
+  }
+
+  .main-nav__items {
+    position: absolute;
+    top: 80px;
+    right: 0;
+    overflow: hidden;
+    margin: 0;
+    width: 100%;
+    z-index: 100;
+    background-color: $colour-smoke-grey;
+
+    // Menu items
+    li {
+      a {
+        display: block;
+        padding: 14px 20px;
+        color: $colour-jasper-grey;
+        font-family: $body-font;
+        font-size: 20px;
+        line-height: 22px;
+        text-decoration: none;
+      }
+      // Duplicate link, top of each sub menu
+      &.menu-item--duplicate {
+        a {
+          font-size: 18px;
+          line-height: 24px;
+        }
+        // Line 
+        a:after {
+          position: absolute;
+          top: 50px;
+          right: 0;
+          left: 0;
+          margin: 0 10px;
+          height: 0;
+          border-bottom: 2px solid #999;
+          content: '';
+        }     
+      }
+      > ul {
+        position: relative;
+        top: 0;
+        width: 100%;
+        max-height: 0;
+        background-color: $colour-black;
+        transition-property: max-height;
+        transition-duration: 850ms;
+        transition-timing-function: cubic-bezier(0.2,1,0.5,1);
+
+        li {
+          a {
+            color: $colour-white;
+            font-size: 16px;
+            line-height: 18px;
+          }
+          &.menu-item--duplicate {
+            a {
+              font-size: 18px;
+              line-height: 24px;
+            }
+          }
+        }
+      }
+    }
+    /* Menu opened through hamburger toggle button */
+    &.menu-open {
+      max-height: 600px;
+      li {
+        &:hover {
+          background-color: $colour-light-grey;
+        }
+        &.item-open {
+          // Show sub menu when menu item is clicked
+          > ul {       
+            max-height: 400px;
+
+            li:hover {
+              background-color: $colour-jasper-grey;
+            }
+            a {
+              color: $colour-white;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include breakpoint($screen-md) {
+    .main-nav__items {
+      width: 50%;
+    }
+  }
+
+  @include breakpoint($desktop-nav-breakpoint) {
+    .main-nav__burger {
+      display: none;
+    }
+
+    .main-nav__items,
+    .main-nav__items.menu-open {
+      float: left;
+      position: relative;
+      top: 0;
+      right: initial;
+      overflow: visible;
+      width: 100%;
+      height: 103px;
+      max-height: none;
+      background-color: $colour-white;
+
+      li, 
+      li.item-open {
+        display: inline-block;
+        position: relative;
+        padding: 40px 16px;
+        background-color: transparent;
+
+        a {
+          padding: 0;
+          color: $colour-black;
+          font-size: 18px;
+          line-height: 24px;
+        }
+
+        // Sub menu, hidden until parent item is hovered
+        > ul {
+          display: none;
+          position: absolute;
+          top: 103px;
+          left: 0;
+          padding: 0;
+          width: 250px;
+          height: auto;
+          background-color: $colour-black;
+
+          // Sub menu items
+          li {
+            position: relative;
+            padding: 14px;
+            width: 100%;
+
+            a {
+              padding: 0;
+              color: $colour-white;
+              font-size: 16px;
+              line-height: 18px;
+              text-decoration: none; 
+            }
+
+            // Duplicate link, top of each sub menu
+            &.menu-item--duplicate {
+              a {
+                font-size: 18px;
+                line-height: 22px;
+
+                // Triangle pointer
+                &:before {
+                  display: block;
+                  position: absolute;
+                  top: -12px;
+                  left: 20px;
+                  width: 12px;
+                  height: 12px;
+                  border: 6px solid transparent;
+                  border-bottom-color: $colour-black;
+                  content: '';
+                }
+                // Line
+                &:after {
+                  top: 48px;
+                }
+              }
+            }
+            
+            &:hover {
+              background-color: $colour-jasper-grey;
+              > a {
+                color: $colour-white;
+                span.menu-item__text {
+                  border-bottom: 3px solid transparent;
+                }
+              }
+            }
+          }  
+        }
+      
+        // Show sub menus on hover
+        &:hover {
+          background-color: transparent;
+          > a {
+
+            span.menu-item__text {
+              border-bottom: 3px solid $colour-red;
+              background-color: transparent;
+            }
+          }
+             
+          > ul {
+            display: block;
+            max-height: 400px;
+            background-color: $colour-black;
+          }
+        }
+
+        // 'Focused' class provided by main-nav.js to add control over subnav focus state
+        &.focused > a,
+        > a:focus {
+
+          span.menu-item__text {
+            border-bottom: 3px solid $colour-red;
+            background-color: transparent;
+          }
+
+          & + ul {
+            display: block;
+            max-height: 400px;
+            background-color: $colour-black;
+          }
+        }
+      }
+    }  
+  }
+}
+
+#main-menu {
+  display: none;
+  height: auto;
+  max-height: none;
+  
+  &.menu-open {
+    max-height: none;
+  }
+  
+  @include breakpoint($desktop-nav-breakpoint) {
+    // Override any prior jQuery animations from changing breakpoint
+    display: block !important;
+  }
+
+}

package/src/sass/base/components/navigation/feature-nav-open.twig

@@ -0,0 +1,22 @@
+<div class="header__inner-wrapper">
+  <nav style="top:-10px" role="navigation" aria-labelledby="block-campaign-base-main-menu-menu" id="block-campaign-base-main-menu" class="contextual-region block block-menu navigation menu--main feature-main-nav crNavigation-processed show">          
+    <h2 class="visually-hidden" id="block-campaign-base-main-menu-menu">Main navigation</h2>
+      <ul class="menu menu--level-0">
+      <li class="menu-item">
+        <a href="/web/" data-drupal-link-system-path="<front>">Home</a>
+      </li>
+      <li class="menu-item menu-item--active-trail">
+        <a href="/web/fundraise" data-drupal-link-system-path="node/22" class="is-active">Fundraise (Landing)</a>
+      </li>
+      <li class="menu-item">
+        <a href="/web/whats-going-on" data-drupal-link-system-path="node/17">What's going on</a>
+      </li>
+      <li class="menu-item">
+        <a href="/web/node/1" data-drupal-link-system-path="node/1">FAQ</a>
+      </li>
+      <li class="menu-item">
+        <a href="/web/node/2" data-drupal-link-system-path="node/2">Legal</a>
+      </li>
+    </ul>
+  </nav>
+</div>

package/src/sass/base/components/navigation/feature-nav.twig

@@ -0,0 +1,46 @@
+<div class="main-nav__wrapper main-nav--feature__wrapper">
+  <!-- Featured items and hamburger button -->
+  <div class="main-nav--feature__inner-wrapper">
+    <ul class="main-nav--feature__featured-items">
+      <li class="menu-item">
+        <a href="/" data-drupal-link-system-path="<front>">Home</a>
+      </li>
+      <li class="menu-item">
+        <a href="/fundraise" data-drupal-link-system-path="node/22" class="is-active">Fundraise (Landing)</a>
+      </li>
+      <li class="menu-item">
+        <a href="/whats-going-on" data-drupal-link-system-path="node/17">What's going on</a>
+      </li>
+    </ul>
+    <!-- Mobile: navigation toggle button -->
+    <div class="main-nav__icons main-nav__burger">
+      <a role="button" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" aria-expanded="false">
+        <div class="c-hamburger__text">
+          <span class="visually-hidden">Open and close navigation menu</span>
+        </div>
+        <span></span>
+      </a>
+    </div>
+  </div>
+  <!-- Main navigation menu -->
+  <nav role="navigation" class="navigation menu--main">
+    <h2 class="visually-hidden" id="main-nav__title"> Main navigation menu </h2>
+    <ul id="main-menu" class="main-nav--feature__items menu sm main-nav__items">
+      <li class="menu-item">
+        <a href="/">Home</a>
+      </li>
+      <li class="menu-item">
+        <a href="/">Fundraise</a>
+      </li>
+      <li class="menu-item">
+        <a href="/link">What's going on</a>
+      </li>
+      <li class="menu-item">
+        <a href="/">FAQ</a>
+      </li>
+      <li class="menu-item">
+        <a href="/">Legal</a>
+      </li>
+    </ul>
+  </nav>
+</div>

package/src/sass/base/components/navigation/footer-nav.twig

@@ -0,0 +1,16 @@
+<div class="region region-footer cr-footer">
+  <nav role="navigation" aria-labelledby="block-campaign-base-footer-menu" id="block-campaign-base-footer" class="contextual-region block block-menu navigation menu--footer bg--black">          
+    <h2 class="visually-hidden" id="block-campaign-base-footer-menu">Footer menu</h2>
+    <ul class="menu">
+      <li class="menu-item">
+        <a href="/web/node/1" data-drupal-link-system-path="/web/node/1">FAQ</a>
+      </li>
+      <li class="menu-item">
+        <a href="/web/node/2" data-drupal-link-system-path="/web/node/2">Legal</a>
+      </li>
+      <li class="menu-item">
+        <a href="/web/partners" data-drupal-link-system-path="/web/partners">Partners</a>
+      </li>
+    </ul>
+  </nav>
+</div>

package/src/sass/base/components/navigation/js/main-nav.js

@@ -0,0 +1,173 @@
+(function ($) {
+
+  var animationSpeed = 0;
+  var totalItems = 0;
+
+  $('.main-nav').addClass("crNavigation-processed");
+
+  setUpNav();
+  
+  function setUpNav() {
+    $('#main-menu .menu-item a').wrapInner('<span class="menu-item__text"></span>');
+
+    duplicateParentLink();
+    toggleMenu();
+    stickyNav();
+
+    // Create our aria label dynamically
+    totalItems =  $('#main-menu').find('a').not('.has-submenu').length;
+    
+    $('.main-nav-toggle').attr('aria-label', 'Open and close Navigation Menu, ' +totalItems+ ' items listed');
+
+    // Set our speed depending on the type of nav
+    animationSpeed =  $('#main-menu').hasClass('main-nav--feature__items') ? 0 : 250;
+  }
+
+  /* Updates empty duplicate link (added by template) with the parent item's text and link, dynamically */
+  function duplicateParentLink() {
+    /* Update text and link */
+    $('.navigation > .main-nav__items > .menu-item--expanded').each(function () {
+
+      $this = $(this);
+
+      // Allow our duplicate link to 'inherit' all active classes if present
+      var activeTrailClass = $this.hasClass('menu-item--active-trail') ? 'menu-item--active-trail' : '';
+      var isActiveClass = $this.children('a').hasClass('is-active') ? 'is-active' : '';
+    
+      $thisDuplicate = $this.children('ul.main-nav__items').find('.menu-item--duplicate');
+
+      $thisLink = $this.children('a');
+
+      $thisDuplicate.addClass(activeTrailClass) // Add activeclass to li item
+        .children('a').addClass(isActiveClass) // Add active class to link itself
+          .attr('href', $thisLink.attr('href'))  // Add active class and url
+            .children('span').text($thisLink.text()); // Add link copy
+    });
+  }
+
+  function toggleMenu() {
+
+    var isOpen = false;
+
+    $('a.main-nav-toggle').on('click', function (e) {
+
+      // Allow us to add a '#' href value to the burger nav to make it tab-focussable 
+      e.preventDefault();
+
+      isOpen = !isOpen;
+
+      // Change state for visual effect, and also update the aria-expanded attribute for assistive tech
+      $(this).toggleClass('is-active').attr('aria-expanded', function (i, attr) {
+        return attr == 'true' ? 'false' : 'true'
+      });
+
+      // Change state of menu itself, animating with jQuery so we're hiding the UL only once it's finished animating closed, making sure assistive
+      // technologies can't read-out the nav items 
+      $('#main-menu', $(this).parents('.main-nav__wrapper')).toggleClass('menu-open', isOpen).slideToggle( animationSpeed );
+
+      // Close all menus if we've closed the nav
+      if (!($(this).hasClass('is-active'))) {
+        $('.main-nav__wrapper:not(.main-nav--feature__wrapper) li.item-open').removeClass('item-open');
+      };
+    });
+
+    toggleSubMenu();
+    focusState();        
+  }
+
+  function toggleSubMenu() {
+
+    $context = $('.main-nav__wrapper:not(.main-nav--feature__wrapper) .navigation');
+
+    $('li.menu-item--expanded > a', $context).on('click', function (e) {
+
+      // Basic check to see if the mobile nav is use before making
+      // the parent link function as a 'button' rather than a link
+      if ( $('.main-nav__burger').is(":visible")) {
+
+        e.preventDefault();
+
+        $this = $(this);
+        $listItem = $this.parent('li.menu-item--expanded');
+        $listItemParents = $listItem.parents('li.item-open');
+
+        // Remove any 'item-open' classes and add class to clicked item
+        $('li.item-open', $context).not($listItem).not($listItemParents).attr('aria-expanded', 'false').removeClass('item-open');
+
+        // Remove expanded attribute from all menu items
+        $('li.menu-item--expanded > a', $context).attr('aria-expanded', 'false');
+
+        // Add active class
+        $listItem.addClass('item-open');
+
+        // Add expanded state
+        $this.attr('aria-expanded', 'true');
+        
+      }
+    });    
+  }
+
+  function focusState() {
+
+    // Set our context for non-feature nav
+    $context = $('.main-nav__wrapper .navigation');
+
+    // To store the currently focused/blurred anchor
+    var $thisAnchor = null;
+    var focusState = false;
+
+    // Cache our selectors
+    var $subAnchor = $('li.menu-item--expanded > a ~ ul li a', $context);
+    var $parentAnchor = $('li.menu-item--expanded > a', $context);
+    var $parentLi = $('li.menu-item--expanded', $context);
+
+    $('html body a').on('focus blur', function(e) {
+      
+      // Cache the anchor being focused/blurred
+      $thisAnchor = $(this);
+
+      /* FOCUS event */
+      if ( e.type == "focus" ? true : false ) {
+
+        // Focussed on a non-nav anchor? Remove active states
+        if (!($thisAnchor.is($('a', $context)))) {
+          $parentLi.removeClass("focused item-open").children('a').attr('aria-expanded', 'false'); 
+        }
+
+        // If we're focussing on a nav item anchor, add focus class to the parent li, so we can affect all subnav styling
+        else {
+          if ($thisAnchor.is($parentAnchor)) {
+            // Unfocus all other focussed parent items
+            $parentLi.removeClass("focused item-open");
+            $(this).closest( $parentLi ).addClass("focused item-open").children('a').attr('aria-expanded', 'true');
+
+          }
+          // Else, check its not a subitem, then remove focus class from all nav item
+          else if (!($thisAnchor.is($subAnchor))) {
+            $parentLi.removeClass("focused item-open").children('a').attr('aria-expanded', 'false'); ; 
+          }
+        }
+      }
+
+      /* BLUR event */
+      else {
+        // If we're blurring away from the last-child subnav item, remove our overall focus class from the menu
+        if ($thisAnchor.is($subAnchor)) {
+          $thisAnchor.parent('li:last-child').closest('li.focused').removeClass("focused");
+        }
+      }
+    });
+  }
+
+  function stickyNav() {
+    
+    // Cache the our 'sticky nav' header only
+    $thisHeader = $('.sticky-nav__header');
+
+    $(window).scroll(function() {
+      // Toggle between our 'scrolling' classes to let us add a background colour
+      // to the sticky nav once it's being scrolled down the page
+      $thisHeader.toggleClass('scrolling', $(window).scrollTop() > 0);
+    });
+  }
+})(jQuery);

package/src/sass/base/components/navigation/main-nav.twig

@@ -0,0 +1,82 @@
+<div class="main-nav__wrapper">
+  <!-- Main navigation menu -->
+  <nav role="navigation" class="navigation menu--main">
+    <div class="main-nav__icons main-nav__burger">
+      <a role="button" class="c-hamburger c-hamburger--htx main-nav-toggle" href="#" aria-expanded="false" aria-haspopup="true">
+        <div class="c-hamburger__text">
+          <span class="visually-hidden">Open and close Navigation Menu</span>
+        </div>
+        <span></span>
+      </a>
+  </div>
+    <h2 class="visually-hidden" id="main-nav__title"> Main navigation menu </h2>
+    <!-- Mobile: navigation toggle button -->
+    <ul id="main-menu" class="main-nav__items sm menu--level-0 ">
+      <li class="menu-item">
+        <a href="/home">Home</a>
+      </li>
+      <li class="menu-item menu-item--expanded"> 
+        {# Add haspopup attr to our 'button' items #}
+        <a href="/fundraise" class="is-active" aria-haspopup="true" aria-expanded="false">Fundraise (active)</a> 
+        
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/fundraise">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-1">sub-item 1</a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item 2">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item menu-item--expanded menu-item--active-trail">
+        <a href="/link" aria-haspopup="true" aria-expanded="false">What's going on</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/whats-going-on">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-1" class="is-active">sub-item 1 (active)</a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item 2">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item menu-item--expanded">
+        <a href="/FAQ" aria-haspopup="true" aria-expanded="false">FAQ</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/FAQ">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-1">sub-item 1</a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-2">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item menu-item--expanded">
+        <a href="/legal" aria-haspopup="true" aria-expanded="false">Legal</a>
+        <ul class="main-nav__items menu--level-1">
+          <li class="menu-item menu-item--duplicate">
+            <a href="/legal">
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-1">sub-item 1</a>
+          </li>
+          <li class="menu-item">
+            <a href="/sub-item-2">sub-item 2</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</div>