hr-design-system-handlebars 0.123.7 → 0.124.1

package/src/stories/views/components/event/calendar/event_calendar_nav.hbs

@@ -0,0 +1,27 @@
+<nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}' data-hr-filterer-ds="{}">
+    <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
+        {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
+    </button>
+    <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
+        <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
+            {{#each this}}
+                <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
+                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
+                    this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
+                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3 ">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <ul class="flex">
+                        {{#each this.days}}
+                            <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
+                                this.isStartOfWeek}} border-l border-event-calendar-secondary{{/if}}">
+                                {{> components/event/calendar/event_calendar_nav_item _contentUrl=../this.contentUrl}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+</nav>

package/src/stories/views/components/event/calendar/event_calendar_nav_item.hbs

@@ -0,0 +1,7 @@
+<a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white -active{{#if this.isFirstAvailable}} -selected js-fr-initial{{/if}}"
+     data-prop-crit='{{this.date.htmlDate}}'
+     data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
+     href="{{_contentUrl}}">
+     <span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
+     <span class="block font-serif text-link font-bold text-labelEventCalendarTitle italic text-2xl px-3 pt-1.6 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
+</a>

package/src/stories/views/components/event/calendar/fixtures/event_calendar_event_teaser.json

@@ -0,0 +1 @@
+{"isDateInstant":false,"startDate":{"htmlDate":"2023-01-09","day":9,"weekdayNameShort":"Mon","monthNameShort":"Jan"},"startTime":{"time":"18:00"},"image":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":true,"asImage":false,"fallback":"images/emmanuel-tjeknavorian-108_v-16to9.jpg","sources":[{"media":"all and (min-width: 1024px)","sizes":"25rem","srcset":"images/emmanuel-tjeknavorian-108_v-16to9__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-16to9__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-16to9__medium__extended.jpg 640w, images/emmanuel-tjeknavorian-108_v-16to9.jpg 960w, images/emmanuel-tjeknavorian-108_v-16to9__retina.jpg 1920w"},{"media":"all and (max-width: 1023px)","sizes":"(min-width: 640px) 25rem, 100vw","srcset":"images/emmanuel-tjeknavorian-108_v-4to3__small.jpg 320w, images/emmanuel-tjeknavorian-108_v-4to3__medium.jpg 480w, images/emmanuel-tjeknavorian-108_v-4to3.jpg 650w, images/emmanuel-tjeknavorian-108_v-4to3__retina.jpg 1300w"}]}},"link":{"url":"/event_100","webviewUrl":"/event_100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Event","readMore":"mehr","readMoreLong":"read More Long"}},"label":{"type":"event","loca":"label_concert","byline":{"bylineSsi":"14.10.22, 20:00 Uhr","bylineText":"BylineText"}},"title":"Finale: Landeswettbewerb Jugend jazzt Hessen für Big Bands","eventtags":{"series":{"title":"Hessen lacht"},"project":{"title":"HR Bigband sucht den Superjazzer"}},"venue":{"addressCity":"Frankfurt","title":"Festhalle"},"isSoldOut":false,"hasStatus":true,"statusDescriptionForLabelShort":"event_status_cancelled","concertInfo":{"artists":{"artistsAndGroups":[{"artist":{"name":"Peter Maffay","groupName":"hr bigband","role":"Sänger"},"artistGroup":"hr bigband"}],"isEmpty":false,"description":"Tolle Künstler"},"compositions":{"isEmpty":false,"description":"Komposition-Description","compositions":[{"composerAndComposition":true,"composer":"Udo Lindenberg","name":"Horizont"}]},"concertInfoHead":{"title":"Das Fest","description":"Ein tolles Festival erwartet Sie","isEmpty":false},"isEmpty":false}}

package/src/stories/views/components/event/calendar/fixtures/event_calendar_footer.json

@@ -0,0 +1 @@
+{"link":{"url":"/monatsuebersicht-100","webviewUrl":"/monatsuebersicht-100#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}}}

package/src/stories/views/components/event/concert_info.hbs

@@ -0,0 +1,66 @@
+{{#with this.concertInfoHead}}
+    {{#unless this.isEmpty}}
+    <div class="text-center">
+        {{#with this.title}}
+            <h3 class="font-bold">{{this}}</h3>
+        {{/with}}
+        {{#with this.description}}
+            <p>{{this}}</p>
+        {{/with}}
+    </div>
+    {{/unless}}
+{{/with}}
+{{#with this.artists}}
+    {{#unless this.isEmpty}}
+    <div class="mt-4">
+            {{#with this.description}}
+            <p class="text-center ">{{this}}</p>
+            {{/with}}
+            <ul>
+                {{#each this.artistsAndGroups}}
+                    <li class="text-center{{#with this.artistGroup}} mb-5{{/with}}">
+                    {{#with this.artist}}
+                        {{> components/event/artist}}
+                    {{/with}}
+                    {{#with this.artistGroup}}
+                        {{#with this.name}}<h3>{{this}}:</h3>{{/with}}
+                                            {{#with this.artists}}
+                    <ul>
+                        {{#each this}}
+                            <li class="text-center">
+                                {{> components/event/artist}}
+                            </li>
+                        {{/each}}
+                    </ul>
+                    {{/with}}
+                    {{/with}}
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    {{/unless}}
+{{/with}}
+{{#with this.compositions}}
+    {{#unless this.isEmpty}}
+        <div class="text-center">
+            {{#with this.description}}<p>{{this}}</p>{{/with}} 
+            <ul>
+            {{#each this.compositions}}
+                <li>
+                    {{#if this.composerAndComposition}}
+                        <span class="text-center font-bold uppercase">{{this.composer}}</span>
+                        {{#with this.name}} | <span class="text-center">{{this}}</span>{{/with}}
+                        {{else}}
+                            {{#if this.composer}}
+                                <span class="text-center">{{this.composer}}</span>
+                            {{/if}}
+                            {{#if this.name}}
+                                <span class="text-center">{{this.name}}</span>
+                            {{/if}}
+                    {{/if}}
+                </li>
+            {{/each}}
+            </ul>
+        </div>
+    {{/unless}}
+{{/with}}

package/src/stories/views/components/event/event_details.hbs

@@ -0,0 +1,20 @@
+<div class="flex flex-wrap content-center w-full h-full px-2 py-1">
+    {{#with this.startTime}}
+    <div class="flex grow shrink-1 basis-6/12 align-top p-2">
+        <div class="min-w-3 min-h-3">
+            {{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
+        </div>
+        <time class='text-base pl-4 font-sans font-bold'>{{loca "date_simple_at" this.time}}</time>
+    </div>
+    {{/with}}
+    {{#with this.venue}}
+    <div class="flex grow flex-shrink-1 basis-6/12 align-top p-2">
+        <div class="min-w-3 min-h-3">
+            {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
+        </div>
+        <div class='flex flex-col text-base pl-4 font-sans font-bold w-full'>{{this.addressCity}}
+            <span class="font-normal">{{this.title}}</span>
+        </div>
+    </div>
+    {{/with}}
+</div>

package/src/stories/views/components/event/event_status.hbs

@@ -0,0 +1 @@
+<span class="font-bold text-event-status uppercase{{#if _css}} {{_css}}{{/if}}">{{_status}}</span>

package/src/stories/views/components/event/event_tag.hbs

@@ -0,0 +1,3 @@
+<span
+    class='block text-subline font-normal font-heading text-base sm:text-xl mt-0.5'
+>{{_title}}</span>

package/src/stories/views/components/event/event_tags.hbs

@@ -0,0 +1,11 @@
+{{#with this}}
+    {{#with this.series}}
+        {{> components/event/event_tag _title=this.title}}
+    {{/with}}
+    {{#with this.project}}
+        {{> components/event/event_tag _title=this.title}}
+    {{/with}}
+    {{#with this.externalProject}}
+        {{> components/event/event_tag _title=this}}
+    {{/with}}
+{{/with}}

package/src/stories/views/components/event/event_ticket_button.hbs

@@ -0,0 +1,30 @@
+<div class="static pl-4 pt-1 pb-3 sm:absolute sm:pl-0 sm:pt-0 sm:pb-0 sm:right-4 sm:bottom-4">
+    {{#> components/button/button_v2 _id=(nextRandom) _type="inverted"}}
+        {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+        {{>components/button/components/button_label _label="Tickets"}}
+    {{/components/button/button_v2}}
+    {{#> components/modal/modal _trigger=(getRandom)}}
+        {{#> components/teaser/components/teaser_headline}}
+            {{> components/teaser/components/teaser_title_test _text=(loca 'ticket_modal_headline') _css="text-2xl"}}
+        {{/components/teaser/components/teaser_headline}}
+        <p class="text-base font-copy mt-2">{{loca "ticket_modal_text"}}</p>
+
+        <div class="flex flex-wrap mt-4">
+            {{> components/button/button_pseudo _linkCss="mr-4 mt-4 ds-button js-modal-close" _buttonText="Zum Ticketshop" _withLink="true"}}
+            <button class="mt-4 ds-button" value="cancel">Abbrechen</button>
+        </div>
+    {{/components/modal/modal}}
+    <noscript>
+        <style>
+            #{{getRandom}} {
+                display:none;
+            }
+        </style>
+        {{#> components/button/components/button_pseudo_link}}
+            {{#> components/button/button_pseudo_v2 _type="inverted"}}
+                {{> components/button/components/button_icon _icon="ticket" _iconmap="icons" _css="mr-2"}}
+                {{>components/button/components/button_label _label="Tickets"}}
+            {{/components/button/button_pseudo_v2}}
+        {{/components/button/components/button_pseudo_link}}
+    </noscript>
+</div>

package/src/stories/views/components/event/filtererDs.feature.js

@@ -0,0 +1,298 @@
+import { pi, uxAction } from 'base/tracking/atiHelper.subfeature'
+import { hr$, isString, listen, reinitializeFeature, simulateClickOn } from 'hrQuery'
+import $ from 'zepto-modules'
+
+require('zepto-modules/callbacks')
+require('zepto-modules/deferred')
+
+const Filterer = (context) => {
+    const { options } = context
+    const { element: rootElement } = context
+    const contentTargetClass = '.js-fr-content'
+    const errorTargetClass = 'js-fr-error-target'
+    const errorClass = 'js-fr-error'
+    const reloadTriggerClass = 'js-fr-reload-trigger'
+    const targetClass = 'js-fr-target'
+    const triggerClass = 'js-fr-trigger'
+    const triggerDomNodes = hr$(`.${triggerClass}`, rootElement)
+    let targetDomNodes = hr$(`.${targetClass}`, rootElement)
+    const errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement)
+    const errorDomNodes = hr$(`.${errorClass}`)
+    const contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
+
+    const init = function () {
+        for (let i = 0; i < triggerDomNodes.length; i++) {
+            triggerDomNodes[i].addEventListener('click', doSetSelectedFilter.bind(this))
+            triggerDomNodes[i].addEventListener('touch', doSetSelectedFilter.bind(this))
+        }
+
+        //die konfigration auf root ebene triggerd das verhalten beim starten
+        if (options && options.crit && options.strat) {
+            //finden des passenden triggers
+            for (i = 0; i < triggerDomNodes.length; i++) {
+                if (
+                    JSON.parse(triggerDomNodes[i].getAttribute('data-prop-filterer')).crit ===
+                    options.crit
+                ) {
+                    doSetSelectedFilter({ currentTarget: triggerDomNodes[i] }, false)
+                    return
+                }
+            }
+        }
+
+        if (
+            !rootElement.classList.contains('-excerpt') &&
+            !!(window.history && window.history.pushState)
+        ) {
+            listen('popstate', handlePopstate, window)
+            //initial state ersetzen so dass es ein rückkehrpunkt gibt
+            const selectedTrigger = hr$('.' + triggerClass + '.-selected', rootElement)
+            history.replaceState(
+                {
+                    sel: triggerClass,
+                    cache: false,
+                    crit:
+                        selectedTrigger.length > 0
+                            ? selectedTrigger[0].getAttribute('data-prop-crit')
+                            : triggerDomNodes[0].getAttribute('data-prop-crit'),
+                },
+                null,
+                window.location.href
+            )
+        }
+    }
+
+    const doSetSelectedFilter = function (e, forceReset) {
+        clearSelected()
+
+        if (!forceReset) {
+            e.currentTarget.classList.add('-selected')
+        }
+
+        //hacky weil e beim start auch kein Event sein kann
+        'preventDefault' in e && e.preventDefault()
+
+        doFilter(e.currentTarget, forceReset, true, true)
+    }
+
+    const clearSelected = function () {
+        let triggerDomNodes = hr$(`.${triggerClass}.-selected`, rootElement)
+
+        triggerDomNodes.forEach(function (triggerDomNode) {
+            triggerDomNode.classList.remove('-selected')
+        })
+    }
+
+    const doFilter = function (currentTarget, forceReset, push, countXTClick) {
+        let data = JSON.parse(currentTarget.getAttribute('data-prop-filterer')),
+            crit = currentTarget.getAttribute('data-prop-crit'),
+            time = new Date().getTime(),
+            reset = forceReset,
+            href = currentTarget.getAttribute('href'),
+            strat,
+            found = false
+
+        console.log('targets-length:' + targetDomNodes.length)
+
+        //falls kein array, string in array umheben
+        if (isString(data.strat)) {
+            strat = []
+            strat.push(data.strat)
+        } else {
+            strat = data.strat
+        }
+
+        for (let i = 0; i < strat.length; i++) {
+            if ('hobid' === strat[i]) {
+                if ($(currentTarget, rootElement).closest('.' + reloadTriggerClass).length > 0) {
+                    loadContent(currentTarget)
+                } else {
+                    stratHideOthersById(targetDomNodes, data.crit, reset)
+                    if (push && !rootElement.classList.contains('-excerpt')) {
+                        history.pushState(
+                            {
+                                sel: '.' + currentTarget + '.-selected',
+                                crit: data.crit,
+                            },
+                            null,
+                            href
+                        )
+                        uxAction('Eventkalender-Monat:: Tag geklickt', 1)
+                    } else {
+                        uxAction('Eventkalender:: Tag geklickt', 1)
+                    }
+                }
+            } else if ('hoswid' === strat[i]) {
+                if ($(currentTarget, rootElement).closest('.' + reloadTriggerClass).length > 0) {
+                    loadContent(currentTarget)
+                } else {
+                    stratHideOthersStartsWithId(targetDomNodes, data.crit, reset)
+                    if (push && !rootElement.classList.contains('-excerpt')) {
+                        history.pushState(
+                            {
+                                sel: '.' + currentTarget + '.-selected',
+                                crit: data.crit,
+                            },
+                            null,
+                            href
+                        )
+                        uxAction('Eventkalender-Monat:: Monat geklickt', 1)
+                    }
+                }
+            } else if ('cs' === strat[i]) {
+                clearSelected()
+            } else if ('initial' === strat[i]) {
+                initial()
+            }
+        }
+
+       /* if (countXTClick) {
+            pi(
+                xtpage +
+                    '&pchap=' +
+                    xt_chap +
+                    '&pid=' +
+                    xt_pageID +
+                    '&pidt=' +
+                    xt_pageDate +
+                    xt_multc
+            )
+        }*/
+
+        removeErrors()
+    }
+    const removeErrors = function () {
+        if (errorTargetDomNodes.length > 0) {
+            errorTargetDomNodes[0].classList.add('hidden')
+        }
+
+        if (errorDomNodes.length > 0) {
+            errorDomNodes[0].classList.add('hidden')
+        }
+    }
+    const loadContent = function (currentTarget) {
+        var url = createInlineUrl(currentTarget),
+            ts = new Date().getTime()
+
+        console.log('load content ' + url)
+
+        $.ajax({
+            type: 'GET',
+            dataType: 'html',
+            url: url,
+            timeout: 90 * 1000,
+            cache: true,
+            beforeSend: function () {
+                console.log('before load')
+                $(contentTargetClass, rootElement).addClass('-isLoading')
+            },
+        })
+            .done(function (data, status, xhr) {
+                var tsDelta = 500 - (new Date().getTime() - ts)
+
+                //mindesten 500ms anzeigen
+                setTimeout(
+                    function () {
+                        console.log('loaded')
+
+                        $(contentTargetClass, rootElement).append(data)
+
+                        targetDomNodes = hr$('.' + targetClass, rootElement)
+                        $(contentTargetClass, rootElement).removeClass('-isLoading')
+                        $(currentTarget, rootElement)
+                            .closest('.' + reloadTriggerClass)
+                            .removeClass(reloadTriggerClass)
+                        doFilter(currentTarget, false, true, false)
+                        reinitializeFeature(contentTargetDomNode)
+                    },
+                    tsDelta < 0 ? 0 : tsDelta
+                )
+            })
+            .fail(function (data, status, xhr) {
+                console.log('load error')
+                $(contentTargetClass, rootElement).addClass('-isLoading')
+            })
+    }
+    const createInlineUrl = function (element) {
+        var href = element.getAttribute('href'),
+            pos = href.indexOf('~') + 1
+
+        return href.substr(0, pos) + 'inline' + href.substr(pos)
+    }
+    const handlePopstate = function (event) {
+        var target
+        //nur handlen wenn es ein state gibt
+        if (event.state.sel) {
+            target = $(
+                '.' + triggerClass + "[data-prop-crit='" + event.state.crit + "']",
+                rootElement
+            )[0]
+            doFilter(target, false, false)
+            clearSelected()
+            target.classList.add('-selected')
+        }
+    }
+    const initial = function () {
+        simulateClickOn(hr$('.js-fr-initial', rootElement)[0])
+    }
+
+    const stratHideOthersById = function (targetDomNodes, crit, reset) {
+        var i = 0,
+            found = false
+
+        if (reset) {
+            for (i = 0; i < targetDomNodes.length; i++) {
+                targetDomNodes[i].classList.remove('hidden')
+            }
+            return
+        }
+
+        for (i = 0; i < targetDomNodes.length; i++) {
+            if (targetDomNodes[i].getAttribute('id') !== crit) {
+                targetDomNodes[i].classList.add('hidden')
+            } else {
+                targetDomNodes[i].classList.remove('hidden')
+
+                found = true
+            }
+        }
+
+        displayErrorTarget()
+
+        return found
+    }
+    const stratHideOthersStartsWithId = function (targetDomNodes, crit, reset) {
+        var i = 0,
+            found = false
+
+        if (reset) {
+            for (i = 0; i < targetDomNodes.length; i++) {
+                targetDomNodes[i].classList.remove('hidden')
+            }
+            return
+        }
+
+        for (i = 0; i < targetDomNodes.length; i++) {
+            if (targetDomNodes[i].getAttribute('id').indexOf(crit) !== 0) {
+                targetDomNodes[i].classList.add('hidden')
+            } else {
+                targetDomNodes[i].classList.remove('hidden')
+
+                found = true
+            }
+        }
+
+        displayErrorTarget()
+
+        return found
+    }
+    const displayErrorTarget = function () {
+        if (targetDomNodes.length >= 1) {
+            if (errorTargetDomNodes.length > 0) {
+                errorTargetDomNodes[0].classList.remove('hidden')
+            }
+        }
+    }
+    init()
+}
+export default Filterer

package/src/stories/views/components/event/nativeScrollDs.feature.js

@@ -0,0 +1,110 @@
+import { clearRequestInterval, hr$, requestInterval } from 'hrQuery'
+import { uxAction } from 'base/tracking/atiHelper.subfeature'
+
+const NativeScroll = function (context) {
+    console.log('loaded feature ...')
+    const { options } = context,
+        { element: rootElement } = context,
+        isTeaser = options.isTeaser
+    let buttons,
+        scrollbar,
+        oneScrollbarItem,
+        hideScrollbar = true,
+        hasNativeSmoothScroll = false,
+        smoothScrollInterval
+    // Detect if the browser already supports native smooth scrolling (e.g., Firefox 36+ and Chrome 49+) and it is enabled:
+    const isNativeSmoothScrollEnabledOn = function () {
+        return 'scroll-behavior' in document.documentElement.style
+    }
+    const doScroll = function (e) {
+        let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
+            direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
+            distance = direction * step
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction", direction)
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 24 ~ doScroll ~ distance", distance)
+
+            console.log('scrollbar ', scrollbar)
+        console.log('scrollbar width ', scrollbar.clientWidth)
+        console.log('oneScrollbarItem ', oneScrollbarItem)
+        console.log('oneScrollbarItem width ', oneScrollbarItem.clientWidth)
+
+        if (direction === 1) {
+            console.log('right clicked')
+            if (isTeaser) uxAction('Eventkalender:: Pfeil rechts geklickt', 1)
+            else uxAction('Eventkalender-Monat:: Pfeil rechts geklickt', 1)
+        } else {
+            console.log('left clicked')
+            if (isTeaser) uxAction('Eventkalender:: Pfeil links geklickt', 1)
+            else uxAction('Eventkalender-Monat:: Pfeil links geklickt', 1)
+        }
+        console.log("🚀 ~ file: nativeScroll.feature.js ~ line 42 ~ doScroll ~ hasNativeSmoothScroll", hasNativeSmoothScroll)
+
+        if (hasNativeSmoothScroll) {
+            scrollbar.scrollLeft += distance
+            console.log("🚀 ~ file: nativeScroll.feature.js ~ line 43 ~ doScroll ~ scrollbar.scrollLeft", scrollbar.scrollLeft)
+        } else {
+            console.log('start smooth scroll')
+            startSmoothScroll(scrollbar.scrollLeft, Date.now(), distance)
+        }
+    }
+    const startSmoothScroll = function (start_pos, start_time, distance) {
+        clearRequestInterval(smoothScrollInterval)
+
+        smoothScrollInterval = requestInterval(function () {
+            loopSmoothScroll(start_pos, start_time, distance)
+        }, 16)
+    }
+    const loopSmoothScroll = function (start_pos, start_time, distance) {
+        let timeLapsed = Date.now() - start_time,
+            duration = 900,
+            percentage = timeLapsed / duration
+
+        percentage = percentage > 1 ? 1 : percentage
+        console.log("🚀 ~ file: nativeScroll.feature.js ~ line 61 ~ loopSmoothScroll ~ percentage", percentage)
+
+        scrollbar.scrollLeft = start_pos + distance * easeInOutCubic(percentage)
+
+        if (percentage === 1) {
+            console.log('stop smooth scroll')
+            clearRequestInterval(smoothScrollInterval)
+        }
+    }
+
+    const easeInOutCubic = function (time) {
+        // 'easeInOutCubic' - acceleration until halfway, then deceleration
+        // time = values from 0 to 1
+        return time < 0.5
+            ? 4 * time * time * time
+            : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
+    }
+
+    if (hr$('.js-ns-scroll.-horizontal', rootElement).length > 0) {
+        scrollbar = hr$('.js-ns-scroll.-horizontal', rootElement)[0]
+        buttons = hr$('.js-ns-button', rootElement)
+        oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
+        hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
+        let initiallySelectedMonth = hr$('.js-ns-month.-selected', rootElement)[0]
+        if (!initiallySelectedMonth) {
+            initiallySelectedMonth = hr$('.js-ns-month.-currentMonth', rootElement)[0]
+        }
+
+        if (initiallySelectedMonth) {
+            scrollbar.scrollLeft = initiallySelectedMonth.offsetLeft
+        }
+
+        if (hideScrollbar) {
+            scrollbar.style.marginBottom = scrollbar.clientHeight - scrollbar.offsetHeight + 'px'
+        }
+
+        for (let i = 0; i < buttons.length; i++) {
+            buttons[i].addEventListener('click', doScroll.bind(this))
+            buttons[i].addEventListener('touch', doScroll.bind(this))
+        }
+    } else {
+        console.log(
+            'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.-horizontal'
+        )
+    }
+}
+
+export default NativeScroll

package/src/stories/views/components/label/label_byline.hbs

@@ -0,0 +1,7 @@
+<span class='ml-2 text-xs font-headingSerif{{#if _css}} {{../_css}}{{/if}}'>
+    {{~#if this.bylineSsi~}}
+        {{{this.bylineSsi}}}
+    {{~else~}}
+        {{this.bylineText}}
+    {{~/if~}}
+</span>

package/src/stories/views/components/label/label_group.hbs

@@ -0,0 +1,3 @@
+<div class="leading-5.5{{#if ../_css}} {{_css}}{{/if}}">
+    {{> @partial-block }}
+</div>

package/src/stories/views/components/label/label_test.hbs

@@ -0,0 +1,11 @@
+<span
+    class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading{{#if _css}} {{_css}}{{/if}} 
+        {{inline-switch
+            _type
+            '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog","podcast","kurzmeldung"]'
+            '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelMedia","bg-labelKurzmeldung"]'
+        }}'
+>
+    {{_text}}
+
+</span>

package/src/stories/views/components/modal/modal.feature.js

@@ -0,0 +1,38 @@
+import { hr$, listen, unlisten } from 'hrQuery'
+
+const Modal = (context) => {
+    const { options } = context,
+        { element: rootElement } = context,
+        modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
+        modalTrigger = hr$(modalTriggerId)[0],
+        modalCloseTriggers = hr$('.js-modal-close', rootElement),
+        modal = hr$('.js-modal', rootElement)[0]
+
+    const configureEventListeners = () => {
+        listen('click', show, modalTrigger)
+
+        modalCloseTriggers.forEach((modalCloseTrigger) => {
+            listen('click', close, modalCloseTrigger)
+        })
+    }
+
+    const show = () => {
+        modal.showModal()
+        listen('click', closeFromOutside, modal)
+    }
+
+    const closeFromOutside = (event) => {
+        if (event.target === modal) {
+            unlisten('click', closeFromOutside, modal)
+            close()
+        }
+    }
+
+    const close = () => {
+        modal.close()
+    }
+
+    configureEventListeners()
+}
+
+export default Modal