hr-design-system-handlebars 1.52.21 → 1.52.23
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 +24 -0
- package/dist/assets/index.css +48 -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,27 @@
|
|
|
1
|
+
# v1.52.23 (Wed Jan 31 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- change spaces in fuckin infobox [#824](https://github.com/mumprod/hr-design-system-handlebars/pull/824) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.52.22 (Tue Jan 30 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- add copytext-infobox-component [#823](https://github.com/mumprod/hr-design-system-handlebars/pull/823) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.52.21 (Tue Jan 30 2024)
|
|
2
26
|
|
|
3
27
|
#### 🐛 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
|
}
|
|
@@ -1333,6 +1350,9 @@ a.link {
|
|
|
1333
1350
|
.mb-10 {
|
|
1334
1351
|
margin-bottom: 2.5rem;
|
|
1335
1352
|
}
|
|
1353
|
+
.mb-12 {
|
|
1354
|
+
margin-bottom: 3rem;
|
|
1355
|
+
}
|
|
1336
1356
|
.mb-3 {
|
|
1337
1357
|
margin-bottom: 0.75rem;
|
|
1338
1358
|
}
|
|
@@ -2107,6 +2127,9 @@ a.link {
|
|
|
2107
2127
|
.border-l-2 {
|
|
2108
2128
|
border-left-width: 2px;
|
|
2109
2129
|
}
|
|
2130
|
+
.border-l-4 {
|
|
2131
|
+
border-left-width: 4px;
|
|
2132
|
+
}
|
|
2110
2133
|
.border-r {
|
|
2111
2134
|
border-right-width: 1px;
|
|
2112
2135
|
}
|
|
@@ -3273,7 +3296,7 @@ a.link {
|
|
|
3273
3296
|
border-bottom-color: var(--color-secondary-ds);
|
|
3274
3297
|
}
|
|
3275
3298
|
.counter-reset {
|
|
3276
|
-
counter-reset:
|
|
3299
|
+
counter-reset: cnt1706693836791;
|
|
3277
3300
|
}
|
|
3278
3301
|
.hyphens-auto {
|
|
3279
3302
|
-webkit-hyphens: auto;
|
|
@@ -3575,7 +3598,7 @@ a.link {
|
|
|
3575
3598
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3576
3599
|
}
|
|
3577
3600
|
.-ordered {
|
|
3578
|
-
counter-increment:
|
|
3601
|
+
counter-increment: cnt1706693836791 1;
|
|
3579
3602
|
}
|
|
3580
3603
|
.-ordered::before {
|
|
3581
3604
|
position: absolute;
|
|
@@ -3591,7 +3614,7 @@ a.link {
|
|
|
3591
3614
|
letter-spacing: .0125em;
|
|
3592
3615
|
--tw-text-opacity: 1;
|
|
3593
3616
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3594
|
-
content: counter(
|
|
3617
|
+
content: counter(cnt1706693836791);
|
|
3595
3618
|
}
|
|
3596
3619
|
/*! ****************************/
|
|
3597
3620
|
/*! DataPolicy stuff */
|
|
@@ -5693,6 +5716,15 @@ a.link {
|
|
|
5693
5716
|
margin-right: 2rem;
|
|
5694
5717
|
}
|
|
5695
5718
|
|
|
5719
|
+
.sm\:my-14 {
|
|
5720
|
+
margin-top: 3.5rem;
|
|
5721
|
+
margin-bottom: 3.5rem;
|
|
5722
|
+
}
|
|
5723
|
+
|
|
5724
|
+
.sm\:mb-14 {
|
|
5725
|
+
margin-bottom: 3.5rem;
|
|
5726
|
+
}
|
|
5727
|
+
|
|
5696
5728
|
.sm\:mb-7 {
|
|
5697
5729
|
margin-bottom: 1.75rem;
|
|
5698
5730
|
}
|
|
@@ -5701,6 +5733,10 @@ a.link {
|
|
|
5701
5733
|
margin-left: 1rem;
|
|
5702
5734
|
}
|
|
5703
5735
|
|
|
5736
|
+
.sm\:ml-6 {
|
|
5737
|
+
margin-left: 1.5rem;
|
|
5738
|
+
}
|
|
5739
|
+
|
|
5704
5740
|
.sm\:ml-8 {
|
|
5705
5741
|
margin-left: 2rem;
|
|
5706
5742
|
}
|
|
@@ -5725,6 +5761,10 @@ a.link {
|
|
|
5725
5761
|
margin-top: 3rem;
|
|
5726
5762
|
}
|
|
5727
5763
|
|
|
5764
|
+
.sm\:mt-7 {
|
|
5765
|
+
margin-top: 1.75rem;
|
|
5766
|
+
}
|
|
5767
|
+
|
|
5728
5768
|
.sm\:block {
|
|
5729
5769
|
display: block;
|
|
5730
5770
|
}
|
|
@@ -5804,6 +5844,11 @@ a.link {
|
|
|
5804
5844
|
padding-right: 1rem;
|
|
5805
5845
|
}
|
|
5806
5846
|
|
|
5847
|
+
.sm\:px-6 {
|
|
5848
|
+
padding-left: 1.5rem;
|
|
5849
|
+
padding-right: 1.5rem;
|
|
5850
|
+
}
|
|
5851
|
+
|
|
5807
5852
|
.sm\:px-8 {
|
|
5808
5853
|
padding-left: 2rem;
|
|
5809
5854
|
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 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both my-12 sm:my-14 {{else}}mb-12 sm:mb-14 sm:mt-7 mt-12 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 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both my-12 sm:my-14 {{else}}mb-12 sm:mb-14 sm:mt-7 mt-12 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.23",
|
|
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 border-l-4 border-gray-boulder overflow-auto {{#if this.paragraphProperties.[0].showFullSize }}clear-both my-12 sm:my-14 {{else}}mb-12 sm:mb-14 sm:mt-7 mt-12 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."}]}}]}
|