hr-design-system-handlebars 1.42.4 → 1.43.1

package/src/stories/views/components/podcast/components/podcast_playlist_shorttext.hbs

@@ -2,7 +2,7 @@
 {{#unless _isSinglePage}}
     {{#unless this.hideShortText}}
     {{~#with this.shorttext}}
-        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy dark:text-podcast-text-dark">
         <span class="c-teaser__shorttext"> {{this}} </span>
         </div>
     {{/with~}}

package/src/stories/views/components/podcast/podcast_player.hbs

@@ -1,14 +1,14 @@
-<div class="flex col-span-12 p-5">   
-  <div class="flex flex-col grow">
-  {{!-- First Row --}}
-    <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
-      <div class="flex flex-col grow">  
-        <div class="flex max-h-6">
-          {{!-- Label / Airdate --}}
-          {{#with label}} 
-            <div class="">
+<div class="flex col-span-12 {{#unless _isArticlePlayer}} p-5 {{/unless}} {{#if _isArticlePlayer}} bg-highlight-1 {{/if}}">
+    <div class="flex flex-col grow">
+        {{!-- First Row --}}
+        <div class="flex flex-row {{#if ../_ordered}} pl-8 {{/if}} ">
+            <div class="flex flex-col grow">
+                <div class="flex max-h-6">
+                    {{!-- Label / Airdate --}}
+                    {{#with label}}
+                        <div class="">
               <span class='sb-label mr-2 rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading bg-labelMedia'>
-                {{ loca this.loca }}
+                  {{ loca this.loca }}
               </span>
             </div> 
           {{/with}}
@@ -19,56 +19,56 @@
                 <time class="flex grow pt-1.5" datetime="{{this.htmlDateTime}}">{{this.date}}</time>
               {{/with}}
 
-              {{!-- Download --}}
-              {{> components/podcast/components/podcast_downloadbutton 
-                _addClass=""
-                _iconClass="h-6 w-6 text-podcast-text fill-current"
-                _url=this.podcastDownloadUrl }}
+                        {{!-- Download --}}
+                        {{> components/podcast/components/podcast_downloadbutton
+                                _addClass=""
+                                _iconClass="h-6 w-6 text-podcast-text fill-current"
+                                _url=this.podcastDownloadUrl }}
 
-            </div>
-        </div>
+                    </div>
+                </div>
 
-        {{!-- Überschrift: --}}
-        <div class="flex pb-5 pr-2 md:pr-5">          
-          {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}  
-        </div>
+                {{!-- Überschrift: --}}
+                <div class="flex pb-5 pr-2 md:pr-5">
+                    {{> components/podcast/components/podcast_title _title=this.title _teaserSize=this.realTeaserSize _addClass="" }}
+                </div>
+
+            </div>
 
-      </div>
+            {{!-- Podcast Image      --}}
+            <div class="flex flex-col ">
+                <div class="w-22 {{#if _isArticlePlayer }} md:w-32 lg:w-42 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}} {{/if}}">
+                    {{> components/base/image/responsive_image this.teaseritem
+                            _type="podcastEpisodePlayer"
+                            _variant="default"
+                            _addClass="overflow-hidden"
+                            _noDelay=this.dontLazyload
+                            _addClassImg="w-full block"
+                    }}
+                </div>
+            </div>
 
-      {{!-- Podcast Image      --}}
-      <div class="flex flex-col ">
-        <div class="w-22 {{inline-switch this.realTeaserSize '["100","50"]' '["md:w-32 lg:w-42","md:w-22 lg:w-32", ""]'}}">
-          {{> components/base/image/responsive_image this.teaseritem 
-            _type="podcastEpisodePlayer"
-            _variant="default"
-            _addClass="overflow-hidden"
-            _noDelay=this.dontLazyload 
-            _addClassImg="w-full block"
-          }}
         </div>
-      </div>
 
-    </div>
+        {{!-- Player UI --}}
+        <div class="flex {{#if _isArticlePlayer }} lg:pr-48 lg:-mt-14 {{else}} {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}} {{/if}}"
+             x-data="podcastPlayer()"
+             x-init="listenToGlobalStop()"
+             ax-load
+             x-ignore>
+            {{> components/podcast/components/podcast_player_ui
+                    _isPlaylistPlayer=false
+                    _podcastDuration=duration
+                    _id=(nextRandom)
+                    _first=true
+            }}
+        </div>
 
-    {{!-- Player UI --}}
-    <div class="flex {{inline-switch this.realTeaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14"," "]'}}" 
-      x-data="podcastPlayer()"
-      x-init="listenToGlobalStop()"
-      ax-load
-      x-ignore>
-      {{> components/podcast/components/podcast_player_ui 
-        _isPlaylistPlayer=false
-        _podcastDuration=duration
-        _id=(nextRandom) 
-        _first=true
-      }}    
-    </div>    
-  
-    {{!-- Abo-Dropdown    --}}
-    <div class="flex flex-row pt-5">
-      {{#with this.podcastChannel}}       
-        {{> components/podcast/components/podcast_subscribe_button}}
-      {{/with}}
+        {{!-- Abo-Dropdown    --}}
+        <div class="flex flex-row pt-5">
+            {{#with this.podcastChannel}}
+                {{> components/podcast/components/podcast_subscribe_button}}
+            {{/with}}
 
       {{#with this.podcastChannel}}    
         {{!-- Sendungs-Link --}}

package/src/stories/views/components/socialmedia/socialmedia.hbs

@@ -1,11 +1,11 @@
-<div class="w-full flex px-3 first:border-t last:pb-6 border-[#797979] -socialsharing">
-    <div class="flex flex-wrap justify-start p-0 m-0 -mx-3">
-        <span class="inline-flex text-2xl font-heading">{{loca "share_headline" }}</span><!--
-        -->
-        <ul class="flex flex-wrap w-full px-5 lg:px-0 -socialsharing">
+<div class="w-full flex first:border-t last:border-b py-6 border-dotted border-[#797979] -socialsharing">
+    <div class="flex flex-wrap">
+        <span class="inline-flex text-xl font-headingSerif">{{loca "share_headline" }}</span>
+
+        <ul class="flex flex-wrap w-full pt-2 gap-x-2 gap-y-2 -socialsharing">
             {{~#with this.twitterLink ~}}
-                <li class="inline-flex pl-10 mr-6 lg:ml-0">
-                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                <li>
+                    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
                        href="{{this}}"
                        target="_blank"
                        rel="noopener noreferrer"
@@ -19,8 +19,8 @@
                 </li>
             {{~/with~}}
             {{~#with this.facebookLink ~}}
-                <li class="inline-flex pl-10 mr-6 lg:ml-0">
-                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                <li>
+                    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
                        href="{{this}}"
                        target="_blank"
                        rel="noopener noreferrer"
@@ -29,13 +29,13 @@
                        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
                         {{/with}}
                     >
-                        {{~> components/base/image/icon _addClass="icon--facebook" _icon="facebook-ds" _iconmap="icons" ~}}
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#3b5999]" _icon="facebook" _iconmap="icons" ~}}
                     </a>
                 </li>
             {{~/with~}}
             {{~#with this.whatsappLink ~}}
-                <li class="inline-flex pl-10 mr-6 lg:ml-0 list__item--whatsapp">
-                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                <li>
+                    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
                        href="{{this}}"
                        target="_blank"
                        rel="noopener noreferrer"
@@ -44,33 +44,33 @@
                        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
                         {{/with}}
                     >
-                        {{~> components/base/image/icon _addClass="icon--whatsapp" _icon="whatsapp-ds" _iconmap="icons" ~}}
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#4dc247]" _icon="whatsapp" _iconmap="icons" ~}}
                     </a>
                 </li>
             {{~/with~}}
             {{~#with this.mailtoLink ~}}
-                <li class="inline-flex pl-10 mr-6 lg:ml-0">
-                    <a class="link--shareIcon touchArea{{#with ../../this.content.trackingData}} js-load{{/with}}"
+                <li>
+                    <a class="{{#with ../../this.content.trackingData}} js-load{{/with}}"
                        href="{{this}}"
                        title="{{loca "share_mail_linktitle" }}"
                         {{#with ../../this.content.trackingData}}
                        data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
                         {{/with}}
                     >
-                        {{~> components/base/image/icon _addClass="icon--mailto" _icon="mail-ds" _iconmap="icons" ~}}
+                        {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#006dc1]" _icon="mail" _iconmap="icons" ~}}
                     </a>
                 </li>
             {{~/with~}}
 
-            <li class="inline-flex pl-10 mr-6 lg:ml-0">
-                <a class="link--shareIcon touchArea{{#with ../this.content.trackingData}} js-load{{/with}}"
+            <li>
+                <a class="{{#with ../this.content.trackingData}} js-load{{/with}}"
                    href="javascript:window.print()"
                    title="{{loca "share_print_linktitle" }}"
                     {{#with ../this.content.trackingData}}
                    data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
                     {{/with}}
                 >
-                    {{~> components/base/image/icon _addClass="icon--print" _icon="print" _iconmap="icons" ~}}
+                    {{~> components/base/image/icon _addClass="w-8 h-8 rounded-lg fill-[#606060]" _icon="print" _iconmap="icons" ~}}
                 </a>
             </li>
         </ul>