hr-design-system-handlebars 1.75.6 → 1.77.0

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

@@ -24,7 +24,6 @@
         }
     }
 
-
     .ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -79,6 +78,24 @@
         }
     }
 
+    .ar-4-1 {
+        aspect-ratio: 4 / 1;
+    }
+
+    @supports not (aspect-ratio: 4 / 1) {
+        .ar-4-1::before {
+            float: left;
+            padding-top: calc(1 / 4 * 100%);
+            content: '';
+        }
+
+        .ar-4-1::after {
+            display: block;
+            content: '';
+            clear: both;
+        }
+    }
+
     .ar-1-1 {
         aspect-ratio: 1 / 1;
     }
@@ -179,16 +196,19 @@
         --narrow-max-width: calc(var(--breakpoint-md) - (var(--mobile-padding) * 2));
         --content-max-width: 940px;
         --breakout-size: calc((var(--content-max-width) - var(--narrow-max-width)) / 2);
-        
-        grid-template-columns: 
-        [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding)) 
-        [content-start] minmax(0, var(--breakout-size)) 
-        [narrow-start] min(100% - (var(--mobile-padding) * 2),var(--narrow-max-width)) [narrow-end] 
-        minmax(0, var(--breakout-size)) [content-end] 
-        minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end]; 
+
+        grid-template-columns:
+            [full-width-start] minmax(var(--mobile-padding), var(--desktop-padding))
+            [content-start] minmax(0, var(--breakout-size))
+            [narrow-start] min(
+                100% - (var(--mobile-padding) * 2),
+                var(--narrow-max-width)
+            ) [narrow-end]
+            minmax(0, var(--breakout-size)) [content-end]
+            minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
     }
-    .grid-article > :not(.article-breakout, .article-full-width, .sticky){
+    .grid-article > :not(.article-breakout, .article-full-width, .sticky) {
         grid-column: narrow;
     }
     .article-breakout {
@@ -200,37 +220,37 @@
     .article-narrow {
         grid-column: narrow;
     }
-    .copytextWrapper > :not(.article-breakout, .article-full-width){
+    .copytextWrapper > :not(.article-breakout, .article-full-width) {
         grid-column: narrow;
     }
 
     .grid-content {
         grid-template-areas:
-    "head"
-    "main "
-    "aside";
+            'head'
+            'main '
+            'aside';
         grid-template-columns: 100%;
     }
 
-    @media only screen and (min-width: 600px){
+    @media only screen and (min-width: 600px) {
         .grid-content {
             grid-template-areas:
-    "head head"
-    "main  aside";
+                'head head'
+                'main  aside';
 
             grid-template-columns: 3fr 1fr;
         }
     }
 
-    .head{
+    .head {
         grid-area: head;
     }
 
-    .main{
+    .main {
         grid-area: main;
     }
 
-    .aside{
+    .aside {
         grid-area: aside;
     }
 
@@ -280,23 +300,22 @@
     /*! ****************************/
     /*! DataPolicy stuff           */
     /*! ****************************/
-    .toggleSwitch-checkbox:checked+.toggleSwitch-label {
-        @apply after:left-[27px]
+    .toggleSwitch-checkbox:checked + .toggleSwitch-label {
+        @apply after:left-[27px];
     }
 
-    .toggleSwitch-checkbox:checked+.toggleSwitch-label {
+    .toggleSwitch-checkbox:checked + .toggleSwitch-label {
         @apply bg-toggle-confirmation;
     }
 
-    .toggleSwitch-checkbox:focus+.toggleSwitch-label { 
+    .toggleSwitch-checkbox:focus + .toggleSwitch-label {
         @apply outline-none shadow-teaser-focus shadow-focus-state;
     }
-    
+
     .toggleSwitch-label {
-        @apply after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[21px] after:h-[21px] after:bg-white after:rounded-2xl after:transition-all after:duration-300 
+        @apply after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:w-[21px] after:h-[21px] after:bg-white after:rounded-2xl after:transition-all after:duration-300;
     }
 
-
     /*! ****************************/
     /*! text-shadow                */
     /*! ****************************/
@@ -379,7 +398,6 @@
         content: attr(data-prop-loading);
     }
 
-  
     @responsive {
         .brand-logo-size-lg {
             padding-top: var(--logo-padding-top-lg);
@@ -394,7 +412,7 @@
             padding-bottom: var(--logo-padding-bottom);
         }
     }
-    
+
     /*! ****************************/
     /*! Search-Box-border          */
     /*! ****************************/
@@ -410,7 +428,7 @@
     /*! ***********************************/
     /*! restrict number of li-elements    */
     /*! **********************************/
-    ul.restrictedToTwo li:nth-of-type(1n+3) {
+    ul.restrictedToTwo li:nth-of-type(1n + 3) {
         display: none;
     }
 
@@ -418,7 +436,7 @@
         padding-bottom: 0;
     }
 
-    ul.restrictedToTwo li:nth-of-type(1n+2) .timelineBorder {
+    ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
         display: none;
-    }    
+    }
 }

package/src/assets/fixtures/audio/audios.inc.json

@@ -54,7 +54,65 @@
             "pluginData": {},
             "geoBlocked": false
         },
-        "playerId": "2563",
+        "playerId": "2565",
+        "type": "audioOndemand",
+        "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css",
+        "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",
+        "isAutoplay": true,
+        "teaserSize": "100",
+        "realTeaserSize": "100"
+    },
+    "audio-2": {
+        "playerConfig": {
+            "generic": {
+                "isAutoplay": true,
+                "imageTemplateConfig": {
+                    "size": [{ "minWidth": 0, "value": "__xsmall" }]
+                }
+            },
+            "web": {
+                "baseUrl": "./vendor/ardplayer/",
+                "isForcedAutoplay": true,
+                "isForcedVideoView": true
+            },
+            "pluginData": {
+                "trackingAti@all": {
+                    "isEnabled": false
+                },
+                "trackingAgf@all": {
+                    "isEnabled": false
+                }
+            }
+        },
+        "mediaCollection": {
+            "streams": [
+                {
+                    "kind": "main",
+                    "isAudioOnly": true,
+                    "media": [
+                        {
+                            "url": "https://hr-a.akamaihd.net/audio/hs/2024_06/240621093838_hsr_strongman_Poertner_Ost.mp3",
+                            "mimeType": "audio/mp3",
+                            "audios": [{ "kind": "standard", "languageCode": "de" }]
+                        }
+                    ]
+                }
+            ],
+            "meta": {
+                "durationSeconds": 39,
+                "images": [
+                    {
+                        "kind": "preview",
+                        "url": "images/strongman-100_v-1to1{size}.jpg"
+                    }
+                ],
+                "title": "Strongman-WM in Fulda",
+                "synopsis": "Stromgman-WM in Fulda zieht Kraftsportler aus aller Welt an."
+            },
+            "pluginData": {},
+            "geoBlocked": false
+        },
+        "playerId": "2565",
         "type": "audioOndemand",
         "cssUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.0b83d962.css",
         "jsUrl": "./vendor/ardplayer/ardplayer-hr-6.8.3.82603554.js",

package/src/assets/fixtures/content/copytext/copytext_audio.json

@@ -0,0 +1,194 @@
+{
+    "copytextParagraph": [
+        {
+            "isHeadline": true,
+            "text": "Copytext mit Audio"
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioOnDemand": true,
+                "showFullSize": {
+                    "isTrue": true
+                },
+                "label": {
+                    "type": "audio",
+                    "loca": "label_audio",
+                    "byline": {
+                        "bylineText": "00:39 Min."
+                    }
+                },
+                "copyright": "hr",
+                "audioAuthor": "Michael Pörtner",
+                "showAirdate": true,
+                "airdateDate": {
+                    "htmlDateTime": "2024-06-21T14:30+0200",
+                    "htmlDate": "21.06.2024",
+                    "date": "21.06.24",
+                    "dateSeparatorTime": "21.06.24, 14:30"
+                },
+                "toModel": {
+                    "audioElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-2"
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-2",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum hessenschau.de Audio",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zur Audio-Einzelseite",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioOnDemand": true,
+                "showFullSize": {
+                    "isTrue": false
+                },
+                "label": {
+                    "type": "audio",
+                    "loca": "label_audio",
+                    "byline": {
+                        "bylineText": "00:20 Min."
+                    }
+                },
+                "audioAuthor": "Karsten Hufer",
+                "showAirdate": true,
+                "airdateDate": {
+                    "htmlDateTime": "2022-10-31T19:30+0200",
+                    "htmlDate": "31.10.2022",
+                    "date": "31.10.22",
+                    "dateSeparatorTime": "31.10.22, 19:30"
+                },
+                "toModel": {
+                    "audioElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-1",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2564"
+                                }
+                            ]
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-1",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2564"
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum Audio",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zur Audio-Einzelseite",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        }
+    ]
+}

package/src/assets/fixtures/content/copytext/copytext_audio_livestream.json

@@ -0,0 +1,192 @@
+{
+    "copytextParagraph": [
+        {
+            "isHeadline": true,
+            "text": "Copytext mit Audio-Livestream"
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioEventLivestream": true,
+                "showFullSize": {
+                    "isTrue": true
+                },
+                "label": {
+                    "type": "livestream",
+                    "loca": "label_audio_event_livestream",
+                    "byline": {
+                        "bylineText": "Startet am 25.06.24 um 14:00 Uhr."
+                    }
+                },
+                "copyright": "hr",
+                "showAirdate": false,
+                "airdateDate": {
+                    "htmlDateTime": "2024-06-25T14:00+0200",
+                    "htmlDate": "25.06.2024",
+                    "date": "25.06.24",
+                    "dateSeparatorTime": "25.06.24, 14:00"
+                },
+                "toModel": {
+                    "audioLivestreamElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream"
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum hessenschau.de Audio-Livestream",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zum Audio-Livestream",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isAudio": true,
+                "isAudioEventLivestream": true,
+                "showFullSize": {
+                    "isTrue": false
+                },
+                "label": {
+                    "type": "livestream",
+                    "loca": "label_audio_event_livestream",
+                    "byline": {
+                        "bylineText": "Jetzt Live"
+                    }
+                },
+                "showAirdate": false,
+                "airdateDate": {
+                    "htmlDateTime": "2024-06-25T08:30+0200",
+                    "htmlDate": "25.06.2024",
+                    "date": "25.06.24",
+                    "dateSeparatorTime": "25.06.24, 08:30"
+                },
+                "toModel": {
+                    "audioLivestreamElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2564"
+                                }
+                            ]
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "audio/audios.inc.json",
+                            "@->contentpath": "audio-event-livestream",
+                            "@->overrides": [
+                                {
+                                    "@->contentpath": "isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.generic.isAutoplay",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerConfig.web.isForcedVideoView",
+                                    "@->value": false
+                                },
+                                {
+                                    "@->contentpath": "playerId",
+                                    "@->value": "2564"
+                                }
+                            ]
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/audioseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum Audio-Livestream",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zum Audio-Livestream",
+                        "hasIcon": false,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        }
+    ]
+}