hr-design-system-handlebars 1.102.6 → 1.103.0

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

@@ -1,30 +1,20 @@
-import teaser from './teaser_standard.hbs'
-import teaserHeroSerifWithLabel from './fixtures/teaser_standard_hero_serif_label.json'
-import teaserHeroSerifWithComments from './fixtures/teaser_standard_hero_serif_comments.json'
-import teaserHeroLink from './fixtures/teaser_standard_hero_serif_link.json'
-import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
-import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
-import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
-import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
-import teaser50SerifFeaturedContent from './fixtures/teaser_standard_50_serif_featured_content'
-import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
-import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
-import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'
-import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
-import teaser100Link from './fixtures/teaser_standard_100_serif_link.json'
-import teaser100Program from './fixtures/teaser_standard_100_serif_program.json'
-import teaser50Link from './fixtures/teaser_standard_50_serif_link.json'
-import teaser50LinkTwoClick from './fixtures/teaser_standard_50_serif_link_two_click.json'
-import teaser33Link from './fixtures/teaser_standard_33_serif_link.json'
-import teaser25Link from './fixtures/teaser_standard_25_serif_link.json'
-import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.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 teaser({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/teaser_standard.json'
+
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_standard }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -36,6 +26,7 @@ export default {
         chromatic: {
             viewports: [360, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -58,9 +49,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>`
         },
     ],
 }
@@ -68,113 +59,256 @@ export default {
 export const StandardHero = {
     render: Template.bind({}),
     name: 'Standard Hero',
-    args: teaserHeroSerif.logicItem.includeModel,
+    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_hero.hero.args.logicItem.includeModel,
 }
 
 export const StandardHeroMitLabel = {
     render: Template.bind({}),
     name: 'Standard Hero mit Label',
-    args: teaserHeroSerifWithLabel.logicItem.includeModel,
+    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_hero.hero_with_label.args.logicItem.includeModel,
 }
 
 export const StandardHeroMitKommentaren = {
     render: Template.bind({}),
     name: 'Standard Hero Mit Kommentaren',
-    args: teaserHeroSerifWithComments.logicItem.includeModel,
+    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_hero.hero_with_comments.args.logicItem.includeModel,
 }
 
 export const StandardHeroMitExternemLink = {
     render: Template.bind({}),
     name: 'Standard Hero mit externem Link',
-    args: teaserHeroLink.logicItem.includeModel,
+    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_hero.hero_with_external_link.args.logicItem.includeModel,
 }
 
 export const Standard100 = {
     render: Template.bind({}),
     name: 'Standard 100',
-    args: teaser100Serif.logicItem.includeModel,
+    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.logicItem.includeModel,
 }
 
 export const Standard100MitExternemLink = {
     render: Template.bind({}),
     name: 'Standard 100 mit externem Link',
-    args: teaser100Link.logicItem.includeModel,
+    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_external_link'].args.logicItem.includeModel,
 }
 
 export const Standard100MitSendungsdokument = {
     render: Template.bind({}),
     name: 'Standard 100 mit Sendungsdokument',
-    args: teaser100Program.logicItem.includeModel,
+    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_program'].args.logicItem.includeModel,
 }
 
 export const Standard50 = {
     render: Template.bind({}),
     name: 'Standard 50',
-    args: teaser50Serif.logicItem.includeModel,
+    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.logicItem.includeModel,
 }
 
 export const Standard50OhneTeaserbild = {
     render: Template.bind({}),
     name: 'Standard 50 ohne Teaserbild',
-    args: teaser50SerifWithoutTeaserImage.logicItem.includeModel,
+    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_without_teaserimage'].args.logicItem.includeModel,
 }
 
 export const Standard50MitExternemLink = {
     render: Template.bind({}),
     name: 'Standard 50 mit externem Link',
-    args: teaser50Link.logicItem.includeModel,
+    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_external_link'].args.logicItem.includeModel,
 }
 
 export const Standard50LinkWithTwoClick = {
     render: Template.bind({}),
     name: 'Standard 50 mit zwei Klick Lösung',
-    args: teaser50LinkTwoClick.logicItem.includeModel,
+    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_external_link_and_user_consent'].args.logicItem.includeModel,
 }
 
 export const Standard50MitFeaturedContent = {
     render: Template.bind({}),
     name: 'Standard 50 mit Zeilenteaser',
-    args: teaser50SerifFeaturedContent,
+    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_featured_content'].args,
 }
 
 export const Standard33 = {
     render: Template.bind({}),
     name: 'Standard 33',
-    args: teaser33Serif.logicItem.includeModel,
+    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.logicItem.includeModel,
 }
 
 export const Standard33MitExternemLink = {
     render: Template.bind({}),
     name: 'Standard 33 mit externem Link',
-    args: teaser33Link.logicItem.includeModel,
+    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_external_link'].args.logicItem.includeModel,
 }
 
 export const Standard25 = {
     render: Template.bind({}),
     name: 'Standard 25',
-    args: teaser25Serif.logicItem.includeModel,
+    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_25[25].args.logicItem.includeModel,
 }
 
 export const Standard25OhneTeaserbild = {
     render: Template.bind({}),
     name: 'Standard 25 ohne Teaserbild',
-    args: teaser25SerifWithoutTeaserimage.logicItem.includeModel,
+    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_25['25_without_teaserimage'].args.logicItem.includeModel,
 }
 
 export const Standard25MitExternemLink = {
     render: Template.bind({}),
     name: 'Standard 25 mit externem Link',
-    args: teaser25Link.logicItem.includeModel,
+    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_25['25_with_external_link'].args.logicItem.includeModel,
 }
 
 export const Standard100MitDownload = {
     render: Template.bind({}),
     name: 'Standard 100 Mit Download',
-    args: teaser100Download.logicItem.includeModel,
+    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_download'].args.logicItem.includeModel,
 }
 
 export const Standard33MitLangerOrtsmarke = {
     render: Template.bind({}),
     name: 'Standard 33 mit langer Ortsmarke',
-    args: teaser33LongGeotag.logicItem.includeModel,
+    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_long_geotag'].args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1,22 +1,18 @@
-import teaser from './teaser_standard.hbs'
-
-import teaser50video from './fixtures/teaser_standard_50_serif_video.json'
-import teaser25video from './fixtures/teaser_standard_25_serif_video.json'
-import teaser50audio from './fixtures/teaser_standard_50_serif_audio.json'
-import teaser50podcast from './fixtures/teaser_standard_50_serif_podcast.json'
-import teaser25podcast from './fixtures/teaser_standard_25_serif_podcast.json'
-import teaser50audioLivestream from './fixtures/teaser_standard_50_serif_audio_livestream.json'
-import teaser25audio from './fixtures/teaser_standard_25_serif_audio.json'
-import teaser25audioLivestream from './fixtures/teaser_standard_25_serif_audio_livestream.json'
-import teaser50live from './fixtures/teaser_standard_50_serif_live.json'
-import teaser25live from './fixtures/teaser_standard_25_serif_live.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 teaser({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/teaser_standard_av.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_standard }}   
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -27,6 +23,7 @@ export default {
 
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -49,9 +46,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>`
         },
     ],
 }
@@ -59,59 +56,139 @@ export default {
 export const Standard50Video = {
     render: Template.bind({}),
     name: 'Standard 50% Video',
-    args: teaser50video.logicItem.includeModel,
+    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.video_ondemand.args.logicItem.includeModel,
 }
 
 export const Standard25Video = {
     render: Template.bind({}),
     name: 'Standard 25% Video',
-    args: teaser25video.logicItem.includeModel,
+    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_25.video_ondemand.args.logicItem.includeModel,
 }
 
 export const Standard50VideoLivestream = {
     render: Template.bind({}),
     name: 'Standard 50% Video Livestream',
-    args: teaser50live.logicItem.includeModel,
+    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.video_livestream.args.logicItem.includeModel,
 }
 
 export const Standard25VideoLivestream = {
     render: Template.bind({}),
     name: 'Standard 25% Video Livestream',
-    args: teaser25live.logicItem.includeModel,
+    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_25.video_livestream.args.logicItem.includeModel,
 }
 
 export const Standard50Audio = {
     render: Template.bind({}),
     name: 'Standard 50% Audio',
-    args: teaser50audio.logicItem.includeModel,
+    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.audio_ondemand.args.logicItem.includeModel,
 }
 
 export const Standard25Audio = {
     render: Template.bind({}),
     name: 'Standard 25% Audio',
-    args: teaser25audio.logicItem.includeModel,
+    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_25.audio_ondemand.args.logicItem.includeModel,
 }
 
 export const Standard50Podcast = {
     render: Template.bind({}),
     name: 'Standard 50% Podcast',
-    args: teaser50podcast.logicItem.includeModel,
+    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.podcast.args.logicItem.includeModel,
 }
 
 export const Standard25Podcast = {
     render: Template.bind({}),
     name: 'Standard 25% Podcast',
-    args: teaser25podcast.logicItem.includeModel,
+    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_25.podcast.args.logicItem.includeModel,
 }
 
 export const Standard50AudioLivestream = {
     render: Template.bind({}),
     name: 'Standard 50% Audio Livestream',
-    args: teaser50audioLivestream.logicItem.includeModel,
+    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.audio_event_livestream.args.logicItem.includeModel,
 }
 
 export const Standard25AudioLivestream = {
     render: Template.bind({}),
     name: 'Standard 25% Audio Livestream',
-    args: teaser25audioLivestream.logicItem.includeModel,
+    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_25.audio_event_livestream.args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }