hr-design-system-handlebars 1.33.2 → 1.33.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.33.3 (Tue Jul 25 2023)
+
+#### 🐛 Bug Fix
+
+- Add hover effect to Ticker-Teaser headline [#687](https://github.com/mumprod/hr-design-system-handlebars/pull/687) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v1.33.2 (Thu Jul 20 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2676,9 +2676,18 @@ video {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+.decoration-tickerTeaserHeadlineUnderline {
+  -webkit-text-decoration-color: #ffffff;
+          text-decoration-color: #ffffff;
+  -webkit-text-decoration-color: var(--color-ticker-teaser-headline-underline);
+          text-decoration-color: var(--color-ticker-teaser-headline-underline);
+}
 .decoration-1 {
   text-decoration-thickness: 1px;
 }
+.decoration-2 {
+  text-decoration-thickness: 2px;
+}
 .placeholder-primary::-webkit-input-placeholder {
   color: #005293;
   color: var(--color-primary-ds);
@@ -2817,7 +2826,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1689840168299;
+  counter-reset: cnt1690287794197;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3052,7 +3061,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1689840168299 1;
+  counter-increment: cnt1690287794197 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3068,7 +3077,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1689840168299);
+  content: counter(cnt1690287794197);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3240,6 +3249,7 @@ video {
     --color-ticker-teaser-footer: #ffffff;
     --search-border-color-desktop: transparent;
     --search-border-color-mobile: var(--color-primary-ds);
+    --color-ticker-teaser-headline-underline : #ffffff;
 }
 [data-theme='hessenschau'] {
     --color-primary-ds: #005293;
@@ -3319,10 +3329,10 @@ video {
     /* Border */
     --border-radius-hr: 1.5rem;
     /* ticker-Teaser*/
-    --color-ticker-teaser-headline: #ffffff;
     --color-ticker-teaser-label-byline: #ffffff;
     --color-ticker-teaser-timeline-score: #d34600;
     --color-ticker-teaser-footer: #ffffff;
+    --color-ticker-teaser-headline : #ffffff;
 }
 [data-theme='hr-fernsehen'] {
     --color-primary-ds: #a00d65;

package/dist/views/components/teaser/ticker/teaser_ticker_body.hbs

@@ -1,14 +1,14 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link hover:text-toplineColor" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}
                     {{> components/label/label_byline _css="ml-2 text-tickerTeaserlabelByline" _text=../../../this.tickerTopic }}
                 {{/components/label/label_group}}
             {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto hover:underline decoration-2 decoration-tickerTeaserHeadlineUnderline"}}
                 {{> components/teaser/components/teaser_title _css="text-tickerTeaserHeadline" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
                 {{#if this.extendedTitle}}
                     {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}

package/package.json

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

package/src/assets/tailwind.css

@@ -110,6 +110,7 @@
     --color-ticker-teaser-footer: theme('colors.white.DEFAULT');
     --search-border-color-desktop: theme('colors.transparent');
     --search-border-color-mobile: var(--color-primary-ds);
+    --color-ticker-teaser-headline-underline : theme('colors.white.DEFAULT');
 }
 
 [data-theme='hessenschau'] {
@@ -194,6 +195,7 @@
     --color-ticker-teaser-label-byline: theme('colors.white.DEFAULT');
     --color-ticker-teaser-timeline-score: theme('colors.orange.spicyCarrot');
     --color-ticker-teaser-footer: theme('colors.white.DEFAULT');
+    --color-ticker-teaser-headline : theme('colors.white.DEFAULT');
 }
 
 [data-theme='hr-fernsehen'] {

package/src/stories/views/components/teaser/ticker/teaser_ticker_body.hbs

@@ -1,14 +1,14 @@
 <div class="h-full flex-col flex w-full{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}">
 
     {{#> components/teaser/components/teaser_header _css=(if this.isStandardTeaser "px-5" "px-5 md:px-0")}}
-        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link hover:text-toplineColor" }} 
+        {{#>components/base/link _link=this.link _css="block link-focus-white cy-teaser-link" }} 
             {{#with this.label}}
                 {{#> components/label/label_group}}
                     {{> components/label/label _type=this.type _text=(loca this.loca) }}
                     {{> components/label/label_byline _css="ml-2 text-tickerTeaserlabelByline" _text=../../../this.tickerTopic }}
                 {{/components/label/label_group}}
             {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
+            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto hover:underline decoration-2 decoration-tickerTeaserHeadlineUnderline"}}
                 {{> components/teaser/components/teaser_title _css="text-tickerTeaserHeadline" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
                 {{#if this.extendedTitle}}
                     {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}

package/tailwind.config.js

@@ -376,7 +376,8 @@ module.exports = {
                 'tickerTeaserHeadline': 'var(--color-ticker-teaser-headline,#000)',
                 'tickerTeaserlabelByline': 'var(--color-ticker-teaser-label-byline)',
                 'tickerTeaserTimelineScore': 'var(--color-ticker-teaser-timeline-score)',
-                'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)'
+                'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)',
+                'tickerTeaserHeadlineUnderline': 'var(--color-ticker-teaser-headline-underline)'
             },
         },
     },