hr-design-system-handlebars 1.102.6 → 1.103.1

package/src/stories/views/components/button/link_button.mdx

@@ -72,15 +72,13 @@ Ein Link-Button wird mit der Handlebar Komponente `link_button` eingebunden. Wie
 Komponente lediglich das Grundgerüst eines Buttons dar. Die Beschriftung und/oder ein Icon müssen mit Subkomponenten hinzugefügt
 werden.
 
-<div class="bg-blue-200 !mt-4 p-4">
-  <h4 class="!text-stone-950 font-bold">Hinweis</h4>
+<div className="bg-blue-200 !mt-4 p-4">
+  <h4 className="!text-stone-950 font-bold">Hinweis</h4>
 
-  <p>
     Sowohl die Link-Button-Komponente als auch die Subkomponenten Button-Label und Button-Icon
     sind standardmäßig bereits gestyled. Das setzen von zusätzlichen Style Klassen über den
-    Parameter <pre class="inline">\_css</pre> ist zwar bei jeder Komponente möglich, sollte aber
+    Parameter <code>\_css</code> ist zwar bei jeder Komponente möglich, sollte aber
     nur dann gemacht werden, wenn es gar nicht anders geht.
-  </p>
 </div>
 
 ### Button mit Text

package/src/stories/views/components/button/link_button.stories.js

@@ -1,43 +1,52 @@
+import snapshotsJson from './fixtures/link_button.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
 const handlebars = require('hrHandlebars')
 
-const buttonWithLabelTemplate = (args) => {
-    let hbsTemplate = handlebars.compile(`
+const hbsTemplates = []
+hbsTemplates['buttonWithLabel'] = handlebars.compile(`
     {{#> components/button/link_button}}
         {{> components/button/components/button_label}}
     {{/components/button/link_button}}
   `)
-    return hbsTemplate({ ...args })
-}
-
-const buttonWithLabelTemplateOnBackground = (args) => {
-    let hbsTemplate = handlebars.compile(`
+hbsTemplates['buttonWithLabelOnBackground'] = handlebars.compile(`
     <div class="bg-primary p-4">
         {{#> components/button/link_button}}
             {{> components/button/components/button_label}}
         {{/components/button/link_button}}
     </div>
   `)
-    return hbsTemplate({ ...args })
-}
-
-const buttonWithLabelAndIconRightTemplate = (args) => {
-    let hbsTemplate = handlebars.compile(`
+hbsTemplates['buttonWithLabelAndIconRight'] = handlebars.compile(`
     {{#> components/button/link_button}}
         {{> components/button/components/button_label}}
         {{> components/button/components/button_icon }}
     {{/components/button/link_button}}
   `)
-    return hbsTemplate({ ...args })
-}
-
-const buttonWithLabelAndIconLeftTemplate = (args) => {
-    let hbsTemplate = handlebars.compile(`
+hbsTemplates['buttonWithLabelAndIconLeft'] = handlebars.compile(`
     {{#> components/button/link_button~}}
         {{> components/button/components/button_icon }}
         {{> components/button/components/button_label}}
     {{~/components/button/link_button}}
   `)
-    return hbsTemplate({ ...args })
+
+const buttonWithLabelTemplate = (args) => {
+
+    return hbsTemplates['buttonWithLabel']({ ...args })
+}
+
+const buttonWithLabelTemplateOnBackground = (args) => {
+    return hbsTemplates['buttonWithLabelOnBackground']({ ...args })
+}
+
+const buttonWithLabelAndIconRightTemplate = (args) => {
+    return hbsTemplates['buttonWithLabelAndIconRight']({ ...args })
+}
+
+const buttonWithLabelAndIconLeftTemplate = (args) => {
+    return hbsTemplates['buttonWithLabelAndIconLeft']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -175,6 +184,7 @@ export default {
         controls: {
             sort: 'alpha',
         },
+        chromatic: { disableSnapshot: true }
     },
 }
 
@@ -182,10 +192,7 @@ export const Spielplatz = {
     render: buttonWithLabelTemplate.bind({}),
     name: 'Spielplatz',
 
-    args: {
-        _size: 'md',
-        _label: 'Button',
-    },
+    args: snapshotsJson['button-md'].args,
 }
 
 export const ButtonLg = {
@@ -202,10 +209,7 @@ export const ButtonLg = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Large',
-    },
+    args: snapshotsJson['button-lg'].args,
 }
 
 export const ButtonMd = {
@@ -222,10 +226,7 @@ export const ButtonMd = {
         },
     },
 
-    args: {
-        _size: 'md',
-        _label: 'Medium',
-    },
+    args: snapshotsJson['button-md'].args,
 }
 
 export const ButtonSm = {
@@ -242,10 +243,7 @@ export const ButtonSm = {
         },
     },
 
-    args: {
-        _size: 'sm',
-        _label: 'Small',
-    },
+    args: snapshotsJson['button-sm'].args,
 }
 
 export const ButtonPrimary = {
@@ -262,10 +260,7 @@ export const ButtonPrimary = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Primary',
-    },
+    args: snapshotsJson['button-primary'].args,
 }
 
 export const ButtonSecondary = {
@@ -282,11 +277,7 @@ export const ButtonSecondary = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Secondary',
-        _variant: 'secondary',
-    },
+    args: snapshotsJson['button-secondary'].args,
 }
 
 export const ButtonSecondaryWhite = {
@@ -303,12 +294,7 @@ export const ButtonSecondaryWhite = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Secondary',
-        _variant: 'secondary',
-        _onWhite: true,
-    },
+    args: snapshotsJson['button-secondary-on-white'].args,
 }
 
 export const ButtonTertiary = {
@@ -325,11 +311,7 @@ export const ButtonTertiary = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Tertiary',
-        _variant: 'tertiary',
-    },
+    args: snapshotsJson['button-tertiary'].args,
 }
 
 export const ButtonPrimaryDisabled = {
@@ -346,11 +328,7 @@ export const ButtonPrimaryDisabled = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Primary',
-        _disabled: true,
-    },
+    args: snapshotsJson['button-primary-disabled'].args,
 }
 
 export const ButtonSecondaryDisabled = {
@@ -367,12 +345,7 @@ export const ButtonSecondaryDisabled = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Secondary',
-        _variant: 'secondary',
-        _disabled: true,
-    },
+    args: snapshotsJson['button-secondary-disabled'].args,
 }
 
 export const ButtonTertiaryDisabled = {
@@ -389,12 +362,7 @@ export const ButtonTertiaryDisabled = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Tertiary',
-        _variant: 'tertiary',
-        _disabled: true,
-    },
+    args: snapshotsJson['button-tertiary-disabled'].args,
 }
 
 export const ButtonIconRechts = {
@@ -411,11 +379,7 @@ export const ButtonIconRechts = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Icon rechts',
-        _icon: 'arrow-right',
-    },
+    args: snapshotsJson['button-icon-right'].args,
 }
 
 export const ButtonIconLinks = {
@@ -432,11 +396,7 @@ export const ButtonIconLinks = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Icon links',
-        _icon: 'arrow-left',
-    },
+    args: snapshotsJson['button-icon-left'].args,
 }
 
 export const ButtonPrimaryAufFarbigemHintergrund = {
@@ -457,11 +417,7 @@ export const ButtonPrimaryAufFarbigemHintergrund = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Primary',
-        _onBackground: true,
-    },
+    args: snapshotsJson['button-primary-background'].args,
 }
 
 export const ButtonSecondaryAufFarbigemHintergrund = {
@@ -482,12 +438,7 @@ export const ButtonSecondaryAufFarbigemHintergrund = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Secondary',
-        _variant: 'secondary',
-        _onBackground: true,
-    },
+    args: snapshotsJson['button-secondary-background'].args,
 }
 
 export const ButtonTertiaryAufFarbigemHintergrund = {
@@ -508,10 +459,29 @@ export const ButtonTertiaryAufFarbigemHintergrund = {
         },
     },
 
-    args: {
-        _size: 'lg',
-        _label: 'Tertiary',
-        _variant: 'tertiary',
-        _onBackground: true,
+    args: snapshotsJson['button-tertiary-background'].args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    argTypes: {
+        _size: {
+            control: false,
+        },
+
+        _variant: {
+            control: false,
+        },
+
+        _onBackground: {
+            control: false,
+        },
     },
+
+    args: snapshotsJson,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -79,6 +79,9 @@ const Template11 = ({ text, ...args }) => {
 export default {
     title: 'Komponenten/Grid',
     argTypes: {},
+    parameters: {
+        chromatic: { disableSnapshot: true }
+    },
 }
 
 export const Grid100 = {

package/src/stories/views/components/label/fixtures/label.json

@@ -0,0 +1 @@
+{"config":{"template":"label"},"label-download":{"args":{"_type":"download","_text":"Download"}},"label-breakingnews":{"args":{"_type":"breakingnews","_text":"Eilmeldung"}},"label-event":{"args":{"_type":"event","_text":"Event"}},"label-infografik":{"args":{"_type":"infografik","_text":"Infografik"}},"label-comment":{"args":{"_type":"comment","_text":"Kommentar"}},"label-liveticker":{"args":{"_type":"liveticker","_text":"Liveticker"}},"label-media":{"args":{"_type":"media","_text":"Media"}},"label-pm":{"args":{"_type":"pm","_text":"Pressemitteilung"}},"label-program":{"args":{"_type":"program","_text":"Sendung"}},"label-kurzmeldung":{"args":{"_type":"kurzmeldung","_text":"Kurzmeldung"}}}

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

@@ -1,9 +1,21 @@
-import label from './label.hbs'
+import fixtures from './fixtures/label.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
 
-const Template = ({ _type, ...args }) => {
+const handlebars = require('hrHandlebars')
+
+const hbsTemplates = []
+hbsTemplates['label'] = handlebars.compile(`
+    {{> components/label/label}}
+  `)
+
+const Template = (args) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    return label({ _type, ...args })
+    return hbsTemplates['label']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -73,6 +85,12 @@ export default {
                     summary: 'media',
                 },
             },
+            parameters: {
+                controls: {
+                    sort: 'alpha',
+                },
+                chromatic: { disableSnapshot: true }
+            },
         },
 
         _text: {
@@ -181,3 +199,13 @@ export const Kurzmeldung = {
         _text: 'Kurzmeldung',
     },
 }
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
+}

package/src/stories/views/components/mediaplayer/fixtures/mediaplayer_button.json

@@ -0,0 +1 @@
+{"config":{"template":"button"},"button-video":{"args":{"_icon":"play_button","_label":"Video","_isLivestream":false}},"button-audio":{"args":{"_icon":"audio_button","_label":"Audio","_isLivestream":false}},"button-podcast":{"args":{"_icon":"podcast-button","_label":"Podcast","_isLivestream":false}},"button-video-livestream":{"args":{"_icon":"play_button","_label":"Video - Livestream","_isLivestream":true}},"button-audio-livestream":{"args":{"_icon":"audio_button","_label":"Audio - Livestream","_isLivestream":true}}}

package/src/stories/views/components/mediaplayer/fixtures/mediaplayer_snapshots.json

@@ -0,0 +1 @@
+{"config":{"template":"mediaplayer"},"video":{"config":{"renderSnapshotItemWrapper":false},"args":{"_isTeaser":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hr-vh.akamaihd.net/i/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_,480x270-50p-700kbit,512x288-25p-500kbit,640x360-50p-1200kbit,960x540-50p-1600kbit,1280x720-50p-3200kbit,1920x1080-50p-5000kbit,.mp4.csmil/master.m3u8","mimeType":"application/vnd.apple.mpegurl","isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt","url":"https://hr-a.akamaihd.net/video/as/hessenschau/2022_03/hrLogo_220317201045_L422955_512x288-25p-500kbit.vtt"}]}],"meta":{"durationSeconds":1644,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Auszubildende dringend gesucht | hessenschau vom 17.03.2022","synopsis":"Erstaufnahme der Geflüchteten in Gießen / Bund-Länder-Treffen zu Geflüchteten aus der Ukraine / Zu wenig Lebensmittelkontrollen / Mehr Ausbildungsplätze als Bewerber / Dokumentation über Sinti und Roma / Nachwuchs im Frankfurter Zoo / Eintracht vor dem Europa League-Spiel"},"pluginData":{},"geoBlocked":false},"playerId":"8423","type":"videoOndemand","typeLabel":"Video-On-Demand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":false,"isPlayerDebug":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}}},"video_livestream":{"config":{"renderSnapshotItemWrapper":false},"args":{"_isTeaser":false,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","typeLabel":"Video-Livestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":true,"isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedVideoView":true,"isForcedAutoplay":false},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","videoLanguageCode":"de","media":[{"url":"https://hrhlsde.akamaized.net/hls/live/2024526/hrhlsde/index.m3u8","mimeType":"application/vnd.apple.mpegurl","maxHResolutionPx":8000,"isAdaptiveQualitySelectable":true,"audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Jetzt hr-fernsehen live sehen!"},"pluginData":{},"geoBlocked":false},"playerId":"6819","type":"videoLivestream","typeLabel":"Video-Livestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","teaserSize":"100","realTeaserSize":"100","isAutoplay":false,"isDarkmodeAllowed":true}}},"audio":{"config":{"renderSnapshotItemWrapper":false},"args":{"_isTeaser":false,"_isAudioView":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2565","type":"audioOndemand","typeLabel":"Audio-Ondemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":false},"pluginData":{"trackingAti@all":{"isEnabled":false},"trackingAgf@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hr-a.akamaihd.net/audio/sport/2022_03/220317235611_Hinteregger.mp3","mimeType":"audio/mp3","audios":[{"kind":"standard","languageCode":"de"}]}]}],"meta":{"durationSeconds":20,"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Das Eintracht-Tor in der Reportage: \"Hinteregger schädelt den rein\"","synopsis":"Eintracht Frankfurt steht im Viertelfinale der Europa League. Hier gibt es die emotionale Audio-Reportage des Hinteregger-Treffers."},"pluginData":{},"geoBlocked":false},"playerId":"2565","type":"audioOndemand","typeLabel":"Audio-Ondemand","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":false,"teaserSize":"100","realTeaserSize":"100","isDarkmodeAllowed":true}}},"audio_event_livestream":{"config":{"renderSnapshotItemWrapper":false},"args":{"_isTeaser":false,"_isAudioView":true,"ardPlayerConfig":{"playerConfig":{"generic":{"isAutoplay":true,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":true,"isForcedVideoView":true},"pluginData":{"trackingAti@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hlshr3.akamaized.net/hls/live/2016536/hr3/master.m3u8","mimeType":"application/vnd.apple.mpegurl","audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Test Audio Event","synopsis":"Das Sicherheitspersonal hat am frühen Dienstagmorgen seinen Warnstreik am Frankfurter Flughafen gestartet. Reisende ab Frankfurt können sich den Weg zum Airport direkt sparen. Ein spezielles Team kümmert sich um Gestrandete."},"pluginData":{},"geoBlocked":false},"playerId":"1694","type":"audioLivestream","typeLabel":"Audio-Event-Livestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":true,"teaserSize":"50","realTeaserSize":"50","isDarkmodeAllowed":true},"ardPlayerJsonConfig":{"playerConfig":{"generic":{"isAutoplay":false,"isDvrEnabled":true,"imageTemplateConfig":{"size":[{"minWidth":0,"value":"480/270"},{"minWidth":480,"value":"640/360"},{"minWidth":640,"value":"960/540"},{"minWidth":960,"value":"1920/1080"}]}},"web":{"baseUrl":"./vendor/ardplayer/","isForcedAutoplay":false,"isForcedVideoView":false},"pluginData":{"trackingAti@all":{"isEnabled":false}}},"mediaCollection":{"streams":[{"kind":"main","isAudioOnly":true,"media":[{"url":"https://hlshr3.akamaized.net/hls/live/2016536/hr3/master.m3u8","mimeType":"application/vnd.apple.mpegurl","audios":[{"kind":"standard","languageCode":"de"}]}]}],"subTitles":[{"kind":"normal","languageCode":"de","sources":[{"kind":"webvtt"}]}],"live":{"dvrWindowSeconds":7200},"meta":{"images":[{"kind":"preview","url":"https://picsum.photos/id/101/{size}"}],"title":"Test Audio Event","synopsis":"Das Sicherheitspersonal hat am frühen Dienstagmorgen seinen Warnstreik am Frankfurter Flughafen gestartet. Reisende ab Frankfurt können sich den Weg zum Airport direkt sparen. Ein spezielles Team kümmert sich um Gestrandete."},"pluginData":{},"geoBlocked":false},"playerId":"1694","type":"audioLivestream","typeLabel":"Audio-Event-Livestream","cssUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.3be63dd6.css","jsUrl":"./vendor/ardplayer/ardplayer-hr-6.9.2.930e5d37.js","isAutoplay":false,"teaserSize":"50","realTeaserSize":"50","isDarkmodeAllowed":true}}}}

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

@@ -1,13 +1,20 @@
 import { userEvent, within, waitFor } from '@storybook/test'
-import mediaplayerJson from 'components/mediaplayer/fixtures/mediaplayer.json'
+import snapshotsJson from './fixtures/mediaplayer_snapshots.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
 
-import mediaPlayer from 'components/mediaplayer/media_player.hbs'
-import { delay } from 'underscore'
+const handlebars = require('hrHandlebars')
 
-const Template = ({ label, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return mediaPlayer({ label, ...args })
+const hbsTemplates = []
+hbsTemplates['mediaplayer'] = handlebars.compile(`
+    {{> components/mediaplayer/media_player}}  
+  `)
+
+const Template = (args) => {
+    return hbsTemplates['mediaplayer']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -33,6 +40,7 @@ export default {
         controls: {
             sort: 'requiredFirst',
         },
+        chromatic: { disableSnapshot: true }
     },
 }
 
@@ -46,7 +54,7 @@ export const Videoplayer = {
                      </div>`
         },
     ],
-    args: { _isTeaser: false, ...mediaplayerJson.video },
+    args: snapshotsJson.video.args,
 }
 
 export const VideoplayerSettings = {
@@ -59,7 +67,10 @@ export const VideoplayerSettings = {
                      </div>`
         },
     ],
-    args: { _isTeaser: false, ...mediaplayerJson.video },
+    args: snapshotsJson.video.args,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
     play: async ({ canvasElement }) => {
         let canvas = within(canvasElement)
         await userEvent.click(await canvas.findByTitle('Wiedergabe [Leertaste]'))
@@ -79,7 +90,7 @@ export const VideoplayerLive = {
         },
     ],
     name: 'Videoplayer Livestream',
-    args: { _isTeaser: false, ...mediaplayerJson.video_livestream },
+    args: snapshotsJson.video_livestream.args,
 }
 
 export const Audioplayer = {
@@ -92,7 +103,7 @@ export const Audioplayer = {
                      </div>`
         },
     ],
-    args: { _isTeaser: false, _isAudioView: true, ...mediaplayerJson.audio },
+    args: snapshotsJson.audio.args,
 }
 
 export const AudioplayerLivestream = {
@@ -105,5 +116,14 @@ export const AudioplayerLivestream = {
         },
     ],
     name: 'Audioplayer Livestream',
-    args: { _isTeaser: false, _isAudioView: true, ...mediaplayerJson.audio_event_livestream },
+    args: snapshotsJson.audio_event_livestream.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+    args: snapshotsJson,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/mediaplayer/mediaplayer_button.stories.js

@@ -1,12 +1,18 @@
+import snapshotsJson from './fixtures/mediaplayer_button.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
 const handlebars = require('hrHandlebars')
 
-const buttonTemplate = (args, { globals: { customConditionalToolbar } }) => {
-    let brand =
-        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    let hbsTemplate = handlebars.compile(`
+const hbsTemplates = []
+hbsTemplates['button'] = handlebars.compile(`
     {{> components/mediaplayer/mediaplayer_button _css="!static"}}
   `)
-    return hbsTemplate({ brand, ...args })
+
+const buttonTemplate = (args) => {
+    return hbsTemplates['button']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -38,6 +44,7 @@ export default {
         controls: {
             sort: 'alpha',
         },
+        chromatic: { disableSnapshot: true }
     },
 }
 
@@ -45,11 +52,7 @@ export const Spielplatz = {
     render: buttonTemplate.bind({}),
     name: 'Spielplatz',
 
-    args: {
-        _icon: 'play_button',
-        _label: 'Video',
-        _isLivestream: false,
-    },
+    args: snapshotsJson['button-video'].args,
 }
 
 export const Video = {
@@ -70,11 +73,7 @@ export const Video = {
         },
     },
 
-    args: {
-        _icon: 'play_button',
-        _label: 'Video',
-        _isLivestream: false,
-    },
+    args: snapshotsJson['button-video'].args,
 }
 
 export const Audio = {
@@ -95,11 +94,7 @@ export const Audio = {
         },
     },
 
-    args: {
-        _icon: 'audio_button',
-        _label: 'Audio',
-        _isLivestream: false,
-    },
+    args: snapshotsJson['button-audio'].args,
 }
 
 export const Podcast = {
@@ -120,11 +115,7 @@ export const Podcast = {
         },
     },
 
-    args: {
-        _icon: 'podcast-button',
-        _label: 'Podcast',
-        _isLivestream: false,
-    },
+    args: snapshotsJson['button-podcast'].args,
 }
 
 export const VideoLivestream = {
@@ -145,11 +136,7 @@ export const VideoLivestream = {
         },
     },
 
-    args: {
-        _icon: 'play_button',
-        _label: 'Video - Livestream',
-        _isLivestream: true,
-    },
+    args: snapshotsJson['button-video-livestream'].args,
 }
 
 export const AudioLivestream = {
@@ -170,9 +157,29 @@ export const AudioLivestream = {
         },
     },
 
-    args: {
-        _icon: 'audio_button',
-        _label: 'Audio - Livestream',
-        _isLivestream: true,
+    args: snapshotsJson['button-audio-livestream'].args
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    argTypes: {
+        _icon: {
+            control: false,
+        },
+
+        _label: {
+            control: false,
+        },
+
+        _isLivestream: {
+            control: false,
+        },
     },
+
+    args: snapshotsJson,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }