teaser

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

@@ -19,7 +19,7 @@ export default {
     type: {
       name: 'Teaser-Typ',
       control: 'select',
-      options: ['regular', 'hero', 'text', 'fullwidth', 'chart'],
+      options: ['regular', 'hero', 'text', 'fullwidth', 'chart', 'picto', 'pictoHero'],
     },
     link: {
       name: 'Link',
@@ -83,6 +83,32 @@ ChartTeaser.args = {
   imageSrc: null,
 };
 
+export const PictoTeaser = Template.bind({});
+PictoTeaser.args = {
+  type: 'picto',
+  picto: 'pictogram-bueroklammer',
+};
+
+export const PictoTeaserWithText = Template.bind({});
+PictoTeaserWithText.args = {
+  type: 'picto',
+  picto: 'pictogram-bueroklammer',
+  pictoText: true
+};
+
+export const PictoHeroTeaser = Template.bind({});
+PictoHeroTeaser.args = {
+  type: 'pictoHero',
+  picto: 'pictogram-bueroklammer',
+};
+
+export const PictoHeroTeaserWithText = Template.bind({});
+PictoHeroTeaserWithText.args = {
+  type: 'pictoHero',
+  picto: 'pictogram-bueroklammer',
+  pictoText: true
+};
+
 export const ExternalTeaser = Template.bind({});
 ExternalTeaser.args = {
   linkType: 'extern',

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

@@ -13,6 +13,8 @@ export const createTeaser = ({
   showReadingTime = false,
   imageSize = 'large',
   chartTitle = 'Chart-Titel des Teasers',
+  picto = null,
+  pictoText = false,
   linkType = null,
 }) => {
   const teaser = createElement('a', ['teaser', type]);
@@ -26,7 +28,7 @@ export const createTeaser = ({
     createElement('span', ['kicker'], kicker, teaser);
   }
 
-  if (imageSrc && imageSrc.length > 0 && type !== 'text' && type !== 'chart') {
+  if (imageSrc && imageSrc.length > 0 && type !== 'text' && type !== 'chart' && type !== 'picto' && type !== 'pictoHero') {
     let imageWidth, imageHeight;
     switch (type) {
       case 'hero':
@@ -65,6 +67,16 @@ export const createTeaser = ({
     createElement('span', ['chart-title'], chartTitle, imageBox);
   }
 
+  else if (type === 'picto' || type === 'pictoHero') {
+    const imageBox = createElement('div', ['image-box', 'chart'], null, teaser);
+    const pictoBox = createElement('div', ['picto-box', ...(type === 'pictoHero' ? ['hero'] : [])], null, imageBox);
+    const iconBox = createElement('div', ['icon'], null, pictoBox);
+    iconBox.classList.add(picto);
+    if (pictoText) {
+      createElement('span', ['picto-title'], chartTitle, pictoBox);
+    }
+  }
+
   const textBox = createElement('div', ['text-box'], '', teaser);
   createElement('h4', ['title'], headline, textBox);
   createElement('p', [], copy, textBox);

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

@@ -93,10 +93,75 @@
     bottom: 8px;
   }
 
+  .picto-box {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    .icon {
+      width: 90px;
+      height: 90px;
+      overflow: hidden;
+      position: relative;
+      margin: 0 auto;
+      @media(min-width: 568px) {
+        width: 100px;
+        height: 100px;
+      }
+      &:before {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        font-family: "Pictograms", sans-serif;
+        color: var(--theme-color-white);
+        font-size: 90px;
+        line-height: 1;
+        @media(min-width: 568px) {
+          font-size: 100px;
+        }
+      }
+    }
+    .picto-title {
+      @include h3;
+      margin: 10px 0 0 0;
+      width: calc(100vw - 80px);
+      overflow: hidden;
+      height: 38px;
+      display: block;
+      font-weight: 400 !important;
+      color: var(--theme-color-background) !important;
+      text-decoration-color: transparent !important;
+      text-align: center;
+
+      @media(max-width: 999px) {
+        font-size: 28px;
+        height: 32px;
+      }
+    }
+  }
+
+  &.pictoHero {
+    .picto-box {
+      margin-top: -20px;
+      .icon {
+        @media(min-width: 568px) {
+          width: 150px;
+          height: 150px;
+        }
+        &:before {
+          @media(min-width: 568px) {
+            font-size: 150px;
+          }
+        }
+      }
+    }
+  }
+
   .chart-title {
     @include h3;
     display: block;
-    font-weight: 700 !important;
+    font-weight: 500 !important;
     padding: 30px;
     margin: 0 0 0.4em;
     color: var(--theme-color-background) !important;
@@ -156,7 +221,7 @@
   }
 }
 
-[date-type='hero'], .teaser.hero {
+[date-type='hero'], .teaser.hero, .teaser.pictoHero {
   .image-box ~ .text-box {
     padding-top: 0.9em;