hr-design-system-handlebars 1.102.6 → 1.103.0

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

@@ -1,25 +1,26 @@
-import podcast from './podcast.hbs'
-import podcastPlaylist from './podcast-playlist.hbs'
-import episodeJson from 'components/teaser/fixtures/teaser_podcast.json'
-import episodeJson50 from 'components/teaser/fixtures/teaser_podcast_50.json'
-import playlistJson100 from 'components/teaser/fixtures/teaser_podcast_playlist.json'
-import playlistJson50 from 'components/teaser/fixtures/teaser_podcast_playlist_50.json'
-import podcastFilter from 'components/teaser/fixtures/teaser_podcast_playlist_filter.json'
-
-const episodeTemplate = (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 podcast({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/fixtures/teaser_podcast.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['episode'] = handlebars.compile(`
+    {{> components/teaser/podcast/podcast }}   
+  `)
+hbsTemplates['playlist'] = handlebars.compile(`
+    {{> components/teaser/podcast/podcast-playlist }}   
+  `)
+
+
+const episodeTemplate = (args) => {
+    return hbsTemplates['episode']({ ...args })
+}
+
+const playlistTemplate = (args) => {
+    return hbsTemplates['playlist']({ ...args })
 }
 
-const playlistTemplate = (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 podcastPlaylist({ brand, ...args })
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -29,6 +30,7 @@ export default {
         chromatic: {
             viewports: [360, 768, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
 
         layout: 'fullscreen',
@@ -50,29 +52,39 @@ export default {
 export const $100EpisodePlayer = {
     render: episodeTemplate.bind({}),
     name: '100% Episode Player',
-    args: episodeJson.logicItem.includeModel,
+    args: fixtures.episode_100.args.logicItem.includeModel,
 }
 
 export const $50EpisodePlayer = {
     render: episodeTemplate.bind({}),
     name: '50% Episode Player',
-    args: episodeJson50.logicItem.includeModel,
+    args: fixtures.episode_50.args.logicItem.includeModel,
 }
 
 export const $100ChannelPlayer = {
     render: playlistTemplate.bind({}),
     name: '100% Channel Player',
-    args: playlistJson100.logicItem.includeModel,
+    args: fixtures.playlist_100.args.logicItem.includeModel,
 }
 
 export const $50ChannelPlayer = {
     render: playlistTemplate.bind({}),
     name: '50% Channel Player',
-    args: playlistJson50.logicItem.includeModel,
+    args: fixtures.playlist_50.args.logicItem.includeModel,
 }
 
 export const $100FilterPlayer = {
     render: playlistTemplate.bind({}),
     name: '100% Filter Player',
-    args: podcastFilter.logicItem.includeModel,
+    args: fixtures.playlist_filter.args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1,25 +1,18 @@
-import { addLabel, removeLabel, changeTeaserSize } from './labelHelper'
-import { addCommentLink } from './jsonHelper'
-import teaser from './teaser_alternativ.hbs'
-import heroTeaser from './fixtures/teaser_alternative_hero_serif.json'
-import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.json'
-import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
-import heroTeaserLink from './fixtures/teaser_alternative_hero_serif_link.json'
-import heroTeaserProgram from './fixtures/teaser_alternative_hero_serif_program.json'
-import teaser100Link from './fixtures/teaser_alternative_100_serif_link.json'
-import teaser100 from './fixtures/teaser_alternative_100_serif.json'
-import teaser100FeaturedContent from './fixtures/teaser_alternative_100_serif_featured_content.json'
-import teaser50 from './fixtures/teaser_alternative_50_serif.json'
-import teaser50WithoutTeaserImage from './fixtures/teaser_alternative_without_teaserimage_50_serif.json'
-import teaser50Link from './fixtures/teaser_alternative_50_serif_link.json'
-import teaser50Download from './fixtures/teaser_alternative_50_serif_download.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_alternative.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_alternativ }}   
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -31,6 +24,7 @@ export default {
         chromatic: {
             viewports: [360, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -53,9 +47,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>`
         },
     ],
 }
@@ -63,71 +57,165 @@ export default {
 export const AlternativHero = {
     render: Template.bind({}),
     name: 'Alternativ Hero',
-    args: heroTeaser.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 AlternativHeroMitKommentaren = {
     render: Template.bind({}),
     name: 'Alternativ Hero mit Kommentaren',
-    args: heroTeaserWithComments.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 AlternativHeroMitLabel = {
     render: Template.bind({}),
     name: 'Alternativ Hero mit Label',
-    args: heroTeaserWithLabel.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 AlternativHeroMitExternenLinkDokument = {
     render: Template.bind({}),
     name: 'Alternativ Hero mit externen Link Dokument',
-    args: heroTeaserLink.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 AlternativHeroMitSendungsdokument = {
     render: Template.bind({}),
     name: 'Alternativ Hero mit Sendungsdokument',
-    args: heroTeaserProgram.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_program.args.logicItem.includeModel,
 }
 
 export const Alternativ100 = {
     render: Template.bind({}),
     name: 'Alternativ 100',
-    args: teaser100.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 Alternativ100MitExternemLink = {
     render: Template.bind({}),
     name: 'Alternativ 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 Alternativ100MitFeaturedContent = {
     render: Template.bind({}),
     name: 'Alternativ 100 mit Zeilenteaser',
-    args: teaser100FeaturedContent,
+    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_featured_content'].args
 }
 
 export const Alternativ50 = {
     render: Template.bind({}),
     name: 'Alternativ 50',
-    args: teaser50.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 Alternativ50OhneTeaserbild = {
     render: Template.bind({}),
     name: 'Alternativ 50 ohne Teaserbild',
-    args: teaser50WithoutTeaserImage.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 Alternativ50MitExternemLink = {
     render: Template.bind({}),
     name: 'Alternativ 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 Alternativ50MitDownload = {
     render: Template.bind({}),
     name: 'Alternativ 50 mit Download',
-    args: teaser50Download.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_download'].args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1,22 +1,18 @@
-import { addLabel, removeLabel, changeTeaserSize } from './labelHelper'
-import { addCommentLink } from './jsonHelper'
-import teaser from './teaser_alternativ.hbs'
-import heroTeaser_video from './fixtures/teaser_alternative_hero_serif_video.json'
-import heroTeaser_audio from './fixtures/teaser_alternative_hero_serif_audio.json'
-import heroTeaser_live from './fixtures/teaser_alternative_hero_serif_live.json'
-import teaser100_video from './fixtures/teaser_alternative_100_serif_video.json'
-import teaser100_audio from './fixtures/teaser_alternative_100_serif_audio.json'
-import teaser100_live from './fixtures/teaser_alternative_100_serif_live.json'
-import teaser50_video from './fixtures/teaser_alternative_50_serif_video.json'
-import teaser50_audio from './fixtures/teaser_alternative_50_serif_audio.json'
-import teaser50_live from './fixtures/teaser_alternative_50_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_alternative_av.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_alternativ }}   
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -28,6 +24,7 @@ export default {
         chromatic: {
             viewports: [360, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -50,9 +47,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>`
         },
     ],
 }
@@ -60,53 +57,207 @@ export default {
 export const AlternativHeroVideo = {
     render: Template.bind({}),
     name: 'Alternativ Hero Video',
-    args: heroTeaser_video.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.video_ondemand.args.logicItem.includeModel,
+}
+
+export const AlternativHeroLive = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero Live',
+    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.video_livestream.args.logicItem.includeModel,
 }
 
 export const AlternativHeroAudio = {
     render: Template.bind({}),
     name: 'Alternativ Hero Audio',
-    args: heroTeaser_audio.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.audio_ondemand.args.logicItem.includeModel,
 }
 
-export const AlternativHeroLive = {
+
+
+export const AlternativHeroAudioEventLivestream = {
     render: Template.bind({}),
-    name: 'Alternativ Hero Live',
-    args: heroTeaser_live.logicItem.includeModel,
+    name: 'Alternativ Hero Audio Livestream',
+    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.audio_event_livestream.args.logicItem.includeModel,
+}
+
+export const AlternativHeroPodcast = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero Podcast',
+    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.podcast.args.logicItem.includeModel,
 }
 
 export const Alternativ100Video = {
     render: Template.bind({}),
     name: 'Alternativ 100 Video',
-    args: teaser100_video.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.video_ondemand.args.logicItem.includeModel,
+}
+
+export const Alternativ100Live = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 Live',
+    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.video_livestream.args.logicItem.includeModel,
 }
 
 export const Alternativ100Audio = {
     render: Template.bind({}),
     name: 'Alternativ 100 Audio',
-    args: teaser100_audio.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.audio_ondemand.args.logicItem.includeModel,
 }
 
-export const Alternativ100Live = {
+export const Alternativ100AudioEventLivestream = {
     render: Template.bind({}),
-    name: 'Alternativ 100 Live',
-    args: teaser100_live.logicItem.includeModel,
+    name: 'Alternativ 100 Audio Livestream',
+    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.audio_event_livestream.args.logicItem.includeModel,
+}
+
+export const Alternativ100Podcast = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 Podcast',
+    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.podcast.args.logicItem.includeModel,
 }
 
 export const Alternativ50Video = {
     render: Template.bind({}),
     name: 'Alternativ 50 Video',
-    args: teaser50_video.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 Alternativ50Live = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 Live',
+    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 Alternativ50Audio = {
     render: Template.bind({}),
     name: 'Alternativ 50 Audio',
-    args: teaser50_audio.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 Alternativ50Live = {
+export const Alternativ50AudioEventLivestream = {
     render: Template.bind({}),
-    name: 'Alternativ 50 Live',
-    args: teaser50_live.logicItem.includeModel,
+    name: 'Alternativ 50 Audio Livestream',
+    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 Alternativ50Podcast = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 Podcast',
+    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 Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
+}
+