card-slider

gfi-ihk-2024/stories/components/card/Card.stories.js

@@ -0,0 +1,13 @@
+import {createCard} from "./CardComponent";
+
+export default {
+    title: 'Components/Card',
+    args: {},
+}
+
+const Template = ({...args}) => {
+    return createCard({...args});
+};
+
+export const Card = Template.bind({});
+Card.args = {};

gfi-ihk-2024/stories/components/card/CardComponent.js

@@ -0,0 +1,31 @@
+import './card.scss';
+import {createElement, createImage} from "../../_global/scripts/helpers";
+
+export const createCard =
+    ({
+         image = './dummy/why-elect.jpg',
+         copyright = '@ shutterstock.com',
+         kicker = 'Praxis & Ratgeber',
+         headline = 'Jetzt Teil der IHK-Kampagne werden',
+         link = 'http://www.ihk24.de',
+    }) => {
+        const card = createElement('div', ['card'], null);
+        const cardInner = createElement('a', ['card-inner'], null, card);
+        cardInner.href = link;
+
+        const imageBox = createElement('div', ['image-box'], '', cardInner);
+        createImage(image, 700, 470, '', [], imageBox);
+        if (copyright && copyright.length > 0) {
+            const copy = createElement('span', ['copyright'], copyright, imageBox);
+            copy.setAttribute("aria-hidden", "true");
+            createElement('span', ['sr-only'], copyright, imageBox);
+        }
+
+        const textBox = createElement('div', ['text-box'], null, cardInner);
+        if (kicker && kicker.length > 0) {
+            createElement('span', ['kicker'], kicker, textBox);
+        }
+        createElement('div', ['like-h4'], headline, textBox);
+
+        return card;
+    }

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

@@ -0,0 +1,87 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.card {
+  &-inner {
+    display: block;
+    max-width: 350px;
+    background: var(--theme-color-primary);
+    border-radius: 16px;
+    @media(max-width: 645px) {
+      max-width: 230px;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .image-box {
+    overflow: hidden;
+    height: 233px;
+    position: relative;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    @media(max-width: 645px) {
+      height: 153px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-top-left-radius: 16px;
+      border-top-right-radius: 16px;
+      transition: all 0.3s ease-in-out;
+    }
+
+    .copyright {
+      @include copyright;
+      margin-bottom: 8px;
+    }
+  }
+
+  .text-box {
+    position: relative;
+    height: 197px;
+    padding: 0 25px;
+    color: var(--theme-color-white);
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    background: var(--theme-color-gradient-01);
+    background: linear-gradient(162deg, var(--theme-color-gradient-01) 50%, var(--theme-color-gradient-02) 98%, var(--theme-color-gradient-03) 100%);
+    @media(max-width: 645px) {
+      height: 130px;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: -34px;
+      width: 100%;
+      height: 34px;
+      clip-path: path('M 0 15.88 C 112.843 -4.02 237.282 -3.95 350 15.88 L 350 234 L 0 234 Z');
+      background: var(--theme-color-gradient-01);
+    }
+
+    .kicker {
+
+    }
+
+    .like-h4 {
+      text-decoration: underline;
+      margin: 0;
+    }
+  }
+
+  &:hover {
+    .card-inner {
+      .image-box {
+        img {
+          scale: 1.1;
+        }
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/components/magazine-article/MagazineArticleComponent.js

@@ -8,6 +8,7 @@ import {createContact} from "../contact/ContactComponent";
 import {createPrintShare} from "../print-share/PrintShareComponent";
 import {createInfobox} from "../infobox/InfoboxComponent";
 import {createEventsSection} from "../../sections/events/EventsComponent";
+import {createCardSlider} from "../../sections/card-slider/CardSliderComponent";
 
 export const createMagazineArticle = ({
   addArticleComponents = true,
@@ -26,6 +27,7 @@ export const createMagazineArticle = ({
     createElement('p', [], lorem2, richText);
     createElement('h2', [], 'Lorem ipsum dolor sit', richText);
     createElement('p', [], lorem1, richText);
+    article.appendChild(createCardSlider({}));
     article.appendChild(createGallery({galleryType: 'masonry'}));
     article.appendChild(createInfobox({content: lorem2}));
     const imageBox = createElement('figure', ['image-box', 'off-grid'], null, article);

gfi-ihk-2024/stories/components/teaser/TeaserComponent.js

@@ -78,7 +78,7 @@ export const createTeaser = ({
   }
 
   const textBox = createElement('div', ['text-box'], '', teaser);
-  createElement('h4', ['title'], headline, textBox);
+  createElement('div', ['title','like-h4'], headline, textBox);
   createElement('p', [], copy, textBox);
 
   if (showReadingTime) {

gfi-ihk-2024/stories/pages/article/ArticlePage.js

@@ -12,6 +12,7 @@ import {createAnchorLinks} from "../../components/anchor-links/AnchorLinksCompon
 import {lorem1, lorem2} from "../../_global/scripts/lorem";
 import {createVideo} from "../../components/video/VideoComponent";
 import {createEventsSection} from "../../sections/events/EventsComponent";
+import {createCardSlider} from "../../sections/card-slider/CardSliderComponent";
 
 export const createArticlePage =
   ({
@@ -40,6 +41,8 @@ export const createArticlePage =
     createElement('p', [], 'Beim Förderprogramm go-digital handelt es sich um eine. Das <a href="#">go-digital Förderprogramm</a> richtet sich an Unternehmen mit weniger als 100 Beschäftigten. Gefördert werden die Bereiche IT-Sicherheit, digitale Markterschließung und digitalisierte Geschäftsprozesse.', main);
     createElement('p', [], lorem1, main);
 
+    main.appendChild(createCardSlider({}));
+
     main.appendChild(createEventsSection({}));
     main.appendChild(createGallery({}));
     main.appendChild(createSteps({}));

gfi-ihk-2024/stories/sections/card-slider/CardSlider.stories.js

@@ -0,0 +1,22 @@
+import {createCardSlider} from "./CardSliderComponent";
+import {sliderData} from "./CardSliderData";
+
+
+export default {
+    title: 'Sections/Card Slider',
+    argTypes: {
+        slides: {
+            name: 'Slides',
+            control: {type: 'object'},
+            defaultValue: sliderData,
+        }
+    }
+}
+
+const Template = ({...args}) => {
+    return createCardSlider({...args});
+};
+
+
+export const CardSlider = Template.bind({});
+CardSlider.args = {};

gfi-ihk-2024/stories/sections/card-slider/CardSliderComponent.js

@@ -0,0 +1,28 @@
+import './card-slider.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {createCard} from "../../components/card/CardComponent";
+import $ from "jquery";
+import CardSlider from "./cardslider";
+import {sliderData} from "./CardSliderData";
+
+
+export const createCardSlider =
+    ({
+         slides = sliderData,
+         headline = 'Auch interessant',
+     }) => {
+        const cardSlider = createElement('section', ['card-slider'], null);
+        const cardSliderInner = createElement('div', ['card-slider-inner'], null, cardSlider);
+
+        createElement('div', ['like-h2'], headline, cardSliderInner);
+        const sliderComponent = createElement('div', ['card-slider-container'], null, cardSliderInner);
+
+        slides.map((slideData, index) => {
+            const card = createCard(slideData);
+            sliderComponent.appendChild(card);
+        })
+
+        new CardSlider($(cardSlider));
+
+        return cardSlider;
+    }

gfi-ihk-2024/stories/sections/card-slider/CardSliderData.js

@@ -0,0 +1,23 @@
+export const sliderData = [
+    {
+        image: './dummy/why-elect.jpg',
+        copyright: '@ shutterstock.com',
+        kicker: 'Energie-Monitoring',
+        headline: 'Gesetzliche Neuerungen im Bereich Windkraft',
+        link: 'http://www.ihk24.de',
+    },
+    {
+        image: './dummy/why-elect.jpg',
+        copyright: '@ shutterstock.com',
+        kicker: 'IHK Nord Westfalen',
+        headline: 'Gesetzliche Neuerungen im Bereich Windkraft',
+        link: 'http://www.ihk24.de',
+    },
+    {
+        image: './dummy/why-elect.jpg',
+        copyright: '@ shutterstock.com',
+        kicker: 'Praxis & Ratgeber',
+        headline: 'Jetzt Teil der IHK-Kampagne werden',
+        link: 'http://www.ihk24.de',
+    }
+]

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

@@ -0,0 +1,202 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.card-slider {
+  margin: var(--section-margin) 0 var(--section-margin) 0;
+  .magazine-article & {
+    margin-left: -30px;
+    margin-right: -30px;
+  }
+
+  &-inner {
+    background: var(--theme-color-primary-dimmed-04);
+    padding: 33px 30px 0 30px;
+    @media(max-width: 645px) {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  .like-h2 {
+    padding: 0 0 32px 0;
+    max-width: 870px;
+    margin: 0 auto;
+  }
+
+  .card-slider-container {
+    position: relative;
+    padding-bottom: 4rem;
+    max-width: 870px;
+    margin: 0 auto;
+    display: flex;
+    @media(max-width: 590px) {
+      display: block;
+    }
+    .card {
+      position: relative;
+      margin: 0 12px;
+      @media(max-width: 590px) {
+        margin: 12px 0;
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .slide-overflow {
+    overflow: hidden;
+    margin-left: -12px;
+
+    .slide-wrapper {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      width: 37400px;
+      contain: layout;
+      @media(max-width: 645px) {
+        width: 25400px;
+      }
+    }
+
+    .card {
+      &:first-child {
+        margin-left: 12px;
+      }
+      @media(max-width: 590px) {
+        margin: 0 12px;
+      }
+    }
+
+    .prev-clone,
+    .next-clone {
+      position: absolute;
+      display: flex;
+      width: 100%;
+    }
+
+    .prev-clone {
+      position: absolute;
+      right: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .controls {
+    .count {
+      display: none;
+    }
+
+    .slider-tabs, .tabs {
+      position: absolute;
+      bottom: 1.8rem;
+      left: 50%;
+      right: 0;
+      padding: 0;
+      list-style: none;
+      transform: translate(-50%, 0);
+      text-align: center;
+      font-size: 0;
+      line-height: 0;
+      margin: 0;
+      li {
+        display: inline-block;
+        vertical-align: top;
+
+        &.active button:before {
+          background-color: var(--theme-color-primary);
+          //box-shadow: 0 0 0 2px var(--theme-color-primary);
+        }
+      }
+
+      .btn {
+        --button-min-size: 24px;
+        font-size: 0;
+        line-height: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+          content: "";
+          position: relative;
+          display: block;
+          width: 15px;
+          height: 15px;
+          //border: 2px solid var(--theme-color-primary);
+          background-color: var(--theme-color-primary-dimmed-02);
+          border-radius: 15px;
+          transition: 0.2s ease;
+        }
+
+        &::after {
+          display: none;
+        }
+
+        &:hover {
+          background-color: transparent;
+
+          &::before {
+            background-color: var(--theme-color-primary);
+          }
+        }
+      }
+    }
+
+    button {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+
+      &.prev, &.next {
+        position: absolute;
+        top: -89px;
+        width: 60px;
+        height: 60px;
+        text-align: center;
+        line-height: 60px;
+        right: 0;
+        color: var(--theme-color-primary);
+        border-radius: 24px;
+        background: var(--theme-color-white);
+        --button-hover-shadow-opacity: 0.4;
+        --button-hover-shadow-size: 6px;
+        @media(max-width: 768px) {
+          display: none;
+        }
+
+        &:before {
+          @include icon-small-arrow-right-simple;
+          font-family: "Icons", sans-serif;
+          font-size: 30px;
+          content: "\e825";
+        }
+
+        &:after {
+          content: "";
+          position: absolute;
+          display: block;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-radius: var(--border-radius-lg);
+          box-shadow: 0 0 0 2px var(--theme-color-primary-dimmed-02);
+          opacity: 0;
+          transition: 0.3s ease;
+        }
+
+        &:hover:after {
+          opacity: 0.4;
+          box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-02);
+        }
+      }
+
+      &.prev {
+        right: 70px;
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/sections/card-slider/cardslider.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import 'jquery.easing';
+import Slider from "../slider/slider";
+
+class CardSlider {
+    constructor(section) {
+        this.section = section.addClass('initiated');
+        this.slides = section.children();
+        this. cardLength = section.find('.card-slider-container .card').length;
+        if (this.cardLength >= 3) {
+            this.slider = new Slider(section.find('.card-slider-container'));
+            this.stringLength = 0;
+        }
+    }
+}
+
+export default CardSlider;
+
+$('body').on('ihk-init dynamic-component-loaded gfi-dynamic-init', function () {
+    $('.card-slider:not(.initiated)').each(function() {
+        new CardSlider($(this));
+    });
+});

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

@@ -23,7 +23,7 @@
       left: 0 !important;
       transform: none !important;
     }
-}
+  }
 
   &.single-slide {
     .controls {
@@ -132,7 +132,7 @@
       background-color: transparent;
       padding: 0;
       cursor: pointer;
-      
+
     }
     .slider-tabs, .tabs {
       position: absolute;
@@ -189,7 +189,7 @@
         }
       }
     }
-    
+
     .prev, .next {
       position: absolute;
       top: -94px;
@@ -202,7 +202,7 @@
       right:auto;
       border-radius: 24px;
       background: var(--theme-color-primary-dimmed-04);
-      --button-hover-shadow-opacity: 0.4; 
+      --button-hover-shadow-opacity: 0.4;
       --button-hover-shadow-size: 6px ;
       @media(max-width: 1470px) {
         left:auto;
@@ -216,7 +216,7 @@
         top: -80px;
       }
       @media(max-width: 767px) {
-      
+
       }
       &:before {
         @include icon-small-arrow-right-simple;
@@ -241,7 +241,7 @@
         opacity: 0.4;
         box-shadow: 0 0 0 6px var(--theme-color-primary-dimmed-04);
       }
-      
+
     }
 
     .prev {

gfi-ihk-2024/storybook-static/components-card-Card-stories.35f43318.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_ihk24_storybook=self.webpackChunk_ihk24_storybook||[]).push([[1771],{"./stories/components/card/Card.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Card:()=>Card,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.error.cause.js"),__webpack_require__("./node_modules/core-js/modules/es.error.to-string.js");var _CardComponent__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./stories/components/card/CardComponent.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_extends.apply(this,arguments)}const __WEBPACK_DEFAULT_EXPORT__={title:"Components/Card",args:{}};var Card=function Template(_ref){var args=_extends({},(function _objectDestructuringEmpty(obj){if(null==obj)throw new TypeError("Cannot destructure "+obj)}(_ref),_ref));return(0,_CardComponent__WEBPACK_IMPORTED_MODULE_4__.L)(Object.assign({},args))}.bind({});Card.args={};var __namedExportsOrder=["Card"];Card.parameters={...Card.parameters,docs:{...Card.parameters?.docs,source:{originalSource:"({\n  ...args\n}) => {\n  return createCard({\n    ...args\n  });\n}",...Card.parameters?.docs?.source}}}}}]);

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.e7ab7c20.iframe.bundle.js';
+      import './runtime~main.fc16ca06.iframe.bundle.js';
       
       import './16.08016f04.iframe.bundle.js';
       
-      import './main.a126e9e5.iframe.bundle.js';</script></body></html>
+      import './main.81fe773d.iframe.bundle.js';</script></body></html>

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

@@ -1 +1 @@
-{"generatedAt":1747125588125,"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":1747662231609,"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"}}}