hr-design-system-handlebars 1.52.21 → 1.52.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/assets/index.css +37 -3
- package/dist/views/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/dist/views/components/content/copytext/components/image/figure.hbs +1 -1
- package/dist/views/components/content/copytext/components/infobox.hbs +52 -5
- package/dist/views_static/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/image/figure.hbs +1 -1
- package/dist/views_static/components/content/copytext/components/infobox.hbs +52 -5
- package/package.json +1 -1
- package/src/assets/fixtures/content/copytext/copytext_infobox.json +150 -0
- package/src/stories/views/components/content/copytext/components/image/figcaption.hbs +1 -1
- package/src/stories/views/components/content/copytext/components/image/figure.hbs +1 -1
- package/src/stories/views/components/content/copytext/components/infobox.hbs +52 -5
- package/src/stories/views/components/content/copytext/copytext.stories.js +7 -0
- package/src/stories/views/components/content/copytext/fixtures/copytext_infobox.json +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v1.52.22 (Tue Jan 30 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- add copytext-infobox-component [#823](https://github.com/mumprod/hr-design-system-handlebars/pull/823) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.52.21 (Tue Jan 30 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1220,6 +1220,10 @@ a.link {
|
|
|
1220
1220
|
.m-4 {
|
|
1221
1221
|
margin: 1rem;
|
|
1222
1222
|
}
|
|
1223
|
+
.\!mx-0 {
|
|
1224
|
+
margin-left: 0px !important;
|
|
1225
|
+
margin-right: 0px !important;
|
|
1226
|
+
}
|
|
1223
1227
|
.-mx-4 {
|
|
1224
1228
|
margin-left: -1rem;
|
|
1225
1229
|
margin-right: -1rem;
|
|
@@ -1260,6 +1264,10 @@ a.link {
|
|
|
1260
1264
|
margin-left: 1px;
|
|
1261
1265
|
margin-right: 1px;
|
|
1262
1266
|
}
|
|
1267
|
+
.my-12 {
|
|
1268
|
+
margin-top: 3rem;
|
|
1269
|
+
margin-bottom: 3rem;
|
|
1270
|
+
}
|
|
1263
1271
|
.my-2 {
|
|
1264
1272
|
margin-top: 0.5rem;
|
|
1265
1273
|
margin-bottom: 0.5rem;
|
|
@@ -1288,9 +1296,15 @@ a.link {
|
|
|
1288
1296
|
margin-top: 1.75rem;
|
|
1289
1297
|
margin-bottom: 1.75rem;
|
|
1290
1298
|
}
|
|
1299
|
+
.\!mb-0 {
|
|
1300
|
+
margin-bottom: 0px !important;
|
|
1301
|
+
}
|
|
1291
1302
|
.\!mt-4 {
|
|
1292
1303
|
margin-top: 1rem !important;
|
|
1293
1304
|
}
|
|
1305
|
+
.\!mt-5 {
|
|
1306
|
+
margin-top: 1.25rem !important;
|
|
1307
|
+
}
|
|
1294
1308
|
.-mb-1 {
|
|
1295
1309
|
margin-bottom: -0.25rem;
|
|
1296
1310
|
}
|
|
@@ -1324,6 +1338,9 @@ a.link {
|
|
|
1324
1338
|
.-mt-\[33px\] {
|
|
1325
1339
|
margin-top: -33px;
|
|
1326
1340
|
}
|
|
1341
|
+
.-mt-\[4px\] {
|
|
1342
|
+
margin-top: -4px;
|
|
1343
|
+
}
|
|
1327
1344
|
.-mt-px {
|
|
1328
1345
|
margin-top: -1px;
|
|
1329
1346
|
}
|
|
@@ -2107,6 +2124,9 @@ a.link {
|
|
|
2107
2124
|
.border-l-2 {
|
|
2108
2125
|
border-left-width: 2px;
|
|
2109
2126
|
}
|
|
2127
|
+
.border-l-4 {
|
|
2128
|
+
border-left-width: 4px;
|
|
2129
|
+
}
|
|
2110
2130
|
.border-r {
|
|
2111
2131
|
border-right-width: 1px;
|
|
2112
2132
|
}
|
|
@@ -3273,7 +3293,7 @@ a.link {
|
|
|
3273
3293
|
border-bottom-color: var(--color-secondary-ds);
|
|
3274
3294
|
}
|
|
3275
3295
|
.counter-reset {
|
|
3276
|
-
counter-reset:
|
|
3296
|
+
counter-reset: cnt1706637537255;
|
|
3277
3297
|
}
|
|
3278
3298
|
.hyphens-auto {
|
|
3279
3299
|
-webkit-hyphens: auto;
|
|
@@ -3575,7 +3595,7 @@ a.link {
|
|
|
3575
3595
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3576
3596
|
}
|
|
3577
3597
|
.-ordered {
|
|
3578
|
-
counter-increment:
|
|
3598
|
+
counter-increment: cnt1706637537255 1;
|
|
3579
3599
|
}
|
|
3580
3600
|
.-ordered::before {
|
|
3581
3601
|
position: absolute;
|
|
@@ -3591,7 +3611,7 @@ a.link {
|
|
|
3591
3611
|
letter-spacing: .0125em;
|
|
3592
3612
|
--tw-text-opacity: 1;
|
|
3593
3613
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3594
|
-
content: counter(
|
|
3614
|
+
content: counter(cnt1706637537255);
|
|
3595
3615
|
}
|
|
3596
3616
|
/*! ****************************/
|
|
3597
3617
|
/*! DataPolicy stuff */
|
|
@@ -5693,6 +5713,11 @@ a.link {
|
|
|
5693
5713
|
margin-right: 2rem;
|
|
5694
5714
|
}
|
|
5695
5715
|
|
|
5716
|
+
.sm\:my-16 {
|
|
5717
|
+
margin-top: 4rem;
|
|
5718
|
+
margin-bottom: 4rem;
|
|
5719
|
+
}
|
|
5720
|
+
|
|
5696
5721
|
.sm\:mb-7 {
|
|
5697
5722
|
margin-bottom: 1.75rem;
|
|
5698
5723
|
}
|
|
@@ -5701,6 +5726,10 @@ a.link {
|
|
|
5701
5726
|
margin-left: 1rem;
|
|
5702
5727
|
}
|
|
5703
5728
|
|
|
5729
|
+
.sm\:ml-6 {
|
|
5730
|
+
margin-left: 1.5rem;
|
|
5731
|
+
}
|
|
5732
|
+
|
|
5704
5733
|
.sm\:ml-8 {
|
|
5705
5734
|
margin-left: 2rem;
|
|
5706
5735
|
}
|
|
@@ -5804,6 +5833,11 @@ a.link {
|
|
|
5804
5833
|
padding-right: 1rem;
|
|
5805
5834
|
}
|
|
5806
5835
|
|
|
5836
|
+
.sm\:px-6 {
|
|
5837
|
+
padding-left: 1.5rem;
|
|
5838
|
+
padding-right: 1.5rem;
|
|
5839
|
+
}
|
|
5840
|
+
|
|
5807
5841
|
.sm\:px-8 {
|
|
5808
5842
|
padding-left: 2rem;
|
|
5809
5843
|
padding-right: 2rem;
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
|
|
6
6
|
{{/if}}
|
|
7
7
|
{{#unless _voting-option}}
|
|
8
|
-
{{~> components/content/copytext/components/image/figcaption~}}
|
|
8
|
+
{{~> components/content/copytext/components/image/figcaption _cssClassCaption=_cssClassCaption~}}
|
|
9
9
|
{{/unless}}
|
|
10
10
|
</figure>
|
|
@@ -1,5 +1,52 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
{{
|
|
4
|
-
|
|
5
|
-
{{
|
|
1
|
+
<div class="ml-1 sm:ml-6 px-4 sm:px-6 my-12 sm:my-16 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both {{else}}mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
|
|
2
|
+
|
|
3
|
+
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{#if this.showPortrait.isTrue }}
|
|
15
|
+
{{> components/content/copytext/components/image/figure
|
|
16
|
+
_cssClass=""
|
|
17
|
+
_type="story"
|
|
18
|
+
_variant="copytext-portrait"
|
|
19
|
+
_noAr="true"
|
|
20
|
+
_isWebview=../../_isWebview}}
|
|
21
|
+
{{else}}
|
|
22
|
+
{{> components/content/copytext/components/image/figure
|
|
23
|
+
_cssClass="!mt-5 !mb-0 !mx-0"
|
|
24
|
+
_cssClassCaption="!mx-0"
|
|
25
|
+
_type="story"
|
|
26
|
+
_variant="100-copytext"
|
|
27
|
+
_pictureAddClass="ar-16-9"
|
|
28
|
+
_isWebview=../../_isWebview}}
|
|
29
|
+
{{/if}}
|
|
30
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#each this.text.split}}
|
|
39
|
+
{{#if this.isText}}
|
|
40
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
41
|
+
{{/if}}
|
|
42
|
+
{{#if this.isUl}}
|
|
43
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
44
|
+
{{/if}}
|
|
45
|
+
{{#if this.isOl}}
|
|
46
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
47
|
+
{{/if}}
|
|
48
|
+
{{/each}}
|
|
49
|
+
|
|
50
|
+
<span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
|
|
6
6
|
{{/if}}
|
|
7
7
|
{{#unless _voting-option}}
|
|
8
|
-
{{~> components/content/copytext/components/image/figcaption~}}
|
|
8
|
+
{{~> components/content/copytext/components/image/figcaption _cssClassCaption=_cssClassCaption~}}
|
|
9
9
|
{{/unless}}
|
|
10
10
|
</figure>
|
|
@@ -1,5 +1,52 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
{{
|
|
4
|
-
|
|
5
|
-
{{
|
|
1
|
+
<div class="ml-1 sm:ml-6 px-4 sm:px-6 my-12 sm:my-16 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both {{else}}mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
|
|
2
|
+
|
|
3
|
+
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{#if this.showPortrait.isTrue }}
|
|
15
|
+
{{> components/content/copytext/components/image/figure
|
|
16
|
+
_cssClass=""
|
|
17
|
+
_type="story"
|
|
18
|
+
_variant="copytext-portrait"
|
|
19
|
+
_noAr="true"
|
|
20
|
+
_isWebview=../../_isWebview}}
|
|
21
|
+
{{else}}
|
|
22
|
+
{{> components/content/copytext/components/image/figure
|
|
23
|
+
_cssClass="!mt-5 !mb-0 !mx-0"
|
|
24
|
+
_cssClassCaption="!mx-0"
|
|
25
|
+
_type="story"
|
|
26
|
+
_variant="100-copytext"
|
|
27
|
+
_pictureAddClass="ar-16-9"
|
|
28
|
+
_isWebview=../../_isWebview}}
|
|
29
|
+
{{/if}}
|
|
30
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#each this.text.split}}
|
|
39
|
+
{{#if this.isText}}
|
|
40
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
41
|
+
{{/if}}
|
|
42
|
+
{{#if this.isUl}}
|
|
43
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
44
|
+
{{/if}}
|
|
45
|
+
{{#if this.isOl}}
|
|
46
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
47
|
+
{{/if}}
|
|
48
|
+
{{/each}}
|
|
49
|
+
|
|
50
|
+
<span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
|
|
51
|
+
|
|
52
|
+
</div>
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "1.52.
|
|
9
|
+
"version": "1.52.22",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
{
|
|
2
|
+
"copytextParagraph": [
|
|
3
|
+
{
|
|
4
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
5
|
+
"isHeadline": true,
|
|
6
|
+
"text": "Copytext mit Infobox"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
13
|
+
"isInfoBox": true,
|
|
14
|
+
"text": {
|
|
15
|
+
"split": [
|
|
16
|
+
{
|
|
17
|
+
"isText": true,
|
|
18
|
+
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
},
|
|
22
|
+
"paragraphProperties": [
|
|
23
|
+
{
|
|
24
|
+
"title":"Volle Breite, mit Bild über halbe Breite",
|
|
25
|
+
"showFullSize":true
|
|
26
|
+
}
|
|
27
|
+
],
|
|
28
|
+
"paragraphBoxItem": {
|
|
29
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
30
|
+
"@->contentpath": "copytext_image_50",
|
|
31
|
+
"@->replaceToken": [
|
|
32
|
+
{
|
|
33
|
+
"@->token": "image",
|
|
34
|
+
"@->value": "buchmesse-fahnen-102"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
44
|
+
"isInfoBox": true,
|
|
45
|
+
"text": {
|
|
46
|
+
"split": [
|
|
47
|
+
{
|
|
48
|
+
"isText": true,
|
|
49
|
+
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
},
|
|
53
|
+
"paragraphProperties": [
|
|
54
|
+
{
|
|
55
|
+
"title":"Volle Breite, mit Bild über volle Breite",
|
|
56
|
+
"showFullSize":true
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"paragraphBoxItem": {
|
|
60
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
61
|
+
"@->contentpath": "copytext_image_100",
|
|
62
|
+
"@->replaceToken": [
|
|
63
|
+
{
|
|
64
|
+
"@->token": "image",
|
|
65
|
+
"@->value": "buchmesse-fahnen-102"
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
75
|
+
"isInfoBox": true,
|
|
76
|
+
"text": {
|
|
77
|
+
"split": [
|
|
78
|
+
{
|
|
79
|
+
"isText": true,
|
|
80
|
+
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
"paragraphProperties": [
|
|
85
|
+
{
|
|
86
|
+
"title":"Halbe Breite, mit Bild über halbe oder volle Breite",
|
|
87
|
+
"showFullSize":false
|
|
88
|
+
}
|
|
89
|
+
],
|
|
90
|
+
"paragraphBoxItem": {
|
|
91
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
92
|
+
"@->contentpath": "copytext_image_50",
|
|
93
|
+
"@->replaceToken": [
|
|
94
|
+
{
|
|
95
|
+
"@->token": "image",
|
|
96
|
+
"@->value": "buchmesse-fahnen-102"
|
|
97
|
+
}
|
|
98
|
+
]
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
109
|
+
"isInfoBox": true,
|
|
110
|
+
"text": {
|
|
111
|
+
"split": [
|
|
112
|
+
{
|
|
113
|
+
"isText": true,
|
|
114
|
+
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
},
|
|
118
|
+
"paragraphProperties": [
|
|
119
|
+
{
|
|
120
|
+
"title":"Volle Breite, ohne Bild",
|
|
121
|
+
"showFullSize":true
|
|
122
|
+
}
|
|
123
|
+
]
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
"structuredDataSsi": "<!--#include virtual='structuredDataSsiPath' -->",
|
|
130
|
+
"isInfoBox": true,
|
|
131
|
+
"text": {
|
|
132
|
+
"split": [
|
|
133
|
+
{
|
|
134
|
+
"isText": true,
|
|
135
|
+
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
},
|
|
139
|
+
"paragraphProperties": [
|
|
140
|
+
{
|
|
141
|
+
"title":"Halbe Breite, ohne Bild",
|
|
142
|
+
"showFullSize":false
|
|
143
|
+
}
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
}
|
|
@@ -5,6 +5,6 @@
|
|
|
5
5
|
{{> components/base/image/responsive_image _type=_type _variant=_variant _addClass=_pictureAddClass _addClassImg="ar__content" _isWebview=_isWebview _noDelay=_noDelay}}
|
|
6
6
|
{{/if}}
|
|
7
7
|
{{#unless _voting-option}}
|
|
8
|
-
{{~> components/content/copytext/components/image/figcaption~}}
|
|
8
|
+
{{~> components/content/copytext/components/image/figcaption _cssClassCaption=_cssClassCaption~}}
|
|
9
9
|
{{/unless}}
|
|
10
10
|
</figure>
|
|
@@ -1,5 +1,52 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
{{
|
|
4
|
-
|
|
5
|
-
{{
|
|
1
|
+
<div class="ml-1 sm:ml-6 px-4 sm:px-6 my-12 sm:my-16 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both {{else}}mr-0 sm:mr-5 w-full sm:w-1/2 sm:float-left{{/if}}">
|
|
2
|
+
|
|
3
|
+
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
13
|
+
{{/if}}
|
|
14
|
+
{{#if this.showPortrait.isTrue }}
|
|
15
|
+
{{> components/content/copytext/components/image/figure
|
|
16
|
+
_cssClass=""
|
|
17
|
+
_type="story"
|
|
18
|
+
_variant="copytext-portrait"
|
|
19
|
+
_noAr="true"
|
|
20
|
+
_isWebview=../../_isWebview}}
|
|
21
|
+
{{else}}
|
|
22
|
+
{{> components/content/copytext/components/image/figure
|
|
23
|
+
_cssClass="!mt-5 !mb-0 !mx-0"
|
|
24
|
+
_cssClassCaption="!mx-0"
|
|
25
|
+
_type="story"
|
|
26
|
+
_variant="100-copytext"
|
|
27
|
+
_pictureAddClass="ar-16-9"
|
|
28
|
+
_isWebview=../../_isWebview}}
|
|
29
|
+
{{/if}}
|
|
30
|
+
{{#if ../paragraphProperties.[0].showFullSize }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
34
|
+
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#each this.text.split}}
|
|
39
|
+
{{#if this.isText}}
|
|
40
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
41
|
+
{{/if}}
|
|
42
|
+
{{#if this.isUl}}
|
|
43
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
44
|
+
{{/if}}
|
|
45
|
+
{{#if this.isOl}}
|
|
46
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
47
|
+
{{/if}}
|
|
48
|
+
{{/each}}
|
|
49
|
+
|
|
50
|
+
<span class="sr-only">{{loca "story_infobox_outro_sr" }}</span>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
@@ -7,6 +7,7 @@ import copytext_podcastepisode_json from './fixtures/copytext_podcastepisode.jso
|
|
|
7
7
|
import copytext_faq_json from './fixtures/copytext_faq.json'
|
|
8
8
|
import copytext_jobposting_json from './fixtures/copytext_jobposting.json'
|
|
9
9
|
import copytext_image_json from './fixtures/copytext_image.json'
|
|
10
|
+
import copytext_infobox_json from './fixtures/copytext_infobox.json'
|
|
10
11
|
|
|
11
12
|
const Template = ({ ...args }) => {
|
|
12
13
|
return copytext({ ...args })
|
|
@@ -41,6 +42,12 @@ export const WithImage = {
|
|
|
41
42
|
args: copytext_image_json,
|
|
42
43
|
}
|
|
43
44
|
|
|
45
|
+
export const WithInfobox = {
|
|
46
|
+
render: Template.bind({}),
|
|
47
|
+
name: 'Infobox',
|
|
48
|
+
args: copytext_infobox_json,
|
|
49
|
+
}
|
|
50
|
+
|
|
44
51
|
export const WithJobposting = {
|
|
45
52
|
render: Template.bind({}),
|
|
46
53
|
name: 'Jobposting',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"copytextParagraph":[{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isHeadline":true,"text":"Copytext mit Infobox"},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}]},"paragraphProperties":[{"title":"Volle Breite, mit Bild über halbe Breite","showFullSize":true}],"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":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}]},"paragraphProperties":[{"title":"Volle Breite, mit Bild über volle Breite","showFullSize":true}],"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"}]}}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}]},"paragraphProperties":[{"title":"Halbe Breite, mit Bild über halbe oder volle Breite","showFullSize":false}],"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":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}]},"paragraphProperties":[{"title":"Volle Breite, ohne Bild","showFullSize":true}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isInfoBox":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."}]},"paragraphProperties":[{"title":"Halbe Breite, ohne Bild","showFullSize":false}]},{"structuredDataSsi":"<!--#include virtual='structuredDataSsiPath' -->","isParagraph":true,"text":{"split":[{"isText":true,"text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <strong>tempor invidunt</strong> ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata <i>sanctus est Lorem ipsum</i> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href='#' class='link'>labore et dolore</a> magna aliquyam erat, sed diam voluptua."}]}}]}
|