static

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

@@ -318,6 +318,7 @@
 @mixin icon-pause { content: '\e806'; }
 @mixin icon-volume-mute { content: '\e862'; }
 @mixin icon-volume-on { content: '\e86f'; }
+@mixin icon-ankerlink-right { content: '\e873'; }
 
 // PICTOGRAMS
 @mixin pictogram-achtung { content: '\e800'; }

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

@@ -84,7 +84,7 @@ section {
   margin-top: 0 !important;
 }
 
-.main-col, .col.magazine-article, .magazine-article artcile.col {
+.main-col, .col.magazine-article, .magazine-article article.col {
   --section-margin: calc(1.5% + 2em);
 
   @media (min-width: 1000px) {

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

@@ -110,3 +110,4 @@
 .icon-galerie-small:before { content: '\e870'; }
 .icon-interaction-small:before { content: '\e871'; }
 .icon-video-small:before { content: '\e872'; }
+.icon-ankerlink-right:before { content: '\e873'; }

gfi-ihk-2024/stories/assets/fonts/icons/icons.svg

@@ -224,6 +224,8 @@
 
 <glyph glyph-name="video-small" unicode="&#xe872;" d="M83 656h834v-612h-834v612z m-27 83c-31 0-56-25-56-56v-666c0-31 25-56 56-56h888c31 0 56 25 56 56v666c0 31-25 56-56 56h-888z m680-389c0 15-8 29-21 36l-333 193c-13 7-29 7-42 0-13-8-21-22-21-37l0-384c0-15 8-29 21-36 13-8 29-8 42 0l333 192c13 7 21 21 21 36z m-333 120l208-120-208-120 0 240z" horiz-adv-x="1000" />
 
+<glyph glyph-name="ankerlink-right" unicode="&#xe873;" d="M133 583c0 19 15 34 34 34h275c92 0 167-75 167-167v-354l168 164c13 13 34 13 47-1 13-13 13-34-1-47l-224-219c-13-13-34-13-47 0l-224 219c-13 13-13 34 0 47 12 14 34 14 47 1l167-164v354c0 55-44 100-100 100h-275c-19 0-34 15-34 33z" horiz-adv-x="1000" />
+
 <glyph glyph-name="userlike" unicode="&#xe8c6;" d="M826 850h-652c-63 0-114-51-114-114v-662c0-63 51-114 114-114h487l279-110v224 12 650c0 63-51 114-114 114z m-23-673c-89-62-194-95-303-95-109 0-214 33-303 95-14 10-17 30-7 44 9 14 29 18 43 8 79-55 171-84 267-84 96 0 188 29 267 84 14 10 34 6 44-8 10-14 6-34-8-44z" horiz-adv-x="1000" />
 
 <glyph glyph-name="userlike-chat" unicode="&#xe8c7;" d="M500 825c-262 0-475-213-475-475s213-475 475-475c76 0 149 18 212 50h135c14 0 28 5 37 15 10 10 16 24 16 38v116c49 76 75 165 75 256 0 262-213 475-475 475z m252-648c-7-8-14-12-28-12h-448c-11 0-21 5-28 12-8 7-12 17-12 28 0 10 5 20 12 28 7 7 17 11 28 11h448c13 0 21-4 28-11 8-8 12-18 12-28 0-11-4-21-12-28z m0 145c-7-7-17-11-28-11h-369c-11 0-21 4-28 11-8 8-12 18-12 28s5 21 12 28c7 8 17 12 28 12h369c11 0 21-5 28-12 8-7 12-17 12-28s-4-20-12-28z m0 145c-7-7-15-11-28-11h-448c-11 0-21 4-28 11-8 8-12 18-12 28 0 11 5 21 12 28 7 8 17 12 28 12h448c13 0 21-4 28-12 8-7 12-17 12-28 0-10-4-20-12-28z" horiz-adv-x="1000" />

gfi-ihk-2024/stories/atoms/skip-button/SkipButton.stories.js

@@ -0,0 +1,13 @@
+import {createSkipButton} from './SkipButtonComponent';
+
+export default {
+    title: 'Atoms/Skip-Button',
+    argTypes: {},
+};
+
+const Template = ({label, ...args}) => {
+    return createSkipButton({label, ...args});
+};
+
+export const SkipButton = Template.bind({});
+SkipButton.args = {};

gfi-ihk-2024/stories/atoms/skip-button/SkipButtonComponent.js

@@ -0,0 +1,15 @@
+import './skip-button.scss';
+import {createButton} from "../button/ButtonComponent";
+
+export const createSkipButton = () => {
+    let skipBtn = createButton({
+      color: 'secondary',
+      link: '#main',
+      label: 'Zum Hauptinhalt springen',
+      iconPosition: 'icon-right',
+      icon: 'ankerlink-right'});
+    skipBtn.classList.add('skip-btn');
+
+    return skipBtn;
+  };
+

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

@@ -0,0 +1,13 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.skip-btn {
+  position: absolute;
+  left: 50%;
+  top: -80px;
+  z-index: 9999;
+  transform: translate(-50%,0);
+  &:focus {
+    top: 15px;
+  }
+}

gfi-ihk-2024/stories/components/infobox/Infobox.stories.js

@@ -24,6 +24,17 @@ const Template = ({...args}) => {
 export const Infobox = Template.bind({});
 Infobox.args = {};
 
+export const Full = Template.bind({});
+Full.args = {
+  full: true,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  type: 'secondary',
+  full: true,
+};
+
 export const Warning = Template.bind({});
 Warning.args = {
   type: 'warning',

gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js

@@ -1,11 +1,50 @@
 import './infobox.scss';
-import {createElement} from "../../_global/scripts/helpers";
+import {createElement, createImage} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";
 
 export const createInfobox =
-  ({
-    type = 'regular',
-    content = '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>',
-  }) => {
-    const infobox = createElement('div', ['infobox', type], content);
-    return infobox;
-  }
+    ({
+         type = 'regular',
+         full = false,
+         kicker = 'Dachzeile',
+         headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
+         image = './dummy/placeholder-1-1.svg',
+         text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
+         ul = 'List Styles werden über externe Klasse Richtext geladen',
+         ol = 'Lorem ipsum dolor sit',
+     }) => {
+        const infobox = createElement('div', ['infobox', type]);
+        const content = createElement('div', ['infobox--content'], null, infobox);
+
+        if (full === true) {
+            createElement('p', ['kicker'], kicker, content);
+            createElement('div', ['like-h2'], headline, content);
+        }
+        createElement('p', [], text, content);
+        if (full === true) {
+            const ulEl = createElement('ul', [], null, content);
+            createElement('li', [], ul, ulEl);
+            const olEl = createElement('ol', [], null, content);
+            createElement('li', [], ol, olEl);
+
+            content.appendChild(createBlockquote({}));
+
+            let button;
+            if (type === 'secondary') {
+                 button = createButton({
+                    color: 'primary', label: 'Label'
+                });
+            } else {
+                 button = createButton({
+                    color: 'secondary', label: 'Label'
+                });
+            }
+            content.appendChild(button);
+
+            createImage(image, 70, 70, '', [], infobox);
+        }
+
+
+        return infobox;
+    }

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

@@ -1,28 +1,72 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.infobox, .richtext div.strong, article.col div.strong {
+.infobox,
+.richtext div.strong,
+article.col div.strong {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 60px;
   margin: calc(3% + 26px) 0;
   background-color: var(--theme-color-secondary-dimmed);
   padding: var(--content-box-padding);
-  border-bottom: var(--border-width) solid var(--theme-color-secondary);
+  border-top-left-radius: calc(4 * (var(--border-radius-xs)));
+  border-top-right-radius: calc(4 * (var(--border-radius-xs)));
+  @media (max-width: 767px) {
+    padding-top: calc(2 * var(--content-box-padding));
+    padding-bottom: calc(2 * var(--content-box-padding));
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: var(--border-width);
+    background: var(--theme-color-secondary);
+    position: absolute;
+    left: 0;
+    bottom: calc(-1 * var(--border-width));
+    border-bottom-left-radius: calc(4 * (var(--border-radius-xs)));
+    border-bottom-right-radius: calc(4 * (var(--border-radius-xs)));
+  }
 
   &.success {
     background-color: var(--theme-color-success-dimmed);
-    border-color: var(--theme-color-success);
+    &:after {
+      background: var(--theme-color-success);
+    }
   }
+
   &.error {
     background-color: var(--theme-color-error-dimmed);
-    border-color: var(--theme-color-error);
+    &:after {
+      background: var(--theme-color-error);
+    }
   }
+
   &.warning {
     background-color: var(--theme-color-warning-dimmed);
-    border-color: var(--theme-color-warning);
+    &:after {
+      background: var(--theme-color-warning);
+    }
+  }
+
+  &.secondary {
+    background-color: var(--theme-color-primary-dimmed-04);
+    &:after {
+      background: var(--theme-color-primary);
+    }
+    blockquote {
+      border-left-color: var(--theme-color-primary);
+    }
   }
 
   > *:first-child {
     margin-top: -0.4em;
   }
+
   > *:last-child {
     margin-bottom: -0.4em;
   }
@@ -30,9 +74,33 @@
   &:first-child {
     margin-top: 0;
   }
+
   &:last-child {
     margin-bottom: 0;
   }
+  .infobox--content {
+    flex: 1;
+  }
+  img {
+    flex-shrink: 0;
+    width: 70px;
+    height: 70px;
+    @media (max-width: 767px) {
+      position: absolute;
+      right: 15px;
+      top: 15px;
+    }
+  }
+  h2, .like-h2 {
+    @media (max-width: 767px) {
+      padding-right: 90px;
+    }
+  }
+  p.kicker {
+    @media (max-width: 767px) {
+      padding-right: 90px;
+    }
+  }
 }
 
 .snippingTool {

gfi-ihk-2024/stories/pages/home/HomePage.js

@@ -13,6 +13,8 @@ import {createSocialSection} from "../../sections/social/SocialComponent";
 import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
 import {createSurvey} from "../../sections/survey/SurveyComponent";
 import {createTextWithHeadline} from "../../components/text-with-headline/TextWithHeadlineComponent";
+import {createButton} from "../../atoms/button/ButtonComponent";
+import {createSkipButton} from "../../atoms/skip-button/SkipButtonComponent";
 
 export const createHomePage = ({
   globalMessageType = 'light',
@@ -25,6 +27,9 @@ export const createHomePage = ({
   const main = createElement('main', ['page-content'], null, wrapper);
   const footer = createFooter({});
 
+  let skipBtn = createSkipButton();
+
+  page.insertBefore(skipBtn, wrapper);
   page.insertBefore(header, wrapper);
   page.appendChild(footer);
 

gfi-ihk-2024/storybook-static/iframe.html

@@ -354,8 +354,8 @@
             window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":true};</script><script type="module">import './sb-preview/runtime.js';
 
       
-      import './runtime~main.ef5ead49.iframe.bundle.js';
+      import './runtime~main.f798daea.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       
-      import './main.97f90822.iframe.bundle.js';</script></body></html>
+      import './main.340a59e0.iframe.bundle.js';</script></body></html>

gfi-ihk-2024/storybook-static/project.json

@@ -1 +1 @@
-{"generatedAt":1760525461497,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}
+{"generatedAt":1762357424661,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.5.1"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.0.21","storybookVersionSpecifier":"^7.0.21","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.6.17"},"@storybook/html":{"version":"7.0.21"},"@storybook/html-webpack5":{"version":"7.0.21"},"storybook":{"version":"7.6.17"}},"addons":{"@storybook/preset-scss":{"version":"1.0.3"},"@storybook/addon-links":{"version":"7.0.21"},"@storybook/addon-essentials":{"version":"7.6.17"},"@storybook/addon-controls":{"version":"7.6.17"}}}