hr-design-system-handlebars 1.102.6 → 1.103.0

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

@@ -1,29 +1,26 @@
-import teaser from './teaser_standard.hbs'
-import teaserAlternative from './teaser_alternativ.hbs'
-import teaser33SingleEventSerif from './fixtures/teaser_standard_33_serif_single_event.json'
-import teaser33SingleEventStatus from './fixtures/teaser_standard_33_serif_single_event_status.json'
-import teaser33TwoEventsSerif from './fixtures/teaser_standard_33_serif_two_events.json'
-import teaser33MultipleEventsSerif from './fixtures/teaser_standard_33_serif_multiple_events.json'
-import teaser50SingleEventSerif from './fixtures/teaser_standard_50_serif_single_event.json'
-import teaser100SingleEventSerif from './fixtures/teaser_standard_100_serif_single_event.json'
-import teaser100TwoEventsSerif from './fixtures/teaser_standard_100_serif_two_events.json'
-import teaserAlternative100SingleEventSerif from './fixtures/teaser_alternative_100_serif_single_event.json'
-import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_100_serif_two_events.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_event.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['standard'] = handlebars.compile(`
+    {{> components/teaser/teaser_standard }}   
+  `)
+hbsTemplates['alternative'] = handlebars.compile(`
+    {{> components/teaser/teaser_alternativ }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['standard']({ ...args })
+}
+
+const TemplateAlternative = (args) => {
+    return hbsTemplates['alternative']({ ...args })
 }
 
-const TemplateAlternative = (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 teaserAlternative({ brand, ...args })
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -35,85 +32,159 @@ export default {
         chromatic: {
             viewports: [360, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
-    },
 
-    argTypes: {
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['33', '50', '100'],
-            },
+        argTypes: {
+            teaserSize: {
+                control: {
+                    type: 'select',
+                    options: ['33', '50', '100'],
+                },
 
-            description: 'Teaser Größe',
+                description: 'Teaser Größe',
 
-            table: {
-                defaultValue: {
-                    summary: 'hero',
+                table: {
+                    defaultValue: {
+                        summary: 'hero',
+                    },
                 },
             },
         },
-    },
 
-    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">  
+        decorators: [
+            (Story) => {
+                return `<div class="grid grid-page"> 
              ${Story()} 
-             </div></div>`
-        },
-    ],
+             </div>`
+            },
+        ],
+    }
 }
 
 export const Standard33EinzelEvent = {
     render: Template.bind({}),
     name: 'Standard 33 Einzel-Event',
-    args: teaser33SingleEventSerif.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.standard_with_single_event.args.logicItem.includeModel,
 }
 
 export const Standard33EinzelEventAbgesagt = {
     render: Template.bind({}),
     name: 'Standard 33 Einzel-Event abgesagt',
-    args: teaser33SingleEventStatus.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.standard_with_single_event_and_status.args.logicItem.includeModel,
 }
 
 export const Standard33ZweiEvents = {
     render: Template.bind({}),
     name: 'Standard 33 zwei Events',
-    args: teaser33TwoEventsSerif.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.standard_with_two_events.args.logicItem.includeModel,
 }
 
 export const Standard33MehrereEvents = {
     render: Template.bind({}),
     name: 'Standard 33 mehrere Events',
-    args: teaser33MultipleEventsSerif.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.standard_with_multiple_events.args.logicItem.includeModel,
 }
 
 export const Standard50EinzelEvent = {
     render: Template.bind({}),
     name: 'Standard 50 Einzel-Event',
-    args: teaser50SingleEventSerif.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.standard_with_single_event.args.logicItem.includeModel,
 }
 
 export const Standard100EinzelEvent = {
     render: Template.bind({}),
     name: 'Standard 100 Einzel-Event',
-    args: teaser100SingleEventSerif.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.standard_with_single_event.args.logicItem.includeModel,
 }
 
 export const Standard100ZweiEvents = {
     render: Template.bind({}),
     name: 'Standard 100 zwei Events',
-    args: teaser100TwoEventsSerif.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.standard_with_two_events.args.logicItem.includeModel,
 }
 
 export const Alternativ100EinzelEvent = {
     render: TemplateAlternative.bind({}),
     name: 'Alternativ 100 Einzel-Event',
-    args: teaserAlternative100SingleEventSerif.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.alternative_with_single_event.args.logicItem.includeModel,
 }
 
 export const Alternativ100ZweiEvents = {
     render: TemplateAlternative.bind({}),
     name: 'Alternativ 100 zwei Events',
-    args: teaserAlternative100TwoEventsSerif.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.alternative_with_two_events.args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.stories.js

@@ -1,16 +1,28 @@
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/fixtures/teaser_ticker_alternative.json'
+
 import ticker from './teaser_ticker_alternativ.hbs'
 import tickerTeaserHeroAlternativ from '../fixtures/ticker_teaser_alternativ_hero.json'
 import tickerTeaserHeroAlternativAudio from '../fixtures/ticker_teaser_alternativ_hero_audio.json'
 import tickerTeaser100Alternativ from '../fixtures/ticker_teaser_alternativ_100.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 ticker({ brand, ...args })
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/ticker/teaser_ticker_alternativ }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
 }
 
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
+}
+
+
 export default {
     title: 'Komponenten/Teaser/Ticker/Alternativ',
 
@@ -18,6 +30,7 @@ export default {
         layout: '',
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -25,9 +38,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>`
         },
     ],
 }
@@ -35,17 +48,48 @@ export default {
 export const TickerTeaserAlternativHero = {
     render: Template.bind({}),
     name: 'Alternativ Hero',
-    args: tickerTeaserHeroAlternativ.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 TickerTeaserAlternativAudio = {
     render: Template.bind({}),
     name: 'Alternativ Hero Media',
-    args: tickerTeaserHeroAlternativAudio.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_audio.args.logicItem.includeModel
 }
 
 export const TickerTeaserAlternativ100 = {
     render: Template.bind({}),
     name: 'Alternativ 100',
-    args: tickerTeaser100Alternativ.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 Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.stories.js

@@ -1,17 +1,19 @@
-import ticker from './teaser_ticker_standard.hbs'
-import tickerTeaserHeroStandard from '../fixtures/ticker_teaser_standard_hero.json'
-import tickerTeaserHeroStandardAudio from '../fixtures/ticker_teaser_standard_hero_audio.json'
-import tickerTeaser100Standard from '../fixtures/ticker_teaser_standard_100.json'
-import tickerTeaser50Standard from '../fixtures/ticker_teaser_standard_50.json'
-import tickerTeaser33Standard from '../fixtures/ticker_teaser_standard_33.json'
-import tickerTeaser25Standard from '../fixtures/ticker_teaser_standard_25.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 ticker({ brand, ...args })
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/fixtures/teaser_ticker_standard.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/ticker/teaser_ticker_standard }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -21,6 +23,7 @@ export default {
         layout: '',
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -28,9 +31,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>`
         },
     ],
 }
@@ -38,35 +41,87 @@ export default {
 export const TickerTeaserHero = {
     render: Template.bind({}),
     name: 'Standard Hero',
-    args: tickerTeaserHeroStandard.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 TickerTeaserHeroAudio = {
     render: Template.bind({}),
     name: 'Standard Hero Media',
-    args: tickerTeaserHeroStandardAudio.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_audio.args.logicItem.includeModel,
 }
 
 export const TickerTeaser100 = {
     render: Template.bind({}),
     name: 'Standard 100',
-    args: tickerTeaser100Standard.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 TickerTeaser50 = {
     render: Template.bind({}),
     name: 'Standard 50',
-    args: tickerTeaser50Standard.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 TickerTeaser33 = {
     render: Template.bind({}),
     name: 'Standard 33',
-    args: tickerTeaser33Standard.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 TickerTeaser25 = {
     render: Template.bind({}),
     name: 'Standard 25',
-    args: tickerTeaser25Standard.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 Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js

@@ -1,23 +1,34 @@
-import timelineJson from '../fixtures/teaser_ticker_timeline.json'
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from 'components/teaser/fixtures/teaser_ticker_timeline.json'
 
 const handlebars = require('hrHandlebars')
-
-const timelineOnBlue = (args) => {
-    let hbsTemplate = handlebars.compile(`
+const hbsTemplates = []
+hbsTemplates['on_blue'] = handlebars.compile(`
     <div class="bg-blue-congress-hex pt-5">
         {{> components/teaser/ticker/teaser_ticker_timeline _color="white"}}
-    </div>
+    </div>  
   `)
-    return hbsTemplate({ ...args })
-}
 
-const timelineOnWhite = (args) => {
-    let hbsTemplate = handlebars.compile(`
+hbsTemplates['on_white'] = handlebars.compile(`
     <div class="pt-5">
         {{> components/teaser/ticker/teaser_ticker_timeline }}
-    </div>
+    </div> 
   `)
-    return hbsTemplate({ ...args })
+
+
+
+
+
+const timelineOnBlue = (args) => {
+    return hbsTemplates['on_blue']({ ...args })
+}
+
+const timelineOnWhite = (args) => {
+    return hbsTemplates['on_white']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -26,6 +37,7 @@ export default {
     parameters: {
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
     argTypes: {
@@ -39,11 +51,21 @@ export default {
 export const TimelineWhite = {
     render: timelineOnBlue.bind({}),
     name: 'Zeitstrahl auf blau',
-    args: timelineJson,
+    args: fixtures.on_blue.args,
 }
 
 export const TimelineBlack = {
     render: timelineOnWhite.bind({}),
     name: 'Zeitstrahl auf weiß',
-    args: timelineJson,
+    args: fixtures.on_white.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

package/tailwind.config.js

@@ -12,8 +12,9 @@ module.exports = {
     safelist: ['mt-12', 'bg-gray-100', '-weather_warning'],
     content: [
         './src/stories/*.mdx',
-        './src/stories/views/**/*.{mdx,hbs,js}',
+        './src/stories/views/**/*.{mdx,hbs,js,json}',
         './src/assets/vendor/**/*.js',
+        './src/assets/js/**/*.js',
     ],
     theme: {
         screens: {

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_2_level.json

@@ -1,15 +0,0 @@
-{
-    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
-    "@->contentpath": "breadcrumb",
-    "@->overrides": [
-        {
-            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
-            "@->value": [
-                {
-                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
-                    "@->contentpath": "level-1"
-                }
-            ]
-        }
-    ]
-}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_3_level.json

@@ -1,19 +0,0 @@
-{
-    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
-    "@->contentpath": "breadcrumb",
-    "@->overrides": [
-        {
-            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
-            "@->value": [
-                {
-                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
-                    "@->contentpath": "level-1"
-                },
-                {
-                    "url": "panorama",
-                    "title": "Panorama"
-                }
-            ]
-        }
-    ]
-}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_4_level.json

@@ -1,23 +0,0 @@
-{
-    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
-    "@->contentpath": "breadcrumb",
-    "@->overrides": [
-        {
-            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
-            "@->value": [
-                {
-                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
-                    "@->contentpath": "level-1"
-                },
-                {
-                    "url": "sport",
-                    "title": "Sport"
-                },
-                {
-                    "url": "darmstadt98",
-                    "title": "Darmstadt 98"
-                }
-            ]
-        }
-    ]
-}

package/src/assets/fixtures/navigation/breadcrumb/breadcrumb_5_level.json

@@ -1,27 +0,0 @@
-{
-    "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
-    "@->contentpath": "breadcrumb",
-    "@->overrides": [
-        {
-            "@->contentpath": "breadcrumb.breadcrumbSsi.breadcrumb",
-            "@->value": [
-                {
-                    "@->jsoninclude": "navigation/breadcrumb/breadcrumb_items.inc.json",
-                    "@->contentpath": "level-1"
-                },
-                {
-                    "url": "sport",
-                    "title": "Sport"
-                },
-                {
-                    "url": "fussball",
-                    "title": "Fußball"
-                },
-                {
-                    "url": "eintracht",
-                    "title": "Eintracht Frankfurt"
-                }
-            ]
-        }
-    ]
-}