hr-design-system-handlebars 1.60.2 → 1.60.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.60.3 (Wed Mar 13 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 2962- Externe Dienste Dummy Template [#881](https://github.com/mumprod/hr-design-system-handlebars/pull/881) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 2
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.60.2 (Wed Mar 13 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1963,6 +1963,10 @@ article.indexTextDS .indexTextHighlighted .link {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -1992,6 +1996,12 @@ article.indexTextDS .indexTextHighlighted .link {
 .gap-y-9 {
   row-gap: 2.25rem;
 }
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
@@ -3316,7 +3326,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1710343007701;
+  counter-reset: cnt1710352958873;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3622,7 +3632,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1710343007701 1;
+  counter-increment: cnt1710352958873 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3638,7 +3648,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1710343007701);
+  content: counter(cnt1710352958873);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -0,0 +1,8 @@
+ {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+    <span class="hover:underline decoration-1 font-copy">Datenschutzbestimmungen
+    {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+    </span>
+{{/components/base/link}}
+{{#*inline "htmlProperties"~}}
+{{~/inline}}
+

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

@@ -0,0 +1,17 @@
+<div class="grid">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+             data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#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}}"}}'>
+            {{~> components/externalService/external_service_data_policy ~}}
+        </div>
+        {{~> components/externalService/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div >
+            <div class="float-right">
+            {{~> components/externalService/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~> components/dataPolicySettings/data_policy_settings ~}}

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

@@ -0,0 +1,3 @@
+ <div class="pt-4 text-base font-copy">
+    <span class="figcaption">Das ist ein Erklärtext</span>
+</div>

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

@@ -0,0 +1,42 @@
+<div id="service--{{nextRandom}}" class="p-10 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr js-datapolicy">
+    <h3 class="text-2xl font-headingSerif">
+        {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
+    </h3>
+    <div class="">
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
+            {{~> components/externalService/data_policy_link ~}}
+        </p>
+        <div class="pt-4">
+            {{~> components/externalService/external_service_form_checkbox ~}}
+        </div>
+        <div class="pt-4 float-right">
+            {{#with this}}
+                <div class="inline-flex">
+                 {{~> components/externalService/external_service_settings_button ~}}
+                {{#*inline "htmlProperties"}}
+                    data-piano-tracking='{"label":"DSGVO-Overlay"}'
+                    data-a11y-dialog-show="datapolicy-settings-dialog"
+                {{/inline}}
+                </div>
+            {{/with}}
+            <div class="inline-flex">
+            {{~> components/externalService/external_service_load_content_button ~}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+            </div>
+        </div>
+    </div>
+    <noscript>
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_no_js_text" this.externalServiceConfig.externalServiceName}}
+        </p>
+        {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+            <span class="hover:underline decoration-1 font-copy">
+                {{loca "ext_service_datapolicy_no_js_link" this.content.externalServiceConfig.externalServiceName}}
+                {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+            </span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"~}}
+        {{~/inline}}
+    </noscript>
+</div>

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

@@ -0,0 +1,17 @@
+<fieldset>
+    <div class="mt-6 space-y-6">
+    <div class="relative flex gap-x-3">
+        <div class="flex h-6 items-center">
+        <input id="dataPolicyAcceptPermanently-{{getRandom}}" name="dataPolicyAcceptPermanently"
+                    title="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    placeholder="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    value="0" required="" type="checkbox" class="h-6 w-6 rounded border-gray text-indigo focus:ring-indigo">
+        </div>
+        <div class="text-sm leading-6">
+        <label for="dataPolicyAcceptPermanently-{{getRandom}}" class="text-base font-copy">
+            {{loca "ext_service_datapolicy_accept_permanently_text" this.externalServiceConfig.externalServiceName}}
+        </label>
+        </div>
+    </div>
+</fieldset>
+      

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

@@ -0,0 +1,4 @@
+{{#> components/button/button _size="md" _variant="primary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Inhalte anzeigen"}}
+            {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+{{/components/button/button}}

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

@@ -0,0 +1,8 @@
+{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+{{/components/button/button}}
+{{#*inline "htmlProperties"}}
+    data-piano-tracking='{"label":"","secondLevelId":}'
+    data-a11y-dialog-show="datapolicy-settings-dialog"
+{{/inline}}

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

@@ -0,0 +1,8 @@
+ {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+    <span class="hover:underline decoration-1 font-copy">Datenschutzbestimmungen
+    {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+    </span>
+{{/components/base/link}}
+{{#*inline "htmlProperties"~}}
+{{~/inline}}
+

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

@@ -0,0 +1,17 @@
+<div class="grid">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+             data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#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}}"}}'>
+            {{~> components/externalService/external_service_data_policy ~}}
+        </div>
+        {{~> components/externalService/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div >
+            <div class="float-right">
+            {{~> components/externalService/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~> components/dataPolicySettings/data_policy_settings ~}}

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

@@ -0,0 +1,3 @@
+ <div class="pt-4 text-base font-copy">
+    <span class="figcaption">Das ist ein Erklärtext</span>
+</div>

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

@@ -0,0 +1,42 @@
+<div id="service--{{nextRandom}}" class="p-10 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr js-datapolicy">
+    <h3 class="text-2xl font-headingSerif">
+        {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
+    </h3>
+    <div class="">
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
+            {{~> components/externalService/data_policy_link ~}}
+        </p>
+        <div class="pt-4">
+            {{~> components/externalService/external_service_form_checkbox ~}}
+        </div>
+        <div class="pt-4 float-right">
+            {{#with this}}
+                <div class="inline-flex">
+                 {{~> components/externalService/external_service_settings_button ~}}
+                {{#*inline "htmlProperties"}}
+                    data-piano-tracking='{"label":"DSGVO-Overlay"}'
+                    data-a11y-dialog-show="datapolicy-settings-dialog"
+                {{/inline}}
+                </div>
+            {{/with}}
+            <div class="inline-flex">
+            {{~> components/externalService/external_service_load_content_button ~}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+            </div>
+        </div>
+    </div>
+    <noscript>
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_no_js_text" this.externalServiceConfig.externalServiceName}}
+        </p>
+        {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+            <span class="hover:underline decoration-1 font-copy">
+                {{loca "ext_service_datapolicy_no_js_link" this.content.externalServiceConfig.externalServiceName}}
+                {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+            </span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"~}}
+        {{~/inline}}
+    </noscript>
+</div>

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

@@ -0,0 +1,17 @@
+<fieldset>
+    <div class="mt-6 space-y-6">
+    <div class="relative flex gap-x-3">
+        <div class="flex h-6 items-center">
+        <input id="dataPolicyAcceptPermanently-{{getRandom}}" name="dataPolicyAcceptPermanently"
+                    title="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    placeholder="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    value="0" required="" type="checkbox" class="h-6 w-6 rounded border-gray text-indigo focus:ring-indigo">
+        </div>
+        <div class="text-sm leading-6">
+        <label for="dataPolicyAcceptPermanently-{{getRandom}}" class="text-base font-copy">
+            {{loca "ext_service_datapolicy_accept_permanently_text" this.externalServiceConfig.externalServiceName}}
+        </label>
+        </div>
+    </div>
+</fieldset>
+      

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

@@ -0,0 +1,4 @@
+{{#> components/button/button _size="md" _variant="primary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Inhalte anzeigen"}}
+            {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+{{/components/button/button}}

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

@@ -0,0 +1,8 @@
+{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+{{/components/button/button}}
+{{#*inline "htmlProperties"}}
+    data-piano-tracking='{"label":"","secondLevelId":}'
+    data-a11y-dialog-show="datapolicy-settings-dialog"
+{{/inline}}

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -149,7 +149,7 @@
     "ext_service_datapolicy_accept_permanently_text": "Externe Inhalte von <b>{0}</b> zukünftig immer anzeigen.",
     "ext_service_datapolicy_accept_button_text": "Inhalt anzeigen",
     "ext_service_datapolicy_headline": "Externen Inhalt von {0} anzeigen?",
-    "ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren <a class='link c-dataPolicy__link' target='_blank' href=\"{<% hrcms.delivery.hr.baseurl %>}datenschutz/index.html\">Datenschutzbestimmungen<span class=\"unbreakable\"><svg class=\"icon icon--primary icon--textRight\" role=\"presentation\"><use xlink:href=\"{<% hrcms.delivery.current.assetBaseUrl %>}base/icons/icons/svgmap.min.svg#extern\"/></svg></span></a>.",
+    "ext_service_datapolicy_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Beim Laden des Inhalts werden Daten an den Anbieter und ggf. weitere Dritte übertragen. Nähere Informationen erhalten Sie in unseren ",
     "ext_service_datapolicy_no_js_text": "An dieser Stelle befindet sich ein von unserer Redaktion empfohlener Inhalt von <b>{0}</b>. Da Sie in Ihrem Browser Javascript deaktiviert haben, kann dieser hier nicht angezeigt werden. Der nachfolgende Link öffnet den Inhalt auf der Seite des Anbieters.",
     "ext_service_datapolicy_no_js_link": "{0}-Inhalt öffnen",
     "story_infobox_intro_sr": "Weitere Informationen",

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

@@ -0,0 +1,8 @@
+ {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+    <span class="hover:underline decoration-1 font-copy">Datenschutzbestimmungen
+    {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+    </span>
+{{/components/base/link}}
+{{#*inline "htmlProperties"~}}
+{{~/inline}}
+

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

@@ -0,0 +1,8 @@
+import structuredClone from 'core-js-pure/actual/structured-clone'
+import externalServiceContent from './fixtures/external_service.json'
+
+const ExternalServiceContent =  structuredClone(
+    Object.assign({}, externalServiceContent)
+)
+
+export { ExternalServiceContent }

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

@@ -0,0 +1,17 @@
+<div class="grid">
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}
+        <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
+             data-hr-external-service='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}", "embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}", "dataPolicyCheck": true,"iFrameConfig": {"heightClass":"ar_iframe"{{#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}}"}}'>
+            {{~> components/externalService/external_service_data_policy ~}}
+        </div>
+        {{~> components/externalService/external_service_caption ~}}
+        {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_outro_sr" ~}}
+        <div >
+            <div class="float-right">
+            {{~> components/externalService/external_service_settings_button ~}}
+            </div>
+        </div>
+</div>
+{{~> components/dataPolicySettings/data_policy_settings ~}}

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

@@ -0,0 +1,27 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as ExternalServiceStories from './external_service.stories'
+
+<Meta of={ExternalServiceStories} />
+
+# Externe Dienste 
+
+## Platzhalter (Dummy) für externe Dienste gemäß DSGVO 
+
+Der hier beschriebene "Dummy" ist ein visueller Platzhalter für Content der von externen Anbietern kommt und an der Stelle des Platzhalters dargestellt werden soll.
+Aus rechtlichen (z.B.DSGVO) Gründen, werden diese Inhalte aber nicht permanent dargestellt sondern nur durch eine explizite "Freischaltung" durch den Nutzer.
+<p>Hierbei kann der Nutzer entscheiden ob er den Inhalt des Anbieters einmalig oder dauerhaft angezeigt bekommen möchte.</p>
+<p>Zu den klassischen Anbietern zählen z.B. Video-Inhalte von Youtube, Social-Media-Inhalte von Instagram, Facebook und Co aber auch animierte GIFs oder Datengrafiken, die
+nicht im CMS des HR eingegeben / gepflegt wurden.</p>
+
+
+# Grundaufbau
+Der Dummy setzt sich aus Titel, einem kurzen Erklärtext und interaktiven Auswahlelementen zusammen.
+Titel und Erklärtext stellen den Namen des jeweiligen - noch nicht aktivierten - externen Dienstes dar, bis der Nutzer diesen dauerhaft oder einmalig aktiviert hat.
+Die interaktiven Elemente sind:
+<ul>
+<li> eine Checkbox um entsprechenden Dienst DAUERHAFT zu aktivieren. Der Status wird im Cookie "hrSettings" gespeichert.</li>
+<li> einen Einstellungs-Button, der den globalen Einstellungsdialog als Overlay öffnet und DAUERHAFT aktivierte Dienste anzeigt.</li>
+<li> einen Aktions-Button, der den Inhalt einmalig, bis zum nächsten Refresh oder erneuten Besuch der Seite anzeigt.</li>
+</ul>
+
+<Story of={ExternalServiceStories.ExterneDienste} />

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

@@ -0,0 +1,30 @@
+import { 
+    ExternalServiceContent
+} from './external_service.data.js'
+import externalService from './external_service.hbs'
+
+const TemplatePageExternalService = (args, { globals: { theme } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand = undefined !== theme ? theme : 'hessenschau'       
+    return externalService({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Externe Dienste',
+    argTypes: {},
+
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const ExterneDienste = {
+    render: TemplatePageExternalService.bind({}),
+    name: 'Externe Dienste',
+    args: ExternalServiceContent, 
+}

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

@@ -0,0 +1,3 @@
+ <div class="pt-4 text-base font-copy">
+    <span class="figcaption">Das ist ein Erklärtext</span>
+</div>

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

@@ -0,0 +1,42 @@
+<div id="service--{{nextRandom}}" class="p-10 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr js-datapolicy">
+    <h3 class="text-2xl font-headingSerif">
+        {{loca "ext_service_datapolicy_headline" this.externalServiceConfig.externalServiceName}}
+    </h3>
+    <div class="">
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_text" this.externalServiceConfig.externalServiceName}}
+            {{~> components/externalService/data_policy_link ~}}
+        </p>
+        <div class="pt-4">
+            {{~> components/externalService/external_service_form_checkbox ~}}
+        </div>
+        <div class="pt-4 float-right">
+            {{#with this}}
+                <div class="inline-flex">
+                 {{~> components/externalService/external_service_settings_button ~}}
+                {{#*inline "htmlProperties"}}
+                    data-piano-tracking='{"label":"DSGVO-Overlay"}'
+                    data-a11y-dialog-show="datapolicy-settings-dialog"
+                {{/inline}}
+                </div>
+            {{/with}}
+            <div class="inline-flex">
+            {{~> components/externalService/external_service_load_content_button ~}}
+            {{#*inline "htmlProperties"}}{{/inline}}
+            </div>
+        </div>
+    </div>
+    <noscript>
+        <p class="pt-4 text-base font-copy">
+            {{loca "ext_service_datapolicy_no_js_text" this.externalServiceConfig.externalServiceName}}
+        </p>
+        {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
+            <span class="hover:underline decoration-1 font-copy">
+                {{loca "ext_service_datapolicy_no_js_link" this.content.externalServiceConfig.externalServiceName}}
+                {{> components/base/image/icon _icon="extern" _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}
+            </span>
+        {{/components/base/link}}
+        {{#*inline "htmlProperties"~}}
+        {{~/inline}}
+    </noscript>
+</div>

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

@@ -0,0 +1,17 @@
+<fieldset>
+    <div class="mt-6 space-y-6">
+    <div class="relative flex gap-x-3">
+        <div class="flex h-6 items-center">
+        <input id="dataPolicyAcceptPermanently-{{getRandom}}" name="dataPolicyAcceptPermanently"
+                    title="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    placeholder="Externe Inhalte von {{this.externalServiceConfig.externalServiceName}} zukünftig immer laden."
+                    value="0" required="" type="checkbox" class="h-6 w-6 rounded border-gray text-indigo focus:ring-indigo">
+        </div>
+        <div class="text-sm leading-6">
+        <label for="dataPolicyAcceptPermanently-{{getRandom}}" class="text-base font-copy">
+            {{loca "ext_service_datapolicy_accept_permanently_text" this.externalServiceConfig.externalServiceName}}
+        </label>
+        </div>
+    </div>
+</fieldset>
+      

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

@@ -0,0 +1,4 @@
+{{#> components/button/button _size="md" _variant="primary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Inhalte anzeigen"}}
+            {{> components/button/components/button_icon _icon="reload" _iconmap="icons"}}
+{{/components/button/button}}

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

@@ -0,0 +1,8 @@
+{{#> components/button/button _size="md" _variant="tertiary" _css="" _type="button"}}
+            {{> components/button/components/button_label _label="Einstellungen"}}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
+{{/components/button/button}}
+{{#*inline "htmlProperties"}}
+    data-piano-tracking='{"label":"","secondLevelId":}'
+    data-a11y-dialog-show="datapolicy-settings-dialog"
+{{/inline}}

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

@@ -0,0 +1 @@
+{}