hr-design-system-handlebars 1.52.9 → 1.52.11

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.52.11 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-2698: add copytext-image component [#813](https://github.com/mumprod/hr-design-system-handlebars/pull/813) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
+# v1.52.10 (Tue Jan 23 2024)
+
+#### 🐛 Bug Fix
+
+- add copytext-jobposting-component [#812](https://github.com/mumprod/hr-design-system-handlebars/pull/812) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.52.9 (Mon Jan 22 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/brand/hessenschau/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr1/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr2/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr3/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/hr4/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/brand/you-fm/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/dist/assets/index.css

@@ -1187,6 +1187,9 @@ article.indexText ul {
 .float-left {
   float: left;
 }
+.float-none {
+  float: none;
+}
 .clear-both {
   clear: both;
 }
@@ -1205,6 +1208,10 @@ article.indexText ul {
 .m-4 {
   margin: 1rem;
 }
+.-mx-4 {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
 .mx-0 {
   margin-left: 0px;
   margin-right: 0px;
@@ -1419,6 +1426,9 @@ article.indexText ul {
 .mt-4 {
   margin-top: 1rem;
 }
+.mt-4\.5 {
+  margin-top: 1.125rem;
+}
 .mt-5 {
   margin-top: 1.25rem;
 }
@@ -1461,6 +1471,12 @@ article.indexText ul {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+.line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .block {
   display: block;
 }
@@ -1826,6 +1842,11 @@ article.indexText ul {
      -moz-appearance: none;
           appearance: none;
 }
+.break-inside-avoid {
+  page-break-inside: avoid;
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
+}
 .grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -3228,7 +3249,7 @@ article.indexText ul {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1705918469534;
+  counter-reset: cnt1706086838048;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3530,7 +3551,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1705918469534 1;
+  counter-increment: cnt1706086838048 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3546,7 +3567,7 @@ article.indexText ul {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1705918469534);
+  content: counter(cnt1706086838048);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -5362,6 +5383,15 @@ article.indexText ul {
 }
 @media (min-width: 480px) {
 
+  .sm480\:float-left {
+    float: left;
+  }
+
+  .sm480\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
   .sm480\:mx-10 {
     margin-left: 2.5rem;
     margin-right: 2.5rem;
@@ -5380,6 +5410,10 @@ article.indexText ul {
     margin-left: 2rem;
   }
 
+  .sm480\:mr-4 {
+    margin-right: 1rem;
+  }
+
   .sm480\:mt-4 {
     margin-top: 1rem;
   }
@@ -5388,10 +5422,18 @@ article.indexText ul {
     margin-top: 1.25rem;
   }
 
+  .sm480\:mt-5\.5 {
+    margin-top: 1.375rem;
+  }
+
   .sm480\:h-8 {
     height: 2rem;
   }
 
+  .sm480\:w-1\/2 {
+    width: 50%;
+  }
+
   .sm480\:w-2\/3 {
     width: 66.666667%;
   }
@@ -6008,6 +6050,13 @@ article.indexText ul {
     -webkit-line-clamp: 4;
   }
 
+  .md\:line-clamp-none {
+    overflow: visible;
+    display: block;
+    -webkit-box-orient: horizontal;
+    -webkit-line-clamp: none;
+  }
+
   .md\:block {
     display: block;
   }

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

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

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

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

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

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

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

@@ -1,5 +1,15 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Jobposting-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/jobposting ~}}
-{{~/if~}}
+{{#with this.paragraphProperties.[0]}}
+    {{#with this.jobDescription}}
+        {{#each this.split}}
+            {{#if this.isText}}
+                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/with}}
+{{/with}}

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

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

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

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

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

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

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

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

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

@@ -1,5 +1,15 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Jobposting-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/jobposting ~}}
-{{~/if~}}
+{{#with this.paragraphProperties.[0]}}
+    {{#with this.jobDescription}}
+        {{#each this.split}}
+            {{#if this.isText}}
+                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/with}}
+{{/with}}

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

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

package/package.json

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

package/src/assets/brand/_default/conf/locatags.json

@@ -31,6 +31,7 @@
     "event_status_gets_update": "Wird aktualisiert!",
     "feature_box_anchor": "Livestream Player anspringen",
     "featured_content_headline": "Mehr zum Thema:",
+    "figures_copyright": "Bild © ",
     "gallery_image_copyright": "Bild © {0}",
     "geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
     "geotag_metadescription_prefix": "",

package/src/assets/brand/hessenschau/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-bigband/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-inforadio/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr-werbung/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr1/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr2/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr3/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/hr4/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

package/src/assets/brand/you-fm/conf/locatags.merged.json

@@ -31,6 +31,7 @@
 	"event_status_gets_update": "Wird aktualisiert!",
 	"feature_box_anchor": "Livestream Player anspringen",
 	"featured_content_headline": "Mehr zum Thema:",
+	"figures_copyright": "Bild © ",
 	"gallery_image_copyright": "Bild © {0}",
 	"geotag_buddies_title": "Weitere Beiträge aus der Umgebung",
 	"geotag_metadescription_prefix": "",

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

@@ -694,5 +694,138 @@
                 ]
             }
         ]
-    }       
+    }, 
+    "copytext_jobposting": {
+        "copytextParagraph": [
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Copytext mit Jobposting"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Digitale Produkte, Fernsehen, Radio– wir sind Hessens größtes Medienunternehmen. Als Mitglied der ARD sind wir stolz darauf, mit unseren vielfältigen und qualitativ hochwertigen Programmangeboten wesentlich zur Meinungs- und Medienvielfalt in Deutschland beizutragen. Zur Verstärkung unseres Teams suchen wir befristet für zunächst 3 Jahre eine*n innovative*n"
+                        }
+                    ]   
+                }                  
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Java-Entwickler*in"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isJobposting": true,
+                "text": "Wo brauche ich noch Corona-Test?",
+                "paragraphProperties": [
+                    {
+                        "jobDescription": {
+                            "split": [
+                                {
+                                    "isText": true,
+                                    "text": "Du hast Spaß an neuen Technologien und bist ein*e Experte*in in der Java-Entwicklung? Du suchst spannende und vielfältige Projekte in einem dynamischen Medienumfeld? Dann vernetze gemeinsam mit uns die Mediensysteme der ARD."
+                                },
+                                {
+                                    "isUl": true,
+                                    "text": "<li>Du hast Spaß daran selbstorganisiert in einem agilen Umfeld und interdisziplinären Projektteams zu arbeiten.</li><li>Du bringst ein abgeschlossenes informatikorientiertes Studium bzw. eine vergleichbare Qualifikation mit und verfügst über Berufserfahrung im Bereich Softwareentwicklung.</li><li>Sehr gute Java-Kenntnisse, Kenntnisse in modernen Schnittstellentechnologien und Datenbanksystemen setzen wir voraus.</li>"
+                                },
+                                {
+                                    "isOl": true,
+                                    "text": "<li>Du implementierst als Full-Stack-Entwickler*in Features vertikal durch alle Softwareschichten.</li><li>Im Team entwickelst du die Applikation in enger Zusammenarbeit mit Anwender*innen fachlich weiter.</li>"
+                                }
+                            ]           
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    "copytext_image": {
+        "copytextParagraph": [
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isHeadline": true,
+                "text": "Speichermedien sowie Waffen und Munition sichergestellt"
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."
+                        }
+                    ]   
+                }
+            },
+            {
+                "paragraphBoxItem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_100",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "buchmesse-fahnen-102"
+                        }
+                    ]
+                }
+            },
+            {
+                "paragraphBoxItem": {
+                    "@->jsoninclude": "teaser/teaser_images.inc.json",
+                    "@->contentpath": "copytext_image_50",
+                    "@->replaceToken": [
+                        {
+                            "@->token": "image",
+                            "@->value": "buchmesse-fahnen-102"
+                        }
+                    ]
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            },
+            {
+                "structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
+                "isParagraph": true,
+                "text": {
+                    "split": [
+                        {
+                            "isText": true,
+                            "text": "Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."
+                        }
+                    ]   
+                }
+            }
+           
+        ]
+    }            
 }    

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "content/copytext/copytext.inc.json",
+    "@->contentpath": "copytext_image"
+}

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

@@ -0,0 +1,4 @@
+{
+    "@->jsoninclude": "content/copytext/copytext.inc.json",
+    "@->contentpath": "copytext_jobposting"
+}

package/src/assets/fixtures/teaser/teaser_images.inc.json

@@ -408,5 +408,49 @@
                 }
             ]
         }
+    },
+    "copytext_image_100": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": true
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
+    },
+    "copytext_image_50": {
+        "isImage": true,
+        "showFullSize": {
+            "isTrue": false
+        },
+        "showPortrait": {
+            "isTrue": false
+        },
+        "caption": "Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen",
+        "copyrightWithLinks": "Karsten Hufer",
+        "responsiveImage": {
+            "asPicture": false,
+            "asImage": true,
+            "fallback": "images/{#image}_v-16to9__medium.jpg",
+            "sources": [
+                {
+                    "sizes": "(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw",
+                    "srcset": "images/{#image}_v-16to9__small.jpg 320w, images/{#image}_v-16to9__medium.jpg 480w, images/{#image}_v-16to9__medium__extended.jpg 640w, images/{#image}_v-16to9.jpg 960w, images/{#image}_v-16to9__retina.jpg 1920w"
+                }
+            ]
+        }
     }
 }

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

@@ -0,0 +1,33 @@
+<figcaption class="flex items-start mx-4 mt-3 text-xs sm480:mx-0 sm480:mt-4 sm480:text-sm font-copy"
+            x-data="{ 
+                open: false,
+                truncated: true,
+                init() {
+                    this.$nextTick(() => {
+                        if (this.$refs.caption.scrollHeight === this.$refs.caption.clientHeight) {
+                            this.truncated = false;
+                        }
+                    });
+                }
+            }"
+            @resize.window="open = false; $refs.caption.scrollHeight === $refs.caption.clientHeight ? truncated = false : truncated = true">
+    <div  class="dark:text-text-dark overflow-anywhere hyphens-auto"  x-ref="caption" 
+    {{#if this.showFullSize.isTrue}} :class="!open ? 'line-clamp-2 md:line-clamp-none' : 'line-clamp-none'" {{else}} :class="!open ? 'line-clamp-2' : 'line-clamp-none'" {{/if}}>
+        {{#if this.caption}}
+            {{~#unless _hideCaption~}}
+                <span>
+                    {{this.caption}} 
+                </span>
+            {{~/unless~}}
+        {{/if}}
+        <span class="text-gray-scorpion dark:text-text-dark">
+            {{~loca "figures_copyright"}} {{{copyrightWithLinks}}} 
+        </span>
+    </div>
+    <template x-if="truncated">
+        <button x-cloak type="button">
+            <span  x-show="!open"  @click.prevent="open = true">{{~> components/base/image/icon _icon="arrow-down" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+            <span x-show="open" @click.prevent="open = false">{{~> components/base/image/icon _icon="arrow-up" _addClass="m-2 mt-4.5 sm480:mt-5.5 h-3 w-3 fill-link dark:fill-link-dark" _iconmap="icons"~}}</span>
+        </button>
+    </template>
+</figcaption>

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

@@ -0,0 +1,10 @@
+<figure class="relative mt-6 -mx-4 sm480:mx-0 {{#if _cssClasses}} {{_cssClasses}}{{/if}} {{_cssClass}}">
+    {{#if _noAr }}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _isWebview=_isWebview _noDelay=_noDelay}}
+    {{else}}
+        {{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
+    {{/if}}
+    {{#unless _voting-option}}
+        {{~> components/content/copytext/components/image/figcaption~}}
+    {{/unless}}
+</figure>

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

@@ -0,0 +1,32 @@
+{{#if this.showPortrait.isTrue }}
+        {{#if this.showFullSize.isTrue }}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext-portrait"
+                _noAr="true"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+{{else}}
+        {{#if this.showFullSize.isTrue}}
+            {{> components/content/copytext/components/image/figure 
+                _type="story"
+                _variant="100-copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{else}}
+            {{> components/content/copytext/components/image/figure 
+                _cssClass="sm480:mr-4 sm480:w-1/2 w-auto flex-col float-none sm480:float-left break-inside-avoid page-break-inside-avoid"
+                _type="story"
+                _variant="copytext"
+                _pictureAddClass="ar-16-9"
+                _isWebview=../../_isWebview}}
+        {{/if}}
+    {{/if}}
+ 

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

@@ -1,5 +1,15 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Jobposting-component</div>
-{{~else~}}
-    {{~> modules/story/paragraphs/jobposting ~}}
-{{~/if~}}
+{{#with this.paragraphProperties.[0]}}
+    {{#with this.jobDescription}}
+        {{#each this.split}}
+            {{#if this.isText}}
+                <p class="mt-6 text-base sm480:text-xl dark:text-text-dark">{{{this.text}}}</p>
+            {{/if}}
+            {{#if this.isUl}}
+                <ul class="mt-6 ml-5 text-base list-disc sm480:text-xl dark:text-text-dark">{{{this.text}}}</ul>
+            {{/if}}
+            {{#if this.isOl}}
+                <ol class="mt-6 ml-5 text-base list-decimal sm480:text-xl dark:text-text-dark">{{{this.text}}}</ol>
+            {{/if}}
+        {{/each}}
+    {{/with}}
+{{/with}}

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

@@ -7,7 +7,7 @@
     {{#unless this.isInfoBox}}
         {{~#with this.paragraphBoxItem }}
             {{~#if this.isImage}}
-                {{> components/content/copytext/components/image }}    
+                {{~> components/content/copytext/components/image/image}}    
             {{/if~}}
             {{~#if this.isContentBox}}
                 {{~> components/article/components/contentbox/contentbox ~}}

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

@@ -5,6 +5,8 @@ import copytext_additionalInfo_json from './fixtures/copytext_additionalInfo.jso
 import copytext_cite_json from './fixtures/copytext_cite.json'
 import copytext_podcastepisode_json from './fixtures/copytext_podcastepisode.json'
 import copytext_faq_json from './fixtures/copytext_faq.json'
+import copytext_jobposting_json from './fixtures/copytext_jobposting.json'
+import copytext_image_json from './fixtures/copytext_image.json'
 
 const Template = ({ ...args }) => {
     return copytext({ ...args })
@@ -33,6 +35,12 @@ export const WithFAQ = {
     args: copytext_faq_json,
 }
 
+export const WithJobposting = {
+    render: Template.bind({}),
+    name: 'Jobposting',
+    args: copytext_jobposting_json,
+}
+
 export const WithPodcastEpisode = {
     render: Template.bind({}),
     name: 'Podcastepisode',
@@ -56,3 +64,9 @@ export const WithAdditionalInfo = {
     name: 'Zusatzinfo',
     args: copytext_additionalInfo_json,
 }
+
+export const WithImage = {
+    render: Template.bind({}),
+    name: 'Image',
+    args: copytext_image_json,
+}

package/src/stories/views/components/content/copytext/fixtures/copytext_image.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Speichermedien sowie Waffen und Munition sichergestellt"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"In der rund 1.200 Einwohner großen Gemeinde Waldbrunn, rund 13 Kilometer vom rheinland-pfälzischen Westerburg entfernt, engagiert sich der 18-Jährige nach hr-Informationen bei der Freiwilligen Feuerwehr. Der Ortsvorsteher aus Waldbrunn beschrieb den Terrorverdächtigen als zurückhaltend, höflich und hilfsbereit."}]}},{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":true},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"paragraphBoxItem":{"isImage":true,"showFullSize":{"isTrue":false},"showPortrait":{"isTrue":false},"caption":"Zum Glück ragt Hessens höchster Berg, die Wasserkuppe, gelegentlich aus der derzeitigen Nebelsuppe heraus, und so gelang mit dem Sternenteleskop ein Blick auf den magischen Rosetten-Nebel, einer Himmelsregion, in der gerade neue Sterne geboren werden. - Diese spektakuläre Momentaufnahme hat uns hessenschau.de-Nutzer Michael Keusgen zukommen lassen","copyrightWithLinks":"Karsten Hufer","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"images/buchmesse-fahnen-102_v-16to9__medium.jpg","sources":[{"sizes":"(min-width: 1024px) 960px, (min-width: 640px) calc(100vw - 4rem), 100vw","srcset":"images/buchmesse-fahnen-102_v-16to9__small.jpg 320w, images/buchmesse-fahnen-102_v-16to9__medium.jpg 480w, images/buchmesse-fahnen-102_v-16to9__medium__extended.jpg 640w, images/buchmesse-fahnen-102_v-16to9.jpg 960w, images/buchmesse-fahnen-102_v-16to9__retina.jpg 1920w"}]}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Nach der Festnahme in der vergangenen Woche hätten bereits Gespräche mit Mitschülerinnen und Mitschülern des 18 Jahre alten Oberstufenschülers stattgefunden. Auch die Eltern seien in Kenntnis gesetzt worden, sagte der Schulleiter."}]}}]}

package/src/stories/views/components/content/copytext/fixtures/copytext_jobposting.json

@@ -0,0 +1 @@
+{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Copytext mit Jobposting"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Digitale Produkte, Fernsehen, Radio– wir sind Hessens größtes Medienunternehmen. Als Mitglied der ARD sind wir stolz darauf, mit unseren vielfältigen und qualitativ hochwertigen Programmangeboten wesentlich zur Meinungs- und Medienvielfalt in Deutschland beizutragen. Zur Verstärkung unseres Teams suchen wir befristet für zunächst 3 Jahre eine*n innovative*n"}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Java-Entwickler*in"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isJobposting":true,"text":"Wo brauche ich noch Corona-Test?","paragraphProperties":[{"jobDescription":{"split":[{"isText":true,"text":"Du hast Spaß an neuen Technologien und bist ein*e Experte*in in der Java-Entwicklung? Du suchst spannende und vielfältige Projekte in einem dynamischen Medienumfeld? Dann vernetze gemeinsam mit uns die Mediensysteme der ARD."},{"isUl":true,"text":"<li>Du hast Spaß daran selbstorganisiert in einem agilen Umfeld und interdisziplinären Projektteams zu arbeiten.</li><li>Du bringst ein abgeschlossenes informatikorientiertes Studium bzw. eine vergleichbare Qualifikation mit und verfügst über Berufserfahrung im Bereich Softwareentwicklung.</li><li>Sehr gute Java-Kenntnisse, Kenntnisse in modernen Schnittstellentechnologien und Datenbanksystemen setzen wir voraus.</li>"},{"isOl":true,"text":"<li>Du implementierst als Full-Stack-Entwickler*in Features vertikal durch alle Softwareschichten.</li><li>Im Team entwickelst du die Applikation in enger Zusammenarbeit mit Anwender*innen fachlich weiter.</li>"}]}}]}]}

package/tailwind.config.js

@@ -177,6 +177,8 @@ module.exports = {
                 11: '2.75rem',
             },
             margin: {
+                '4.5': '1.125rem',
+                '5.5': '1.375rem',
                 '7.5': '1.875rem',
                 '13': '3.125rem',
                 '30': '7.5rem',

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

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}

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

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}

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

@@ -1,41 +0,0 @@
-{{~#if (isStorybook)~}}
-    <div class="mt-6 italic text-gray-dark">coming soon: Image-component</div>
-{{~else~}}
-
-    {{#if this.showPortrait.isTrue }}
-        {{#if this.showFullSize.isTrue }}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext-portrait"
-                _noAr="true"
-                _pictureAddClass="copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{else}}
-        {{#if this.showFullSize.isTrue}}
-            {{> modules/figure/figure
-                _cssClass="copytext__clearBox"
-                _type="story"
-                _variant="100-copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{else}}
-            {{> modules/figure/figure
-                _cssClass="copytext__box"
-                _type="story"
-                _variant="copytext"
-                _pictureAddClass="ar--16x9 copytext__box__picture"
-                _isWebview=../../_isWebview}}
-        {{/if}}
-    {{/if}}
-
-{{~/if~}}