hr-design-system-handlebars 1.52.10 → 1.52.12

package/.storybook/preview.js

@@ -1,6 +1,9 @@
 import '!style-loader!css-loader!postcss-loader!tailwind'
 import 'tailwind'
 import { withThemeByDataAttribute } from '@storybook/addon-styling'
+import '@storybook/addon-console'
+import { setConsoleOptions } from '@storybook/addon-console';
+import { configureActions } from '@storybook/addon-actions';
 
 import hrDesignsystemDark from './HRDesignsystemDark'
 import hrDesignsystemLight from './HRDesignsystemLight'
@@ -11,6 +14,38 @@ import loadFeature from '../build/webpack/feature-loader/initializer/loader'
 import '../src/assets/js/alpine.js'
 import '../src/assets/tailwind.css'
 
+import { CheckCSS } from 'checkcss';
+
+configureActions({
+    clearOnStoryChange: true, 
+  });
+  
+// Create CheckCSS instance
+const checkcss = new CheckCSS();
+
+checkcss.onClassnameDetected = function (classname, element) {
+    // Return `false` to disable checks for `classname`.
+    // For example, to ignore classnames starting with
+    // "license-" or "maintainer-"...
+    var storybookRoot = document.getElementById('storybook-root');
+    var prefixes = /^js-|^cy-|^sb-/.test(classname) ? false : true
+    return storybookRoot.contains(element) && prefixes
+}
+checkcss.onUndefinedClassname = function (classname) {
+    console.log(
+        `checkcss: No CSS rule for .${classname}`,
+      );
+  };
+
+checkcss.scan().watch();
+
+const panelInclude = setConsoleOptions({}).panelInclude;
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss/],
+}); 
+
+
 function loadDelayedImages() {
     setTimeout(function () {
         var t,
@@ -173,11 +208,12 @@ export const parameters = {
                 [
                     'Entwicklung',
                     [
-                        'Installation und Update von Dependencies im Entwicklungs Projekt',
-                        'Installation der Design-System Komponenten im Delivery Projekt',
+                        'Installation und Update von Dependencies',
+                        'Design System im Delivery Projekt installieren',
+                        'Konventionen und Datenstrukturen',
+                        'Testdatenbereitstellung',
+                        'Konsolenausgaben'
                     ],
-                    'Konventionen und Datenstrukturen',
-                    'Testdatenbereitstellung',
                     '*',
                 ],
                 'Komponenten',

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.52.12 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- Add console to storybook [#811](https://github.com/mumprod/hr-design-system-handlebars/pull/811) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# 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

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: cnt1706031818952;
+  counter-reset: cnt1706100388787;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3530,7 +3551,7 @@ article.indexText ul {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1706031818952 1;
+  counter-increment: cnt1706100388787 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(cnt1706031818952);
+  content: counter(cnt1706100388787);
 }
 /*! ****************************/
 /*! 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/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/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.10",
+    "version": "1.52.12",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -43,8 +43,9 @@
         "@babel/core": "^7.12.10",
         "@babel/preset-env": "^7.21.4",
         "@storybook/addon-a11y": "^7.2.1",
-        "@storybook/addon-actions": "^7.2.1",
-        "@storybook/addon-essentials": "^7.2.1",
+        "@storybook/addon-actions": "7.5.3",
+        "@storybook/addon-console": "^2.0.0",
+        "@storybook/addon-essentials": "7.5.3",
         "@storybook/addon-links": "^7.2.1",
         "@storybook/addon-styling": "^1.3.5",
         "@storybook/addons": "^7.2.1",
@@ -112,6 +113,7 @@
         "a11y-dialog": "^8.0.4",
         "alpinejs": "^3.8.1",
         "async-alpine": "^1.0.0",
+        "checkcss": "^2.0.9",
         "dialog-polyfill": "^0.5.6",
         "tailwindcss-counter": "^1.1.3"
     },

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

@@ -745,5 +745,87 @@
                 ]
             }
         ]
-    }             
+    },
+    "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/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/ConsoleLog.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+
+<Meta title="Grundlegendes/Entwicklung/Konsolenausgaben" />
+
+# Konsolenausgaben im Action Tab
+-   [Allgemein](#allgemein)
+-   [Festlegen welche Logs angezeigt werden sollen](#festlegen-welche-logs-angezeigt-werden-sollen)
+
+
+## Allgemein
+
+Es ist möglich console.log() ausgaben im "Action Tab" einer Story anzuzeigen. Dafür wird das Plugin "@storybook/addon-console" verwendet. Auf grund eines Bugs benötigt addon-console die Storybook Plugins @storybook/addon-actions und @storybook/addon-essentials jeweils in der version 7.5.3
+Aus diesem Grund dürfen diese nicht Upgedatet werden bis der Bug in addon-console behoben wurde. 
+
+Zur Zeit aktualisiert der Tab sich leider nicht automatisch beim wechsel in eine andere Story weshalb um die Korrekten Logs angezeigt zu bekommen ein reload(F5) der Seite durchgefürt werden muss.
+
+## Festlegen welche Logs angezeigt werden sollen
+
+standardmäßig würden alle console.log() im Action Tab angezeigt. Um nur für uns relevante Meldungen anzuzeigen werden über einen Filter nicht "relevante" logs ausgefiltert.
+
+Dies kann in der function setConsoleOptions() in der preview.js über eine REGEX konfiguriert werden.
+```javascript
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss/],
+});
+
+```
+Die REGEX sorgt dafür das ausschließlich LOGs angezeigt werden, in denen der String "checkcss" vorkommt. Bei zukünftigen Ausgaben ist es somit notwendig diese mit einem vorangestellten Prefix zu kennzeichnen. z.b. "testausgabe:" . Die angepasste REGEX um die testausgaben auch anzuzeigen würde dann so aussehen:
+
+```javascript
+
+setConsoleOptions({
+    panelInclude: [...panelInclude, /checkcss|testausgabe/],
+});
+
+```
+

package/src/stories/Fixtures.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from '@storybook/addon-docs'
 
-<Meta title="Grundlegendes/Testdatenbereitstellung" />
+<Meta title="Grundlegendes/Entwicklung/Testdatenbereitstellung" />
 
 # Bereitstellung von Testdaten für Stories
 

package/src/stories/conventions-and-datastructure.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas } from '@storybook/addon-docs'
 
-<Meta title="Grundlegendes/Konventionen und Datenstrukturen" />
+<Meta title="Grundlegendes/Entwicklung/Konventionen und Datenstrukturen" />
 
 # Konventionen und Datenstrukturen
 

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/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

@@ -6,6 +6,7 @@ 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 })
@@ -63,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/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~}}