hr-design-system-handlebars 1.64.0 → 1.64.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.64.1 (Wed Apr 17 2024)
+
+#### 🐛 Bug Fix
+
+- Code cleanup aspectratio fix [#909](https://github.com/mumprod/hr-design-system-handlebars/pull/909) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.64.0 (Wed Apr 17 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3348,7 +3348,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1713357692833;
+  counter-reset: cnt1713365504620;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3727,7 +3727,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1713357692833 1;
+  counter-increment: cnt1713365504620 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3743,7 +3743,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1713357692833);
+  content: counter(cnt1713365504620);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/externalService/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,8 +1,9 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, embedCode) {
+const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode) {
     
     const { element: rootElement } = context
     let aspectRatio = configAR
     let fixedHeight = configFixedHeight
+    let uniqueId = id
 
     const createNoResponsiveIframe = function () {
 
@@ -65,7 +66,8 @@ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHe
     iframe.setAttribute('scrolling', 'no')
     iframe.setAttribute('frameborder', '0')
     iframe.src = embedCode
-
+    iframe.id = 'datawrapper-chart-' + uniqueId
+    
     div.appendChild(iframe)
     parentDiv.appendChild(div)
     rootElement.appendChild(parentDiv)

package/dist/assets/js/components/externalService/externalServiceDs.feature.js

@@ -157,8 +157,14 @@ const ExternalService = function (context) {
         removeDatapolicyBox()
         createUniqueID()
         if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
             noResponsiveIframe.createNoResponsiveIframe()
+
+            if (iFrameConfig.refreshContent == 'true') {
+                console.log("contentRefresher anfügen")
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
+                contentRefresher.createRefresher()
+            }
         } 
         else {
             var iframe = document.createElement('iframe')
@@ -178,6 +184,7 @@ const ExternalService = function (context) {
                 'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
                 true
             )
+
             if (iFrameConfig.refreshContent == 'true') {
                 console.log("contentRefresher anfügen")
                 contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
@@ -275,40 +282,17 @@ const ExternalService = function (context) {
 
     const loadIframe = function () {
         console.log('load iframe ' + id)
-        iframe =
-            "<iframe id='i_frame' data-isloaded='0' src='" +
-            embedCode +
-            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+        iframe = "<iframe id='i_frame' data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
-            iframe =
-                "<div class='!h-full'><div class=" +
-                getAspectRatioClass() +
-                ' ' +
-                id +
-                "'><iframe id='i_frame' data-isloaded='0' src='" +
-                embedCode +
-                "' frameborder='0' class='w-full h-full '" +
-                id +
-                "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
+            iframe ="<div class='!h-full'><div class='"+ getAspectRatioClass() +"'><iframe id='i_frame' data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
             if (iFrameConfig.fixedHeight) {
-                iframe =
-                    "<div class='!h-full' style='height:" +
-                    iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' src='" +
-                    embedCode +
-                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe = "<div style='height:"+ iFrameConfig.fixedHeight +"px'><iframe data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
-                iframe =
-                    "<div class='!h-full " +
-                    id +
-                    "'><iframe data-isloaded='0' src='" +
-                    embedCode +
-                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe = "<div class='!h-full'><iframe data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
-
         replaceAnimated(rootElement, iframe, false)
     }
 

package/dist/views/components/externalService/external_service.hbs

@@ -1,5 +1,5 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
-    
+    <!-- Embedding via JS with DataPolicyCheck-->  
     {{> components/externalService/external_service_with_datapolicy_check }}
 
 {{else}}
@@ -8,26 +8,19 @@
         <div class="clear-both mt-10">
             <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
             {{#if this.externalServiceConfig.embedAsIFrame}}              
-                    
+                <!-- Embedding via Iframe -->    
                 <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
                     {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
-                        <iframe frameborder="0" width="100%" height="100%"
-                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
-                                allowfullscreen scrolling='no'>
-                        </iframe>
+                        <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
                     {{#unless this.fixedHeight}}</div>{{/unless}}                        
                 </div>
-            
             {{else}}
-            
+                <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
-                </div>
-                
-            {{/if}}
-                
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                </div>  
+            {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}
-            
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/dist/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,9 +1,8 @@
 <div class="grid clear-both mt-10">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":""{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/dist/views_static/components/externalService/external_service.hbs

@@ -1,5 +1,5 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
-    
+    <!-- Embedding via JS with DataPolicyCheck-->  
     {{> components/externalService/external_service_with_datapolicy_check }}
 
 {{else}}
@@ -8,26 +8,19 @@
         <div class="clear-both mt-10">
             <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
             {{#if this.externalServiceConfig.embedAsIFrame}}              
-                    
+                <!-- Embedding via Iframe -->    
                 <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
                     {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
-                        <iframe frameborder="0" width="100%" height="100%"
-                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
-                                allowfullscreen scrolling='no'>
-                        </iframe>
+                        <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
                     {{#unless this.fixedHeight}}</div>{{/unless}}                        
                 </div>
-            
             {{else}}
-            
+                <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
-                </div>
-                
-            {{/if}}
-                
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                </div>  
+            {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}
-            
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/dist/views_static/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,9 +1,8 @@
 <div class="grid clear-both mt-10">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":""{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.64.0",
+    "version": "1.64.1",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/externalService/dataWrapperNoResponsiveIframe.subfeature.js

@@ -1,8 +1,9 @@
-const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, embedCode) {
+const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHeight, id, embedCode) {
     
     const { element: rootElement } = context
     let aspectRatio = configAR
     let fixedHeight = configFixedHeight
+    let uniqueId = id
 
     const createNoResponsiveIframe = function () {
 
@@ -65,7 +66,8 @@ const DataWrapperNoResponsiveIframe = function (context, configAR, configFixedHe
     iframe.setAttribute('scrolling', 'no')
     iframe.setAttribute('frameborder', '0')
     iframe.src = embedCode
-
+    iframe.id = 'datawrapper-chart-' + uniqueId
+    
     div.appendChild(iframe)
     parentDiv.appendChild(div)
     rootElement.appendChild(parentDiv)

package/src/stories/views/components/externalService/externalServiceDs.feature.js

@@ -157,8 +157,14 @@ const ExternalService = function (context) {
         removeDatapolicyBox()
         createUniqueID()
         if (iFrameConfig.noResponsiveIframe == 'true') {
-            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, embedCode)
+            noResponsiveIframe = new DataWrapperNoResponsiveIframe(context, iFrameConfig.aspectRatio, iFrameConfig.fixedHeight, uniqueId, embedCode)
             noResponsiveIframe.createNoResponsiveIframe()
+
+            if (iFrameConfig.refreshContent == 'true') {
+                console.log("contentRefresher anfügen")
+                contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
+                contentRefresher.createRefresher()
+            }
         } 
         else {
             var iframe = document.createElement('iframe')
@@ -178,6 +184,7 @@ const ExternalService = function (context) {
                 'https://static.hr.de/hessenschau/datawrapper/responsiveIframe.js',
                 true
             )
+
             if (iFrameConfig.refreshContent == 'true') {
                 console.log("contentRefresher anfügen")
                 contentRefresher = new DataWrapperContentRefresher(context, uniqueId, iFrameConfig.refreshIntervall)
@@ -275,40 +282,17 @@ const ExternalService = function (context) {
 
     const loadIframe = function () {
         console.log('load iframe ' + id)
-        iframe =
-            "<iframe id='i_frame' data-isloaded='0' src='" +
-            embedCode +
-            "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
+        iframe = "<iframe id='i_frame' data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
         if (iFrameConfig.aspectRatio) {
-            iframe =
-                "<div class='!h-full'><div class=" +
-                getAspectRatioClass() +
-                ' ' +
-                id +
-                "'><iframe id='i_frame' data-isloaded='0' src='" +
-                embedCode +
-                "' frameborder='0' class='w-full h-full '" +
-                id +
-                "' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
+            iframe ="<div class='!h-full'><div class='"+ getAspectRatioClass() +"'><iframe id='i_frame' data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>"
             //TODO Weiche Animation der Inhalte
         } else {
             if (iFrameConfig.fixedHeight) {
-                iframe =
-                    "<div class='!h-full' style='height:" +
-                    iFrameConfig.fixedHeight +
-                    "px'><iframe data-isloaded='0' src='" +
-                    embedCode +
-                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe = "<div style='height:"+ iFrameConfig.fixedHeight +"px'><iframe data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             } else {
-                iframe =
-                    "<div class='!h-full " +
-                    id +
-                    "'><iframe data-isloaded='0' src='" +
-                    embedCode +
-                    "' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
+                iframe = "<div class='!h-full'><iframe data-isloaded='0' src='"+ embedCode +"' frameborder='0' class='w-full h-full' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"
             }
         }
-
         replaceAnimated(rootElement, iframe, false)
     }
 

package/src/stories/views/components/externalService/external_service.hbs

@@ -1,5 +1,5 @@
 {{#if this.externalServiceConfig.makeConfigurable}}
-    
+    <!-- Embedding via JS with DataPolicyCheck-->  
     {{> components/externalService/external_service_with_datapolicy_check }}
 
 {{else}}
@@ -8,26 +8,19 @@
         <div class="clear-both mt-10">
             <span class="sr-only">{{loca "story_externalservice_intro_sr" }}</span>    
             {{#if this.externalServiceConfig.embedAsIFrame}}              
-                    
+                <!-- Embedding via Iframe -->    
                 <div class="{{#if this.fixedHeight}}overflow-y-hidden{{else}}overflow-hidden{{/if}}" {{#if this.fixedHeight}}style="height:{{this.fixedHeight}}px;"{{/if}}>
                     {{#unless this.fixedHeight}}<div class="{{~inline-switch this.aspectRatio  '["16x9","16x7","4x3","100x27","100","9x16","7x16"]' '["ar-16-9","ar-16-7","ar-4-3","ar-100-27","ar-1-1","ar-9-16","ar-7-16","ar-16-9"]'~}}">{{/unless}}
-                        <iframe frameborder="0" width="100%" height="100%"
-                                src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen
-                                allowfullscreen scrolling='no'>
-                        </iframe>
+                        <iframe frameborder="0" width="100%" height="100%" src="{{{this.serviceUrl}}}" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling='no'></iframe>
                     {{#unless this.fixedHeight}}</div>{{/unless}}                        
                 </div>
-            
             {{else}}
-            
+                <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": false, "iFrameConfig":{}}'>
-                </div>
-                
-            {{/if}}
-                
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                </div>  
+            {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}
-            
             <span class="sr-only">{{loca "story_externalservice_outro_sr" }}</span>    
         </div>
     {{/if}}

package/src/stories/views/components/externalService/external_service.mdx

@@ -26,21 +26,4 @@ Die interaktiven Elemente sind:
 
 
 ## Beispiel Dienst Giphy
-<Story of={ExternalServiceStories.ExterneDiensteGiphy} />
-
-## Beispiel Dienst Datawrapper mit responsivem Iframe
-Der Datawrapper wird standardmässig mit einem responsiven Iframe geladen, d.h. das der Inhalt des Iframes - die Datengrafik - an den äußeren Container skaliert wird.
-
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapper} />
-
-## Beispiel Dienst Datawrapper ohne responsives Iframe und fester Höhe
-Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld FixedHeight befüllt, wird der Wert daraus übernommen
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveFixedHeight} />
-
-## Beispiel Dienst Datawrapper ohne responsives Iframe und AspectRatio
-Ist die Konfiguration "NoResponsiveIFrame" auf TRUE gesetzt werden die Felder für "FixedHeight" und "AspectRatio" ausgelesen. Ist das Feld AspectRatio ausgewählt wird der Wert daraus übernommen
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperNoResponsiveAspectRatio} />
-
-
-## Beispiel Dienst Datawrapper mit ContentRefresher
-<Story of={ExternalServiceStories.ExterneDiensteDatawrapperContentRefresher} />
+<Story of={ExternalServiceStories.ExterneDiensteGiphy} />

package/src/stories/views/components/externalService/external_service.stories.js

@@ -28,6 +28,11 @@ export const ExterneDiensteGiphy = {
     name: 'Externe Dienste Giphy',
     args: ExternalServiceContent.Giphy, 
 }
+export const ExterneDiensteFlourish = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste Flourish',
+    args: ExternalServiceContent.Flourish, 
+}
 export const ExterneDiensteDatawrapper = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',

package/src/stories/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -1,9 +1,8 @@
 <div class="grid clear-both mt-10">
-        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":""{{#if
-                 this.fixedHeight}},"fixedHeight":"{{this.fixedHeight}}", "fixedHeightClass":"-fixedHeight"{{else}},{{#if
-                 this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"}}'>
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+                "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>
         {{~> components/externalService/components/external_service_caption ~}}

package/src/stories/views/components/externalService/fixtures/external_service_with_datapolicy.json

@@ -26,7 +26,37 @@
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
     },      
-    "Datawrapper_CDN": {
+    "Datawrapper_CDN_NoResponsiveFixedHeightReload": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "700",
+        "aspectRatio": "",
+        "setResponsiveIframe": true,
+        "setTimedReloadIframe": true,
+        "setTimeForReload": "300"
+    },
+    "Datawrapper_CDN_NoResponsiveFixedHeight": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "700",
+        "aspectRatio": "",
+        "setResponsiveIframe": true,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
+    "Datawrapper_CDN_NoResponsiveAspectRatio": {
         "externalServiceConfig": {
             "makeConfigurable": true,
             "embedAsIFrame": false,
@@ -35,11 +65,27 @@
             "externalServiceName": "Datawrapper (Datengrafik)"
         },
         "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
-        "fixedHeight": "380",
+        "fixedHeight": "",
+        "aspectRatio": "4x3",
         "setResponsiveIframe": true,
         "setTimedReloadIframe": false,
         "setTimeForReload": ""
     },
+    "Datawrapper_CDN": {
+        "externalServiceConfig": {
+            "makeConfigurable": true,
+            "embedAsIFrame": false,
+            "externalServiceId": "datawrapper_cdn",
+            "externalServiceEmbedType": "js",
+            "externalServiceName": "Datawrapper (Datengrafik)"
+        },
+        "serviceUrl": "https://datawrapper.dwcdn.net/IC3Xn/1/",
+        "fixedHeight": "",
+        "aspectRatio": "",
+        "setResponsiveIframe": false,
+        "setTimedReloadIframe": false,
+        "setTimeForReload": ""
+    },
     "Esri": {
         "externalServiceConfig": {
             "makeConfigurable": true,