hr-design-system-handlebars 0.117.5 → 0.117.7

package/.storybook/preview.js

@@ -94,7 +94,7 @@ const customViewports = {
     hrMd: {
         name: 'hr: MD - 768px',
         styles: {
-            width: '768px',
+            width: '769px',
             height: '1000px',
         },
     },

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.117.7 (Thu Jan 12 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 1981 ff [#472](https://github.com/mumprod/hr-design-system-handlebars/pull/472) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.117.6 (Thu Jan 12 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 1947 podcast channel player 50% layout 768px [#471](https://github.com/mumprod/hr-design-system-handlebars/pull/471) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.117.5 (Thu Jan 12 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -826,12 +826,12 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-0 {
-  margin-top: 0px;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -1015,9 +1015,6 @@ video {
 .h-1 {
   height: 0.25rem;
 }
-.h-24 {
-  height: 6rem;
-}
 .max-h-0 {
   max-height: 0px;
 }
@@ -1484,10 +1481,6 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-grey-light {
-  --tw-bg-opacity: 1;
-  background-color: rgba(248, 248, 248, var(--tw-bg-opacity));
-}
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
@@ -1741,6 +1734,9 @@ video {
   padding-top: 1px;
   padding-bottom: 1px;
 }
+.pt-1 {
+  padding-top: 0.25rem;
+}
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1753,9 +1749,6 @@ video {
 .pr-2 {
   padding-right: 0.5rem;
 }
-.pt-1 {
-  padding-top: 0.25rem;
-}
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2231,7 +2224,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1673514153863;
+  counter-reset: cnt1673527606673;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2463,7 +2456,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1673514153863 1;
+  counter-increment: cnt1673527606673 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2479,7 +2472,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1673514153863);
+  content: counter(cnt1673527606673);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3517,10 +3510,6 @@ video {
     margin-right: 1.5rem;
   }
 
-  .xs\:w-24 {
-    width: 6rem;
-  }
-
   .xs\:line-clamp-6 {
     overflow: hidden;
     display: -webkit-box;
@@ -3695,10 +3684,6 @@ video {
     margin-bottom: 4rem;
   }
 
-  .md\:-mt-14 {
-    margin-top: -3.5rem;
-  }
-
   .md\:\!mb-2 {
     margin-bottom: 0.5rem !important;
   }
@@ -3763,10 +3748,6 @@ video {
     height: 2rem;
   }
 
-  .md\:h-42 {
-    height: 10.5rem;
-  }
-
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -3803,8 +3784,12 @@ video {
     width: 3rem;
   }
 
-  .md\:w-42 {
-    width: 10.5rem;
+  .md\:w-32 {
+    width: 8rem;
+  }
+
+  .md\:w-22 {
+    width: 5.5rem;
   }
 
   .md\:w-fit {
@@ -3986,10 +3971,6 @@ video {
     padding-right: 1.25rem;
   }
 
-  .md\:pr-52 {
-    padding-right: 13rem;
-  }
-
   .md\:pr-0 {
     padding-right: 0px;
   }
@@ -4260,6 +4241,10 @@ video {
     margin-left: 0.5rem;
   }
 
+  .lg\:-mt-14 {
+    margin-top: -3.5rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -4340,6 +4325,14 @@ video {
     width: 50%;
   }
 
+  .lg\:w-42 {
+    width: 10.5rem;
+  }
+
+  .lg\:w-32 {
+    width: 8rem;
+  }
+
   .lg\:max-w-1\/4 {
     max-width: 25%;
   }
@@ -4506,6 +4499,10 @@ video {
     padding-left: 0.25rem;
   }
 
+  .lg\:pr-48 {
+    padding-right: 12rem;
+  }
+
   .lg\:leading-8 {
     line-height: 2rem;
   }

package/dist/views/components/content_nav/content_nav.hbs

@@ -1,6 +1,6 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav x-cloak class="w-full px-2 md:px-0 c-content-nav">
+        <nav class="w-full px-2 md:px-0 c-content-nav">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
                     _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
@@ -8,7 +8,7 @@
         </nav>
     {{else}}
         {{#decorator 'components/content_nav/content_nav_dropdown'
-                     _componentClass="c-content-nav h-10 md:h-auto w-full"
+                     _componentClass="c-content-nav h-10 md:h-auto w-full mb-2 last:mb-0 "
                      _teaserSize=../_teaserSize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -1,4 +1,4 @@
-<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
+<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
      @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
 
     {{#if this.isAutosuggest}}
@@ -6,7 +6,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex bg-grey-light mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 pt-1 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"

package/dist/views/components/content_nav/content_nav_dropdown.hbs

@@ -1,5 +1,5 @@
-<nav x-cloak
-     class="w-full mb-2 last:mb-0 {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}}  {{_componentClass}} "
+<nav 
+     class="w-full {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}}  {{_componentClass}} "
      id="dropdown--{{nextRandom}}"
      tabindex="0"
      role="navigation"

package/dist/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,5 +1,4 @@
-
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
-        {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
-    </div>
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+    {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
+</div>
 

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

@@ -1,3 +1,3 @@
-<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
-    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teaserSize=this.teaserSize _type="podcastEpisodePlayerTeaser" }}
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" > 
+    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teasersize=this.teasersize _type="podcastEpisodePlayerTeaser" }}
 </div>

package/dist/views/components/teaser/podcast/podcast_player.hbs

@@ -35,7 +35,7 @@
 
       {{!-- Podcast Image      --}}
       <div class="flex flex-col ">
-        <div class="w-22 xs:w-24 {{inline-switch _teaserSize '["50"]' '["","md:w-42"]'}}">
+        <div class="w-22 {{inline-switch this.teaserSize '["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"
@@ -49,7 +49,7 @@
     </div>
 
     {{!-- Player UI --}}
-    <div class="flex {{inline-switch _teaserSize '["50"]' '["","md:pr-52 md:-mt-14"]'}}" 
+    <div class="flex {{inline-switch this.teaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14",""]'}}" 
       x-data="playaudio()"
       x-init="listenToGlobalStop()"
       ax-load
@@ -61,7 +61,7 @@
         _id=(nextRandom) 
         _first=true
       }}    
-    </div>
+    </div>    
   
     {{!-- Abo-Dropdown    --}}
     <div class="flex flex-row pt-5">

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -33,13 +33,13 @@
 
       {{!-- Podcast Image --}}
       <div class="flex flex-col ">
-        <div class="w-24 md:w-42">
+        <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload
-            _addClassImg="w-full h-24 md:h-42 block"
+            _addClassImg="w-full block"
           }}
         </div>
       </div>

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.117.5",
+    "version": "0.117.7",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -1,6 +1,6 @@
 {{#with this.contentNav}}
     {{#if this.isListOrFlow}}
-        <nav x-cloak class="w-full px-2 md:px-0 c-content-nav">
+        <nav class="w-full px-2 md:px-0 c-content-nav">
             {{> components/content_nav/content_nav_container
                     _teaserSize=../_teaserSize
                     _maindivclass="flex relative flex-wrap mt-2 mx-2 md:mx-0 md:mt-0 "
@@ -8,7 +8,7 @@
         </nav>
     {{else}}
         {{#decorator 'components/content_nav/content_nav_dropdown'
-                     _componentClass="c-content-nav h-10 md:h-auto w-full"
+                     _componentClass="c-content-nav h-10 md:h-auto w-full mb-2 last:mb-0 "
                      _teaserSize=../_teaserSize
                      _iconOpen="arrow-down"
                      _iconClose="arrow-up"

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -1,4 +1,4 @@
-<div x-cloak class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
+<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}} {{#if this.isMixed}}relative {{else}}absolute{{/if}}"
      @click.outside ="contentNavDropdownIsOpen = false; $dispatch('hr:global:resetinputAutoSuggest');"
 
     {{#if this.isAutosuggest}}
@@ -6,7 +6,7 @@
     {{/if}}
 >
     {{#if this.isAutosuggest}}
-        <div class="flex bg-grey-light mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
+        <div class="flex mx-0 w-full h-10 pt-1 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
                    class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"

package/src/stories/views/components/content_nav/content_nav_dropdown.hbs

@@ -1,5 +1,5 @@
-<nav x-cloak
-     class="w-full mb-2 last:mb-0 {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}}  {{_componentClass}} "
+<nav 
+     class="w-full {{#if this.isMixed}} px-2 md:px-0 {{else}} px-0 {{/if}}  {{_componentClass}} "
      id="dropdown--{{nextRandom}}"
      tabindex="0"
      role="navigation"

package/src/stories/views/components/teaser/podcast/podcast-playlist.hbs

@@ -1,5 +1,4 @@
-
-    <div id="4" class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
-        {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
-    </div>
+<div class="grid gap-y-6 relative gap-x-4 flex-col pt-5 mx-5 sm:mx-0 md:pt-5 bg-highlight-1 rounded-tl-3xl rounded-br-3xl col-span-12{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" >
+    {{> components/teaser/podcast/podcast_playlist_player _linkTitle="true" _isSinglePage=false _type="podcastPlaylistPlayerTeaser" }}
+</div>
 

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

@@ -1,3 +1,3 @@
-<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50"]' '[" md:col-span-6",""]'}}" > 
-    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teaserSize=this.teaserSize _type="podcastEpisodePlayerTeaser" }}
+<div class="relative grid flex-col col-span-12 mx-5 sm:mx-0 gap-y-6 gap-x-4 bg-highlight-1 rounded-tl-3xl rounded-br-3xl{{inline-switch this.teaserSize '["50","100"]' '[" md:col-span-6",""]'}}" > 
+    {{> components/teaser/podcast/podcast_player _linkTitle="true" _isSinglePage=true _teasersize=this.teasersize _type="podcastEpisodePlayerTeaser" }}
 </div>

package/src/stories/views/components/teaser/podcast/podcast.stories.mdx

@@ -18,8 +18,8 @@ import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
         }} 
         decorators={[
         (Story) => {
-            return `<div id="1" class="grid grid-page">
-                        <div id="2" class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
+            return `<div class="grid grid-page">
+                        <div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
                             ${Story()} 
                         </div>
                     </div>`

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

@@ -35,7 +35,7 @@
 
       {{!-- Podcast Image      --}}
       <div class="flex flex-col ">
-        <div class="w-22 xs:w-24 {{inline-switch _teaserSize '["50"]' '["","md:w-42"]'}}">
+        <div class="w-22 {{inline-switch this.teaserSize '["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"
@@ -49,7 +49,7 @@
     </div>
 
     {{!-- Player UI --}}
-    <div class="flex {{inline-switch _teaserSize '["50"]' '["","md:pr-52 md:-mt-14"]'}}" 
+    <div class="flex {{inline-switch this.teaserSize '["100","50"]' '["lg:pr-48 lg:-mt-14",""]'}}" 
       x-data="playaudio()"
       x-init="listenToGlobalStop()"
       ax-load
@@ -61,7 +61,7 @@
         _id=(nextRandom) 
         _first=true
       }}    
-    </div>
+    </div>    
   
     {{!-- Abo-Dropdown    --}}
     <div class="flex flex-row pt-5">

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -33,13 +33,13 @@
 
       {{!-- Podcast Image --}}
       <div class="flex flex-col ">
-        <div class="w-24 md:w-42">
+        <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
             _variant="default"
             _addClass="overflow-hidden"
             _noDelay=this.dontLazyload
-            _addClassImg="w-full h-24 md:h-42 block"
+            _addClassImg="w-full block"
           }}
         </div>
       </div>