hr-design-system-handlebars 1.42.4 → 1.43.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.43.1 (Thu Oct 26 2023)
+
+#### 🐛 Bug Fix
+
+- Integrate Dark Mode for Podcast Channel Player [#737](https://github.com/mumprod/hr-design-system-handlebars/pull/737) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.43.0 (Wed Oct 25 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 2222 use grid for episode player [#736](https://github.com/mumprod/hr-design-system-handlebars/pull/736) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.42.4 (Wed Oct 25 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1153,9 +1153,6 @@ video {
 .col-span-3 {
   grid-column: span 3 / span 3;
 }
-.col-span-8 {
-  grid-column: span 8 / span 8;
-}
 .col-span-full {
   grid-column: 1 / -1;
 }
@@ -1180,10 +1177,6 @@ video {
 .m-auto {
   margin: auto;
 }
-.-mx-3 {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1342,9 +1335,6 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
-.mr-6 {
-  margin-right: 1.5rem;
-}
 .mt-0 {
   margin-top: 0px;
 }
@@ -2282,9 +2272,21 @@ video {
 .to-purple-100 {
   --tw-gradient-to: #f3e8ff var(--tw-gradient-to-position);
 }
+.fill-\[\#006dc1\] {
+  fill: #006dc1;
+}
+.fill-\[\#3b5999\] {
+  fill: #3b5999;
+}
+.fill-\[\#4dc247\] {
+  fill: #4dc247;
+}
 .fill-\[\#55acee\] {
   fill: #55acee;
 }
+.fill-\[\#606060\] {
+  fill: #606060;
+}
 .fill-blue-congress {
   fill: #005293;
 }
@@ -3038,7 +3040,7 @@ video {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1698220902232;
+  counter-reset: cnt1698314328677;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3116,6 +3118,34 @@ video {
             [main-start] minmax(0, 63.75rem) [main-end]
             minmax(0, 1fr) [full-end];
     }
+.grid-content {
+        grid-template-areas:
+    "head"
+    "main "
+    "aside";
+        grid-template-columns: 100%;
+    }
+@media only screen and (min-width: 600px){
+        .grid-content {
+            grid-template-areas:
+    "head head"
+    "main  aside";
+
+            grid-template-columns: 3fr 1fr;
+        }
+    }
+.head{
+        grid-area: head;
+    }
+.main{
+        grid-area: main;
+    }
+.aside{
+        grid-area: aside;
+    }
+.col-main {
+        grid-column: main;
+    }
 .col-full {
         grid-column: full;
     }
@@ -3273,7 +3303,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1698220902232 1;
+  counter-increment: cnt1698314328677 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3289,7 +3319,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1698220902232);
+  content: counter(cnt1698314328677);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -4646,9 +4676,6 @@ video {
 .backdrop\:bg-gray-scorpion\/90::backdrop {
   background-color: rgba(96, 96, 96, 0.9);
 }
-.first\:mt-6:first-child {
-  margin-top: 1.5rem;
-}
 .first\:border-t:first-child {
   border-top-width: 1px;
 }
@@ -4668,9 +4695,6 @@ video {
   border-color: #fff;
   border-color: var(--color-navigation-border-color);
 }
-.last\:pb-6:last-child {
-  padding-bottom: 1.5rem;
-}
 .last\:pr-0:last-child {
   padding-right: 0px;
 }
@@ -5023,6 +5047,10 @@ video {
     margin-right: 2rem;
   }
 
+  .sm\:ml-8 {
+    margin-left: 2rem;
+  }
+
   .sm\:mt-1 {
     margin-top: 0.25rem;
   }
@@ -5043,6 +5071,10 @@ video {
     width: 58.333333%;
   }
 
+  .sm\:w-\[220px\] {
+    width: 220px;
+  }
+
   .sm\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;

package/dist/views/components/article/components/podcast/podcast_episode_article.hbs

@@ -1,40 +1,41 @@
 <article class="grid grid-page">
-<div class="col-span-12 my-6 bg-highlight-1 rounded-tl-hr rounded-br-hr dark:bg-highlight-1-dark" >
-    {{> components/podcast/podcast_player _linkTitle="true" _isSinglePage=false _type="podcastEpisodePlayer"}}
-</div>
-<div class="order-1 col-span-8 px-5">
-    {{> components/podcast/components/podcast_player_shorttext }}
-</div>
-<div class="order-3 col-span-8">
-    {{> components/content/content_footer/content_footer 
-        _author=this.audioAuthor
-        _showDate=this.hasDwellTime
-        _date=this.airdateDate
-        _copyright=this.copyright
-        _isArchiveContent=this.isArchiveContent
-        _posterCopyright="poster_copyright"}}
-</div>
+    <div class="grid pt-6 col-main grid-content">
+        <div class="p-5 head bg-highlight-1 dark:bg-highlight-1-dark rounded-tl-hr rounded-br-hr">
+            {{> components/podcast/podcast_player _linkTitle=true _isSinglePage=true _isArticlePlayer=true}}
+        </div>
+        <div class="pt-6 main">
+            {{> components/podcast/components/podcast_player_shorttext }}
+            {{> components/content/content_footer/content_footer
+                    _author=this.audioAuthor
+                    _showDate=this.hasDwellTime
+                    _date=this.airdateDate
+                    _copyright=this.copyright
+                    _isArchiveContent=this.isArchiveContent
+                    _posterCopyright="poster_copyright"}}
+        </div>
 
-<aside class="order-4 col-full md:order-2 md:col-span-4"
-    aria-label='{{loca "appendix_title"}}'>
-    <div class="c-appendix">
-        {{#unless _webview}}
-           {{!--  {{~#with this.backLinkUrl ~}}
-                {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
-            {{~/with~}}
+        <aside class="order-4 pt-6 aside md:order-2 sm:ml-8 sm:w-[220px]"
+               aria-label='{{loca "appendix_title"}}'>
+            <div class="c-appendix">
+                {{#unless _webview}}
+                {{!--  {{~#with this.backLinkUrl ~}}
+                        {{~> components/base/link/backlink _addClass="appendix__backlink" ~}}
+                    {{~/with~}}
 
-            {{~#with this.geotag ~}}
-                {{~> modules/geotag/geotag-list ~}}
-            {{~/with~}}
+                    {{~#with this.geotag ~}}
+                        {{~> modules/geotag/geotag-list ~}}
+                    {{~/with~}}
 
-            {{~#with this.topictags ~}}
-                {{~> modules/topictag/topictag-list ~}}
-            {{~/with~}} --}}
+                    {{~#with this.topictags ~}}
+                        {{~> modules/topictag/topictag-list ~}}
+                    {{~/with~}} --}}
 
-            {{!-- {{~#with this.socialSharing ~}}
-                {{~> components/socialmedia/socialmedia ~}}
-            {{~/with~}} --}}
-        {{/unless}}
+                    {{~#with this.socialSharing ~}}
+                        {{~> components/socialmedia/socialmedia ~}}
+                    {{~/with~}}
+                {{/unless}}
+            </div>
+        </aside>
     </div>
-</aside>    
-</article>
+</article>
+

package/dist/views/components/article/components/podcast/podcast_playlist_article.hbs

@@ -1,6 +1,6 @@
 <article class="grid grid-page">
     <div class="grid grid-cols-12 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14">
-    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr" >
+    <div class="order-1 w-full col-span-12 my-6 md:col-span-9 bg-highlight-1 rounded-tl-hr rounded-br-hr dark:bg-highlight-1-dark" >
         {{> components/podcast/podcast_playlist_player _isArticlePlayer=true}}
 
         {{~#if this.remainingPlaylistItems}}

package/dist/views/components/content/content_footer/content_footer.hbs

@@ -1,19 +1,19 @@
-<footer class="flex flex-col px-5 text-sm font-copy{{#if _addClass}} {{_addClass}}{{/if}}">
+<footer class="flex flex-col mt-10 text-xs font-copy{{#if _addClass}} {{_addClass}}{{/if}}">
     {{~#with _author ~}}
-        <p class="block first:mt-6 contentFooter__byline text__byline">
+        <p>
             Autor: {{this}}
         </p>
     {{~/with~}}
     {{#if _showDate ~}}
         {{#with _date}}
-            <p class="block contentFooter__byline text__byline">
+            <p>
                 <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
             </p>
         {{/with~}}
     {{/if}}
 
     {{~#with _source}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca "copyright_source"~}}
             {{~#each this}}
                 {{~#if @first}} {{this}}{{else}}, {{this}}{{/if~}}
@@ -22,20 +22,20 @@
     {{/with~}}
 
     {{~#with _copyright ~}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca "copyright_source"}} {{loca "copyright_symbol" this ~}}
         </p>
     {{~/with~}}
 
     {{~#if _isArchiveContent}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{loca "archive_content"}}
         </p>
     {{/if}}
 
     {{~#with _posterCopyright ~}}
         {{~#with ../teaseritem.copyrightWithLinks}}
-            <p class="block contentFooter__byline text__byline">
+            <p>
                 {{~loca ../this this}}
             </p>
         {{~/with~}}
@@ -43,7 +43,7 @@
 
     <!-- TODO teaseritem.copyrightWithLinks dont work in gallery, generalize model -->
     {{~#with _galleryCopyright ~}}
-        <p class="block contentFooter__byline text__byline">
+        <p>
             {{~loca this ../copyrightWithLinks}}
         </p>
     {{~/with~}}

package/dist/views/components/grid/grid_item.hbs

@@ -1,3 +1,3 @@
-<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
+<article class="col-span-12 {{inline-switch _size '["12","9","8","6","4","3"]' '["","md:col-span-9","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
     {{> @partial-block }}    
 </article>

package/dist/views/components/podcast/components/podcast_item_title.hbs

@@ -2,7 +2,7 @@
     _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4'
 }}
     <span
-        class='block hover:underline text-podcast-text text-base'
+        class='block text-base hover:underline text-podcast-text dark:text-podcast-text-dark'
     >
         {{~../../_title-adjust_context~}}
     </span>

package/dist/views/components/podcast/components/podcast_player_shorttext.hbs

@@ -1,7 +1,7 @@
 {{#unless _isSinglePage}}
   {{#unless this.hideShortText}}
       {{~#with this.shorttext}}
-          <div class="col-span-12 text-sm md:text-base font-copy c-podcastEpisodePlayer__shortText">
+          <div class="col-span-12 text-sm md:text-base font-copy">
               <span class="c-teaser__shorttext"> {{this}} </span>
           </div>
       {{/with~}}

package/dist/views/components/podcast/components/podcast_player_ui.hbs

@@ -17,7 +17,7 @@
 
 
                         {{!-- Airdate     --}}
-                        <div class="text-xs grow font-headingSerif text-podcast-text">
+                        <div class="text-xs grow font-headingSerif text-podcast-text dark:text-podcast-text-dark">
                             {{#unless ../../../../this.isSingleChannel ~}}
                                 <span>{{this.podcastChannel.title}}</span>
                                 <span class="mx-1">|</span>

package/dist/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/dist/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/dist/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>