hr-design-system-handlebars 1.57.6 → 1.57.8

package/.storybook/preview.js

@@ -216,6 +216,12 @@ export const parameters = {
                     ],
                     '*',
                 ],
+                'Seiten',
+                [
+                    'Artikel',
+                    'Index',
+                    'Index mit Player'
+                ],
                 'Komponenten',
                 [
                     'Buttons',

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.57.8 (Wed Feb 14 2024)
+
+#### 🐛 Bug Fix
+
+- Artikel Wrapper AND Refactoring and rearranging of old file structure [#835](https://github.com/mumprod/hr-design-system-handlebars/pull/835) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.57.7 (Tue Feb 13 2024)
+
+#### 🐛 Bug Fix
+
+- copytext bugfixes 2 [#842](https://github.com/mumprod/hr-design-system-handlebars/pull/842) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.57.6 (Mon Feb 12 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -439,7 +439,7 @@ video {
   --tw-gradient-to-position:  ;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
+.ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus, .ds-teaser-focus::before, .ds-cta > *, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-md, .shadow-xl, .toggleSwitch-label, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -504,61 +504,6 @@ video {
 [x-cloak] {
         display: none !important;
     }
-.btn {
-  display: inline-block;
-  cursor: pointer;
-  border-radius: 1.5rem;
-  font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-weight: 700;
-  line-height: 1;
-}
-.btn--primary {
-  --tw-bg-opacity: 1;
-  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--tw-text-opacity));
-}
-.btn--secondary {
-  background-color: transparent;
-  --tw-text-opacity: 1;
-  color: rgba(55, 65, 81, var(--tw-text-opacity));
-  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-}
-.btn--sm {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-size: 0.75rem;
-  line-height: 1.0625rem;
-}
-.btn--md {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-.btn--lg {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.375rem;
-}
-.btn--xl {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-}
 .headline-barrier {
         display: grid;
         grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
@@ -1302,6 +1247,9 @@ a.link:hover {
 .\!mb-0 {
   margin-bottom: 0px !important;
 }
+.\!mt-0 {
+  margin-top: 0px !important;
+}
 .\!mt-4 {
   margin-top: 1rem !important;
 }
@@ -3305,7 +3253,7 @@ a.link:hover {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1707760391912;
+  counter-reset: cnt1707903159761;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3424,6 +3372,27 @@ a.link:hover {
                 minmax(0, 1fr) [full-end];
         }
     }
+.grid-article {
+        --mobile-padding: 1.25rem;
+        --desktop-padding: 40px;
+        --narrow-max-width: 726px;
+        --content-max-width: 940px;
+        --breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
+        
+        grid-template-columns: 
+        [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding)) 
+        [content-start] minmax(0, var(--breakout-size)) 
+        [narrow-start] min(100% - (var(--mobile-padding) * 2),var(--narrow-max-width)) [narrow-end] 
+        minmax(0, var(--breakout-size)) [content-end] 
+        minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
+        grid-column: main;
+    }
+.grid-article > :not(.article-breakout):not(.article-full-width){
+        grid-column: narrow;
+    }
+.article-breakout {
+        grid-column: content;
+    }
 .grid-content {
         grid-template-areas:
     "head"
@@ -3607,7 +3576,7 @@ a.link:hover {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1707760391912 1;
+  counter-increment: cnt1707903159761 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3623,7 +3592,7 @@ a.link:hover {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1707760391912);
+  content: counter(cnt1707903159761);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/{src/stories/views/components/article → dist/views/components/content/copytext}/components/accordion/accordion.hbs

@@ -32,7 +32,7 @@
                 <div class="mb-8 accordionItem">
         {{else}}
             {{#if (isStorybook)}}  
-                {{> components/article/components/accordion/accordion_item }}   
+                {{> components/content/copytext/components/accordion/accordion_item }}   
             {{else}}            
                 {{> modules/story/copytext-accordion ~}}
             {{/if}}    

package/dist/views/components/{article → content/copytext}/components/contentbox/contentbox.hbs

@@ -4,7 +4,7 @@
         <h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
     {{/if}}
     {{#if (isStorybook)}}  
-        {{> components/article/components/contentbox/storybook-contentbox }} 
+        {{> components/content/copytext/components/contentbox/storybook-contentbox }} 
     {{else}}            
         {{> modules/story/copytext-contentbox ~}}
     {{/if}}

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

@@ -1,8 +1,10 @@
 {{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.paragraphProperties.[0].showFullSize}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
-    
-    <h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
+
+    {{~#if this.paragraphProperties.[0].title}}
+        <h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
+    {{/if}}
 
     {{~#with this.paragraphBoxItem }}
         {{~#if this.isImage}}
@@ -12,20 +14,39 @@
                 {{/unless}}
             {{/if}}
             {{#if this.showPortrait.isTrue }}
-                {{> components/content/copytext/components/image/figure 
-                    _cssClass=""
-                    _type="story"
-                    _variant="copytext-portrait"
-                    _noAr="true"
-                    _isWebview=../../_isWebview}}
+                {{~#if ../this.paragraphProperties.[0].title}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-5 !mb-0 !mx-0"
+                        _type="story"
+                        _variant="copytext-portrait"
+                        _noAr="true"
+                        _isWebview=../../_isWebview}}
+                {{else}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-0 !mb-0 !mx-0"
+                        _type="story"
+                        _variant="copytext-portrait"
+                        _noAr="true"
+                        _isWebview=../../_isWebview}}
+                {{/if}}
             {{else}}
-                {{> components/content/copytext/components/image/figure 
-                    _cssClass="!mt-5 !mb-0 !mx-0"
-                    _cssClassCaption="!mx-0"
-                    _type="story"
-                    _variant="100-copytext"
-                    _pictureAddClass="ar-16-9"
-                    _isWebview=../../_isWebview}}
+                {{~#if ../this.paragraphProperties.[0].title}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-5 !mb-0 !mx-0"
+                        _cssClassCaption="!mx-0"
+                        _type="story"
+                        _variant="100-copytext"
+                        _pictureAddClass="ar-16-9"
+                        _isWebview=../../_isWebview}}
+                {{else}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-0 !mb-0 !mx-0"
+                        _cssClassCaption="!mx-0"
+                        _type="story"
+                        _variant="100-copytext"
+                        _pictureAddClass="ar-16-9"
+                        _isWebview=../../_isWebview}}
+                {{/if}}
             {{/if}}
             {{#if ../paragraphProperties.[0].showFullSize }}
                 {{#unless this.showFullSize.isTrue }}

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

@@ -10,10 +10,10 @@
                 {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
-                {{~> components/article/components/contentbox/contentbox ~}}
+                {{~> components/content/copytext/components/contentbox/contentbox ~}}
             {{/if~}}
             {{~#if this.isAccordion}}
-               {{~> components/article/components/accordion/accordion ~}}
+               {{~> components/content/copytext/components/accordion/accordion ~}}
             {{/if~}}
             {{~#if this.isGallery}}                
                 {{> components/content/copytext/components/gallery }}                

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

@@ -0,0 +1,3 @@
+<div class="grid bg-white grid-article">
+    {{> @partial-block }}    
+</div>

package/dist/{views_static/components/article/components → views/components/page}/podcast/podcast_episode-webview.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_episode_article _webview=true}}
+        {{> components/page/podcast/podcast_episode_article _webview=true}}
 
         {{{ this.relatedContentSsi }}}
     </div>

package/{src/stories/views/components/article/components → dist/views/components/page}/podcast/podcast_episode.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_episode_article }}
+        {{> components/page/podcast/podcast_episode_article }}
 
         {{{ this.relatedContentSsi }}}
     </div>

package/dist/{views_static/components/article/components → views/components/page}/podcast/podcast_playlist-webview.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_playlist_article _webview=true}}
+        {{> components/page/podcast/podcast_playlist_article _webview=true}}
     </div>
 {{~/partial~}}
 

package/{src/stories/views/components/article/components → dist/views/components/page}/podcast/podcast_playlist.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_playlist_article }}
+        {{> components/page/podcast/podcast_playlist_article }}
     </div>
     <script type="application/ld+json">
          {{{this.podcastSeriesStructuredData}}}

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

@@ -0,0 +1,9 @@
+{{#>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>
+{{/components/page/base/page_wrapper}}

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

@@ -0,0 +1,20 @@
+{{~#partial "body"~}}   
+      {{~>components/page/story/story_article}}     
+
+      {{#if this.hasFAQ}}
+            <script type="application/ld+json">
+                  {{{this.faqJsonLd}}}
+            </script>
+      {{/if}}
+      {{#if this.hasJobposting}}
+            <script type="application/ld+json">
+                  {{{this.jobpostingJsonLd}}}
+            </script>
+      {{/if}}
+      {{#if this.isRecipe}}
+            <script type="application/ld+json">
+                  {{{this.recipeJsonLd}}}
+            </script>
+      {{/if}}
+{{/partial}}
+{{> "modules/page/base" }}

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

@@ -0,0 +1,7 @@
+{{~#partial "body"~}}
+    
+    {{> components/page/story/story_article _webview=true }}
+    
+{{/partial}}
+
+{{> "modules/page/base" _webview=true }}

package/dist/views_static/components/{article → content/copytext}/components/accordion/accordion.hbs

@@ -32,7 +32,7 @@
                 <div class="mb-8 accordionItem">
         {{else}}
             {{#if (isStorybook)}}  
-                {{> components/article/components/accordion/accordion_item }}   
+                {{> components/content/copytext/components/accordion/accordion_item }}   
             {{else}}            
                 {{> modules/story/copytext-accordion ~}}
             {{/if}}    

package/{src/stories/views/components/article → dist/views_static/components/content/copytext}/components/contentbox/contentbox.hbs

@@ -4,7 +4,7 @@
         <h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
     {{/if}}
     {{#if (isStorybook)}}  
-        {{> components/article/components/contentbox/storybook-contentbox }} 
+        {{> components/content/copytext/components/contentbox/storybook-contentbox }} 
     {{else}}            
         {{> modules/story/copytext-contentbox ~}}
     {{/if}}

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

@@ -1,8 +1,10 @@
 {{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.paragraphProperties.[0].showFullSize}}
     
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
-    
-    <h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
+
+    {{~#if this.paragraphProperties.[0].title}}
+        <h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
+    {{/if}}
 
     {{~#with this.paragraphBoxItem }}
         {{~#if this.isImage}}
@@ -12,20 +14,39 @@
                 {{/unless}}
             {{/if}}
             {{#if this.showPortrait.isTrue }}
-                {{> components/content/copytext/components/image/figure 
-                    _cssClass=""
-                    _type="story"
-                    _variant="copytext-portrait"
-                    _noAr="true"
-                    _isWebview=../../_isWebview}}
+                {{~#if ../this.paragraphProperties.[0].title}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-5 !mb-0 !mx-0"
+                        _type="story"
+                        _variant="copytext-portrait"
+                        _noAr="true"
+                        _isWebview=../../_isWebview}}
+                {{else}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-0 !mb-0 !mx-0"
+                        _type="story"
+                        _variant="copytext-portrait"
+                        _noAr="true"
+                        _isWebview=../../_isWebview}}
+                {{/if}}
             {{else}}
-                {{> components/content/copytext/components/image/figure 
-                    _cssClass="!mt-5 !mb-0 !mx-0"
-                    _cssClassCaption="!mx-0"
-                    _type="story"
-                    _variant="100-copytext"
-                    _pictureAddClass="ar-16-9"
-                    _isWebview=../../_isWebview}}
+                {{~#if ../this.paragraphProperties.[0].title}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-5 !mb-0 !mx-0"
+                        _cssClassCaption="!mx-0"
+                        _type="story"
+                        _variant="100-copytext"
+                        _pictureAddClass="ar-16-9"
+                        _isWebview=../../_isWebview}}
+                {{else}}
+                    {{> components/content/copytext/components/image/figure
+                        _cssClass="!mt-0 !mb-0 !mx-0"
+                        _cssClassCaption="!mx-0"
+                        _type="story"
+                        _variant="100-copytext"
+                        _pictureAddClass="ar-16-9"
+                        _isWebview=../../_isWebview}}
+                {{/if}}
             {{/if}}
             {{#if ../paragraphProperties.[0].showFullSize }}
                 {{#unless this.showFullSize.isTrue }}

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

@@ -10,10 +10,10 @@
                 {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
-                {{~> components/article/components/contentbox/contentbox ~}}
+                {{~> components/content/copytext/components/contentbox/contentbox ~}}
             {{/if~}}
             {{~#if this.isAccordion}}
-               {{~> components/article/components/accordion/accordion ~}}
+               {{~> components/content/copytext/components/accordion/accordion ~}}
             {{/if~}}
             {{~#if this.isGallery}}                
                 {{> components/content/copytext/components/gallery }}                

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

@@ -0,0 +1,3 @@
+<div class="grid bg-white grid-article">
+    {{> @partial-block }}    
+</div>

package/dist/views_static/components/page/podcast/podcast_episode-webview.hbs

@@ -0,0 +1,17 @@
+{{~#partial "staticHeader"~}}
+    <link rel="preconnect" href="//mp3podcasthr-a.akamaihd.net/">
+{{~/partial~}}
+
+{{~#partial "body" ~}}
+    <div class="o-wrapper u-content-background">
+        {{> components/page/podcast/podcast_episode_article _webview=true}}
+
+        {{{ this.relatedContentSsi }}}
+    </div>
+    <script type="application/ld+json">
+         {{{this.structuredData}}}
+
+    </script>
+{{~/partial~}}
+
+{{~> modules/page/base _webview=true ~}}

package/dist/views_static/components/{article/components → page}/podcast/podcast_episode.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_episode_article }}
+        {{> components/page/podcast/podcast_episode_article }}
 
         {{{ this.relatedContentSsi }}}
     </div>

package/dist/{views/components/article/components → views_static/components/page}/podcast/podcast_playlist-webview.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_playlist_article _webview=true}}
+        {{> components/page/podcast/podcast_playlist_article _webview=true}}
     </div>
 {{~/partial~}}
 

package/dist/{views/components/article/components → views_static/components/page}/podcast/podcast_playlist.hbs

@@ -4,7 +4,7 @@
 
 {{~#partial "body" ~}}
     <div class="o-wrapper u-content-background">
-        {{> components/article/components/podcast/podcast_playlist_article }}
+        {{> components/page/podcast/podcast_playlist_article }}
     </div>
     <script type="application/ld+json">
          {{{this.podcastSeriesStructuredData}}}

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

@@ -0,0 +1,9 @@
+{{#>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>
+{{/components/page/base/page_wrapper}}

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

@@ -0,0 +1,20 @@
+{{~#partial "body"~}}   
+      {{~>components/page/story/story_article}}     
+
+      {{#if this.hasFAQ}}
+            <script type="application/ld+json">
+                  {{{this.faqJsonLd}}}
+            </script>
+      {{/if}}
+      {{#if this.hasJobposting}}
+            <script type="application/ld+json">
+                  {{{this.jobpostingJsonLd}}}
+            </script>
+      {{/if}}
+      {{#if this.isRecipe}}
+            <script type="application/ld+json">
+                  {{{this.recipeJsonLd}}}
+            </script>
+      {{/if}}
+{{/partial}}
+{{> "modules/page/base" }}

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

@@ -0,0 +1,7 @@
+{{~#partial "body"~}}
+    
+    {{> components/page/story/story_article _webview=true }}
+    
+{{/partial}}
+
+{{> "modules/page/base" _webview=true }}

package/package.json

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

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

@@ -173,6 +173,30 @@
                 minmax(0, 1fr) [full-end];
         }
     }
+    .grid-article {
+        --mobile-padding: 1.25rem;
+        --desktop-padding: 40px;
+        --narrow-max-width: 726px;
+        --content-max-width: 940px;
+        --breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
+        
+        grid-template-columns: 
+        [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding)) 
+        [content-start] minmax(0, var(--breakout-size)) 
+        [narrow-start] min(100% - (var(--mobile-padding) * 2),var(--narrow-max-width)) [narrow-end] 
+        minmax(0, var(--breakout-size)) [content-end] 
+        minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
+        grid-column: main;
+    }
+    .grid-article > :not(.article-breakout, .article-full-width){
+        grid-column: narrow;
+    }
+    .article-breakout {
+        grid-column: content;
+    }
+    .article-full-width {
+        grid-column: full-width;
+    }
 
     .grid-content {
         grid-template-areas:

package/src/assets/fixtures/{article/components → page}/podcast/podcast_player_episode.json

@@ -1,7 +1,7 @@
 {
     "isSsi": true,
     "logicItem": {
-        "includePath": "components/article/components/podcast/podcast_player_episode",
+        "includePath": "components/page/podcast/podcast_player_episode",
         "includeModel": {
             "byline": "Byline",
             "title": "Legal Kiffen: Cannabis-Gesetz sorgt für Kritik",

package/src/assets/fixtures/{article/components → page}/podcast/podcast_player_playlist.json

@@ -1,7 +1,7 @@
 {
     "teaserPodcastPlaylist": {
         "logicItem": {
-            "includePath": "components/article/components/podcast/podcast_playlist_article",
+            "includePath": "components/page/podcast/podcast_playlist_article",
             "includeModel": {
                 "teaserSize": "100",
                 "realTeaserSize": "100",

package/{dist/views/components/article → src/stories/views/components/content/copytext}/components/accordion/accordion.hbs

@@ -32,7 +32,7 @@
                 <div class="mb-8 accordionItem">
         {{else}}
             {{#if (isStorybook)}}  
-                {{> components/article/components/accordion/accordion_item }}   
+                {{> components/content/copytext/components/accordion/accordion_item }}   
             {{else}}            
                 {{> modules/story/copytext-accordion ~}}
             {{/if}}