hr-design-system-handlebars 1.74.5 → 1.74.7

package/.storybook/preview-head.html

@@ -1,7 +1,8 @@
 <script src="vendor/modernizr/modernizr.cust.js"></script>
-<!--to be sure hyphems work correctly lang Attribute needs to be "de"
-see: https://github.com/storybookjs/storybook/issues/11706 -->
+
 <script>
+    //  to be sure hyphems work correctly lang Attribute needs to be "de"
+    //  see: https://github.com/storybookjs/storybook/issues/11706
     document.documentElement.setAttribute('lang', 'de')
 
     // Javascript workaround damit darkmode nur in der Webview in Delivery funktioniert
@@ -13,4 +14,35 @@ see: https://github.com/storybookjs/storybook/issues/11706 -->
     darkModePreference.addEventListener("change",  setColorScheme);
     setColorScheme(darkModePreference);
     
-</script>
+    // https://github.com/storybookjs/storybook/issues/6113#issuecomment-1183339597
+    // On page change, fire DOMContentLoaded event
+    function pageChange() {
+        console.log("pageChange")
+        window.document.dispatchEvent(new Event('storyWasSwitchedAndIsLoaded', {
+            bubbles: true,
+            cancelable: true
+        }));
+    }
+  
+    function watchForChanges() {
+        const mutationObserver = function(mutationsList) {
+            for (let i = 0, len = mutationsList.length; i < len; i++) {
+                if (mutationsList[i].type == 'childList') {
+                    pageChange();
+                    break;
+                }
+            }
+        };
+  
+        const observer = new MutationObserver(mutationObserver);
+        const config = { childList: true, subtree: false };
+        observer.observe(document.getElementById('storybook-root'), config);
+
+        // Remove event listener, otherwise we will re-run this function when we fire our manual event
+        document.removeEventListener('DOMContentLoaded', watchForChanges);
+    }
+  
+    // Initially create mutation observer
+    document.addEventListener('DOMContentLoaded', watchForChanges);
+
+  </script>

package/.storybook/preview.js

@@ -45,7 +45,6 @@ setConsoleOptions({
     panelInclude: [...panelInclude, /checkcss/],
 });
 
-
 function loadDelayedImages() {
     setTimeout(function () {
         var t,
@@ -70,15 +69,12 @@ function loadDelayedImages() {
     }, 0)
 }
 
-let eventSrcUrl = null
-
-document.addEventListener('DOMContentLoaded', function (event) {
-    console.log('DOM fully loaded and parsed')
-    console.log('Start feature initialization')
-
-    Initializer.run(document, loadFeature)
-    setTimeout(loadDelayedImages, 200)
+document.addEventListener('storyWasSwitchedAndIsLoaded', function (event) {
+    console.log('storyWasSwitchedAndIsLoaded')
+    Initializer.run(document, loadFeature)  
+    setTimeout(loadDelayedImages, 500)
 })
+console.log('preview.js is loaded')
 
 /*if (process.env.NODE_ENV !== 'production') {
     console.log(Initializer)

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.74.7 (Fri Jun 21 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2945 V2 [#961](https://github.com/mumprod/hr-design-system-handlebars/pull/961) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.74.6 (Fri Jun 21 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3164: Video im Aufmacher [#960](https://github.com/mumprod/hr-design-system-handlebars/pull/960) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.74.5 (Thu Jun 20 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3368,7 +3368,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1718899728274;
+  counter-reset: cnt1718973784359;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3747,7 +3747,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1718899728274 1;
+  counter-increment: cnt1718973784359 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3763,7 +3763,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1718899728274);
+  content: counter(cnt1718973784359);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6118,6 +6118,11 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     margin-bottom: 1rem;
   }
 
+  .sm\:my-7 {
+    margin-top: 1.75rem;
+    margin-bottom: 1.75rem;
+  }
+
   .sm\:mb-14 {
     margin-bottom: 3.5rem;
   }
@@ -6126,6 +6131,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     margin-bottom: 1.75rem;
   }
 
+  .sm\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .sm\:ml-4 {
     margin-left: 1rem;
   }
@@ -6158,6 +6167,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     margin-top: 3rem;
   }
 
+  .sm\:mt-14 {
+    margin-top: 3.5rem;
+  }
+
   .sm\:mt-7 {
     margin-top: 1.75rem;
   }
@@ -6564,6 +6577,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     height: 3rem;
   }
 
+  .md\:h-18 {
+    height: 4.5rem;
+  }
+
   .md\:h-6 {
     height: 1.5rem;
   }
@@ -6600,6 +6617,10 @@ ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
     width: 3rem;
   }
 
+  .md\:w-18 {
+    width: 4.5rem;
+  }
+
   .md\:w-22 {
     width: 5.5rem;
   }

package/dist/views/components/base/image/responsive_image.hbs

@@ -37,11 +37,13 @@
                     <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
-            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                    {{#if ../../_noDelay}}
+            <img{{#if ../../_isWebview}} data-primary-type="hr-nt:image"
+                        data-image-id="{{nextRandom}}"{{/if}}
+                {{#with this.sizes}} sizes="{{this}}" {{/with~}}
+                loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                {{#if ../../_noDelay}}
                         fetchpriority="high"
-                    {{/if}}
+                 {{/if}}
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
@@ -51,4 +53,7 @@
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}
+    {{#if ../_isWebview}}
+        <script type="application/json" id="{{getRandom}}">{{{../this.imageJson}}}</script>
+    {{/if}}
 {{/withParam}}

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -6,7 +6,7 @@
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -14,7 +14,7 @@
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
 {{else}}
         {{#if this.showFullSize.isTrue}}
@@ -24,7 +24,7 @@
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -32,7 +32,7 @@
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
     {{/if}}
  

package/dist/views/components/content/copytext/components/media/media_figure.hbs

@@ -1,7 +1,7 @@
-<figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
+<figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
     {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
     {{#unless _voting-option}}
-        <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
+        <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder {{_cssClassCaption}}">
             {{#if this.label}}
                 {{#> components/label/label_group}}
                     {{#with this.label}}
@@ -20,11 +20,11 @@
     {{/unless}}
     {{#if this.isVideo}}
         {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
-        {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
+        {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
     {{#unless _voting-option}}
         {{#with this.teaseritem}}
-            {{~> components/content/copytext/components/image/figcaption  _cssClassCaption="mx-5 sm:mx-0"~}}
+            {{~> components/content/copytext/components/image/figcaption  _cssClassCaption=../_cssClassCaption~}}
         {{/with}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}

package/dist/views/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-{{/if}}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+{{/if}} 

package/dist/views/components/content/copytext/copytext.hbs

@@ -10,7 +10,7 @@
         {{#unless this.isInfoBox}}
             {{~#with this.paragraphBoxItem }}
                 {{~#if this.isImage}}
-                    {{~> components/content/copytext/components/image/image}}    
+                    {{~> components/content/copytext/components/image/image _isWebview=../../_isWebview}}    
                 {{/if~}}
                 {{~#if this.isContentBox}}
                     {{~> components/content/copytext/components/contentbox/contentbox ~}}

package/dist/views/components/mediaplayer/mediaplayer_button.hbs

@@ -1,8 +1,8 @@
 {{#with this}}
     {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
         {{#with this}}
-            {{> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline ") _icon=../../_icon-adjust_context}}
-            {{#*inline "css"}}{{/inline}}
+            {{> components/base/image/icon _addClass=(appendToDefault (if ../../_isLivestream-adjust_context "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=../../_icon-adjust_context}}
+            {{#*inline "css"}} {{~#if ../../_isLead-adjust_context~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}
         {{/with}}
         {{>components/button/components/button_label _css="sr-only" _label=../../_label-adjust_context}}
     {{/components/button/button}}

package/dist/views/components/page/base/page_header.hbs

@@ -7,9 +7,9 @@
     <h2>
         {{#unless this.label }}  
             {{~#if topline}}
-                <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
+                <span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
             {{/if~}}
         {{/unless~}}
-        <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
+        <span class="text-3xl font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
     </h2>
 </header>

package/dist/views/components/page/base/page_wrapper.hbs

@@ -1,5 +1,5 @@
 <div class="grid grid-page">
-    <div class="grid bg-white grid-article">
+    <div class="grid bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </div>
 </div>

package/dist/views/components/page/story/story_article.hbs

@@ -15,9 +15,12 @@
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
                     _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
-                    _isWebview=../../_isWebview
+                    _isWebview=../../../_webview-adjust_context
                     _noDelay=true}}
             {{/if}}
+            {{#if this.isVideo}}
+               {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+            {{/if}}
         {{/with}}
     {{/unless}}
 

package/dist/views/components/teaser/components/teaser_media_player.hbs

@@ -14,6 +14,6 @@
 
 
     {{#with this}}
-        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
+        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
     {{/with}} 
 </div>

package/dist/views_static/components/base/image/responsive_image.hbs

@@ -37,11 +37,13 @@
                     <img class="w-full{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
                 </noscript>
             {{/unless}}
-            <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
-                    loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
-                    {{#if ../../_noDelay}}
+            <img{{#if ../../_isWebview}} data-primary-type="hr-nt:image"
+                        data-image-id="{{nextRandom}}"{{/if}}
+                {{#with this.sizes}} sizes="{{this}}" {{/with~}}
+                loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
+                {{#if ../../_noDelay}}
                         fetchpriority="high"
-                    {{/if}}
+                 {{/if}}
                  {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
                 alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}"
@@ -51,4 +53,7 @@
             {{~#with ../../_addClass }}</div>{{/with}}
         {{/with}}
     {{/if}}
+    {{#if ../_isWebview}}
+        <script type="application/json" id="{{getRandom}}">{{{../this.imageJson}}}</script>
+    {{/if}}
 {{/withParam}}

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -6,7 +6,7 @@
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -14,7 +14,7 @@
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
 {{else}}
         {{#if this.showFullSize.isTrue}}
@@ -24,7 +24,7 @@
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
                 _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
@@ -32,7 +32,7 @@
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"
-                _isWebview=../../_isWebview}}
+                _isWebview=_isWebview}}
         {{/if}}
     {{/if}}
  

package/dist/views_static/components/content/copytext/components/media/media_figure.hbs

@@ -1,7 +1,7 @@
-<figure class="relative ar-16-9 my-6 sm480:my-7 {{_addClass}}" x-data="{ avStart: false }">
+<figure class="relative ar-16-9 {{_addClass}}" x-data="{ avStart: false }">
     {{~> components/base/a11y/hiddenText _locaTag=_a11yIntro-loca ~}}
     {{#unless _voting-option}}
-        <figcaption class="py-3 mx-5 sm:mx-0 sm:py-4 border-t-[3px] border-gray-boulder">
+        <figcaption class="py-3 sm:py-4 border-t-[3px] border-gray-boulder {{_cssClassCaption}}">
             {{#if this.label}}
                 {{#> components/label/label_group}}
                     {{#with this.label}}
@@ -20,11 +20,11 @@
     {{/unless}}
     {{#if this.isVideo}}
         {{~> components/mediaplayer/media_player this.toModel.videoElement _uiTestHook="ui-test-video-ondemand-player" _isUsedInTeaser=true _addClassImg=_addClassImg ~}}
-        {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
+        {{~> components/teaser/components/teaser_media_player this _css="flex items-center justify-center" _isLead=_isLead _isUsedInCopytext=true _mediaButtonIcon="play_button" _mediaButtonLabel="Video" _aspectRatio="ar-16-9" _noDelay=(if _isLead true false)}}
     {{/if}}
     {{#unless _voting-option}}
         {{#with this.teaseritem}}
-            {{~> components/content/copytext/components/image/figcaption  _cssClassCaption="mx-5 sm:mx-0"~}}
+            {{~> components/content/copytext/components/image/figcaption  _cssClassCaption=../_cssClassCaption~}}
         {{/with}}
     {{/unless}}
     {{~> components/base/a11y/hiddenText _locaTag=_a11yOutro-loca ~}}

package/dist/views_static/components/content/copytext/components/video/video.hbs

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow my-6 sm:my-7" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
-{{/if}}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow my-6 sm:my-7 sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+{{/if}} 

package/dist/views_static/components/content/copytext/copytext.hbs

@@ -10,7 +10,7 @@
         {{#unless this.isInfoBox}}
             {{~#with this.paragraphBoxItem }}
                 {{~#if this.isImage}}
-                    {{~> components/content/copytext/components/image/image}}    
+                    {{~> components/content/copytext/components/image/image _isWebview=../../_isWebview}}    
                 {{/if~}}
                 {{~#if this.isContentBox}}
                     {{~> components/content/copytext/components/contentbox/contentbox ~}}

package/dist/views_static/components/mediaplayer/mediaplayer_button.hbs

@@ -1,8 +1,8 @@
 {{#with this}}
     {{#> components/button/button _variant="tertiary" _type="button" _css=_css _alpineClick="avStart = !avStart; $dispatch('player_start')"}}
         {{#with this}}
-            {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "w-10 h-10  fill-white group-hover:text-white inline ") _icon=_icon}}
-            {{#*inline "css"}}{{/inline}}
+            {{> components/base/image/icon _addClass=(appendToDefault (if _isLivestream "text-media-button-live group-hover:fill-media-button-live" "text-media-button group-hover:fill-media-button") "fill-white group-hover:text-white inline ") _icon=_icon}}
+            {{#*inline "css"}} {{~#if _isLead~}} md:w-18 md:h-18 w-10 h-10 {{else}} w-10 h-10 {{/if}} {{/inline}}
         {{/with}}
         {{>components/button/components/button_label _css="sr-only" _label=_label}}
     {{/components/button/button}}

package/dist/views_static/components/page/base/page_header.hbs

@@ -7,9 +7,9 @@
     <h2>
         {{#unless this.label }}  
             {{~#if topline}}
-                <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
+                <span class="block mb-2 text-base sm480:text-xl font-heading dark:text-text-dark">{{this.topline}}</span>
             {{/if~}}
         {{/unless~}}
-        <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
+        <span class="text-3xl font-headingSerif sm480:text-4xl dark:text-text-dark">{{this.title}}</span>
     </h2>
 </header>

package/dist/views_static/components/page/base/page_wrapper.hbs

@@ -1,5 +1,5 @@
 <div class="grid grid-page">
-    <div class="grid bg-white grid-article">
+    <div class="grid bg-white dark:bg-black grid-article">
         {{> @partial-block }}    
     </div>
 </div>

package/dist/views_static/components/page/story/story_article.hbs

@@ -15,9 +15,12 @@
                     _type="story"
                     _variant=(if this.showSquareImage.isTrue "100-top-sb-1x1" "100-top-sb")
                     _pictureAddClass=(if this.showSquareImage.isTrue "grid ar-1-1 md:ar-16-9" "ar-16-9")
-                    _isWebview=../../_isWebview
+                    _isWebview=../_webview
                     _noDelay=true}}
             {{/if}}
+            {{#if this.isVideo}}
+               {{> components/content/copytext/components/media/media_figure _isLead=true _fullSize=true _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+            {{/if}}
         {{/with}}
     {{/unless}}
 

package/dist/views_static/components/teaser/components/teaser_media_player.hbs

@@ -14,6 +14,6 @@
 
 
     {{#with this}}
-        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
+        {{> components/mediaplayer/mediaplayer_button _css=(if _isUsedInCopytext "" "bottom-0 right-0") _isLead=_isLead _isLivestream=_isLivestream _icon=_mediaButtonIcon _label=_mediaButtonLabel _teaserSize=this.teaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}   
     {{/with}} 
 </div>

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.74.5",
+    "version": "1.74.7",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/assets/fixtures/page/story/story_with_video.json

@@ -0,0 +1,76 @@
+{
+
+    "@->jsoninclude": "page/story/story.inc.json",
+    "@->overrides": [
+        {
+            "@->contentpath": "teaseritemDS",
+            "@->value": {
+                    "isVideo": true,
+                    "showFullSize": {
+                        "isTrue": true
+                    },
+                    "label": {
+                        "type": "video",
+                        "loca": "label_video",
+                        "byline": {
+                            "bylineText": "03:20 Min."
+                        }
+                    },
+                    "copyright": "hessenschau",
+                    "airdateDate": {
+                        "htmlDateTime": "2022-10-31T19:30+0200",
+                        "htmlDate": "31.10.2022",
+                        "date": "31.10.22",
+                        "dateSeparatorTime": "31.10.22, 19:30"
+                    },
+                    "toModel": {
+                        "videoElement": {
+                            "ardPlayerConfig": {
+                                "@->jsoninclude": "video/videos.inc.json",
+                                "@->contentpath": "video-1"
+                            },
+                            "ardPlayerJsonConfig": {
+                                "@->jsoninclude": "video/videos.inc.json",
+                                "@->contentpath": "video-1"
+                            }
+                        },
+                        "mediaBacklinkToStoryTeaser": {
+                            "link": {
+                                "url": "/videoseite",
+                                "isTargetBlank": false
+                            },
+                            "content": {
+                                "readMoreScreenreader": "zum hr3.de Video",
+                                "title": "Musik macht deinen Tag",
+                                "isForeignBrand": true,
+                                "readMore": "zum hr3.de Videoseite"
+                            },
+                            "hasIcon": true,
+                            "iconName": "extern"
+                        }
+                    },
+                    "teaseritem": {
+                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                        "@->contentpath": "copytext_image_100",
+                        "@->replaceToken": [
+                            {
+                                "@->token": "image",
+                                "@->value": "lehrerin-ukraine-104"
+                            }
+                        ]
+                    },
+    
+                    "teaserImage": {
+                        "@->jsoninclude": "teaser/teaser_images.inc.json",
+                        "@->contentpath": "copytext_image_100",
+                        "@->replaceToken": [
+                            {
+                                "@->token": "image",
+                                "@->value": "lehrerin-ukraine-104"
+                            }
+                        ]
+                    }
+            }
+        }
+    ]    
+}