hr-design-system-handlebars 1.34.7 → 1.35.1

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

@@ -0,0 +1,285 @@
+import DatapolicyCookie from 'components/externalService/datapolicyCookie.subfeature'
+import TrackingCookie from 'components/externalService/trackingCookie.subfeature'
+import { fireEvent, getJSONCookie, hr$, setJSONCookie, listen } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const DataPolicySettings = function (context) {
+    const { options } = context,
+        { element: rootElement } = context,
+        settingsButtons = hr$('.js-data-policy-settings-button', document),
+        overlay = hr$('.js-data-policy-settings-overlay', rootElement)[0],
+        closeButton = hr$('.js-data-policy-settings-close-button', rootElement)[0],
+        bodyElement = document.getElementsByTagName('html')[0],
+        datapolicyCookie = new DatapolicyCookie(),
+        trackingCookie = new TrackingCookie(),
+        toggleSwitches = hr$('.js-toggleSwitch-checkbox', rootElement),
+        toggleSwitchesExternal = hr$('.js-toggleSwitch-external', rootElement),
+        toggleSwitchesTracking = hr$('.js-toggleSwitch-tracking', rootElement),
+        toggleAllSwitch = hr$('.js-toggleSwitch-checkbox-all', rootElement)[0],
+        providerTitle = hr$('.js-providerTitle', rootElement)[0],
+        trackingCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10
+    let atiSecondLevelId = window.xtn2,
+        isWebview = window.parent.document.documentElement.classList.contains('webview'),
+        //isWebview = window.location.href.match(/(app)(\.[a-zA-Z]*)(\.de)/i), //App URL ...app.hr.de
+        //isWebview = window.location.href.match(/(app)/i), //App URL ...app.hr.de
+        cookie = {}
+
+        console.log("gelaaaadeeeeeeeen")
+    ///////////////////
+    // OVERLAY START //
+    ///////////////////
+    const showSettingsButton = function () {
+        let settingsButton = document.getElementById('globalSettingsButton')
+        if (isWebview) {
+            console.log('Button Anzeige steuern')
+            readAppSettingsButtonCookie()
+            console.log(cookie['hidePrivacySettingsButton'])
+            if (cookie['hidePrivacySettingsButton'] === true) {
+                settingsButton.style.display = 'none'
+            } else {
+                settingsButton.style.display = 'inline-flex'
+            }
+        } else {
+            settingsButton.style.display = 'inline-flex'
+            console.log('Button immer anzeigen, weil nicht App')
+        }
+    }
+    const readAppSettingsButtonCookie = function () {
+        cookie = getJSONCookie('appSettings') || {}
+    }
+    const writeAppSettingsButtonCookie = function () {
+        cookie = 'true'
+        setJSONCookie('hsAppSettingsButton', cookie, trackingCookieLifetime)
+    }
+    const initializeSettingsButtons = function () {
+        for (let i = 0; i < settingsButtons.length; ++i) {
+            if (settingsButtons.length - i == 1) {
+                listen(
+                    'click',
+                    function () {
+                        openDialog('Footer')
+                        atiSecondLevelId = 1
+                    },
+                    settingsButtons[i]
+                )
+            } else {
+                if (!settingsButtons[i].getAttribute('listener')) {
+                    listen(
+                        'click',
+                        function () {
+                            openDialog('DSGVO-Overlay')
+                        },
+                        settingsButtons[i]
+                    )
+                    settingsButtons[i].setAttribute('listener', 'true')
+                }
+            }
+        }
+    }
+    const openDialog = function (settingsButtonLocation) {
+        overlay.classList.add('!flex')
+        bodyElement.classList.add('optionOpen')
+        uxAction('Einstellungsdialog geöffnet - ' + settingsButtonLocation, atiSecondLevelId)
+    }
+    const closeDialogeOnOverlay = function (e) {
+        if (e.target !== this) return
+        closeDialog()
+    }
+    const closeDialog = function () {
+        overlay.classList.remove('!flex')
+        bodyElement.classList.remove('optionOpen')
+    }
+    const shouldDialogBeOpendOnLoad = function () {
+        const urlParam = getUrlVars()['openDialog']
+        if (typeof urlParam !== 'undefined' && urlParam === 'true') {
+            openDialog('Datenschutzerklärung')
+        }
+    }
+    const getUrlVars = function () {
+        let vars = {}
+        const parts = window.location.href.replace(
+            /[?&]+([^=&]+)=([^&]*)/gi,
+            function (m, key, value) {
+                vars[key] = value
+            }
+        )
+        return vars
+    }
+    ///////////////////
+    // OVERLAY END ////
+    ///////////////////
+
+    /////////////////////
+    // TOGGLES START ////
+    /////////////////////
+
+    const initializeToggleStateExternal = function () {
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            initializeEventListenerForService(i)
+
+            setListenerForService(toggleSwitchesExternal[i])
+
+            if (isCookieSetForService(toggleSwitchesExternal[i].id)) {
+                toggleSwitchesExternal[i].checked = true
+            } else if (
+                !isCookieExistForService(toggleSwitchesExternal[i].id) &&
+                toggleSwitchesExternal[i].getAttribute('initial') == 'checked'
+            ) {
+                toggleSwitchesExternal[i].checked = true
+                setCookieForService(toggleSwitchesExternal[i])
+            }
+        }
+
+        toggleAllSwitch.checked = allTogglesChecked()
+        changeProviderTitle()
+    }
+    const initializeToggleStateTracking = function () {
+        for (let i = 0; i < toggleSwitchesTracking.length; ++i) {
+            initializeEventListenerForTracking(i)
+
+            setListenerForTracking(toggleSwitchesTracking[i])
+
+            if (isCookieSetForTracking(toggleSwitchesTracking[i].id)) {
+                toggleSwitchesTracking[i].checked = true
+            }
+
+            if (
+                !isCookieExistForTracking(toggleSwitchesTracking[i].id) &&
+                toggleSwitchesTracking[i].getAttribute('initial') == 'checked'
+            ) {
+                toggleSwitchesTracking[i].checked = true
+                setCookieForTracking(toggleSwitchesTracking[i])
+            }
+        }
+    }
+    const initializeEventListenerForService = function (serviceId) {
+        listen(
+            'hr:externalService-activate-' + toggleSwitchesExternal[serviceId].id,
+            function () {
+                toggleSwitchesExternal[serviceId].checked = true
+            },
+            document
+        )
+    }
+    const initializeEventListenerForTracking = function (serviceId) {
+        listen(
+            'hr:trackingService-activate-' + toggleSwitchesTracking[serviceId].id,
+            function () {
+                toggleSwitchesTracking[serviceId].checked = true
+            },
+            document
+        )
+    }
+    const setListenerForService = function (element) {
+        listen(
+            'change',
+            function () {
+                setCookieForService(element)
+                toggleAllSwitch.checked = allTogglesChecked()
+                changeProviderTitle()
+            },
+            element
+        )
+    }
+    const setListenerForTracking = function (element) {
+        listen(
+            'change',
+            function () {
+                setCookieForTracking(element)
+            },
+            element
+        )
+    }
+    const setCookieForService = function (element) {
+        datapolicyCookie.setCookieForExternalService(element.id, element.checked)
+        if (element.checked) {
+            fireEvent('hr:externalService-activate-' + element.id)
+        } else {
+            console.log('fireEvent: hr:externalService-deactivate-' + element.id)
+            fireEvent('hr:externalService-deactivate-' + element.id)
+        }
+    }
+    const setCookieForTracking = function (element) {
+        trackingCookie.setCookieForTracking(element.id, element.checked)
+        if (element.checked) {
+            fireEvent('hr:trackingService-activate-' + element.id)
+        } else {
+            fireEvent('hr:trackingService-deactivate-' + element.id)
+        }
+    }
+    const toggleAll = function () {
+        console.log('Toggle All' + toggleAllSwitch.checked)
+
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            if (toggleSwitchesExternal[i].checked != toggleAllSwitch.checked) {
+                toggleSwitchesExternal[i].checked = toggleAllSwitch.checked
+                setCookieForService(toggleSwitchesExternal[i])
+            }
+        }
+
+        changeProviderTitle()
+    }
+    const allTogglesChecked = function () {
+        let allChecked
+
+        for (let i = 0; i < toggleSwitchesExternal.length; ++i) {
+            if (toggleSwitchesExternal[i].checked) {
+                allChecked = true
+            } else {
+                allChecked = false
+
+                break
+            }
+        }
+        return allChecked
+    }
+    const changeProviderTitle = function () {
+        if (toggleAllSwitch.checked == true) {
+            providerTitle.textContent = 'Alle Anbieter deaktivieren'
+        } else {
+            providerTitle.textContent = 'Alle Anbieter aktivieren'
+        }
+    }
+    const isCookieSetForService = function (externalService) {
+        return datapolicyCookie.isDatapolicyAccepted(externalService)
+    }
+    const isCookieSetForTracking = function (trackingService) {
+        return trackingCookie.isTrackingAccepted(trackingService)
+    }
+    const isCookieExistForService = function (externalService) {
+        return datapolicyCookie.isDatapolicyExistent(externalService)
+    }
+    const isCookieExistForTracking = function (trackingService) {
+        return trackingCookie.isTrackingCookieExistent(trackingService)
+    }
+    const initializeEventListeners = function () {
+        listen('hr:settingsButtonInsideDataPolicyBoxClicked', function () {
+            openDialog('DSGVO-Overlay')
+        })
+        listen('change', toggleAll, toggleAllSwitch)
+        listen('click', closeDialog, closeButton)
+        listen('click', closeDialogeOnOverlay, overlay)
+    }
+    // steuert die Darstellung des Buttons für die hs-App ///
+    showSettingsButton()
+    //// 1. Alle Settings Buttons initialisieren ////
+    initializeSettingsButtons()
+
+    //// 2. Toggle States aller Switches setzen ////
+    ////    Cookies setzen usw.                 ////
+    initializeToggleStateExternal()
+
+    initializeToggleStateTracking()
+
+    //// 3. Event Listener initialisieren ////
+    initializeEventListeners()
+
+    shouldDialogBeOpendOnLoad()
+
+    //// 4. Funktion extern aufrufbar machen ////
+    return {
+        initializeSettingsButtons: initializeSettingsButtons,
+    }
+}
+
+export default DataPolicySettings

package/src/stories/views/components/dataPolicySettings/data_policy_settings.hbs

@@ -0,0 +1,99 @@
+<div class="flex items-center justify-center mt-4 md:mt-0 md:justify-end js-load" data-hr-data-policy-settings-ds='{}'>
+        {{#> components/button/button _size="md" _id="globalSettingsButton" _css="hover:text-secondary border-footer-text js-data-policy-settings-button" _variant="secondary" _onBackground="true" }}
+            {{> components/button/components/button_icon _icon="settings" _iconmap="icons" _css="w-5 h-5"}}
+            {{> components/button/components/button_label _label=(loca "cookies_setting_button_text")}}
+        {{/components/button/button}}
+    
+        <div class="hidden fixed overflow-scroll w-full h-full top-0 left-0 right-0 bottom-0 z-300 pb-6 bg-black/[0.5] js-data-policy-settings-overlay{{#if _webview}} hidden{{/if}}">
+        <div class="m-auto pt-0 max-w-[480px] bg-white">
+            <div class="flex w-full px-6 bg-primary z-100">
+                <span class="flex justify-start w-full py-4">
+                    <span
+                        class="pr-4 -ml-1 fill-white"> {{> components/base/image/icon _icon="settings" _addClass="h-7 w-7 inline" }}</span>
+                    <span class="w-full text-2xl text-white font-headingSerif">Einstellungen</span>
+                    <button class="text-white bg-transparent fill-current button js-data-policy-settings-close-button">
+                        {{> components/base/image/icon _icon="close" _addClass="h-6 w-6 inline"}}
+                    </button>
+                </span>
+            </div>
+
+            <div class="bg-[#d8e9f6] p-6 {{#if _webview}} hidden{{/if}}">
+                <span class="block text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_description_title"}}</span>
+                <p class="mt-4 text-black">
+                    {{#with this.footerMetadata}}
+                        {{#with this.dataProtectionLink}}
+                            {{loca "cookies_setting_tracking_service_description_text"}}
+                            <a class="block mt-2 text-link hover:underline" target="_blank"
+                               rel="noopener noreferrer" href="{{this.url}}"
+                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            </a>
+                        {{/with}}
+                    {{/with}}
+                </p>
+            </div>
+
+            <div class="bg-[#e3e3e3] py-2.5 px-6{{#if _webview}} hidden{{/if}}">
+                <span class="text-lg text-black font-headingSerif">{{loca "cookies_setting_tracking_service_section_title"}}</span>
+            </div>
+
+            <ul class="{{#if _webview}} hidden{{/if}}">
+                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_1">
+                    <span class="text-base text-black">AGF <a
+                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        href="https://www.agf.de/" title="AGF">(https://www.agf.de/)</a></span>
+                    <div class="flex w-fit toggleSwitch">
+                        {{> components/forms/toggle_button _id="agf" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                    </div>
+                </li>
+                <li class="px-6 py-3 flex justify-between items-center bg-white border-t border-[#e3e3e3] tracking_2">
+                    <span class="text-base text-black">AT Internet <a
+                        class="mt-3 -mb-1 text-link" target="_blank" rel="noopener noreferrer"
+                        href="https://www.atinternet.com/de/"
+                        title="AT Internet">(https://www.atinternet.com/de/)</a></span>
+                    <div class="flex w-fit toggleSwitch">
+                        {{> components/forms/toggle_button _id="ati" _addClass="js-toggleSwitch-checkbox js-toggleSwitch-tracking" _isInitiallyHidden=false }}
+                    </div>
+                </li>
+            </ul>
+
+            <div class="bg-[#d8e9f6] p-6">
+                <span class="block text-lg text-black font-headingSerif ">{{loca "cookies_setting_description_title"}}</span>
+                <p class="mt-4 text-base text-black">
+                    {{#with this.footerMetadata}}
+                        {{#with this.dataProtectionLink}}
+                            {{loca "cookies_setting_description_text"}}
+                            <a class="block mt-2 text-link hover:underline" target="_blank"
+                               rel="noopener noreferrer" href="{{this.url}}"
+                               title="Mehr Informationen zum Thema Datenschutz">Mehr Informationen zum Thema Datenschutz
+                               {{#if this.targetBlank}}{{~> components/base/image/icon _icon="extern" _addClass="icon--primary icon--textRight" _iconmap="icons"~}}{{/if}}
+                            </a>
+                        {{/with}}
+                    {{/with}}
+                </p>
+            </div>
+            <div class="bg-[#e3e3e3] py-2.5 px-6">
+                <span class="block pb-2 text-lg text-black font-headingSerif">{{loca "cookies_setting_section_title"}}</span>
+                <div class="all">
+                    <span class="inline-flex text-base text-black js-providerTitle">x</span>
+                    <div class="flex float-right toggleSwitch">
+                        {{> components/forms/toggle_button _id="all" _addClass="js-toggleSwitch-checkbox-all"}}
+                    </div>
+                </div>
+            </div>
+
+            <ul>
+                {{#with this.serviceList}}
+                    {{#each this}}
+                        <li class="bg-white py-2.5 px-6 border-t border-[#e3e3e3] {{this.key}}">
+                            <span class="inline-flex text-base leading-6 text-black align-text-top">{{this.value}}</span>
+                            <div class="flex float-right toggleSwitch">
+                                {{> components/forms/toggle_button _id=this.key _addClass="js-toggleSwitch-checkbox js-toggleSwitch-external" _isInitiallyHidden=this.isInitiallyHidden }}
+                            </div>
+                        </li>
+                    {{/each}}
+                {{/with}}
+            </ul>
+        </div>
+    </div>
+    </div>

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

@@ -0,0 +1,41 @@
+import { getJSONCookie, setJSONCookie } from 'hrQuery'
+
+const DataPolicyCookie = function () {
+    const datapolicyCookieLifetime = 1000 * 60 * 60 * 24 * 365 * 10 /* 10 years */
+    let cookie = {}
+
+    const setCookieForExternalService = function (externalService, state) {
+        if (state == null) {
+            state = true
+        }
+        console.log('Schreibe Cookie: ' + externalService + ': ' + state)
+        readDatapolicyCookie()
+        cookie[externalService] = state
+        writeCookie()
+    }
+
+    const isDatapolicyAccepted = function (externalService) {
+        readDatapolicyCookie()
+        return cookie[externalService] === true
+    }
+
+    const writeCookie = function () {
+        setJSONCookie('datapolicy', cookie, datapolicyCookieLifetime)
+    }
+
+    const readDatapolicyCookie = function () {
+        cookie = getJSONCookie('datapolicy') || {}
+    }
+
+    const isDatapolicyExistent = function (externalService) {
+        readDatapolicyCookie()
+        return cookie.hasOwnProperty(externalService)
+    }
+    return {
+        setCookieForExternalService: setCookieForExternalService,
+        isDatapolicyAccepted: isDatapolicyAccepted,
+        isDatapolicyExistent: isDatapolicyExistent,
+    }
+}
+
+export default DataPolicyCookie

package/src/stories/views/components/footer/fixtures/footer_hessenschau.json

@@ -1 +1 @@
-{"groups":[{"title":"hessenschau","columnSize":3,"columns":[{"links":[{"hiddenText":"hessenschau","labelText":"Startseite der hessenschau","text":"Start","url":"index.html"},{"text":"Nordhessen","url":"nordhessen/index.html"},{"text":"Osthessen","url":"osthessen/index.html"},{"text":"Mittelhessen","url":"mittelhessen/index.html"},{"text":"Rhein-Main","url":"rheinmain/index.html"},{"text":"Südhessen","url":"suedhessen/index.html"}]},{"links":[{"text":"Politik","url":"politik/index.html"},{"text":"Gesellschaft","url":"gesellschaft/index.html"},{"text":"Wirtschaft","url":"wirtschaft/index.html"},{"text":"Kultur","url":"kultur/index.html"},{"text":"Sport","url":"sport/index.html"},{"text":"Panorama","url":"panorama/index.html"},{"text":"Freizeit","url":"freizeit/index.html"}]},{"links":[{"text":"Video & Podcast","url":"video-podcast/index.html"},{"text":"Wetter","url":"wetter/index.html"},{"text":"Verkehr","url":"verkehr/index.html"},{"text":"TV-Sendung","url":"tv-sendung/index.html"},{"text":"Themen","url":"themen/index.html","paragraphed":true},{"text":"Archiv","url":"archiv/index.html"}]}]},{"title":"Service","columnSize":1,"columns":[{"links":[{"text":"Kontakt","url":"kontakt/index.html"},{"text":"Redaktion","url":"redaktion/das-informationsportal-fuer-hessen,redaktion-info-100.html"},{"text":"Hilfe","url":"hilfe/index.html"},{"text":"hessenschau-App","url":"hr-apps/index.html"},{"text":"Newsletter","url":"newsletter/index.html"},{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","site":"hr","isTargetBlank":true},{"text":"hr-text","url":"https://www.hr-text.hr-fernsehen.de/ttxHtmlGenerator/index.jsp","extern":true,"isTargetBlank":true},{"text":"hr-ticketcenter","url":"https://www.hr-ticketcenter.de/","extern":true,"isTargetBlank":true},{"text":"hr werbung","url":"index.html","site":"hr-werbung","isTargetBlank":true}]}]}],"socialMedia":{"title":"Social Media","columnSize":1,"columns":[{"links":[{"text":"twitter-ds","url":"https://twitter.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Twitter"},{"text":"instagram-ds","url":"https://www.instagram.com/hessenschau/","extern":true,"isTargetBlank":true,"title":"hessenschau Instagram"},{"text":"facebook-ds","url":"https://www.facebook.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Facebook"},{"text":"youtube-ds","url":"https://www.youtube.com/c/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau YouTube"}]},{"links":[{"text":"push-ds","url":"push/index.html","title":"Push-Benachrichtigung in der App"},{"text":"voice-ds","url":"voice/index.html","title":"hessenschau in 100 Sekunden"},{"text":"kontakt-ds","url":"kontakt/index.html","title":"Zum Kontaktformular"},{"text":"rss-ds","url":"rss/index.html","title":"hessenschau.de RSS-Feed"}]}]},"footerMetadata":{"hrDeLink":{"currentTime":{"year":"2023"},"text":"Hessischer Rundfunk","url":"index.html","site":"hr","isTargetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"isTargetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"isTargetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","isTargetBlank":true,"title":"Impressum"}}}
+{"groups":[{"title":"hessenschau","columnSize":3,"columns":[{"links":[{"hiddenText":"hessenschau","labelText":"Startseite der hessenschau","text":"Start","url":"index.html"},{"text":"Nordhessen","url":"nordhessen/index.html"},{"text":"Osthessen","url":"osthessen/index.html"},{"text":"Mittelhessen","url":"mittelhessen/index.html"},{"text":"Rhein-Main","url":"rheinmain/index.html"},{"text":"Südhessen","url":"suedhessen/index.html"}]},{"links":[{"text":"Politik","url":"politik/index.html"},{"text":"Gesellschaft","url":"gesellschaft/index.html"},{"text":"Wirtschaft","url":"wirtschaft/index.html"},{"text":"Kultur","url":"kultur/index.html"},{"text":"Sport","url":"sport/index.html"},{"text":"Panorama","url":"panorama/index.html"},{"text":"Freizeit","url":"freizeit/index.html"}]},{"links":[{"text":"Video & Podcast","url":"video-podcast/index.html"},{"text":"Wetter","url":"wetter/index.html"},{"text":"Verkehr","url":"verkehr/index.html"},{"text":"TV-Sendung","url":"tv-sendung/index.html"},{"text":"Themen","url":"themen/index.html","paragraphed":true},{"text":"Archiv","url":"archiv/index.html"}]}]},{"title":"Service","columnSize":1,"columns":[{"links":[{"text":"Kontakt","url":"kontakt/index.html"},{"text":"Redaktion","url":"redaktion/das-informationsportal-fuer-hessen,redaktion-info-100.html"},{"text":"Hilfe","url":"hilfe/index.html"},{"text":"hessenschau-App","url":"hr-apps/index.html"},{"text":"Newsletter","url":"newsletter/index.html"},{"text":"Korrekturen","url":"unternehmen/korrekturen/index.html","site":"hr","isTargetBlank":true},{"text":"hr-text","url":"https://www.hr-text.hr-fernsehen.de/ttxHtmlGenerator/index.jsp","extern":true,"isTargetBlank":true},{"text":"hr-ticketcenter","url":"https://www.hr-ticketcenter.de/","extern":true,"isTargetBlank":true},{"text":"hr werbung","url":"index.html","site":"hr-werbung","isTargetBlank":true}]}]}],"socialMedia":{"title":"Social Media","columnSize":1,"columns":[{"links":[{"text":"twitter-ds","url":"https://twitter.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Twitter"},{"text":"instagram-ds","url":"https://www.instagram.com/hessenschau/","extern":true,"isTargetBlank":true,"title":"hessenschau Instagram"},{"text":"facebook-ds","url":"https://www.facebook.com/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau Facebook"},{"text":"youtube-ds","url":"https://www.youtube.com/c/hessenschau","extern":true,"isTargetBlank":true,"title":"hessenschau YouTube"}]},{"links":[{"text":"push-ds","url":"push/index.html","title":"Push-Benachrichtigung in der App"},{"text":"voice-ds","url":"voice/index.html","title":"hessenschau in 100 Sekunden"},{"text":"kontakt-ds","url":"kontakt/index.html","title":"Zum Kontaktformular"},{"text":"rss-ds","url":"rss/index.html","title":"hessenschau.de RSS-Feed"}]}]},"footerMetadata":{"hrDeLink":{"currentTime":{"year":"2023"},"text":"Hessischer Rundfunk","url":"index.html","site":"hr","isTargetBlank":true,"title":"Hessischer Rundfunk"},"ardDeLink":{"text":"ARD.de","url":"https://www.ard.de/","extern":true,"isTargetBlank":true,"title":"ard.de"},"dataProtectionLink":{"text":"Datenschutz","url":"https://www.hr.de/datenschutz/index.html","extern":true,"isTargetBlank":true,"title":"Datenschutz"},"imprintLink":{"text":"Impressum","url":"impressum/index.html","site":"hr","isTargetBlank":true,"title":"Impressum"}},"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/footer/page_footer_column.hbs

@@ -11,11 +11,9 @@
 
     <div x-show="!$screen('lg') && !$screen('md') ? dropped : true" x-transition.opacity class="flex flex-col md:flex-row flex-nowrap">
         {{#each _columns}} 
-            <ul class="flex flex-col text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
+            <ul class="flex flex-col text-primary md:text-footer-text md:pt-8 w-full md:w-1/{{../_columnSize}}">
                 {{#each this.links}}
-                    
                         {{> components/footer/page_footer_item  _css="hover:underline" _iconName="extern" }}
-                          
                 {{/each}}
             </ul>
         {{/each}}

package/src/stories/views/components/footer/page_footer_content.hbs

@@ -14,12 +14,7 @@
      
     {{> components/footer/page_footer_social_media _columns=this.socialMedia.columns _title=this.socialMedia.title}}
     
-    <div class="flex items-center justify-center pt-4 md:justify-end">
-        {{#> components/button/button _size="md" _css="text-footer-text border-footer-text " _variant="secondary" _onBackground="true" }}
-            {{> components/button/components/button_icon _icon="settings" _iconmap="icons"}}
-            {{> components/button/components/button_label _label="Einstellungen"}}
-        {{/components/button/button}}
-    </div>
+    {{> components/dataPolicySettings/data_policy_settings }} 
     
 </div>
 

package/src/stories/views/components/footer/page_footer_nav_link.hbs

@@ -6,7 +6,7 @@
         </span>
     {{~/if~}}
     {{~#if  _link-adjust_context.isTargetBlank}}
-        <span class="inline-flex md:mt-0.5 md:ml-1">
+        <span class="inline-flex mt-0.5 ml-1">
             {{> components/base/image/icon _icon=_iconName-adjust_context _iconmap="icons" _addClass="w-4 h-4 fill-current"}}
         </span>
     {{/if~}}

package/src/stories/views/components/footer/page_footer_social_media.hbs

@@ -6,7 +6,7 @@
                 {{#if this.extern}}
                     <li class="pr-2 last:pr-0">
                         {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
-                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current hover:scale-105"}}
                         {{/components/base/link}}
                         {{#*inline "htmlProperties"}}
                             title="{{this.title}}"
@@ -16,7 +16,7 @@
                 {{else}}
                     <li class="pr-2 last:pr-0">
                         {{#> components/base/link _link=this _css="text-footer-text" _isTargetBlank=this.isTargetBlank}}
-                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current"}}
+                            {{> components/base/image/icon _icon=this.text _iconmap="icons" _addClass="w-8 h-8 fill-current hover:scale-105"}}
                         {{/components/base/link}}
                         {{#*inline "htmlProperties"}}
                             title="{{this.title}}"

package/src/stories/views/components/forms/toggle_button.hbs

@@ -0,0 +1,2 @@
+    <input class="h-0 w-0 invisible toggleSwitch-checkbox {{_addClass}}" type="checkbox" id="{{_id}}" {{#unless _isInitiallyHidden}}initial="checked"{{/unless}}/>
+    <label class="bg-toggle-default cursor-pointer w-[50px] h-[25px] block rounded-3xl relative toggleSwitch-label" for="{{_id}}">{{> components/base/image/icon _icon="check" _addClass="fill-white inline absolute h-[19px] w-[19px] left-[4px] top-[3px] toggleSwitch-labelIcon"}}</label>

package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs

@@ -65,15 +65,9 @@
     <button 
         aria-label='{{loca "search_input_aria_submit" }}' 
         type="submit" 
-        class="pl-3 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary lg:bg-white text-primary z-120"
+        class="pl-2 pr-2 border-l cursor-pointer lg:search-border-desktop lg:rounded-r link-focus-inset bg-primary md:bg-white text-primary "
     >
-        <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white" 
-             xmlns="http://www.w3.org/2000/svg" 
-             viewBox="0 0 20 20"
-             aria-hidden="true"
-        >
-            <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
-        </svg>
+        {{> components/base/image/icon _icon="suche-ds" _addClass="w-7 h-7 text-white fill-current bg-primary md:fill-current md:text-secondary md:bg-white"}}
     </button>
 </form>
 

package/tailwind.config.js

@@ -108,7 +108,8 @@ module.exports = {
                 '50': '50',
                 '100': '100',
                 '110': '110',
-                '120': '120'
+                '120': '120',
+                '300': '300'
             },
             spacing: {
                 '9.5': '2.375rem',
@@ -387,7 +388,9 @@ module.exports = {
                 'tickerTeaserlabelByline': 'var(--color-ticker-teaser-label-byline)',
                 'tickerTeaserTimelineScore': 'var(--color-ticker-teaser-timeline-score)',
                 'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)',
-                'tickerTeaserHeadlineUnderline': 'var(--color-ticker-teaser-headline-underline)'
+                'tickerTeaserHeadlineUnderline': 'var(--color-ticker-teaser-headline-underline)',
+                'toggle-confirmation': 'var(--color-toggle-confirmation)',
+                'toggle-default': 'var(--color-toggle-default)'
             },
         },
     },