hr-design-system-handlebars 1.57.4 → 1.57.6

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.57.6 (Mon Feb 12 2024)
+
+#### 🐛 Bug Fix
+
+- copytext bugfixes 1 [#841](https://github.com/mumprod/hr-design-system-handlebars/pull/841) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
+# v1.57.5 (Fri Feb 09 2024)
+
+#### 🐛 Bug Fix
+
+- add text-center to header of posterteaser [#840](https://github.com/mumprod/hr-design-system-handlebars/pull/840) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.57.4 (Fri Feb 09 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3305,7 +3305,7 @@ a.link:hover {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1707491976228;
+  counter-reset: cnt1707760391912;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3607,7 +3607,7 @@ a.link:hover {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1707491976228 1;
+  counter-increment: cnt1707760391912 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3623,7 +3623,7 @@ a.link:hover {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1707491976228);
+  content: counter(cnt1707760391912);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/content/copytext/components/downloadbox/downloadbox_item.hbs

@@ -1,5 +1,5 @@
 <li class="mt-3">
-    <a class="link js-load" href="{{this.url}}" {{#with this.content.trackingData}}
+    <a class="link js-load ds-link" href="{{this.url}}" {{#with this.content.trackingData}}
            data-hr-click-tracking='{"settings": [{"type": "download", "secondLevelId": "{{this.secondLevelId}}", "clickLabel": "{{this.pageName}}"}]}'{{/with}}>
         {{~#with this.downloadBoxMetadata ~}}
             <span class="text-base sm480:text-lg">{{{this.title}}}</span> 

package/dist/views/components/content/copytext/components/image/figcaption.hbs

@@ -1,4 +1,4 @@
-<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy {{_cssClassCaption}}"
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
             x-data="{ 
                 open: false,
                 truncated: true,
@@ -15,7 +15,7 @@
     {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
         {{#if this.caption}}
             {{~#unless _hideCaption~}}
-                <span>
+                <span class="pr-3">
                     {{this.caption}} 
                 </span>
             {{~/unless~}}
@@ -25,7 +25,10 @@
         </span>
     </div>
     <template x-if="truncated">
-        <button x-cloak type="button">
+        <button x-cloak 
+                type="button"
+                x-effect="$el.setAttribute('aria-label', open ? 'Bildunterschrift schließen' : 'Bildunterschrift öffnen');$el.setAttribute('aria-expanded', open ? 'true' : 'false')"
+        >
             <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
             <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
         </button>

package/dist/views/components/content/copytext/components/image/image.hbs

@@ -1,6 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
@@ -16,6 +17,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"

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

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

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

@@ -16,7 +16,7 @@
     </figure>
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            {{#> components/teaser/components/teaser_header}}
+            {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
                         {{> components/label/label _type=this.type _text=(loca this.loca)}}

package/dist/views_static/components/content/copytext/components/downloadbox/downloadbox_item.hbs

@@ -1,5 +1,5 @@
 <li class="mt-3">
-    <a class="link js-load" href="{{this.url}}" {{#with this.content.trackingData}}
+    <a class="link js-load ds-link" href="{{this.url}}" {{#with this.content.trackingData}}
            data-hr-click-tracking='{"settings": [{"type": "download", "secondLevelId": "{{this.secondLevelId}}", "clickLabel": "{{this.pageName}}"}]}'{{/with}}>
         {{~#with this.downloadBoxMetadata ~}}
             <span class="text-base sm480:text-lg">{{{this.title}}}</span> 

package/dist/views_static/components/content/copytext/components/image/figcaption.hbs

@@ -1,4 +1,4 @@
-<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy {{_cssClassCaption}}"
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
             x-data="{ 
                 open: false,
                 truncated: true,
@@ -15,7 +15,7 @@
     {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
         {{#if this.caption}}
             {{~#unless _hideCaption~}}
-                <span>
+                <span class="pr-3">
                     {{this.caption}} 
                 </span>
             {{~/unless~}}
@@ -25,7 +25,10 @@
         </span>
     </div>
     <template x-if="truncated">
-        <button x-cloak type="button">
+        <button x-cloak 
+                type="button"
+                x-effect="$el.setAttribute('aria-label', open ? 'Bildunterschrift schließen' : 'Bildunterschrift öffnen');$el.setAttribute('aria-expanded', open ? 'true' : 'false')"
+        >
             <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
             <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
         </button>

package/dist/views_static/components/content/copytext/components/image/image.hbs

@@ -1,6 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
@@ -16,6 +17,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"

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

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

package/dist/views_static/components/teaser/teaser_poster.hbs

@@ -16,7 +16,7 @@
     </figure>
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            {{#> components/teaser/components/teaser_header}}
+            {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
                         {{> components/label/label _type=this.type _text=(loca this.loca)}}

package/package.json

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

package/src/stories/views/components/content/copytext/components/downloadbox/downloadbox_item.hbs

@@ -1,5 +1,5 @@
 <li class="mt-3">
-    <a class="link js-load" href="{{this.url}}" {{#with this.content.trackingData}}
+    <a class="link js-load ds-link" href="{{this.url}}" {{#with this.content.trackingData}}
            data-hr-click-tracking='{"settings": [{"type": "download", "secondLevelId": "{{this.secondLevelId}}", "clickLabel": "{{this.pageName}}"}]}'{{/with}}>
         {{~#with this.downloadBoxMetadata ~}}
             <span class="text-base sm480:text-lg">{{{this.title}}}</span> 

package/src/stories/views/components/content/copytext/components/image/figcaption.hbs

@@ -1,4 +1,4 @@
-<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy {{_cssClassCaption}}"
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-headingSerif {{_cssClassCaption}}"
             x-data="{ 
                 open: false,
                 truncated: true,
@@ -15,7 +15,7 @@
     {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
         {{#if this.caption}}
             {{~#unless _hideCaption~}}
-                <span>
+                <span class="pr-3">
                     {{this.caption}} 
                 </span>
             {{~/unless~}}
@@ -25,7 +25,10 @@
         </span>
     </div>
     <template x-if="truncated">
-        <button x-cloak type="button">
+        <button x-cloak 
+                type="button"
+                x-effect="$el.setAttribute('aria-label', open ? 'Bildunterschrift schließen' : 'Bildunterschrift öffnen');$el.setAttribute('aria-expanded', open ? 'true' : 'false')"
+        >
             <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
             <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
         </button>

package/src/stories/views/components/content/copytext/components/image/image.hbs

@@ -1,6 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
@@ -16,6 +17,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
+                _cssClass="clear-both"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"

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

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

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

@@ -16,7 +16,7 @@
     </figure>
     <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
         {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}} 
-            {{#> components/teaser/components/teaser_header}}
+            {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
                         {{> components/label/label _type=this.type _text=(loca this.loca)}}