copyright in events

gfi-ihk-2024/stories/components/image-text/ImageTextComponent.js

@@ -13,11 +13,15 @@ export const createImageText =
      image = './dummy/why-elect.jpg',
      link = '#',
      linkname = 'Mehr erfahren',
+     copyright = 'Copyright'
   }) => {
     const div = createElement('div', ['image-text', colored, switched], null);
     const div2 = createElement('div', ['image-text--image'], null, div);
     const div3 = createElement('div', ['image-text--text'], null, div);
     createImage(image, 1280, 1280, '', [], div2);
+    const copy = createElement('span', ['copyright'], copyright, div2);
+    copy.setAttribute("aria-hidden", "true");
+    createElement('span', ['sr-only'], copyright, div2);
     if (smallheadline){
     createElement('h3', [], headline, div3);
     }

gfi-ihk-2024/stories/components/image-text/image-text.scss

@@ -83,6 +83,9 @@
       border-bottom-right-radius: 4px;
       border-bottom-left-radius: 4px;
     }
+    .copyright {
+      @include copyright;
+    }
   }
 
   h2 {

gfi-ihk-2024/stories/sections/eventoverview-stage/EventOverviewStageComponent.js

@@ -14,6 +14,7 @@ export const createEventOverviewStage = ({
   backgroundImage = null,
   kicker = 'Das Veranstaltungsportal der IHK Musterstadt',
   headline = 'Veranstaltungsportal',
+  copyright = 'Copyright',
   maxItems = 6,
   placeholder = 'Veranstaltungssuche, z.B. „Existenzgründung”',
   api = 'services/search/{SEARCHTERM}.json',
@@ -37,6 +38,9 @@ export const createEventOverviewStage = ({
       //section.content('style=background: red;');
       sectiondiv.style = 'background-image: url(' + backgroundImage + ');';
       sectiondiv.classList.add('background-image');
+        const copy = createElement('span', ['copyright'], copyright, sectiondiv);
+        copy.setAttribute("aria-hidden", "true");
+        createElement('span', ['sr-only'], copyright, sectiondiv);
     }
 
     /*if (isFirstElement) {

gfi-ihk-2024/stories/sections/eventoverview-stage/eventoverview-stage.scss

@@ -20,8 +20,20 @@
   margin: 0;
 
   &.background-image {
+    position: relative;
     background-size: cover;
     background-position: 50% 50%;
+    .copyright {
+      @include copyright;
+      @media(max-width: 629px) {
+        bottom: 240px;
+        left: calc(100% - 8px);
+      }
+      @media(min-width: 630px) and (max-width: 999px) {
+        bottom: 100px;
+        left: calc(100% - 8px);
+      }
+    }
   }
 
   &.first-element {

gfi-ihk-2024/stories/sections/participation-stage/ParticipationStage.stories.js

@@ -10,6 +10,7 @@ export default {
     kicker: 'Noch 7 Tage offen',
     headline: 'Jetzt und digital mitreden',
     copy: 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+    copyright: 'Copyright',
     moreCta: {
       label: 'Mehr Infos',
       link: '#',

gfi-ihk-2024/stories/sections/participation-stage/ParticipationStageComponent.js

@@ -8,6 +8,7 @@ export const createParticipationStage = ({
   kicker = 'Noch 7 Tage offen',
   headline = 'Jetzt und digital mitreden',
   copy = 'Mit der digitalen Beteiligung erhalten Mitgliedsunternehmen die Möglichkeit, sich einfach und schnell über laufende Verfahren und Abstimmungen zu informieren und sich aktiv daran zu beteiligen.',
+  copyright = 'Copyright',
   moreCta = {
     label: 'Mehr Infos',
     link: '#',
@@ -69,6 +70,9 @@ export const createParticipationStage = ({
     section.classList.add('image-stage');
     const ib = createElement('div', ['image-box'], null, col);
     createImage(imageSrc, 1080, 648, 'Beteiligung', [], ib);
+    const copy = createElement('span', ['copyright'], copyright, ib);
+    copy.setAttribute("aria-hidden", "true");
+    createElement('span', ['sr-only'], copyright, ib);
   }
 
   return section;

gfi-ihk-2024/stories/sections/participation-stage/participation-stage.scss

@@ -96,6 +96,9 @@
           opacity: 0;
         }
       }
+      .copyright {
+        @include copyright;
+      }
     }
 
     @media(max-width: 1200px) {