Init MiniTeaser

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js

@@ -0,0 +1,41 @@
+import {createMiniTeaser} from "./MiniTeaserComponent";
+
+export default {
+  title: 'Components/Mini Teaser',
+  parameters: {
+    backgrounds: {
+      default: 'lightblue',
+    },
+  },
+  argTypes: {
+    type: {
+      name: 'Typ',
+      control: {type: 'select'},
+      options: ['single-topic'],
+      defaultValue: 'single-topic',
+    },
+    title: {
+      name: 'Titel',
+      control: 'text',
+      defaultValue: 'Schwerpunktthema Digitalisierung',
+    },
+    link: {
+      name: 'Link',
+      control: 'text',
+      defaultValue: '#',
+    },
+    icon: {
+      name: 'Icon',
+      control: {type: 'select'},
+      options: ['Roboter', 'Anker', 'Blitz', 'Buch Brille', 'Brexit', 'Chart', 'Rettungsring', 'Magazin'],
+      defaultValue: 'Roboter',
+    }
+  }
+}
+
+const MiniTeaser = ({...args}) => {
+  return createMiniTeaser({...args});
+}
+
+export const SingleMiniTeaser = MiniTeaser.bind({});
+SingleMiniTeaser.args = {};

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -0,0 +1,18 @@
+import './miniteaser.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createMiniTeaser = ({
+  type = 'single-topic',
+  title = 'Hallo Welt',
+  link = '#',
+  icon = 'Eule Doktorhut',
+}) => {
+  const tile = createElement(type === 'single-topic' ? 'a' : 'div', ['tile', 'topic-teaser', 'mini-teaser', type], null);
+  tile.href = link;
+  createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile);
+  const textBox = createElement('div', ['text-box'], null, tile);
+  createElement('h4', ['title'], title, textBox);
+
+
+  return tile;
+}

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

@@ -0,0 +1,113 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.topic-teaser, .topics .tile {
+  --topic-tile-padding: 24px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  overflow: hidden;
+  width: 100%;
+  //max-width: 420px;
+  border-radius: var(--border-radius-lg);
+  padding: var(--topic-tile-padding);
+  transition: 0.25s ease;
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+
+  @media(max-width: 999px) {
+    --topic-tile-padding: 14px;
+  }
+
+  @media(max-width: 767px) {
+    font-size: 16px;
+    min-height: 84px;
+    border-radius: 8px;
+  }
+
+  .icon-box {
+    font-family: 'Pictograms', sans-serif;
+    font-size: 72px;
+    line-height: 1;
+    color: var(--theme-color-secondary);
+    margin-top: 6px;
+
+    @media(max-width: 567px) {
+      font-size: 50px;
+      margin-top: 0;
+    }
+  }
+}
+
+.col {
+  .topic-teaser, .topics .tile {
+    max-width: none;
+  }
+}
+
+a.topic-teaser, .topics:not([data-type="list"]) a.tile {
+  @include focus-visible();
+
+  &:before {
+    content: "";
+    position: absolute;
+    display: block;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--border-width);
+    background-color: var(--theme-color-secondary);
+    transition: 0.2s ease;
+  }
+
+  &:hover:before {
+    height: var(--border-width-hover);
+  }
+
+  .title {
+    text-decoration: underline;
+    margin: 12px 0;
+
+    @media(max-width: 999px) {
+      margin: 8px 0;
+    }
+    @media(max-width: 567px) {
+      margin: 4px 0;
+    }
+  }
+
+  .text-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+  }
+}
+
+div.topic-teaser, .topics[data-type="list"] .tile {
+  padding: 0 var(--topic-tile-padding) 0.5em;
+
+  .icon-box {
+    background-color: var(--theme-color-primary);
+    color: var(--theme-color-background);
+    margin: 0 calc(var(--topic-tile-padding) * -1);
+    padding: 10px 0;
+    font-size: 60px;
+
+    @media(max-width: 767px) {
+      font-size: 46px;
+    }
+  }
+
+  .text-box {
+    display: block;
+    text-align: left;
+  }
+
+  .title {
+    text-decoration: none;
+    margin: 0.8em 0;
+  }
+}