hr-design-system-handlebars 1.114.133 → 1.114.135

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v1.114.135 (Fri Apr 25 2025)
+
+#### 🐛 Bug Fix
+
+- Dpe 3631 kickoff [#1276](https://github.com/mumprod/hr-design-system-handlebars/pull/1276) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.114.134 (Mon Mar 31 2025)
+
+#### 🐛 Bug Fix
+
+- Enhance social sharing functionality by adding fallback for title and… [#1275](https://github.com/mumprod/hr-design-system-handlebars/pull/1275) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.114.133 (Fri Mar 28 2025)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1160,6 +1160,12 @@ article #commentList {
 .bottom-15 {
   bottom: 3.75rem;
 }
+.bottom-16 {
+  bottom: 4rem;
+}
+.bottom-2 {
+  bottom: 0.5rem;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -1194,6 +1200,9 @@ article #commentList {
 .right-11 {
   right: 2.75rem;
 }
+.right-2 {
+  right: 0.5rem;
+}
 .right-4 {
   right: 1rem;
 }
@@ -1905,6 +1914,9 @@ article #commentList {
 .w-\[724px\] {
   width: 724px;
 }
+.w-\[90vw\] {
+  width: 90vw;
+}
 .w-\[9px\] {
   width: 9px;
 }
@@ -1971,6 +1983,9 @@ article #commentList {
 .max-w-\[724px\] {
   max-width: 724px;
 }
+.max-w-\[900px\] {
+  max-width: 900px;
+}
 .max-w-\[940px\] {
   max-width: 940px;
 }
@@ -2003,6 +2018,9 @@ article #commentList {
 .shrink {
   flex-shrink: 1;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .flex-grow {
   flex-grow: 1;
 }
@@ -2301,6 +2319,9 @@ article #commentList {
 .gap-3 {
   gap: 0.75rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .gap-5 {
   gap: 1.25rem;
 }
@@ -2943,6 +2964,10 @@ article #commentList {
 .to-80\% {
   --tw-gradient-to-position: 80%;
 }
+.box-decoration-clone {
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
+}
 .fill-\[\#006dc1\] {
   fill: #006dc1;
 }
@@ -3448,6 +3473,11 @@ article #commentList {
   color: rgba(29, 78, 216, 1);
   color: rgba(29, 78, 216, var(--tw-text-opacity));
 }
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgba(30, 58, 138, 1);
+  color: rgba(30, 58, 138, var(--tw-text-opacity));
+}
 .text-blue-congress-hex {
   --tw-text-opacity: 1;
   color: rgba(0, 82, 147, 1);
@@ -3857,7 +3887,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1743161686138;
+  counter-reset: cnt1745576631509;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -3890,6 +3920,22 @@ article #commentList {
   animation-timing-function: var(--tw-animate-easing);
 }
 html { scroll-behavior: smooth; }
+.no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+.no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+.hyphens-limit-15{
+        -webkit-hyphens: auto;
+        hyphens: auto;
+
+        -webkit-hyphenate-limit-before: 3; /* For Safari */
+        -webkit-hyphenate-limit-after: 4; /* For Safari */
+        -ms-hyphenate-limit-chars: 15 3 4;
+        hyphenate-limit-chars: 15 3 4;
+    }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
   line-height: 1.0625rem;
@@ -4302,7 +4348,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1743161686138 1;
+  counter-increment: cnt1745576631509 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4320,7 +4366,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1743161686138);
+  content: counter(cnt1745576631509);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4513,6 +4559,13 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
 .\[border-image-source\:var\(--border-navigation-border-image\)\] {
   border-image-source: var(--border-navigation-border-image);
 }
+.\[scroll-snap-align\:start\] {
+  scroll-snap-align: start;
+}
+.\[scroll-snap-type\:x_mandatory\] {
+  -webkit-scroll-snap-type: x mandatory;
+          scroll-snap-type: x mandatory;
+}
 /*! purgecss start ignore */
 :root,
 [data-theme='default'] {
@@ -7125,6 +7178,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     width: 220px;
   }
 
+  .sm\:w-\[calc\(25\%-12px\)\] {
+    width: calc(25% - 12px);
+  }
+
   .sm\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;
@@ -7155,6 +7212,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     flex-wrap: nowrap;
   }
 
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+
   .sm\:gap-x-2 {
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;

package/dist/assets/js/components/social_sharing/socialSharingHandler.alpine.js

@@ -72,7 +72,9 @@ export default (module) => ({
             this.shareInWebview(title,url)
         }  else {  
             if (navigator.share && this.isMobile) {
-                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+                const shareTitle = title || document.title;
+                const shareUrl = url || window.location.href;
+                this.nativeShare(shareTitle, shareUrl, `socialShareClick::${module}::nativeShare`);
             } else {
                 if (this.$store.sharingIsOpen[module]) {
                     return this.close(true)

package/dist/views/components/teaser/socialVideo/verticalVideoTeaser.hbs

@@ -0,0 +1,18 @@
+<div class="shrink-0 w-[90vw] sm:w-[calc(25%-12px)] rounded-lg [scroll-snap-align:start]" >
+    <section class="bg-white">
+        <div class="relative">
+            <img src="https://picsum.photos/id/{{_id}}/225/400?random=3" alt="Video 4" class="w-full h-auto ">
+            <div class="absolute left-0 w-full pr-2 bottom-16">
+                <span class="w-full px-2 py-1 text-lg text-white hyphens-limit-15 bg-blue-congress-hex box-decoration-clone font-title ">
+                    {{_title}}
+                </span>  
+            </div>
+            <div class="absolute p-1 bg-white rounded-full bottom-2 right-2">
+            <svg class="w-6 h-6 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+            </svg>
+            </div>
+        </div>
+            <p class="mt-2 ml-2 text-xs sm:ml-0 text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">{{_meta}}</p>
+    </section>
+</div>

package/dist/views/components/teaser/socialVideo/verticalVideoTeaserGroup.hbs

@@ -0,0 +1,34 @@
+<div class="flex ">
+
+  <div class="overflow-x-auto no-scrollbar [scroll-snap-type:x_mandatory] max-w-[900px] w-full">
+    <div class="flex w-full gap-4 sm:justify-between"> 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="237" 
+        _title="Fastnachtseröffnungsfeier in Dieburg und ein ganz langer Titel" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="123" 
+        _title="Super cachieee Headline. Wir brauchen Text aus dem CMS!" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="213" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="203" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+          _id="273" 
+          _title="ARD-Themenwoche: Verkehrswende in Darmstadt und noch mehr" 
+          _meta="09.11.24 | 01:00 min" }} 
+      
+    </div>
+  </div>
+
+</div>

package/dist/views_static/components/teaser/socialVideo/verticalVideoTeaser.hbs

@@ -0,0 +1,18 @@
+<div class="shrink-0 w-[90vw] sm:w-[calc(25%-12px)] rounded-lg [scroll-snap-align:start]" >
+    <section class="bg-white">
+        <div class="relative">
+            <img src="https://picsum.photos/id/{{_id}}/225/400?random=3" alt="Video 4" class="w-full h-auto ">
+            <div class="absolute left-0 w-full pr-2 bottom-16">
+                <span class="w-full px-2 py-1 text-lg text-white hyphens-limit-15 bg-blue-congress-hex box-decoration-clone font-title ">
+                    {{_title}}
+                </span>  
+            </div>
+            <div class="absolute p-1 bg-white rounded-full bottom-2 right-2">
+            <svg class="w-6 h-6 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+            </svg>
+            </div>
+        </div>
+            <p class="mt-2 ml-2 text-xs sm:ml-0 text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">{{_meta}}</p>
+    </section>
+</div>

package/dist/views_static/components/teaser/socialVideo/verticalVideoTeaserGroup.hbs

@@ -0,0 +1,34 @@
+<div class="flex ">
+
+  <div class="overflow-x-auto no-scrollbar [scroll-snap-type:x_mandatory] max-w-[900px] w-full">
+    <div class="flex w-full gap-4 sm:justify-between"> 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="237" 
+        _title="Fastnachtseröffnungsfeier in Dieburg und ein ganz langer Titel" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="123" 
+        _title="Super cachieee Headline. Wir brauchen Text aus dem CMS!" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="213" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="203" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+          _id="273" 
+          _title="ARD-Themenwoche: Verkehrswende in Darmstadt und noch mehr" 
+          _meta="09.11.24 | 01:00 min" }} 
+      
+    </div>
+  </div>
+
+</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.114.133",
+  "version": "1.114.135",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

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

@@ -1,6 +1,24 @@
 @layer utilities {
     html { scroll-behavior: smooth; }
+    
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+    
+    .no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+    .hyphens-limit-15{
+        -webkit-hyphens: auto;
+        -ms-hyphens: auto;
+        hyphens: auto;
 
+        -webkit-hyphenate-limit-before: 3; /* For Safari */
+        -webkit-hyphenate-limit-after: 4; /* For Safari */
+        -ms-hyphenate-limit-chars: 15 3 4;
+        hyphenate-limit-chars: 15 3 4;
+    }
     .placeholder-text-xs::placeholder {
         @apply text-xs;
     }

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "teaser/teaser_groups.inc.json",
+    "@->contentpath": "teaser_2_50"
+}

package/src/stories/views/components/social_sharing/socialSharingHandler.alpine.js

@@ -72,7 +72,9 @@ export default (module) => ({
             this.shareInWebview(title,url)
         }  else {  
             if (navigator.share && this.isMobile) {
-                this.nativeShare(document.title, window.location.href,'socialShareClick::'+module+'::nativeShare')
+                const shareTitle = title || document.title;
+                const shareUrl = url || window.location.href;
+                this.nativeShare(shareTitle, shareUrl, `socialShareClick::${module}::nativeShare`);
             } else {
                 if (this.$store.sharingIsOpen[module]) {
                     return this.close(true)

package/src/stories/views/components/teaser/fixtures/teaser_vertical_video.json

@@ -0,0 +1 @@
+{"includePath":"components/teaser/group_teaser/group_teaser","includeModel":{"hasLink":true,"link":"#gruppe1","hasGroupTitle":true,"hasGroupItems":true,"groupTitle":"Gruppe 100% - 2 x 50% Teaser","teaserSize":"100","realTeaserSize":"100","headlineTag":"h2","isRelatedContent":false,"logicItems":[{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"posterTeaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Sieben Fakten zum Ehrenamt in Hessen","topline":"Engagement von Fußballtrainer bis Feuerwehrfrau","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-10-11T06:57+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 06:57"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/jugendfeuerwehr-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/jugendfeuerwehr-102_v-16to9__small.jpg 320w, images/jugendfeuerwehr-102_v-16to9__medium.jpg 480w, images/jugendfeuerwehr-102_v-16to9__medium__extended.jpg 640w, images/jugendfeuerwehr-102_v-16to9.jpg 960w, images/jugendfeuerwehr-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Zweieinhalb Millionen Hessinnen und Hessen engagieren sich ehrenamtlich - zum Beispiel in einem Sport- oder Musikverein. Und doch haben viele Vereine mit Nachwuchsproblemen zu kämpfen.","hideBylineAndShorttext":false,"sophoraId":"thema-ehrenamt-hessen-100","profiles":"Von Anja Engelke","teaserLead":{"avDocument":"","image":""},"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Der Hasebe-Kane-Nahkampf geht in die zweite Runde","topline":"Eintracht trifft auf Tottenham","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-10-11T19:46+0200","htmlDate":"11.10.2022","date":"11.10.22","dateSeparatorTime":"11.10.22, 19:46"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/hasebe-kane-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/hasebe-kane-102_v-16to9__small.jpg 320w, images/hasebe-kane-102_v-16to9__medium.jpg 480w, images/hasebe-kane-102_v-16to9__medium__extended.jpg 640w, images/hasebe-kane-102_v-16to9.jpg 960w, images/hasebe-kane-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":true,"isAudioOnDemand":true,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Sport","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Beim Hinspiel brachte Altmeister Makoto Hasebe Sturm-Star Harry Kane bis an den Rande der Verzweiflung. Der bittet im Rückspiel nun zur Revanche. Vorher gibt es aber lobende Worte.","hideBylineAndShorttext":false,"sophoraId":"hasebe-kane-100","profiles":"Von Nicolas Herold aus London","teaserLead":{"avDocument":{"isAudio":true,"isAudioOnDemand":true,"toModel":{"audioElementForVideoView":{"isPodcast":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2565","type":"audioOndemand","typeLabel":"Audio-Ondemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2565","type":"audioOndemand","typeLabel":"Audio-Ondemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}}}},"image":""},"geotag":[{"title":"Frankfurt"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}},{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"23 Grad - Oktober verabschiedet sich \"sehr außergewöhnlich\"","topline":"T-Shirt statt Winterjacke","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"50","realTeaserSize":"50","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-10-23T16:04+0200","htmlDate":"23.10.2022","date":"23.10.22","dateSeparatorTime":"23.10.22, 16:04"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/sonniger-herbst-100_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/sonniger-herbst-100_v-16to9__small.jpg 320w, images/sonniger-herbst-100_v-16to9__medium.jpg 480w, images/sonniger-herbst-100_v-16to9__medium__extended.jpg 640w, images/sonniger-herbst-100_v-16to9.jpg 960w, images/sonniger-herbst-100_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":false,"isMediaTeaser":true,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":true,"isVideoOnDemand":true,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":true,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Dicke Winterjacken können weiterhin auf ihren Einsatz warten: Die kommenden Tage bleiben für den späten Oktober außergewöhnlich mild. Selbst Meteorologen sind gleich aus mehreren Gründen überrascht.","hideBylineAndShorttext":false,"sophoraId":"warmes-oktoberende-100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":{"isVideo":true,"isVideoOnDemand":true,"toModel":{"videoElement":{"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}}}},"image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}]}}

package/src/stories/views/components/teaser/socialVideo/verticalVideoTeaser.hbs

@@ -0,0 +1,18 @@
+<div class="shrink-0 w-[90vw] sm:w-[calc(25%-12px)] rounded-lg [scroll-snap-align:start]" >
+    <section class="bg-white">
+        <div class="relative">
+            <img src="https://picsum.photos/id/{{_id}}/225/400?random=3" alt="Video 4" class="w-full h-auto ">
+            <div class="absolute left-0 w-full pr-2 bottom-16">
+                <span class="w-full px-2 py-1 text-lg text-white hyphens-limit-15 bg-blue-congress-hex box-decoration-clone font-title ">
+                    {{_title}}
+                </span>  
+            </div>
+            <div class="absolute p-1 bg-white rounded-full bottom-2 right-2">
+            <svg class="w-6 h-6 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+            </svg>
+            </div>
+        </div>
+            <p class="mt-2 ml-2 text-xs sm:ml-0 text-gray-scorpion font-headingSerif empty:hidden overflow-anywhere hyphens-auto">{{_meta}}</p>
+    </section>
+</div>

package/src/stories/views/components/teaser/socialVideo/verticalVideoTeaser.mdx

@@ -0,0 +1,14 @@
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
+import * as verticalVideoTeaser from './verticalVideoTeaser.stories'
+
+<Meta of={verticalVideoTeaser} />
+
+# Button
+
+Ein toller Einleitungstext für unsere `Vertical Video Teaser` Komponente:
+
+<Canvas withToolbar>
+    <Story of={verticalVideoTeaser.$verticalVideo4} />
+</Canvas>
+
+<ArgTypes story="main" />

package/src/stories/views/components/teaser/socialVideo/verticalVideoTeaser.stories.js

@@ -0,0 +1,55 @@
+import verticalVideoTeaser from './verticalVideoTeaserGroup.hbs'
+
+import teaserGroup100 from '../fixtures/teaser_vertical_video.json'
+
+
+const verticalVideoTeaserTemplate = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return verticalVideoTeaser({ text, ...args })
+}
+
+
+export default {
+    title: 'Komponenten/Teaser/🚧 Hochkant-Videos',
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['100', '66', '50', '33', '25'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+    },
+
+    parameters: {
+        layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.3,
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<div class="grid my-5 grid-page">
+               <div class=" py-6 bg-white sm:px-9.5 col-full sm:col-main gap-x-6 md:gap-y-14 gap-y-6">
+                 ${Story()}
+               </div>
+             </div>`
+        },
+    ],
+}
+
+export const $verticalVideo4 = {
+    render: verticalVideoTeaserTemplate.bind({}),
+    name: '4 Videos',
+    args: teaserGroup100.includeModel,
+}

package/src/stories/views/components/teaser/socialVideo/verticalVideoTeaserGroup.hbs

@@ -0,0 +1,34 @@
+<div class="flex ">
+
+  <div class="overflow-x-auto no-scrollbar [scroll-snap-type:x_mandatory] max-w-[900px] w-full">
+    <div class="flex w-full gap-4 sm:justify-between"> 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="237" 
+        _title="Fastnachtseröffnungsfeier in Dieburg und ein ganz langer Titel" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="123" 
+        _title="Super cachieee Headline. Wir brauchen Text aus dem CMS!" 
+        _meta="09.11.24 | 01:00 min" }} 
+    
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="213" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+        _id="203" 
+        _title="ARD-Themenwoche: Verkehrswende in Darmstadt" 
+        _meta="09.11.24 | 01:00 min" }} 
+      
+      {{> components/teaser/socialVideo/verticalVideoTeaser
+          _id="273" 
+          _title="ARD-Themenwoche: Verkehrswende in Darmstadt und noch mehr" 
+          _meta="09.11.24 | 01:00 min" }} 
+      
+    </div>
+  </div>
+
+</div>