@foeewni/web-core 3.0.0-alpha.13 → 3.0.0-alpha.15

package/src/components/hero-panel/style.scss

@@ -265,9 +265,37 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
     span {
       background: $foe-primary;
-      padding: $spacer;
+      border: $foe-primary $spacer solid;
+      border-left: 0;
       display: inline;
       border-color: transparent;
+      line-height: 6rem;
+      white-space: pre-wrap;
+      position: relative;
+
+      @include media-breakpoint-down(md) {
+        line-height: 4rem;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -$spacer * .95;
+        right: 100%;
+        bottom: -$spacer * .95;
+        width: 1rem;
+        background-color: #61bdaa;
+      }
+
+      &[data-jaunt-factor] {
+        border: none;
+        border-color: $foe-primary;
+        padding: $spacer;
+
+        &::before {
+          display: none;
+        }
+      }
     }
   }
 

package/src/components/layout/backgrounds.scss

@@ -31,7 +31,8 @@
   }
 }
 
-.bg-primary {
+.bg-primary,
+.bg-secondary {
   background-color: $foe-leaf-75 !important;
 
   @include heading_colours($foe-extradark, $foe-extradark);
@@ -83,3 +84,21 @@
     @include button-outline-variant($foe-offwhite);
   }
 }
+
+.bg-light,
+.bg-white {
+  background-color: $foe-offwhite !important;
+
+  @include heading_colours($foe-accent, $foe-accent);
+  @include text_colours($foe-accent, $foe-accent);
+
+  .btn-primary,
+  .foe-cta {
+    @include button-variant($foe-accent, $foe-accent);
+  }
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @include button-outline-variant($foe-accent);
+  }
+}

package/src/components/navigation/_header.scss

@@ -13,15 +13,22 @@
   padding: 0;
   z-index: $zindex-navbar !important;
   background-color: $foe-leaf-75;
+  color: $foe-extradark;
   transition:
     background-color $foe-transition-duration-base $foe-transition-easing,
     background-position $foe-transition-duration-base $foe-transition-easing,
     box-shadow $foe-transition-duration-base $foe-transition-easing,
     padding $foe-transition-duration-base $foe-transition-easing;
 
+  .navbar-toggler {
+    .icon-close,
+    .icon-bar {
+      background-color: $foe-extradark;
+    }
+  }
+
   &.js-menustack {
     position: fixed;
-    color: $foe-offwhite;
     z-index: $zindex-navbar + 10 !important;
 
     // Scrolled state
@@ -62,13 +69,6 @@
     right: 0;
   }
 
-  @include media-breakpoint-down(md) {
-    padding-left: calc($grid-gutter-width / 2) !important;
-    padding-right: calc($grid-gutter-width / 2) !important;
-    // #13294 Fixing the mobile navigation (with overflow:hidden the mobile search does not display below the navigation)
-    // overflow: hidden;
-  }
-
   // Scrolled state
   &.js-menustack-stuck {
     padding: 0;
@@ -77,5 +77,26 @@
     body.foe-page-has-campaign-nav & {
       box-shadow: none;
     }
+
+    @include media-breakpoint-up(lg) {
+      .foe-nav-cta a {
+        @include margin-vertical-align($foe-nav-height-large-scrolled, $foe-nav-cta-height-large);
+      }
+
+      ul.navbar-nav > li > a {
+        line-height: $foe-nav-height-large-scrolled;
+      }
+    }
+  }
+
+  .skip-link:focus-within + * &.js-menustack {
+    top: 1.5rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    padding-left: calc($grid-gutter-width / 2) !important;
+    padding-right: calc($grid-gutter-width / 2) !important;
+    // #13294 Fixing the mobile navigation (with overflow:hidden the mobile search does not display below the navigation)
+    // overflow: hidden;
   }
 }

package/src/components/navigation/_mega-menu.scss

@@ -17,10 +17,22 @@
     visibility 0s $foe-transition-easing $foe-transition-duration-base,
     opacity $foe-transition-duration-base $foe-transition-easing;
 
+  @include media-breakpoint-up(lg) { // Megamenus are only applicable on larger viewports.  They appear as a list on smaller screens
+    display: block;
+    padding-top: $foe-submenu-margin;
+    padding-bottom: $foe-submenu-margin;
+  }
+
   @include media-breakpoint-up(md) { // Megamenus are only applicable on larger viewports.
     display: block;
   }
 
+    > .container {
+      @include media-breakpoint-up(md) {
+        justify-content: flex-end;
+      }
+    }
+
   &.megamenu-search { // Allow the search "megamenu" to persist at smaller breakpoints
     @include media-breakpoint-up(sm) {
       display: block;
@@ -40,6 +52,10 @@
 
   > .container > .row {
     width: 100%;
+
+    @include media-breakpoint-up(md) {
+      justify-content: flex-end;
+    }
   }
 }
 
@@ -181,3 +197,76 @@
     }
   }
 }
+
+ul.navbar-nav.menu-main {
+  .foe-mega-menu {
+    .submenu-block {
+      ul.sub-megamenu-first {
+        column-gap: 0;
+        overflow: hidden;
+        height: auto; /* $foe-submenu-tile-height; */
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        padding-left: .5rem;
+        padding-bottom: .5rem;
+
+        @include media-breakpoint-up(lg) {
+          align-items: end;
+        }
+
+        > li {
+          &.sub-item {
+            width: 100%;
+            padding: .125rem;
+          }
+
+          > span {
+            line-height: calc($foe-submenu-tile-height / 4);
+            font-weight: 500;
+            color: $foe-gray;
+          }
+
+          > a {
+            line-height: calc($foe-submenu-tile-height / 4 - 0.4rem);
+            font-weight: 600;
+            color: $foe-extradark;
+            transition: color 400ms ease-in-out;
+
+            @include media-breakpoint-up(md) {
+              padding-right: 0;
+            }
+
+            &:hover {
+              color: $foe-extradark;
+              box-shadow: none;
+            }
+          }
+
+          ul.sub-megamenu-below {
+            padding-left: 0;
+            display: flex;
+            flex-direction: column;
+
+            @include media-breakpoint-down(md) {
+              display: none;
+            }
+
+            li.sub-item {
+              a {
+                color: $foe-text;
+                font-weight: 500;
+                line-height: 1.8rem;
+
+                &:hover {
+                  color: $foe-extradark;
+                  box-shadow: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/navigation/_nav-items.scss

@@ -38,11 +38,6 @@
         display: block;
         color: $foe-extradark;
         text-decoration: none;
-        box-shadow: inset 0 0 0 0 $foe-accent;
-        transition:
-          color $foe-transition-duration-base ease-in-out,
-          box-shadow $foe-transition-duration-base ease-in-out;
-        // transition: line-height $foe-transition-duration-base $foe-transition-easing, color $foe-transition-duration-base $foe-transition-easing;
 
         @include media-breakpoint-up(lg) {
           padding: 0 18px;
@@ -58,7 +53,6 @@
 
         &:hover {
           color: $foe-offwhite;
-          box-shadow: inset 10rem 0 0 0 $foe-accent;
           text-decoration: none;
         }
       }
@@ -90,16 +84,110 @@
         }
       }
     }
-  }
 
-  @include media-breakpoint-up(lg) {
-    &.js-menustack-stuck {
-      .foe-nav-cta a {
-        @include margin-vertical-align($foe-nav-height-large-scrolled, $foe-nav-cta-height-large);
+    > li {
+      > a {
+        background: linear-gradient(90deg, $foe-accent 0%, $foe-accent 50%, transparent 50%, transparent 100%);
+        background-size: 200% 100%;
+        background-position: 101% 50%;
+        background-repeat: no-repeat;
+        transition:
+          color $foe-transition-duration-base ease-in-out,
+          background-position $foe-transition-duration-base ease-in-out;
+
+        &:hover {
+          background-position: 0% 50%;
+        }
+      }
+    }
+
+    &.menu-main {
+      display: block;
+      width: auto;
+      float: right;
+      padding: 0;
+      line-height: 4rem;
+
+      @include media-breakpoint-down(md) {
+        width: 100%;
+        overflow: hidden;
+        // #13294 this should be covered by the styles on web-core 3.0.0
+        transition: max-height $foe-transition-duration-base*2 $foe-transition-easing;
       }
 
-      ul.navbar-nav > li > a {
-        line-height: $foe-nav-height-large-scrolled;
+      li.foe-has-megamenu {
+        &:focus-within,
+        &:hover {
+          .foe-megamenu-container {
+            display: block;
+          }
+
+          a + .open-megamenu {
+            &::after {
+              transform: rotate(45deg);
+              -webkit-transform: rotate(45deg);
+            }
+          }
+        }
+
+        div.foe-megamenu-container {
+          &.collapsed {
+            display: none;
+          }
+
+          &.un-collapsed {
+            opacity: 1;
+            visibility: visible;
+            display: block;
+          }
+        }
+
+        @include media-breakpoint-down(md) {
+          a {
+            display: inline-block;
+
+            &.is-active {
+              &::after {
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+              }
+            }
+
+            & + .open-megamenu {
+              padding: 1rem;
+
+              &::after {
+                position: relative;
+                content: '';
+                opacity: 1;
+                border: solid $foe-extradark;
+                border-width: 0 3px 3px 0;
+                display: inline-block;
+                padding: 3px;
+                transform: rotate(-45deg);
+                -webkit-transform: rotate(-45deg);
+                margin-left: .5rem;
+                left: 0;
+                bottom: .05rem;
+              }
+            }
+          }
+          
+          div.foe-megamenu-container { /* just for mobile menu */
+            position: relative;
+            background-color: transparent;
+            box-shadow: none;
+
+            li.foe-has-megamenu {
+              &:focus-within,
+              &:hover {
+                .foe-megamenu-container {
+                  display: block;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }

package/src/components/navigation/defocus.js

@@ -0,0 +1,30 @@
+/**
+ * This is introduced to overcome the :focus-within styles on the mega menu remaining open when ctrl-clicking a navigation link.
+ * The mega menu styles hold the menu open when a link is focused on so that a keyboard user can navigate through.
+ * However if you click on the link element it gains the focus state but as it's opening an external window/tab so
+ * the focus remains and mousing out of the menu doesn't close it. This snippet removes the focus state when something
+ * is clicked on wit the ctrl key on clicked on with a middle mouse button.
+ */
+
+(() => {
+  const DeFocus = {
+    init: () => {
+      document.addEventListener('click', (e) => {
+        // ctrl click for openning in a new tab
+        if (e.ctrlKey) {
+          DeFocus.removeFocus();
+        }
+      });
+      document.addEventListener('auxclick', (e) => {
+        // middle button click
+        if (e.button === 1) {
+          DeFocus.removeFocus();
+        }
+      });
+    },
+    removeFocus: () => {
+      document.querySelectorAll(':focus').forEach(element => element.blur());
+    },
+  };
+  window.addEventListener('DOMContentLoaded', DeFocus.init);
+})();

package/src/components/navigation/index.js

@@ -1,3 +1,4 @@
+import './defocus';
 import './menustack';
 
 // import 'bootstrap/js/src/collapse';

package/src/components/tools/jaunty.js

@@ -53,10 +53,10 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     context.stroke();
   };
 
-  const jauntTarget = (target, action = null) => {
+  const jauntTarget = (target) => {
     if (
-      !target.firstChild ||
-      target.firstChild.nodeType !== Node.TEXT_NODE
+      !target.firstChild
+      || target.firstChild.nodeType !== Node.TEXT_NODE
     ) {
       return;
     }
@@ -74,12 +74,6 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     const targetBox = target.getBoundingClientRect();
     const parentBox = target.offsetParent ? target.offsetParent.getBoundingClientRect() : targetBox;
 
-    // switch(action) {
-    //   case 'resize':
-    //     target.dataset.points = false;
-    //     break;
-    // }
-
     // Insert the new 2D canvas element or find the existing one
     if (target.dataset.backgroundCanvasId) {
       document.getElementById(
@@ -87,24 +81,18 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
       ).remove();
     }
     const canvas = document.createElement('canvas');
-    // if (target.dataset.backgroundCanvasId) {
-    //   canvas.getContext('2d')
-    //     .clearRect(0, 0, canvas.width, canvas.height);
-    // } else {
-      // Create a unique ID to link this element with the canvas background
-      target.dataset.backgroundCanvasId = generateRandomHex(12);
-      canvas.id = target.dataset.backgroundCanvasId;
-      canvas.style.position = 'absolute';
-      canvas.style.zIndex = -1;
-      canvas.style.top = `${(targetBox.top - parentBox.top) - 2 * extension}px`;
-      canvas.style.left = `${(targetBox.left - parentBox.left) - 2 * extension}px`;
-      canvas.style.width = `${targetBox.width + 4 * extension}px`;
-      canvas.style.height = `${targetBox.height + 4 * extension}px`;
-      canvas.width = targetBox.width + 4 * extension;
-      canvas.height = targetBox.height + 4 * extension;
-      canvas.style.pointerEvents = 'none';
-      target.parentNode.insertBefore(canvas, target);
-    // }
+    target.dataset.backgroundCanvasId = generateRandomHex(12);
+    canvas.id = target.dataset.backgroundCanvasId;
+    canvas.style.position = 'absolute';
+    canvas.style.zIndex = -1;
+    canvas.style.top = `${(targetBox.top - parentBox.top) - 2 * extension}px`;
+    canvas.style.left = `${(targetBox.left - parentBox.left) - 2 * extension}px`;
+    canvas.style.width = `${targetBox.width + 4 * extension}px`;
+    canvas.style.height = `${targetBox.height + 4 * extension}px`;
+    canvas.width = targetBox.width + 4 * extension;
+    canvas.height = targetBox.height + 4 * extension;
+    canvas.style.pointerEvents = 'none';
+    target.parentNode.insertBefore(canvas, target);
 
     // Add rotation
     if (!target.dataset.jauntRotation) {
@@ -163,10 +151,10 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
       // modify the direction of jiggle based on modifications
       switch (mod) {
         case JIGGLE_LEFT:
-          xRandom *= -2;
+          xRandom *= -1;
           break;
         case JIGGLE_RIGHT:
-          xRandom *= 2;
+          xRandom *= 1;
           break;
         default:
           // modify the corners less
@@ -175,10 +163,10 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
       }
       switch (mod) {
         case JIGGLE_UP:
-          yRandom *= -2;
+          yRandom *= -1;
           break;
         case JIGGLE_DOWN:
-          yRandom *= 2;
+          yRandom *= 1;
           break;
         default:
           // modify the corners less
@@ -203,8 +191,8 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     boxes.forEach((lineBox, i) => {
       const points = [];
       // dimension constants to use for points
-      const lineWidth = lineBox.width + (target.dataset.jauntFull ? - extension : (4 * extension));
-      const lineHeight = lineBox.height + (target.dataset.jauntFull ? - extension : (4 * extension));
+      const lineWidth = lineBox.width + (target.dataset.jauntFull ? -extension : (4 * extension));
+      const lineHeight = lineBox.height + (target.dataset.jauntFull ? -extension : (4 * extension));
       const left = lineBox.left - targetBox.left + (target.dataset.jauntFull ? (3 * extension) : 0);
       const right = lineBox.left - targetBox.left + (target.dataset.jauntFull ? (3 * extension) : 0) + lineWidth;
       const top = lineBox.top - targetBox.top + (target.dataset.jauntFull ? (2 * extension) : 0);
@@ -322,12 +310,12 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
   };
 
   // The main event
-  const createBackground = (action = null) => {
+  const createBackground = (action = null, context = document) => {
     oneRemInPx = parseFloat(
       getComputedStyle(document.documentElement).fontSize
     );
 
-    const targets = document.querySelectorAll('[data-jaunt-factor]');
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
 
     // Insert some jaunt
     targets.forEach((target) => {
@@ -337,19 +325,19 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
 
   const processEvent = (e) => {
     jauntTarget(e.target, e.type);
-  }
+  };
 
   const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
+    entries.forEach((entry) => {
       jauntTarget(entry.target, 'visibility');
     });
   }, {
-    root: document.documentElement
+    root: document.documentElement,
   });
 
-  const init = () => {
-    const targets = document.querySelectorAll('[data-jaunt-factor]');
-    createBackground('init');
+  const init = (context = document) => {
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
+    createBackground('init', context);
     targets.forEach((target) => {
       [
         'blur',

package/src/components/typography/display.scss

@@ -4,12 +4,12 @@
   .display-#{$i} {
     @include media-breakpoint-down(md) {
       font-size: calc(32 / 14) * 1rem !important;
-      line-height: 1.05;
+      line-height: 4rem;
     }
 
     &::after {
       content: '\A';
-	    white-space: pre;
+      white-space: pre;
     }
   }
 }