@comicrelief/storybook 1.34.2 → 2.0.1

package/src/sass/themes/cr/2019/components/navigation/_main-nav.scss

@@ -0,0 +1,459 @@
+/* Main navigation styling */
+header[role="banner"] {
+  border-bottom: 0;
+  height: 75px;
+  padding: 0;
+  z-index: 91; // To make dropdown link visible
+
+  @include breakpoint($screen-md) {
+    height: 90px;
+  }
+
+  .header__inner-wrapper {
+
+    // Remove clearfix so flexbox works properly
+    &:after {
+      content: none;
+    }
+
+    // Position logo to left, menu in center, meta icon block to the right
+    height: 100%;
+    background-color: $colour-white;
+    justify-content: space-between;
+
+    // Logo styling
+    .site-logo {
+      min-width: 0px;
+      margin-top: 13px;
+      margin-left: 15px;
+      width: 50px;
+      height: 50px;
+      background: url($image-path+"cr18-logo.png") no-repeat 0 0;
+      transform: rotate(-14deg);
+      background-size: 100%;
+
+      // Keep image hidden, remove this from template?
+      img {
+        display: none;
+      }
+
+      @include breakpoint($screen-md) {
+        margin-top: 15px;
+        width: 60px;
+        height: 60px;
+      }
+    }
+
+
+    .main-nav__wrapper {
+
+      // Override hamburger style
+      .c-hamburger {
+        width: 40px;
+        margin-right: 10px;
+
+        span {
+          width: 25px;
+          top: 35px;
+          right: 5px;
+          background-color: $colour-deep-violet;
+
+          &::before,
+          &::after {
+            background-color: $colour-deep-violet;
+          }
+        }
+
+        &:hover {
+
+          span,
+          span::before,
+          span::after {
+            background-color: $colour-grey;
+          }
+        }
+
+        &.is-active {
+          background-color: #f9f9f9;
+
+          span {
+            background: none;
+
+            &:before {
+              background-color: $colour-black;
+            }
+
+            &:after {
+              background-color: $colour-black;
+            }
+          }
+        }
+
+        @include breakpoint($screen-md) {
+          span {
+            top: 40px;
+          }
+        }
+      }
+
+      @include breakpoint($desktop-nav-breakpoint) {
+        margin-right: 0;
+        background-color: transparent;
+      }
+
+      height: auto;
+      z-index: 1;
+
+      li.menu-item {
+        padding-top: 0;
+        position: relative;
+      }
+
+      // UL menu
+      .main-nav__items {
+        top: 75px;
+
+        @include breakpoint($screen-md) {
+          top: 90px;
+        }
+
+        @include breakpoint($desktop-nav-breakpoint) {
+          top: 0;
+        }
+
+        li,
+        li.item-open {
+          a {
+            font-size: 16px;
+            line-height: 16px;
+            color: $colour-dark-grey;
+            @include breakpoint($desktop-nav-breakpoint) {
+              padding: 8px 7px 4px;
+            }
+          }
+        }
+
+        // Parent items of the menu
+        &.menu--level-0 {
+          @include breakpoint($desktop-nav-breakpoint) {
+            width: auto;
+            text-align: center;
+          }
+
+          >li.item-open,
+          >li {
+            &:hover>a {
+              background-color: $colour-light-teal;
+            }
+
+            @include breakpoint($desktop-nav-breakpoint) {
+              padding: 30px 0px;
+              margin: 0 8px;
+              &:hover>a {
+                background-color: transparent;
+              }
+            }
+
+            >a {
+              font-family: $font-medium;
+              padding: 17px 20px;
+              height: 46px;
+              font-weight: 800;
+              color: $colour-black;
+
+              @include breakpoint($desktop-nav-breakpoint) {
+                font-size: 15px;
+                font-weight: 800;
+                line-height: 15px;
+                padding: 7px 5px;
+                height: auto;
+
+              }
+            }
+          }
+        }
+
+        // First level of sub items (dropdwn)
+        &.menu--level-1 {
+          li:hover>a span.menu-item__text {
+            border-bottom: none; // remove border on hover links level-1
+          }
+
+          li.menu-item.menu-item--duplicate {
+            a {
+              :hover {
+                background-color: transparent;
+              }
+              color: $colour-light-teal;
+              font-family: $font-medium;
+              position: relative;
+              font-size: 20px;
+              line-height: 21px;
+              height: 49px;
+
+              &:after {
+                width: 14px;
+                border-bottom: 2px solid $colour-white;
+                left: 12px;
+                top: auto;
+                bottom: 0;
+
+                @include breakpoint($desktop-nav-breakpoint) {
+                  bottom: 10px;
+                }
+              }
+
+              &:before {
+                @include breakpoint($desktop-nav-breakpoint) {
+                  left: 34px;
+                  width: 10px;
+                  height: 10px;
+                  border: 11px solid transparent;
+                  border-bottom-color: $colour-deep-violet;
+                  top: -22px;
+                }
+              }
+
+              &.is-active {
+
+                // Add border to the span (to allow control over the width), rather than the :after psuedo
+                span.menu-item__text {
+                  border-bottom: 4px solid $colour-light-teal;
+                }
+
+                &:after {
+                  border-bottom: none;
+                }
+              }
+            }
+
+            // Make only title/link extra-bold 
+            a:first-child {
+              font-weight: 800;
+              color: $colour-white;
+            }
+
+            @include breakpoint($desktop-nav-breakpoint) {
+              height: auto;
+              width: 100%;
+              padding: 0;
+
+              a {
+                padding: 26px 21px;
+                height: auto;
+              }
+            }
+          }
+
+          li.item-open a,
+          li a {
+            color: $colour-white;
+
+            &.is-active span.menu-item__text {
+              border-bottom: 2px solid $colour-white;
+            }
+          }
+
+          @include breakpoint($desktop-nav-breakpoint) {
+            padding-bottom: 20px !important;
+          }
+        }
+
+        // First and second levels of sub items
+        &.menu--level-1,
+        &.menu--level-2 {
+          top: 0;
+
+          @include breakpoint($desktop-nav-breakpoint) {
+            top: 90px;
+            text-align: left;
+          }
+
+          li a,
+          li.item-open a {
+            font-family: $montserrat;
+            font-weight: 800;
+            font-size: 16px;
+            line-height: 16px;
+            color: $colour-white;
+            height: 44px;
+
+            @include breakpoint($desktop-nav-breakpoint) {
+              // The complex inherited styles need a little bullying to override here
+              font-size: 15px !important;
+              line-height: 24px !important;
+            }
+
+            &:hover {
+              background-color: #3e1c43;
+              border: none;
+
+              &.is-active span.menu-item__text {
+                border-bottom: 2px solid $colour-white;
+              }
+            }
+
+            &.is-active span.menu-item__text {
+              border-bottom: 2px solid $colour-white;
+            }
+          }
+
+          li.menu-item,
+          li.item-open.menu-item {
+            @include breakpoint($desktop-nav-breakpoint) {
+              padding: 0;
+              height: 100%;
+              width: 100%;
+
+              a {
+                padding: 14px 21px;
+                height: auto;
+                font-weight: 700;
+                font-size: 20px;
+                line-height: 32px;
+              }
+            }
+          }
+        }
+
+        li.item-open,
+        li {
+
+          // Reset base styles, so we're targetting the anchor and not the li
+          >ul li:hover,
+          ul.menu--level-1 li a:focus  {
+            background-color: #3e1c43;
+          }
+
+          >ul.menu--level-1 li a:focus,
+          ul li a:hover  {
+            background-color: #3e1c43;
+          }
+
+          &:hover>a span.menu-item__text {
+            @include breakpoint($desktop-nav-breakpoint) {
+              border-bottom: 2px solid $colour-deep-violet;
+              padding-bottom: 2px;
+            }
+          }
+        }
+
+        // Secondary nav items that have tertiary menu items
+        &.menu--level-1 li.menu-item.menu-item--expanded {
+          @include breakpoint($desktop-nav-breakpoint) {
+            height: 100%;
+          }
+        }
+
+        // Second levels of sub items
+        &.menu--level-2 {
+          li.menu-item {
+            padding: 0;
+
+            a {
+              // Indent tertiary items
+              padding-left: 40px;
+              background-color: lighten($colour-dark-purple, 10%);
+
+              &:hover {
+                background-color: lighten($colour-dark-purple, 15%) !important;
+              }
+            }
+          }
+
+          @include breakpoint($desktop-nav-breakpoint) {
+            display: block;
+            position: relative;
+            top: 0;
+            height: 100%;
+            max-height: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .block-cr-meta-icons {
+    height: 75px;
+
+    .btn.donate {
+      padding: 12px 17px;
+      margin-right: 10px;
+      font-size: 15px;
+      font-weight: 800;
+      @include breakpoint ($screen-md) {
+        padding: 11px 17px;
+      }
+    }
+
+    .meta-icons__magnify,
+    .meta-icons__esu-toggle {
+      height: auto;
+      margin-right: 10px;
+    }
+
+    @include breakpoint($screen-md) {
+      height: 90px;
+
+      .meta-icons__magnify {
+        margin-left: 15px;
+      }
+    }
+
+  }
+
+  // Override meta icons color & hamburger menu
+  .block-cr-meta-icons,
+  .meta-icons__login,
+  .meta-icons__magnify,
+  .meta-icons__esu-toggle,
+  .main-nav__icons.main-nav__burger,
+  .c-hamburger__text {
+    height: 75px;
+
+    svg.icon {
+      fill: $colour-deep-violet;
+    }
+
+    svg.icon:hover {
+      fill: $colour-grey;
+    }
+
+    @include breakpoint($screen-md) {
+      height: 90px;
+    }
+  }
+
+  .block-cr-meta-icons {
+    .meta-icons {
+      display: flex;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 10px;
+    }
+
+    @include breakpoint($desktop-nav-breakpoint) {
+      .meta-icons {
+        left: 0px;
+      }
+    }
+  }
+}
+
+// Ensure wrapper height matches the content, so we can display nav fully underneath
+.cc_banner-wrapper {
+  height: auto;
+}
+
+// Remove red border-bottom on focus 
+.main-nav__wrapper .main-nav__items li.focused>a span.menu-item__text, .main-nav__wrapper .main-nav__items li>a:focus span.menu-item__text, .main-nav__wrapper .main-nav__items li.item-open.focused>a span.menu-item__text, .main-nav__wrapper .main-nav__items li.item-open>a:focus span.menu-item__text {
+  border: none;
+}
+
+// Tooltips provided by jQuery UI Tooltip js plugin
+.ui-tooltip.ui-tooltip--nav {
+  .ui-tooltip-content {
+    font-family: $montserrat;
+    text-transform: initial;
+  }
+}

package/src/sass/themes/cr/2019/components/navigation/expanded-footer.twig

@@ -0,0 +1,167 @@
+<footer role="contentinfo">
+  <div class="region region-footer cr-footer">
+    <div class="footer--expanded footer-nav-outer-wrapper">
+      <div class="footer-nav-inner-wrapper">
+        <div class="footer__social-links">
+          <ul>
+            <li>
+              <a href="https://www.facebook.com/comicrelief" title="Facebook" target="_blank" class="icon__fb">
+                <svg class="icon">
+                  <use xlink:href="#icon-facebook"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/comicrelief" title="Twitter" target="_blank" class="icon__twitter">
+                <svg class="icon">
+                  <use xlink:href="#icon-twitter"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw" title="Youtube" target="_blank" class="icon__youtube">
+                <svg class="icon">
+                  <use xlink:href="#icon-youtube"></use>
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="https://www.instagram.com/comicrelief" title="Instagram" target="_blank" class="icon__instagram">
+                <svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
+                  <title>Rednoseday Instagram</title>
+                  <desc>Visit Rednoseday instagram page</desc>
+                  <circle cx="25" cy="25" r="25" fill="#E52630"></circle>
+                  <path d="M25,13.25c3.83,0,4.28,0,5.79.08a7.93,7.93,0,0,1,2.66.49,4.75,4.75,0,0,1,2.72,2.72,7.93,7.93,0,0,1,.49,2.66c.07,1.51.08,2,.08,5.79s0,4.28-.08,5.79a7.93,7.93,0,0,1-.49,2.66,4.75,4.75,0,0,1-2.72,2.72,7.93,7.93,0,0,1-2.66.49c-1.51.07-2,.08-5.79.08s-4.28,0-5.79-.08a7.93,7.93,0,0,1-2.66-.49,4.75,4.75,0,0,1-2.72-2.72,7.93,7.93,0,0,1-.49-2.66c-.07-1.51-.08-2-.08-5.79s0-4.28.08-5.79a7.93,7.93,0,0,1,.49-2.66,4.75,4.75,0,0,1,2.72-2.72,7.93,7.93,0,0,1,2.66-.49c1.51-.07,2-.08,5.79-.08m0-2.58c-3.89,0-4.38,0-5.91.09a10.52,10.52,0,0,0-3.48.67,7.33,7.33,0,0,0-4.19,4.19,10.52,10.52,0,0,0-.67,3.48c-.07,1.53-.09,2-.09,5.91s0,4.38.09,5.91a10.52,10.52,0,0,0,.67,3.48,7.33,7.33,0,0,0,4.19,4.19,10.52,10.52,0,0,0,3.48.67c1.53.07,2,.09,5.91.09s4.38,0,5.91-.09a10.52,10.52,0,0,0,3.48-.67,7.33,7.33,0,0,0,4.19-4.19,10.52,10.52,0,0,0,.67-3.48c.07-1.53.09-2,.09-5.91s0-4.38-.09-5.91a10.52,10.52,0,0,0-.67-3.48,7.33,7.33,0,0,0-4.19-4.19,10.52,10.52,0,0,0-3.48-.67C29.38,10.69,28.91,10.67,25,10.67Z" fill="#fff"></path>
+                  <path d="M25,17.64A7.36,7.36,0,1,0,32.36,25,7.36,7.36,0,0,0,25,17.64Zm0,12.14A4.78,4.78,0,1,1,29.78,25h0A4.78,4.78,0,0,1,25,29.78Z" fill="#fff"></path>
+                  <circle cx="32.65" cy="17.35" r="1.72" fill="#fff"></circle>
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <nav role="navigation" aria-labelledby="block-expandedfooter-menu" id="block-expandedfooter" class="contextual-region block block-menu navigation menu--expanded-footer crExpandedFooter-processed">
+          <h2 class="visually-hidden" id="block-expandedfooter-menu">Expanded Footer</h2>
+          <div data-contextual-id="block:block=expandedfooter:langcode=en|menu:menu=expanded-footer:langcode=en" class="contextual" role="form">
+            <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Expanded Footer configuration options</button>
+            <ul class="contextual-links" hidden="">
+              <li class="block-configure"><a href="/admin/structure/block/manage/expandedfooter?destination=node/21">Configure block</a></li>
+              <li class="entitymenuedit-form"><a href="/admin/structure/menu/manage/expanded-footer?destination=node/21">Edit menu</a></li>
+            </ul>
+          </div>
+          <ul class="menu menu--level-0">
+            <li class="menu-item menu-item--expanded menu-item--1 clearfix">
+              <a href="/" title="A Second Menu" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Hear From Us</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix">
+                <li class="menu-item menu-item--1 clearfix">
+                  <a href="#" data-drupal-link-system-path="<front>" class="is-active">
+                    <span class="menu-item__text">
+                      Get the newsletter
+                    </span>
+                  </a>
+                </li>
+                <li class="menu-item menu-item--2 clearfix">
+                  <a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">How we contact you</span></a>
+                </li>
+              </ul>
+            </li>
+            <li class="menu-item menu-item--expanded menu-item--2 clearfix">
+              <a href="/" title="Get in touch" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Get in touch</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items">
+                <li class="menu-item menu-item--1 clearfix">
+                  <a href="/" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Contact us</span></a>
+                </li>
+                <li class="menu-item menu-item--2 clearfix">
+                  <a href="/" title="Your Gift Aid" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Your Gift Aid</span></a>
+                </li>
+                <li class="menu-item menu-item--3 clearfix">
+                  <a href="/" title="FAQs" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">FAQs</span></a>
+                </li>
+              </ul>
+            </li>
+            <li class="menu-item menu-item--expanded menu-item--3 clearfix">
+              <a href="/" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">About us</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
+                <div class="menu--expanded-footer__left">
+                  <li class="menu-item menu-item--1 clearfix">
+                    <a href="/newsletter" title="Get the newsletter"><span class="menu-item__text">Get the newsletter</span></a>
+                  </li>
+                  <li class="menu-item menu-item--2 clearfix">
+                    <a href="/how-we-contact-you" title="Choose how we contact you"><span class="menu-item__text">Choose how we contact you</span></a>
+                  </li>
+                  <li class="menu-item menu-item--3 clearfix">
+                    <a href="/another-link" title="Another link"><span class="menu-item__text">Another link</span></a>
+                  </li>
+                </div>
+                <div class="menu--expanded-footer__right">
+                  <li class="menu-item menu-item--4 clearfix">
+                    <a href="/yet-another-link" title="Yet Another Link"><span class="menu-item__text">Yet Another Link</span></a>
+                  </li>
+                  <li class="menu-item menu-item--5 clearfix">
+                    <a href="/a-fifth-link" title="A Fifth Link"><span class="menu-item__text">A Fifth Link</span></a>
+                  </li>
+                  <li class="menu-item menu-item--6 clearfix">
+                    <a href="/sixth-link"><span class="menu-item__text">A Final Sixth Link</span></a>
+                  </li>
+                </div>
+              </ul>
+            </li>
+            <li class="menu-item menu-item--expanded menu-item--4 clearfix">
+              <a href="/" title="Careers" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Careers</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
+                <li class="menu-item menu-item--1 clearfix">
+                  <a href="/" title="Open roles" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Open roles</span></a>
+                </li>
+                <li class="menu-item menu-item--2 clearfix">
+                  <a href="/" title="Working at Comic Relief" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Working at Comic Relief</span></a>
+                </li>
+              </ul>
+            </li>
+            <li class="menu-item menu-item--expanded menu-item--5 clearfix">
+              <a href="/" title="News" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">News</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items">
+                <li class="menu-item menu-item--1 clearfix">
+                  <a href="/news" title="News" data-drupal-link-system-path="node/427"><span class="menu-item__text">News</span></a>
+                </li>
+                <li class="menu-item menu-item--2 clearfix">
+                  <a href="/" title="News" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Press Area</span></a>
+                </li>
+              </ul>
+            </li>
+            <li class="menu-item menu-item--expanded menu-item--6 clearfix">
+              <a href="/" title="Legal" aria-expanded="false" aria-haspopup="true" data-drupal-link-system-path="<front>" class="is-active"><span class="menu-item__text">Legal</span></a>
+              <ul class="menu menu--level-0 menu menu--expanded-footer menu--has-2-items menu--level-1 clearfix menu--has-3-items menu--has-6-items menu--has-4-items">
+                <div class="menu--expanded-footer__left">
+                  <li class="menu-item menu-item--1 clearfix">
+                    <a href="/some-link" title="Fourth Menu link"><span class="menu-item__text">Fourth Menu link</span></a>
+                  </li>
+                  <li class="menu-item menu-item--2 clearfix">
+                    <a href="/liiiiink" title="liiiiink"><span class="menu-item__text">liiiiink</span></a>
+                  </li>
+                </div>
+                <div class="menu--expanded-footer__right">
+                  <li class="menu-item menu-item--3 clearfix">
+                    <a href="/liiiiink2" title="liiiiink2"><span class="menu-item__text">liiiiink2</span></a>
+                  </li>
+                  <li class="menu-item menu-item--4 clearfix">
+                    <a href="/liiiiink4" title="liiiiink4"><span class="menu-item__text">liiiiink4</span></a>
+                  </li>
+                </div>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+        <span class="md-breakpoint"></span>
+        <div class="footer__branding">
+          <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
+            <svg class="icon">
+              <use xlink:href="#crlogo2018"></use>
+            </svg>
+          </a>
+        </div>
+        <div class="footer__copyright">
+        <p>Comic  Relief  is  the  trading  name  of  Charity  Projects,  a  registered  charity  in  England  and Wales  (326568)  and  Scotland  (SC039730),  which  is a company  limited  by  guarantee registered in England and Wales (01806414) with its registered address at Hanover House, 14 Hanover Square, London, W1S 1HP</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>