Merge pull request #870 from StadGent/release/8.x-4.0

Release/8.x-4.0

CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All Notable changes to `digipolisgent/drupal_theme_gent-base`.
 
+## [4.0]
+
+### Added
+
+* DTGB-841: Added native lazy load to images.
+
+## Updated
+
+* DTGB-849: Updated styleguide to 4.0.2
+
+### Fixed
+
+* SGD8-1735: Fixed webforms description message styling.
+* KAG-437: Fixed overridden spacing on file element.
+* DTGB-848: Fixed security vulnerabilities.
+
+## Replaced
+
+* DTGB-849: Replaced removed/deprecated CSS classes.
+
+## Removed
+
+* DTGB-847: Removed overridden styling file-upload styleguide.
+
 ## [3.3]
 
 ### Added
@@ -13,6 +37,10 @@ All Notable changes to `digipolisgent/drupal_theme_gent-base`.
 
 * DTGB-810: Changed upload description to follow ghent styleguide guidelines.
 
+### Updated
+
+* DTGB-849: Updated gent_styleguide.
+
 ## [3.2]
 
 ### Updated

gent_base.libraries.yml

@@ -26,7 +26,6 @@ filter:
 modal:
   version: 1.x
   js:
-    build/styleguide/vendor/body-scroll-lock/bodyScrollLock.min.js: { minified: true }
     build/@digipolis-gent/modal/index.js: { minified: true }
     source/js/modal.bindings.js: { }
   dependencies:

gent_base.theme

@@ -17,6 +17,7 @@ use Drupal\webform\Entity\Webform;
 
 include __DIR__ . '/includes/theme.inc';
 include __DIR__ . '/includes/form.inc';
+include __DIR__ . '/includes/lazy.inc';
 
 /**
  * Implements hook_theme().

includes/lazy.inc

@@ -0,0 +1,49 @@
+<?php
+
+/**
+ * @file
+ * Add native lazy loading support to images.
+ */
+
+use Drupal\image\Plugin\Field\FieldType\ImageItem;
+
+/**
+ * Implements hook_preprocess_HOOK().
+ *
+ * @see \template_preprocess_responsive_image_formatter()
+ */
+function gent_base_preprocess_responsive_image_formatter(&$variables) {
+  if (isset($variables['item'])) {
+    _gent_base_add_img_attributes($variables['responsive_image']['#attributes'], $variables['item']);
+  }
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ *
+ * @see \template_preprocess_image_formatter()
+ */
+function gent_base_preprocess_image_formatter(&$variables) {
+  if (isset($variables['item'])) {
+    _gent_base_add_img_attributes($variables['image']['#attributes'], $variables['item']);
+  }
+}
+
+/**
+ * Adds the HTML attributes required to get correct lazy-loading.
+ */
+function _gent_base_add_img_attributes(array &$attributes, ImageItem $item) {
+  if (!isset($attributes['loading'])) {
+    $attributes['loading'] = 'lazy';
+  }
+  // Tell the browser about the aspect ratio.
+  if (
+    !isset($attributes['width'])
+    && !isset($attributes['height'])
+    && ($value = $item->getValue())
+    && isset($value['width'], $value['height'])
+  ) {
+    $attributes['width'] = $value['width'];
+    $attributes['height'] = $value['height'];
+  }
+}

source/package.json

@@ -25,6 +25,6 @@
   "private": true,
   "dependencies": {
     "@digipolis-gent/modal": "^1.0.3",
-    "gent_styleguide": "3.1.1"
+    "gent_styleguide": "^4.0.2"
   }
 }

source/sass/21-atoms/file/_file.scss

@@ -1,15 +1,7 @@
+// Overrides core file.css to match styleguide.
 .file {
-  min-width: 17rem;
-  margin: 0 -.3rem;
   padding-left: 0;
-
-  &::after {
-    display: none;
-  }
-
-  .file__button {
-    margin: .3rem .6rem 0 .3rem;
-  }
+  min-height: auto;
 }
 
 .form-managed-file {

source/sass/31-molecules/authentication/_authentication.scss

@@ -1,4 +1,3 @@
-.mijn-gent-block, /// @deprecated
 .authentication {
   .login-link i {
     display: none;

source/sass/41-organisms/filter/_filter.scss

@@ -6,7 +6,7 @@
 }
 
 .selected-filters {
-  > a {
+  .tag-list > li > a {
     @include theme('color', 'color-tertiary', 'selected-filters-link-color');
 
     font-weight: normal;

source/sass/41-organisms/related-box/_related-box.scss

@@ -29,13 +29,6 @@
         }
       }
 
-      ul.related-box-tags {
-        @extend %list-no-style;
-
-        display: flex;
-        flex-wrap: wrap;
-      }
-
       .tag {
         margin: 0 .8rem .8rem 0;
       }

source/sass/61-layouts/_detail-layout.scss

@@ -18,14 +18,6 @@
 
     > .paragraph--type--block {
       @include set-layout();
-
-      > .help-block {
-        @include set-layout('width-9', 'offset-1');
-
-        > * {
-          @include set-layout('width-7', 'offset-1', 'columns-9');
-        }
-      }
     }
   }