hr-design-system-handlebars 1.102.6 → 1.103.0

package/src/stories/views/components/site_header/header.stories.js

@@ -1,18 +1,22 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
 import navigation from './header.hbs'
-import brandnav from './brand_navigation/brand_navigation.hbs'
-import JsonData from './fixtures/site_header_default.json'
-import JsonData2 from './fixtures/site_header_mit_warnung.json'
-import JsonData3 from './fixtures/site_header_mit_submenu.json'
-import JsonDataTopTopics from './fixtures/site_header_mit_top_topics.json'
-import JsonDataHR3 from './fixtures/site_header_mit_submenu_as_flyout_no_sticky.json'
-
-const Template = (args, { globals: { theme } }) => {
-    // 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 navigation({ brand, ...args })
+import fixtures from './fixtures/site_header.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/site_header/header}}  
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
+
 const TemplateHr3 = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
@@ -27,6 +31,7 @@ export default {
     parameters: {
         chromatic: {
             viewports: [360, 768, 1024],
+            disableSnapshot: true
         },
 
         layout: 'fullscreen',
@@ -44,30 +49,40 @@ export default {
 export const Default = {
     render: Template.bind({}),
     name: 'Default',
-    args: JsonData,
+    args: fixtures.default.args,
     parameters: {},
 }
 
 export const MitWarnung = {
     render: Template.bind({}),
     name: 'Mit Warnung',
-    args: JsonData2,
+    args: fixtures.with_warnings.args,
 }
 
 export const MitTopTopics = {
     render: Template.bind({}),
     name: 'Mit Top Topics',
-    args: JsonDataTopTopics,
+    args: fixtures.with_top_topics.args,
 }
 
 export const MitSubnavigation = {
     render: Template.bind({}),
     name: 'Mit Subnavigation',
-    args: JsonData3,
+    args: fixtures.with_submenu.args,
 }
 
 export const MitSubnavigationAlsFlyout = {
     render: TemplateHr3.bind({}),
     name: 'Mit Subnavigation als Flyout',
-    args: JsonDataHR3,
+    args: fixtures.with_submenu_as_flyout_not_sticky.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/cluster/teaser_cluster.stories.js

@@ -1,28 +1,18 @@
-import cluster from './teaser_cluster.hbs'
-import clusterTeaser100 from '../fixtures/cluster_teaser_100.json'
-import clusterTeaser50 from '../fixtures/cluster_teaser_50.json'
-import clusterTeaser33 from '../fixtures/cluster_teaser_33.json'
-import clusterTeaserOrdered100 from '../fixtures/cluster_teaser_ordered_100.json'
-import clusterTeaserOrdered50 from '../fixtures/cluster_teaser_ordered_50.json'
-import clusterTeaserOrdered33 from '../fixtures/cluster_teaser_ordered_33.json'
-import clusterTeaserExtern100 from '../fixtures/cluster_teaser_extern_100.json'
-import clusterTeaserExtern50 from '../fixtures/cluster_teaser_extern_50.json'
-import clusterTeaserExtern33 from '../fixtures/cluster_teaser_extern_33.json'
-import clusterTeaserGenre100 from '../fixtures/cluster_teaser_100_genre.json'
-import clusterTeaserGenre50 from '../fixtures/cluster_teaser_50_genre.json'
-import clusterTeaserGenre33 from '../fixtures/cluster_teaser_33_genre.json'
-import clusterTeaserImage100 from '../fixtures/cluster_teaser_100_image.json'
-import clusterTeaserImage50 from '../fixtures/cluster_teaser_50_image.json'
-import clusterTeaserImage33 from '../fixtures/cluster_teaser_33_image.json'
-import PodcastChannelClusterTeaser from '../fixtures/cluster_teaser_Podcast_Channel.json'
-import clusterTeaserOrdered33LongTitle from '../fixtures/cluster_teaser_33_long_title.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 cluster({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/fixtures/teaser_cluster.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/cluster/teaser_cluster }}   
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -32,6 +22,7 @@ export default {
         layout: '',
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -39,9 +30,9 @@ export default {
 
     decorators: [
         (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+            return `<div class="grid grid-page">  
              ${Story()} 
-             </div></div>`
+             </div>`
         },
     ],
 }
@@ -49,101 +40,230 @@ export default {
 export const Kurzmeldungen100 = {
     render: Template.bind({}),
     name: 'Kurzmeldungen 100',
-    args: clusterTeaser100,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100"].args,
 }
 
 export const Kurzmeldungen50 = {
     render: Template.bind({}),
     name: 'Kurzmeldungen 50',
-    args: clusterTeaser50,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_50["50"].args,
 }
 
 export const Kurzmeldungen33 = {
     render: Template.bind({}),
     name: 'Kurzmeldungen 33',
-    args: clusterTeaser33,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33"].args,
 }
 
 export const SchlagzeilenMitGenrebild100 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Genrebild 100',
-    args: clusterTeaserGenre100,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100"].args,
 }
 
 export const SchlagzeilenMitGenrebild50 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Genrebild 50',
-    args: clusterTeaserGenre50,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_50["50_with_genre_image"].args,
 }
 
 export const SchlagzeilenMitGenrebild33 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Genrebild 33',
-    args: clusterTeaserGenre33,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33_with_genre_image"].args,
 }
 
 export const SchlagzeilenMitTeaserbild100 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Teaserbild 100',
-    args: clusterTeaserImage100,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100_with_image"].args,
 }
 
 export const SchlagzeilenMitTeaserbild50 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Teaserbild 50',
-    args: clusterTeaserImage50,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_50["50_with_image"].args,
 }
 
 export const SchlagzeilenMitTeaserbild33 = {
     render: Template.bind({}),
     name: 'Schlagzeilen mit Teaserbild 33',
-    args: clusterTeaserImage33,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33_with_image"].args,
 }
 
 export const MeistgeklicktWanda100 = {
     render: Template.bind({}),
     name: 'Meistgeklickt/Wanda 100',
-    args: clusterTeaserOrdered100,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100_ordered"].args,
 }
 
 export const MeistgeklicktWanda50 = {
     render: Template.bind({}),
     name: 'Meistgeklickt/Wanda 50',
-    args: clusterTeaserOrdered50,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_50["50_ordered"].args,
 }
 
 export const MeistgeklicktWanda33 = {
     render: Template.bind({}),
     name: 'Meistgeklickt/Wanda 33',
-    args: clusterTeaserOrdered33,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33_ordered"].args,
 }
 
 export const TagesschauSportschau100 = {
     render: Template.bind({}),
     name: 'tagesschau/sportschau 100',
-    args: clusterTeaserExtern100,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100_external"].args,
 }
 
 export const TagesschauSportschau50 = {
     render: Template.bind({}),
     name: 'tagesschau/sportschau 50',
-    args: clusterTeaserExtern50,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_50["50_external"].args,
 }
 
 export const TagesschauSportschau33 = {
     render: Template.bind({}),
     name: 'tagesschau/sportschau 33',
-    args: clusterTeaserExtern33,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33_external"].args,
 }
 
 export const PodcastEpisodenClusterTeaser = {
     render: Template.bind({}),
     name: 'PodcastEpisoden ClusterTeaser',
-    args: PodcastChannelClusterTeaser,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_100["100_podcast_channel"].args,
 }
 
 export const MeistgeklicktBoxMitLangemTitel = {
     render: Template.bind({}),
     name: 'Meistgeklickt-Box mit langem Titel',
-    args: clusterTeaserOrdered33LongTitle,
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.group_33["33_ordered_with_long_title"].args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/components/fixtures/teaser_byline.json

@@ -0,0 +1 @@
+{"config":{"renderSnapshotsWrapper":false,"path":"args.logicItem.includeModel","template":"default"},"byline_with_teaser_info":{"args":{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","realTeaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcast":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"moreThenOneEvent":false,"moreThenTwoEvents":false,"firstInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Do","day":"9"}},"lastInstant":{"startDate":{"monthNameShort":"APR","weekdayNameShort":"Fr","day":"10"}},"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}},"byline_with_comments_and_teaser_info":{"args":{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","realTeaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"commentsSsi":{"commentNumber":"1","hasOneComment":true,"hasComments":true,"hasManyComments":false,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}},"byline_with_comments":{"args":{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","realTeaserSize":"hero","isMobile1to1":false,"teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"hasByline":true,"teaserInfo":{"showTeaserInfo":false,"showTeaserInfoSection":true,"showTeaserInfoChannel":false,"showTeaserInfoAll":false,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":false},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"Vorname Nachname","imageJson":"Beispiel JSON","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/rueckkehr-nach-abschiebung-102_v-16to9__small.jpg 320w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium.jpg 480w, images/rueckkehr-nach-abschiebung-102_v-16to9__medium__extended.jpg 640w, images/rueckkehr-nach-abschiebung-102_v-16to9.jpg 960w, images/rueckkehr-nach-abschiebung-102_v-16to9__retina.jpg 1920w"}]}},"commentsSsi":{"commentNumber":"1","hasOneComment":true,"hasComments":true,"hasManyComments":false,"commentLink":{"link":{"url":"/teaser1-comments","webviewUrl":"/teaser1-comments#webview","isTargetBlank":false,"readMoreText":{"readMoreScreenreader":"Zu den Kommentaren des Artikels"}}}},"documentSection":"Gesellschaft","displayTeaserBodyAsImageOverlay":false,"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isAudioOnDemand":false,"isVideo":false,"isVideoOnDemand":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","hideBylineAndShorttext":false,"sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}}}}}

package/src/stories/views/components/teaser/components/fixtures/teaser_headings.json

@@ -0,0 +1 @@
+{"config":{"template":"default"},"1_hero":{"config":{"css":"w-full"},"args":{"_topline":"Das ist eine wirklich sehr lange Topline","_title":"Das ist eine wirklich sehr lange Headline","_extendedTitle":"Das ist ein erweiterter Titel","_headlineTag":"h1","_fontVariant":"serif","_size":"hero","_teaserType":"standard"}},"2_50":{"config":{"css":"w-full"},"args":{"_topline":"Das ist eine wirklich sehr lange Topline","_title":"Das ist eine wirklich sehr lange Headline","_extendedTitle":"Das ist ein erweiterter Titel","_headlineTag":"h1","_fontVariant":"serif","_size":"50","_teaserType":"standard"}},"3_33":{"config":{"css":"w-full"},"args":{"_topline":"Das ist eine wirklich sehr lange Topline","_title":"Das ist eine wirklich sehr lange Headline","_extendedTitle":"Das ist ein erweiterter Titel","_headlineTag":"h1","_fontVariant":"serif","_size":"33","_teaserType":"standard"}},"4_25":{"config":{"css":"w-full"},"args":{"_topline":"Das ist eine wirklich sehr lange Topline","_title":"Das ist eine wirklich sehr lange Headline","_extendedTitle":"Das ist ein erweiterter Titel","_headlineTag":"h1","_fontVariant":"serif","_size":"25","_teaserType":"standard"}}}

package/src/stories/views/components/teaser/components/fixtures/teaser_text.json

@@ -0,0 +1 @@
+{"config":{"template":"default"},"1_hero":{"config":{"css":"w-full"},"args":{"_text":"Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.","_size":"hero","_font":"md:text-base md:leading-4 lg:leading-5"}},"2_50":{"config":{"css":"w-full"},"args":{"_text":"Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.","_size":"50","_font":"md:text-base md:leading-4 lg:leading-5"}},"3_33":{"config":{"css":"w-full"},"args":{"_text":"Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.","_size":"33","_font":"md:text-base md:leading-4 lg:leading-5"}},"4_25":{"config":{"css":"w-full"},"args":{"_text":"Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.","_size":"25","_font":"md:text-base md:leading-4 lg:leading-5"}}}

package/src/stories/views/components/teaser/components/fixtures/teaser_title.json

@@ -0,0 +1 @@
+{"config":{"template":"default"},"1_hero":{"config":{"css":"w-full"},"args":{"_text":"Dies ist der Titel eines 100%-Teasers","_size":"hero","_fontVariant":"serif","_teaserType":"standard"}},"2_normal":{"config":{"css":"w-full"},"args":{"_text":"Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers","_size":"33","_fontVariant":"serif","_teaserType":"standard"}},"3_small":{"config":{"css":"w-full"},"args":{"_text":"Dies ist der Titel eines 25%-Teasers","_size":"25","_fontVariant":"serif","_teaserType":"standard"}}}

package/src/stories/views/components/teaser/components/teaser_byline.stories.js

@@ -1,30 +1,54 @@
-import byline from './teaser_byline.hbs'
-import teaserWithoutComments from '../fixtures/teaser_standard_hero_serif.json'
-import teaserWithComments from '../fixtures/teaser_standard_hero_serif_comments.json'
-import teaserWithoutTeaserinfo from '../fixtures/teaser_comments_without_teaserinfo.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/components/fixtures/teaser_byline.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+        {{> components/teaser/components/teaser_byline}} 
+  `)
 
 const Template = ({ ...args }) => {
-    return byline({ ...args })
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
     title: 'Komponenten/Teaser/Komponenten/Byline',
+    parameters: {
+        chromatic: {
+            diffThreshold: 0.3,
+            disableSnapshot: true
+        },
+    },
 }
 
 export const Default = {
     render: Template.bind({}),
     name: 'default',
-    args: teaserWithoutComments.logicItem.includeModel,
+    args: fixtures.byline_with_teaser_info.args.logicItem.includeModel,
 }
 
 export const WithComments = {
     render: Template.bind({}),
     name: 'with comments',
-    args: teaserWithComments.logicItem.includeModel,
+    args: fixtures.byline_with_comments_and_teaser_info.args.logicItem.includeModel,
 }
 
 export const CommentsOnly = {
     render: Template.bind({}),
     name: 'comments only',
-    args: teaserWithoutTeaserinfo.logicItem.includeModel,
+    args: fixtures.byline_with_comments.args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/components/teaser_heading.stories.js

@@ -1,14 +1,31 @@
-import teaserHeading from './teaser_heading.hbs'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/components/fixtures/teaser_headings.json'
 
-const Template = ({ _topline, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return teaserHeading({ _topline, ...args })
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/components/teaser_heading }}   
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
     title: 'Komponenten/Teaser/Komponenten/Teaserheading',
 
+    parameters: {
+
+        chromatic: {
+            diffThreshold: 0.3,
+            disableSnapshot: true
+        },
+    },
+
     argTypes: {
         _topline: {
             control: 'text',
@@ -80,15 +97,7 @@ export const SerifHero = {
         },
     },
 
-    args: {
-        _topline: 'Das ist eine wirklich sehr lange Topline',
-        _title: 'Das ist eine wirklich sehr lange Headline',
-        _extendedTitle: 'Das ist ein erweiterter Titel',
-        _headlineTag: 'h1',
-        _fontVariant: 'serif',
-        _size: 'hero',
-        _teaserType: 'standard',
-    },
+    args: fixtures["1_hero"].args
 }
 
 export const Serif50 = {
@@ -103,14 +112,7 @@ export const Serif50 = {
         },
     },
 
-    args: {
-        _topline: 'Das ist eine wirklich sehr lange Topline',
-        _title: 'Das ist eine wirklich sehr lange Headline',
-        _headlineTag: 'h1',
-        _fontVariant: 'serif',
-        _size: '50',
-        _teaserType: 'standard',
-    },
+    args: fixtures["2_50"].args
 }
 
 export const Serif33 = {
@@ -125,14 +127,7 @@ export const Serif33 = {
         },
     },
 
-    args: {
-        _topline: 'Das ist eine wirklich sehr lange Topline',
-        _title: 'Das ist eine wirklich sehr lange Headline',
-        _headlineTag: 'h1',
-        _fontVariant: 'serif',
-        _size: '33',
-        _teaserType: 'standard',
-    },
+    args: fixtures["3_33"].args
 }
 
 export const Serif25 = {
@@ -147,12 +142,15 @@ export const Serif25 = {
         },
     },
 
-    args: {
-        _topline: 'Das ist eine wirklich sehr lange Topline',
-        _title: 'Das ist eine wirklich sehr lange Headline',
-        _headlineTag: 'h1',
-        _fontVariant: 'serif',
-        _size: '25',
-        _teaserType: 'standard',
-    },
+    args: fixtures["4_25"].args
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }