hr-design-system-handlebars 1.58.0 → 1.58.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# v1.58.2 (Fri Feb 16 2024)
+
+#### 🐛 Bug Fix
+
+- bugfix button story [#848](https://github.com/mumprod/hr-design-system-handlebars/pull/848) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.58.1 (Fri Feb 16 2024)
+
+#### 🐛 Bug Fix
+
+- add story-json, rename paragraphbox_frame [#847](https://github.com/mumprod/hr-design-system-handlebars/pull/847) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### 📝 Documentation
+
+- add size and variant controls to icon storys [#846](https://github.com/mumprod/hr-design-system-handlebars/pull/846) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 2
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v1.58.0 (Thu Feb 15 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3235,7 +3235,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1708008968513;
+  counter-reset: cnt1708094244233;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3558,7 +3558,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1708008968513 1;
+  counter-increment: cnt1708094244233 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3574,7 +3574,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1708008968513);
+  content: counter(cnt1708094244233);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
     
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
     
@@ -55,4 +55,4 @@
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper}}
     
     <span class="sr-only">{{loca "story_download_intro_sr" }}</span>
  
@@ -34,4 +34,4 @@
 
     <span class="sr-only">{{loca "story_download_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -71,4 +71,4 @@
 
     <span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,9 +1,22 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4 font-bold">Sandro Wagner wurde es dann doch nicht. Das Profil des ehemaligen Lilien-Stürmers und heutigen Co-Trainers der Nationalmannschaft war aber auch am letzten Tag der Transferperiode in Darmstadt erkennbar.</p>
-    <img class="mb-4 article-breakout" src="https://unsplash.it/id/26/980/528" alt="">
-    <p class="mb-4">Der 1,92 Meter große Angreifer hat viel gesehen in der Fußball-Welt. Wolfsburg, Nürnberg, Mainz, Union Berlin, Queens Park Rangers, Bochum und Schalke 04 - so lauteten seine Stationen. Für Deutschland spielte er sogar in diversen Auswahlmannschaften. "Mit seiner Physis und Statur ist er der klassische Zielstürmer, den wir unserem Kader zuführen wollten", berichtete Trainer Torsten Lieberknecht. Selbst Eintracht Frankfurt soll sich 2022 nach dem Europa-League-Sieg intensiv mit einer Verpflichtung von Polter beschäftigt haben.</p>
-    <h2 class="mb-4 text-xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4">Der Stürmer kann Bälle festmachen, Verteidiger binden, fühlt sich zudem in der Box zu Hause. In der Bundesliga netzte er 21 Mal ein, in der 2. Liga sogar 45 Mal in 99 Partien. Durch seine Erfahrung und Nervenstärke kann er den Lilien gerade im Abstiegskampf eine Stütze sein. Polter scheut sich vor keiner Verantwortung, beim Spiel der Schalker gegen Magdeburg im Herbst markierte er seinen zweiten Treffer im Spiel durch einen Elfmeter vor dem Ende zum 4:3. "Ich werde alles daransetzen, der Mannschaft zu helfen und meine Erfahrung im Kampf um den Klassenerhalt einzubringen", ließ sich Polter am Donnerstag zitieren.</p>
-    <p class="mb-4">Interessant dabei: Polter galt als einer der Lieblingsspieler von Trainer Thomas Reis, der ihn erst in Bochum coachte und dann zum S04 holte. Neben Polter kam vor Jahresfrist noch Tim Skarke nach Gelsenkirchen, ein Transfer von Gerrit Holtmann zerschlug sich seinerzeit. "Die Lilien haben nun die Thomas-Reis-Wunschoffensive zusammen", hieß es daher am Donnerstag im Ruhrgebiet. So entsteht auch ein Vorteil für Darmstadt: Polter kennt das Zusammenspiel mit Skarke aus Schalker Tagen, jenes mit Holtmann aus Bochumer Tagen.</p>
+    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
+    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    {{#unless this.displayPageLead.isFalse}}
+        {{#with this.teaseritem }}
+            {{#if this.isImage}}
+                {{> components/content/copytext/components/image/figure
+                    _cssClass="article-breakout"
+                    _cssClassCaption=""
+                    _type="story"
+                    _variant="100-top"
+                    _pictureAddClass="ar-16-9"
+                    _isWebview=../../_isWebview
+                    _noDelay=true}}
+            {{/if}}
+        {{/with}}
+    {{/unless}}
+
+    {{~> components/content/copytext/copytext _isWebview=_webview ~}}
+
 {{/components/page/base/page_wrapper}}

package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
     
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
     
@@ -55,4 +55,4 @@
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper}}
     
     <span class="sr-only">{{loca "story_download_intro_sr" }}</span>
  
@@ -34,4 +34,4 @@
 
     <span class="sr-only">{{loca "story_download_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -71,4 +71,4 @@
 
     <span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -1,9 +1,22 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4 font-bold">Sandro Wagner wurde es dann doch nicht. Das Profil des ehemaligen Lilien-Stürmers und heutigen Co-Trainers der Nationalmannschaft war aber auch am letzten Tag der Transferperiode in Darmstadt erkennbar.</p>
-    <img class="mb-4 article-breakout" src="https://unsplash.it/id/26/980/528" alt="">
-    <p class="mb-4">Der 1,92 Meter große Angreifer hat viel gesehen in der Fußball-Welt. Wolfsburg, Nürnberg, Mainz, Union Berlin, Queens Park Rangers, Bochum und Schalke 04 - so lauteten seine Stationen. Für Deutschland spielte er sogar in diversen Auswahlmannschaften. "Mit seiner Physis und Statur ist er der klassische Zielstürmer, den wir unserem Kader zuführen wollten", berichtete Trainer Torsten Lieberknecht. Selbst Eintracht Frankfurt soll sich 2022 nach dem Europa-League-Sieg intensiv mit einer Verpflichtung von Polter beschäftigt haben.</p>
-    <h2 class="mb-4 text-xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4">Der Stürmer kann Bälle festmachen, Verteidiger binden, fühlt sich zudem in der Box zu Hause. In der Bundesliga netzte er 21 Mal ein, in der 2. Liga sogar 45 Mal in 99 Partien. Durch seine Erfahrung und Nervenstärke kann er den Lilien gerade im Abstiegskampf eine Stütze sein. Polter scheut sich vor keiner Verantwortung, beim Spiel der Schalker gegen Magdeburg im Herbst markierte er seinen zweiten Treffer im Spiel durch einen Elfmeter vor dem Ende zum 4:3. "Ich werde alles daransetzen, der Mannschaft zu helfen und meine Erfahrung im Kampf um den Klassenerhalt einzubringen", ließ sich Polter am Donnerstag zitieren.</p>
-    <p class="mb-4">Interessant dabei: Polter galt als einer der Lieblingsspieler von Trainer Thomas Reis, der ihn erst in Bochum coachte und dann zum S04 holte. Neben Polter kam vor Jahresfrist noch Tim Skarke nach Gelsenkirchen, ein Transfer von Gerrit Holtmann zerschlug sich seinerzeit. "Die Lilien haben nun die Thomas-Reis-Wunschoffensive zusammen", hieß es daher am Donnerstag im Ruhrgebiet. So entsteht auch ein Vorteil für Darmstadt: Polter kennt das Zusammenspiel mit Skarke aus Schalker Tagen, jenes mit Holtmann aus Bochumer Tagen.</p>
+    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
+    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    {{#unless this.displayPageLead.isFalse}}
+        {{#with this.teaseritem }}
+            {{#if this.isImage}}
+                {{> components/content/copytext/components/image/figure
+                    _cssClass="article-breakout"
+                    _cssClassCaption=""
+                    _type="story"
+                    _variant="100-top"
+                    _pictureAddClass="ar-16-9"
+                    _isWebview=../../_isWebview
+                    _noDelay=true}}
+            {{/if}}
+        {{/with}}
+    {{/unless}}
+
+    {{~> components/content/copytext/copytext _isWebview=_webview ~}}
+
 {{/components/page/base/page_wrapper}}

package/package.json

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

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

@@ -0,0 +1,108 @@
+{
+    "topline": "Quer über den großen Sylter Deich",
+    "title": "Zwei flinke Boxer jagen die quirlige Eva und ihren Mops",
+    "shorttext": "Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.",
+    "hasDwellTime": false,
+    "isArchiveContent": false,
+    "displayPageLead": {
+        "isFalse": false
+    },
+    "teaseritem": {
+        "@->jsoninclude": "page/story/story_images.inc.json",
+        "@->contentpath": "story_image_lead",
+        "@->replaceToken": [
+            {
+                "@->token": "image",
+                "@->value": "connichi-106"
+            }
+        ]    
+    },
+    "documentModificationDate": {
+        "isModificationDate": false,
+        "isPublicationDate": true,
+        "htmlDateTime": "2024-02-15T19:30+0200",
+        "date": "15.02.24",
+        "time": "19:30"
+    },
+    "documentPublicationDate": {
+        "htmlDateTime": "2024-02-15T19:30+0200",
+        "date": "15.02.24",
+        "time": "19:30"
+    },    
+    "userComments": {
+        "HasOneComment": false,
+        "quantity": "117"
+    },
+    "byline": "Bylinetext",
+    "authorItems": [
+        {
+            "hasProfileLink": false,
+            "from": "Von",
+            "textAfterAuthor": "Horst Schlämmer",
+            "delimiter": " und "
+        },
+        {
+            "hasProfileLink": true,
+            "from": "",
+            "authorName": "Gisela",
+            "delimiter": "",
+            "link": {
+                "url": "/author-url",
+                "isTargetBlank": false   
+            }            
+        }
+    ],
+    "copytextParagraph": {
+        "@->jsoninclude": "content/copytext/copytext.json",
+        "@->contentpath": "copytextParagraph"
+    },
+    "source": ["Horst Schlämmer","hessenschau.de"],
+    "geotag": [
+        {
+            "url": "/Frankfurt-url",
+            "title": "Frankfurt"
+        },
+        {
+            "url": "/Offenbach-url",
+            "title": "Offenbach"
+        },
+        {
+            "url": "/Darmstadt-url",
+            "title": "Darmstadt"
+        }                
+    ],
+    "topictags": [
+        {
+            "url": "/Parteien-url",
+            "title": "Parteien"
+        },
+        {
+            "url": "/Wahlen-url",
+            "title": "Wahlen"
+        },
+        {
+            "url": "/Landtagswahl-url",
+            "title": "Landtagswahl"
+        }                        
+    ],
+    "socialSharing": {
+        "twitterLink": "/twitterLink-url",
+        "facebookLink": "/facebookLink-url",
+        "whatsappLink": "/whatsappLink-url",
+        "mailtoLink": "/mailtoLink-url"
+    },
+    "programReference": {
+        "hasReference": true,
+        "name": "Program-name",
+        "link": {
+            "url": "/Program-url",
+            "isTargetBlank": true   
+        },
+        "displayWithTime": true,
+        "date": {
+            "htmlDateTime": "2024-02-15T19:30+0200",
+            "date": "15.02.24",
+            "dateSeparatorTime": "19:30"
+        }           
+    }
+}

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

@@ -0,0 +1,3 @@
+{
+    "@->jsoninclude": "page/story/story.inc.json"
+}

package/src/assets/fixtures/page/story/story_images.inc.json

@@ -0,0 +1,62 @@
+{
+    "story_image_lead": {
+        "isImage": true,
+        "caption": "Bildunterschrift",
+        "copyrightWithLinks": "picture-alliance/dpa",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    },    
+    "copytext_image_100": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": true
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
+    "copytext_image_50": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": false
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    }
+}

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

@@ -225,7 +225,10 @@ export default {
 
         '_icon': {
             description: 'Der Name des Icons in der Iconmap',
-            control: 'text',
+            options: ['ortsmarke', 'taglabel', 'settings', 'arrow-left', 'arrow-right'],
+            control: {
+                type: 'select',
+            },
 
             table: {
                 category: 'Icon',
@@ -571,4 +574,4 @@ export const ButtonTertiaryAufFarbigemHintergrund = {
         _variant: 'tertiary',
         _onBackground: true,
     },
-}
+}

package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
     
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
     
@@ -55,4 +55,4 @@
 
     {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

package/src/stories/views/components/content/copytext/components/filedownload.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper}}
     
     <span class="sr-only">{{loca "story_download_intro_sr" }}</span>
  
@@ -34,4 +34,4 @@
 
     <span class="sr-only">{{loca "story_download_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

package/src/stories/views/components/content/copytext/components/infobox.hbs

@@ -1,4 +1,4 @@
-{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.paragraphProperties.[0].showFullSize}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.paragraphProperties.[0].showFullSize}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
@@ -71,4 +71,4 @@
 
     <span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
     
-{{/components/content/copytext/components/common/paragraphbox_frame}}
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

package/src/stories/views/components/page/story/fixtures/story.json

@@ -0,0 +1 @@
+{"topline":"Quer über den großen Sylter Deich","title":"Zwei flinke Boxer jagen die quirlige Eva und ihren Mops","shorttext":"Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. Fix quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg.","hasDwellTime":false,"isArchiveContent":false,"displayPageLead":{"isFalse":false},"teaseritem":{"isImage":true,"caption":"Bildunterschrift","copyrightWithLinks":"picture-alliance/dpa","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/connichi-106_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/connichi-106_v-16to9__small.jpg 320w, images/connichi-106_v-16to9__medium.jpg 480w, images/connichi-106_v-16to9__medium__extended.jpg 640w, images/connichi-106_v-16to9.jpg 960w, images/connichi-106_v-16to9__retina.jpg 1920w"}]}},"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"documentPublicationDate":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"userComments":{"HasOneComment":false,"quantity":"117"},"byline":"Bylinetext","authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Gisela","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Copytext"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isUl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"},{"isOl":true,"text":"<li>Lorem ipsum dolor sit amet</li><li>At vero eos et accusam et justo</li><li>Stet clita kasd gubergren</li>"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Zwischenüberschrift"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}],"source":["Horst Schlämmer","hessenschau.de"],"geotag":[{"url":"/Frankfurt-url","title":"Frankfurt"},{"url":"/Offenbach-url","title":"Offenbach"},{"url":"/Darmstadt-url","title":"Darmstadt"}],"topictags":[{"url":"/Parteien-url","title":"Parteien"},{"url":"/Wahlen-url","title":"Wahlen"},{"url":"/Landtagswahl-url","title":"Landtagswahl"}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url"},"programReference":{"hasReference":true,"name":"Program-name","link":{"url":"/Program-url","isTargetBlank":true},"displayWithTime":true,"date":{"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","dateSeparatorTime":"19:30"}}}

package/src/stories/views/components/page/story/story_article.hbs

@@ -1,9 +1,22 @@
 {{#>components/page/base/page_wrapper}}
-    <h2 class="mb-4 text-3xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4 font-bold">Sandro Wagner wurde es dann doch nicht. Das Profil des ehemaligen Lilien-Stürmers und heutigen Co-Trainers der Nationalmannschaft war aber auch am letzten Tag der Transferperiode in Darmstadt erkennbar.</p>
-    <img class="mb-4 article-breakout" src="https://unsplash.it/id/26/980/528" alt="">
-    <p class="mb-4">Der 1,92 Meter große Angreifer hat viel gesehen in der Fußball-Welt. Wolfsburg, Nürnberg, Mainz, Union Berlin, Queens Park Rangers, Bochum und Schalke 04 - so lauteten seine Stationen. Für Deutschland spielte er sogar in diversen Auswahlmannschaften. "Mit seiner Physis und Statur ist er der klassische Zielstürmer, den wir unserem Kader zuführen wollten", berichtete Trainer Torsten Lieberknecht. Selbst Eintracht Frankfurt soll sich 2022 nach dem Europa-League-Sieg intensiv mit einer Verpflichtung von Polter beschäftigt haben.</p>
-    <h2 class="mb-4 text-xl">Polter kennt die anderen Offensiven schon</h2>
-    <p class="mb-4">Der Stürmer kann Bälle festmachen, Verteidiger binden, fühlt sich zudem in der Box zu Hause. In der Bundesliga netzte er 21 Mal ein, in der 2. Liga sogar 45 Mal in 99 Partien. Durch seine Erfahrung und Nervenstärke kann er den Lilien gerade im Abstiegskampf eine Stütze sein. Polter scheut sich vor keiner Verantwortung, beim Spiel der Schalker gegen Magdeburg im Herbst markierte er seinen zweiten Treffer im Spiel durch einen Elfmeter vor dem Ende zum 4:3. "Ich werde alles daransetzen, der Mannschaft zu helfen und meine Erfahrung im Kampf um den Klassenerhalt einzubringen", ließ sich Polter am Donnerstag zitieren.</p>
-    <p class="mb-4">Interessant dabei: Polter galt als einer der Lieblingsspieler von Trainer Thomas Reis, der ihn erst in Bochum coachte und dann zum S04 holte. Neben Polter kam vor Jahresfrist noch Tim Skarke nach Gelsenkirchen, ein Transfer von Gerrit Holtmann zerschlug sich seinerzeit. "Die Lilien haben nun die Thomas-Reis-Wunschoffensive zusammen", hieß es daher am Donnerstag im Ruhrgebiet. So entsteht auch ein Vorteil für Darmstadt: Polter kennt das Zusammenspiel mit Skarke aus Schalker Tagen, jenes mit Holtmann aus Bochumer Tagen.</p>
+    <h2 class="mb-4 text-3xl">{{this.title}}</h2>
+    <p class="mb-4 font-bold">{{this.shorttext}}</p>
+    
+    {{#unless this.displayPageLead.isFalse}}
+        {{#with this.teaseritem }}
+            {{#if this.isImage}}
+                {{> components/content/copytext/components/image/figure
+                    _cssClass="article-breakout"
+                    _cssClassCaption=""
+                    _type="story"
+                    _variant="100-top"
+                    _pictureAddClass="ar-16-9"
+                    _isWebview=../../_isWebview
+                    _noDelay=true}}
+            {{/if}}
+        {{/with}}
+    {{/unless}}
+
+    {{~> components/content/copytext/copytext _isWebview=_webview ~}}
+
 {{/components/page/base/page_wrapper}}

package/src/stories/views/components/page/story/story_main.stories.js

@@ -1,4 +1,5 @@
 import story_template from './story_article.hbs'
+import story_json from './fixtures/story.json'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -13,5 +14,5 @@ export default {
 export const Default = {
     render: Template.bind({}),
     name: 'default',
-
+    args: story_json,
 }