hr-design-system-handlebars 1.102.2 → 1.102.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.102.3 (Tue Sep 24 2024)
+
+#### 🐛 Bug Fix
+
+- modify Posterteaser [#1077](https://github.com/mumprod/hr-design-system-handlebars/pull/1077) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.102.2 (Tue Sep 24 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1393,9 +1393,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .-mt-6 {
   margin-top: -1.5rem;
 }
-.-mt-8 {
-  margin-top: -2rem;
-}
 .-mt-\[33px\] {
   margin-top: -33px;
 }
@@ -2655,6 +2652,9 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.to-80\% {
+  --tw-gradient-to-position: 80%;
+}
 .fill-\[\#006dc1\] {
   fill: #006dc1;
 }
@@ -2853,6 +2853,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-10 {
   padding-bottom: 2.5rem;
 }
+.pb-16 {
+  padding-bottom: 4rem;
+}
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2877,6 +2880,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .pb-9 {
   padding-bottom: 2.25rem;
 }
+.pb-\[70px\] {
+  padding-bottom: 70px;
+}
 .pb-footer-padding-bottom {
   padding-bottom: 16px;
   padding-bottom: var(--footer-padding-bottom);
@@ -3486,7 +3492,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727186810627;
+  counter-reset: cnt1727189191460;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3894,7 +3900,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727186810627 1;
+  counter-increment: cnt1727189191460 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3910,7 +3916,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727186810627);
+  content: counter(cnt1727189191460);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -6346,6 +6352,14 @@ input[type="checkbox"]:checked::after {
     width: 2rem;
   }
 
+  .sm480\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .sm480\:pb-\[86px\] {
+    padding-bottom: 86px;
+  }
+
   .sm480\:align-top {
     vertical-align: top;
   }
@@ -6539,10 +6553,18 @@ input[type="checkbox"]:checked::after {
     margin-bottom: 3.5rem;
   }
 
+  .sm\:mb-3 {
+    margin-bottom: 0.75rem;
+  }
+
   .sm\:mb-5 {
     margin-bottom: 1.25rem;
   }
 
+  .sm\:mb-7 {
+    margin-bottom: 1.75rem;
+  }
+
   .sm\:mb-8 {
     margin-bottom: 2rem;
   }
@@ -6734,10 +6756,22 @@ input[type="checkbox"]:checked::after {
     padding-bottom: 0px;
   }
 
+  .sm\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
   .sm\:pb-2 {
     padding-bottom: 0.5rem;
   }
 
+  .sm\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .sm\:pb-\[86px\] {
+    padding-bottom: 86px;
+  }
+
   .sm\:pl-0 {
     padding-left: 0px;
   }
@@ -7277,6 +7311,22 @@ input[type="checkbox"]:checked::after {
     padding-bottom: 1.75rem;
   }
 
+  .md\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .md\:pb-24 {
+    padding-bottom: 6rem;
+  }
+
+  .md\:pb-32 {
+    padding-bottom: 8rem;
+  }
+
+  .md\:pb-\[70px\] {
+    padding-bottom: 70px;
+  }
+
   .md\:pl-0 {
     padding-left: 0px;
   }
@@ -7348,6 +7398,10 @@ input[type="checkbox"]:checked::after {
     line-height: 1.6875rem;
   }
 
+  .md\:leading-10 {
+    line-height: 2.5rem;
+  }
+
   .md\:leading-4 {
     line-height: 1rem;
   }

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% 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"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if ../../_isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{#if ../../_isCopytext-adjust_context}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=../../_isCopytext-adjust_context}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#if _isCopytext~}}
                 {{#if this.showFullSize.isTrue~}}
-                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/components/button/link_button}}
                 {{/if}}
             {{else}}
-                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                     {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                 {{/components/button/link_button}}
             {{/if}}
         </span>
-    </div>
+  
 </article>

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% 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"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
+                    {{#if _isCopytext}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#if _isCopytext~}}
                 {{#if this.showFullSize.isTrue~}}
-                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/components/button/link_button}}
                 {{/if}}
             {{else}}
-                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                     {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                 {{/components/button/link_button}}
             {{/if}}
         </span>
-    </div>
+  
 </article>

package/package.json

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

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

@@ -14,9 +14,9 @@
             {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="rounded-tl-hr rounded-br-hr" ~}}
         {{/if}}
     </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">
+    <div class="absolute flex flex-col justify-end w-full h-full {{#if _isCopytext~}}{{#if this.showFullSize.isTrue~}}{{inline-switch this.showStretched.isTrue '["false","true"]' '["pb-[70px] sm480:pb-24 md:pb-32","pb-[70px] sm480:pb-[86px] sm:pb-16 md:pb-[70px]","pb-[70px] sm480:pb-24 md:pb-32"]'}}{{else}}pb-[70px] sm480:pb-24 sm:pb-[86px] md:pb-24{{/if}}{{else}}{{inline-switch this.realTeaserSize '["33","50"]' '["pb-16 sm:pb-24 md:pb-16","pb-16 sm:pb-24 md:pb-24"]'}}{{/if}} bg-gradient-to-t to-80% 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"}} 
-            <div class="-mt-8 line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
+            <div class="line-clamp-4 xs:line-clamp-5 md:line-clamp-4 {{#if ../this.showStretched.isTrue}}lg:line-clamp-4{{else}}lg:line-clamp-5{{/if}}">
             {{#> components/teaser/components/teaser_header _css="text-center"}}
                 {{#with this.label}}
                     {{#> components/label/label_group}}
@@ -24,11 +24,15 @@
                         <span class="text-white">{{> components/label/label_byline _css="ml-2" _text=../../../this.tickerTopic}}</span>
                     {{/components/label/label_group}}
                 {{/with~}}
-                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mb-4 mx-2 md:mb-8 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
+                 {{#> components/teaser/components/teaser_headline _headlineTag=(if _isCopytext-adjust_context "h3" "h2") _css="text-shadow text-center text-white mx-2 xs:mx-6 sm:mx-8 md:mx-5 lg:mx-8"}}
                     {{#if this.topline}}
                         {{> components/teaser/components/teaser_topline _css="!text-white" _text=this.topline}}
                     {{/if}}
-                    {{> components/teaser/components/teaser_title _css="whitespace-pre-wrap" _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{#if _isCopytext-adjust_context}}
+                        {{> components/teaser/components/teaser_title _css=(if this.showFullSize.isTrue "md:leading-10 whitespace-pre-wrap" "whitespace-pre-wrap") _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{else}}
+                        {{> components/teaser/components/teaser_title _css=(inline-switch this.realTeaserSize '["33","50"]' '["whitespace-pre-wrap","md:leading-10 whitespace-pre-wrap"]') _text=this.title _size=this.realTeaserSize _teaserType="poster" _isCopytext=_isCopytext-adjust_context}}
+                    {{/if}}
                     {{#if this.extendedTitle}}
                         {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
                     {{/if}}
@@ -36,10 +40,11 @@
             {{/components/teaser/components/teaser_header}}
             </div>
         {{/components/base/link}}
+    </div>
         <span class="absolute flex items-end justify-center w-full h-full ds-cta">
             {{#if _isCopytext~}}
                 {{#if this.showFullSize.isTrue~}}
-                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                    {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.showStretched.isTrue '["false","true"]' '["z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white","z-20 mb-4 sm480:mb-7 sm:mb-3 hover:bg-white","z-20 mb-4 sm480:mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                         {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                     {{/components/button/link_button}}
                 {{else}}
@@ -48,10 +53,10 @@
                     {{/components/button/link_button}}
                 {{/if}}
             {{else}}
-                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7 hover:bg-white","z-20 mb-7 md:mb-16 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
+                {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-3 sm:mb-7 md:mb-3 hover:bg-white","z-20 mb-3 sm:mb-7 hover:bg-white"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
                     {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
                 {{/components/button/link_button}}
             {{/if}}
         </span>
-    </div>
+  
 </article>