fix topic teaser icons and add lottie animation support

- Fix all 6 pictogram icons by switching to pictogram-topic-* namespace and importing pictograms-mapper.scss with its required mixins
- Add lottie-web dependency and lottieFile prop to topic teaser component
- Size lottie container to match pictogram icon dimensions (72/50px) and inherit --color-decoration via currentColor on SVG paths
- Expose stories/assets/lottie as /lottie static dir in Storybook

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

@@ -7,7 +7,7 @@ export default {
     '@storybook/addon-a11y',
     '@chromatic-com/storybook'
   ],
-  staticDirs: ['../public'],
+  staticDirs: ['../public', { from: '../stories/assets/lottie', to: '/lottie' }],
   framework: {
     name: '@storybook/html-vite',
     options: {}

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

@@ -4,6 +4,7 @@ import '../stories/_global/styles/main.scss';
 import '../stories/_global/styles/fonts.scss';
 import '../stories/_global/styles/icons.scss';
 import '../stories/_global/styles/pictograms.scss';
+import '../stories/_global/styles/pictograms-mapper.scss';
 import '../stories/_global/styles/typography.scss';
 import '../stories/_global/styles/grid.scss';
 import '../stories/_global/styles/storybook-preview.scss';

gfi-ihk-2024/package-lock.json

@@ -17,7 +17,8 @@
         "jquery": "^3.6.1",
         "jquery-highlight": "^3.5.0",
         "jquery.easing": "^1.4.1",
-        "js-cookie": "^3.0.1"
+        "js-cookie": "^3.0.1",
+        "lottie-web": "^5.13.0"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^5.2.1",
@@ -48,7 +49,6 @@
       "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.29.7",
         "js-tokens": "^4.0.0",
@@ -99,7 +99,6 @@
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz",
       "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -158,29 +157,6 @@
         "storybook": "^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0 || ^10.5.0-0 || ^10.6.0-0"
       }
     },
-    "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -2634,8 +2610,7 @@
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
       "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/chai": {
       "version": "5.2.3",
@@ -2686,6 +2661,7 @@
       "integrity": "sha512-N2JFGfXoEGVAut+kHeru9dD4BUMq/q5xDvBARNl0tUsly3m5KglLOu8VO/6MkDfOlgxXTycojkt6gBKsuyR+IQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@blazediff/core": "1.9.1",
         "@vitest/mocker": "4.1.7",
@@ -2709,6 +2685,7 @@
       "integrity": "sha512-OlTlJej7YN6VwV7zJJoNeaCsctF+JXpzpZ4oBHUbrQFfIq+0KW2f07rprCLh9N/zRIZ0v4Mchn1QDDmWMUhPKw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/browser": "4.1.7",
         "@vitest/mocker": "4.1.7",
@@ -2734,7 +2711,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
@@ -2752,7 +2728,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2770,7 +2745,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2788,7 +2762,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2806,7 +2779,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2824,7 +2796,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2842,7 +2813,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2860,7 +2830,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2878,7 +2847,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2896,7 +2864,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2914,7 +2881,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2932,7 +2898,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2950,7 +2915,6 @@
       "os": [
         "openharmony"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -2965,7 +2929,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/core": "1.10.0",
         "@emnapi/runtime": "1.10.0",
@@ -2988,7 +2951,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3006,7 +2968,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3055,7 +3016,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.133.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -3094,86 +3054,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@vitest/browser-playwright/node_modules/vite": {
-      "version": "8.0.16",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
-      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "lightningcss": "^1.32.0",
-        "picomatch": "^4.0.4",
-        "postcss": "^8.5.15",
-        "rolldown": "1.0.3",
-        "tinyglobby": "^0.2.17"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "@vitejs/devtools": "^0.1.18",
-        "esbuild": "^0.27.0 || ^0.28.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "@vitejs/devtools": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vitest/browser/node_modules/@oxc-project/types": {
       "version": "0.133.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.133.0.tgz",
@@ -3181,7 +3061,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
@@ -3199,7 +3078,6 @@
       "os": [
         "android"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3217,7 +3095,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3235,7 +3112,6 @@
       "os": [
         "darwin"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3253,7 +3129,6 @@
       "os": [
         "freebsd"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3271,7 +3146,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3289,7 +3163,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3307,7 +3180,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3325,7 +3197,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3343,7 +3214,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3361,7 +3231,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3379,7 +3248,6 @@
       "os": [
         "linux"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3397,7 +3265,6 @@
       "os": [
         "openharmony"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3412,7 +3279,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/core": "1.10.0",
         "@emnapi/runtime": "1.10.0",
@@ -3435,7 +3301,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3453,7 +3318,6 @@
       "os": [
         "win32"
       ],
-      "peer": true,
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
       }
@@ -3530,7 +3394,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@oxc-project/types": "=0.133.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -3569,86 +3432,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@vitest/browser/node_modules/vite": {
-      "version": "8.0.16",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.16.tgz",
-      "integrity": "sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "lightningcss": "^1.32.0",
-        "picomatch": "^4.0.4",
-        "postcss": "^8.5.15",
-        "rolldown": "1.0.3",
-        "tinyglobby": "^0.2.17"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^20.19.0 || >=22.12.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "@vitejs/devtools": "^0.1.18",
-        "esbuild": "^0.27.0 || ^0.28.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "@vitejs/devtools": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "jiti": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "sass-embedded": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vitest/coverage-v8": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.1.7.tgz",
@@ -3754,6 +3537,7 @@
       "integrity": "sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/utils": "4.1.7",
         "pathe": "^2.0.3"
@@ -3908,7 +3692,6 @@
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -3919,7 +3702,6 @@
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4082,8 +3864,7 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/deep-eql": {
       "version": "5.0.2",
@@ -4173,8 +3954,7 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/es-module-lexer": {
       "version": "2.1.0",
@@ -4190,6 +3970,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -4538,6 +4319,7 @@
       "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "dev": true,
       "license": "MPL-2.0",
+      "peer": true,
       "dependencies": {
         "detect-libc": "^2.0.3"
       },
@@ -4805,6 +4587,12 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lottie-web": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.13.0.tgz",
+      "integrity": "sha512-+gfBXl6sxXMPe8tKQm7qzLnUy5DUPJPKIyRHwtpCpyUEYjHYRJC/5gjUvdkuO2c3JllrPtHXH5UJJK8LRYl5yQ==",
+      "license": "MIT"
+    },
     "node_modules/loupe": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
@@ -4818,7 +4606,6 @@
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -5136,7 +4923,6 @@
       "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1",
         "ansi-styles": "^5.0.0",
@@ -5152,6 +4938,7 @@
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -5165,6 +4952,7 @@
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -5178,8 +4966,7 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/recast": {
       "version": "0.23.11",
@@ -5216,8 +5003,7 @@
       "version": "0.13.9",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
       "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/rolldown": {
       "version": "1.0.2",
@@ -5269,6 +5055,7 @@
       "integrity": "sha512-WHeFSbZYsPu3+bLoNRUuAO+wavNlocOPf3wSHTP7hcFKVnJeWsYlCDbr3mTS14FCizf9ccIxXA8sGL8zKeQN3g==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -5327,6 +5114,7 @@
       "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^5.0.0",
         "immutable": "^5.1.5",
@@ -5456,6 +5244,7 @@
       "integrity": "sha512-V1Zd2e+gBFufqAQVZ1JR8KLqALsEZ3JYSBnWwQbKa6zCfWWanR6AFMyuOkLt2gZOgGp3h2Riuz88pGNVTQSG0A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "@storybook/icons": "^2.0.2",
@@ -5682,6 +5471,7 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
@@ -6172,6 +5962,7 @@
       "integrity": "sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.1.7",
         "@vitest/mocker": "4.1.7",
@@ -6365,6 +6156,7 @@
       "integrity": "sha512-s4BJJ+5y1pYL6Otw51FHhVJQhPnuRinKig64g/1+EUNaJsd3gCKdD31IPFvswUgW9/60QT9oFHbZHbQK5imcxw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "lightningcss": "^1.32.0",
         "picomatch": "^4.0.4",

gfi-ihk-2024/package.json

@@ -35,7 +35,8 @@
     "jquery": "^3.6.1",
     "jquery-highlight": "^3.5.0",
     "jquery.easing": "^1.4.1",
-    "js-cookie": "^3.0.1"
+    "js-cookie": "^3.0.1",
+    "lottie-web": "^5.13.0"
   },
   "type": "module",
   "private": true,

gfi-ihk-2024/stories/_global/styles/pictograms-mapper.scss

@@ -1,3 +1,5 @@
+@import 'mixins';
+
 .pictogram-topic-aeskulapstab:before { @include pictogram-aeskulapstab; }
 .pictogram-topic-anker:before { @include pictogram-anker; }
 .pictogram-topic-ausrufezeichen:before { @include pictogram-achtung; }

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

@@ -1,17 +1,22 @@
 import './topic-teaser.scss';
 import {createElement} from "../../_global/scripts/helpers";
 import {createLinkList} from "../linklist/LinkListComponent";
+import lottie from 'lottie-web';
 
 export const createTopicTeaser = ({
   type = 'single-topic',
   title = 'Hallo Welt',
   link = '#',
   icon = 'Eule Doktorhut',
+  lottieFile = null,
   linklistData = null,
 }) => {
   const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser','variant-base', type], null);
   tile.href = link;
-  createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile);
+  const iconBox = createElement('div', ['icon-box', ...(lottieFile ? ['icon-box--lottie'] : ['pictogram-topic-' + icon.toLowerCase().split(' ').join('-')])], null, tile);
+  if (lottieFile) {
+    lottie.loadAnimation({ container: iconBox, renderer: 'svg', loop: true, autoplay: true, path: lottieFile });
+  }
   const textBox = createElement('div', ['text-box'], null, tile);
   createElement('h4', ['title'], title, textBox);
 

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

@@ -34,9 +34,26 @@
     color: var(--color-decoration);
     margin-top: 6px;
 
+    &--lottie {
+      width: 72px;
+      height: 72px;
+      margin-left: auto;
+      margin-right: auto;
+      color: var(--color-decoration);
+
+      svg path {
+        stroke: currentColor;
+      }
+    }
+
     @media(max-width: 567px) {
       font-size: 50px;
       margin-top: 0;
+
+      &--lottie {
+        width: 50px;
+        height: 50px;
+      }
     }
   }
 }
@@ -96,8 +113,18 @@ div.topic-teaser, .topics[data-type="list"] .tile {
     padding: 10px 0;
     font-size: 60px;
 
+    &--lottie {
+      width: 60px;
+      height: 60px;
+    }
+
     @media(max-width: 767px) {
       font-size: 46px;
+
+      &--lottie {
+        width: 46px;
+        height: 46px;
+      }
     }
   }
 

gfi-ihk-2024/stories/sections/topic-teasers/TopicTeasersData.js

@@ -2,6 +2,7 @@ export const Topics = [
   {
     title: 'Alles für Gründer',
     icon: 'Foundation',
+    lottieFile: '/lottie/test/animation.json',
   },
   {
     title: 'Alles Wichtige zum Brexit',