hr-design-system-handlebars 1.11.10 → 1.11.12

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

@@ -0,0 +1,50 @@
+import page from './page.hbs'
+import {
+    NavigationDataWithTeaser,
+    NavigationDataWithTeaser2,
+    NavigationDataWithTeaser3,
+} from './page.data.js'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Page/Page',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'Default',
+    args: NavigationDataWithTeaser,
+}
+
+export const MitWarnung = {
+    render: Template.bind({}),
+    name: 'Mit Warnung',
+    args: NavigationDataWithTeaser2,
+}
+
+export const MitSubnavigation = {
+    render: Template.bind({}),
+    name: 'Mit Subnavigation',
+    args: NavigationDataWithTeaser3,
+}

package/src/stories/views/components/page/page_pagination.data.js

@@ -0,0 +1,8 @@
+import structuredClone from 'core-js-pure/actual/structured-clone'
+import navigationData from '../site_header/fixtures/site_header_default.json'
+import mixedContent from '../page/fixtures/page_pagination.json'
+const NavigationDataWithMixedContent = structuredClone(
+    Object.assign({}, navigationData, mixedContent)
+)
+
+export { NavigationDataWithMixedContent }

package/src/stories/views/components/page/page_pagination.hbs

@@ -54,7 +54,7 @@
             </main>
             
             <div class="flex flex-wrap justify-center w-full max-w-full">
-                {{> components/pagination/pagination }} 
+                {{> components/pagination/pagination this }} 
             </div>
         </div>
     </body>

package/src/stories/views/components/page/page_pagination.mdx

@@ -0,0 +1,8 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PagePaginationStories from './page_pagination.stories'
+
+<Meta of={PagePaginationStories} />
+
+<Canvas withToolbar>
+    <Story of={PagePaginationStories.MitPagination} />
+</Canvas>

package/src/stories/views/components/page/page_pagination.stories.js

@@ -0,0 +1,34 @@
+import { NavigationDataWithMixedContent } from './page_pagination.data.js'
+import page from './page_pagination.hbs'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Page/Pagination',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const MitPagination = {
+    render: Template.bind({}),
+    name: 'Mit Pagination',
+    args: NavigationDataWithMixedContent,
+}

package/src/stories/views/components/page/page_player.mdx

@@ -0,0 +1,21 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PagePlayerStories from './page_player.stories'
+
+<Meta of={PagePlayerStories} />
+
+# Page (gemischte Inhalte)
+
+Hier werden nur gemischte Inhalte betrachtet. Hierfür werden Daten-JSONS unterschiedlicher
+Ausprägung (Audio, Podcast) gemischt und herangezogen. Um einer Komponente diese spezifische Inhalte zu übergeben
+wird sie wie folgt aufgerufen:
+
+```html
+{{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}} {{>
+components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
+```
+
+<Canvas>
+    <Story of={PagePlayerStories.PlayerInteraktion} />
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/stories/views/components/page/page_player.stories.js

@@ -0,0 +1,34 @@
+import page from './page_players.hbs'
+import AudioDataMixed from '../page/fixtures/page.json'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return page({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Page/Page mit Player',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const PlayerInteraktion = {
+    render: Template.bind({}),
+    name: 'Player-Interaktion',
+    args: AudioDataMixed,
+}

package/src/stories/views/components/pagination/pagination.hbs

@@ -1,18 +1,19 @@
-{{~#if this.isCurrentPageValid ~}}
+{{~#if currentPageValid ~}}
     {{> components/pagination/pagination_current_page_valid 
-    _moreThanOnePage=this.isMoreThanOnePage
-    _firstPage=this.isFirstPage
-    _secondPage=this.isSecondPage 
-    _notLastPage=this.isNotLastPage   
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPage}}
+    _moreThanOnePage=moreThanOnePage
+    _firstPage=firstPage
+    _secondPage=secondPage 
+    _notLastPage=notLastPage 
+    _notLastButOnePage=notLastButOnePage  
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPage}}
 {{else}}
     {{> components/pagination/pagination_current_page_invalid 
-    _moreThanOnePage=this.isMoreThanOnePage 
-    _onlyTwoPages=this.isOnlyTwoPages 
-    _onlyThreePages=this.isOnlyThreePages 
-    _totalPages=this.totalPages 
-    _currentPage=this.currentPages}}
+    _moreThanOnePage=moreThanOnePage 
+    _onlyTwoPages=onlyTwoPages 
+    _onlyThreePages=onlyThreePages 
+    _totalPages=totalPages 
+    _currentPage=currentPages}}
 {{~/if~}}

package/src/stories/views/components/pagination/pagination_current_page_invalid.hbs

@@ -1,4 +1,4 @@
-<nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+<nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{> components/pagination/pagination_button_left }} 
         <div class="px-20 py-10">
             <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>

package/src/stories/views/components/pagination/pagination_current_page_valid.hbs

@@ -1,5 +1,5 @@
 {{~#if _moreThanOnePage~}}
-    <nav class="flex content-center py-10" role="navigation" aria-label="Paginierung">
+    <nav class="flex content-center justify-center py-10" role="navigation" aria-label="Paginierung">
         {{~#if _onlyTwoPages~}}
              {{> components/pagination/pagination_only_two_pages
              _firstPage=_firstPage 
@@ -17,6 +17,7 @@
                  _firstPage=_firstPage
                  _secondPage=_secondPage   
                  _notLastPage=_notLastPage 
+                 _notLastButOnePage=_notLastButOnePage 
                  _totalPages=_totalPages 
                  _currentPage=_currentPage}}
             {{~/if~}}   

package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs

@@ -11,7 +11,7 @@
         {{> components/pagination/pagination_button_left_linked }}    
         <div class="px-20 py-10">   
             <a href="{{this.firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <span class="pl-5 font-title">2</span>   
             <span class="px-5 py-10 font-title">&hellip;</span>   
             <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
         </div>   
@@ -23,8 +23,8 @@
             <span class="py-10 pl-5 font-title">&hellip;</span>   
             <span class="px-5 py-10 font-bold font-title">{{_currentPage}}</span>   
             {{~#if _notLastPage~}}   
-                {{~#if notLastButOnePage~}}   
-                    <span class="font-title">&hellip;</span>   
+                {{~#if _notLastButOnePage~}}   
+                    <span class="py-10 pr-5 font-title">&hellip;</span>   
                 {{~/if~}}   
                 <a href="{{this.lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>{{_totalPages}}</a>   
             {{~/if~}}   

package/src/stories/views/components/pagination/pagination_only_three_pages.hbs

@@ -1,26 +1,26 @@
 {{~#if _firstPage~}}   
     {{> components/pagination/pagination_button_left }}  
     <div class="px-20 py-10">   
-        <span class="font-title">1</span>   
-        <a href="{{nextItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-        <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
+        <span class="py-10 pr-5 font-title">1</span>   
+        <a href="{{nextItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
+        <a href="{{lastPageItemUrl}}" class="py-10 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
     </div>   
     {{> components/pagination/pagination_button_right_linked }}  
 {{else}}
     {{~#if _secondPage~}}   
         {{> components/pagination/pagination_button_left_linked }}   
         <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-            <span class="font-title">2</span>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <span class="py-10 pr-5 font-title">2</span>   
             <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>3</a>   
         </div>   
         {{> components/pagination/pagination_button_right_linked }}    
     {{else}}   
         {{> components/pagination/pagination_button_left_linked }}   
             <div class="px-20 py-10">   
-            <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
+            <a href="{{firstPageItemUrl}}" class="py-10 pr-5 font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
             <a href="{{lastButOnePageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a>   
-            <span class="font-bold font-title">3</span>   
+            <span class="py-10 pl-5 font-bold font-title">3</span>   
         </div>   
         {{> components/pagination/pagination_button_right }}  
     {{~/if~}}     

package/src/stories/views/components/pagination/pagination_only_two_pages.hbs

@@ -1,7 +1,7 @@
 {{~#if _firstPage~}}
     {{> components/pagination/pagination_button_left }}
     <div class="px-20 py-10"> 
-    <span class="font-title">1</span> 
+    <span class="py-10 pr-5 font-title">1</span> 
     <a href="{{lastPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>2</a> 
     </div> 
     {{> components/pagination/pagination_button_right_linked }}
@@ -9,7 +9,7 @@
      {{> components/pagination/pagination_button_left_linked }} 
     <div class="px-20 py-10">   
         <a href="{{firstPageItemUrl}}" class="font-bold sb-link js-load hover:underline text-toplineColor font-title"><span class="hidden">Zur Seite </span>1</a>   
-        <span class="font-title">2</span>   
+        <span class="py-10 pl-5 font-title">2</span>   
     </div>   
     {{> components/pagination/pagination_button_right }}     
 {{~/if~}}