hr-design-system-handlebars 1.82.11 → 1.83.0

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

@@ -60,6 +60,90 @@
                 ]
             }
         },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Podcast Episode in halber Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "isParagraph": true,
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teasers.inc.json",
+                "@->contentpath": "teaser_podcast_episode.logicItem.includeModel",
+                "@->extends": {
+                    "isPodcastEpisode": true,
+                    "showFullSize": {
+                        "isTrue": false
+                    }
+                },
+                "@->overrides": [
+                    {
+                        "@->contentpath": "teaserSize",
+                        "@->value": "50"
+                    },
+                    {
+                        "@->contentpath": "realTeaserSize",
+                        "@->value": "50"
+                    }
+                ]
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Podcast Episode in voller Breite über Bild in halber Breite"
+        },
+        {
+            "isParagraph": true,
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teasers.inc.json",
+                "@->contentpath": "teaser_podcast_episode.logicItem.includeModel",
+                "@->extends": {
+                    "isPodcastEpisode": true,
+                    "showFullSize": {
+                        "isTrue": true
+                    }
+                },
+                "@->overrides": [
+                    {
+                        "@->contentpath": "teaserSize",
+                        "@->value": "50"
+                    },
+                    {
+                        "@->contentpath": "realTeaserSize",
+                        "@->value": "50"
+                    }
+                ]
+            }
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_50",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         }

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

@@ -8,11 +8,11 @@
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
         {
-            "isParagraph": true,    
+            "isParagraph": true,
             "paragraphTeaserItem": {
                 "isStory": true,
                 "toModel": {
-                    "baseTeaserDS": {                            
+                    "baseTeaserDS": {
                         "@->jsoninclude": "teaser/teasers.inc.json",
                         "@->contentpath": "teaser.logicItem.includeModel",
                         "@->extends": {
@@ -54,11 +54,15 @@
                                     ]
                                 }
                             }
-                        ]                            
+                        ]
                     }
                 }
             }
         },
+        {
+            "isHeadline": true,
+            "text": "Zwischenüberschrift unter Posterteaser"
+        },
         {
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
@@ -70,7 +74,78 @@
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
         {
-            "isParagraph": true,                
+            "isParagraph": true,
+            "paragraphTeaserItem": {
+                "isStory": true,
+                "toModel": {
+                    "baseTeaserDS": {
+                        "@->jsoninclude": "teaser/teasers.inc.json",
+                        "@->contentpath": "teaser.logicItem.includeModel",
+                        "@->extends": {
+                            "showFullSize": {
+                                "isTrue": false
+                            }
+                        },
+                        "@->overrides": [
+                            {
+                                "@->contentpath": "title",
+                                "@->value": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen Abgeschobene Geschwister aus Syrien zurück in Wolfhagen"
+                            },
+                            {
+                                "@->contentpath": "teaserType",
+                                "@->value": "poster"
+                            },
+                            {
+                                "@->contentpath": "teaserSize",
+                                "@->value": "50"
+                            },
+                            {
+                                "@->contentpath": "realTeaserSize",
+                                "@->value": "50"
+                            },
+                            {
+                                "@->contentpath": "link.readMoreText.readMoreLong",
+                                "@->value": "Zum Artikel"
+                            },
+                            {
+                                "@->contentpath": "teaserImage",
+                                "@->value": {
+                                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                                    "@->contentpath": "teaser_poster_50",
+                                    "@->replaceToken": [
+                                        {
+                                            "@->token": "image",
+                                            "@->value": "rueckkehr-nach-abschiebung-102"
+                                        }
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "isHeadline": true,
+            "text": "Posterteaser in halber Breite unter Bild"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
+        {
+            "isParagraph": true,
             "paragraphTeaserItem": {
                 "isStory": true,
                 "toModel": {
@@ -116,7 +191,7 @@
                                     ]
                                 }
                             }
-                        ]                            
+                        ]
                     }
                 }
             }
@@ -132,7 +207,7 @@
             "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
         },
         {
-            "isParagraph": true,                
+            "isParagraph": true,
             "paragraphTeaserItem": {
                 "isStory": true,
                 "toModel": {
@@ -181,7 +256,7 @@
                                     ]
                                 }
                             }
-                        ]                            
+                        ]
                     }
                 }
             }

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

@@ -76,9 +76,170 @@
                 }
             }
         },
+        {
+            "isHeadline": true,
+            "text": "Zwischenüberschrift unter Video"
+        },
+        {
+            "paragraphBoxItem": {
+                "isVideo": true,
+                "isVideoOnDemand": true,
+                "showFullSize": {
+                    "isTrue": true
+                },
+                "label": {
+                    "type": "video",
+                    "loca": "label_video",
+                    "byline": {
+                        "bylineText": "03:20 Min."
+                    }
+                },
+                "copyright": "hessenschau",
+                "showAirdate": true,
+                "airdateDate": {
+                    "htmlDateTime": "2022-10-31T19:30+0200",
+                    "htmlDate": "31.10.2022",
+                    "date": "31.10.22",
+                    "dateSeparatorTime": "31.10.22, 19:30"
+                },
+                "toModel": {
+                    "videoElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-1"
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-1"
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/videoseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum hr3.de Video",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": true,
+                        "readMore": "zur hr3.de Video-Einzelseite",
+                        "hasIcon": true,
+                        "iconName": "extern"
+                    }
+                },
+                "teaseritem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                },
+
+                "teaserImage": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "lehrerin-ukraine-104"
+                        }
+                    ]
+                }
+            }
+        },
+        {
+            "@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
+        },
+        {
+            "paragraphBoxItem": {
+                "isVideo": true,
+                "isVideoOnDemand": true,
+                "showFullSize": {
+                    "isTrue": false
+                },
+                "label": {
+                    "type": "video",
+                    "loca": "label_video",
+                    "byline": {
+                        "bylineText": "03:20 Min."
+                    }
+                },
+                "copyright": "hessenschau",
+                "showAirdate": true,
+                "airdateDate": {
+                    "htmlDateTime": "2022-10-31T19:30+0200",
+                    "htmlDate": "31.10.2022",
+                    "date": "31.10.22",
+                    "dateSeparatorTime": "31.10.22, 19:30"
+                },
+                "toModel": {
+                    "videoElement": {
+                        "ardPlayerConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-2"
+                        },
+                        "ardPlayerJsonConfig": {
+                            "@->jsoninclude": "video/videos.inc.json",
+                            "@->contentpath": "video-2"
+                        }
+                    },
+                    "mediaBacklinkToStoryTeaser": {
+                        "link": {
+                            "url": "/videoseite",
+                            "isTargetBlank": false
+                        },
+                        "readMoreScreenreader": "zum hr3.de Video",
+                        "title": "Musik macht deinen Tag",
+                        "isForeignBrand": false,
+                        "readMore": "zur hr3.de VideoEinzel-seite",
+                        "hasIcon": true,
+                        "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"
         },
+        {
+            "isHeadline": true,
+            "text": "Video in halber Breite unter Bild in voller Breite"
+        },
+        {
+            "paragraphBoxItem": {
+                "@->jsoninclude": "teaser/teaser_images.inc.json",
+                "@->contentpath": "copytext_image_100",
+                "@->replaceToken": [
+                    {
+                        "@->token": "image",
+                        "@->value": "buchmesse-fahnen-102"
+                    }
+                ]
+            }
+        },
         {
             "paragraphBoxItem": {
                 "isVideo": true,

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 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" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 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" _a11yIntro-loca="story_audio_intro_sr" _a11yOutro-loca="story_audio_outro_sr" }}
 {{/if}}

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _addClass="print:hidden article-full-width mt-12 mb-6 sm:my-7 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" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _addClass="hr-copytext-teaser-half print:hidden article-full-width mt-12 mb-8 sm:my-7 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" _a11yIntro-loca="story_audio_event_livestream_intro_sr" _a11yOutro-loca="story_audio_event_livestream_outro_sr" }}
 {{/if}}

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

@@ -1,4 +1,4 @@
-<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="{{#if this.paragraphProperties.[0].showFullSize }}mt-6 mb-2 sm480:mt-7 sm480:mb-7{{else}}hr-copytext-teaser-half mr-0 sm:mr-5 mb-2 sm:mb-5 mt-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{> components/base/image/icon _icon="quotation"  _addClass="sm:ml-4 mr-2 mt-px float-left text-gray-scorpion w-6 h-6 sm480:w-8 sm480:h-8 fill-current dark:fill-link-dark"}}
     <span class="sr-only">{{loca "story_cite_intro_sr" }}</span>
     <blockquote>

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

@@ -1,3 +1,3 @@
-<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14 {{else}}mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
+<div class="ml-1 sm:ml-6 px-4 sm:px-6 border-l-[3px] border-gray-boulder overflow-auto {{#if _showFullsize}}[&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 clear-both mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14 {{else}}hr-copytext-teaser-half mb-8 sm:mb-5 sm:mt-6 mt-12 mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
     {{~> @partial-block ~}}
 </div>

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

@@ -1,7 +1,7 @@
 {{#if this.showPortrait.isTrue }}
         {{#if this.showFullSize.isTrue }}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext-portrait"
@@ -9,7 +9,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 sm480:mr-5 sm:w-1/2 w-auto flex-col float-none sm:float-left break-inside-avoid page-break-inside-avoid"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 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"
@@ -19,7 +19,7 @@
 {{else}}
         {{#if this.showFullSize.isTrue}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-14 sm480:mb-14 clear-both article-full-width sm:article-narrow"
+                _cssClass="mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:my-14 clear-both article-full-width sm:article-narrow"
                 _cssClassCaption="mx-5 sm:mx-0"
                 _type="story"
                 _variant="100-copytext"
@@ -27,7 +27,7 @@
                 _isWebview=_isWebview}}
         {{else}}
             {{> components/content/copytext/components/image/figure 
-                _cssClass="mt-12 mb-8 sm480:mt-6 sm480:mb-5 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"
+                _cssClass="hr-copytext-teaser-half mt-12 mb-8 sm:mt-6 sm:mb-5 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"

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

@@ -1,9 +1,9 @@
 {{#if this.isText}}
-    <p class="mt-4 sm480:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
+    <p class="mt-4 sm:mt-5 text-lg leading-normal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</p>
 {{/if}}
 {{#if this.isUl}}
-    <ul class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
+    <ul class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-disc copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ul>
 {{/if}}
 {{#if this.isOl}}
-    <ol class="pl-9 mt-4 sm480:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
+    <ol class="pl-9 mt-4 sm:mt-5 overflow-hidden text-lg leading-normal list-decimal copytextParagraphDS sm480:text-xl lg:leading-7.5 dark:text-text-dark">{{{this.text}}}</ol>
 {{/if}}

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

@@ -1,3 +1,3 @@
-<div class="{{#if this.showFullSize.isTrue }}clear-both mt-12 mb-8 sm:mt-14 sm:mb-14{{else}}sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
+<div class="{{#if this.showFullSize.isTrue }}clear-both [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 mt-12 mb-8 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:mt-14 sm:mb-14{{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left sm:mr-5 mt-12 mb-8 sm:mt-6 sm:mb-5{{/if}}">
     {{> components/teaser/podcast/podcast _headlineTag="h3" _isCopytext=true }} 
 </div>

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

@@ -1,3 +1,3 @@
-<div class="w-5/6 sm480:w-2/3 mx-auto {{#if this.showFullSize.isTrue }}clear-both pb-8 sm:pb-9 mt-12 sm:mt-14 {{else}}sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5{{/if}}">
+<div class="article-narrow w-auto [&+h2]:mt-4 xs:article-full-width xs:mx-13 {{#if this.showFullSize.isTrue }}hr-copytext-teaser-full clear-both mb-8 mt-12 sm:my-14 sm:mx-26 {{else}}hr-copytext-teaser-half sm:w-1/2 clear-both sm:float-left mt-12 mb-8 sm:mt-6 sm:mb-5 sm:mr-5 sm:ml-0{{/if}}">
     {{> components/teaser/teaser_poster _isCopytext=true }} 
 </div>    

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 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" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 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" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
 {{/if}} 

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

@@ -1,5 +1,5 @@
 {{#if this.showFullSize.isTrue }}
-    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width sm:article-narrow mt-12 mb-6 sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=true _addClass="print:hidden clear-both article-full-width mt-12 mb-8 [&+h2]:mt-4 [&+.hr-copytext-teaser-half]:mt-4 sm:[&+.hr-copytext-teaser-half]:mt-0 sm:article-narrow sm:my-14" _cssClassCaption="mx-5 sm:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{else}}
-    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="print:hidden article-full-width sm:article-narrow mt-12 mb-6 sm:my-7 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" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
+    {{> components/content/copytext/components/media/media_figure _fullSize=false _addClass="hr-copytext-teaser-half print:hidden article-full-width sm:article-narrow mt-12 mb-8 sm:my-7 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" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
 {{/if}} 

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

@@ -1,5 +1,7 @@
 import copytext from './copytext.hbs'
 import copytext_json from './fixtures/copytext.json'
+import copytext_media_components_json from './fixtures/copytext_media_components.json'
+import copytext_non_media_components_json from './fixtures/copytext_non_media_components.json'
 import copytext_posterteaser_json from './fixtures/copytext_posterteaser.json'
 import copytext_additionalInfo_json from './fixtures/copytext_additionalInfo.json'
 import copytext_cite_json from './fixtures/copytext_cite.json'
@@ -31,7 +33,7 @@ export default {
                     </div>`
         },
     ],
-    parameters: { layout: 'fullscreen' }
+    parameters: { layout: 'fullscreen', chromatic: { disableSnapshot: true } }
 }
 
 export const Default = {
@@ -136,3 +138,21 @@ export const WithAudioEventStream = {
     name: 'Audio-Livestream',
     args: copytext_audio_event_stream_json,
 }
+
+export const SnapshotWithMedia = {
+    render: Template.bind({}),
+    name: 'Snapshot 1',
+    args: copytext_media_components_json,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+}
+
+export const SnapshotWithoutMedia = {
+    render: Template.bind({}),
+    name: 'Snapshot 2',
+    args: copytext_non_media_components_json,
+    parameters: {
+        chromatic: { disableSnapshot: false },
+    },
+}