hr-design-system-handlebars 1.61.0 → 1.61.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v1.61.1 (Tue Apr 02 2024)
+
+#### 🐛 Bug Fix
+
+- Dpe 2952 [#888](https://github.com/mumprod/hr-design-system-handlebars/pull/888) (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))
+
+---
+
 # v1.61.0 (Mon Mar 25 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3326,7 +3326,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1711384053639;
+  counter-reset: cnt1712061076252;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3449,6 +3449,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .article-full-width {
         grid-column: full-width;
     }
+.copytextWrapper > :not(.article-breakout):not(.article-full-width){
+        grid-column: narrow;
+    }
 .grid-content {
         grid-template-areas:
     "head"
@@ -3632,7 +3635,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1711384053639 1;
+  counter-increment: cnt1712061076252 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3648,7 +3651,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1711384053639);
+  content: counter(cnt1712061076252);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5432,10 +5435,6 @@ article.indexTextDS .indexTextHighlighted .link {
 }
 @media (min-width: 480px) {
 
-  .sm480\:float-left {
-    float: left;
-  }
-
   .sm480\:mx-10 {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
@@ -5487,10 +5486,6 @@ article.indexTextDS .indexTextHighlighted .link {
     height: 2rem;
   }
 
-  .sm480\:w-1\/2 {
-    width: 50%;
-  }
-
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
@@ -5919,6 +5914,9 @@ article.indexTextDS .indexTextHighlighted .link {
             clear: both;
         }
     }
+    .sm\:article-narrow {
+        grid-column: narrow;
+    }
 
     .sm\:col-main {
         grid-column: main;

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

@@ -1,16 +1,16 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -19,16 +19,16 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

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

@@ -1,4 +1,4 @@
-<div>
+<div class="contents sm:block copytextWrapper">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{> components/content/copytext/components/headline }}

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

@@ -1,16 +1,16 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -19,16 +19,16 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

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

@@ -1,4 +1,4 @@
-<div>
+<div class="contents sm:block copytextWrapper">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{> components/content/copytext/components/headline }}

package/package.json

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

package/src/assets/css/custom-utilities.css

@@ -163,7 +163,12 @@
     .article-full-width {
         grid-column: full-width;
     }
-
+    .article-narrow {
+        grid-column: narrow;
+    }
+    .copytextWrapper > :not(.article-breakout, .article-full-width){
+        grid-column: narrow;
+    }
     .grid-content {
         grid-template-areas:
     "head"

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

@@ -1,16 +1,16 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
                 _noAr="true"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext-portrait"
                 _noAr="true"
@@ -19,16 +19,16 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 clear-both"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 clear-both article-full-width sm:article-narrow"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
                 _pictureAddClass="ar-16-9"
                 _isWebview=../../_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="my-6 sm480:my-7 sm480:mr-5 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
-                _cssClassCaption="mx-5 md:mx-0"
+                _cssClass="my-6 sm480:my-7 article-full-width sm:article-narrow sm:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="copytext"
                 _pictureAddClass="ar-16-9"

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

@@ -1,4 +1,4 @@
-<div>
+<div class="contents sm:block copytextWrapper">
     {{#each this.copytextParagraph }}
         {{#if this.isHeadline}}
             {{> components/content/copytext/components/headline }}

package/src/stories/views/components/content/copytext/copytext.stories.js

@@ -20,11 +20,14 @@ export default {
     title: 'Komponenten/Content/Copytext',
     decorators: [
         (Story) => {
-            return `<div class="max-w-[724px] mx-auto">  
-             ${Story()} 
-             </div>`
+            return `<div class="grid grid-page">
+                        <div class="grid bg-white grid-article">
+                            ${Story()} 
+                        </div>
+                    </div>`
         },
     ],
+    parameters:{layout:'fullscreen'}
 }
 
 export const Default = {