hr-design-system-handlebars 1.119.6 → 1.120.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.120.0 (Mon Oct 13 2025)
+
+#### 🚀 Enhancement
+
+- Feature/dpe 3726 [#1306](https://github.com/mumprod/hr-design-system-handlebars/pull/1306) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.119.6 (Mon Oct 06 2025)
 
 #### ⚠️ Pushed to `main`

package/dist/assets/index.css

@@ -1981,6 +1981,9 @@ article #commentList {
 .max-w-\[480px\] {
   max-width: 480px;
 }
+.max-w-\[625px\] {
+  max-width: 625px;
+}
 .max-w-\[724px\] {
   max-width: 724px;
 }
@@ -3891,7 +3894,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1759769023057;
+  counter-reset: cnt1760361734193;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4352,7 +4355,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1759769023057 1;
+  counter-increment: cnt1760361734193 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4370,7 +4373,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1759769023057);
+  content: counter(cnt1760361734193);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/views/components/page/components/commentinfo.hbs

@@ -1,5 +1,5 @@
 {{#with this.userComments ~}}
-    <div class="{{#unless ../this.hasMoreThanOneAuthor}}{{#if ../this.authorImage.isImage}}ml-14 {{/if}}{{/unless}}mt-0.5 -mb-1">
+    <div class="mt-0.5">
         <span class="relative z-30 whitespace-nowrap">
             {{~#if (isStorybook)~}}
                 {{> components/page/components/commentlink.ssi }}               

package/dist/views/components/page/components/metadata_wrapper.hbs

@@ -0,0 +1,55 @@
+{{#if this.editorialData.hasAuthors}}
+    {{!-- Multiple Authors --}}
+    {{#if this.editorialData.hasMultipleAuthors}}      
+        {{#with this.editorialData.authorItems}}
+            <p class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+                {{#each this}}
+                    {{#if this.hasProfileLink}}
+                        {{this.from}}
+                        {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                            <span>{{../this.authorName~}}</span>{{~/components/base/link~}}
+                        {{~#with this.textAfterAuthor}} {{this}}{{/with~}}{{~this.delimiter}}
+                    {{else}}
+                        {{this.from}}
+                        {{#with this.textAfterAuthor}} {{this}}{{/with}}{{this.delimiter}}
+                    {{/if}}
+                {{/each}}
+            </p>
+        {{/with}}
+        {{~> @partial-block ~}}
+    {{else}}
+        <div class="flex items-center">
+            {{#with this.editorialData.firstAuthorItem}}
+                {{#if this.profileImage.isImage}}
+                    <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                        {{~> components/base/image/responsive_image this.profileImage
+                                _type="profile" 
+                                _variant="ticker" 
+                                _addClass=""
+                                _addClassImg="ar-1-1 rounded-full" 
+                                _noDelay=true ~}}
+                    </div>
+                {{/if}}
+            {{/with}}
+            <div class="text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
+                <div>
+                    {{#with this.editorialData}}
+                        {{#unless _hideFrom }}{{this.firstAuthorItem.from}}{{/unless}}
+                        {{#with this.firstAuthorItem}}
+                            {{#if this.hasProfileLink~}}
+                                {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                                    <span>{{../this.authorName~}}</span>{{~/components/base/link~}}
+                                    {{~#with this.textAfterAuthor}} {{this}}{{/with~}}{{~this.delimiter}}
+                            {{else}}
+                                {{~#with this.textAfterAuthor}}{{this}}{{/with~}}{{~this.delimiter}}
+                            {{/if}}
+                        {{/with}}
+                    {{/with}}
+                </div>
+                {{~> @partial-block ~}}
+            </div>
+        </div>
+    {{/if}}
+{{else}}
+    {{~> @partial-block ~}}
+{{/if}}

package/dist/views/components/page/components/metadatabox.hbs

@@ -2,19 +2,12 @@
     <aside class="hrds-metadata-box clear-both mt-4 border-y border-gray-scorpion [&+.hrds-shorttext]:mt-5 dark:border-text-dark sm:mt-5">
         <div class="flex clear-both w-full my-4 sm:my-4">
             <div class="self-center">
-                {{> components/page/components/author _hideFrom=false _isTicker=_isTicker }}
-
-                {{#if _showDate }}
-                    {{#if this.hasMoreThanOneAuthor}}
+                {{#> components/page/components/metadata_wrapper _hideFrom=false _isTicker=_isTicker }}
+                    {{#if ../../_showDate-adjust_context }}
                         {{> components/page/components/publicationdate _isTicker=_isTicker}}
-                    {{else}}
-                        {{#unless this.hasOneAuthor}}
-                            {{> components/page/components/publicationdate _isTicker=_isTicker}}
-                        {{/unless}}
                     {{/if}}
-                {{/if}}
-
-                {{> components/page/components/commentinfo }}
+                    {{> components/page/components/commentinfo }}
+                {{/components/page/components/metadata_wrapper }}
             </div>
             {{#unless _webview}}
                 {{> components/social_sharing/social_sharing_horizontal }}

package/dist/views/components/social_sharing/social_sharing_ticker_item.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
-        class="flex self-center justify-end ml-3 print:hidden grow"
+        class="flex justify-end ml-3 print:hidden grow"
         x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"

package/dist/views/components/ticker/ticker_item/content_footer_ticker_item.hbs

@@ -0,0 +1,32 @@
+<footer class="{{#if _css}}{{_css}} {{/if}}flex items-center clear-both w-full my-4 sm:my-4">
+    <div>
+        {{#> components/page/components/metadata_wrapper _hideFrom=false _isTicker=_isTicker }}
+            {{~#with this.programReferenceAlt~}}
+                {{~#if this.hasReference~}}
+                    <div class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+                        <span>{{~loca "broadcast"}}:</span>
+                        {{#if this.link}}
+                            {{#>components/base/link _link=this.link _css="text-link dark:text-link-dark hover:underline"~}}
+                                <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}
+                        {{else~}}
+                            <span>{{this.programLabel}}</span> 
+                        {{/if~}}
+                        {{~#if this.date~}}
+                            <span>, </span> 
+                            <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
+                                    class="{{#if _isArticle}}{{else}}{{/if}} ">
+                                {{#if this.displayWithTime}}
+                                    {{loca "date_simple_at" this.date.dateSeparatorTime}}
+                                {{else}}
+                                    {{this.date.date}}
+                                {{/if}}
+                            </time>
+                            
+                        {{/if}}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+        {{/components/page/components/metadata_wrapper }}
+    </div>
+    {{> components/social_sharing/social_sharing_ticker_item }}
+</footer>

package/dist/views_static/components/page/components/commentinfo.hbs

@@ -1,5 +1,5 @@
 {{#with this.userComments ~}}
-    <div class="{{#unless ../this.hasMoreThanOneAuthor}}{{#if ../this.authorImage.isImage}}ml-14 {{/if}}{{/unless}}mt-0.5 -mb-1">
+    <div class="mt-0.5">
         <span class="relative z-30 whitespace-nowrap">
             {{~#if (isStorybook)~}}
                 {{> components/page/components/commentlink.ssi }}               

package/dist/views_static/components/page/components/metadata_wrapper.hbs

@@ -0,0 +1,55 @@
+{{#if this.editorialData.hasAuthors}}
+    {{!-- Multiple Authors --}}
+    {{#if this.editorialData.hasMultipleAuthors}}      
+        {{#with this.editorialData.authorItems}}
+            <p class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+                {{#each this}}
+                    {{#if this.hasProfileLink}}
+                        {{this.from}}
+                        {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                            <span>{{../this.authorName~}}</span>{{~/components/base/link~}}
+                        {{~#with this.textAfterAuthor}} {{this}}{{/with~}}{{~this.delimiter}}
+                    {{else}}
+                        {{this.from}}
+                        {{#with this.textAfterAuthor}} {{this}}{{/with}}{{this.delimiter}}
+                    {{/if}}
+                {{/each}}
+            </p>
+        {{/with}}
+        {{~> @partial-block ~}}
+    {{else}}
+        <div class="flex items-center">
+            {{#with this.editorialData.firstAuthorItem}}
+                {{#if this.profileImage.isImage}}
+                    <div class="w-10 h-10 mr-4 basis-10 grow-0">
+                        {{~> components/base/image/responsive_image this.profileImage
+                                _type="profile" 
+                                _variant="ticker" 
+                                _addClass=""
+                                _addClassImg="ar-1-1 rounded-full" 
+                                _noDelay=true ~}}
+                    </div>
+                {{/if}}
+            {{/with}}
+            <div class="text-xs sm480:text-sm basis-0 grow font-headingSerif text-gray-scorpion dark:text-text-dark">
+                <div>
+                    {{#with this.editorialData}}
+                        {{#unless _hideFrom }}{{this.firstAuthorItem.from}}{{/unless}}
+                        {{#with this.firstAuthorItem}}
+                            {{#if this.hasProfileLink~}}
+                                {{#>components/base/link _link=this.link _css="hover:underline hover:!decoration-1 text-link dark:text-link-dark"}}
+                                    <span>{{../this.authorName~}}</span>{{~/components/base/link~}}
+                                    {{~#with this.textAfterAuthor}} {{this}}{{/with~}}{{~this.delimiter}}
+                            {{else}}
+                                {{~#with this.textAfterAuthor}}{{this}}{{/with~}}{{~this.delimiter}}
+                            {{/if}}
+                        {{/with}}
+                    {{/with}}
+                </div>
+                {{~> @partial-block ~}}
+            </div>
+        </div>
+    {{/if}}
+{{else}}
+    {{~> @partial-block ~}}
+{{/if}}

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -2,19 +2,12 @@
     <aside class="hrds-metadata-box clear-both mt-4 border-y border-gray-scorpion [&+.hrds-shorttext]:mt-5 dark:border-text-dark sm:mt-5">
         <div class="flex clear-both w-full my-4 sm:my-4">
             <div class="self-center">
-                {{> components/page/components/author _hideFrom=false _isTicker=_isTicker }}
-
-                {{#if _showDate }}
-                    {{#if this.hasMoreThanOneAuthor}}
+                {{#> components/page/components/metadata_wrapper _hideFrom=false _isTicker=_isTicker }}
+                    {{#if _showDate }}
                         {{> components/page/components/publicationdate _isTicker=_isTicker}}
-                    {{else}}
-                        {{#unless this.hasOneAuthor}}
-                            {{> components/page/components/publicationdate _isTicker=_isTicker}}
-                        {{/unless}}
                     {{/if}}
-                {{/if}}
-
-                {{> components/page/components/commentinfo }}
+                    {{> components/page/components/commentinfo }}
+                {{/components/page/components/metadata_wrapper }}
             </div>
             {{#unless _webview}}
                 {{> components/social_sharing/social_sharing_horizontal }}

package/dist/views_static/components/social_sharing/social_sharing_ticker_item.hbs

@@ -1,7 +1,7 @@
 {{~#with this.socialSharing ~}}
     <div 
         x-data="socialSharingHandler('tickerItem{{nextRandom}}')"
-        class="flex self-center justify-end ml-3 print:hidden grow"
+        class="flex justify-end ml-3 print:hidden grow"
         x-init="initBrowserDetection();"
         x-on:resize.window="$store.sharingIsOpen.ticker = false"       
         x-on:keydown.escape.prevent.stop="close()"

package/dist/views_static/components/ticker/ticker_item/content_footer_ticker_item.hbs

@@ -0,0 +1,32 @@
+<footer class="{{#if _css}}{{_css}} {{/if}}flex items-center clear-both w-full my-4 sm:my-4">
+    <div>
+        {{#> components/page/components/metadata_wrapper _hideFrom=false _isTicker=_isTicker }}
+            {{~#with this.programReferenceAlt~}}
+                {{~#if this.hasReference~}}
+                    <div class="text-xs sm480:text-sm font-headingSerif text-gray-scorpion dark:text-text-dark">
+                        <span>{{~loca "broadcast"}}:</span>
+                        {{#if this.link}}
+                            {{#>components/base/link _link=this.link _css="text-link dark:text-link-dark hover:underline"~}}
+                                <span>{{~ this.programLabel ~}}</span>{{/components/base/link~}}
+                        {{else~}}
+                            <span>{{this.programLabel}}</span> 
+                        {{/if~}}
+                        {{~#if this.date~}}
+                            <span>, </span> 
+                            <time datetime="{{#if this.displayWithTime}}{{this.date.htmlDateTime}}{{else}}{{this.date.date}}{{/if}}"
+                                    class="{{#if _isArticle}}{{else}}{{/if}} ">
+                                {{#if this.displayWithTime}}
+                                    {{loca "date_simple_at" this.date.dateSeparatorTime}}
+                                {{else}}
+                                    {{this.date.date}}
+                                {{/if}}
+                            </time>
+                            
+                        {{/if}}
+                    </div>
+                {{~/if~}}
+            {{~/with~}}
+        {{/components/page/components/metadata_wrapper }}
+    </div>
+    {{> components/social_sharing/social_sharing_ticker_item }}
+</footer>

package/package.json

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

package/src/assets/fixtures/content/content_footer/content_footer.json

@@ -10,7 +10,8 @@
     "_hasDwellTime": true,
     "_isArticle": true,
     "_copyright": "All rights reserved",
-    "_source": ["DPA","Wikipedia"],
+    "_source": ["DPA", "Wikipedia"],
+    "_author": "Anna Magel",
     "_author": "Anna Magel",
     "_isArchiveContent": true,
     "editorialStaffItems": [
@@ -33,16 +34,17 @@
             "delimiter": "",
             "link": {
                 "url": "/author-url",
-                "isTargetBlank": false   
-            }            
-        }],
-    "programReferenceAlt":{
-         "hasReference": true,
-         "programLabel": "Hessenschau",
-         "link": {
+                "isTargetBlank": false
+            }
+        }
+    ],
+    "programReferenceAlt": {
+        "hasReference": true,
+        "programLabel": "Hessenschau",
+        "link": {
             "url": "/programReference-url",
-            "isTargetBlank": false   
-            },
+            "isTargetBlank": false
+        },
         "name": "Testtitel",
         "displayWithTime": true,
         "date": {
@@ -51,6 +53,6 @@
             "date": "31.10.22",
             "time": "19:30",
             "dateSeparatorTime": "31.10.22, 19:30"
-        }      
+        }
     }
-}
+}

package/src/assets/fixtures/page/metadatabox.inc.json

@@ -1,7 +1,8 @@
 {
     "default": {
         "_showDate": true,
-        "hasMoreThanOneAuthor": false,
+        "hasAuthors": false,
+        "hasMultipleAuthors": false,
         "hasDwellTime": true,
         "documentModificationDate": {
             "isModificationDate": false,
@@ -19,23 +20,34 @@
     },
     "with_author": {
         "_showDate": true,
-        "hasOneAuthor": true,
-        "hasMoreThanOneAuthor": false,
+
         "hasDwellTime": true,
-        "authorTitle": "Steffen Rebhahn",
-        "textAfterAuthor": "(Redaktion hessenschau.de)",
-        "authorImage": {
-            "@->jsoninclude": "page/story/story_images.inc.json",
-            "@->contentpath": "author",
-            "@->replaceToken": [
-                {
-                    "@->token": "image",
-                    "@->value": "mitarbeiter-portraet-steffen-rebhahn-106"
+        "editorialData": {
+            "hasOneAuthor": true,
+            "hasAuthors": true,
+            "hasMultipleAuthors": false,
+            "firstAuthorItem": {
+                "hasProfileLink": true,
+                "from": "Von",
+                "authorName": "Steffen Rebhahn",
+                "delimiter": "",
+                "link": {
+                    "url": "/author-url",
+                    "isTargetBlank": false
+                },
+                "textAfterAuthor": "(Redaktion hessenschau.de)",
+                "profileImage": {
+                    "@->jsoninclude": "page/story/story_images.inc.json",
+                    "@->contentpath": "author",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "mitarbeiter-portraet-steffen-rebhahn-106"
+                        }
+                    ]
                 }
-            ]
+            }
         },
-        "authorUrl": "/author-url",
-        "webviewAuthorUrl": "webview-author-url",
         "documentModificationDate": {
             "isModificationDate": false,
             "isPublicationDate": true,
@@ -50,10 +62,21 @@
             "copyToClipboardLink": "/copyToClipboard-url"
         }
     },
-    "with_more_authors": {
+    "with_guest_author": {
         "_showDate": true,
-        "hasMoreThanOneAuthor": true,
+
         "hasDwellTime": true,
+        "editorialData": {
+            "hasOneAuthor": true,
+            "hasAuthors": true,
+            "hasMultipleAuthors": false,
+            "firstAuthorItem": {
+                "hasProfileLink": false,
+                "from": "Von",
+                "delimiter": "",
+                "textAfterAuthor": "Gast Autor"
+            }
+        },
         "documentModificationDate": {
             "isModificationDate": false,
             "isPublicationDate": true,
@@ -61,30 +84,54 @@
             "date": "15.02.24",
             "time": "19:30"
         },
-        "authorItems": [
-            {
-                "hasProfileLink": false,
-                "from": "Von",
-                "textAfterAuthor": "Horst Schlämmer",
-                "delimiter": ", "
-            },
-            {
-                "hasProfileLink": false,
-                "from": "",
-                "textAfterAuthor": "Karl Dall",
-                "delimiter": " und "
-            },
-            {
-                "hasProfileLink": true,
-                "from": "",
-                "authorName": "Peter Lustig",
-                "delimiter": "",
-                "link": {
-                    "url": "/author-url",
-                    "isTargetBlank": false
+        "socialSharing": {
+            "facebookLink": "/facebookLink-url",
+            "whatsappLink": "/whatsappLink-url",
+            "mailtoLink": "/mailtoLink-url",
+            "copyToClipboardLink": "/copyToClipboard-url"
+        }
+    },
+    "with_more_authors": {
+        "_showDate": true,
+        "hasAuthors": true,
+        "hasMultipleAuthors": true,
+        "hasDwellTime": true,
+        "editorialData": {
+            "hasOneAuthor": false,
+            "hasAuthors": true,
+            "hasMultipleAuthors": true,
+            "authorItems": [
+                {
+                    "hasProfileLink": false,
+                    "from": "Von",
+                    "textAfterAuthor": "Horst Schlämmer",
+                    "delimiter": ", "
+                },
+                {
+                    "hasProfileLink": false,
+                    "from": "",
+                    "textAfterAuthor": "Karl Dall",
+                    "delimiter": " und "
+                },
+                {
+                    "hasProfileLink": true,
+                    "from": "",
+                    "authorName": "Peter Lustig",
+                    "delimiter": "",
+                    "link": {
+                        "url": "/author-url",
+                        "isTargetBlank": false
+                    }
                 }
-            }
-        ],
+            ]
+        },
+        "documentModificationDate": {
+            "isModificationDate": false,
+            "isPublicationDate": true,
+            "htmlDateTime": "2024-02-15T19:30+0200",
+            "date": "15.02.24",
+            "time": "19:30"
+        },
         "socialSharing": {
             "facebookLink": "/facebookLink-url",
             "whatsappLink": "/whatsappLink-url",

package/src/assets/fixtures/page/metadatabox.json

@@ -35,6 +35,15 @@
             "@->contentpath": "with_author"
         }
     },
+    "metadatabox_with_one_guest_author": {
+        "config": {
+            "css": "w-[724px] mx-auto"
+        },
+        "args": {
+            "@->jsoninclude": "page/metadatabox.inc.json",
+            "@->contentpath": "with_guest_author"
+        }
+    },
     "metadatabox_with_one_author_and_comments": {
         "config": {
             "css": "w-[724px] mx-auto"
@@ -59,7 +68,7 @@
             "@->contentpath": "with_author",
             "@->overrides": [
                 {
-                    "@->contentpath": "authorImage",
+                    "@->contentpath": "editorialData.firstAuthorItem.profileImage",
                     "@->value": {}
                 }
             ]