hr-design-system-handlebars 1.102.6 → 1.103.0

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.stories.js

@@ -1,13 +1,20 @@
-import breadcrumb from './breadcrumb.hbs'
-import breadcrumb2LevelData from './fixtures/breadcrumb_2_level.json'
-import breadcrumb3LevelData from './fixtures/breadcrumb_3_level.json'
-import breadcrumb4LevelData from './fixtures/breadcrumb_4_level.json'
-import breadcrumb5LevelData from './fixtures/breadcrumb_5_level.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/breadcrumb.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/navigation/breadcrumb/breadcrumb}}  
+  `)
 
 const Template = (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    return breadcrumb({ ...args })
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -44,6 +51,9 @@ export default {
         controls: {
             sort: 'alpha',
         },
+        chromatic: {
+            disableSnapshot: true
+        },
     },
     decorators: [
         (Story) => {
@@ -60,42 +70,33 @@ export default {
 export const breadcrumb2Level = {
     render: Template.bind({}),
     name: 'Breadcrumb 2 Level',
-    args: {
-        _currentPageUrl: '#currentPage',
-        _currentPageTitle: 'Kurzer Titel',
-        ...breadcrumb2LevelData.breadcrumb,
-    },
+    args: fixtures['2_levels'].args,
 }
 
 export const breadcrumb3Level = {
     render: Template.bind({}),
     name: 'Breadcrumb 3 Level',
-    args: {
-        _currentPageUrl: '#currentPage',
-        _currentPageTitle:
-            'Korruptionsprozess: Verteidigung von Ex-Oberstaatsanwalt plädiert auf höchstens vier Jahre Haft',
-        ...breadcrumb3LevelData.breadcrumb,
-    },
+    args: fixtures['3_levels'].args,
 }
 
 export const breadcrumb4Level = {
     render: Template.bind({}),
     name: 'Breadcrumb 4 Level',
-    args: {
-        _currentPageUrl: '#currentPage',
-        _currentPageTitle:
-            'Darmstadt 98 bleibt trotz Enttäuschung cool: "Keinen Stift in der Hose" ',
-        ...breadcrumb4LevelData.breadcrumb,
-    },
+    args: fixtures['4_levels'].args,
 }
 
 export const breadcrumb5Level = {
     render: Template.bind({}),
     name: 'Breadcrumb 5 Level',
-    args: {
-        _currentPageUrl: '#currentPage',
-        _currentPageTitle:
-            'Verein bestätigt: Eintracht Frankfurt trennt sich im Sommer von Oliver Glasner',
-        ...breadcrumb5LevelData.breadcrumb,
-    },
+    args: fixtures['5_levels'].args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/navigation/breadcrumb/fixtures/breadcrumb.json

@@ -0,0 +1 @@
+{"config":{"template":"default"},"2_levels":{"args":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"}]},"_currentPageUrl":"#currentPage","_currentPageTitle":"Kurzer Titel"}},"3_levels":{"args":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"panorama","title":"Panorama"}]},"_currentPageUrl":"#currentPage","_currentPageTitle":"Korruptionsprozess: Verteidigung von Ex-Oberstaatsanwalt plädiert auf höchstens vier Jahre Haft"}},"4_levels":{"args":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"sport","title":"Sport"},{"url":"darmstadt98","title":"Darmstadt 98"}]},"_currentPageUrl":"#currentPage","_currentPageTitle":"Darmstadt 98 bleibt trotz Enttäuschung cool: \"Keinen Stift in der Hose\""}},"5_levels":{"args":{"showBreadcrumbTitleAlways":false,"breadcrumbSsi":{"breadcrumb":[{"url":"item-1","title":"Start"},{"url":"sport","title":"Sport"},{"url":"fussball","title":"Fußball"},{"url":"eintracht","title":"Eintracht Frankfurt"}]},"_currentPageUrl":"#currentPage","_currentPageTitle":"Verein bestätigt: Eintracht Frankfurt trennt sich im Sommer von Oliver Glasner"}}}

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

@@ -1,16 +1,21 @@
-import metadatabox_template from './metadatabox.hbs'
-import metadatabox_json from '../fixtures/metadatabox.json'
-import metadatabox_comments_json from '../fixtures/metadatabox_comments.json'
-import metadatabox_one_author_json from '../fixtures/metadatabox_one_author.json'
-import metadatabox_one_author_without_picture_json from '../fixtures/metadatabox_one_author_without_picture.json'
-import metadatabox_one_author_comments_json from '../fixtures/metadatabox_one_author_comments.json'
-import metadatabox_more_authors_json from '../fixtures/metadatabox_more_authors.json'
-import metadatabox_more_authors_comments_json from '../fixtures/metadatabox_more_authors_comments.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from '../fixtures/metadatabox.json'
 
-const Template = ({ ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<span>${topline}</span>`;
-    return metadatabox_template({ ...args })
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/page/components/metadatabox}}  
+  `)
+
+
+
+const Template = (args) => {
+    console.log("Args: ", args)
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -21,6 +26,18 @@ export default {
             description: 'Datum anzeigen',
         },
     },
+    parameters: {
+        controls: {
+            sort: 'alpha',
+        },
+        chromatic: {
+            disableSnapshot: true
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
     decorators: [
         (Story) => {
             return `<div class="max-w-[724px] mx-auto mt-60">  
@@ -28,46 +45,93 @@ export default {
              </div>`
         },
     ],
-}
-
-export const Default = {
-    render: Template.bind({}),
     name: 'Nur Datum',
-    args: metadatabox_json,
+    args: fixtures.metadatabox.args,
 }
 
 export const WithComments = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Datum und Kommentar-Link',
-    args: metadatabox_comments_json,
+    args: fixtures.metadatabox_with_comments.args,
 }
 
 export const WithOneAuthor = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Ein Autor',
-    args: metadatabox_one_author_json,
+    args: fixtures.metadatabox_with_one_author.args,
 }
 
 export const WithOneAuthorWithoutPicture = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Ein Autor ohne Bild',
-    args: metadatabox_one_author_without_picture_json,
+    args: fixtures.metadatabox_with_one_author_and_without_picture.args,
 }
 
 export const WithMoreAuthors = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Mehrere Autoren',
-    args: metadatabox_more_authors_json,
+    args: fixtures.metadatabox_with_more_authors.args,
 }
 
 export const WithOneAuthorAndComments = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Ein Autor und Kommentar-Link',
-    args: metadatabox_one_author_comments_json,
+    args: fixtures.metadatabox_with_one_author_and_comments.args,
 }
 
 export const WithMoreAuthorsAndComments = {
     render: Template.bind({}),
+    decorators: [
+        (Story) => {
+            return `<div class="max-w-[724px] mx-auto mt-60">  
+             ${Story()} 
+             </div>`
+        },
+    ],
     name: 'Mehrere Autoren und Kommentar-Link',
-    args: metadatabox_more_authors_comments_json,
+    args: fixtures.metadatabox_with_more_authors_and_comments.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1 +1 @@
-{"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"}}
+{"config":{"template":"default"},"metadatabox":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"}}},"metadatabox_with_comments":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"},"userComments":{"HasOneComment":false,"quantity":"117"}}},"metadatabox_with_one_author":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasOneAuthor":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"authorTitle":"Steffen Rebhahn","textAfterAuthor":"(Redaktion hessenschau.de)","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"}}},"metadatabox_with_one_author_and_comments":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasOneAuthor":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"authorTitle":"Steffen Rebhahn","textAfterAuthor":"(Redaktion hessenschau.de)","authorImage":{"isImage":true,"caption":"Steffen Rebhahn","copyrightWithLinks":"hr","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1_small.jpg","sources":[{"sizes":"50px","srcset":"images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__xsmall.jpg 260w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__small.jpg 380w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__medium.jpg 480w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1.jpg 720w, images/mitarbeiter-portraet-steffen-rebhahn-106_v-1to1__large.jpg 960w"}]}},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"},"userComments":{"HasOneComment":false,"quantity":"117"}}},"metadatabox_with_one_author_and_without_picture":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasOneAuthor":true,"hasMoreThanOneAuthor":false,"hasDwellTime":true,"authorTitle":"Steffen Rebhahn","textAfterAuthor":"(Redaktion hessenschau.de)","authorImage":{},"authorUrl":"/author-url","webviewAuthorUrl":"webview-author-url","documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"}}},"metadatabox_with_more_authors":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasMoreThanOneAuthor":true,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"}}},"metadatabox_with_more_authors_and_comments":{"config":{"css":"w-[724px] mx-auto"},"args":{"_showDate":true,"hasMoreThanOneAuthor":true,"hasDwellTime":true,"documentModificationDate":{"isModificationDate":false,"isPublicationDate":true,"htmlDateTime":"2024-02-15T19:30+0200","date":"15.02.24","time":"19:30"},"authorItems":[{"hasProfileLink":false,"from":"Von","textAfterAuthor":"Horst Schlämmer","delimiter":", "},{"hasProfileLink":false,"from":"","textAfterAuthor":"Karl Dall","delimiter":" und "},{"hasProfileLink":true,"from":"","authorName":"Peter Lustig","delimiter":"","link":{"url":"/author-url","isTargetBlank":false}}],"socialSharing":{"twitterLink":"/twitterLink-url","facebookLink":"/facebookLink-url","whatsappLink":"/whatsappLink-url","mailtoLink":"/mailtoLink-url","copyToClipboardLink":"/copyToClipboard-url"},"userComments":{"HasOneComment":false,"quantity":"117"}}}}

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

@@ -1,28 +1,24 @@
 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 hero_teaser from '../../teaser/fixtures/teaser_standard_hero_serif.json'
+import NavigationData from '../../site_header/fixtures/site_header.json'
+import teaserStandard from '../../teaser/fixtures/teaser_standard.json'
 
 import data_story from '../story/fixtures/story.json'
-import data_breadcrumb from '../../navigation/breadcrumb/fixtures/breadcrumb_5_level.json'
+import data_breadcrumb from '../../navigation/breadcrumb/fixtures/breadcrumb.json'
 
 const NavigationDataWithTeaser = structuredClone(
-    Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
+    Object.assign({}, NavigationData.default.args, teaserStandard.group_hero.hero.args.logicItem.includeModel)
 )
 const NavigationDataWithTeaser2 = structuredClone(
-    Object.assign({}, NavigationData2, hero_teaser.logicItem.includeModel)
+    Object.assign({}, NavigationData.with_warnings.args, teaserStandard.group_hero.hero.args.logicItem.includeModel)
 )
 const NavigationDataWithTeaser3 = structuredClone(
-    Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
+    Object.assign({}, NavigationData.with_submenu.args, teaserStandard.group_hero.hero.args.logicItem.includeModel)
 )
 const NavigationDataWithTeaser4 = structuredClone(
-    Object.assign({}, NavigationData4, hero_teaser.logicItem.includeModel)
+    Object.assign({}, NavigationData.with_top_topics.args, teaserStandard.group_hero.hero.args.logicItem.includeModel)
 )
 const NavigationDataWithTeaser5 = structuredClone(
-    Object.assign({}, NavigationData, data_story)
+    Object.assign({}, NavigationData.default.args, data_story)
 )
-const NavigationDataWithBreadcrumb = structuredClone(Object.assign({}, NavigationDataWithTeaser5, data_breadcrumb))
-export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4,NavigationDataWithBreadcrumb  }
+const NavigationDataWithBreadcrumb = structuredClone(Object.assign({}, NavigationDataWithTeaser5, data_breadcrumb['5_levels'].args))
+export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4, NavigationDataWithBreadcrumb }

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

@@ -26,11 +26,11 @@ const Template2 = (args, { globals: { theme } }) => {
     return page_pagination({ brand, ...args })
 }
 
-const Template3 = (args, { globals: { theme } }) => {
+const Template3 = (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau'
-    return page_article({ brand, ...args })
+    console.log("Artikel ", { ...args })
+    return page_article({ ...args })
 }
 export default {
     title: 'Seiten/Index',

package/src/stories/views/components/page/index/page_test_story.hbs

@@ -21,7 +21,7 @@
     
     {{#unless _webview}}
         {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
-            {{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
+            {{> components/navigation/breadcrumb/breadcrumb this _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
         {{/components/banner/header/breadcrumb_wrapper }}   
     {{/unless}}