@foeewni/web-core 2.2.12 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foeewni/web-core",
-  "version": "2.2.12",
+  "version": "2.4.0",
   "description": "Friend of the Earth EWNI Core for frontend projects",
   "browser": {
     "foe-core.js": "dist/js/foe.core.min.js",
@@ -28,15 +28,15 @@
     "@deimosindustries/markdown-documentation-generator": "^3.2.4",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-brands-svg-icons": "^5.13.1",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "bootstrap": "4.6.0",
+    "bootstrap": "^4.6.2",
     "jarallax": "^1.11.1",
     "local-storage": "^2.0.0",
     "mini-css-extract-plugin": "^1.5.0",
-    "node-sass": "^4.14.1",
     "object-fit-images": "^3.2.4",
-    "popper.js": "^1.16.1"
+    "popper.js": "^1.16.1",
+    "sass": "^1.56.1"
   },
   "repository": {
     "type": "git",
@@ -58,7 +58,7 @@
     "copy-webpack-plugin": "^8.1.1",
     "core-js": "^3.10",
     "css-hot-loader": "^1.4.4",
-    "css-loader": "^0.28.11",
+    "css-loader": "^6.7.2",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.2.0",
     "eslint-plugin-import": "^2.18.2",
@@ -66,19 +66,19 @@
     "html-webpack-plugin": "^5.3.1",
     "inquirer": "^6.0.0",
     "jquery": "^3.5.0",
-    "sass-extract": "^2.1.0",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^13.2.0",
     "style-loader": "^2.0.0",
     "stylelint": "^13.0.0",
     "stylelint-config-standard": "^21.0.0",
     "stylelint-webpack-plugin": "^2.1.1",
     "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^5.34.0",
-    "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-livereload-plugin": "^3.0.1",
-    "webpack-shell-plugin-next": "^0.6.4"
+    "url": "^0.11.0",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-livereload-plugin": "^3.0.2",
+    "webpack-shell-plugin-next": "^2.3.1"
   },
   "peerDependencies": {}
 }

package/src/components/campaign-navigation/style.scss

@@ -143,7 +143,7 @@ $foe-secondary-nav-height: 3rem;
 
 #js-foe-secondary-trigger {
   position: absolute;
-  right: $grid-gutter-width/2;
+  right: calc($grid-gutter-width / 2);
   line-height: $foe-secondary-nav-height;
   width: 2rem;
   z-index: 10;

package/src/components/form/buttons.scss

@@ -48,21 +48,6 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/button-group';
 
-input[type=submit],
-input[type=button],
-button {
-  &:not(.btn) {
-    @extend .btn;
-  }
-}
-
-input[type=reset] {
-  &:not(.btn) {
-    @extend .btn;
-    @extend .btn-danger;
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;

package/src/components/form/forms.scss

@@ -106,7 +106,7 @@ form {
 }
 
 label {
-  margin-bottom: $spacer/4;
+  margin-bottom: calc($spacer / 4);
   font-weight: bold;
   font-size: 90%;
 }

package/src/components/form/inputs.scss

@@ -185,7 +185,7 @@ textarea {
   width: 1.5em;
   height: 1.5em;
   padding: .5em;
-  margin-right: $spacer/2;
+  margin-right: calc($spacer / 2);
   vertical-align: bottom;
   color: transparent;
   transition: .2s;

package/src/components/go-top/style.scss

@@ -3,7 +3,7 @@
 #foe-go-top {
   color: $foe-accent;
   font-size: 3rem;
-  padding: $spacer/4;
+  padding: calc($spacer / 4);
   position: fixed;
   bottom: $spacer;
   right: $spacer;

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

@@ -152,7 +152,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
 .foe-hero-panel {
   position: relative;
-  min-height: (320/16) * 1rem; // Height for mobile
+  min-height: calc(320 / 16) * 1rem; // Height for mobile
   width: 100%;
   margin: 0;
   top: 0;
@@ -167,7 +167,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   }
 
   @include media-breakpoint-up(md) {
-    height: 100/16*9vw; // 16:9 ratio for non-mobile
+    height: calc(100 / 16 * 9vw); // 16:9 ratio for non-mobile
   }
 }
 
@@ -217,7 +217,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
 .foe-hero-panel-buffer {
   min-height: $spacer*16; // Height for mobile
-  height: 100/16*9vw; // 16:9 ratio for the rest
+  height: calc(100 / 16 * 9vw); // 16:9 ratio for the rest
   max-height: 90vh; // We limit it so it doesn't get absurdly huge
   width: 100%;
   top: 0;
@@ -273,7 +273,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   z-index: 3;
 
   h1 {
-    margin-bottom: $spacer/4;
+    margin-bottom: calc($spacer / 4);
   }
 }
 

package/src/components/layout/horizontal-rule.scss

@@ -3,7 +3,7 @@
 // Generic classes for the horizontal rule
 @for $size from 1 to 4 {
   .hr-#{$size} {
-    border-top-width: (1rem/10) * $size;
+    border-top-width: calc(1rem / 10) * $size;
   }
 }
 

package/src/components/layout/images.scss

@@ -15,8 +15,8 @@ figure {
     font-size: 80%;
     text-align: right;
     color: lighten($foe-text, 15);
-    padding-top: $spacer/3;
-    padding-bottom: $spacer/3;
+    padding-top: calc($spacer / 3);
+    padding-bottom: calc($spacer / 3);
   }
 }
 

package/src/components/navigation/_header.scss

@@ -63,8 +63,8 @@
   }
 
   @include media-breakpoint-down(md) {
-    padding-left: $grid-gutter-width / 2 !important;
-    padding-right: $grid-gutter-width / 2 !important;
+    padding-left: calc($grid-gutter-width / 2) !important;
+    padding-right: calc($grid-gutter-width / 2) !important;
     overflow: hidden;
   }
 

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

@@ -34,8 +34,8 @@
   }
 
   > ul {
-    padding-right: $grid-gutter-width / 2;
-    padding-left: $grid-gutter-width / 2;
+    padding-right: calc($grid-gutter-width / 2);
+    padding-left: calc($grid-gutter-width / 2);
   }
 
   > .container > .row {
@@ -52,13 +52,13 @@
 
       > li {
         > span {
-          line-height: $foe-submenu-tile-height / 4;
+          line-height: calc($foe-submenu-tile-height / 4);
           font-weight: 500;
           color: $foe-gray;
         }
 
         > a {
-          line-height: $foe-submenu-tile-height / 4;
+          line-height: calc($foe-submenu-tile-height / 4);
           font-weight: 500;
           padding-left: 0;
           padding-right: 36px;
@@ -81,7 +81,7 @@
     @for $i from 1 through 12 {
       &.col-md-#{$i} {
         ul.sub-megamenu-first {
-          column-count: ceil($i / 2);
+          column-count: ceil(calc($i / 2));
         }
       }
     }
@@ -171,11 +171,11 @@
 
     ul.sub-megamenu-first {
       padding: 0;
-      margin: 0 ($grid-gutter-width / -2);
+      margin: 0 calc($grid-gutter-width / -2);
       list-style: none;
 
       > li {
-        padding: 0 ($grid-gutter-width / 2);
+        padding: 0 calc($grid-gutter-width / 2);
         margin: 0;
       }
     }

package/src/components/navigation/_search.scss

@@ -17,9 +17,9 @@
       line-height: $foe-nav-height-small;
       color: $foe-offwhite !important;
       transition: line-height $foe-transition-duration-base $foe-transition-easing;
-      width: $spacer*3;
-      padding-left: $grid-gutter-width / 2;
-      padding-right: $grid-gutter-width / 2;
+      width: calc($spacer * 3);
+      padding-left: calc($grid-gutter-width / 2);
+      padding-right: calc($grid-gutter-width / 2);
       display: block;
 
       .fa-times {
@@ -31,7 +31,7 @@
       }
 
       @include media-breakpoint-up(sm) {
-        width: $spacer*4;
+        width: calc($spacer * 4);
       }
 
       @include media-breakpoint-up(md) {

package/src/components/tools/data-defer-src.js

@@ -35,9 +35,7 @@ Usage:
 import './data-defer-src.scss';
 
 (() => {
-  const elements = document.querySelectorAll('[data-defer-src]');
-
-  elements.forEach((el) => {
+  window.deferSrc = (el) => {
     let isVisible = false;
     const source = el.dataset.deferSrc;
 
@@ -72,5 +70,11 @@ import './data-defer-src.scss';
     });
 
     observer.observe(el);
+  };
+
+  const elements = document.querySelectorAll('[data-defer-src]');
+
+  elements.forEach((el) => {
+    window.deferSrc(el);
   });
 })();

package/src/components/tools/rubik-tracking.js

@@ -207,7 +207,6 @@ import * as store from 'local-storage';
         store.set('foe_attribution', null);
         return null;
       }
-      
       Object.assign(attributionSession, {
         expiry: Date.now() + ANALYTICS_SESSION_LENGTH,
       });
@@ -257,7 +256,7 @@ import * as store from 'local-storage';
         if (attribution[key]
           && attribution[key].length
           && typeof attribution[key] === 'string') {
-            attributionInput.val(attribution[key]);
+          attributionInput.val(attribution[key]);
         }
       });
     }

package/src/components/typography/display.scss

@@ -3,7 +3,7 @@
 @for $i from 1 through 4 {
   .display-#{$i} {
     @include media-breakpoint-down(md) {
-      font-size: (32/14) * 1rem !important;
+      font-size: calc(32 / 14) * 1rem !important;
       line-height: 1.05;
     }
   }

package/src/components/typography/metadata.scss

@@ -74,7 +74,7 @@ Custom Friends of the Earth styling for common text elements.
   font-weight: normal !important;
   text-transform: uppercase;
   transition-property: opacity, color, box-shadow;
-  transition-duration: $foe-transition-duration-base/2;
+  transition-duration: calc($foe-transition-duration-base / 2);
   transition-timing-function: $foe-transition-easing;
   text-decoration: none;
 

package/src/fonts.js

@@ -52,6 +52,7 @@ import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
 import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
 import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
 import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
+import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -98,6 +99,7 @@ library.add(
   faFacebookMessenger,
   faTelegram,
   faTelegramPlane,
+  faTiktok,
   faChevronDown,
   faChevronUp,
   faAngleDown,

package/src/utils/scss/helpers/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // General functions and mixins
 //
@@ -50,8 +52,8 @@
 // Example: an element has a height of 30px, it's parent is 100px, so write out `.margin-vertical-align(100px, 30px);` to calculate the appropriate top margin.
 
 @mixin margin-vertical-align($parent-height, $element-height) {
-  margin-top: (($parent-height - $element-height) / 2);
-  margin-bottom: (($parent-height - $element-height) / 2);
+  margin-top: calc(($parent-height - $element-height) / 2);
+  margin-bottom: calc(($parent-height - $element-height) / 2);
 }
 
 
@@ -98,7 +100,7 @@
 }
 
 @function strip-units($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }
 
 // From https://stackoverflow.com/a/25478589

package/src/utils/scss/helpers/_variables.scss

@@ -431,12 +431,12 @@ $font-weight-heavy:           700;
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
 
-$h1-font-size:                (56/16) * $font-size-base;
-$h2-font-size:                (44/16) * $font-size-base;
-$h3-font-size:                (34/16) * $font-size-base;
-$h4-font-size:                (26/16) * $font-size-base;
-$h5-font-size:                (20/16) * $font-size-base;
-$h6-font-size:                (16/16) * $font-size-base;
+$h1-font-size:                calc(56 / 16) * $font-size-base;
+$h2-font-size:                calc(44 / 16) * $font-size-base;
+$h3-font-size:                calc(34 / 16) * $font-size-base;
+$h4-font-size:                calc(26 / 16) * $font-size-base;
+$h5-font-size:                calc(20 / 16) * $font-size-base;
+$h6-font-size:                calc(16 / 16) * $font-size-base;
 
 $headings-map: (
   h1: $h1-font-size,
@@ -447,14 +447,14 @@ $headings-map: (
   h6: $h6-font-size,
 );
 
-$headings-margin-bottom:      ($spacer / 2);
+$headings-margin-bottom:      calc($spacer / 2);
 $headings-font-family:        inherit;
 $headings-font-weight:        600;
 $headings-line-height:        1.2;
 $headings-color:              $foe-primary;
 
-$display1-size:               (60/16) * $font-size-base;
-$display2-size:               (60/16) * $font-size-base;
+$display1-size:               calc(60 / 16) * $font-size-base;
+$display2-size:               calc(60 / 16) * $font-size-base;
 $display3-size:               4.5rem;
 $display4-size:               3.5rem;
 
@@ -815,11 +815,11 @@ $nav-pills-link-active-color:       $component-active-color;
 $nav-pills-link-active-bg:          $component-active-bg;
 
 $nav-divider-color:                 $gray-200;
-$nav-divider-margin-y:              ($spacer / 2);
+$nav-divider-margin-y:              calc($spacer / 2);
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2);
+$navbar-padding-y:                  calc($spacer / 2);
 $navbar-padding-x:                  $spacer;
 
 $navbar-nav-link-padding-x:         .5rem;
@@ -828,7 +828,7 @@ $navbar-brand-font-size:            $font-size-lg;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2;
+$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2);
 
 $navbar-toggler-padding-y:          .25rem;
 $navbar-toggler-padding-x:          .75rem;
@@ -899,7 +899,7 @@ $card-bg:                           $white;
 
 $card-img-overlay-padding:          1.25rem;
 
-$card-group-margin:                 ($grid-gutter-width / 2);
+$card-group-margin:                 calc($grid-gutter-width / 2);
 $card-deck-margin:                  $card-group-margin;
 
 $card-columns-count:                3;
@@ -1139,10 +1139,10 @@ $foe-nav-transition-duration: 250ms;
 
 
 // Logo
-$foe-nav-logo-height-small:  $foe-nav-height-small*2/3; // Adjustment for tiny screens, not quite official whitespace...
-$foe-nav-logo-height-medium: $foe-nav-height-medium*3/5;
-$foe-nav-logo-height-large:  $foe-nav-height-large*3/5;
-$foe-nav-logo-height-large-scrolled: $foe-nav-height-large-scrolled*3/5; // Hence can be the same size of navbar when scrolled
+$foe-nav-logo-height-small:  calc($foe-nav-height-small * 2 / 3); // Adjustment for tiny screens, not quite official whitespace...
+$foe-nav-logo-height-medium: calc($foe-nav-height-medium * 3 / 5);
+$foe-nav-logo-height-large:  calc($foe-nav-height-large * 3 / 5);
+$foe-nav-logo-height-large-scrolled: calc($foe-nav-height-large-scrolled * 3 / 5); // Hence can be the same size of navbar when scrolled
 
 // Manually add in all header variants based on bootstrap-named breakpoints.
 // Likely prone to change in the Bootstrap 5+ refactor.