hr-design-system-handlebars 0.56.15 → 0.57.0

package/.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<script defer src="https://cdn.jsdelivr.net/npm/async-alpine@0.3.x/dist/async-alpine.script.js"></script>
 <script defer src="https://unpkg.com/@alpinejs/collapse@3.8.1/dist/cdn.min.js"></script>
-<script src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js" defer></script>
+<script defer src="https://unpkg.com/@alpine-collective/toolkit@1.0.0/dist/cdn.min.js"></script>
 <script defer src="https://unpkg.com/alpinejs@3.8.1/dist/cdn.min.js"></script>

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v0.57.0 (Tue Sep 27 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1766 [#329](https://github.com/mumprod/hr-design-system-handlebars/pull/329) ([@vascoeduardo](https://github.com/vascoeduardo) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.56.15 (Fri Sep 16 2022)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -441,7 +441,7 @@ video {
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
 }
 
-.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white {
+.link-focus-inset, .link-focus, .link-focus-inset-white, .link-focus-white, .focus\:ring {
   --tw-ring-inset:  ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
@@ -801,6 +801,9 @@ video {
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .mb-7 {
   margin-bottom: 1.75rem;
 }
@@ -886,6 +889,9 @@ video {
 .h-24 {
   height: 6rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .max-h-0 {
   max-height: 0px;
 }
@@ -1193,6 +1199,12 @@ video {
 .rounded-3xl {
   border-radius: 1.5rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -1401,6 +1413,13 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(220, 232, 240, var(--tw-bg-opacity));
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
 .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));
@@ -1457,6 +1476,9 @@ video {
 .p-8 {
   padding: 2rem;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1603,15 +1625,15 @@ video {
 .pb-4 {
   padding-bottom: 1rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .pb-10 {
   padding-bottom: 2.5rem;
 }
 .pt-8 {
   padding-top: 2rem;
 }
-.pt-6 {
-  padding-top: 1.5rem;
-}
 .text-left {
   text-align: left;
 }
@@ -1941,7 +1963,7 @@ video {
           transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1663336382306;
+  counter-reset: cnt1664291825673;
 }
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
@@ -2324,7 +2346,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1663336382306 1;
+  counter-increment: cnt1664291825673 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2341,7 +2363,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1663336382306);
+  content: counter(cnt1664291825673);
 }
 /*! purgecss start ignore */
 :root,
@@ -2823,6 +2845,19 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus\:ring:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+          box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
+}
+.focus\:ring-\[\#1F89AE\]:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgba(31, 137, 174, var(--tw-ring-opacity));
+}
 .active\:font-bold:active {
   font-weight: 700;
 }
@@ -2837,6 +2872,41 @@ video {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color-index: 48) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (color: 48842621) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
+@media (prefers-color-scheme: dark) {
+
+  .dark\:bg-gray-700 {
+    --tw-bg-opacity: 1;
+    background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+  }
+}
 @media print {
 
   .print\:flex {

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

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6" > 
+    {{> components/teaser/podcast/podcast_player }}
+ </div>

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

@@ -0,0 +1,38 @@
+<div class="w-full col-span-12 js-load" 
+    x-data="playaudio()"
+    ax-load
+    ax-load-src="http://localhost:6006/vendor/js/podcastPlayer.alpine.js">
+    <button x-on:keydown.tab="playAndStop" x-on:click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">       
+        <div class="">
+            <div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5 text-white">
+                start
+            </div>
+            <div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5  text-white">
+                stop
+            </div>
+        </div>
+    </button>
+
+    <input x-ref="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="w-full h-1 mb-6 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" >
+    
+    <div class="c-audioPlayer__metaText text__byline">
+      <span x-text="currentTime">00:00</span>
+      <span class="">/</span>
+      <span x-text="audioDuration">06:21 Min</span>
+    </div>
+
+    <audio x-ref="audio" controls="controls">
+        <source src="https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3" type="audio/mp3" />
+    </audio>
+
+  <div class="hidden">
+    currentTime: <span x-text="currentTime"></span><br>
+    currentTimePercentage:  <span x-text="currentTimePercentage"></span><br>
+    currentTimeMs: <span x-text="currentTimeMs"></span><br>
+    currentTimeS: <span x-text="currentTimeS"></span><br>
+    currentTimeM: <span x-text="currentTimeM"></span><br>
+    currentTimeH: <span x-text="currentTimeH"></span><br>
+    audioDuration: <span x-text="audioDuration"></span><br>
+  </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.56.15",
+    "version": "0.57.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/assets/vendor/js/podcastPlayer.alpine.js

@@ -0,0 +1,63 @@
+export default function playaudio () {
+    return {
+        init: false,
+        currentlyPlaying: false,
+        currentTime: "00:00",
+        currentTimeMs: 0,
+        currentTimeS: 0,
+        currentTimeM: 0,
+        currentTimeH: 0,
+        currentTimePercentage: 0,
+        audioDuration: 0,
+        pad(n, z) {
+            z = z || 2;
+            return ('00' + n).slice(-z);
+        },
+        rangeInput() {
+            if(!this.init){
+                //start and stop the audio
+                this.playAndStop()
+                this.playAndStop()
+            }           
+            this.$refs.audio.currentTime = (this.$refs.range.value/1000) * this.audioDuration            
+        },
+        updateCurrentTime(s) {
+            this.currentTimeMs = s % 1000;
+            s = (s - this.currentTimeMs) / 1000;
+            this.currentTimeS = s % 60;
+            s = (s - this.currentTimeS) / 60;
+            this.currentTimeM = s % 60;
+            this.currentTimeH = (s - this.currentTimeM) / 60;
+            this.currentTime = this.pad(this.currentTimeM) + ':' + this.pad(this.currentTimeS) ;           
+            this.currentTimePercentage = ((100 * this.$refs.audio.currentTime) / this.audioDuration) * 10
+        },   
+        playAndStop() {
+            if (this.currentlyPlaying) {
+            this.stopAudio()
+            } else {
+            this.startAudio()   
+            }
+        },
+        startAudio() {
+            if(!this.init) {
+            this.init = true;
+            this.audioDuration = this.$refs.audio.duration;
+            this.initAudioEventListener()     
+            }
+            this.$refs.audio.play();
+            this.currentlyPlaying = true;         
+        },
+        stopAudio() {
+            this.$refs.audio.pause();
+            this.currentlyPlaying = false;
+        },
+        initAudioEventListener() {
+            this.$refs.audio.ontimeupdate = (event) => {
+            this.updateCurrentTime( this.$refs.audio.currentTime * 1000)
+            };  
+        },
+        returnString() {
+            return "String"
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-12 pt-6 md:pt-7 bg-[#dce8f0] mx-0 md:rounded-tl-3xl md:rounded-br-3xl col-main gap-x-6 gap-y-6" > 
+    {{> components/teaser/podcast/podcast_player }}
+ </div>

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

@@ -0,0 +1,39 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+
+import podcast from './podcast.hbs'
+
+
+<Meta   title="Komponenten/Teaser/Podcast"
+        parameters={{
+            chromatic: {
+                viewports: [360, 768, 1024]
+            },
+            layout: 'fullscreen',
+        }}
+        argTypes={{
+        }} 
+        decorators={[
+        (Story) => {
+            return `<div class="grid my-5 grid-page">
+                        
+                            ${Story()}
+                        
+                    </div>`
+        },
+    ]}
+        />
+
+export const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return podcast({ brand, ...args })
+}
+
+
+<Preview withToolbar>
+    <Story  name="Beispiel 1" >
+        {Template.bind({})} 
+    </Story> 
+</Preview>

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

@@ -0,0 +1,38 @@
+<div class="w-full col-span-12 js-load" 
+    x-data="playaudio()"
+    ax-load
+    ax-load-src="http://localhost:6006/vendor/js/podcastPlayer.alpine.js">
+    <button x-on:keydown.tab="playAndStop" x-on:click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">       
+        <div class="">
+            <div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5 text-white">
+                start
+            </div>
+            <div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5  text-white">
+                stop
+            </div>
+        </div>
+    </button>
+
+    <input x-ref="range" x-on:input="rangeInput()" type="range" x-bind:value="currentTimePercentage" min="0" max="1000" class="w-full h-1 mb-6 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700" >
+    
+    <div class="c-audioPlayer__metaText text__byline">
+      <span x-text="currentTime">00:00</span>
+      <span class="">/</span>
+      <span x-text="audioDuration">06:21 Min</span>
+    </div>
+
+    <audio x-ref="audio" controls="controls">
+        <source src="https://mp3podcasthr-a.akamaihd.net/mp3/podcast/hr2_audio/hr2_audio_20220914_95730396.mp3" type="audio/mp3" />
+    </audio>
+
+  <div class="hidden">
+    currentTime: <span x-text="currentTime"></span><br>
+    currentTimePercentage:  <span x-text="currentTimePercentage"></span><br>
+    currentTimeMs: <span x-text="currentTimeMs"></span><br>
+    currentTimeS: <span x-text="currentTimeS"></span><br>
+    currentTimeM: <span x-text="currentTimeM"></span><br>
+    currentTimeH: <span x-text="currentTimeH"></span><br>
+    audioDuration: <span x-text="audioDuration"></span><br>
+  </div>
+</div>
+