interview

storybook/stories/pages/magazine-interview/MagazineInterview.stories.js

@@ -0,0 +1,15 @@
+import {createMagazineInterviewPage} from "./MagazineInterviewPage";
+
+export default {
+  title: 'Pages/Magazine Interview Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const Template = ({...args}) => {
+  return createMagazineInterviewPage({...args});
+};
+
+export const MagazineInterviewPage = Template.bind({});
+MagazineInterviewPage.args = {};

storybook/stories/pages/magazine-interview/MagazineInterviewPage.js

@@ -0,0 +1,35 @@
+import {createElement} from "../../_global/scripts/helpers";
+import {createHeader} from "../../components/header/HeaderComponent";
+import {createMagazineHeader} from "../../components/magazine-header/MagazineHeaderComponent";
+import {createPageDetails} from "../../components/page-details/PageDetailsComponent";
+import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createInterview} from "../../sections/interview/InterviewComponent";
+
+
+export const createMagazineInterviewPage = ({
+  kicker = 'Titelthema',
+  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
+}) => {
+  const page = createElement('div', ['page', 'magazine-article']);
+  const header = createHeader({});
+  const magazineHeader = createMagazineHeader({ size: 'narrow' });
+  page.appendChild(header);
+  page.appendChild(magazineHeader);
+
+  const wrapper = createElement('div', ['page-wrapper'], null, page);
+  wrapper.appendChild(createPageDetails({}));
+
+  const pageContent = createElement('main', ['page-content'], null, wrapper);
+  pageContent.appendChild(createMagazineCover({}));
+
+  const container = createElement('div', ['container'], null, pageContent);
+  const row = createElement('div', ['row'], null, container);
+
+  const interview = createInterview({});
+  row.appendChild(interview);
+
+  page.appendChild(createFooter({}));
+
+  return page;
+}