interview item

storybook/stories/atoms/interview-item/InterviewItem.stories.js

@@ -0,0 +1,23 @@
+import './interview-item.scss';
+import {createInterviewItem} from "./InterviewItemComponent";
+
+export default {
+    title: 'Atoms/Interview Item',
+    args: {
+        partnerClass: 'interviewer',
+        headline: 'Wirtschaftsmagazin',
+        text: 'Die explodierenden Energiekosten – gerade auch für Strom – sind existenzbedrohend für viele Unternehmen aus dem produzierenden Gewerbe. Wie kann die Landesregierung hier aktiv werden, um konkret zu helfen?'
+    },
+}
+
+const Template = ({...args}) => {
+    return createInterviewItem({...args});
+};
+
+export const InterviewItem = Template.bind({});
+InterviewItem.args = {};
+
+export const InterviewItemPartner = Template.bind({});
+InterviewItemPartner.args = {
+    partnerClass: 'partner',
+};

storybook/stories/atoms/interview-item/InterviewItemComponent.js

@@ -0,0 +1,21 @@
+import './interview-item.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createInterviewItem =
+    ({
+        partnerClass = 'interviewer',
+        headline = '',
+        text = '',
+    }) => {
+
+    const div = createElement('div', ['interview-item', partnerClass]);
+    if (headline) {
+        const headlineDiv = createElement('div', ['headline'], headline, div);
+    }
+    if (text) {
+        const textDiv = createElement('div', ['text'], null, div);
+        const textContent = createElement('p', [], text, textDiv);
+    }
+
+    return div;
+}

storybook/stories/atoms/interview-item/interview-item.scss

@@ -0,0 +1,25 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.interview-item {
+  margin: 40px 50px 20px 0;
+  padding: 20px 20px 2px 20px;
+  border: 2px solid var(--theme-color-primary);
+  border-radius: 20px 20px 20px 0;
+  font-weight: 600;
+  .headline {
+    padding-bottom: 10px;
+  }
+  .text {
+
+  }
+  &.partner {
+    margin: 0 0 20px 50px;
+    border-color: var(--theme-color-secondary);
+    border-radius: 20px 0 20px 20px;
+    .text {
+      font-weight: 400;
+    }
+  }
+
+}