hr-design-system-handlebars 1.75.1 → 1.75.3

package/dist/views_static/components/social_sharing/social_sharing_compact.hbs

@@ -1,87 +0,0 @@
-{{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
-        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-        x-id="['dropdown-button']"
-        class="flex self-center justify-end ml-3 grow"
-        x-intersect:leave="$store.sharingIsVisible=false"
-        x-intersect:enter="$store.sharingIsVisible=true"
-    >
-        <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
-            <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
-                <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
-                    :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
-                    class="flex self-center gap-3 bg-white left-5">
-                    <button 
-                        class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
-                        x-show="!$screen('lg')"
-                        x-ref="button"
-                        x-on:click="toggle()"
-                        :aria-expanded="open"
-                        :aria-controls="$id('dropdown-button')"
-                        
-                        {{#with ../this.trackingData}}
-                            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-                        {{/with}}
-                        
-                        >
-                        {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
-                    </button> 
-
-                    <!-- Panel -->
-                    <div 
-                        x-ref="panel" 
-                        x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
-                        x-transition.origin.bottom.right
-                        x-on:click.outside="close($refs.button)"
-                        :id="$id('dropdown-button')"
-                        class="self-center bg-white"
-                        :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
-                    >
-                        <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
-                            {{> components/social_sharing/social_sharing_compact_icons _trackingData=../this.trackingData}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/with}}
-<script>
-    function stickySharingHandler(){
-        return {
-        open: this.$store.sharingIsOpen,
-        sharingIsVisible: true,
-        isDesktop: true,
-        toggle() {
-            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
-            var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-            var isMobile= isMobileApple || isMobileOther;
-            if (navigator.share && isMobile) {
-                navigator.share({
-                    title: document.title,
-                    text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                    url: window.location.href,
-                })
-                .then(() => console.log('Shared successfully'))
-                .catch((error) => console.error('Sharing failed:', error));
-            } else {
-                if (this.open) {
-                    return this.close()
-                }
-                this.$refs.button.focus()
-                this.open = true
-                this.$store.sharingIsOpen = true
-            }
-            
-        },
-        close(focusAfter) {
-            if (! this.open) return
-            this.open = false
-            this.$store.sharingIsOpen = false
-            focusAfter && focusAfter.focus()
-        }
-    }
-    }
-</script>

package/src/stories/views/components/social_sharing/social_sharing_compact.hbs

@@ -1,87 +0,0 @@
-{{~#with this.socialSharing ~}}
-    <div x-data="stickySharingHandler"
-        x-on:keydown.escape.prevent.stop="close($refs.button)"
-        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
-        x-id="['dropdown-button']"
-        class="flex self-center justify-end ml-3 grow"
-        x-intersect:leave="$store.sharingIsVisible=false"
-        x-intersect:enter="$store.sharingIsVisible=true"
-    >
-        <div :class="{ 'grid grid-page z-110 fixed bottom-feature-box-height left-0 w-full': $store.sharingIsVisible == false}">
-            <div :class="{ 'flex justify-start col-full sm:col-main relative': $store.sharingIsVisible == false }">
-                <div :style="($store.footerIsVisible && !$screen('lg')) && {bottom:$store.sharingBottomPos.current}" 
-                    :class="{ 'bottom-[19px] flex-col absolute mt-3 rounded-md': $store.sharingIsVisible == false && $store.footerIsVisible == false,
-                                'flex-col absolute mt-3' : !$screen('lg') && $store.footerIsVisible == true && window.innerHeight > document.querySelector('#content').offsetHeight + document.querySelector('.sb-main-navigation').offsetHeight + (window.innerHeight - document.querySelector('footer').offsetTop) - document.querySelector('footer').offsetHeight}"
-                    class="flex self-center gap-3 bg-white left-5">
-                    <button 
-                        class="{{#with ../this.trackingData}}js-load {{/with}}order-2 p-2 text-white border border-button bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
-                        x-show="!$screen('lg')"
-                        x-ref="button"
-                        x-on:click="toggle()"
-                        :aria-expanded="open"
-                        :aria-controls="$id('dropdown-button')"
-                        
-                        {{#with ../this.trackingData}}
-                            data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::sharingmenuopened"}]}'
-                        {{/with}}
-                        
-                        >
-                        {{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
-                    </button> 
-
-                    <!-- Panel -->
-                    <div 
-                        x-ref="panel" 
-                        x-show="open || $screen('lg') && $store.sharingIsOpen == true || $screen('lg') && $store.sharingIsVisible == true"
-                        x-transition.origin.bottom.right
-                        x-on:click.outside="close($refs.button)"
-                        :id="$id('dropdown-button')"
-                        class="self-center bg-white"
-                        :class="$store.sharingIsVisible == true ? 'h-8 absolute right-[68px] md:relative md:right-0 md:h-auto' : 'relative right-0 md:h-auto lg:hidden '"
-                    >
-                        <ul class="flex gap-3"  :class="{ 'flex-col': $store.sharingIsVisible == false }">
-                            {{> components/social_sharing/social_sharing_compact_icons _trackingData=../this.trackingData}}
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{{/with}}
-<script>
-    function stickySharingHandler(){
-        return {
-        open: this.$store.sharingIsOpen,
-        sharingIsVisible: true,
-        isDesktop: true,
-        toggle() {
-            var isMobileApple = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)/i);
-            var isMobileOther= navigator.userAgent.match(/(Android)|(webOS)|(Blackberry)|(Windows Phone)/i);
-            var isMobile= isMobileApple || isMobileOther;
-            if (navigator.share && isMobile) {
-                navigator.share({
-                    title: document.title,
-                    text: 'Schau mal was ich auf hessenschau.de gefunden habe!',
-                    url: window.location.href,
-                })
-                .then(() => console.log('Shared successfully'))
-                .catch((error) => console.error('Sharing failed:', error));
-            } else {
-                if (this.open) {
-                    return this.close()
-                }
-                this.$refs.button.focus()
-                this.open = true
-                this.$store.sharingIsOpen = true
-            }
-            
-        },
-        close(focusAfter) {
-            if (! this.open) return
-            this.open = false
-            this.$store.sharingIsOpen = false
-            focusAfter && focusAfter.focus()
-        }
-    }
-    }
-</script>

package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js

@@ -1,18 +0,0 @@
-import story_template from './social_sharing_compact.hbs'
-import socialSharing from '../page/story/fixtures/story.json'
-
-console.log(socialSharing)
-const Template = ({ ...args }) => {
-    return story_template({ ...args })
-}
-
-export default {
-    title: 'Komponenten/Social Sharing',
-} 
-
-export const Default = {
-    render: Template.bind({}),
-    name: 'Social Sharing Kompakt',
-    args: socialSharing
-    
-}