hr-design-system-handlebars 1.57.7 → 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,15 @@
+# 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

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);
@@ -3308,7 +3253,7 @@ a.link:hover {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1707819558461;
+  counter-reset: cnt1707903159761;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3427,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"
@@ -3610,7 +3576,7 @@ a.link:hover {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1707819558461 1;
+  counter-increment: cnt1707903159761 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3626,7 +3592,7 @@ a.link:hover {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1707819558461);
+  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/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/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.7",
+    "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}}    

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

@@ -18,7 +18,7 @@ import * as AccordionStories from './accordion.stories'
 Die Akkordeon-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/article/components/accordion/accordion }}
+{{> components/content/copytext/components/accordion/accordion }}
 ```
 
 <Canvas withToolbar>

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

@@ -1,5 +1,6 @@
 import accordion from './accordion.hbs'
-import accordionJson from '../../../teaser/fixtures/accordion.json'
+
+import accordionJson from './fixtures/accordion.json'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -8,7 +9,7 @@ const Template = ({ ...args }) => {
 }
 
 export default {
-    title: 'Komponenten/Artikel/Komponenten/Akkordeon',
+    title: 'Komponenten/Content/Copytext/Akkordeon',
 }
 
 export const Default = {

package/{dist/views_static/components/article → src/stories/views/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/src/stories/views/components/{article → content/copytext}/components/contentbox/contentbox.mdx

@@ -18,7 +18,7 @@ import * as contentboxStories from './contentbox.stories'
 Die Contentbox-Komponente wird in handlebars wie folgt eingebaut:
 
 ```html
-{{> components/article/components/contentbox/contentbox }}
+{{> components/content/copytext/components/contentbox/contentbox }}
 ```
 
 <Canvas withToolbar>

package/src/stories/views/components/{article → content/copytext}/components/contentbox/contentbox.stories.js

@@ -1,5 +1,5 @@
 import contentbox from './contentbox.hbs'
-import contentboxJson from '../../../teaser/fixtures/contentbox.json'
+import contentboxJson from './fixtures/contentbox.json'
 
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -8,7 +8,7 @@ const Template = ({ ...args }) => {
 }
 
 export default {
-    title: 'Komponenten/Artikel/Komponenten/Contentbox',
+    title: 'Komponenten/Content/Copytext/Contentbox',
 }
 
 export const Default = {

package/src/stories/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/src/stories/views/components/page/base/page_wrapper.hbs

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

package/src/stories/views/components/page/{page.data.js → index/page.data.js}

@@ -1,10 +1,10 @@
 import structuredClone from 'core-js-pure/actual/structured-clone'
-import NavigationData from '../site_header/fixtures/site_header_default.json'
-import NavigationData2 from '../site_header/fixtures/site_header_mit_warnung.json'
-import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.json'
-import NavigationData4 from '../site_header/fixtures/site_header_mit_top_topics.json'
+import NavigationData from '../../site_header/fixtures/site_header_default.json'
+import NavigationData2 from '../../site_header/fixtures/site_header_mit_warnung.json'
+import NavigationData3 from '../../site_header/fixtures/site_header_mit_submenu.json'
+import NavigationData4 from '../../site_header/fixtures/site_header_mit_top_topics.json'
 
-import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
+import hero_teaser from '../../teaser/fixtures/teaser_standard_hero_serif.json'
 
 const NavigationDataWithTeaser = structuredClone(
     Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)

package/src/stories/views/components/page/{page.stories.js → index/page.stories.js}

@@ -1,5 +1,5 @@
 import page from './page.hbs'
-import page_pagination from './page_pagination.hbs'
+import page_pagination from '../../pagination/page_pagination.hbs'
 import {
     NavigationDataWithTeaser,
     NavigationDataWithTeaser2,
@@ -7,7 +7,7 @@ import {
     NavigationDataWithTeaser4,
 } from './page.data.js'
 
-import { NavigationDataWithMixedContent } from './page_pagination.data.js'
+import { NavigationDataWithMixedContent } from '../../pagination/page_pagination.data.js'
 
 const Template = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -24,7 +24,7 @@ const Template2 = (args, { globals: { theme } }) => {
 }
 
 export default {
-    title: 'Komponenten/Page/Page',
+    title: 'Seiten/Index',
     argTypes: {},
 
     parameters: {

package/src/stories/views/components/page/{page_player.stories.js → index/page_player.stories.js}

@@ -1,5 +1,5 @@
 import page from './page_players.hbs'
-import AudioDataMixed from '../page/fixtures/page.json'
+import AudioDataMixed from '../fixtures/page.json'
 
 const Template = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -10,7 +10,7 @@ const Template = (args, { globals: { customConditionalToolbar } }) => {
 }
 
 export default {
-    title: 'Komponenten/Page/Page mit Player',
+    title: 'Seiten/Index mit Player',
     argTypes: {},
 
     parameters: {