skip button

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/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/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);