Common Content

gfi-ihk-2024/stories/components/common-content-article/CommonContentArticle.stories.js

@@ -0,0 +1,13 @@
+import {createCommonContentArticle} from "./CommonContentArticleComponent";
+
+export default {
+  title: 'Components/Common Content Article',
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createCommonContentArticle({...args});
+};
+
+export const CommonContentArticle = Template.bind({});
+CommonContentArticle.args = {};

gfi-ihk-2024/stories/components/common-content-article/CommonContentArticleComponent.js

@@ -0,0 +1,35 @@
+import './commonContent-article.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {lorem2} from "../../_global/scripts/lorem";
+import {createBlockquote} from "../../atoms/blockquote/BlockquoteComponent";
+import {createContact} from "../contact/ContactComponent";
+import {createPrintShare} from "../print-share/PrintShareComponent";
+import {createInfobox} from "../infobox/InfoboxComponent";
+import {createTopicTeasersSection} from "../../sections/topic-teasers/TopicTeasersComponent";
+import {createCommonContent} from "../common-content/CommonContentComponent";
+
+export const createCommonContentArticle = ({
+  addArticleComponents = true,
+  kicker = 'Titelthema',
+  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
+}) => {
+  const div = createElement('div');
+  const article = createElement('article', ['col', 'magazine-article'], null, div);
+
+  if (addArticleComponents) {
+    createElement('p', ['kicker'], kicker, article);
+    createElement('h1', [], headline, article);
+  }
+  article.appendChild(createCommonContent({}));
+
+  const wrapper = createElement('div', ['content'], null, div);
+  wrapper.appendChild(createTopicTeasersSection({maxItems: 6}));
+
+  const article2 = createElement('article', ['col', 'magazine-article'], null, div);
+  article2.appendChild(createInfobox({content: lorem2}));
+  article2.appendChild(createBlockquote({}));
+  article2.appendChild(createContact({}));
+  article2.appendChild(createPrintShare({}));
+
+  return div;
+}

gfi-ihk-2024/stories/components/common-content-article/commonContent-article.scss

@@ -0,0 +1,73 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.magazine-article article.col, .magazine-article.col {
+  position: relative;
+  z-index: 1;
+  width: 880px;
+  max-width: 66.6667%;
+  background-color: #fff;
+  margin: 0 auto;
+  padding-bottom: 0;
+
+  @media(max-width: 1199px) {
+    max-width: 83.3333%;
+  }
+  @media(max-width: 999px) {
+    box-shadow: 0 0 0 10px white;
+  }
+  @media(max-width: 767px) {
+    max-width: 100%;
+    box-shadow: 0 -4px 0 2px white;
+  }
+
+  .print-share {
+    margin-bottom: 0;
+  }
+
+  .print-share .bookmarks.show-bookmarks {
+    margin-bottom: 1em;
+  }
+
+  .image-box {
+    img {
+      max-width: 100%;
+    }
+
+    &.off-grid{
+      @media(min-width: 568px) {
+        float: left;
+        margin: 0.3em 20px 1em 0;
+        width: calc(50% - 10px);
+      }
+
+      @media(min-width: 768px) {
+        margin: 0.3em 40px 1em calc(-12.5% - 5px);
+        width: calc(50% - 20px);
+
+        @media(max-width: 1199px) {
+          margin: 0.3em 30px 1em calc(-10% - 3px);
+          width: calc(50% - 15px);
+        }
+
+        @media(max-width: 999px) {
+          margin: 0.3em 20px 1em calc(-10% - 2px);
+          width: calc(50% - 10px);
+        }
+      }
+
+      ~ *:not(p) {
+        clear: left;
+      }
+    }
+
+    &.portrait{
+      display: flex;
+      justify-content: center;
+      flex-flow: column;
+      img, figcaption{
+        align-self: center;
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/components/common-content/CommonContent.stories.js

@@ -0,0 +1,13 @@
+import {createCommonContent} from "./CommonContentComponent";
+
+export default {
+    title: 'Components/Common Content',
+    args: {},
+}
+
+const Template = ({...args}) => {
+    return createCommonContent({...args});
+};
+
+export const CommonContent = Template.bind({});
+CommonContent.args = {};

gfi-ihk-2024/stories/components/common-content/CommonContentComponent.js

@@ -0,0 +1,40 @@
+import './commonContent.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {createButton} from "../../atoms/button/ButtonComponent";
+
+export const createCommonContent = ({
+    text = "Möchten Sie, dass zusätzliche regionale Inhalte Ihrer IHK zum Thema auf dieser Seite eingeblendet werden?",
+    noCta = {
+        label: 'Nein danke',
+        link: '#',
+        target: '_self',
+    },
+    yesCta = {
+        label: 'Ja gerne',
+        link: '#',
+        target: '_self',
+    }
+}) => {
+    const common = createElement('div', ['common-content']);
+
+    const p = createElement('p', [], text, common);
+    const buttons = createElement('div', ['buttons'], null, common);
+    buttons.appendChild(createButton({
+        label: noCta.label,
+        link: noCta.link,
+        color: 'primary-light',
+        size: 'small',
+        icon: 'schliessen',
+        iconPosition: 'icon-right'
+    }));
+    buttons.appendChild(createButton({
+        label: yesCta.label,
+        link: yesCta.link,
+        color: 'secondary',
+        size: 'small',
+        icon: 'check',
+        iconPosition: 'icon-right'
+    }));
+
+    return common;
+}

gfi-ihk-2024/stories/components/common-content/commonContent.scss

@@ -0,0 +1,20 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.common-content {
+  margin-top: var(--section-margin);
+  padding: calc(var(--container-padding) / 2) var(--container-padding);
+  background: var(--theme-color-primary-dimmed-04);
+  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23B0C4D6' stroke-width='4' stroke-dasharray='0%2c 7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+  p {
+
+  }
+  .buttons {
+    .btn {
+      margin-right: 1rem;
+      @media (max-width: 567px) {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}

gfi-ihk-2024/stories/components/header/HeaderComponent.js

@@ -8,6 +8,7 @@ import {createHeaderSearch} from "../header-search/HeaderSearchComponent";
 
 export const createHeader =
   ({
+    isZip = false,
     contactPhone,
     contactMail,
     contactLink = '#',
@@ -51,7 +52,7 @@ export const createHeader =
 
     createElement('button', ['toggle-nav'], '<span>Menü</span>', header);
     header.appendChild(createNav({}));
-    header.appendChild(createIhkSwitch({}));
+    header.appendChild(createIhkSwitch({zip: isZip}));
 
     new IHKHeader($(header));
 

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitch.stories.js

@@ -7,7 +7,7 @@ export default {
   },
   args: {
     currentIHK: 'Musterstadt',
-    myIHK: 'Hamburg',
+    myIHK: 'Hamburg'
   }
 }
 
@@ -16,4 +16,9 @@ const Template = ({...args}) => {
 };
 
 export const IHKSwitch = Template.bind({});
-IHKSwitch.args = {};
+IHKSwitch.args = {};
+
+export const IHKSwitchZip = Template.bind({});
+IHKSwitchZip.args = {
+  zip: true
+};

gfi-ihk-2024/stories/components/ihk-switch/IHKSwitchComponent.js

@@ -3,35 +3,63 @@ import $ from 'jquery';
 import {createElement} from "../../_global/scripts/helpers";
 import IHKSwitch from "./ihk-switch";
 import {createButton} from "../../atoms/button/ButtonComponent";
+import {createInputText} from "../../atoms/input-text/InputTextComponent";
+import {createSearchButton} from "../../atoms/search-button/SearchButtonComponent";
 const Cookies = require('js-cookie');
 
 export const createIhkSwitch = ({
   currentIHK = 'Musterstadt',
   myIHK = 'Hamburg',
+  zip = false,
+  zipPlaceholder = 'z.B. 20146 Hamburg'
 }) => {
   const wrap = createElement('div', ['ihk-switch']);
   const step1 = createElement('div', ['step'], null, wrap);
-  const step2 = createElement('div', ['step'], null, wrap);
-  const step3 = createElement('div', ['step'], null, wrap);
-  const p1 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?';
-  const p2 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Bisher ist die <strong><span class="my-ihk">' + myIHK + '</span></strong> als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong> in einem Cookie als Ihre neue Heimat-IHK setzen?';
-  const p3 = 'Sie werden zum Angebot der <strong class="large my-ihk">' + myIHK + '</strong> weitergeleitet.';
 
-  createElement('button', ['closer'], null, wrap);
+  if (!zip) {
+    const step2 = createElement('div', ['step'], null, wrap);
+    const step3 = createElement('div', ['step'], null, wrap);
+    const p1 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Möchten Sie diese Seite in einem Cookie als Ihre Heimat-IHK setzen?';
+    const p2 = 'Sie befinden sich auf der Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong>. Bisher ist die <strong><span class="my-ihk">' + myIHK + '</span></strong> als Ihre Heimat-IHK hinterlegt. Wollen Sie die Seite der <strong class="current-ihk" data-ihknr="118">' + currentIHK + '</strong> in einem Cookie als Ihre neue Heimat-IHK setzen?';
+    const p3 = 'Sie werden zum Angebot der <strong class="large my-ihk">' + myIHK + '</strong> weitergeleitet.';
 
-  step1.dataset.step = 'form';
-  createElement('p', [], p1, step1);
-  step1.appendChild(buildButtons());
+    createElement('button', ['closer'], null, wrap);
 
-  step2.dataset.step = 'switch';
-  createElement('p', [], p2, step2);
-  step2.appendChild(buildButtons());
+    step1.dataset.step = 'form';
+    createElement('p', [], p1, step1);
+    step1.appendChild(buildButtons());
 
-  step3.dataset.step = 'success';
-  createElement('p', [], p3, step3);
+    step2.dataset.step = 'switch';
+    createElement('p', [], p2, step2);
+    step2.appendChild(buildButtons());
 
-  window.sessionStorage.removeItem('my-ihk-ignore');
-  Cookies.remove('my-ihk', {expires: 365});
+    step3.dataset.step = 'success';
+    createElement('p', [], p3, step3);
+
+    window.sessionStorage.removeItem('my-ihk-ignore');
+    Cookies.remove('my-ihk', {expires: 365});
+  } else {
+    const p1 = 'Geben Sie Ihre Postleitzahl ein, um zu dem Angebot Ihrer IHK zu gelangen:';
+
+    createElement('button', ['closer'], null, wrap);
+
+    step1.dataset.step = 'zip';
+    createElement('p', [], p1, step1);
+    const inputWrapper = createElement('div', ['input-wrapper'], null, step1);
+    inputWrapper.appendChild(createInputText({
+      placeholder: zipPlaceholder,
+      isRequired: true,
+      id: 'switch-zip',
+      name: 'switch-zip',
+    }));
+    inputWrapper.appendChild(createButton({
+      label: '',
+      link: '#',
+      iconPosition: 'icon-inline',
+      icon: 'lokalisierung',
+    }));
+    step1.appendChild(buildOKButton());
+  }
 
   $(document).ready(() => {
     new IHKSwitch($(wrap));
@@ -62,3 +90,20 @@ const buildButtons = () => {
   return buttons;
 }
 
+const buildOKButton = () => {
+  const buttons = createElement('div', ['buttons', 'align-right']);
+  const ok = createButton({
+    elementType: 'button',
+    label: 'OK',
+    color: 'secondary',
+    icon: 'check',
+    iconPosition: 'icon-right'
+  })
+
+  ok.classList.add('stay-here');
+
+  buttons.appendChild(ok);
+
+  return buttons;
+}
+

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

@@ -68,7 +68,8 @@
   &[data-show-step="geolocation"] [data-step="geolocation"],
   &[data-show-step="form"] [data-step="form"],
   &[data-show-step="switch"] [data-step="switch"],
-  &[data-show-step="success"] [data-step="success"] {
+  &[data-show-step="success"] [data-step="success"],
+  [data-step="zip"] {
     display: block;
   }
 
@@ -112,10 +113,34 @@
     }
   }
 
+  .input-wrapper {
+    position: relative;
+    .btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      padding: 0;
+      border-radius: 0;
+      background: #193f69;
+      * {
+        display: none;
+      }
+      &:hover:after {
+        display: none;
+      }
+    }
+  }
+
   .buttons {
     margin-top: 28px;
     margin-left: -2px;
     margin-right: -8px;
+    &.align-right {
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 0;
+    }
 
     @media(max-width: 767px) {
       margin-top: 20px;

gfi-ihk-2024/stories/pages/common-content/CommonContent.stories.js

@@ -0,0 +1,18 @@
+import {createCommonContentPage} from "./CommonContentPage";
+
+export default {
+  title: 'Pages/Common Content Page',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+
+  },
+}
+
+const Template = ({...args}) => {
+  return createCommonContentPage({...args});
+};
+
+export const CommonContentPage = Template.bind({});
+CommonContentPage.args = {};

gfi-ihk-2024/stories/pages/common-content/CommonContentPage.js

@@ -0,0 +1,36 @@
+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 {createTeasersSection} from "../../sections/teasers/TeasersComponent";
+import {createFooter} from "../../components/footer/FooterComponent";
+import {createCommonContentArticle} from "../../components/common-content-article/CommonContentArticleComponent";
+
+export const createCommonContentPage = ({
+  kicker = 'Titelthema',
+  headline = '5 Beispiele, wie sich Unternehmen für ihr Umfeld engagieren',
+}) => {
+  const page = createElement('div', ['page', 'magazine-article']);
+  const header = createHeader({isZip: true});
+  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 article = createCommonContentArticle({});
+  row.appendChild(article);
+
+  pageContent.appendChild(createTeasersSection({type: 'magazine', showReadingTime: true, headline: 'Mehr interessante Artikel'}))
+
+  page.appendChild(createFooter({}));
+
+  return page;
+}