hr-design-system-handlebars 0.49.12 → 0.49.15

package/.storybook/preview.js

@@ -33,10 +33,73 @@ if (process.env.NODE_ENV !== 'production') {
     console.log('Looks like we are in development mode!')
 }
 
+const customViewports = {
+    hrMin: {
+        name: 'hr: Min - 320px',
+        styles: {
+          width: '320px',
+          height: '600px',
+        },
+    },
+    hrXs: {
+        name: 'hr: XS - 360px',
+        styles: {
+            width: '360px',
+            height: '600px',
+        },
+    },
+    hrSmSmaller: {
+        name: 'hr: SM - 639px',
+        styles: {
+            width: '639px',
+            height: '800px',
+        },
+    },
+    hrSm: {
+        name: 'hr: SM - 640px',
+        styles: {
+            width: '640px',
+            height: '800px',
+        },
+    },
+    hrMdSmaller: {
+        name: 'hr: MD - 767px',
+        styles: {
+            width: '767px',
+            height: '1000px',
+        },
+    },
+    hrMd: {
+        name: 'hr: MD - 768px',
+        styles: {
+            width: '768px',
+            height: '1000px',
+        },
+    },
+    hrLgSmaller: {
+        name: 'hr: LG - 1023px',
+        styles: {
+            width: '1023px',
+            height: '1000px',
+        },
+    },
+    hrLg: {
+        name: 'hr: LG - 1024px',
+        styles: {
+            width: '1024px',
+            height: '1000px',
+        },
+    },
+  };
+
 export const parameters = {
     //layout: 'fullscreen',
     viewport: {
-        viewports: INITIAL_VIEWPORTS,
+        viewports: {
+            ...customViewports,
+            ...INITIAL_VIEWPORTS,
+           
+         },
     },
     backgrounds: {
         default: 'white',

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v0.49.15 (Wed Jul 13 2022)
+
+#### 🐛 Bug Fix
+
+- add js-functionality to tabbox [#272](https://github.com/mumprod/hr-design-system-handlebars/pull/272) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v0.49.14 (Tue Jul 12 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1683 [#271](https://github.com/mumprod/hr-design-system-handlebars/pull/271) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.49.13 (Tue Jul 12 2022)
+
+#### 🐛 Bug Fix
+
+- Dpe 1576 [#267](https://github.com/mumprod/hr-design-system-handlebars/pull/267) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.49.12 (Tue Jul 12 2022)
 
 #### 🐛 Bug Fix

package/build/helpers/configProperty.js

@@ -0,0 +1,3 @@
+module.exports = function () {    
+    return "test"
+}

package/dist/assets/index.css

@@ -596,6 +596,12 @@ video {
 .relative {
   position: relative;
 }
+.bottom-0 {
+  bottom: 0px;
+}
+.right-0 {
+  right: 0px;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -608,11 +614,8 @@ video {
 .left-0 {
   left: 0px;
 }
-.bottom-0 {
-  bottom: 0px;
-}
-.right-0 {
-  right: 0px;
+.top-full {
+  top: 100%;
 }
 .top-10 {
   top: 2.5rem;
@@ -664,6 +667,10 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .mx-4 {
   margin-left: 1rem;
   margin-right: 1rem;
@@ -676,10 +683,6 @@ video {
   margin-left: 2rem;
   margin-right: 2rem;
 }
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
 .mx-px {
   margin-left: 1px;
   margin-right: 1px;
@@ -788,6 +791,12 @@ video {
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
+.h-6 {
+  height: 1.5rem;
+}
+.h-12 {
+  height: 3rem;
+}
 .h-full {
   height: 100%;
 }
@@ -812,15 +821,12 @@ video {
 .h-5 {
   height: 1.25rem;
 }
-.h-6 {
-  height: 1.5rem;
+.h-3 {
+  height: 0.75rem;
 }
 .h-3\.5 {
   height: 0.875rem;
 }
-.h-3 {
-  height: 0.75rem;
-}
 .h-auto {
   height: auto;
 }
@@ -842,15 +848,18 @@ video {
 .w-16 {
   width: 4rem;
 }
-.w-10 {
-  width: 2.5rem;
-}
 .w-6 {
   width: 1.5rem;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-full {
   width: 100%;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-screen {
   width: 100vw;
 }
@@ -860,15 +869,12 @@ video {
 .w-40 {
   width: 10rem;
 }
-.w-12 {
-  width: 3rem;
+.w-3 {
+  width: 0.75rem;
 }
 .w-3\.5 {
   width: 0.875rem;
 }
-.w-3 {
-  width: 0.75rem;
-}
 .w-max {
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -1097,12 +1103,12 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1177,10 +1183,17 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(187, 247, 208, var(--tw-bg-opacity));
 }
+.bg-blue-jellyBean {
+  --tw-bg-opacity: 1;
+  background-color: rgba(39, 107, 158, var(--tw-bg-opacity));
+}
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
@@ -1260,6 +1273,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
 }
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
+}
 .bg-gradient-to-r {
   background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
@@ -1281,12 +1298,12 @@ video {
 .to-purple-100 {
   --tw-gradient-to: #f3e8ff;
 }
-.fill-current {
-  fill: currentColor;
-}
 .fill-white {
   fill: #ffffff;
 }
+.fill-current {
+  fill: currentColor;
+}
 .p-10 {
   padding: 2.5rem;
 }
@@ -1302,13 +1319,21 @@ video {
 .p-2 {
   padding: 0.5rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+.py-3\.5 {
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
 }
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.px-3\.5 {
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+}
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 .py-6 {
   padding-top: 1.5rem;
@@ -1334,25 +1359,13 @@ video {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
-.py-3\.5 {
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
-}
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-3\.5 {
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-}
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .py-1\.5 {
   padding-top: 0.375rem;
@@ -1366,6 +1379,10 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .pt-px {
   padding-top: 1px;
 }
@@ -1477,6 +1494,9 @@ video {
 .font-bold {
   font-weight: 700;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .uppercase {
   text-transform: uppercase;
 }
@@ -1523,6 +1543,10 @@ video {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgba(29, 78, 216, var(--tw-text-opacity));
+}
 .text-grey-scorpion {
   --tw-text-opacity: 1;
   color: rgba(96, 96, 96, var(--tw-text-opacity));
@@ -2459,10 +2483,18 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
 }
+.hover\:bg-slate-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
+}
 .hover\:bg-blue-congress:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
+.hover\:bg-red-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
+}
 .hover\:text-toplineColor:hover {
   color: #006dc1;
   color: var(--color-topline);

package/dist/views/components/audio/audioElementDs.subfeature.js

@@ -113,6 +113,15 @@ const AudioElement = function (options, rootElement) {
     }
 
     listen('hr:global:stopOtherAVs', shouldIStopPlaying)
+
+    return {
+        play: function() {
+            audio.play()
+        },
+        pause: function() {
+            audio.pause()
+        }
+    }
 }
 
 export default AudioElement

package/dist/views/components/audio/audio_element.hbs

@@ -0,0 +1,72 @@
+<div class="c-audioElement">
+    <div id="{{nextRandom}}" class="{{~#with _addClass }} {{this}}{{/with}} js-load" 
+        data-new-hr-mediaplayer-loader-ds='{
+            "type": "audio", 
+            "position": "{{if _isTeaser 'teaser' 'page'}}",
+            "teaserSize" : "{{if _teaserSize _teaserSize '00' }}",
+            "playbackUnsupported":"{{loca "audio_unsupported"}}",
+            "playbackError":"{{loca "audio_playback_error"}}",
+            "playbackFileNotFound":"{{loca "audio_fileNotFound"}}",
+            "mediaMetadata":{{this.mediaMetadata}} {{#if _isTeaser}},
+            "autoplay":"true"{{/if}} }'
+        >
+        {{!-- geotag --}}
+        {{#unless _hideGeotag}}
+            {{~#with _geotag}}
+                <span class="js-geotag c-teaser__geotag" aria-hidden="true">{{this.[0].title~}}</span>
+            {{/with~}}
+        {{/unless}}
+        <div 
+            {{~#if _is25Teaser}} 
+                class="relative"  
+                :class="avStart ? 'ar-16-9' : '{{_aspectRatio}}'"
+            {{else}}
+                class="relative {{_aspectRatio}}"   
+            {{~/if~}}      
+        >
+            {{~#if _isTeaser~}}
+            <div 
+                {{~#if _is25Teaser}}
+                    x-show="!avStart"
+                {{~/if~}}
+                >               
+                {{#with _teaser}}
+                    {{~#if _isCopyText~}}
+                        {{> components/base/image/responsive_image this.teaserImage _type=(if this.teasertype this.teasertype 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="ar__content" _addClass=_addClass _noDelay=../_noDelay}}
+                    {{else}}
+                        {{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
+                                    _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
+                                    _clickLabelPrefix2="mediaLink" }}
+                            {{> components/base/image/responsive_image this.teaserImage _type=(if this.teasertype this.teasertype 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext')  _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _addClass=_addClass _noDelay=../../_noDelay}}
+                        {{/components/base/link}} 
+                    {{~/if~}}
+                {{~/with~}}
+                {{> components/button/button_round _isButton="true" _addClass="absolute bottom-0 right-0 my-4 mx-4 js-mediaplayer__button" _showIcon=true _icon="play" _addIconClass="w-6 h-6 inline" _label="Audio" _srOnly="true" _alpineClick="avStart = !avStart" _x-show="!avStart"}}
+            </div>
+            {{else}}
+                {{> components/base/image/responsive_image this.teaseritem _type=_type _variant=_variant _addClass=_addClass _addClassImg="ar__content" _noDelay=_noDelay }}
+            {{~/if~}}
+
+
+            {{~#if _is25Teaser~}}
+                <div x-show="avStart" class="flex items-center justify-center ar-16-9 bg-blue-jellyBean">
+                    {{> components/base/image/icon _icon="audio" _iconmap="icons" _addClass="w-12 h-12 fill-white " }}
+                </div>
+            {{~/if~}}
+
+            {{~#with _audioUrl ~}}
+                <audio x-show="avStart" class="absolute bottom-0 w-full{{~#with _addClassAudio }} {{this}}{{/with}}"
+                    controls="controls" preload="none" controlsList="nodownload" oncontextmenu="return false;">
+                    <source src="{{this}}" type='audio/mpeg'>
+                </audio>
+                {{~#if ../this.isPodcast~}}
+                    <a href="{{../this.podcastDownloadUrl}}" class="downloadLink button-invert js-load"{{#with
+                            ../this.trackingData}}
+                    data-new-hr-click-tracking='{"settings": [{"type": "download", "clickLabel": "{{this.pageName}}", "secondLevelId": "{{this.secondLevelId}}"}, {"type": "uxAction", "clickLabel": "medienDownload::podcast::{{_type}}", "secondLevelId": "{{this.secondLevelId}}" }]}'{{/with}}>
+                        {{> components/base/image/icon _icon='download-button' _addClass="icon--media"}}
+                    </a>
+                {{~/if~}}
+            {{~/with~}}
+        </div>
+    </div>
+</div>

package/dist/views/components/button/button.hbs

@@ -2,14 +2,17 @@
     {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
     {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
     {{~#if _name}} name="{{_name}}"{{/if}} 
-    class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded {{_addClass}}{{#if _webview}} -webview{{/if}}"
-    {{~#if _value}} value="{{_value}}"{{/if}}
+    {{~#if _title}} title="{{_title}}"{{/if}} 
+    class="{{_addClass}}{{#if _addClass2}} {{_addClass2}}{{/if}}{{#if _webview}} -webview{{/if}}" 
+    {{~#if _value}} value="{{_value}}"{{/if}} 
+    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}} 
+    {{~#if _x-show}} x-show="{{_x-show}}"{{/if}} 
 >
     {{~#if _showIcon~}}
         {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}
     {{/if~}}
     {{~#if _label~}}
-        <span class="button__text">
+        <span {{#if _srOnly}}class="sr-only"{{/if}}>
             {{~_label~}}
         </span>
     {{/if~}}

package/dist/views/components/button/button_round.hbs

@@ -1,19 +1,18 @@
-<button 
-    {{~#if _aria}} aria-label="{{_aria}}"{{/if}} 
-    {{~#if _isButton}} type="button"{{else}} type="submit"{{/if~}} 
-    {{~#if _name}} name="{{_name}}"{{/if}} 
-    class="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 {{_addClass}}{{#if _webview}} -webview{{/if}}"
-    {{~#if _value}} value="{{_value}}"{{/if}}
-    {{~#if _alpineClick}} @click="{{_alpineClick}}"{{/if}}
-
-
->
-    {{~#if _showIcon~}}
-        {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addIconClass _webview=_webview}}
-    {{/if~}}
-    {{~#if _label~}}
-        <span class="sr-only">
-            {{~_label~}}
-        </span>
-    {{/if~}}
-</button>
+{{> components/button/button 
+    _aria=_aria
+    _isButton=_isButton
+    _title=_title
+    _name=_name
+    _label=_label
+    _value=_value
+    _showIcon="true"
+    _icon=_icon
+    _iconmap=_iconmap
+    _addIconClass=_addIconClass
+    _addClass="bg-blue-500 hover:bg-blue-700 text-white rounded-full border-4 border-white p-1 "
+    _addClass2=_addClass
+    _webview=_webview
+    _x-show=_x-show
+    _alpineClick=_alpineClick
+    _srOnly=_srOnly
+}}

package/dist/views/components/button/button_transparent.hbs

@@ -0,0 +1,17 @@
+{{> components/button/button 
+    _aria=_aria
+    _isButton=_isButton
+    _title=_title
+    _name=_name
+    _label=_label
+    _value=_value
+    _showIcon="true"
+    _icon=_icon
+    _iconmap=_iconmap
+    _addIconClass=_addIconClass
+    _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5"
+    _addClass2=_addClass
+    _webview=_webview
+    _x-show=_x-show
+    _alpineClick=_alpineClick
+}}

package/dist/views/components/mediaplayer/mediaplayerLoaderDs.feature.js

@@ -6,8 +6,7 @@ import VideoLivestream from 'components/video/livestream/videoLivestreamDs.subfe
 
 const MediaplayerLoader = function (context) {
     'use strict'
-    
- 
+
     const { options } = context,
         { element: rootElement } = context,
         type = options.type,
@@ -19,60 +18,58 @@ const MediaplayerLoader = function (context) {
         rootParent = rootElement.parentNode,
         mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0];
     
-    let video = false; 
-
+    let avObject = false; 
+    console.log("MediaplayerLoader", options);
 
-    const removeVideoHover = function () {
-        rootElement.parentNode.parentNode.classList.remove('-imageHover')
-        rootElement.parentNode.parentNode.parentNode.classList.remove('-imageHover')
-    }
-
-    const removeAudioHover = function () {
-        audioContent.classList.remove('hide')
-        audioContent.parentNode.parentNode.parentNode.parentNode.classList.remove('-imageHover')
-        audioContent.parentNode.parentNode.parentNode.classList.remove('-imageHover')
-        mediaplayerButton.parentNode.removeChild(mediaplayerButton)
+    const unloadPlayer = function() {
+        console.log("video.pause()");
+        avObject.pause();
     }
 
     const loadLivestream = function () {
-        new VideoLivestream(options)
-        removeVideoHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
-    }
-
-    
-    const unloadPlayer = function() {
-        console.log("video.pause()");
-        video.pause();
+        if(!avObject){
+            console.log("load Livestream");
+            avObject = new VideoLivestream(options)            
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer) 
+        } else {
+            console.log("video.play()");
+            listenOnce('player_colosed', unloadPlayer) 
+            avObject.play();
+        }
     }
 
     const loadOnDemand = function () {    
-        if(!video){
-            console.log("loadOnDemand");
-            video = new VideoOnDemandPlayer(options)
-            removeVideoHover()
+        if(!avObject){
+            console.log("load OnDemand");
+            avObject = new VideoOnDemandPlayer(options)
             uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
             listenOnce('player_colosed', unloadPlayer)  
         } else {
             console.log("video.play()");
             listenOnce('player_colosed', unloadPlayer) 
-            video.play();
+            avObject.play();
         }
     }
 
     const loadAudio = function () {
-        new AudioElement(options, rootElement)
-        removeAudioHover()
-        uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+        if(!avObject){
+            console.log("load Audio");
+            avObject = new AudioElement(options, rootElement)        
+            uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
+            listenOnce('player_colosed', unloadPlayer) 
+        } else {
+            console.log("Audio.play()");
+            listenOnce('player_colosed', unloadPlayer) 
+            avObject.play();
+        }
     }
 
-
-   
     switch (type) {
         case 'live':
             console.log('live');
             if (position === 'teaser') {
-                listenOnce('click', loadLivestream, mediaplayerButton)
+                listen('click', loadLivestream, mediaplayerButton)
             } else {
                 loadLivestream()
             }
@@ -91,7 +88,7 @@ const MediaplayerLoader = function (context) {
         case 'audio':
             console.log('audio');
             if (position === 'teaser') {
-                listenOnce('click', loadAudio, mediaplayerButton)
+                listen('click', loadAudio, mediaplayerButton)
             } else {
                 audioContent.classList.remove('hide')
                 new AudioElement(options, rootElement)