hr-design-system-handlebars 1.103.10 → 1.105.0

package/src/assets/fixtures/external-service/external_service.json

@@ -0,0 +1,194 @@
+{
+    "config": {
+        "template": "default",
+        "layout": "grid",
+        "renderSnapshotsWrapper": false
+    },
+    "ARD_Mediathek_Video": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "ARD_Mediathek_Video"
+        }
+    },
+    "ARTE_concert_new": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "ARTE_concert_new"
+        }
+    },
+    "Datawrapper_CDN_NoResponsiveFixedHeightReload": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Datawrapper_CDN",
+            "@->overrides": [
+                {
+                    "@->contentpath": "fixedHeight",
+                    "@->value": "700"
+                },
+                {
+                    "@->contentpath": "setTimedReloadIframe",
+                    "@->value": true
+                },
+                {
+                    "@->contentpath": "setTimeForReload",
+                    "@->value": "300"
+                }
+            ],
+            "@->extends": {
+                "aspectRatio": ""
+            }
+        }
+    },
+    "Datawrapper_CDN_NoResponsiveFixedHeight": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Datawrapper_CDN",
+            "@->overrides": [
+                {
+                    "@->contentpath": "fixedHeight",
+                    "@->value": "700"
+                }
+            ],
+            "@->extends": {
+                "aspectRatio": ""
+            }
+        }
+    },
+    "Datawrapper_CDN_NoResponsiveAspectRatio": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Datawrapper_CDN",
+            "@->overrides": [
+                {
+                    "@->contentpath": "fixedHeight",
+                    "@->value": ""
+                }
+            ],
+            "@->extends": {
+                "aspectRatio": "4x3"
+            }
+        }
+    },
+    "Datawrapper_CDN": {
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Datawrapper_CDN",
+            "@->overrides": [
+                {
+                    "@->contentpath": "fixedHeight",
+                    "@->value": ""
+                },
+                {
+                    "@->contentpath": "setResponsiveIframe",
+                    "@->value": false
+                }
+            ],
+            "@->extends": {
+                "aspectRatio": ""
+            }
+        }
+    },
+    "Esri": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Esri"
+        }
+    },
+    "Facebook": {
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Facebook"
+        }
+    },
+    "Flourish": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Flourish"
+        }
+    },
+    "Giphy": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Giphy"
+        }
+    },
+    "Instagram": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Instagram"
+        }
+    },
+    "Twitter": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Twitter"
+        }
+    },
+    "Vimeo": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Vimeo"
+        }
+    },
+    "Youtube": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Youtube"
+        }
+    },
+    "Youtube_360": {
+        "config": {
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Youtube_360"
+        }
+    },
+    "Wahl_Gemeinde_Ergebnis": {
+        "config": {
+            "template": "noDatapolicyCheck",
+            "useAsSnapshot": false
+        },
+        "args": {
+            "@->jsoninclude": "external-service/external_service.inc.json",
+            "@->contentpath": "Wahl_Gemeinde_Ergebnis"
+        }
+    }
+}

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

@@ -0,0 +1,65 @@
+{
+    "config": {
+        "template": "default",
+        "layout": "grid",
+        "renderSnapshotsWrapper": false,
+        "path": "args.logicItem.includeModel"
+    },
+    "100": {
+        "config": {
+            "renderSnapshotItemWrapper": true,
+            "css": "grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main"
+        },
+        "args": {
+            "@->jsoninclude": "teaser/teasers.inc.json",
+            "@->contentpath": "eventCalendarTeaser",
+            "@->overrides": [
+                {
+                    "@->contentpath": "logicItem.includePath",
+                    "@->value": "components/teaser/teaser_alternative"
+                },
+                {
+                    "@->contentpath": "logicItem.includeModel.teaserSize",
+                    "@->value": "100"
+                },
+                {
+                    "@->contentpath": "logicItem.includeModel.label",
+                    "@->value": {
+                        "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                        "@->contentpath": "eventLabelCalendar"
+                    }
+                }
+            ]
+        }
+    },
+    "100_no_future_events": {
+        "config": {
+            "renderSnapshotItemWrapper": true,
+            "css": "grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main"
+        },
+        "args": {
+            "@->jsoninclude": "teaser/teasers.inc.json",
+            "@->contentpath": "eventCalendarTeaser",
+            "@->overrides": [
+                {
+                    "@->contentpath": "logicItem.includeModel.eventCalendar.hasFutureEventsFromNow",
+                    "@->value": false
+                },
+                {
+                    "@->contentpath": "logicItem.includeModel.eventCalendar.months",
+                    "@->value": {
+                        "@->jsoninclude": "event/calendar/event_calendar_months.inc.json",
+                        "@->contentpath": "onlyMonthsInPast"
+                    }
+                },
+                {
+                    "@->contentpath": "logicItem.includeModel.label",
+                    "@->value": {
+                        "@->jsoninclude": "teaser/teaser_labels.inc.json",
+                        "@->contentpath": "eventLabelCalendar"
+                    }
+                }
+            ]
+        }
+    }
+}

package/src/assets/fixtures/teaser/teaser_ticker.inc.json

@@ -121,7 +121,7 @@
                 },
                 "tickerItemResults": {
                     "@->jsoninclude": "teaser/teaser_ticker_timeline.json",
-                    "@->contentpath": "tickerItemResults"
+                    "@->contentpath": "on_blue.args.tickerItemResults"
                 }
             }
         }
@@ -231,7 +231,7 @@
                 },
                 "tickerItemResults": {
                     "@->jsoninclude": "teaser/teaser_ticker_timeline.json",
-                    "@->contentpath": "tickerItemResults"
+                    "@->contentpath": "on_blue.args.tickerItemResults"
                 }
             }
         }

package/src/assets/js/utils.js

@@ -8,7 +8,6 @@
  */
 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
@@ -31,7 +30,6 @@ const getSnapshotsTemplate = (args) => {
         })
         template += snapshotsWrapperEnd
     } else {
-        console.log("SnapshotsJson", snapshotsJson)
         const filteredSnapshots = Object.entries(snapshotsJson).filter(([key, value]) =>
             key !== "config" && (value.config === undefined || value.config.useAsSnapshot !== false)
         )
@@ -44,20 +42,19 @@ const getSnapshotsTemplate = (args) => {
 
 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 renderSnapshotItemWrapper = undefined !== snapshotItemConfig.renderSnapshotItemWrapper ? snapshotItemConfig.renderSnapshotItemWrapper : renderSnapshotsWrapper
         const path = snapshotItemConfig.path ? `${snapshotItemConfig.path}` : (defaultPath ? `${defaultPath}` : "args")
         const snapshotTemplateName = snapshotItemConfig.template || defaultTemplate || "no-template"
 
-        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+        if (renderSnapshotItemWrapper) {
             template += `<div${snapshotItemConfig.css ? ` class="${snapshotItemConfig.css}"` : ''}>`
         }
 
         template += hbsTemplates[snapshotTemplateName](resolveObjectFromPath(path, value));
 
-        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+        if (renderSnapshotItemWrapper) {
             template += '</div>';
         }
     })

package/src/stories/basics/SnapshotStories.mdx

@@ -54,7 +54,7 @@ der globale Konfiguration überschrieben und neue Konfigurationen für die Story
 | :---------- | :--------------------------------------------------- |:--------------------------------------------------- |
 | **template** | Erlaubt es den Namen eines individuellen Templates zum Rendering der Story anzugeben. Wird nichts angegeben, wird das in der globalen Konfiguration definierte zum Rendering verwendet.||
 | **path**     | Erlaubt es einen Storyspezifischen Pfad zu den Testdaten anzugeben. Wird hier nichts angegeben wird der Wert aus der globalen Konfiguration genutzt  ||
-| **renderSnapshotItemWrapper** | Legt fest, ob das Markup der Story von einem `<div>` umschlossen wird. Das Setzen dieser Eigenschaft hat nur eine Auswirkung, wenn die globale Eigenschaft `renderSnapshotsWrapper` auf `true`steht.   |`true`|
+| **renderSnapshotItemWrapper** | Legt fest, ob das Markup der Story von einem `<div>` umschlossen wird. Der Standardwert dieser Eigenschaft entspricht dem Wert der globalen Eigenschaft `renderSnapshotsWrapper`.   |Wert der globalen Eigenschaft `renderSnapshotsWrapper` |
 | **css**   | Hierüber besteht die Möglichkeit individuelle CSS Klassen für das eine Story umschließende Wrapper `<div>` zu setzen.  ||
 | **useAsSnapshot**   | Hierüber kann gesteuert werden, ob einzelne Stories nicht in der Snapshot-Story gerendert werden sollen.  |`true`|
 

package/src/stories/views/base/tracking/pianoHelper.subfeature.js

@@ -1,4 +1,4 @@
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature';
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature';
 
 const pianoErrorSecondLevelId = 99;
 

package/src/stories/views/components/content/copytext/components/externalservice.hbs

@@ -1,5 +1,5 @@
 {{#with this.toModel.externalService}}
 
-    {{> components/externalService/external_service }}
+    {{> components/external-service/external_service }}
 
 {{/with}}

package/src/stories/views/components/content/copytext/fixtures/copytext_externalservice.json

@@ -1 +1 @@
-{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}
+{"copytextParagraph":[{"isHeadline":true,"text":"Copytext mit externen Diensten"},{"isHeadline":true,"text":"Wahl Gemeinde Ergebnis"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahl-gemeinde-ergebnis","externalServiceEmbedType":"js","externalServiceName":"wahl-gemeinde-ergebnis"},"serviceUrl":"https://www.tagesschau.de/wahl/archiv/2024-06-09-EP-DE/charts/wahlkreis-detail/G06412000-{version}.shtml?externalEmbed*G06412000*&2024-06-09-EP-DE*&https%3A%2F%2Fwww.hessenschau.de%2Fpolitik%2Flandtagswahl%2Fkandidatencheck%2Fwk-versions.json","fixedHeight":"","aspectRatio":"","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"360Grad"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"360grad","externalServiceEmbedType":"iFrame","externalServiceName":"360 Grad"},"serviceUrl":"https://static.hr.de/hessenschau/360/tour-altstadt/360Tour-altstadt-final1.html","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARD-Mediathek (Video)"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"ard_mediathek","externalServiceEmbedType":"iFrame","externalServiceName":"ARD Mediathek (Video)"},"serviceUrl":"https://www.ardmediathek.de/embed/Y3JpZDovL2Z1bmsubmV0LzExNzkwL3ZpZGVvLzE3NzQ2NzU?clientType=hr","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"ARTE Concert 2.0"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"arte_concert_new","externalServiceEmbedType":"iFrame","externalServiceName":"Arte Concert 2.0"},"serviceUrl":"https://www.arte.tv/player/v5/index.php?json_url=https%3A%2F%2Fapi.arte.tv%2Fapi%2Fplayer%2Fv2%2Fconfig%2Fde%2F116593-005-A&lang=de&autoplay=false&mute=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Bundesliga Audiostream"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"bundesligaAudiostream","externalServiceEmbedType":"iFrame","externalServiceName":"Bundesliga Audiostream"},"serviceUrl":"https://livecenter.sportschau.de/iframe/spielplan-kompakt/co3/md11/////","aspectRatio":"9x16","fixedHeight":"600","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Datawrapper CDN"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"datawrapper_cdn","externalServiceEmbedType":"js","externalServiceName":"Datawrapper (Datengrafik)"},"serviceUrl":"https://datawrapper.dwcdn.net/IC3Xn/1/","fixedHeight":"380","setResponsiveIframe":true,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Esri Karte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"esri","externalServiceEmbedType":"iFrame","externalServiceName":"Esri (Notfallkarte)"},"serviceUrl":"https://arcg.is/1aW0au0","aspectRatio":"100","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Notfallkarte"}}}},{"isHeadline":true,"text":"Facebook"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"facebook-post","externalServiceEmbedType":"js","externalServiceName":"Facebook"},"serviceUrl":"https://www.facebook.com/ZooFFM/posts/1926440010874354","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Flourish"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"flourish","externalServiceEmbedType":"iFrame","externalServiceName":"Flourish (Datengrafik)"},"serviceUrl":"https://public.flourish.studio/story/18361/embed","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Giphy"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"giphy","externalServiceEmbedType":"iFrame","externalServiceName":"Giphy (animiertes GIF)"},"serviceUrl":"https://giphy.com/embed/ONxw4niC96zwk","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Instagram"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"instagram","externalServiceEmbedType":"js","externalServiceName":"Instagram"},"serviceUrl":"https://www.instagram.com/p/CEjxNt8lW4K/","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"X"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":false,"externalServiceId":"twitter-post","externalServiceEmbedType":"js","externalServiceName":"X"},"serviceUrl":"https://twitter.com/tagesthemen/status/1578122540362465299","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Vimeo"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"vimeo","externalServiceEmbedType":"iFrame","externalServiceName":"Vimeo (Video)"},"serviceUrl":"https://player.vimeo.com/video/438111654","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube (Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/LMjXHYHZtrE?rel=0","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Youtube 360°"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":false,"makeConfigurable":true,"embedAsIFrame":true,"externalServiceId":"youtube360","externalServiceEmbedType":"iFrame","externalServiceName":"YouTube 360 (360° Video)"},"serviceUrl":"https://www.youtube-nocookie.com/embed/yT1pyf9oXGk","aspectRatio":"16x9","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":"","externalServiceCaption":"Eine Demo der Virtual Reality-Inszenierung '2049: Zeitreise Mobilität'"}}}},{"isHeadline":true,"text":"Statischer Dienst"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"staticService","externalServiceEmbedType":"iFrame","externalServiceName":"Statischer Dienst"},"serviceUrl":"https://static.hr.de/hessenschau/btw21/linientool/unternehmensgruendung","fixedHeight":"1000","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlmonitor"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlmonitor","externalServiceEmbedType":"js","externalServiceName":"Wahlmonitor"},"serviceUrl":"https://www.tagesschau.de/wahl/monitor-15/4e1_monitor_embed.js*data-externalembed=true data-electionid=2023-10-08-LT-DE-HE data-ratio=43 data-arrows=1 data-hideLinkContainer=1 data-lra=hr data-tagesschau=1","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Wahlkreiskarte"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":false,"externalServiceId":"wahlkreiskarte","externalServiceEmbedType":"js","externalServiceName":"Wahlkreiskarte"},"serviceUrl":"https://www.tagesschau.de/wahl/karte21/current/4e1_karte_embed.js*data-electionid=2023-10-08-LT-DE-HE data-y= data-a=K data-k= data-p= data-elements= data-site= data-q=","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}},{"isHeadline":true,"text":"Koalitionsrechner"},{"paragraphBoxItem":{"isExternalService":true,"toModel":{"externalService":{"externalServiceConfig":{"isWhitelisted":true,"makeConfigurable":false,"embedAsIFrame":true,"externalServiceId":"koalitionsrechner","externalServiceEmbedType":"iFrame","externalServiceName":"Koalitionsrechner"},"serviceUrl":"https://www.tagesschau.de/wahl/koalitionsrechner/2023-10-08-LT-DE-HE-koalitionsrechner_embed.shtml","fixedHeight":"550","setResponsiveIframe":false,"setTimedReloadIframe":false,"setTimeForReload":""}}}}],"dataPolicy":{"serviceList":[{"key":"ard_mediathek","value":"ARD Mediathek (Video)"},{"key":"arte_concert","value":"Arte Concert"},{"key":"arte_concert_new","value":"Arte Concert 2.0"},{"key":"datawrapper_cdn","value":"Datawrapper (Datengrafik)"},{"key":"esri","value":"Esri (Notfallkarte)"},{"key":"facebook-post","value":"Facebook"},{"key":"flourish","value":"Flourish (Datengrafik)"},{"key":"giphy","value":"Giphy (animiertes GIF)"},{"key":"instagram","value":"Instagram"},{"key":"twitter-post","value":"Twitter"},{"key":"vimeo","value":"Vimeo (Video)"},{"key":"youtube","value":"YouTube (Video)"},{"key":"youtube360","value":"YouTube 360 (360° Video)"}]}}

package/src/stories/views/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -1,4 +1,4 @@
-import SettingsCookie from 'components/externalService/globalSettingsCookie.subfeature'
+import SettingsCookie from 'components/external-service/globalSettingsCookie.subfeature'
 import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
 import { uxAction } from 'base/tracking/pianoHelper.subfeature'
 
@@ -22,7 +22,7 @@ const DataPolicySettings = function (context) {
 
     //Überprüfung ein Settings-Cookie da ist
     const checkForExistingCookies = function () {
-    
+
         if (getJSONCookie('hrSettings')) {
             getAllToggleValuesFromSettings()
         }
@@ -31,16 +31,16 @@ const DataPolicySettings = function (context) {
             //Wenn kein Cookie vorhanden wird diese initial über die Checkbox "Dienst ist initial immer aktiviert (Whitelist)"
             //im Konfig-Dokument bestückt.
             for (var i = 0; i < toggleSwitches.length; ++i) {
-              if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
-                toggleSwitches[i].checked = true;
-              }
-              else{
-                toggleSwitches[i].checked = false;
-              }
-              setAllToggleEventListeners(toggleSwitches[i]);
-              initializeAllToggleEventListeners(i);
+                if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    toggleSwitches[i].checked = false;
+                }
+                setAllToggleEventListeners(toggleSwitches[i]);
+                initializeAllToggleEventListeners(i);
             }
-        changeProviderTitle();
+            changeProviderTitle();
         }
     }
 
@@ -62,39 +62,39 @@ const DataPolicySettings = function (context) {
         var id;
         console.log("Setze alle Settings-Regler")
         for (var i = 0; i < toggleSwitches.length; ++i) {
-          id = toggleSwitches[i].id;
-          if(settingsCookie.isSettingsCookieExistent(id)){
-            console.log("Dienst "+ id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
-            if(settingsCookie.isSettingsCookieAccepted(id)) {
-              console.log("Aktiviere den Toggle")
-              toggleSwitches[i].checked = true;
-            }
-            else{
-              console.log("Deaktiviere den Toggle")
-              toggleSwitches[i].checked = false;
-            }
-          }
-          else{
-            console.log("Dienst "+ id + " ist im Cookie nicht enthalten, prüfe daher den Default")
-            var whiteList = document.getElementById(id).getAttribute("data-whitelist")
-            if(whiteList == 'true'){
-              console.log("Ist per Default eingeschaltet")
-              console.log("Aktiviere den Toggle")
-              toggleSwitches[i].checked = true;
+            id = toggleSwitches[i].id;
+            if (settingsCookie.isSettingsCookieExistent(id)) {
+                console.log("Dienst " + id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+                if (settingsCookie.isSettingsCookieAccepted(id)) {
+                    console.log("Aktiviere den Toggle")
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    console.log("Deaktiviere den Toggle")
+                    toggleSwitches[i].checked = false;
+                }
             }
-            else{
-              console.log("Ist per Default ausgeschaltet")
-              console.log("Deaktiviere den Toggle")
-              toggleSwitches[i].checked = false;
+            else {
+                console.log("Dienst " + id + " ist im Cookie nicht enthalten, prüfe daher den Default")
+                var whiteList = document.getElementById(id).getAttribute("data-whitelist")
+                if (whiteList == 'true') {
+                    console.log("Ist per Default eingeschaltet")
+                    console.log("Aktiviere den Toggle")
+                    toggleSwitches[i].checked = true;
+                }
+                else {
+                    console.log("Ist per Default ausgeschaltet")
+                    console.log("Deaktiviere den Toggle")
+                    toggleSwitches[i].checked = false;
+                }
+
             }
-    
-          }
-          setAllToggleEventListeners(toggleSwitches[i]);
-          initializeAllToggleEventListeners(i);
+            setAllToggleEventListeners(toggleSwitches[i]);
+            initializeAllToggleEventListeners(i);
         }
         toggleAllSwitch.checked = allTogglesExternalServiceChecked()
     }
-    
+
     const initializeAllToggleEventListeners = function (serviceId) {
         listen(
             'hr:externalService-activate-' + toggleSwitches[serviceId].id,

package/src/stories/views/components/event/calendar/event_calendar_components.mdx

@@ -1,46 +1,9 @@
 import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
-import eventCalendarHeading from './event_calendar_heading.hbs'
-import eventCalendarNav from './event_calendar_nav.hbs'
-import eventCalendarContent from './event_calendar_event_teaser.hbs'
-import eventCalendarFooter from './event_calendar_footer.hbs'
-import teaserEventCalendar100Serif from '../../teaser/fixtures/teaser_event_calendar_100_serif.json'
-import eventCalendarEventTeaserData from './fixtures/event_calendar_event_teaser.json'
-import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
 import * as EventCalendarComponentsStories from './event_calendar_components.stories';
 
 <Meta of={EventCalendarComponentsStories} />
 
-export const TemplateEventCalendarHeading = (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 eventCalendarHeading({ brand, ...args })
-}
-
-export const TemplateEventCalendarNav = (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 eventCalendarNav({ brand, ...args })
-}
-
-export const TemplateEventCalendarContent = (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 eventCalendarContent({ brand, ...args })
-}
-
-export const TemplateEventCalendarFooter = (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 eventCalendarFooter({ brand, ...args })
-}
+
 
 # Standard-Teaser