hr-design-system-handlebars 1.7.2 → 1.8.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.8.1 (Fri Mar 10 2023)
+
+#### 🐛 Bug Fix
+
+- Bugfix/dpe 2182 [#581](https://github.com/mumprod/hr-design-system-handlebars/pull/581) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.8.0 (Thu Mar 09 2023)
+
+#### 🚀 Enhancement
+
+- Bugfix/dpe 2182 [#580](https://github.com/mumprod/hr-design-system-handlebars/pull/580) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.7.2 (Mon Mar 06 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2667,7 +2667,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1678094754050;
+  counter-reset: cnt1678437637567;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2901,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1678094754050 1;
+  counter-increment: cnt1678437637567 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2917,7 +2917,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1678094754050);
+  content: counter(cnt1678437637567);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/mediaplayer/media_player.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream cy-mediaplayer" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
 {{#if _isTeaser}}
     <div class="relative {{_aspectRatio}}" x-show="!avStart" >
@@ -12,7 +12,7 @@
         {{/with}}
         {{> components/button/button_round 
         _isButton="true" 
-        _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button'
+        _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button cy-mediaplayer-trigger'
         _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-media-button hover:fill-media-button')
         _teaserType=_teaserType
         _teaserSize=_teaserSize

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

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

@@ -3,7 +3,7 @@
 
     
     {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
-        {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
+        {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca)}}

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}{{#if _css}} {{_css}}{{/if}}'>
+<span class='cy-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -5,7 +5,7 @@
     {{/if}} 
     >
     {{#if this.teaserImage}}
-        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
             {{#if this.isMobile1to1}}
                 :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
             {{/if}}

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

@@ -8,7 +8,7 @@
     {{/if}}   
     >
     {{#if this.teaserImage}}
-        <figure class="relative
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
         {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
         {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
             {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     

package/dist/views/components/teaser/utilities/teaser_image_cypress_hook_classes.hbs

@@ -0,0 +1,5 @@
+{{~if this.teaserLead.avDocument.isVideo 'cy-video '~}}
+{{~if this.teaserLead.avDocument.isAudio 'cy-audio '~}}
+{{~if this.teaserLead.avDocument.isPodcast 'cy-podcast '~}}
+{{~if this.teaserLead.avDocument.isLivestream 'cy-video-livestream '~}}
+{{~if this.teaserLead.avDocument.isAudioEventLivestream 'cy-audio-livestream '~}}

package/package.json

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

package/src/stories/views/components/mediaplayer/media_player.hbs

@@ -1,4 +1,4 @@
-<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
+<div x-show="avStart" x-cloak id="{{this.ardPlayerConfig.playerId}}" class="ar-16-9 h-full{{#if _isTeaser}} z-20{{/if}} js-load {{if _cypressHook _cypressHook 'js-media-element'}} js-video-livestream cy-mediaplayer" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
 {{#if _isTeaser}}
     <div class="relative {{_aspectRatio}}" x-show="!avStart" >
@@ -12,7 +12,7 @@
         {{/with}}
         {{> components/button/button_round 
         _isButton="true" 
-        _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button'
+        _addClass='absolute bottom-0 right-0 fill-white hover:text-white ds-focus rounded-full js-mediaplayer__button cy-mediaplayer-trigger'
         _buttonColor=(if _isLivestream ' text-orange-spicyCarrot hover:fill-orange-spicyCarrot' ' text-media-button hover:fill-media-button')
         _teaserType=_teaserType
         _teaserSize=_teaserSize

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

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

@@ -3,7 +3,7 @@
 
     
     {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
-        {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
+        {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca)}}

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

@@ -1,3 +1,3 @@
-<span class='block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}{{#if _css}} {{_css}}{{/if}}'>
+<span class='cy-teaser-title block mt-0.5 font-title font-bold {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1 _firstItem=_firstItem}}{{#if _css}} {{_css}}{{/if}}'>
     {{~_text~}}
 </span>

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

@@ -5,7 +5,7 @@
     {{/if}} 
     >
     {{#if this.teaserImage}}
-        <figure class="relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative {{~inline-switch this.realTeaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3-gap-6  ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/3-gap-6"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2-gap-6"]'~}}"
             {{#if this.isMobile1to1}}
                 :class="{'ar-16-9 basis-full w-full' : avStart, 'ar-1-1 basis-2/5 w-2/5': !avStart}"
             {{/if}}

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

@@ -8,7 +8,7 @@
     {{/if}}   
     >
     {{#if this.teaserImage}}
-        <figure class="relative
+        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
         {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
         {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
             {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     

package/src/stories/views/components/teaser/utilities/teaser_image_cypress_hook_classes.hbs

@@ -0,0 +1,5 @@
+{{~if this.teaserLead.avDocument.isVideo 'cy-video '~}}
+{{~if this.teaserLead.avDocument.isAudio 'cy-audio '~}}
+{{~if this.teaserLead.avDocument.isPodcast 'cy-podcast '~}}
+{{~if this.teaserLead.avDocument.isLivestream 'cy-video-livestream '~}}
+{{~if this.teaserLead.avDocument.isAudioEventLivestream 'cy-audio-livestream '~}}