hr-design-system-handlebars 0.101.0 → 0.103.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# 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
+
+- Truncate long geotag with Ellipsis [#425](https://github.com/mumprod/hr-design-system-handlebars/pull/425) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v0.101.0 (Thu Dec 08 2022)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1041,6 +1041,9 @@ video {
 .w-5 {
   width: 1.25rem;
 }
+.w-3\/5 {
+  width: 60%;
+}
 .w-6 {
   width: 1.5rem;
 }
@@ -1095,6 +1098,11 @@ video {
   width: -moz-fit-content !important;
   width: fit-content !important;
 }
+.max-w-min {
+  max-width: -webkit-min-content;
+  max-width: -moz-min-content;
+  max-width: min-content;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -2200,7 +2208,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1670537513499;
+  counter-reset: cnt1670590587512;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2208,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;
@@ -2428,7 +2440,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1670537513499 1;
+  counter-increment: cnt1670590587512 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2444,7 +2456,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1670537513499);
+  content: counter(cnt1670590587512);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3197,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));
@@ -4557,3 +4572,4 @@ video {
     border-left-width: 1px;
   }
 }
+

package/dist/views/components/geoTag/geoTag.hbs

@@ -1,5 +1,5 @@
 <span
-    class='z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
     aria-hidden="true"
 >
     {{_text}}

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.101.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/geoTag/geoTag.hbs

@@ -1,5 +1,5 @@
 <span
-    class='z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
+    class='w-3/5 max-w-min truncate z-10 pointer-events-none inline-block absolute bottom-0 left-0 {{~inline-switch _teaserSize '["33"]' '[" mx-5 my-5 md:mx-4 md:my-4"," mx-5 my-5"]'}} rounded px-1.5 pt-px tracking-wide text-black text-base leading-5.5 font-heading bg-geoTag'
     aria-hidden="true"
 >
     {{_text}}

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"),
     ],
 }