hr-design-system-handlebars 1.102.5 → 1.103.0

package/src/assets/fixtures/teaser/teaser_ticker_alternative.json

@@ -0,0 +1,156 @@
+{
+    "config": {
+        "template": "default",
+        "path": "args.logicItem.includeModel",
+        "layout": "grid",
+        "renderSnapshotsWrapper": false
+    },
+    "group_hero": {
+        "hero": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-alternative"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isStandardTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserImage",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_images.inc.json",
+                            "@->contentpath": "teaser_ticker_hero",
+                            "@->replaceToken": [
+                                {
+                                    "@->token": "image",
+                                    "@->value": "sportschau-image-5708"
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        },
+        "hero_with_audio": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser_audio",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-alternative"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isStandardTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserImage",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_images.inc.json",
+                            "@->contentpath": "teaser_ticker_hero",
+                            "@->replaceToken": [
+                                {
+                                    "@->token": "image",
+                                    "@->value": "sportschau-image-5708"
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "group_100": {
+        "100": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserSize",
+                        "@->value": "100"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.realTeaserSize",
+                        "@->value": "100"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-alternative"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isHeroTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isStandardTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserImage",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_images.inc.json",
+                            "@->contentpath": "teaser_ticker_hero",
+                            "@->replaceToken": [
+                                {
+                                    "@->token": "image",
+                                    "@->value": "sportschau-image-5708"
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}

package/src/assets/fixtures/teaser/teaser_ticker_standard.json

@@ -0,0 +1,241 @@
+{
+    "config": {
+        "template": "default",
+        "path": "args.logicItem.includeModel",
+        "layout": "grid",
+        "renderSnapshotsWrapper": false
+    },
+    "group_hero": {
+        "hero": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    }
+                ]
+            }
+        },
+        "hero_with_audio": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser_audio",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "group_100": {
+        "100": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserSize",
+                        "@->value": "100"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.realTeaserSize",
+                        "@->value": "100"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isHeroTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "group_50": {
+        "50": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserSize",
+                        "@->value": "50"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.realTeaserSize",
+                        "@->value": "50"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isHeroTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "group_33": {
+        "33": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserSize",
+                        "@->value": "33"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.realTeaserSize",
+                        "@->value": "33"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isHeroTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "group_25": {
+        "25": {
+            "args": {
+                "@->jsoninclude": "teaser/teaser_ticker.inc.json",
+                "@->contentpath": "tickerTeaser",
+                "@->overrides": [
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserSize",
+                        "@->value": "25"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.realTeaserSize",
+                        "@->value": "25"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserType",
+                        "@->value": "ticker-standard"
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.isHeroTeaser",
+                        "@->value": false
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.shorttext",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.topline",
+                        "@->value": ""
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.label",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                            "@->contentpath": "ticker"
+                        }
+                    },
+                    {
+                        "@->contentpath": "logicItem.includeModel.teaserImage",
+                        "@->value": {
+                            "@->jsoninclude": "teaser/teaser_images.inc.json",
+                            "@->contentpath": "teaser_ticker_hero",
+                            "@->replaceToken": [
+                                {
+                                    "@->token": "image",
+                                    "@->value": "sportschau-image-5708"
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}

package/src/assets/fixtures/teaser/teaser_ticker_timeline.json

@@ -1,31 +1,78 @@
 {
-    "tickerItemResults": [
-        {
-            "isTopnews": true,
-            "tickerItemDateTime": {
-                "broadcastDate": "12. Juni, 10:15",
-                "time": "10:15"
-            },
-            "tickerItemUrl": "Topnews1",
-            "relevantTitle": "Kritik an Privatisierung von Wasser"
+    "config": {
+        "renderSnapshotsWrapper": false
+    },
+    "on_blue": {
+        "config": {
+            "template": "on_blue"
         },
-        {
-            "isTopnews": true,
-            "tickerItemDateTime": {
-                "broadcastDate": "12. Juni, 9:55",
-                "time": "9:55"
-            },
-            "tickerItemUrl": "Topnews2",
-            "relevantTitle": "Suche nach neuem Vorsitz für Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss"
+        "args": {
+            "_color": "white",
+            "tickerItemResults": [
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 10:15",
+                        "time": "10:15"
+                    },
+                    "tickerItemUrl": "Topnews1",
+                    "relevantTitle": "Kritik an Privatisierung von Wasser"
+                },
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 9:55",
+                        "time": "9:55"
+                    },
+                    "tickerItemUrl": "Topnews2",
+                    "relevantTitle": "Suche nach neuem Vorsitz für Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss"
+                },
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 9:25",
+                        "time": "9:25"
+                    },
+                    "tickerItemUrl": "Topnews3",
+                    "relevantTitle": "Pedelec-Fahrer auf B276 lebensgefährlich verletzt"
+                }
+            ]
+        }
+    },
+    "on_white": {
+        "config": {
+            "template": "on_white"
         },
-        {
-            "isTopnews": true,
-            "tickerItemDateTime": {
-                "broadcastDate": "12. Juni, 9:25",
-                "time": "9:25"
-            },
-            "tickerItemUrl": "Topnews3",
-            "relevantTitle": "Pedelec-Fahrer auf B276 lebensgefährlich verletzt"
-        }                
-    ]
-}
+        "args": {
+            "tickerItemResults": [
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 10:15",
+                        "time": "10:15"
+                    },
+                    "tickerItemUrl": "Topnews1",
+                    "relevantTitle": "Kritik an Privatisierung von Wasser"
+                },
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 9:55",
+                        "time": "9:55"
+                    },
+                    "tickerItemUrl": "Topnews2",
+                    "relevantTitle": "Suche nach neuem Vorsitz für Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss"
+                },
+                {
+                    "isTopnews": true,
+                    "tickerItemDateTime": {
+                        "broadcastDate": "12. Juni, 9:25",
+                        "time": "9:25"
+                    },
+                    "tickerItemUrl": "Topnews3",
+                    "relevantTitle": "Pedelec-Fahrer auf B276 lebensgefährlich verletzt"
+                }
+            ]
+        }
+    }
+}

package/src/assets/js/utils.js

@@ -0,0 +1,73 @@
+/**
+ * Generates a template for rendering snapshots.
+ * 
+ * @param {Object} args - The arguments for generating the template.
+ * @param {Object} args.hbsTemplates - The Handlebars templates object.
+ * @param {Object} args.args - The snapshots JSON object.
+ * @returns {string} - The generated template.
+ */
+const getSnapshotsTemplate = (args) => {
+    const { hbsTemplates, args: snapshotsJson } = args
+    console.log("SnapshotsJson First", snapshotsJson)
+    const config = snapshotsJson.config || {}
+    const renderAsGrid = undefined !== config.layout && "grid" === config.layout
+    const renderSnapshotsWrapper = undefined !== config.renderSnapshotsWrapper ? config.renderSnapshotsWrapper : true
+    const snapshotGroups = Object.entries(snapshotsJson).filter(([key, value]) =>
+        key.includes("group"))
+    const hasSnapshotGroups = snapshotGroups.length > 0
+    const snapshotsWrapperStart = renderSnapshotsWrapper ? hasSnapshotGroups ? `<div${renderAsGrid ? ` class="grid grid-page"` : ''}">` : renderAsGrid ? '<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">' : '<div class="flex flex-auto flex-wrap gap-8">' : ''
+    const snapshotsWrapperEnd = renderSnapshotsWrapper ? `</div>${hasSnapshotGroups && renderAsGrid ? '</div>' : ''}` : ''
+    let template = ''
+    if (hasSnapshotGroups) {
+        template += snapshotsWrapperStart
+
+        snapshotGroups.forEach(([key, value]) => {
+            template += renderAsGrid ? '<div class="grid grid-cols-12 pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14"><div class="grid grid-cols-12 items-start bg-white content-start gap-y-5 col-span-12 gap-x-6">' : '<div class="flex flex-auto flex-wrap gap-8">'
+            const filteredSnapshots = Object.entries(value).filter(([key, value]) =>
+                (value.config === undefined || value.config.useAsSnapshot !== false)
+            )
+            template += renderSnapshots(filteredSnapshots, hbsTemplates, config.template, config.path, renderSnapshotsWrapper)
+            template += `</div>${renderAsGrid ? '</div>' : ''}`
+        })
+        template += snapshotsWrapperEnd
+    } else {
+        console.log("SnapshotsJson", snapshotsJson)
+        const filteredSnapshots = Object.entries(snapshotsJson).filter(([key, value]) =>
+            key !== "config" && (value.config === undefined || value.config.useAsSnapshot !== false)
+        )
+        template += snapshotsWrapperStart
+        template += renderSnapshots(filteredSnapshots, hbsTemplates, config.template, config.path, renderSnapshotsWrapper)
+        template += snapshotsWrapperEnd
+    }
+    return template
+}
+
+const renderSnapshots = (snapshots, hbsTemplates, defaultTemplate, defaultPath, renderSnapshotsWrapper) => {
+    let template = ''
+    console.log("Snapshots", snapshots)
+    snapshots.forEach(([key, value]) => {
+        const snapshotItemConfig = value.config || {}
+        const renderSnapshotItemWrapper = undefined !== snapshotItemConfig.renderSnapshotItemWrapper ? snapshotItemConfig.renderSnapshotItemWrapper : true
+        const path = snapshotItemConfig.path ? `${snapshotItemConfig.path}` : (defaultPath ? `${defaultPath}` : "args")
+        const snapshotTemplateName = snapshotItemConfig.template || defaultTemplate || "no-template"
+
+        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+            template += `<div${snapshotItemConfig.css ? ` class="${snapshotItemConfig.css}"` : ''}>`
+        }
+
+        template += hbsTemplates[snapshotTemplateName](resolveObjectFromPath(path, value));
+
+        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+            template += '</div>';
+        }
+    })
+    return template
+}
+
+const resolveObjectFromPath = (path, obj) => {
+    return path.split('.').reduce(function (prev, curr) {
+        return prev ? prev[curr] : null
+    }, obj || self)
+}
+
+export { getSnapshotsTemplate }