hr-design-system-handlebars 0.118.1 → 0.119.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v0.119.0 (Wed Jan 18 2023)
+
+#### 🚀 Enhancement
+
+- FEATURE: Removes unneccessary div in teaser_image and fixes css problems [#481](https://github.com/mumprod/hr-design-system-handlebars/pull/481) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v0.118.1 (Tue Jan 17 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1978,6 +1978,9 @@ video {
 .pb-3 {
   padding-bottom: 0.75rem;
 }
+.pr-10 {
+  padding-right: 2.5rem;
+}
 .pt-0 {
   padding-top: 0px;
 }
@@ -2397,7 +2400,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1673972177303;
+  counter-reset: cnt1674029206988;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2427,9 +2430,6 @@ video {
 .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
-.\!ar-16-9 {
-        aspect-ratio: 16 / 9 !important;
-    }
 @supports not (aspect-ratio: 16 / 9) {
         .ar-16-9::before {
             float: left;
@@ -2442,17 +2442,6 @@ video {
             content: '';
             clear: both;
         }
-        .\!ar-16-9::before {
-            float: left !important;
-            padding-top: 56.25% !important;
-            content: '' !important;
-        }
-
-        .ar-16-19::after {
-            display: block !important;
-            content: '' !important;
-            clear: both !important;
-        }
     }
 .ar-1-1 {
         aspect-ratio: 1 / 1;
@@ -2629,7 +2618,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1673972177303 1;
+  counter-increment: cnt1674029206988 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2645,7 +2634,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1673972177303);
+  content: counter(cnt1674029206988);
 }
 /*! ****************************/
 /*! 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-auto{{#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" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
 {{#if _isTeaser}}
     <div class="relative {{_aspectRatio}}" x-show="!avStart" >

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

@@ -1,4 +1,5 @@
-<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
+<div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}" 
+{{~#if this.isMobile1to1}}:class="{'basis-full w-full pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
         {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
             {{> components/teaser/components/teaser_heading 

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

@@ -1,28 +1,27 @@
-<div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
-    {{#unless this.hideGeotag}}
-            {{~#with this.geotag}}
-                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
-            {{/with~}}  
-    {{/unless}}
-    {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
-    {{#if this.isProgram}}
-        {{#if this.showMediatheksLink}}
-            {{#decorator 'components/base/link' _isAriaHidden=true}}
-                {{> components/button/button_round 
-            _isButton="true" 
-            _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
-            _buttonColor='text-toplineColor hover:fill-toplineColor'
-            _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-            _showIcon=true 
-            _icon='play_button' 
-            _label='Sendung' 
-            _srOnly="true" 
-            _alpineClick=""
-            }}    
-            {{/decorator}}
-        {{/if}}
+{{#unless this.hideGeotag}}
+        {{~#with this.geotag}}
+            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
+        {{/with~}}  
+{{/unless}}
+{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
+{{#if this.isProgram}}
+    {{#if this.showMediatheksLink}}
+        {{#decorator 'components/base/link' _isAriaHidden=true}}
+            {{> components/button/button_round 
+        _isButton="true" 
+        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
+        _buttonColor='text-toplineColor hover:fill-toplineColor'
+        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
+        _showIcon=true 
+        _icon='play_button' 
+        _label='Sendung' 
+        _srOnly="true" 
+        _alpineClick=""
+        }}    
+        {{/decorator}}
     {{/if}}
-</div>
+{{/if}}
+
 {{#if this.isEvent}}
     {{#unless this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}

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

@@ -1,4 +1,4 @@
-<article class="relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
+<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
     x-data="{ avStart: false }"
     {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
@@ -7,7 +7,7 @@
     {{#if this.teaserImage}}
         <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5  md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
             {{#if this.isMobile1to1}}
-                :class="avStart ? '!ar-16-9' : ''"
+                :class="{'ar-16-9 basis-full w-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=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 

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

@@ -1,4 +1,4 @@
-<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
 {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
 {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} 
  "
@@ -8,9 +8,9 @@
     {{/if}}   
     >
     {{#if this.teaserImage}}
-        <figure class="relative 
-        {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"
-        {{~#if this.isMobile1to1}} :class="avStart ? '!ar-16-9' : ''"{{/if}} >    
+        <figure class="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"]')) }}     
         </figure>
         {{#if this.displayTeaserBodyAsImageOverlay}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.118.1",
+    "version": "0.119.0",
     "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-auto{{#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" data-hr-mediaplayer-loader='{{json this.ardPlayerJsonConfig}}'>
 </div>
 {{#if _isTeaser}}
     <div class="relative {{_aspectRatio}}" x-show="!avStart" >

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

@@ -1,4 +1,5 @@
-<div class="{{~#if this.isMobile1to1}}basis-3/5{{/if~}}{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
+<div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}" 
+{{~#if this.isMobile1to1}}:class="{'basis-full w-full pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
     <header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
         {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }} 
             {{> components/teaser/components/teaser_heading 

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

@@ -1,28 +1,27 @@
-<div class="relative{{~#if _isMobile1to1}} ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}">
-    {{#unless this.hideGeotag}}
-            {{~#with this.geotag}}
-                {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
-            {{/with~}}  
-    {{/unless}}
-    {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
-    {{#if this.isProgram}}
-        {{#if this.showMediatheksLink}}
-            {{#decorator 'components/base/link' _isAriaHidden=true}}
-                {{> components/button/button_round 
-            _isButton="true" 
-            _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
-            _buttonColor='text-toplineColor hover:fill-toplineColor'
-            _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
-            _showIcon=true 
-            _icon='play_button' 
-            _label='Sendung' 
-            _srOnly="true" 
-            _alpineClick=""
-            }}    
-            {{/decorator}}
-        {{/if}}
+{{#unless this.hideGeotag}}
+        {{~#with this.geotag}}
+            {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
+        {{/with~}}  
+{{/unless}}
+{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg="" ~}}
+{{#if this.isProgram}}
+    {{#if this.showMediatheksLink}}
+        {{#decorator 'components/base/link' _isAriaHidden=true}}
+            {{> components/button/button_round 
+        _isButton="true" 
+        _addClass='absolute bottom-0 right-0 fill-white hover:text-white js-mediaplayer__button'
+        _buttonColor='text-toplineColor hover:fill-toplineColor'
+        _buttonSpace=(inline-switch this.teaserSize '["25","33"]' '[" my-2 mx-2"," my-5 mx-5 md:my-3 md:mx-3"," my-5 mx-5"]')
+        _showIcon=true 
+        _icon='play_button' 
+        _label='Sendung' 
+        _srOnly="true" 
+        _alpineClick=""
+        }}    
+        {{/decorator}}
     {{/if}}
-</div>
+{{/if}}
+
 {{#if this.isEvent}}
     {{#unless this.displayTeaserBodyAsImageOverlay}}
         {{#decorator 'components/teaser/components/teaser_image_overlay' _cssClasses="top-0 h-full"}}

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

@@ -1,4 +1,4 @@
-<article class="relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
+<article class="items-start relative col-span-12 flex md:flex-row gap-y-3 gap-x-4 md:px-0{{#unless this.isEvent}}{{~inline-switch this.teaserSize '["hero","100","50"]' '[" flex-col"," px-5 md:flex-row"," md:col-span-6 px-5 md:flex-row"]'~}}{{else}} items-start flex-col{{/unless}}"
     x-data="{ avStart: false }"
     {{#if this.isMobile1to1}}
             :class="avStart ? 'flex-col' : 'flex-row'"
@@ -7,7 +7,7 @@
     {{#if this.teaserImage}}
         <figure class="relative {{~inline-switch this.teaserSize '["hero","100","50"]' '[" basis-full w-full md:basis-2/3 md:w-2/3 ar-16-9"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5  md:basis-1/3 md:w-1/3"," ar-1-1 md:ar-16-9 basis-2/5 w-2/5 md:basis-1/2 md:w-1/2"]'~}}"
             {{#if this.isMobile1to1}}
-                :class="avStart ? '!ar-16-9' : ''"
+                :class="{'ar-16-9 basis-full w-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=(inline-switch this.teaserSize '["hero"]' '["ar-16-9","ar-1-1 md:ar-16-9"]') }} 

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

@@ -1,4 +1,4 @@
-<article class="relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
+<article class="items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
 {{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
 {{~#if this.isMobile1to1}} js-is1to1 px-5 md:px-0 md:flex-col{{else}} flex-col{{/if~}} 
  "
@@ -8,9 +8,9 @@
     {{/if}}   
     >
     {{#if this.teaserImage}}
-        <figure class="relative 
-        {{~#if this.isMobile1to1}} basis-2/5 md:basis-full ar-1-1 md:ar-16-9{{else}} ar-16-9{{/if~}}"
-        {{~#if this.isMobile1to1}} :class="avStart ? '!ar-16-9' : ''"{{/if}} >    
+        <figure class="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"]')) }}     
         </figure>
         {{#if this.displayTeaserBodyAsImageOverlay}}