hr-design-system-handlebars 1.63.15 → 1.64.1

package/src/stories/views/components/externalService/external_service.hbs

@@ -1,5 +1,5 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
-    
+    <!-- Embedding via JS with DataPolicyCheck-->  
     {{> components/externalService/external_service_with_datapolicy_check }}
 
 {{else}}
@@ -8,26 +8,19 @@
         <div class="clear-both mt-10">
             <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
             {{#if this.externalServiceConfig.embedAsIFrame}}              
-                    
+                <!-- Embedding via Iframe -->    
                 <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
                     {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
-                        <iframe frameborder="0" width="100%" height="100%"
-                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
-                                allowfullscreen scrolling='no'>
-                        </iframe>
+                        <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
                     {{#unless this.fixedHeight}}</div>{{/unless}}                        
                 </div>
-            
             {{else}}
-            
+                <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
-                </div>
-                
-            {{/if}}
-                
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                </div>  
+            {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}
-            
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/src/stories/views/components/externalService/external_service.mdx

@@ -26,21 +26,4 @@ Die interaktiven Elemente sind:
 
 
 ## Beispiel Dienst Giphy
-<Story of={ExternalServiceStories.ExterneDiensteGiphy} />
-
-## Beispiel Dienst Datawrapper mit responsivem Iframe
-Der Datawrapper wird standardmässig mit einem responsiven Iframe geladen, d.h. das der Inhalt des Iframes - die Datengrafik - an den äußeren Container skaliert wird.
-
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapper} />
-
-## Beispiel Dienst Datawrapper ohne responsives Iframe und fester Höhe
-Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld FixedHeight befüllt, wird der Wert daraus übernommen
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveFixedHeight} />
-
-## Beispiel Dienst Datawrapper ohne responsives Iframe und AspectRatio
-Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld AspectRatio ausgewählt wird der Wert daraus übernommen
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveAspectRatio} />
-
-
-## Beispiel Dienst Datawrapper mit ContentRefresher
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperContentRefresher} />
+<Story of={ExternalServiceStories.ExterneDiensteGiphy} />

package/src/stories/views/components/externalService/external_service.stories.js

@@ -28,6 +28,11 @@ export const ExterneDiensteGiphy = {
     name: 'Externe Dienste Giphy',
     args: ExternalServiceContent.Giphy, 
 }
+export const ExterneDiensteFlourish = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Flourish',
+    args: ExternalServiceContent.Flourish, 
+}
 export const ExterneDiensteDatawrapper = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',

package/src/stories/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,9 +1,8 @@
 <div class="grid clear-both mt-10">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":""{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json

@@ -26,7 +26,37 @@
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
     },      
-    "Datawrapper_CDN": {
+    "Datawrapper_CDN_NoResponsiveFixedHeightReload": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "700",
+        "aspectRatio": "",
+        "setResponsiveIframe": true,
+        "setTimedReloadIframe": true,
+        "setTimeForReload": "300"
+    },
+    "Datawrapper_CDN_NoResponsiveFixedHeight": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "700",
+        "aspectRatio": "",
+        "setResponsiveIframe": true,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Datawrapper_CDN_NoResponsiveAspectRatio": {
         "externalServiceConfig": {
             "makeConfigurable": true,
             "embedAsIFrame": false,
@@ -35,11 +65,27 @@
             "externalServiceName": "Datawrapper (Datengrafik)"
         },
         "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
-        "fixedHeight": "380",
+        "fixedHeight": "",
+        "aspectRatio": "4x3",
         "setResponsiveIframe": true,
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
     },
+    "Datawrapper_CDN": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
     "Esri": {
         "externalServiceConfig": {
             "makeConfigurable": true,

package/src/stories/views/components/geoTag/geoTag_list.hbs

@@ -5,7 +5,7 @@
         <ul class="flex flex-wrap gap-x-4 w-fit sm:w-full sm:pt-2 ">
             {{~#each this~}}
                 <li class="w-fit sm:w-full text-primary dark:text-standard-text-dark">
-                    <a class="block hover:underline gap-x-1" href="{{this.url}}">
+                    <a class="{{if (isUserConsentNeeded this.url) 'js-user-consent-needed ' ''}}block hover:underline gap-x-1" href="{{this.url}}">
                         {{~> components/base/image/icon _icon="ortsmarke" _addClass="inline w-5 h-5 mr-2 fill-current"~}}
 
                         {{~this.title~}}

package/src/stories/views/components/mediaplayer/media_player.hbs

@@ -8,7 +8,7 @@
             {{/with~}}
         {{/unless}}
         {{#with _teaser}}
-            {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1">{{/if}}
+            {{#if this.isTickerTeaser}}<a href="{{this.link.url}}" aria-label="Zum Ticker" tabindex="-1"{{#if (isUserConsentNeeded this.link.url)}} class="js-user-consent-needed"{{/if}}>{{/if}}
                 {{~> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.content.imageVariant this.content.imageVariant '100-copytext') _addClassImg=(appendToDefault _addClassImg-adjust_context "ar__content") _noDelay=this.dontLazyload ~}}                             
             {{#if this.isTickerTeaser}}</a>{{/if}}
         {{/with}}

package/src/stories/views/components/modal/defaultModal.subfeature.js

@@ -0,0 +1,58 @@
+import { hr$, listen, unlisten, addLink } from 'hrQuery'
+import dialogPolyfill from 'dialog-polyfill'
+
+const DefaultModal = function (options, rootElement) {
+    const dialogPolyfillBaseUrl = options.dialogPolyfillBaseUrl || 'vendor/dialog-polyfill',
+        modalTrigger = options.trigger || null,
+        triggerRoot = document.body,
+        modal = hr$('.js-modal', rootElement)[0],
+        closeButtonTrigger = ".js-modal-close"
+
+    const configureEventListeners = () => {
+        listen('click', handleClick, triggerRoot)
+    }
+
+    const handleClick = (event) => {
+        if (null !== modalTrigger) {
+            let triggerNode = event.target.closest(modalTrigger)
+            let nodeToCloseModal = event.target.closest(closeButtonTrigger)
+            if (null !== triggerNode) {
+                event.preventDefault()
+                show()
+            } else if (null !== nodeToCloseModal) {
+                close()
+            }
+        }
+    }
+
+    const configurePolyfillIfNeeded = () => {
+        if (undefined == modal.showModal) {
+            addLink('dialog-polyfill-css', `${dialogPolyfillBaseUrl}/dialog-polyfill.css`, {
+                type: 'text/css',
+                rel: 'stylesheet',
+            })
+        }
+        dialogPolyfill.registerDialog(modal)
+    }
+
+    const show = () => {
+        modal.showModal()
+        listen('click', closeFromOutside, modal)
+    }
+
+    const closeFromOutside = (event) => {
+        if (event.target === modal) {
+            unlisten('click', closeFromOutside, modal)
+            close()
+        }
+    }
+
+    const close = () => {
+        modal.close()
+    }
+
+    configurePolyfillIfNeeded()
+    configureEventListeners()
+}
+
+export default DefaultModal

package/src/stories/views/components/modal/modal.feature.js

@@ -1,60 +1,19 @@
-import { hr$, listen, unlisten, addLink } from 'hrQuery'
-import { uxAction } from 'base/tracking/pianoHelper.subfeature'
-import dialogPolyfill from 'dialog-polyfill'
+import DefaultModal from 'components/modal/defaultModal.subfeature'
+import UserConsentModal from 'components/modal/userConsentModal.subfeature'
 
 const Modal = (context) => {
     const { options } = context,
         { element: rootElement } = context,
-        dialogPolyfillBaseUrl = options.dialogPolyfillBaseUrl || 'vendor/dialog-polyfill',
-        modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
-        modalTrigger = hr$(modalTriggerId)[0],
-        modalCloseTriggers = hr$('.js-modal-close', rootElement),
-        modal = hr$('.js-modal', rootElement)[0],
-        ticketShopButton = hr$('.js-ticket-ok-button', rootElement)[0],
-        trackingInformations = options.trackingInformations
-
-    const configureEventListeners = () => {
-        listen('click', clickTracking, ticketShopButton)
-        listen('click', show, modalTrigger)
-
-        modalCloseTriggers.forEach((modalCloseTrigger) => {
-            listen('click', close, modalCloseTrigger)
-        })
-    }
-
-    const configurePolyfillIfNeeded = () => {
-        if (undefined == modal.showModal) {
-            addLink('dialog-polyfill-css', `${dialogPolyfillBaseUrl}/dialog-polyfill.css`, {
-                type: 'text/css',
-                rel: 'stylesheet',
-            })
-        }
-        dialogPolyfill.registerDialog(modal)
+        type = options.type || "default"
+
+    switch (type) {
+        case "userConsent":
+            new UserConsentModal(options, rootElement)
+            break;
+        default:
+            new DefaultModal(options, rootElement)
+            break;
     }
-
-    const clickTracking = () => {
-        console.log('tracking')
-        uxAction(trackingInformations)
-    }
-
-    const show = () => {
-        modal.showModal()
-        listen('click', closeFromOutside, modal)
-    }
-
-    const closeFromOutside = (event) => {
-        if (event.target === modal) {
-            unlisten('click', closeFromOutside, modal)
-            close()
-        }
-    }
-
-    const close = () => {
-        modal.close()
-    }
-
-    configurePolyfillIfNeeded()
-    configureEventListeners()
 }
 
 export default Modal

package/src/stories/views/components/modal/modal.hbs

@@ -1,4 +1,4 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": {{this.link.cmsDocument.trackingInformations.ticketLink}},"dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+<div class="js-load" data-hr-modal='{"trigger":"{{if _trigger _trigger ""}}", "type":"{{defaultIfEmpty _type 'default'}}", "dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
     <dialog class='js-modal p-0 backdrop:bg-gray-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}

package/src/stories/views/components/modal/modal.mdx

@@ -0,0 +1,104 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as ModalStories from './modal.stories'
+
+<Meta of={ModalStories} />
+
+
+# Modal
+
+-   [Übersicht](#übersicht)
+-   [Eigenschaften](#eigenschaften)
+-   [Varianten](#varianten)
+-   [Verwendung](#verwendung)
+
+## Übersicht
+
+Die Modal Komponente erlaubt es frei wählbare Inhalte in einem Modal anzuzeigen. Geöffnet werden kann ein Modal durch klicken auf einen
+mit einer bestimmten CSS Klasse ausgezeichneten Link oder Button. Zur Anzeige des Modal wird das native [HTML Dialog Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de) verwendet. 
+Standardmäßig kann dieses durch Drücken der `ESC` Taste geschlossen werden.
+Damit auch ältere Browser, die das Dialog Element noch nicht unterstützen, das Modal anzeigen können, wird ein Polyfill eingebunden.
+
+<Canvas>
+    <Story of={ModalStories.defaultModal} />
+</Canvas>
+
+## Eigenschaften
+
+<ArgsTable story="Default Modal" />
+
+## Varianten
+
+Das Modal existiert derzeit in zwei Varianten. Die zu nutzende Variante wird beim Einbinden der Modal Komponente 
+über den Parameter `_variant` konfiguriert. 
+
+<Canvas>
+  <Story of={ModalStories.defaultModal} />
+</Canvas>
+
+und `userConsent`
+<Canvas>
+<Story of={ModalStories.userConsentModal} />
+</Canvas>
+
+## Verwendung
+
+Die Modal Komponente wird mit der Handlebar Komponente `components/modal/modal` eingebunden.
+Die Komponente ist so konzipiert, dass sie im optimalen Fall nur einmal auf einer Seite eingebunden werden muss (am besten in der Nähe des Footers).
+Jeder Link oder jeder Button auf einer Seite kann so konfiguriert werden, dass er das Modal öffnet. Mit welcher CSS Hook Klasse das Modal
+geöffnet werden soll, wird bei der Einbindung der Komponente mit dem Parameter `_trigger` konfiguriert. Jeder Button oder jeder Link auf der Seite
+in der die Komponente eingebunden ist und die im Modal konfigurierte CSS Hook Klasse besitzt, öffnet bei Klick das Modal.
+
+Die Modal Komponente ist eine Block Komponente. Auf diese Weise ist es möglich ein Modal mit beliebigem Inhalt anzulegen. 
+
+### Default
+
+Die Einbindung eines Default Modals erfolgt wie anhand folgenden Beispiels zu sehen.
+
+```handlebars
+    {{#> components/modal/modal _variant="default" _trigger="js-modal"}}
+        {{#> components/teaser/components/teaser_headline}}
+            {{> components/teaser/components/teaser_title _text="Überschrift Default Modal" _css="text-2xl"}}
+        {{/components/teaser/components/teaser_headline}}
+        <p class="mt-2 text-base font-copy">Hier steht der Text des Modals. Dies ist nur ein Beispiel. Das modal Template stellt nur den Rahmen 
+        des Modals zur Verfügung. In dem Modal kann dargestellt werden was man möchte.</p>
+    {{/components/modal/modal}}
+```
+
+Innerhalb des Modals kann beliebiges Markup und/oder beliebige andere Komponenten angezeigt werden. Die hier konfigurierte Trigger Klasse
+`js-modal` ist lediglich ein Beispiel. Sie sollte jedoch, um sich klar von normalen CSS-Klassen zu unterscheiden das Prefix `js-` tragen. 
+Ein mit der Variante `default` erzeugtes Modal besitzt nur die Grundfunktionalität eines Modals. Sie erlaubt das Modal durch Klick auf ein mit der 
+Trigger Klasse ausgezeichneten Link oder Button zu öffnen. Weiterhin kann das geöffnete Modal durch Drücken der `ESC` Taste, durch Klicken in den 
+ausgegrauten Bereich außerhalb des Modals oder durch Klicken auf einen Button, dessen `value` Parameter den Wert `cancel` trägt, geschlossen werden.
+Da als Basis der Modal Komponente das native HTML Dialog Element genutzt wird, ist sie auch bereits standarmäßig weitgehend barrierfrei. Ein Focus Trap,
+das heißt sofern ich das Modal nicht explizit schließe bleibe ich bei Drücken der `Tab` Taste ausschließlich innerhalb des Modals, steht standardmäßig zur 
+Verfügung. 
+
+### User Consent
+Dieses Variante wurde speziell für den Anwendungsfall einer Zweiklicklösung erstellt. Sie ermöglicht es, dass bei Klick auf einen Link 
+der Nutzer in einem Modal darauf hingewiesen wird, dass er nun das HR Internetangebot verlässt und er erst bei einer aktiven Bestätigung
+mit Hilfe eines weiteren Klicks den eigentlichen Link aufrufen kann. Die Variante kann, wie im Folgenen gezeigt, eingebunden werden.
+
+
+```handlebars
+    {{#> components/modal/modal _variant="userConsent" _trigger="js-user-consent-needed"}}
+        {{> components/modal/user_consent _headline=(loca "modal_user_consent_headline") _text=(loca "modal_user_consent_text") _labelOk=(loca "modal_user_consent_label_ok") _labelCancel=(loca "modal_user_consent_label_cancel")}}
+    {{/components/modal/modal}}
+```
+
+Für den Inhalt des Modals wurde eine eigene Komponente `components/modal/user_consent` erstellt. Sie erzeugt eine Überschrift, einen erläuternden Text sowie
+einen Abbrechen- und einen Ok-Button. Die konkreten Texte können der Komponente entweder über die Parameter `_headline`, `_text`, `_labelOk` und `_labelCancel`
+direkt beim Aufruf übergeben werden oder werden, wenn beim Aufruf keine Parameter übergeben werden, aus den Locatags `modal_user_consent_headline`, `modal_user_consent_text`,
+`modal_user_consent_label_ok` und `modal_user_consent_label_cancel` gezogen.
+Für die speziellen Funktionen dieser Variante wurde ein separates Javascript Subfeature erzeugt. Dies sorgt dafür, dass der Variante neben allen
+Eigenschaften der `default` Variante, auch noch speziell für die Zweiklick Lösung benötigte Funktionalitäten zur Verfügung stehen.
+Ist das das Modal aufrufende Element ein Link, werden aus diesem die Werte des `href`, des `target` und des `rel` Attributes ausgelesen und damit
+der Link des `OK`-Buttons erzeugt. Ist das aufrufende Element ein Button (z.B. beim [Event-Ticket-Button](?path=/story/komponenten-teaser-eventkalender--teaser-100)), 
+müssen diese Information in dem `data-user-consent-link`-Attribut des Buttons als JSON in der Form 
+`{"url":"https://www.beispiel.de","isTargetBlank":true/false}` hinterlegt werden. Wird hier bei `isTargetBlank` der Wert `true` übergeben, erhält der 
+im Modal erzeugte Link des OK-Buttons automatisch das attribut `rel="noopener"` gesetzt. 
+
+### Neue Varianten
+Wird ein Modal mit einer komplett neuen Funktionalität benötigt, muss eine neue Variante erstellt und der Komponente hinzugefügt werden. Hierzu muss 
+ein Name für die neue Variante gewählt und die `switch`-Anweisung in `components/modal/modal.feature.js` um einen neuen Fall mit diesem
+Namen erweitert werden. Die eigentliche Funktionalität muss in einem Javascript Subfeature umgesetzt werden. 
+

package/src/stories/views/components/modal/modal.stories.js

@@ -0,0 +1,79 @@
+const handlebars = require('hrHandlebars')
+
+const defaultModalTemplate = (args, { globals: { customConditionalToolbar } }) => {
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/modal/modal}}
+        {{#> components/teaser/components/teaser_headline}}
+            {{> components/teaser/components/teaser_title _text="Überschrift Default Modal" _css="text-2xl"}}
+        {{/components/teaser/components/teaser_headline}}
+        <p class="mt-2 text-base font-copy">Hier steht der Text des Modals. Dies ist nur ein Beispiel. Das modal Template stellt nur den Rahmen 
+        des Modals zur Verfügung. In dem Modal kann dargestellt werden was man möchte.</p>
+    {{/components/modal/modal}}
+
+    {{#> components/base/link _css="js-modal"}}
+        Default Modal
+    {{/components/base/link}}
+  `)
+    return hbsTemplate({ brand, ...args })
+}
+
+const userConsentModalTemplate = (args, { globals: { customConditionalToolbar } }) => {
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    let link = { url: "https://hessenschau.de", isTargetBlank: true }
+    let hbsTemplate = handlebars.compile(`
+    {{#> components/modal/modal}}
+        {{> components/modal/user_consent _headline=(loca "modal_user_consent_headline") _text=(loca "modal_user_consent_text") _labelOk=(loca "modal_user_consent_label_ok") _labelCancel=(loca "modal_user_consent_label_cancel")}}
+    {{/components/modal/modal}}
+
+    <a href="https://hessenschau.de" class="js-user-consent-needed" rel="noopener" target="_blank">User Consent Modal</a>
+  `)
+    return hbsTemplate({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Modal',
+
+    argTypes: {
+        _trigger: {
+            description: 'Hook Klasse des Links oder Buttons, welcher das Modal öffnen soll',
+            control: 'text',
+        },
+
+        _type: {
+            control: {
+                type: 'select',
+                options: ['default', 'userConsent'],
+            },
+
+            description: 'Der Typ des Modals, das geöffnet werden soll. Derzeit lassen sich die Typen "default" und "userConsent" auswählen.',
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+    },
+}
+
+export const defaultModal = {
+    render: defaultModalTemplate.bind({}),
+    name: 'Default Modal',
+    args: {
+        _trigger: '.js-modal',
+        _type: 'default'
+    },
+}
+
+export const userConsentModal = {
+    render: userConsentModalTemplate.bind({}),
+    name: 'User Consent Modal',
+    args: {
+        _trigger: '.js-user-consent-needed',
+        _type: 'userConsent'
+    },
+}
+

package/src/stories/views/components/modal/userConsentModal.subfeature.js

@@ -0,0 +1,120 @@
+import { hr$, listen, unlisten } from 'hrQuery'
+import { uxAction } from 'base/tracking/pianoHelper.subfeature'
+import dialogPolyfill from 'dialog-polyfill'
+
+const UserConsentModal = function (options, rootElement) {
+    let triggerNode = null,
+        isDesktopViewport = true
+    const dialogPolyfillBaseUrl = options.dialogPolyfillBaseUrl || 'vendor/dialog-polyfill',
+        modalTrigger = options.trigger || '.js-user-consent-needed',
+        modalTriggerWithDropdownInDesktopViewport = 'js-dropdown-in-desktop',
+        triggerRoot = document.body,
+        modal = hr$('.js-modal', rootElement)[0],
+        okButtonTrigger = '.js-user-consent-ok',
+        okButton = hr$(okButtonTrigger, rootElement)[0],
+        closeButtonTrigger = ".js-modal-close",
+        desktopViewport = 1024,
+        resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                isDesktopViewport = entry.borderBoxSize[0].inlineSize >= desktopViewport
+            }
+        })
+
+
+    const configureEventListeners = () => {
+        listen('click', handleClickOnTrigger, triggerRoot)
+    }
+
+    const handleClickOnTrigger = (event) => {
+        if (null !== modalTrigger) {
+            triggerNode = event.target.closest(modalTrigger)
+            let okButton = event.target.closest(okButtonTrigger)
+            let closeButton = event.target.closest(closeButtonTrigger)
+
+            if (null !== triggerNode) {
+                let showModal = triggerNode.classList.contains(modalTriggerWithDropdownInDesktopViewport) && !isDesktopViewport || !triggerNode.classList.contains(modalTriggerWithDropdownInDesktopViewport)
+                if (showModal) {
+                    event.preventDefault()
+                    setUrlToFollowAfterConsent(triggerNode)
+                    show()
+                }
+            }
+            if (null !== okButton) {
+                handleClickTracking()
+            }
+            if (null !== closeButton) {
+                close()
+            }
+        }
+    }
+
+    const setUrlToFollowAfterConsent = (triggerNode) => {
+        let urlToFollowAfterConsent = "",
+            target = null,
+            rel = null
+        if ("userConsentLink" in triggerNode.dataset) {
+            let link = null
+            try {
+                link = JSON.parse(triggerNode.dataset.userConsentLink)
+            } catch {
+                link = {}
+            }
+            urlToFollowAfterConsent = link.url || '#'
+            target = link.isTargetBlank ? '_blank' : null
+            rel = link.isTargetBlank ? 'noopener' : null
+        } else {
+            urlToFollowAfterConsent = triggerNode.href
+            target = triggerNode.hasAttribute("target") ? triggerNode.target : null
+            rel = triggerNode.hasAttribute("rel") ? triggerNode.rel : null
+        }
+        okButton.href = urlToFollowAfterConsent
+        if (null !== target) {
+            okButton.setAttribute("target", target)
+        } else {
+            okButton.removeAttribute("target")
+        }
+        if (null !== rel) {
+            okButton.setAttribute("rel", rel)
+        } else {
+            okButton.removeAttribute("rel")
+        }
+    }
+
+    const handleClickTracking = () => {
+        if (null !== triggerNode && "userConsentTrackingData" in triggerNode.dataset) {
+            uxAction(triggerNode.dataset.userConsentTrackingData)
+        }
+    }
+
+    const configurePolyfillIfNeeded = () => {
+        if (undefined == modal.showModal) {
+            addLink('dialog-polyfill-css', `${dialogPolyfillBaseUrl}/dialog-polyfill.css`, {
+                type: 'text/css',
+                rel: 'stylesheet',
+            })
+        }
+        dialogPolyfill.registerDialog(modal)
+    }
+
+    const show = () => {
+        modal.showModal()
+        listen('click', closeFromOutside, modal)
+    }
+
+    const closeFromOutside = (event) => {
+        if (event.target === modal) {
+            unlisten('click', closeFromOutside, modal)
+            close()
+        }
+    }
+
+    const close = () => {
+        modal.close()
+    }
+
+    configurePolyfillIfNeeded()
+    configureEventListeners()
+    resizeObserver.observe(document.body)
+}
+
+export default UserConsentModal

package/src/stories/views/components/modal/user_consent.hbs

@@ -0,0 +1,13 @@
+{{#> components/teaser/components/teaser_headline}}
+    {{> components/teaser/components/teaser_title _text=_headline-adjust_context _css="text-2xl"}}
+{{/components/teaser/components/teaser_headline}}
+<p class="mt-2 text-base font-copy">{{_text}}</p>
+
+<div class="flex flex-wrap mt-4"> 
+    {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
+        {{>components/button/components/button_label _label=_labelCancel-adjust_context _css=""}}
+    {{/components/button/button}}
+    {{#> components/button/link_button _link='{"url":"#", "isTargetBlank": false, "hasIcon": false}' _size="lg" _css="js-user-consent-ok js-modal-close mt-4"}}
+        {{>components/button/components/button_label _label=_labelOk-adjust_context _css=""}}
+    {{/components/button/link_button}}
+</div>

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.hbs

@@ -8,7 +8,7 @@
         {{/with}}
         <li class="inline">
             <h1 class="inline{{#unless this.showBreadcrumbTitleAlways}} sr-only sm:not-sr-only{{/unless}}">
-                <a href="{{_currentPageUrl}}" class="{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">{{~_currentPageTitle~}}</a>
+                <a href="{{_currentPageUrl}}" class="{{if (isUserConsentNeeded _currentPageUrl) 'js-user-consent-needed ' ''}}{{> components/navigation/breadcrumb/utils/breadcrumb_link_classes}}">{{~_currentPageTitle~}}</a>
             </h1>
         </li>
     </ul>