gent_styleguide 7.1.0 → 7.2.2

package/package.json

@@ -1,43 +1,48 @@
 {
   "name": "gent_styleguide",
-  "version": "7.1.0",
+  "version": "7.2.2",
   "description": "Styleguide Stad.Gent",
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
     "@frctl/fractal": "^1.5.15",
     "@frctl/twig": "^1.2.13",
-    "chromedriver": "^142.0.0",
-    "cssnano": "^5.1.14",
+    "chromedriver": "^144.0.0",
+    "cssnano": "^7.1.2",
     "fs-extra": "^11.1.0",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^8.0.0",
+    "gulp": "^5.0.1",
+    "gulp-autoprefixer": "^10.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-bump": "^3.2.0",
     "gulp-cached": "^1.1.1",
     "gulp-eslint": "^6.0.0",
     "gulp-iconfont": "^11.0.1",
     "gulp-iconfont-css": "^3.0.0",
-    "gulp-if": "^3.0.0",
-    "gulp-imagemin": "^8.0.0",
+    "gulp-imagemin": "^9.2.0",
     "gulp-inject": "^5.0.5",
-    "gulp-postcss": "^9.0.1",
+    "gulp-postcss": "^10.0.0",
     "gulp-real-favicon": "^0.3.2",
     "gulp-recolor-svg": "^1.0.3",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^6.0.1",
     "gulp-sass-glob": "^1.1.0",
-    "gulp-sass-lint": "^1.4.0",
     "gulp-sourcemaps": "^3.0.0",
+    "gulp-stylelint-esm": "^3.0.0",
     "gulp-uglify": "^3.0.2",
-    "husky": "^8.0.3",
-    "imagemin-pngquant": "^9.0.2",
+    "husky": "^9.1.7",
+    "imagemin-pngquant": "^10.0.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
     "npm-cli-login": "^1.0.0",
     "sassdoc": "^2.7.4",
     "stream-combiner2": "^1.1.1",
-    "yargs": "^17.6.2"
+    "stylelint": "^16.26.1",
+    "stylelint-config-property-sort-order-smacss": "^10.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.14.0",
+    "ttf2woff2": "^8.0.0",
+    "yargs": "^18.0.0"
   },
   "authors": [
     "Jeroen Goossens",
@@ -62,16 +67,18 @@
     "lodash": "^4.17.21",
     "lodash.template": "^4.5.0",
     "masonry-layout": "^4.2.2",
-    "selenium-webdriver": "4.24.1",
+    "selenium-webdriver": "^4.40.0",
     "set-value": "^4.1.0",
-    "swiper": "^11.2.6",
-    "ttf2woff2": "^5.0.0"
+    "swiper": "^12.0.3"
   },
   "engines": {
     "node": ">=10.14.2"
   },
   "scripts": {
     "postinstall": "node ./scripts/postinstall.js",
+    "lint:css": "stylelint \"components/**/*.scss\"",
+    "lint:css:fix": "stylelint \"components/**/*.scss\" --fix",
+    "lint:css:watch": "chokidar \"components/**/*.scss\" -c \"npm run lint:css\"",
     "start": "gulp watch",
     "build": "gulp build",
     "test": "gulp validate && gulp axe:input && gulp axe:layout && gulp axe:components"
@@ -91,10 +98,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/StadGent/fractal_styleguide_gent-base.git"
-  },
-  "overrides": {
-    "chromedriver": "^142.0.0",
-    "axe-cli": { "chromedriver": "^142.0.0" },
-    "gulp-axe-cli": { "chromedriver": "^142.0.0" }
   }
 }

package/build/styleguide/vendor/swiper/modules/a11y.less

@@ -1,9 +0,0 @@
-/* a11y */
-.swiper .swiper-notification {
-  position: absolute;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: -1000;
-}

package/build/styleguide/vendor/swiper/modules/a11y.scss

@@ -1,9 +0,0 @@
-/* a11y */
-.swiper .swiper-notification {
-  position: absolute;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: -1000;
-}

package/build/styleguide/vendor/swiper/modules/effect-cards.less

@@ -1,10 +0,0 @@
-.swiper.swiper-cards {
-  overflow: visible;
-}
-.swiper-cards {
-  .swiper-slide {
-    transform-origin: center bottom;
-    backface-visibility: hidden;
-    overflow: hidden;
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-cards.scss

@@ -1,10 +0,0 @@
-.swiper.swiper-cards {
-  overflow: visible;
-}
-.swiper-cards {
-  .swiper-slide {
-    transform-origin: center bottom;
-    backface-visibility: hidden;
-    overflow: hidden;
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-coverflow.less

@@ -1,2 +0,0 @@
-.swiper-coverflow {
-}

package/build/styleguide/vendor/swiper/modules/effect-coverflow.scss

@@ -1,2 +0,0 @@
-.swiper-coverflow {
-}

package/build/styleguide/vendor/swiper/modules/effect-creative.less

@@ -1,7 +0,0 @@
-.swiper-creative {
-  .swiper-slide {
-    backface-visibility: hidden;
-    overflow: hidden;
-    transition-property: transform, opacity, height;
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-creative.scss

@@ -1,7 +0,0 @@
-.swiper-creative {
-  .swiper-slide {
-    backface-visibility: hidden;
-    overflow: hidden;
-    transition-property: transform, opacity, height;
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-cube.less

@@ -1,71 +0,0 @@
-.swiper.swiper-cube {
-  overflow: visible;
-}
-.swiper-cube {
-  .swiper-slide {
-    pointer-events: none;
-    backface-visibility: hidden;
-    z-index: 1;
-    visibility: hidden;
-    transform-origin: 0 0;
-    width: 100%;
-    height: 100%;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  &.swiper-rtl .swiper-slide {
-    transform-origin: 100% 0;
-  }
-  .swiper-slide-active {
-    &,
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-  .swiper-slide-active,
-  .swiper-slide-next,
-  .swiper-slide-prev {
-    pointer-events: auto;
-    visibility: visible;
-  }
-
-  .swiper-cube-shadow {
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    width: 100%;
-    height: 100%;
-    opacity: 0.6;
-    z-index: 0;
-
-    &:before {
-      content: '';
-      background: #000;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      -webkit-filter: blur(50px);
-      filter: blur(50px);
-    }
-  }
-}
-.swiper-cube {
-  .swiper-slide-next + .swiper-slide {
-    pointer-events: auto;
-    visibility: visible;
-  }
-}
-/* Cube slide shadows start */
-.swiper-cube {
-  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
-    z-index: 0;
-    backface-visibility: hidden;
-  }
-}
-/* Cube slide shadows end */

package/build/styleguide/vendor/swiper/modules/effect-cube.scss

@@ -1,71 +0,0 @@
-.swiper.swiper-cube {
-  overflow: visible;
-}
-.swiper-cube {
-  .swiper-slide {
-    pointer-events: none;
-    backface-visibility: hidden;
-    z-index: 1;
-    visibility: hidden;
-    transform-origin: 0 0;
-    width: 100%;
-    height: 100%;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  &.swiper-rtl .swiper-slide {
-    transform-origin: 100% 0;
-  }
-  .swiper-slide-active {
-    &,
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-  .swiper-slide-active,
-  .swiper-slide-next,
-  .swiper-slide-prev {
-    pointer-events: auto;
-    visibility: visible;
-  }
-
-  .swiper-cube-shadow {
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    width: 100%;
-    height: 100%;
-    opacity: 0.6;
-    z-index: 0;
-
-    &:before {
-      content: '';
-      background: #000;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      -webkit-filter: blur(50px);
-      filter: blur(50px);
-    }
-  }
-}
-.swiper-cube {
-  .swiper-slide-next + .swiper-slide {
-    pointer-events: auto;
-    visibility: visible;
-  }
-}
-/* Cube slide shadows start */
-.swiper-cube {
-  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
-  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
-    z-index: 0;
-    backface-visibility: hidden;
-  }
-}
-/* Cube slide shadows end */

package/build/styleguide/vendor/swiper/modules/effect-fade.less

@@ -1,20 +0,0 @@
-.swiper-fade {
-  &.swiper-free-mode {
-    .swiper-slide {
-      transition-timing-function: ease-out;
-    }
-  }
-  .swiper-slide {
-    pointer-events: none;
-    transition-property: opacity;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  .swiper-slide-active {
-    pointer-events: auto;
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-fade.scss

@@ -1,20 +0,0 @@
-.swiper-fade {
-  &.swiper-free-mode {
-    .swiper-slide {
-      transition-timing-function: ease-out;
-    }
-  }
-  .swiper-slide {
-    pointer-events: none;
-    transition-property: opacity;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  .swiper-slide-active {
-    &,
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-}

package/build/styleguide/vendor/swiper/modules/effect-flip.less

@@ -1,30 +0,0 @@
-.swiper.swiper-flip {
-  overflow: visible;
-}
-.swiper-flip {
-  .swiper-slide {
-    pointer-events: none;
-    backface-visibility: hidden;
-    z-index: 1;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  .swiper-slide-active {
-    &,
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-}
-/* Flip slide shadows start */
-.swiper-flip {
-  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
-    z-index: 0;
-    backface-visibility: hidden;
-  }
-}
-/* Flip slide shadows end */

package/build/styleguide/vendor/swiper/modules/effect-flip.scss

@@ -1,30 +0,0 @@
-.swiper.swiper-flip {
-  overflow: visible;
-}
-.swiper-flip {
-  .swiper-slide {
-    pointer-events: none;
-    backface-visibility: hidden;
-    z-index: 1;
-    .swiper-slide {
-      pointer-events: none;
-    }
-  }
-  .swiper-slide-active {
-    &,
-    & .swiper-slide-active {
-      pointer-events: auto;
-    }
-  }
-}
-/* Flip slide shadows start */
-.swiper-flip {
-  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
-  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
-    z-index: 0;
-    backface-visibility: hidden;
-  }
-}
-/* Flip slide shadows end */

package/build/styleguide/vendor/swiper/modules/free-mode.less

@@ -1,4 +0,0 @@
-.swiper-free-mode > .swiper-wrapper {
-  transition-timing-function: ease-out;
-  margin: 0 auto;
-}

package/build/styleguide/vendor/swiper/modules/free-mode.scss

@@ -1,4 +0,0 @@
-.swiper-free-mode > .swiper-wrapper {
-  transition-timing-function: ease-out;
-  margin: 0 auto;
-}

package/build/styleguide/vendor/swiper/modules/grid.less

@@ -1,7 +0,0 @@
-.swiper-grid > .swiper-wrapper {
-  flex-wrap: wrap;
-}
-.swiper-grid-column > .swiper-wrapper {
-  flex-wrap: wrap;
-  flex-direction: column;
-}

package/build/styleguide/vendor/swiper/modules/grid.scss

@@ -1,7 +0,0 @@
-.swiper-grid > .swiper-wrapper {
-  flex-wrap: wrap;
-}
-.swiper-grid-column > .swiper-wrapper {
-  flex-wrap: wrap;
-  flex-direction: column;
-}

package/build/styleguide/vendor/swiper/modules/hash-navigation.less

@@ -1,2 +0,0 @@
-@import url('../swiper-vars.less');
-

package/build/styleguide/vendor/swiper/modules/navigation.less

@@ -1,86 +0,0 @@
-@import url('../swiper-vars.less');
-
-:root {
-  --swiper-navigation-size: 44px;
-  /*
-  --swiper-navigation-top-offset: 50%;
-  --swiper-navigation-sides-offset: 10px;
-  --swiper-navigation-color: var(--swiper-theme-color);
-  */
-}
-.swiper-button-prev,
-.swiper-button-next {
-  position: absolute;
-  top: var(--swiper-navigation-top-offset, 50%);
-  width: calc(var(--swiper-navigation-size) / 44 * 27);
-  height: var(--swiper-navigation-size);
-  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
-  z-index: 10;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--swiper-navigation-color, var(--swiper-theme-color));
-  &.swiper-button-disabled {
-    opacity: 0.35;
-    cursor: auto;
-    pointer-events: none;
-  }
-  &.swiper-button-hidden {
-    opacity: 0;
-    cursor: auto;
-    pointer-events: none;
-  }
-  .swiper-navigation-disabled & {
-    display: none !important;
-  }
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    transform-origin: center;
-  }
-  .swiper-rtl & svg {
-    transform: rotate(180deg);
-  }
-}
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-sides-offset, 10px);
-  right: auto;
-}
-.swiper-button-next,
-.swiper-rtl .swiper-button-prev {
-  right: var(--swiper-navigation-sides-offset, 10px);
-  left: auto;
-}
-.swiper-button-lock {
-  display: none;
-}
-/* Navigation font start */
-.swiper-button-prev,
-.swiper-button-next {
-  &:after {
-    font-family: swiper-icons;
-    font-size: var(--swiper-navigation-size);
-    text-transform: none !important;
-    letter-spacing: 0;
-    font-variant: initial;
-    line-height: 1;
-  }
-}
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  &:after {
-    content: 'prev';
-  }
-}
-.swiper-button-next,
-.swiper-rtl .swiper-button-prev {
-  &:after {
-    content: 'next';
-  }
-  right: var(--swiper-navigation-sides-offset, 10px);
-  left: auto;
-}
-/* Navigation font end */

package/build/styleguide/vendor/swiper/modules/navigation.scss

@@ -1,87 +0,0 @@
-@use '../swiper-vars.scss' as vars;
-@at-root {
-  :root {
-    --swiper-navigation-size: 44px;
-    /*
-  --swiper-navigation-top-offset: 50%;
-  --swiper-navigation-sides-offset: 10px;
-  --swiper-navigation-color: var(--swiper-theme-color);
-  */
-  }
-}
-.swiper-button-prev,
-.swiper-button-next {
-  position: absolute;
-  top: var(--swiper-navigation-top-offset, 50%);
-  width: calc(var(--swiper-navigation-size) / 44 * 27);
-  height: var(--swiper-navigation-size);
-  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
-  z-index: 10;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--swiper-navigation-color, var(--swiper-theme-color));
-  &.swiper-button-disabled {
-    opacity: 0.35;
-    cursor: auto;
-    pointer-events: none;
-  }
-  &.swiper-button-hidden {
-    opacity: 0;
-    cursor: auto;
-    pointer-events: none;
-  }
-  .swiper-navigation-disabled & {
-    display: none !important;
-  }
-  svg {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    transform-origin: center;
-  }
-  .swiper-rtl & svg {
-    transform: rotate(180deg);
-  }
-}
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-sides-offset, 10px);
-  right: auto;
-}
-.swiper-button-next,
-.swiper-rtl .swiper-button-prev {
-  right: var(--swiper-navigation-sides-offset, 10px);
-  left: auto;
-}
-.swiper-button-lock {
-  display: none;
-}
-/* Navigation font start */
-.swiper-button-prev,
-.swiper-button-next {
-  &:after {
-    font-family: swiper-icons;
-    font-size: var(--swiper-navigation-size);
-    text-transform: none !important;
-    letter-spacing: 0;
-    font-variant: initial;
-    line-height: 1;
-  }
-}
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  &:after {
-    content: 'prev';
-  }
-}
-.swiper-button-next,
-.swiper-rtl .swiper-button-prev {
-  right: var(--swiper-navigation-sides-offset, 10px);
-  left: auto;
-  &:after {
-    content: 'next';
-  }
-}
-/* Navigation font end */