Storybook 7 → 10.4.1 (Node.js v25 Kompatibilität wiederhergestellt)

Webpack → Vite (Startzeit: mehrere Minuten → ~300ms)
Sass Deprecation Warnings beseitigt (@import → @use as *, 93 Dateien)
require() → ESM import in 8 JS-Dateien
package.json von ~35 auf 6 devDependencies bereinigt

gfi-ihk-2024/.babelrc.json

@@ -1,61 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "shippedProposals": true,
-        "loose": true
-      }
-    ],
-    "@babel/preset-typescript"
-  ],
-  "plugins": [
-    "@babel/plugin-transform-shorthand-properties",
-    "@babel/plugin-transform-block-scoping",
-    [
-      "@babel/plugin-proposal-decorators",
-      {
-        "legacy": true
-      }
-    ],
-    [
-      "@babel/plugin-proposal-class-properties",
-      {
-        "loose": true
-      }
-    ],
-    [
-      "@babel/plugin-proposal-private-methods",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-syntax-dynamic-import",
-    [
-      "@babel/plugin-proposal-object-rest-spread",
-      {
-        "loose": true,
-        "useBuiltIns": true
-      }
-    ],
-    "@babel/plugin-transform-classes",
-    "@babel/plugin-transform-arrow-functions",
-    "@babel/plugin-transform-parameters",
-    "@babel/plugin-transform-destructuring",
-    "@babel/plugin-transform-spread",
-    "@babel/plugin-transform-for-of",
-    "babel-plugin-macros",
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      "babel-plugin-polyfill-corejs3",
-      {
-        "method": "usage-global",
-        "absoluteImports": "core-js",
-        "version": "3.22.0"
-      }
-    ]
-  ]
-}

gfi-ihk-2024/.storybook/main.js

@@ -1,13 +1,15 @@
-const path = require('path');
-module.exports = {
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/preset-scss', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
-  staticDir: './public',
+export default {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+  staticDirs: ['../public'],
   framework: {
-    name: '@storybook/html-webpack5',
+    name: '@storybook/html-vite',
     options: {}
   },
-  docs: {
-    autodocs: true
+  async viteFinal(config) {
+    config.css ??= {};
+    config.css.preprocessorOptions ??= {};
+    config.css.preprocessorOptions.scss = { api: 'modern-compiler' };
+    return config;
   }
-};
+};

gfi-ihk-2024/.storybook/preview.js

@@ -27,8 +27,8 @@ const customViewports = {
 
 export const parameters = {
   layout: 'padded',
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  viewport: { viewports: customViewports },
+  actions: {},
+  viewport: { options: customViewports },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -36,28 +36,37 @@ export const parameters = {
     },
   },
   backgrounds: {
-    default: 'white',
-    values: [
-      {
+    options: {
+      white: {
         name: 'white',
         value: '#FFFFFF',
       },
-      {
+
+      primary: {
         name: 'primary',
         value: '#003366',
       },
-      {
+
+      secondary: {
         name: 'secondary',
         value: '#56BD66',
       },
-      {
+
+      lightblue: {
         name: 'lightblue',
         value: '#E3EBF5',
-      },
-    ],
+      }
+    }
   },
 }
 
+export const initialGlobals = {
+  backgrounds: {
+    value: 'white'
+  }
+};
+export const tags = ['autodocs'];
+
 export const decorators = [
   (Story) => {
     document.documentElement.setAttribute('data-theme', 'standard');

gfi-ihk-2024/package.json

@@ -5,51 +5,19 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -s ./public -p 6006",
-    "build-storybook": "storybook build -s ./public"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.19.3",
-    "@babel/plugin-proposal-export-default-from": "^7.18.10",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.18.6",
-    "@babel/plugin-transform-block-scoping": "^7.18.9",
-    "@babel/plugin-transform-classes": "^7.19.0",
-    "@babel/plugin-transform-destructuring": "^7.18.13",
-    "@babel/plugin-transform-for-of": "^7.18.8",
-    "@babel/plugin-transform-parameters": "^7.18.8",
-    "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-    "@babel/plugin-transform-spread": "^7.19.0",
-    "@babel/preset-env": "^7.19.3",
-    "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-actions": "^7.0.21",
-    "@storybook/addon-controls": "^7.0.21",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/html": "^7.0.21",
-    "@storybook/html-webpack5": "^7.0.21",
-    "@storybook/preset-scss": "^1.0.3",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-polyfill-corejs3": "^0.5.3",
-    "core-js": "^3.25.3",
-    "css-loader": "^5.1.1",
-    "file-loader": "^6.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^10.3.1",
-    "storybook": "^7.0.21",
-    "style-loader": "^2.0.0"
+    "@storybook/addon-docs": "10.4.1",
+    "@storybook/addon-links": "10.4.1",
+    "@storybook/html-vite": "10.4.1",
+    "sass": "^1.100.0",
+    "storybook": "10.4.1",
+    "vite": "^5.4.0"
   },
   "dependencies": {
     "detect-browser": "^5.3.0",
@@ -62,6 +30,7 @@
     "jquery-highlight": "^3.5.0",
     "infinite-scroll": "^3.0.6"
   },
+  "type": "module",
   "private": true,
   "coremedia": {
     "init": "src/js/init.js",

gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss

@@ -3,7 +3,7 @@
 //@import "../../variables/variables";
 
 //@import "../components/mixins";
-@import "../styles/mixins";
+@use "../styles/mixins" as *;
 
 
 .magazine-article {

gfi-ihk-2024/stories/_global/gfi-styles/_verteiler.scss

@@ -1,4 +1,4 @@
-@import "ihk-finder-form";
+@use "ihk-finder-form" as *;
 
 .ihk-landing {
   overflow: hidden;

gfi-ihk-2024/stories/_global/gfi-styles/_video.scss

@@ -1,4 +1,4 @@
-@import '../../_global/styles/mixins';
+@use '../../_global/styles/mixins' as *;
 
 .video-box {
   position: relative;

gfi-ihk-2024/stories/_global/scripts/utils/SearchUtils.js

@@ -3,7 +3,7 @@ const $ = global.$;
 // If needed plase see https://v3.infinite-scroll.com/extras.html
 // $(elem).infiniteScroll does not work
 // For API Reference See Vanila js Section of docs
-const InfiniteScroll = require('infinite-scroll');
+import InfiniteScroll from 'infinite-scroll';
 
 import {EtrackerUtils} from "./EtrackerUtils";
 

gfi-ihk-2024/stories/_global/scripts/utils/ie.js

@@ -1,6 +1,6 @@
 import IHK from '../ihk';
 
-const $ = require('jquery');
+import $ from 'jquery';
 
 class IESupport{
   constructor() {

gfi-ihk-2024/stories/_global/styles/grid.scss

@@ -1,4 +1,4 @@
-@import './mixins';
+@use './mixins' as *;
 
 .page-wrapper {
   display: block;

gfi-ihk-2024/stories/_global/styles/themes.scss

@@ -1,2 +1,2 @@
-@import '../../_global/styles/theme-standard';
-//@import '../../_global/styles/theme-digitalblue';
+@use '../../_global/styles/theme-standard' as *;
+//@use '../../_global/styles/theme-digitalblue' as *;

gfi-ihk-2024/stories/_global/styles/typography.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@use 'mixins' as *;
 
 html {
   --font-size-copy: 22px;

gfi-ihk-2024/stories/atoms/badge/badge.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .badge {
   position: relative;
@@ -17,4 +17,4 @@
   font-weight: 600;
   padding: 0.02em 0.4em 0;
   margin-left: 0.3em;
-}
+}

gfi-ihk-2024/stories/atoms/button/button.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .btn {
   --button-bg-color: var(--color-button-primary-background);
@@ -177,4 +177,4 @@ button::-moz-focus-inner {
     font-family: 'Icons', sans-serif;
     font-size: var(--icon-size);
   }
-}
+}

gfi-ihk-2024/stories/atoms/event-teaser/EventTeaser.stories.js

@@ -3,11 +3,6 @@ import {EventTeaserData, NoDateEventTeaserData, SearchResultEventTeaserData} fro
 
 export default {
   title: 'Atoms/Event Teaser',
-  parameters: {
-    backgrounds: {
-      default: 'lightblue',
-    },
-  },
   args: {
     event: EventTeaserData,
   },
@@ -15,6 +10,11 @@ export default {
     event: {
       name: 'Veranstaltung',
     }
+  },
+  globals: {
+    backgrounds: {
+      value: "lightblue"
+    }
   }
 }
 
@@ -33,4 +33,4 @@ EventWithoutDate.args = {
 export const EventSearchResult = Template.bind({});
 EventSearchResult.args = {
   event: SearchResultEventTeaserData,
-};
+};

gfi-ihk-2024/stories/atoms/event-teaser/event-teaser.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .event-teaser {
   background-color: var(--color-background);
@@ -164,4 +164,4 @@
      height: 100%;
      z-index: 10;
    }
-}
+}

gfi-ihk-2024/stories/atoms/input-checkbox-radio/input-checkbox-radio.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 input[type="checkbox"].form-control {
   width: 20px;

gfi-ihk-2024/stories/atoms/input-select/input-select.scss

@@ -1,6 +1,6 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
-@import '../../_global/styles/svg-vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
+@use '../../_global/styles/svg-vars' as *;
 
 select, select.form-control {
   @include form-field;

gfi-ihk-2024/stories/atoms/input-text/input-text.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="datetime"], input[type="tel"], textarea, textarea.form-control {
   @include form-field;
@@ -39,4 +39,4 @@ textarea, textarea.form-control {
 
 [data-browser="chrome"] textarea {
   padding-left: 10px;
-}
+}

gfi-ihk-2024/stories/atoms/interview-item/interview-item.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .interview-item {
   margin: 40px 50px 20px 0;

gfi-ihk-2024/stories/atoms/pagination/pagination.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .pagination {
   --pagination-button-margin: 5px;
@@ -31,4 +31,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/atoms/progress-bar/progress-bar.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .progress {
   --color-fg: var(--color-text);
@@ -35,4 +35,4 @@
     border-bottom-right-radius: 7px;
     background-color: var(--color-fg);
   }
-}
+}

gfi-ihk-2024/stories/atoms/reading-time/rading-time.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .reading-time {
   display: block;
@@ -35,4 +35,4 @@ a:hover .reading-time {
   position: absolute;
   bottom: 0;
   right: 0;
-}
+}

gfi-ihk-2024/stories/atoms/search-button/search-button.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 button.search-submit {
   position: absolute;

gfi-ihk-2024/stories/atoms/search-input/search-input.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 input.search-field {
   position: relative;
@@ -59,4 +59,4 @@ input.search-field {
   &::-webkit-search-results-decoration {
     display: none;
   }
-}
+}

gfi-ihk-2024/stories/atoms/secondary-menu/secondary-menu.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .secondary-menu {
   position: relative;
@@ -146,4 +146,4 @@
       text-decoration-color: var(--color-text);
     }
   }
-}
+}

gfi-ihk-2024/stories/atoms/skip-button/skip-button.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .skip-btn {
   position: absolute;

gfi-ihk-2024/stories/atoms/social-icons/social-icons.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .social-icons {
   --color-twitter: #101419;

gfi-ihk-2024/stories/atoms/tabs/tabs.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .tabs {
   margin: calc(10px + 1%) -0.25em;
@@ -21,4 +21,4 @@
       margin-left: 0.2em;
     }
   }
-}
+}

gfi-ihk-2024/stories/components/a-z/a-z.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 h1 + .a-z {
   margin-top: 30px;

gfi-ihk-2024/stories/components/accordion/accordion.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .accordion {
   --accordion-toggler-padding: 14px;

gfi-ihk-2024/stories/components/anchor-links/anchor-links.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .anchor-links {
   position: relative;

gfi-ihk-2024/stories/components/artwork/artwork.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .artwork-wrapper {
   position: relative;

gfi-ihk-2024/stories/components/card/card.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .card {
   &-inner {
@@ -170,4 +170,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/checkbox-group/checkbox-group.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .checkbox-group {
   input[type='checkbox'] ~ label {
@@ -35,4 +35,4 @@
       margin-top: calc(var(--icon-size) / -2);
     }
   }
-}
+}

gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .magazine-article article.col, .magazine-article.col {
   position: relative;
@@ -70,4 +70,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/common-content/commonContent.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .common-content {
   margin-top: var(--section-margin);
@@ -17,4 +17,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/contact/contact.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .contact-wrapper {
   position: relative;

gfi-ihk-2024/stories/components/document-list/document-list.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .document-list {
   position: relative;

gfi-ihk-2024/stories/components/election-form/election-form.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .election-form {
   --theme-color-link: var(--color-text);
@@ -76,4 +76,4 @@
       display: block;
     }
   }
-}
+}

gfi-ihk-2024/stories/components/election-result-list-badge/election-result-list-badge.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .election-result-list-badge {
   .badge-inner {

gfi-ihk-2024/stories/components/election-result-list-item/election-result-list-item.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .election-result-list-item {
   display: flex;

gfi-ihk-2024/stories/components/event-teaser-large/EventTeaserLarge.stories.js

@@ -3,6 +3,11 @@ import {EventTeaserLargeData, EventTeaserLargeImageData} from "./EventTeaserLarg
 
 export default {
   title: 'Components/Event Teaser Large',
+  parameters: {
+    backgrounds: {
+      default: 'lightblue',
+    },
+  },
   args: {
     event: EventTeaserLargeData,
     widemode: false,

gfi-ihk-2024/stories/components/event-teaser-large/event-teaser-large.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .event-teaser-large {
   background-color: var(--color-background);

gfi-ihk-2024/stories/components/footer/footer.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .page-footer {
   padding: var(--section-padding) 0;

gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .mwf-layout {
   display: flex;

gfi-ihk-2024/stories/components/gallery/gallery.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .gallery {
   --gallery-spacing: 8px;

gfi-ihk-2024/stories/components/global-message/global-message.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .global-message {
   position: sticky;

gfi-ihk-2024/stories/components/header-search/header-search.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .header-search {
   @media(min-width: 768px) {
@@ -193,4 +193,4 @@
     top: 100%;
     @include hide;
   }
-}
+}

gfi-ihk-2024/stories/components/header/header.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-require('jquery.easing');
+import 'jquery.easing';
 import {StudioPreviewUtil} from '../../_global/scripts/utils/StudioPreviewUtil';
 
 class IHKHeader {

gfi-ihk-2024/stories/components/header/header.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 @media(min-width: 1200px) {
   .magazine-start, .magazine-article, .header-collapsed {

gfi-ihk-2024/stories/components/howto-list/howto-list.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .howto-list {
   display: flex;

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js

@@ -5,7 +5,7 @@ import IHKSwitch from "./ihk-switch";
 import {createButton} from "../../atoms/button/ButtonComponent";
 import {createInputText} from "../../atoms/input-text/InputTextComponent";
 import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
-const Cookies = require('js-cookie');
+import Cookies from 'js-cookie';
 
 export const createIhkSwitch = ({
   currentIHK = 'Musterstadt',

gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.js

@@ -1,5 +1,5 @@
-const $ = require('jquery');
-const Cookies = require('js-cookie');
+import $ from 'jquery';
+import Cookies from 'js-cookie';
 
 // const Typeahead = require("typeahead.js/dist/typeahead.jquery.js");
 

gfi-ihk-2024/stories/components/ihk-switch/ihk-switch.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .ihk-switch {
   position: absolute;

gfi-ihk-2024/stories/components/image-text/image-text.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .image-text {
   max-width: 1340px;

gfi-ihk-2024/stories/components/infobox/infobox.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 
 .infobox {

gfi-ihk-2024/stories/components/linklist/linklist.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .linklist {
   --linklist-icon-padding: 38px;

gfi-ihk-2024/stories/components/login/login.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .login-form {
   position: relative;
@@ -88,4 +88,4 @@ section.extranet-wrapper {
   .widecol {
     flex: 1 1 66%;max-width: 100%;
   }
-}
+}

gfi-ihk-2024/stories/components/logo-wall/logo-wall.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .logo-wall {
   margin: 0 0 1em 0;
@@ -47,4 +47,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/magazine-article/magazine-article.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .magazine-article article.col, .magazine-article.col {
   position: relative;
@@ -81,4 +81,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/magazine-cover/magazine-cover.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .magazine-cover {
   @media(min-width: 768px) {

gfi-ihk-2024/stories/components/magazine-header/magazine-header.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .magazine-header {
   --magazine-header-height: 90px;

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js

@@ -2,11 +2,6 @@ import {createMiniTeaser} from "./MiniTeaserComponent";
 
 export default {
   title: 'Components/Mini Teaser',
-  parameters: {
-    backgrounds: {
-      default: 'white',
-    },
-  },
   argTypes: {
     type: {
       name: 'Typ',
@@ -30,6 +25,11 @@ export default {
       options: ['Roboter', 'Anker', 'Blitz', 'Buch Brille', 'Brexit', 'Chart', 'Rettungsring', 'Magazin'],
       defaultValue: 'Roboter',
     }
+  },
+  globals: {
+    backgrounds: {
+      value: "white"
+    }
   }
 }
 

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .mini-teaser {
   position: relative;
@@ -69,7 +69,7 @@
         opacity: 0.6;
         background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%);
         background-blend-mode: overlay;
-        
+
       }
       .text-box{
         position: relative;
@@ -123,7 +123,7 @@
       position: absolute;
       top: 0;
       left: 0;
-      
+
     }
     .text-box{
       padding: 0;

gfi-ihk-2024/stories/components/nav/nav.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .page-header.dummy nav {
   z-index: 0;

gfi-ihk-2024/stories/components/page-details/page-details.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .page-details {
   margin: 0 0 48px;

gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .participation-list {
   margin: calc(20px + 2%) 0;
@@ -78,4 +78,4 @@
       line-height: 1;
     }
   }
-}
+}

gfi-ihk-2024/stories/components/participation-teaser/ParticipationTeaser.stories.js

@@ -2,11 +2,6 @@ import {createParticipationTeaser} from "./ParticipationTeaserComponent";
 
 export default {
   title: 'Components/ParticipationTeaser',
-  parameters: {
-    backgrounds: {
-      default: 'lightblue',
-    },
-  },
   args: {
     kicker: 'Noch 6 Tage offen',
     progress: 65,
@@ -26,6 +21,11 @@ export default {
   argTypes: {
 
   },
+  globals: {
+    backgrounds: {
+      value: "lightblue"
+    }
+  },
 }
 
 const Template = ({...args}) => {
@@ -33,4 +33,4 @@ const Template = ({...args}) => {
 };
 
 export const ParticipationTeaser = Template.bind({});
-ParticipationTeaser.args = {};
+ParticipationTeaser.args = {};

gfi-ihk-2024/stories/components/participation-teaser/participation-teaser.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .participation-teaser {
   position: relative;
@@ -84,4 +84,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/print-share/print-share.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .print-share {
   margin: var(--section-margin) 0;

gfi-ihk-2024/stories/components/search-form/search-form.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .search-filter-form {
   --search-padding: 28px;
@@ -270,4 +270,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/search-results/search-results.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .search-results {
   .results-wrapper {
@@ -249,4 +249,4 @@
       margin-top: -20px;
     }
   }
-}
+}

gfi-ihk-2024/stories/components/steps/steps.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .richtext .steps {
   .text a, .rte--list a {

gfi-ihk-2024/stories/components/superlist-entry/SuperlistEntry.stories.js

@@ -2,11 +2,10 @@ import {createSuperlistEntrySection} from "./SuperlistEntryComponent";
 
 export default {
     title: 'Components/Superlist Entry',
-    parameters: {
-    },
+
     args: {
     }
-}
+};
 
 const Template = ({...args}) => {
     return createSuperlistEntrySection({...args});
@@ -21,4 +20,4 @@ export const SuperlistEntryCentered = Template.bind({});
 SuperlistEntryCentered.args = {
     showInStorybook: true,
     centered: true,
-};
+};

gfi-ihk-2024/stories/components/superlist-entry/superlist-entry.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .superlist-entry {
   position: relative;
@@ -199,4 +199,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/components/teaser-social/teaser-social.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .teaser .social-box {
   position: relative;

gfi-ihk-2024/stories/components/teaser/teaser.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .teaser {
   --hero-background: var(--swatches-neutrals-white);

gfi-ihk-2024/stories/components/testimonial/testimonial.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .image-text.is-blockquote {
   max-width: 1340px;

gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss

@@ -1,4 +1,4 @@
-@import '../../_global/styles/vars';
+@use '../../_global/styles/vars' as *;
 
 .text-with-headline {
   margin-top: 0;
@@ -21,4 +21,4 @@
       padding: 0;
     }
   }
-}
+}

gfi-ihk-2024/stories/components/topic-teaser/TopicTeaser.stories.js

@@ -2,11 +2,6 @@ import {createTopicTeaser} from "./TopicTeaserComponent";
 
 export default {
   title: 'Components/Topics Teaser',
-  parameters: {
-    backgrounds: {
-      default: 'lightblue',
-    },
-  },
   argTypes: {
     type: {
       name: 'Typ',
@@ -30,6 +25,11 @@ export default {
       options: ['Roboter', 'Anker', 'Blitz', 'Buch Brille', 'Brexit', 'Chart', 'Rettungsring', 'Magazin'],
       defaultValue: 'Roboter',
     }
+  },
+  globals: {
+    backgrounds: {
+      value: "lightblue"
+    }
   }
 }
 
@@ -43,4 +43,4 @@ SingleTopicTeaser.args = {};
 export const TopicLinkList = TopicTeaser.bind({});
 TopicLinkList.args = {
   type: 'topic-linklist',
-};
+};

gfi-ihk-2024/stories/components/topic-teaser/topic-teaser.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .topic-teaser, .topics .tile {
   --topic-tile-padding: 24px;

gfi-ihk-2024/stories/components/video/video.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .video {
   width: 100%;
@@ -71,4 +71,4 @@
       box-shadow: 0 0 0 5px rgba(var(--theme-color-primary-rgb), 0.3);
     }
   }
-}
+}

gfi-ihk-2024/stories/sections/card-slider/card-slider.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .card-slider {
   margin: var(--section-margin) 0 var(--section-margin) 0;
@@ -210,4 +210,4 @@
       max-width: 1340px;
     }
   }
-}
+}

gfi-ihk-2024/stories/sections/election-detail/election-detail.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .election-detail {
   margin: 0 0 80px 0;

gfi-ihk-2024/stories/sections/election-result-list/election-result-list.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .election-result-list {
   .election-result-list--header {
@@ -43,4 +43,4 @@
     //  grid-template-columns: 1fr;
     //}
   }
-}
+}

gfi-ihk-2024/stories/sections/event-teaser-large-slider/eventteaserlargeslider.scss

@@ -1,6 +1,6 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
-@import '../../components/event-teaser-large/event-teaser-large.scss';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
+@use '../../components/event-teaser-large/event-teaser-large.scss' as *;
 
 .right-open-container{
   @media (min-width: 400px) {
@@ -264,4 +264,4 @@
     }
 
   }
-}
+}

gfi-ihk-2024/stories/sections/event-teasers-large/event-teasers-large.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .event-teasers-large {
   position: relative;
@@ -64,18 +64,18 @@
       }
     }
     @media(max-width: 767px) {
-     
+
     }
     @media(max-width: 567px) {
       flex: 1 1 100%;
       max-width: 100%;
-    
+
       &:last-child {
         display:block;
       }
     }
     @media(max-width: 359px) {
-   
+
     }
   }
 
@@ -83,4 +83,4 @@
     text-align: center;
     margin: calc(var(--col-padding) + 1.5em) 0 0;
   }
-}
+}

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 .eventoverview-section{
   margin: 0;
   .tilescontainer{
@@ -200,7 +200,7 @@
     }
   }
 
-  
+
   .icon-box {
     font-size: 40px !important;
     margin-top:0 !important;
@@ -230,7 +230,7 @@
     @media (max-width: 767px) {
       &:nth-child(2n+1):last-child {
         flex: 1 1 100%;
-        max-width: 100%; 
+        max-width: 100%;
       }
     }
     &.width-half{
@@ -244,14 +244,14 @@
           max-width: 100%;
         }
       }
-      
+
     }
     &.width-third{
       flex: 1 1 25%;
-      max-width: 25%; 
+      max-width: 25%;
       @media(max-width: 1480px) {
         flex: 1 1 50%;
-        max-width: 50%; 
+        max-width: 50%;
       }
     }
     .topic-teaser{
@@ -269,4 +269,4 @@
       flex: 1 1 100%;
     }
   }
-}
+}

gfi-ihk-2024/stories/sections/events/events.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .events {
   padding: var(--section-padding) 0;

gfi-ihk-2024/stories/sections/feature/feature.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .feature {
   --theme-color-link: var(--swatches-neutrals-white);

gfi-ihk-2024/stories/sections/infobanner/infobanner.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .infobanner {
   margin: var(--section-margin) auto;

gfi-ihk-2024/stories/sections/interview/interview.scss

@@ -1,6 +1,6 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .interview {
 
-}
+}

gfi-ihk-2024/stories/sections/intro/intro.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .intro {
   padding: 0;

gfi-ihk-2024/stories/sections/marketingheader/marketingheader.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 section.marketingheader {
   margin-top: 0;
@@ -1271,4 +1271,4 @@ section.marketingheader {
   100% {
     width: 100%
   }
-}
+}

gfi-ihk-2024/stories/sections/participation-map/participation-map.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .participation-map {
   padding: var(--section-padding) 0;
@@ -46,4 +46,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .participation-stage {
   background-image: url('./beteiligung-cover.jpg');
@@ -178,4 +178,4 @@
       }
     }
   }
-}
+}

gfi-ihk-2024/stories/sections/participation-teasers/participation-teasers.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .participation-teasers {
   position: relative;
@@ -76,4 +76,4 @@
     margin: calc(var(--col-padding) + 1.5em) 0 0;
   }
 
-}
+}

gfi-ihk-2024/stories/sections/quick-facts/quick-facts.scss

@@ -1,5 +1,5 @@
-@import '../../_global/styles/mixins';
-@import '../../_global/styles/vars';
+@use '../../_global/styles/mixins' as *;
+@use '../../_global/styles/vars' as *;
 
 .quick-facts {
   position: relative;
@@ -221,4 +221,4 @@
       margin: 0 5px;
     }
   }
-}
+}