infobox überarbeitung

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 {