hr-design-system-handlebars 0.49.12 → 0.49.13

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,15 @@
+# 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/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));
@@ -1281,12 +1294,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 +1315,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 +1355,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 +1375,10 @@ video {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .pt-px {
   padding-top: 1px;
 }
@@ -1477,6 +1490,9 @@ video {
 .font-bold {
   font-weight: 700;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .uppercase {
   text-transform: uppercase;
 }
@@ -1523,6 +1539,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,6 +2479,10 @@ 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));

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,51 @@ const MediaplayerLoader = function (context) {
         rootParent = rootElement.parentNode,
         mediaplayerButton = hr$('.js-mediaplayer__button', rootParent)[0];
     
-    let video = false; 
-
-
-    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)
-    }
+    let avObject = false; 
+    console.log("MediaplayerLoader", options);
 
     const loadLivestream = function () {
         new VideoLivestream(options)
-        removeVideoHover()
+        
         uxAction('mediabuttonclick::' + teaserSize + '::playButtonClick')
     }
-
-    
+  
     const unloadPlayer = function() {
         console.log("video.pause()");
-        video.pause();
+        avObject.pause();
     }
 
     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 +81,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)

package/dist/views/components/teaser/components/teaser_av_consumption.hbs

@@ -1,8 +1,8 @@
 {{#with this.teaserLead.avDocument}}
     {{~#if this.isVideo ~}}
-        {{~> components/video/video_element _isTeaser=true _teaser=../this ~}}
+        {{~> components/video/video_element _isTeaser=true _teaser=../this _aspectRatio=../_aspectRatio ~}}
     {{~/if~}}
     {{~#if this.isAudio ~}}
-        isAudio
+         {{~> components/audio/audio_element _isTeaser=true _teaser=../this  _audioUrl=this.audioUrl _variant=this.imageVariant _noDelay=../_noDelay _aspectRatio=../_aspectRatio _is25Teaser=../_is25Teaser _teaserSize=../_teaserSize~}}             
     {{~/if~}}
 {{/with}}

package/dist/views/components/teaser/components/teaser_lead.hbs

@@ -1,5 +1,5 @@
 {{~#if this.allowAVConsumption ~}}
-    {{> components/teaser/components/teaser_av_consumption }}
+    {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _is25Teaser=_is25Teaser _teaserSize=_teaserSize }}
 {{else}}    
     {{> components/teaser/components/teaser_image }}
 {{/if}}

package/dist/views/components/teaser/teaser_standard.hbs

@@ -1,21 +1,20 @@
 <article class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teaserSize '["25","33","50"]' '["js-is1to1 px-5 md:px-0 md:col-span-3 md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} "
-    x-data="{ videoStart: false }"
+    x-data="{ avStart: false }"
     {{#switch this.teaserSize~}}
-        {{~#case "25"}}  
-        
-            :class="videoStart ? 'flex-col' : 'flex-row'"
+        {{~#case "25"}}      
+            :class="avStart ? 'flex-col' : 'flex-row'"
         {{/case~}}
     {{~/switch~}}   
     >
     <figure class="relative {{inline-switch this.teaserSize '["25"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">    
-        {{> components/teaser/components/teaser_lead }}       
-    </figure>
-    <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
+        {{> components/teaser/components/teaser_lead _is25Teaser=this.is25Teaser _teaserSize=this.teaserSize _aspectRatio=(inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]') }}     
         {{#switch this.teaserSize~}}
             {{~#case "25"}}  
-                <button x-show="videoStart" @click="videoStart = false; $dispatch('player_colosed')" class="md:hidden">Video schließen</button>
+                {{> components/button/button_transparent _showIcon="true" _title="Mediaplayer schließen" _icon="arrow-up" _iconmap="icons"_addIconClass="w-3 h-3 fill-current" _addClass="md:hidden absolute top-full right-0" _x-show="avStart" _alpineClick="avStart = false; $dispatch('player_colosed')"}}
             {{/case~}}
-        {{~/switch~}}   
+        {{~/switch~}}    
+    </figure>
+    <div class="{{inline-switch this.teaserSize '["25"]' '["basis-3/5 md:flex-full"]'}} ">
         <header class="md:px-0 {{inline-switch teaserSize '["25"]' '["","px-5"]'}}">
             {{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }} 
                 {{> components/teaser/components/teaser_heading