Updated dependencies (#1440)

* Updated dependencies * Fixed new SASS nesting rules
FDMediagroep · Oct 23, 2024 · 115085e · 115085e
1 parent eff03d3
commit 115085e
Show file tree

Hide file tree

Showing 44 changed files with 14,903 additions and 14,805 deletions.
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,4 +1,4 @@
 /// <reference types="next" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,122 +1,126 @@
 {
-    "name": "@fdmg/design-system",
-    "version": "0.60.27",
-    "description": "FD Design System",
-    "types": "main.d.ts",
-    "main": "main.js",
-    "sideEffects": false,
-    "publishConfig": {
-        "access": "public"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git@github.com:FDMediagroep/fd-design-system.git"
-    },
-    "scripts": {
-        "build": "next build",
-        "build:ci": "npm run build && npm run build:npm",
-        "build:npm": "npm run webpack:prod && npm run copy:dts",
-        "build:sls": "cross-env SERVERLESS=true next build",
-        "copy:dts": "copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2",
-        "dev": "next dev",
-        "docker:build": "docker build -t fd-design-system .",
-        "docker:logs": "docker logs fd-design-system",
-        "docker:pull": "docker pull ghcr.io/fdmediagroep/fd-design-system:latest",
-        "docker:run": "docker run -d -p 3000:3000 --env-file .env --name fd-design-system fd-design-system",
-        "docker:restart": "docker restart fd-design-system",
-        "docker:stop": "docker stop fd-design-system && docker rm fd-design-system && docker image prune -f",
-        "docker:tag": "docker tag ghcr.io/fdmediagroep/fd-design-system:latest fd-design-system:latest",
-        "lint": "next lint",
-        "json-to-scss": "json-to-scss public/assets/design-tokens/* src/design-tokens",
-        "prettier": "prettier -c **/*.ts?",
-        "start": "next start",
-        "test": "jest --passWithNoTests",
-        "test:updateSnapshots": "jest -u --passWithNoTests",
-        "test:watch": "jest --watch",
-        "vc:rm": "vc rm fd-design-system --safe --yes",
-        "webpack:prod": "cross-env NODE_ENV=production webpack --mode=production",
-        "webpack-bundle-analyzer:npm": "cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod",
-        "webpack-bundle-analyzer:next": "cross-env WEBPACK_BUNDLE_ANALYZER=true next build"
-    },
-    "author": "Willem Liu",
-    "license": "ISC",
-    "devDependencies": {
-        "@fdmg/article-xml-json": "^2.0.52",
-        "@fdmg/css-grid": "^2.0.49",
-        "@fdmg/resubstitute": "^0.1.35",
-        "@testing-library/jest-dom": "^6.5.0",
-        "@testing-library/react": "^16.0.1",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/cssbeautify": "^0.3.5",
-        "@types/fetch-jsonp": "^1.1.0",
-        "@types/jest": "^29.5.13",
-        "@types/js-cookie": "^3.0.6",
-        "@types/markdown-it": "^14.1.2",
-        "@types/micro-cors": "^0.1.5",
-        "@types/node": "^22.5.4",
-        "@types/react": "^18.3.11",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-imgix": "^9.5.3",
-        "autoprefixer": "^10.4.20",
-        "copy-webpack-plugin": "^12.0.2",
-        "copyfiles": "^2.4.1",
-        "cross-env": "^7.0.3",
-        "css-loader": "^7.1.2",
-        "cssbeautify": "^0.3.1",
-        "eslint": "^8.57.1",
-        "eslint-config-next": "^14.2.15",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-next": "^0.0.0",
-        "eslint-plugin-prettier": "^5.2.1",
-        "fetch-jsonp": "^1.3.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0",
-        "json-to-scss": "^1.6.2",
-        "markdown-it": "^14.1.0",
-        "micro-cors": "^0.1.1",
-        "mini-css-extract-plugin": "^2.9.1",
-        "next": "^14.2.15",
-        "nookies": "^2.5.2",
-        "path-to-regexp": "^7.1.0",
-        "postcss-flexbugs-fixes": "^5.0.2",
-        "postcss-loader": "^8.1.1",
-        "postcss-normalize": "^13.0.1",
-        "postcss-preset-env": "^10.0.5",
-        "prettier": "^3.3.3",
-        "pretty": "^2.0.0",
-        "punycode": "^2.3.1",
-        "raw-loader": "^4.0.2",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-element-to-jsx-string": "^15.0.0",
-        "react-svg-loader": "^3.0.3",
-        "sass": "^1.78.0",
-        "sass-loader": "^16.0.2",
-        "style-loader": "^4.0.0",
-        "ts-jest": "^29.2.5",
-        "ts-loader": "^9.5.1",
-        "ts-node": "^10.9.2",
-        "typescript": "^5.6.2",
-        "webpack-bundle-analyzer": "^4.10.2",
-        "webpack-cli": "^5.1.4"
-    },
-    "dependencies": {
-        "js-cookie": "^3.0.5",
-        "react-imgix": "^9.8.1"
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all",
-            "ie 11"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version",
-            "last 1 edge version",
-            "ie 11"
-        ]
-    }
+  "name": "@fdmg/design-system",
+  "version": "0.60.27",
+  "description": "FD Design System",
+  "types": "main.d.ts",
+  "main": "main.js",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:FDMediagroep/fd-design-system.git"
+  },
+  "scripts": {
+    "build": "next build",
+    "build:ci": "npm run build && npm run build:npm",
+    "build:npm": "npm run webpack:prod && npm run copy:dts",
+    "build:sls": "cross-env SERVERLESS=true next build",
+    "copy:dts": "copyfiles \"./dist.d.ts/src/**/*.d.ts\" \"./dist\" -V -u 2",
+    "dev": "next dev",
+    "docker:build": "docker build -t fd-design-system .",
+    "docker:logs": "docker logs fd-design-system",
+    "docker:pull": "docker pull ghcr.io/fdmediagroep/fd-design-system:latest",
+    "docker:run": "docker run -d -p 3000:3000 --env-file .env --name fd-design-system fd-design-system",
+    "docker:restart": "docker restart fd-design-system",
+    "docker:stop": "docker stop fd-design-system && docker rm fd-design-system && docker image prune -f",
+    "docker:tag": "docker tag ghcr.io/fdmediagroep/fd-design-system:latest fd-design-system:latest",
+    "lint": "next lint",
+    "json-to-scss": "json-to-scss public/assets/design-tokens/* src/design-tokens",
+    "prettier": "prettier -c **/*.ts?",
+    "start": "next start",
+    "test": "jest --passWithNoTests",
+    "test:updateSnapshots": "jest -u --passWithNoTests",
+    "test:watch": "jest --watch",
+    "vc:rm": "vc rm fd-design-system --safe --yes",
+    "webpack:prod": "cross-env NODE_ENV=production webpack --mode=production",
+    "webpack-bundle-analyzer:npm": "cross-env WEBPACK_BUNDLE_ANALYZER=true npm run webpack:prod",
+    "webpack-bundle-analyzer:next": "cross-env WEBPACK_BUNDLE_ANALYZER=true next build"
+  },
+  "author": "Willem Liu",
+  "license": "ISC",
+  "devDependencies": {
+    "@fdmg/article-xml-json": "^2.0.52",
+    "@fdmg/css-grid": "^2.0.49",
+    "@fdmg/resubstitute": "^0.1.35",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/cssbeautify": "^0.3.5",
+    "@types/fetch-jsonp": "^1.1.0",
+    "@types/jest": "^29.5.13",
+    "@types/js-cookie": "^3.0.6",
+    "@types/markdown-it": "^14.1.2",
+    "@types/micro-cors": "^0.1.5",
+    "@types/node": "^22.5.4",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@types/react-imgix": "^9.5.3",
+    "autoprefixer": "^10.4.20",
+    "copy-webpack-plugin": "^12.0.2",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "cssbeautify": "^0.3.1",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "15.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-next": "^0.0.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "fetch-jsonp": "^1.3.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "json-to-scss": "^1.6.2",
+    "markdown-it": "^14.1.0",
+    "micro-cors": "^0.1.1",
+    "mini-css-extract-plugin": "^2.9.1",
+    "next": "15.0.1",
+    "nookies": "^2.5.2",
+    "path-to-regexp": "^7.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^8.1.1",
+    "postcss-normalize": "^13.0.1",
+    "postcss-preset-env": "^10.0.5",
+    "prettier": "^3.3.3",
+    "pretty": "^2.0.0",
+    "punycode": "^2.3.1",
+    "raw-loader": "^4.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-element-to-jsx-string": "^15.0.0",
+    "react-svg-loader": "^3.0.3",
+    "sass": "^1.78.0",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.6.2",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.5",
+    "react-imgix": "^9.8.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all",
+      "ie 11"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version",
+      "last 1 edge version",
+      "ie 11"
+    ]
+  },
+  "overrides": {
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1"
+  }
 }
diff --git a/pages/[section]/[id]/Article.module.scss b/pages/[section]/[id]/Article.module.scss
@@ -19,15 +19,15 @@
             line-height: 1.08em;
             font-size: 1.5625rem;
             margin: 1rem 0;
+            font-family: map-deep-get($typography, 'font-family', 'bold-serif'),
+                serif;
             @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
                 font-size: 2.8125rem;
             }
             @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
                 font-size: 3.25rem;
                 max-width: 88%;
             }
-            font-family: map-deep-get($typography, 'font-family', 'bold-serif'),
-                serif;
         }
     }
 
@@ -66,31 +66,31 @@
 
     .intro {
         font-size: 1.375rem;
+        font-family: map-deep-get($typography, 'font-family', 'regular-serif'),
+            serif;
+        line-height: 1.2;
+        margin: 0;
         @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
             font-size: 1.5625rem;
         }
         @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
             font-size: 1.75rem;
             width: 84%;
         }
-        font-family: map-deep-get($typography, 'font-family', 'regular-serif'),
-            serif;
-        line-height: 1.2;
-        margin: 0;
     }
 
     > p {
         margin: 0 0 0.5rem 0;
         line-height: 1.5;
         font-size: 1.125rem;
+        font-family: map-deep-get($typography, 'font-family', 'regular-serif'),
+            serif;
         @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
             font-size: 1.1875rem;
         }
         @media screen and (min-width: map-deep-get($media, 'sizes', 'l')) {
             font-size: 1.3125rem;
         }
-        font-family: map-deep-get($typography, 'font-family', 'regular-serif'),
-            serif;
 
         > a {
             text-decoration: none;

diff --git a/pages/cards.module.scss b/pages/cards.module.scss
@@ -39,10 +39,10 @@
         border-bottom: 1px solid var(--dividers);
     }
     @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
+        flex-direction: row !important;
+        flex-wrap: wrap;
         > *:not(:last-child) {
             border: none;
         }
-        flex-direction: row !important;
-        flex-wrap: wrap;
     }
 }
diff --git a/pages/fd-web/index.module.scss b/pages/fd-web/index.module.scss
@@ -44,6 +44,8 @@
 
     .newsContainer {
         flex: 1 1 100%;
+        display: flex;
+        overflow: hidden;
         @media screen and (min-width: map-deep-get($media, 'sizes', 'm')) {
             flex: 1 1 calc(50% - 1rem);
         }
@@ -53,8 +55,6 @@
         @media screen and (min-width: map-deep-get($media, 'sizes', 'xl')) {
             flex: 1 1 calc(25% - 1rem);
         }
-        display: flex;
-        overflow: hidden;
     }
 
     .ie11FullHeight,

diff --git a/public/assets/sass.worker.js b/public/assets/sass.worker.js
diff --git a/src/components/Tooltip.module.scss b/src/components/Tooltip.module.scss
@@ -5,16 +5,16 @@
 .tooltip {
     display: none;
     z-index: 999;
-    @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
-        display: flex;
-    }
     flex-direction: column;
     position: fixed;
     right: 0;
     bottom: 0;
     min-width: 20vw;
     border: 5px solid var(--dividers);
     background-color: var(--card);
+    @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
+        display: flex;
+    }
 
     h3,
     p {

diff --git a/src/components/accordion/Accordion.module.scss b/src/components/accordion/Accordion.module.scss
@@ -8,6 +8,9 @@
     font-family: map-deep-get($typography, 'font-family', 'regular'), sans-serif;
     font-size: 1.0625rem;
     line-height: 1.529;
+    color: var(--content-copy);
+    background-color: var(--card-2);
+    box-shadow: 0 2px 0.2px rgba(0, 0, 0, 0.1);
     @media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
         font-size: 1.1875rem;
         line-height: 1.474;
@@ -17,9 +20,6 @@
         line-height: 1.429;
     }
 
-    color: var(--content-copy);
-    background-color: var(--card-2);
-    box-shadow: 0 2px 0.2px rgba(0, 0, 0, 0.1);
     section {
         padding: 1rem;
         display: flex;