hr-design-system-handlebars 1.81.0 → 1.81.2

package/src/stories/basics/iconography/SvgCreation.mdx

@@ -0,0 +1,158 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+
+<Meta title="Grundlegendes/Iconographie/Herstellung der Icons" />
+
+# Herstellung von SVG-Icons
+
+-   [Übersicht](#übersicht)
+-   [Software](#software)
+-   [Wie ist ein Icon aufgebaut?](#wie-ist-ein-icon-aufgebaut)
+-   [Arbeiten mit Icon-Sets](#arbeiten-mit-icon-sets)
+-   [Was heißt gepfadet?](#was-heißt-gepfadet)
+-   [Was heißt gestanzt?](#was-heißt-gestanzt)
+-   [Arbeit im Vektorprogramm](#arbeit-im-Vektorprogramm)
+-   [Aufbau eines Icons (Beispiel)](#aufbau-eines-icons-beispiel)
+
+
+## Übersicht
+
+In den Webauftritten des Hessischen Rundfunks wird ein Set an Icons verwendet, um Funktionen innerhalb der Weboberfläche, intuitiv verständlich zu machen. Sie sollen im Folgenden als hs-Iconwelt bezeichnet werden.
+Alle in dieser Welt vorkommenden Icons, lassen sich über einfache gestalterische Regeln herstellen. Im Idealfall lassen sich hierbei neue Icons von den bereits bestehenden ableiten.
+Die Icons lassen sich neben der Funktion auch visuell zu Familien gruppieren.
+
+## Software
+Die hessenschau Icons wurden ausschließlich mit der Software `Adobe Illustrator` (in diversen Versionen ab CC 2014) erstellt.
+Jedwede Software zur Herstellung von vektorbasierten Grafiken ist ebenfalls zulässig. Die Software sollte explizit den Export als SVG vorsehen.
+Gegenüber den proprietären Formaten, die softwarespezifisch sind, dient das SVG-Dateiformat als Austausch- und Darstellungsformat.
+
+ ## Wie ist ein Icon aufgebaut?
+Ein Icon wird aus geometrischen Primitiven erzeugt (siehe hierzu den Punkt "Aufbau eines Icons").
+Jede dieser Primitiven hat Eigenschaften, die sich in der Software manipulieren lassen z.B. Strichdicke, Füll-Farbe, Strich-Farbe etc. 
+Ihre Position und Aussehen im Raum wird über den Vektor bestimmt, d.h. eine mathematische Beschreibung über x Punkte und Kurven-Gleichungen.
+Je nach Komplexizität des Icons, besteht es aus vielen Linien, Rechtecke und Kreise die sich ggf. überlappen, verdecken und alle in Strichdicke usw. manipulierbar bleiben.
+
+ ## Arbeiten mit Icon-Sets
+ Vor dem Export der Icons in das SVG-Format werden sie wie folgt "vorbehandelt":
+-   **Doppeltes Icon-Set anlegen** — Es werden idellerweise zwei Illustrator-Dateien vom Designer für das Set vorgehalten. Eine dient weiterhin dem einheitliche Editieren der Icons (Strichdicke, Abstände!), 
+    wohingegen das Duplikat die "gepfadeten" Icons für den SVG-Export enthält. (die gepfadeten Icons sind auch, aber wesentlich schwerer, editierbar)
+-   **Komplexizitätsreduktion der Icons** — Ggf. "Stanzung" von überlagernden Objekten bzw. Zusammenfassung sind durchzuführen
+
+
+ ## Was heißt "gepfadet"?
+Eine sog. "Linie" setzt sich in der Welt eines Vektorprogramms aus EINEM Pfad und den Eigenschaften "Linien-Dicke" und "Linien-Farbe" zusammen. 
+Ein Pfad für sich ist zunächst eindimensional und wird mathematisch über x-Punkte und Kurvengleichungen beschrieben.
+Die sog. "Pfadung" bewirkt das aus der eindimensionalen Linie eine zweidimensionale Fläche wird, die nun von ZWEI geschlossenen Pfaden begrenzt / umschlossen wird und die Eigenschaft "Füllung" besitzt.
+
+**Anmerk. des Verf.: Formal findet eine Pfadung statt, um vormals Linie-Objekte mit Kreis-/Rechteckflächen etc. addieren zu können und um eine Fehleranfälligkeit bei der finalen Darstellung zu minimieren. 
+Der Web-Entwickler kann nach der Pfadung nicht mehr auf die Eigenschaften der einzelnen Objekte via CSS zugreifen. Er kann nur das gesamte Objekt via CSS manipulieren.**
+
+<div style={{display: 'flex'}}>
+    <img src="./images/figures/00A.jpg" alt="Linienobjekt" width="300px" />
+    <img src="./images/figures/00B.jpg" alt="Pfadobjekt" width="300px" />
+</div>
+
+
+## Was heißt "gestanzt"?
+Bei überlagernden Objekten, wird das zu oberst liegende Objekt (im Beispiel die [Fenster und die Lampen/Poller](#export-vorbereitung-linienobjekte-in-pfade)) vom dahinterliegenden (im Beispiel der Zugkörper) subtrahiert, 
+d.h. wie mit einem Locher oder einer Schere aus dem Objekt herausgeschnitten.
+Dadurch wird die Anzahl von seperaten Objekten gering gehalten, was sich z.B. auch auf Dateigröße der SVG-Datei auswirkt. Daneben bewirkt die Stanzung, 
+das alle "weiß"-farbig hervorgehobenen Elemente eines Icons, nicht mehr über die Eigenschaft "Füllung" als weiß erscheinen, sondern der Hintergrund der Zeichenfläche "durchscheint" und die Farbe des 
+Elements durch die Farbe des Hintergrunds bestimmt wird.
+Während oder nach der Stanzung erfolgt eine weitere Zusammenfassung. Dabei werden alle einzelnen Pfadobjekte, zu einem Gesamt-Pfad addiert. 
+Liegen die Objekte getrennt vor, führt die Zusammenfassung lediglich zu einer Gruppierung, mathematisch bleiben sie damit weiterhin unabhängig.
+
+## Arbeit im Vektorprogramm
+In der Software muß zunächst ein Zeichenrahmen erstellt werden, also die Fläche auf der das Icon gezeichnet wird.
+Die Dimension eines einzelnen Zeichenrahmens ist ``100 x 100 px``. Je nach Software ist es möglich ein Set an Icons in einer Datei zu verwalten, also mehrere Zeichenrahmen in einer Datei anzulegen (siehe Abbildung B).
+Alle Icons die z.B. die allgemeinen Funktionen in der Weboberfläche abbilden, werden zur Gruppe - die Familie -  "Allgemein" zusammengefasst und in einer Datei abgelegt usw.
+Es entsteht eine Illustrator-Datei "Allgemein" die x Zeichenrahmen (a 100 x 100px) enthält und für die Editierung vorgehalten wird und eine Datei nach selbem Schema - das Duplikat - in der aber alle Icons für den SVG Export 
+umgewandelt wurden. Im Beispiel unten wurden 12 Zeichenflächen für die Gruppe "Verkehr" angelegt.
+
+<img src="./images/figures/00.jpg" alt="Zeichenflächen im Illustrator" />
+ 
+Jeder Zeichenrahmen wird später automatisiert als separate SVG-Datei exportiert werden. 
+Jeder Zeichenrahmen erhält einen eindeutigen Name, der über die ganze Produktionskette hinweg bis hin zur SVG erhalten bleibt und beim Einbinden des Icons ihm diesen seinen Namen verleiht.
+Im Adobe Illustrator geschieht das über die Zeichenrahmen (hier "Zeichenflächen") Verwaltung (siehe in Abbildung A). 
+Hier lassen sich Dimension und Benamung eines jeden Zeichenrahmens editieren.
+
+## Aufbau eines Icons (Beispiel)
+
+Hier soll exemplarisch gezeigt werden, wie ein Verkehrsicon (Zug als Symbol für ÖPNV) aus grafischen Primitiven gebaut wird. Es sei angemerkt, das die Bauweise dem Designer frei steht. 
+Es soll hierbei lediglich aufgezeigt werden, wie Einzelobjekte für das SVG zusammengeführt werden sollen.
+
+Zeichnung von min. 6 grafischen Primitiven:
+- Ein großes Rechteck => Zugkörper
+- Zwei kleine Kreise => Lampen / Stoßpoller des Zugs
+- Zwei kleine Rechtecke => Fenster des Zugs
+- Eine gewinkelte Linie => Räder des Zugs
+- (Die Strichdicke, Füllung etc. ist dabei zunächst nicht wichtig)
+
+<img src="./images/figures/01.jpg"/>
+
+- Die Ecken des großen Rechtecks asymmetrisch abrunden und kleine Quadrate in ein trapezoide Form überführen. 
+- Generell gilt: mit möglichst einfachen Transformationen, die ursprünglichen Objekte verändern, um wenige Pfadpunkte zu erzeugen.
+
+<img src="./images/figures/02.jpg"/>
+
+
+- Kleine trapezoide Quadrate und Kreise "weiß" füllen (für eine bessere optische Positionierung auf dem schwarzen Zugkörper) und mit dem großen Rechteck (Zugkörper) überlappen...
+- Gewinkelte Linie im Winkel verkleinern und ebenfalls mit dem großen Rechteck überlappen
+- Weißes Rechteck aufziehen und mit der Linie üperlappen. Die Enden der gewinkelten Linie sehen so begradigt aus
+
+<img src="./images/figures/03.jpg"/>
+
+- Das Icon ist fertig erstellt. 
+- Alle Primitiven, liegen als editierbare Objekte vor und können jederzeit in Form oder Gestalt geändert werden.
+- Beschnitte oder Verdeckungen können wie im Beispiel ebenfalls so belassen werden oder bereits in diesem Arbeitsschritt durch geeigneten Methoden (Pathfinder, Schneidewerkzeug etc.), auf die Objekte angewendet werden.
+
+<img src="./images/figures/04.jpg"/>
+
+## Export Vorbereitung Linienobjekte in Pfade
+- Für den Export werden jetzt alle Einzelobjekte zu eine Gesamtobjekt verbunden (soweit das die gestalterischen Vorgaben erlauben). 
+- Allgemein gilt: Linienobjekte in Pfade umwandeln, um sie in den nächsten Arbeitsschritten mit anderen Objekten (Flächen) "addieren" zu können. 
+
+<img src="./images/figures/05.jpg"/>
+
+- Für das Zusammenführen aller einzelnen Objekte wird das Illustrator-Werkzeug ```Pathfinder``` eingesetzt. 
+- Im Beispiel wird über Subtraktion die weiße Beschnittfläche vom gepfadeten Linienobjekt abgezogen.
+
+<img src="./images/figures/06.jpg"/>
+
+- Das beschnitten Objekt wird mit der Zugkörper-Fäche "addiert" also zu einem geschlossenen Pfad verbunden. 
+- Für die Stanzung der Fenster und Lampen / Stoßpoller des Zugs aus dieser neuen Pfad-Objekt, wird das Objekt in den Hintergrund verschoben, so das die weißen Objekte wieder zu oberst auf dem neuen Pfad-Objekt liegen.
+
+<img src="./images/figures/07.jpg"/>
+
+## Export Vorbereitung Stanzung
+
+- Die weißen Objekte werden dann von der Zugkörper-Fläche "subtrahiert" (gestanzt).
+- Das so enststehende Objekt, ist ein geschlossener Pfad, der über den ```Speichern``` Dialog von Illustrator als SVG gespeichert werden kann.
+
+<img src="./images/figures/08.jpg"/>
+
+Zur Kontrolle lässt sich ein farbiger Hintergrund einfügen, um entsprechende Stanzungen oder noch nicht zusammengeführte Objekte sichtbar zu machen. (Diese farbige Kontrollfläche wird NICHT exportiert)
+Anmerkung: Bei mehrfarbigen Icons (z.B. das Unwetterwarnungs-Icon) ist diese Methode der Zusammenführung nur für die einzelnen zu färbenden Objekte anzuwenden. Stanzungen gelten nur, wenn die Hintergrund-Farbe
+durchscheinen soll.
+
+<img src="./images/figures/09.jpg"/>
+
+
+## Beispiele für schlechtes SVG-Markup
+```html
+<svg xmlns="..." xml:space="..." width="..." height="..." viewBox="...">
+  <path fill="none" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="..."/>
+</svg>
+```
+Das obige Markup enthält diverse Attribute, die für die Auspielung nicht relevant sind. Hierzu zählen alle Attribute die eine Strichdicke bestimmen
+- stroke
+- stroke-linejoin
+- stroke-miterlimit
+- stroke-width
+
+Nach der Pfadung eines Linienobjekts sind diese Attribute überflüssig, da die Strichdicke nicht mehr direkt manipulierbar sein wird.
+Ggf. sorgen die Attribute aber für eine falsche Darstellung. Die zulässigen Attributierung (siehe SVG-Optimierung) lässt maximal die Attribute
+- fill
+- "preserve--fill"
+- "preserve--style"
+zu. `
+Ansonsten sollten die Pfad-Repräsentionen / Pfad-Tags (```<path...>```) ohne weitere (überflüssige) Attribute auskommen.

package/src/stories/{SvgOptimization.mdx → basics/iconography/SvgOptimization.mdx}

@@ -1,8 +1,8 @@
 import { Meta } from '@storybook/addon-docs'
 
-<Meta title="Grundlegendes/Icons" />
+<Meta title="Grundlegendes/Iconographie/Aufbereitung zur SVG-Map" />
 
-# Icons
+# Aufbereitung der Icons zur SVG-Map
 
 -   [Optimierung von Icons und Erzeugung von SVG-Maps](#optimierung-von-icons-und-erzeugung-von-svg-maps)
     -   [Global zu verwendende Icons](#global-zu-verwendende-icons)

package/src/stories/basics/iconography/page_icon_404_data.js

@@ -0,0 +1,14 @@
+const images = require.context('/src/assets/icons/404/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgList404 = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    svgList404[fileName] = "./icons/404/svgmap.min.svg#"+fileName
+}
+
+export default svgList404;

package/src/stories/basics/iconography/page_icon_data.js

@@ -0,0 +1,17 @@
+const images = require.context('/src/assets/icons/icons/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgList = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    let substring = "-ds"
+    if(!fileName.includes(substring)){
+        svgList[fileName] = "./icons/icons/svgmap.min.svg#"+fileName
+    }
+}
+
+export default svgList;

package/src/stories/basics/iconography/page_icon_ds_data.js

@@ -0,0 +1,17 @@
+const images = require.context('/src/assets/icons/icons/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgListDs = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    let substring = "-ds"
+    if(fileName.includes(substring)){
+    svgListDs[fileName] = "./icons/icons/svgmap.min.svg#"+fileName
+    }
+}
+
+export default svgListDs;

package/src/stories/basics/iconography/page_icon_epg_data.js

@@ -0,0 +1,14 @@
+const images = require.context('/src/assets/icons/epg/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgList = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    svgList[fileName] = "./icons/epg/svgmap.min.svg#"+fileName
+}
+
+export default svgList;

package/src/stories/basics/iconography/page_icon_public_transport_data.js

@@ -0,0 +1,14 @@
+const images = require.context('/src/assets/icons/publictransport/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgListPublicTransport = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    svgListPublicTransport[fileName] = "./icons/publictransport/svgmap.min.svg#"+fileName
+}
+
+export default svgListPublicTransport;

package/src/stories/basics/iconography/page_icon_traffic_data.js

@@ -0,0 +1,14 @@
+const images = require.context('/src/assets/icons/traffic/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgListTraffic = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    svgListTraffic[fileName] = "./icons/traffic/svgmap.min.svg#"+fileName
+}
+
+export default svgListTraffic;

package/src/stories/basics/iconography/page_icon_weather_data.js

@@ -0,0 +1,14 @@
+const images = require.context('/src/assets/icons/weather/svgmap', true);
+
+let imageList = {}
+let fileName
+let svgString
+let svgListWeather = {}
+imageList = images.keys().map(image => images(image));
+
+for(let i=0; i < imageList.length; i++){
+    fileName = imageList[i].replace(/^.*[\\/]/, '').slice(0,-4)
+    svgListWeather[fileName] = "./icons/weather/svgmap.min.svg#"+fileName
+}
+
+export default svgListWeather;

package/src/stories/basics/iconography/page_icons.mdx

@@ -0,0 +1,121 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import svgList from './page_icon_data.js'
+import svgListDs from './page_icon_ds_data.js'
+import svgList404 from './page_icon_404_data.js'
+import svgListWeather from './page_icon_weather_data.js'
+import svgListPublicTransport from './page_icon_public_transport_data.js'
+import svgListTraffic from './page_icon_traffic_data.js'
+import svgListEPG from './page_icon_epg_data.js'
+
+<Meta title="Grundlegendes/Iconographie/Iconwelt" />
+
+# hessenschau Iconwelt
+
+In den Webauftritten des Hessischen Rundfunks werden SVG-Icons unterschiedlicher Genese verwendet, Das Iconset ist organisch gewachsen, so das die aktuellesten hier für Storybook-Komponenten zu oberst, der vollständigkeithalber
+aber auch die anderen noch aus dem alten Delivery stammenden dargestellt werden.
+
+## Generic Icons für das Design-System
+
+{Object.entries(svgListDs).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+
+## Generic Icons aus dem Delivery
+
+{Object.entries(svgList).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+## Icons für 404
+
+{Object.entries(svgList404).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+## Icons für Wetter
+
+{Object.entries(svgListWeather).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+## Icons für ÖPNV
+
+{Object.entries(svgListPublicTransport).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+## Icons für Verkehr
+
+{Object.entries(svgListTraffic).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}
+
+## Icons für EPG
+
+{Object.entries(svgListEPG).map((token, key) => {
+        return (
+            <div style={{backgroundColor:'#fafafa', border: '1px solid #cacaca', display: 'inline-flex', alignItems: 'center', justifyContent: 'center'}}>
+                <div style={{ width: '120px', height: '150px', margin: '5px', textAlign:'center', justifyContent: 'center'}}>
+                <svg className="svg-item" width="120px" height="100px"> 
+                    <use xlinkHref={token[1]}></use>
+                </svg>
+                <span style={{textAlign:'center', fontSize:'12px', display: 'block', backgroundColor:'#000', color: '#fff', marginTop: '10px'}}>{token[0]}</span>
+                </div>
+            </div>
+        )
+})}

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

@@ -1,12 +1,52 @@
-{{#if (isStorybook)}}  
-    {{> components/content/copytext/components/contentbox/storybook-contentbox }} 
-{{else}}            
-    <div class="border-y border-gray-boulder overflow-auto contentbox-box mt-13 mb-5 sm480:pb-7.5 pb-5 sm:px-0 px-5.5 {{#unless this.showFullSize.isTrue}} mt-7.5 mb-6 mr-0 sm:mr-6 md:w-6/12 float-left{{/unless}}">
-        {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
-        {{#if this.title}}
-            <h3 class="mt-6 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
-        {{/if}}         
-        {{> modules/story/copytext-contentbox ~}}
-        {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
-    </div>
-{{/if}}
+{{#>components/content/copytext/components/common/paragraphbox_wrapper _showFullsize=this.showFullSize.isTrue}}
+
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
+
+    {{~#if this.title}}
+        <h3 class="-mt-1 text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h3>
+    {{/if}}
+
+    {{~#with this.copytextParagraph.[0].paragraphBoxItem }}
+        {{~#if this.isImage}}
+            {{#if ../this.showFullSize.isTrue }}
+                {{#unless this.showFullSize.isTrue }}
+                    <div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
+                {{/unless}}
+            {{/if}}
+            {{> components/content/copytext/components/image/figure
+                    _cssClass=(if ../this.title "mt-5 mb-0" "my-0" )
+                    _type="story"
+                    _variant=(if this.showPortrait.isTrue "copytext-portrait" "100-copytext")
+                    _noAr=(if this.showPortrait.isTrue true false)
+                    _pictureAddClass=(if this.showPortrait.isTrue "" "ar-16-9")
+                    _cssClassCaption="mb-3"
+                    _isWebview=../../_isWebview}}
+            {{#if ../this.showFullSize.isTrue }}
+                {{#unless this.showFullSize.isTrue }}
+                    </div>
+                {{/unless}}
+            {{/if}}
+        {{/if~}}
+    {{/with}}
+
+    {{#with this.copytext}}
+        {{#each this.paragraph}}
+            {{#each this.text.split}}
+                {{#if this.isText}}
+                    <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+                {{/if}}
+                {{#if this.isUl}}
+                    <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+                {{/if}}
+                {{#if this.isOl}}
+                    <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+                {{/if}}
+            {{/each}}
+        {{/each}}
+    {{/with}}
+
+    {{~#block "subParagraphs"}}{{/block~}}
+
+    {{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
+
+{{/components/content/copytext/components/common/paragraphbox_wrapper}}

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

@@ -3,7 +3,7 @@
     <span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
 
     {{~#if this.paragraphProperties.[0].title}}
-        <h3 class="text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
+        <h3 class="-mt-1 text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
     {{/if}}
 
     {{~#with this.paragraphBoxItem }}
@@ -13,41 +13,14 @@
                     <div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
                 {{/unless}}
             {{/if}}
-            {{#if this.showPortrait.isTrue }}
-                {{~#if ../this.paragraphProperties.[0].title}}
-                    {{> components/content/copytext/components/image/figure
-                        _cssClass="mt-5 mb-0"
-                        _type="story"
-                        _variant="copytext-portrait"
-                        _noAr="true"
-                        _isWebview=../../_isWebview}}
-                {{else}}
-                    {{> components/content/copytext/components/image/figure
-                        _cssClass="my-0"
-                        _type="story"
-                        _variant="copytext-portrait"
-                        _noAr="true"
-                        _isWebview=../../_isWebview}}
-                {{/if}}
-            {{else}}
-                {{~#if ../this.paragraphProperties.[0].title}}
-                    {{> components/content/copytext/components/image/figure
-                        _cssClass="mt-5 mb-0"
-                        _cssClassCaption=""
-                        _type="story"
-                        _variant="100-copytext"
-                        _pictureAddClass="ar-16-9"
-                        _isWebview=../../_isWebview}}
-                {{else}}
-                    {{> components/content/copytext/components/image/figure
-                        _cssClass="my-0"
-                        _cssClassCaption=""
-                        _type="story"
-                        _variant="100-copytext"
-                        _pictureAddClass="ar-16-9"
-                        _isWebview=../../_isWebview}}
-                {{/if}}
-            {{/if}}
+            {{> components/content/copytext/components/image/figure
+                    _cssClass=(if ../this.paragraphProperties.[0].title "mt-5 mb-0" "my-0" )
+                    _type="story"
+                    _variant=(if this.showPortrait.isTrue "copytext-portrait" "100-copytext")
+                    _noAr=(if this.showPortrait.isTrue true false)
+                    _pictureAddClass=(if this.showPortrait.isTrue "" "ar-16-9")
+                    _cssClassCaption="mb-3"
+                    _isWebview=../../_isWebview}}
             {{#if ../paragraphProperties.[0].showFullSize }}
                 {{#unless this.showFullSize.isTrue }}
                     </div>
@@ -58,13 +31,13 @@
 
     {{#each this.text.split}}
         {{#if this.isText}}
-            <p class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
+            <p class="mt-4 text-base copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
         {{/if}}
         {{#if this.isUl}}
-            <ul class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} overflow-hidden pl-9 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
+            <ul class="pl-5 mt-4 overflow-hidden text-base list-disc copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
         {{/if}}
         {{#if this.isOl}}
-            <ol class="copytextParagraphDS {{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} overflow-hidden pl-9 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
+            <ol class="pl-5 mt-4 overflow-hidden text-base list-decimal copytextParagraphDS sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
         {{/if}}
     {{/each}}
     {{~#block "subParagraphs"}}{{/block~}}

package/dist/assets/icons/publictransport/svgmap/Auto.min.svg

@@ -1 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 30 35" xml:space="preserve"><path d="M26.4 10c-.3-1-1.2-1.7-2.3-1.7H6C4.9 8.3 4 9 3.7 10L.3 19.8v4.9l1.6 6.6V33c0 .9.7 1.6 1.6 1.6h1.6c.9 0 1.6-.7 1.6-1.6v-1.6h16.4V33c0 .9.7 1.6 1.6 1.6h1.6c.9 0 1.6-.7 1.6-1.6v-1.6l1.6-6.6v-4.9L26.4 10zM6 26.4c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm18 0c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zM3.6 18.2L6 10.8h18l2.5 7.4H3.6z"/></svg>

package/dist/assets/icons/publictransport/svgmap/Bahn.min.svg

@@ -1 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 30 35" xml:space="preserve"><path d="M15 .4C3.1.4 3.1 9.3 3.1 10.8v15.6c0 2.9 2.3 5.2 5.2 5.2l-2.2 2.2v.7h3.3l3-3H18l3 3h3v-.7l-2.2-2.2c2.9 0 5.2-2.3 5.2-5.2V10.8C26.9 9.3 26.9.4 15 .4zM8.3 28.7c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2s2.2 1 2.2 2.2c0 1.2-1 2.2-2.2 2.2zm5.2-16.4H6.1l1.5-5.9h5.9v5.9zm3 0v-6h5.9l1.5 5.9h-7.4zm5.2 16.4c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.2-1 2.2-2.2 2.2z"/></svg>

package/dist/assets/icons/publictransport/svgmap/Bus.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25"><defs><path id="a" d="M1.25 4.667h25v25h-25z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><circle cx="12.5" cy="12.5" r="12.5" fill="#a3047a"/><g fill="#fff"><path d="M19.898 7.77H5.597a.427.427 0 00-.423.376 9255.478 9255.478 0 01-.499 4.268v2.028a.427.427 0 00.426.426l1.333-.001a.098.098 0 00.093-.064 2.1 2.1 0 013.938-.001.1.1 0 00.094.065l3.779-.001a.097.097 0 00.092-.064 2.098 2.098 0 013.94 0 .098.098 0 00.092.065H19.9a.427.427 0 00.426-.426V8.195a.429.429 0 00-.428-.425zM7.586 12.424a.094.094 0 01-.069.029l-1.952.018a.096.096 0 01-.073-.033.094.094 0 01-.025-.076l.417-3.652a.099.099 0 01.098-.088h1.444c.054 0 .098.042.099.097l.09 3.633a.095.095 0 01-.029.072zm3.86-.981c0 .026-.01.052-.028.07s-.044.029-.069.029H8.625a.098.098 0 01-.098-.099V8.721c0-.026.011-.051.029-.07a.098.098 0 01.069-.028h2.724c.025 0 .051.011.069.028a.1.1 0 01.028.07v2.722zm3.919 0c0 .026-.01.052-.029.07a.095.095 0 01-.07.029h-2.723a.105.105 0 01-.07-.029.1.1 0 01-.027-.07V8.721c0-.026.01-.051.027-.07a.105.105 0 01.07-.028h2.723a.1.1 0 01.07.028c.02.02.029.044.029.07v2.722zm3.918 0c0 .026-.01.052-.027.07a.102.102 0 01-.07.029h-2.723a.097.097 0 01-.07-.029.094.094 0 01-.029-.07V8.721c0-.026.01-.051.029-.07a.098.098 0 01.07-.028h2.723c.025 0 .051.011.07.028.018.02.027.044.027.07v2.722z"/><circle cx="8.549" cy="15.609" r="1.621"/><circle cx="16.451" cy="15.61" r="1.621"/></g></svg>

package/dist/assets/icons/publictransport/svgmap/Faehre.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5" fill="#8166a1"/><path d="M19.97 13.106a.679.679 0 00-.676-.599l-1.549.003-1.291-2.65a.34.34 0 00-.297-.193l-4.278-.15a.097.097 0 01-.078-.045c-.242-.367-1.949-2.977-1.949-2.977-.08-.121-.225-.18-.365-.147s-.246.149-.266.292l-.205 1.564a.09.09 0 01-.039.067 4.664 4.664 0 00-1.635 2.41c-.148.523-.273 1.444-.325 1.85l-2.161.004a.1.1 0 00-.083.045.097.097 0 00-.005.095l1.683 3.54c.111.236.35.389.611.391 1.904.025 9.61.111 11.603-.004a4.33 4.33 0 00.732-.1c.543-.133.902-.65.836-1.207l-.263-2.189zM7.713 12.53c.053-.418.162-1.201.292-1.661.412-1.451 1.51-2.133 1.51-2.133a.346.346 0 00.16-.248l.076-.571a.095.095 0 01.074-.083.095.095 0 01.105.041l1.42 2.168a.343.343 0 00.275.156l4.241.148c.035 0 .068.021.084.055l1.028 2.11-9.265.018z" fill="#fff"/></svg>

package/dist/assets/icons/publictransport/svgmap/Regio-NVV.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5" fill="#009892"/><path d="M15.005 18.309a.099.099 0 00-.098.098v1.451c0 .055.044.098.098.098h.656a.098.098 0 00.098-.098v-1.451a.099.099 0 00-.098-.098h-.656zm2.556-2.346c.017-2.076.081-5.201.096-5.914a1.719 1.719 0 00-.023-.312c-.179-.979-.649-2.333-1.122-3.187-.44-.795-.877-1.116-1.841-1.315-.684-.141-2.17-.19-2.17-.19-.777.003-1.476.047-2.17.19-.964.199-1.4.52-1.842 1.315-.472.854-.943 2.209-1.122 3.187a1.712 1.712 0 00-.023.312c.014.713.079 3.838.096 5.914a1.93 1.93 0 001.929 1.912h6.264a1.93 1.93 0 001.928-1.912zM8.17 9.93a.096.096 0 01-.017-.086l.713-2.504a.099.099 0 01.095-.071h3.085c.055 0 .099.044.099.098V9.87a.098.098 0 01-.099.098H8.248a.094.094 0 01-.078-.038zm1.771 6.959a.89.89 0 11.001-1.78.89.89 0 01-.001 1.78zm2.559-4.54a.889.889 0 110-1.778.889.889 0 010 1.778zm2.741 4.54a.89.89 0 11.001-1.78.89.89 0 01-.001 1.78zm1.59-6.959a.101.101 0 01-.078.039h-3.799a.098.098 0 01-.099-.098V7.368c0-.054.044-.098.099-.098h3.085c.044 0 .083.029.095.071l.713 2.503a.099.099 0 01-.016.086zm-7.492 8.379a.098.098 0 00-.097.098v1.451c0 .055.043.098.097.098h.656a.098.098 0 00.098-.098v-1.451a.099.099 0 00-.098-.098h-.656z" fill="#fff"/></svg>

package/dist/assets/icons/publictransport/svgmap/Regio-RMV.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><path d="M15.005 18.309a.099.099 0 00-.098.098v1.451c0 .055.044.098.098.098h.656a.098.098 0 00.098-.098v-1.451a.099.099 0 00-.098-.098h-.656zm2.556-2.346c.017-2.076.081-5.201.096-5.914a1.719 1.719 0 00-.023-.312c-.179-.979-.649-2.333-1.122-3.187-.44-.795-.877-1.116-1.841-1.315-.684-.141-2.17-.19-2.17-.19-.777.003-1.476.047-2.17.19-.964.199-1.4.52-1.842 1.315-.472.854-.943 2.209-1.122 3.187a1.712 1.712 0 00-.023.312c.014.713.079 3.838.096 5.914a1.93 1.93 0 001.929 1.912h6.264a1.93 1.93 0 001.928-1.912zM8.17 9.93a.096.096 0 01-.017-.086l.713-2.504a.099.099 0 01.095-.071h3.085c.055 0 .099.044.099.098V9.87a.098.098 0 01-.099.098H8.248a.094.094 0 01-.078-.038zm1.771 6.959a.89.89 0 11.001-1.78.89.89 0 01-.001 1.78zm2.559-4.54a.889.889 0 110-1.778.889.889 0 010 1.778zm2.741 4.54a.89.89 0 11.001-1.78.89.89 0 01-.001 1.78zm1.59-6.959a.101.101 0 01-.078.039h-3.799a.098.098 0 01-.099-.098V7.368c0-.054.044-.098.099-.098h3.085c.044 0 .083.029.095.071l.713 2.503a.099.099 0 01-.016.086zm-7.492 8.379a.098.098 0 00-.097.098v1.451c0 .055.043.098.097.098h.656a.098.098 0 00.098-.098v-1.451a.099.099 0 00-.098-.098h-.656z" fill="#fff"/></svg>

package/dist/assets/icons/publictransport/svgmap/S-Bahn.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5" fill="#009252"/><path d="M15.98 11.817c-2.529-1.407-3.91-.746-5.294-2.079-.834-.799-.369-2.251 1.455-2.191 2.466.079 4.631 2.199 4.631 2.199V7.498c-3.381-2.24-6.188-1.727-7.606-.687-2.21 1.614-2.735 5.217.735 6.672 1.682.705 3.089.792 3.888 1.136.927.398 1.468 2.23-.878 2.639-1.843.318-3.794-.77-5.347-2.672.015.033 0 2.594 0 2.594 2.593 2.16 7.122 3.055 9.489-.496 1.131-1.692.365-4.068-1.073-4.867z" fill="#fff"/></svg>

package/dist/assets/icons/publictransport/svgmap/Taxi.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5" fill="#d5a602"/><circle cx="17.496" cy="13.542" r="1.016" fill="none"/><path d="M18.227 11.068l-1.042-2.88a.768.768 0 00-.722-.507H8.537a.77.77 0 00-.722.507l-1.042 2.88h11.454z" fill="none"/><circle cx="7.574" cy="13.542" r="1.016" fill="none"/><path d="M6.845 15.913h11.311c.542 0 1.01-.408 1.117-.975.164-.848.22-1.619.155-2.463-.037-.488-.241-.975-.247-.99l-1.285-3.554a1.524 1.524 0 00-1.433-1.006H8.537c-.642 0-1.215.402-1.433 1.006a3801.64 3801.64 0 01-1.286 3.554c-.004.016-.209.502-.246.99a9.012 9.012 0 00.154 2.463c.109.567.577.975 1.119.975zm10.651-1.355a1.016 1.016 0 110-2.032 1.016 1.016 0 010 2.032zm-9.681-6.37a.768.768 0 01.722-.507h7.926a.77.77 0 01.722.507l1.042 2.88H6.774l1.041-2.88zm-.241 4.338a1.016 1.016 0 110 2.032 1.016 1.016 0 010-2.032zm1.462 3.886H7.672a.101.101 0 00-.069.027.102.102 0 00-.028.07v1.223c0 .188.153.342.343.342h.874a.343.343 0 00.343-.342v-1.223a.105.105 0 00-.028-.07.108.108 0 00-.071-.027zm8.126 0h-1.363a.104.104 0 00-.07.027.1.1 0 00-.027.07v1.223c0 .188.152.342.342.342h.875a.342.342 0 00.342-.342v-1.223a.104.104 0 00-.027-.07.113.113 0 00-.072-.027z" fill="#fff"/></svg>

package/dist/assets/icons/publictransport/svgmap/Tram-NVV.min.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5" fill="#ee1c24"/><path d="M19.619 9.494h-9.01l1.812-1.812a.098.098 0 000-.137L9.563 4.688a.098.098 0 00-.137 0L6.568 7.546a.097.097 0 000 .137l1.811 1.812H5.82a.794.794 0 00-.793.733c-.111 1.418-.354 4.493-.441 5.627a.399.399 0 00.398.433h.701a.995.995 0 001.891.134.995.995 0 001.885-.624.098.098 0 01.094-.123h5.532c.03 0 .06.015.077.038a.1.1 0 01.017.085.995.995 0 001.886.624.995.995 0 001.89-.134h1.06a.402.402 0 00.4-.4v-5.597a.797.797 0 00-.798-.797zM7.543 15.008a.095.095 0 01-.07.029H5.516a.098.098 0 01-.072-.031.095.095 0 01-.027-.073l.289-4.705a.099.099 0 01.098-.093h1.553a.1.1 0 01.1.096l.117 4.706a.11.11 0 01-.031.071zm.1-7.45a.098.098 0 010-.137l1.725-1.725a.097.097 0 01.137 0l1.725 1.725a.097.097 0 010 .137L9.504 9.283a.098.098 0 01-.137 0L7.643 7.558zm2.845 4.738a.1.1 0 01-.099.099H8.327a.099.099 0 01-.099-.099v-2.063a.1.1 0 01.099-.099h2.063a.1.1 0 01.099.099v2.063zm3.033 0a.099.099 0 01-.099.099h-2.063a.099.099 0 01-.099-.099v-2.063a.1.1 0 01.099-.099h2.063a.1.1 0 01.099.099v2.063zm3.032 0a.099.099 0 01-.099.099h-2.063a.099.099 0 01-.099-.099v-2.063a.1.1 0 01.099-.099h2.063a.1.1 0 01.099.099v2.063zm3.032 2.577a.099.099 0 01-.099.099h-2.063a.099.099 0 01-.099-.099v-4.64a.1.1 0 01.099-.099h2.063a.1.1 0 01.099.099v4.64z" fill="#fff"/></svg>