hr-design-system-handlebars 1.63.14 → 1.64.0

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -112,6 +112,10 @@
 	"livestream_plays": "Jetzt live",
 	"livestream_will_play": "Startet am {0}",
 	"livestream_will_play_with_time": "Startet am {0} um {1} Uhr",
+	"modal_user_consent_headline": "Sie verlassen unser Angebot",
+	"modal_user_consent_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"modal_user_consent_label_cancel": "Abbrechen",
+	"modal_user_consent_label_ok": "Zur externen Internetseite",
 	"poster_copyright": "Bild © {0}",
 	"search_input_aria_submit": "Suche starten",
 	"search_input_placeholder": "Ort oder Thema suchen",
@@ -132,6 +136,8 @@
 	"story_program_supplier": "Thema in",
 	"ticket_modal_headline": "Weiterleitung zu einem Ticketservice",
 	"ticket_modal_text": "Der Link öffnet eine Internetseite außerhalb unseres Angebots. Wir sind für den Inhalt externer Internetseiten nicht verantwortlich.",
+	"ticket_modal_label_ok": "Zum Ticketshop",
+	"ticket_modal_label_cancel": "Abbrechen",
 	"ticker_more": "Zum Ticker",
 	"topictag_headline": "Alle Beiträge zum Thema {0}",
 	"topictag_metadescription_prefix": "Alle Beiträge zum Thema ",

package/src/assets/css/custom-components.css

@@ -170,7 +170,8 @@
         @apply text-base;
         @apply font-copy;
         @apply list-none;
-        @apply border-button--dark;
+        @apply border-button--dark dark:border-navigation-border-color-dark;
+        @apply dark:border-opacity-75;
         @apply fill-content-nav;
         @apply text-content-nav;
         @apply bg-white;

package/src/assets/fixtures/teaser/teaser_standard_50_serif_link_two_click.json

@@ -0,0 +1,22 @@
+{
+    "@->jsoninclude": "teaser/teasers.inc.json",
+    "@->contentpath": "teaser_link",
+    "@->overrides": [
+        {
+            "@->contentpath": "logicItem.includeModel.teaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.realTeaserSize",
+            "@->value": "50"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.url",
+            "@->value": "https://tagesschau.de"
+        },
+        {
+            "@->contentpath": "logicItem.includeModel.link.isUserConsentNeeded",
+            "@->value": true
+        }
+    ]
+}

package/src/assets/fixtures/teaser/teasers.inc.json

@@ -1659,7 +1659,8 @@
                         "readMoreScreenreader": "Zur Tagesschau Website",
                         "readMore": "Zur Tagesschau Website",
                         "readMoreLong": "Zur Tagesschau Website"
-                    }
+                    },
+                    "isUserConsentNeeded": false
                 }
             }
         }

package/src/assets/tailwind.css

@@ -45,6 +45,9 @@
     --color-search-footer-text:  theme('colors.black.DEFAULT');
     --search-icon-color: theme('colors.black.DEFAULT');
 
+    /* Content navi button border color for dark mode */
+    --color-navigation-border-color-dark: theme('colors.blue.danube');
+
     /* Logo-Container Padding */
     --logo-padding-top: 6px;
     --logo-padding-bottom: 6px;

package/src/stories/views/components/banner/header/banner_image.hbs

@@ -1,6 +1,6 @@
 {{#with this.bannerImage}}
     {{#if ../bannerLink}}
-        <a href="{{../bannerLink}}">
+        <a href="{{../bannerLink}}"{{#if (isUserConsentNeeded ../bannerLink)}} class="js-user-consent-needed"{{/if}}>
     {{/if}}
     {{#unless ../_hideOnMobile }}
         {{~> components/base/image/responsive_image _type="banner" _variant="default" _addClass="print:hidden" _noDelay="true" _title=(loca "banner_image_copyright" (strip this.copyrightWithLinks html)) ~}}

package/src/stories/views/components/base/backlink.hbs

@@ -1,4 +1,4 @@
-<a href="{{this}}" class="flex flex-nowrap items-center text-sm gap-x-2 text-primary hover:underline {{~#with _addClass }} {{this}}{{/with}}">
+<a href="{{this}}" class="{{if (isUserConsentNeeded this) 'js-user-consent-needed ' ''}}flex flex-nowrap items-center text-sm gap-x-2 text-primary hover:underline {{~#with _addClass }} {{this}}{{/with}}">
     {{~> components/base/image/icon _icon="arrow-left" _addClass="w-5 h-5 fill-current" ~}}
     {{~loca "backlink_title" ~}}
 </a>

package/src/stories/views/components/base/link.hbs

@@ -1,5 +1,5 @@
 <a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} {{#if _link.isStaticUrl}}href="{{#if _link.site}}{{resourceUrl _link.url _site=_link.site}}{{else}}{{resourceUrl _link.url}}{{/if}}{{else}}href="{{_link.url}}{{/if}}{{#if this.hasComments}}#commentList{{/if}}"
-    class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
+    class="sb-link ds-link js-load{{#if _link.isUserConsentNeeded}} js-user-consent-needed{{/if}} {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
     {{#if _link.isTargetBlank}} target="_blank"  rel="noopener{{#if _link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
     {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
     {{#> htmlProperties}}{{/htmlProperties}}

package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -31,7 +31,7 @@
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_tracking_service_description_text"}}
-                            <a class="block mt-2 ds-link text-link hover:underline" target="_blank"
+                            <a class="{{if (isUserConsentNeeded this.url) 'js-user-consent-needed ' ''}}block mt-2 ds-link text-link hover:underline" target="_blank"
                             rel="noopener noreferrer" href="{{this.url}}"
                             title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
                             {{#if this.isTargetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}{{/if}}
@@ -48,7 +48,7 @@
             <ul class="{{#if _webview}} hidden{{/if}}">
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
                     <span class="text-base text-black">AGF <a
-                        class="mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
+                        class="{{if (isUserConsentNeeded 'https://www.agf.de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.agf.de/" title="AGF">(https://www.agf.de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit toggleSwitch">
                         {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false _screenReaderText="agf aktivieren/deaktivieren" }}
@@ -56,7 +56,7 @@
                 </li>
                 <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
                     <span class="text-base text-black">AT Internet <a
-                        class="mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
+                        class="{{if (isUserConsentNeeded 'https://www.atinternet.com/de/') 'js-user-consent-needed ' ''}}mt-3 -mb-1 ds-link text-link hover:underline" target="_blank" rel="noopener noreferrer"
                         href="https://www.atinternet.com/de/"
                         title="AT Internet">(https://www.atinternet.com/de/){{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}</a></span>
                     <div class="flex w-fit toggleSwitch">
@@ -71,7 +71,7 @@
                     {{#with this.footerMetadata}}
                         {{#with this.dataProtectionLink}}
                             {{loca "cookies_setting_description_text"}}
-                            <a class="block mt-2 ds-link text-link hover:underline" target="_blank"
+                            <a class="{{if (isUserConsentNeeded this.url) 'js-user-consent-needed ' ''}}block mt-2 ds-link text-link hover:underline" target="_blank"
                             rel="noopener noreferrer" href="{{this.url}}"
                             title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
                             {{#if this.isTargetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="h-5 w-5 -mt-0.5 fill-current ml-1 inline-flex" _iconmap="icons"~}}{{/if}}

package/src/stories/views/components/event/calendar/event_calendar.hbs

@@ -1,3 +1,6 @@
 <div class="flex flex-col border-event-calendar-secondary border gap-x-4 js-load" data-hr-filterer-ds="{}"> 
     {{> @partial-block }}
+    {{#> components/modal/modal _type="userConsent" _trigger=".js-ticket-button-user-consent-needed"}}
+        {{> components/modal/user_consent _link=this.link _headline=(loca "ticket_modal_headline") _text=(loca "ticket_modal_text") _labelOk=(loca "ticket_modal_label_ok") _labelCancel=(loca "ticket_modal_label_cancel")}}
+    {{/components/modal/modal}}
 </div>

package/src/stories/views/components/event/event_ticket_button.hbs

@@ -1,23 +1,15 @@
 <div class="static pt-1 pb-3 pl-4 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
-    {{#> components/button/button _id=(nextRandom) _size="lg"}}
-        {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
-        {{>components/button/components/button_label _label="Tickets"}}
-    {{/components/button/button}}
-    {{#> components/modal/modal _trigger=(getRandom)}}
-        {{#> components/teaser/components/teaser_headline}}
-            {{> components/teaser/components/teaser_title _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
-        {{/components/teaser/components/teaser_headline}}
-        <p class="mt-2 text-base font-copy">{{loca "ticket_modal_text"}}</p>
+    {{#with this}}
+        {{#> components/button/button _css="js-ticket-button-user-consent-needed"_id=(nextRandom) _size="lg"}}
+            {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+            {{>components/button/components/button_label _css='' _label="Tickets"}}
+        {{/components/button/button}}
+        {{#*inline "htmlProperties"~}}
+        data-user-consent-link='{"url":"{{this.link.url}}","isTargetBlank":{{this.link.isTargetBlank}} }'
+        data-user-consent-tracking-data="{{this.link.cmsDocument.trackingInformations.ticketLink}}"
+        {{~/inline}}
+    {{/with}}
 
-        <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="Abbrechen" _css=""}}
-            {{/components/button/button}}
-            {{#> components/button/link_button _link=this.link _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
-                {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
-            {{/components/button/link_button}}
-        </div>
-    {{/components/modal/modal}}
     <noscript>
         <style>
             #{{getRandom}} {

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. 
+