hr-design-system-handlebars 0.102.0 → 0.103.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v0.103.0 (Fri Dec 09 2022)
+
+#### 🚀 Enhancement
+
+- handling long ClusterTeaser Title overflow [#426](https://github.com/mumprod/hr-design-system-handlebars/pull/426) (saad.elbaciri@hr.de [@vascoeduardo](https://github.com/vascoeduardo) [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 3
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
 # v0.102.0 (Fri Dec 09 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -2208,7 +2208,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1670589689556;
+  counter-reset: cnt1670590587512;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2216,6 +2216,10 @@ video {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+.hyphens-auto {
+  -webkit-hyphens: auto;
+          hyphens: auto;
+}
 .placeholder-text-xs::-webkit-input-placeholder {
   font-size: 0.75rem;
   line-height: 1.063rem;
@@ -2436,7 +2440,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1670589689556 1;
+  counter-increment: cnt1670590587512 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2452,7 +2456,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1670589689556);
+  content: counter(cnt1670590587512);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3205,6 +3209,9 @@ video {
     right: 0;
     bottom: 0;
 }
+.overflow-anywhere{
+    word-wrap: anywhere;
+}
 .placeholder\:text-grey-dark::-webkit-input-placeholder {
   --tw-text-opacity: 1;
   color: rgba(112, 112, 112, var(--tw-text-opacity));
@@ -4565,3 +4572,4 @@ video {
     border-left-width: 1px;
   }
 }
+

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

@@ -7,7 +7,7 @@
                     </span>
                 {{/if}}
                 {{#if this.title}}
-                    <span class="text-lg md:text-2xl border-clusterTeaserHeadline font-title uppercase{{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}{{#if this.hideTitle}} sr-only{{/if}}">{{this.title}}</span>
+                    <span class="overflow-anywhere hyphens-auto text-lg md:text-2xl border-clusterTeaserHeadline font-title uppercase{{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}{{#if this.hideTitle}} sr-only{{/if}}">{{this.title}}</span>
                 {{/if}}
             </h2>
             {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} 

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "0.102.0",
+    "version": "0.103.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",
@@ -83,6 +83,7 @@
         "storybook": "^6.5.9",
         "storybook-conditional-toolbar-selector": "^1.0.3",
         "tailwindcss": "^3.0.23",
+        "tailwindcss-hyphens": "^0.1.0",
         "tailwindcss-important": "^1.0.0",
         "underscore": "^1.13.2"
     },

package/src/assets/tailwind.css

@@ -763,3 +763,7 @@
     right: 0;
     bottom: 0;
 }
+.overflow-anywhere{
+    overflow-wrap: anywhere;
+}
+

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

@@ -7,7 +7,7 @@
                     </span>
                 {{/if}}
                 {{#if this.title}}
-                    <span class="text-lg md:text-2xl border-clusterTeaserHeadline font-title uppercase{{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}{{#if this.hideTitle}} sr-only{{/if}}">{{this.title}}</span>
+                    <span class="overflow-anywhere hyphens-auto text-lg md:text-2xl border-clusterTeaserHeadline font-title uppercase{{#if this.teaserLogo}} pl-3 ml-3 border-l-2 border-solid {{/if}}{{#if this.hideTitle}} sr-only{{/if}}">{{this.title}}</span>
                 {{/if}}
             </h2>
             {{> components/teaser/cluster/teaser_cluster_list _ordered=this.isOrdered}} 

package/tailwind.config.js

@@ -338,5 +338,6 @@ module.exports = {
         },
         require('tailwindcss-counter')(),
         require('@tailwindcss/line-clamp'),
+        require("tailwindcss-hyphens"),
     ],
 }