hr-design-system-handlebars 1.102.5 → 1.103.0

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

@@ -1,15 +1,19 @@
-import teaser from './teaser_indextext.hbs'
-import dataTeserIndextext100Accented from './fixtures/teaser_indextext_100_accented.json'
-import dataTeserIndextext100Boxed from './fixtures/teaser_indextext_100_boxed.json'
-import dataTeserIndextext100Highlighted from './fixtures/teaser_indextext_100_highlighted.json'
-import dataTeserIndextext50Accented from './fixtures/teaser_indextext_50_accented.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_indextext.json'
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_indextext }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -19,6 +23,7 @@ export default {
         layout: 'fullscreen',
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -56,9 +61,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>`
         },
     ],
 }
@@ -66,23 +71,87 @@ export default {
 export const TextMitHintergrund100 = {
     render: Template.bind({}),
     name: 'Text mit Hintergrund 100',
-    args: dataTeserIndextext100Accented.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.accented.args.logicItem.includeModel
 }
 
 export const TextMitBox100 = {
     render: Template.bind({}),
     name: 'Text mit Box 100',
-    args: dataTeserIndextext100Boxed.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.boxed.args.logicItem.includeModel
 }
 
 export const HintergrundOrange100 = {
     render: Template.bind({}),
     name: 'Hintergrund orange 100',
-    args: dataTeserIndextext100Highlighted.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.highlighted.args.logicItem.includeModel
+}
+
+export const TextMitBox50 = {
+    render: Template.bind({}),
+    name: 'Text mit Box 50',
+    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.boxed.args.logicItem.includeModel
 }
 
 export const TextMitHintergrund50 = {
     render: Template.bind({}),
     name: 'Text mit Hintergrund 50',
-    args: dataTeserIndextext50Accented.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.accented.args.logicItem.includeModel
+}
+
+export const HintergrundOrange50 = {
+    render: Template.bind({}),
+    name: 'Hintergrund orange 50',
+    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.highlighted.args.logicItem.includeModel
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1,15 +1,25 @@
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/teaser_poster.json'
+
 import teaser from './teaser_poster.hbs'
 import teserPosterLg from './fixtures/teaser_poster_lg.json'
 import teserPosterMd from './fixtures/teaser_poster_md.json'
 import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
 import teserPosterMdLabelByline from './fixtures/teaser_poster_md_label_byline.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 })
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_poster }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -20,6 +30,7 @@ export default {
 
         chromatic: {
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -42,9 +53,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>`
         },
     ],
 }
@@ -52,23 +63,87 @@ export default {
 export const Poster50 = {
     render: Template.bind({}),
     name: 'Poster 50',
-    args: teserPosterLg.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 Poster50MitLabel = {
+    render: Template.bind({}),
+    name: 'Poster 50 mit Label',
+    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_label"].args.logicItem.includeModel,
+}
+
+export const Poster50MitLabelByline = {
+    render: Template.bind({}),
+    name: 'Poster 50 mit Label und Byline',
+    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_label_and_byline"].args.logicItem.includeModel,
 }
 
 export const Poster33 = {
     render: Template.bind({}),
     name: 'Poster 33',
-    args: teserPosterMd.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 Poster33MitLabel = {
     render: Template.bind({}),
     name: 'Poster 33 mit Label',
-    args: teserPosterMdLabel.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_label"].args.logicItem.includeModel,
 }
 
 export const Poster33MitLabelByline = {
     render: Template.bind({}),
     name: 'Poster 33 mit Label und Byline',
-    args: teserPosterMdLabelByline.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_label_and_byline"].args.logicItem.includeModel,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }

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

@@ -1,15 +1,26 @@
+import { getSnapshotsTemplate } from '/src/assets/js/utils.js'
+import fixtures from './fixtures/teaser_stage.json'
+
 import teaser from './teaser_stage.hbs'
 import stageTeaserData from './fixtures/stage_teaser.json'
 import stageTeaserWideData from './fixtures/stage_teaser_wide.json'
 import stageTeaserDataWithEventtag from './fixtures/stage_teaser_eventtag.json'
 import stageTeaserDataForProgram from './fixtures/stage_teaser_program.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 })
+
+const handlebars = require('hrHandlebars')
+const hbsTemplates = []
+hbsTemplates['default'] = handlebars.compile(`
+    {{> components/teaser/teaser_stage }}   
+  `)
+
+
+const Template = (args) => {
+    return hbsTemplates['default']({ ...args })
+}
+
+const snapshotTemplate = (args) => {
+    return getSnapshotsTemplate({ hbsTemplates, args })
 }
 
 export default {
@@ -21,6 +32,7 @@ export default {
         chromatic: {
             viewports: [360, 768, 1024],
             diffThreshold: 0.3,
+            disableSnapshot: true
         },
     },
 
@@ -28,9 +40,9 @@ export default {
 
     decorators: [
         (Story) => {
-            return `<div class="grid grid-page"><div class="col-full gap-x-6 gap-y-6">  
+            return `<div class="grid grid-page">  
              ${Story()} 
-             </div></div>`
+             </div>`
         },
     ],
 }
@@ -38,23 +50,68 @@ export default {
 export const StageTeaser = {
     render: Template.bind({}),
     name: 'Stage Teaser',
-    args: stageTeaserData,
+    decorators: [
+        (Story) => {
+            return `<div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.stage.args
 }
 
 export const StageTeaserWide = {
     render: Template.bind({}),
     name: 'Stage Teaser Wide',
-    args: stageTeaserWideData,
+    decorators: [
+        (Story) => {
+            return `<div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.stage_wide.args,
 }
 
 export const StageTeaserWithEvent = {
     render: Template.bind({}),
     name: 'Stage Teaser with Event',
-    args: stageTeaserDataWithEventtag,
+    decorators: [
+        (Story) => {
+            return `<div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.stage_with_eventtag.args,
 }
 
 export const StageTeaserProgram = {
     render: Template.bind({}),
     name: 'Stage Teaser Program',
-    args: stageTeaserDataForProgram,
+    decorators: [
+        (Story) => {
+            return `<div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+    args: fixtures.stage_with_program.args,
+}
+
+export const Snapshot = {
+    render: snapshotTemplate.bind({}),
+    name: 'Snapshot',
+    decorators: [
+        (Story) => {
+            return `<div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+
+    args: fixtures,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    }
 }