hr-design-system-handlebars 1.57.8 → 1.57.10
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 +25 -0
- package/dist/assets/index.css +3 -21
- package/dist/views/components/content/copytext/components/contentbox/contentbox.hbs +11 -11
- package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +54 -11
- package/dist/views/components/content/copytext/components/infobox.hbs +4 -4
- package/dist/views_static/components/content/copytext/components/contentbox/contentbox.hbs +11 -11
- package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs +54 -11
- package/dist/views_static/components/content/copytext/components/infobox.hbs +4 -4
- package/package.json +1 -1
- package/src/assets/css/custom-components.css +0 -5
- package/src/assets/fixtures/content/copytext/components/contentbox/contentbox.json +16 -30
- package/src/stories/views/components/content/copytext/components/contentbox/contentbox.hbs +11 -11
- package/src/stories/views/components/content/copytext/components/contentbox/contentbox.stories.js +7 -0
- package/src/stories/views/components/content/copytext/components/contentbox/fixtures/contentbox.json +1 -1
- package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs +54 -11
- package/src/stories/views/components/content/copytext/components/infobox.hbs +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v1.57.10 (Wed Feb 14 2024)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- copytext bugfixes 3 [#844](https://github.com/mumprod/hr-design-system-handlebars/pull/844) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.57.9 (Wed Feb 14 2024)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- DPE-2842: contentbox new design [#843](https://github.com/mumprod/hr-design-system-handlebars/pull/843) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
|
|
18
|
+
|
|
19
|
+
#### Authors: 2
|
|
20
|
+
|
|
21
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
22
|
+
- selbaciri (saad.elbaciri@hr.de)
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v1.57.8 (Wed Feb 14 2024)
|
|
2
27
|
|
|
3
28
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -947,21 +947,6 @@ article.indexText ul {
|
|
|
947
947
|
list-style-type: disc;
|
|
948
948
|
padding-left: 1rem;
|
|
949
949
|
}
|
|
950
|
-
/* -------------------------COPYTEXT ------------------------------- */
|
|
951
|
-
a.link {
|
|
952
|
-
color: #006eb7;
|
|
953
|
-
color: var(--color-link);
|
|
954
|
-
-webkit-text-decoration-line: underline;
|
|
955
|
-
text-decoration-line: underline;
|
|
956
|
-
text-decoration-thickness: 1px;
|
|
957
|
-
}
|
|
958
|
-
a.link:hover {
|
|
959
|
-
text-decoration-thickness: 1px !important;
|
|
960
|
-
}
|
|
961
|
-
[class~='tw-dark'] a.link {
|
|
962
|
-
color: #006eb7;
|
|
963
|
-
color: var(--color-link-dark);
|
|
964
|
-
}
|
|
965
950
|
.sr-only {
|
|
966
951
|
position: absolute;
|
|
967
952
|
width: 1px;
|
|
@@ -1412,9 +1397,6 @@ a.link:hover {
|
|
|
1412
1397
|
.mt-4\.5 {
|
|
1413
1398
|
margin-top: 1.125rem;
|
|
1414
1399
|
}
|
|
1415
|
-
.mt-5 {
|
|
1416
|
-
margin-top: 1.25rem;
|
|
1417
|
-
}
|
|
1418
1400
|
.mt-6 {
|
|
1419
1401
|
margin-top: 1.5rem;
|
|
1420
1402
|
}
|
|
@@ -3253,7 +3235,7 @@ a.link:hover {
|
|
|
3253
3235
|
border-bottom-color: var(--color-secondary-ds);
|
|
3254
3236
|
}
|
|
3255
3237
|
.counter-reset {
|
|
3256
|
-
counter-reset:
|
|
3238
|
+
counter-reset: cnt1707924726107;
|
|
3257
3239
|
}
|
|
3258
3240
|
.hyphens-auto {
|
|
3259
3241
|
-webkit-hyphens: auto;
|
|
@@ -3576,7 +3558,7 @@ a.link:hover {
|
|
|
3576
3558
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
3577
3559
|
}
|
|
3578
3560
|
.-ordered {
|
|
3579
|
-
counter-increment:
|
|
3561
|
+
counter-increment: cnt1707924726107 1;
|
|
3580
3562
|
}
|
|
3581
3563
|
.-ordered::before {
|
|
3582
3564
|
position: absolute;
|
|
@@ -3592,7 +3574,7 @@ a.link:hover {
|
|
|
3592
3574
|
letter-spacing: .0125em;
|
|
3593
3575
|
--tw-text-opacity: 1;
|
|
3594
3576
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
3595
|
-
content: counter(
|
|
3577
|
+
content: counter(cnt1707924726107);
|
|
3596
3578
|
}
|
|
3597
3579
|
/*! ****************************/
|
|
3598
3580
|
/*! DataPolicy stuff */
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
{{
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
{{#if (isStorybook)}}
|
|
2
|
+
{{> components/content/copytext/components/contentbox/storybook-contentbox }}
|
|
3
|
+
{{else}}
|
|
4
|
+
<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}}">
|
|
5
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
6
|
+
{{#if this.title}}
|
|
7
|
+
<h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
8
|
+
{{/if}}
|
|
9
9
|
{{> modules/story/copytext-contentbox ~}}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/if}}
|
package/dist/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -1,15 +1,58 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
|
|
2
|
+
|
|
3
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.copytextParagraph.[0].paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
6
13
|
{{/if}}
|
|
7
|
-
{{#if this.
|
|
8
|
-
|
|
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}}
|
|
9
29
|
{{/if}}
|
|
10
|
-
{{#if this.
|
|
11
|
-
|
|
30
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
12
34
|
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#with this.copytext}}
|
|
39
|
+
{{#each this.paragraph}}
|
|
40
|
+
{{~#each this.text.split }}
|
|
41
|
+
{{#if this.isText}}
|
|
42
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{#if this.isUl}}
|
|
45
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
46
|
+
{{/if}}
|
|
47
|
+
{{#if this.isOl}}
|
|
48
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
49
|
+
{{/if}}
|
|
50
|
+
{{/each}}
|
|
13
51
|
{{/each}}
|
|
14
|
-
{{/
|
|
15
|
-
|
|
52
|
+
{{/with}}
|
|
53
|
+
|
|
54
|
+
{{~#block "subParagraphs"}}{{/block~}}
|
|
55
|
+
|
|
56
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
57
|
+
|
|
58
|
+
{{/components/content/copytext/components/common/paragraphbox_frame}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
4
|
|
|
5
5
|
{{~#if this.paragraphProperties.[0].title}}
|
|
6
|
-
<h3 class="text-lg
|
|
6
|
+
<h3 class="-mt-1 text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
7
7
|
{{/if}}
|
|
8
8
|
|
|
9
9
|
{{~#with this.paragraphBoxItem }}
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
|
|
59
59
|
{{#each this.text.split}}
|
|
60
60
|
{{#if this.isText}}
|
|
61
|
-
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
61
|
+
<p class="{{#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>
|
|
62
62
|
{{/if}}
|
|
63
63
|
{{#if this.isUl}}
|
|
64
|
-
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
64
|
+
<ul class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
65
65
|
{{/if}}
|
|
66
66
|
{{#if this.isOl}}
|
|
67
|
-
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
67
|
+
<ol class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
68
68
|
{{/if}}
|
|
69
69
|
{{/each}}
|
|
70
70
|
{{~#block "subParagraphs"}}{{/block~}}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
{{
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
{{#if (isStorybook)}}
|
|
2
|
+
{{> components/content/copytext/components/contentbox/storybook-contentbox }}
|
|
3
|
+
{{else}}
|
|
4
|
+
<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}}">
|
|
5
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
6
|
+
{{#if this.title}}
|
|
7
|
+
<h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
8
|
+
{{/if}}
|
|
9
9
|
{{> modules/story/copytext-contentbox ~}}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/if}}
|
package/dist/views_static/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -1,15 +1,58 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
|
|
2
|
+
|
|
3
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.copytextParagraph.[0].paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
6
13
|
{{/if}}
|
|
7
|
-
{{#if this.
|
|
8
|
-
|
|
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}}
|
|
9
29
|
{{/if}}
|
|
10
|
-
{{#if this.
|
|
11
|
-
|
|
30
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
12
34
|
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#with this.copytext}}
|
|
39
|
+
{{#each this.paragraph}}
|
|
40
|
+
{{~#each this.text.split }}
|
|
41
|
+
{{#if this.isText}}
|
|
42
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{#if this.isUl}}
|
|
45
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
46
|
+
{{/if}}
|
|
47
|
+
{{#if this.isOl}}
|
|
48
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
49
|
+
{{/if}}
|
|
50
|
+
{{/each}}
|
|
13
51
|
{{/each}}
|
|
14
|
-
{{/
|
|
15
|
-
|
|
52
|
+
{{/with}}
|
|
53
|
+
|
|
54
|
+
{{~#block "subParagraphs"}}{{/block~}}
|
|
55
|
+
|
|
56
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
57
|
+
|
|
58
|
+
{{/components/content/copytext/components/common/paragraphbox_frame}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
4
|
|
|
5
5
|
{{~#if this.paragraphProperties.[0].title}}
|
|
6
|
-
<h3 class="text-lg
|
|
6
|
+
<h3 class="-mt-1 text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
7
7
|
{{/if}}
|
|
8
8
|
|
|
9
9
|
{{~#with this.paragraphBoxItem }}
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
|
|
59
59
|
{{#each this.text.split}}
|
|
60
60
|
{{#if this.isText}}
|
|
61
|
-
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
61
|
+
<p class="{{#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>
|
|
62
62
|
{{/if}}
|
|
63
63
|
{{#if this.isUl}}
|
|
64
|
-
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
64
|
+
<ul class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
65
65
|
{{/if}}
|
|
66
66
|
{{#if this.isOl}}
|
|
67
|
-
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
67
|
+
<ol class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
68
68
|
{{/if}}
|
|
69
69
|
{{/each}}
|
|
70
70
|
{{~#block "subParagraphs"}}{{/block~}}
|
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.57.
|
|
9
|
+
"version": "1.57.10",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -1,44 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"copytext": {
|
|
3
|
-
"title": "
|
|
3
|
+
"title": "Contentbox: Volle Breite, mit Bild über halbe Breite",
|
|
4
4
|
"showFullSize":{
|
|
5
5
|
"isTrue": true
|
|
6
6
|
},
|
|
7
7
|
"copytextParagraph": [
|
|
8
8
|
{
|
|
9
9
|
"paragraphBoxItem": {
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
|
|
13
|
-
"@->contentpath": "teaser_standard",
|
|
14
|
-
"@->replaceToken": [
|
|
15
|
-
{
|
|
16
|
-
"@->token": "image",
|
|
17
|
-
"@->value": "hasebe-kane-102"
|
|
18
|
-
}
|
|
19
|
-
]
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
"isParagraph": true,
|
|
25
|
-
"text": {
|
|
26
|
-
"split": [
|
|
27
|
-
{
|
|
28
|
-
"isText": true,
|
|
29
|
-
"text": "Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen?"
|
|
30
|
-
},
|
|
10
|
+
"@->jsoninclude": "teaser/teaser_images.inc.json",
|
|
11
|
+
"@->contentpath": "copytext_image_50",
|
|
12
|
+
"@->replaceToken": [
|
|
31
13
|
{
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"isOl": true,
|
|
37
|
-
"text": "<li>Auch gibt es niemanden,</li><li>der den Schmerz an sich liebt</li>"
|
|
14
|
+
"@->token": "image",
|
|
15
|
+
"@->value": "buchmesse-fahnen-102"
|
|
38
16
|
}
|
|
39
|
-
]
|
|
17
|
+
]
|
|
40
18
|
}
|
|
41
19
|
}
|
|
42
|
-
]
|
|
20
|
+
],
|
|
21
|
+
"copytext":{
|
|
22
|
+
"paragraph":[
|
|
23
|
+
{
|
|
24
|
+
"@->jsoninclude": "content/copytext/copytext_paragraph.inc.json"
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
|
|
43
29
|
}
|
|
44
30
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
{{
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
{{#if (isStorybook)}}
|
|
2
|
+
{{> components/content/copytext/components/contentbox/storybook-contentbox }}
|
|
3
|
+
{{else}}
|
|
4
|
+
<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}}">
|
|
5
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
6
|
+
{{#if this.title}}
|
|
7
|
+
<h3 class="mt-6 -mb-1 text-lg font-normal contentbox-title font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
8
|
+
{{/if}}
|
|
9
9
|
{{> modules/story/copytext-contentbox ~}}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
11
|
+
</div>
|
|
12
|
+
{{/if}}
|
package/src/stories/views/components/content/copytext/components/contentbox/contentbox.stories.js
CHANGED
|
@@ -9,6 +9,13 @@ const Template = ({ ...args }) => {
|
|
|
9
9
|
|
|
10
10
|
export default {
|
|
11
11
|
title: 'Komponenten/Content/Copytext/Contentbox',
|
|
12
|
+
decorators: [
|
|
13
|
+
(Story) => {
|
|
14
|
+
return `<div class="max-w-[724px] mx-auto">
|
|
15
|
+
${Story()}
|
|
16
|
+
</div>`
|
|
17
|
+
},
|
|
18
|
+
],
|
|
12
19
|
}
|
|
13
20
|
|
|
14
21
|
export const Default = {
|
package/src/stories/views/components/content/copytext/components/contentbox/fixtures/contentbox.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"copytext":{"title":"
|
|
1
|
+
{"copytext":{"title":"Contentbox: Volle Breite, mit Bild über halbe Breite","showFullSize":{"isTrue":true},"copytextParagraph":[{"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"}]}}}],"copytext":{"paragraph":[{"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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."}]}}]}}}
|
package/src/stories/views/components/content/copytext/components/contentbox/storybook-contentbox.hbs
CHANGED
|
@@ -1,15 +1,58 @@
|
|
|
1
|
-
{{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
{{#>components/content/copytext/components/common/paragraphbox_frame _showFullsize=this.showFullSize.isTrue}}
|
|
2
|
+
|
|
3
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_intro_sr" ~}}
|
|
4
|
+
|
|
5
|
+
<h3 class="text-lg -mt-[4px] sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.title}}</h3>
|
|
6
|
+
|
|
7
|
+
{{~#with this.copytextParagraph.[0].paragraphBoxItem }}
|
|
8
|
+
{{~#if this.isImage}}
|
|
9
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
10
|
+
{{#unless this.showFullSize.isTrue }}
|
|
11
|
+
<div class="w-full mr-0 sm:mr-5 sm:w-1/2 sm:float-left">
|
|
12
|
+
{{/unless}}
|
|
6
13
|
{{/if}}
|
|
7
|
-
{{#if this.
|
|
8
|
-
|
|
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}}
|
|
9
29
|
{{/if}}
|
|
10
|
-
{{#if this.
|
|
11
|
-
|
|
30
|
+
{{#if ../this.showFullSize.isTrue }}
|
|
31
|
+
{{#unless this.showFullSize.isTrue }}
|
|
32
|
+
</div>
|
|
33
|
+
{{/unless}}
|
|
12
34
|
{{/if}}
|
|
35
|
+
{{/if~}}
|
|
36
|
+
{{/with}}
|
|
37
|
+
|
|
38
|
+
{{#with this.copytext}}
|
|
39
|
+
{{#each this.paragraph}}
|
|
40
|
+
{{~#each this.text.split }}
|
|
41
|
+
{{#if this.isText}}
|
|
42
|
+
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
43
|
+
{{/if}}
|
|
44
|
+
{{#if this.isUl}}
|
|
45
|
+
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
46
|
+
{{/if}}
|
|
47
|
+
{{#if this.isOl}}
|
|
48
|
+
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
49
|
+
{{/if}}
|
|
50
|
+
{{/each}}
|
|
13
51
|
{{/each}}
|
|
14
|
-
{{/
|
|
15
|
-
|
|
52
|
+
{{/with}}
|
|
53
|
+
|
|
54
|
+
{{~#block "subParagraphs"}}{{/block~}}
|
|
55
|
+
|
|
56
|
+
{{~> components/base/a11y/hiddenText _locaTag="story_infobox_outro_sr" ~}}
|
|
57
|
+
|
|
58
|
+
{{/components/content/copytext/components/common/paragraphbox_frame}}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<span class="sr-only">{{loca "story_infobox_intro_sr" }}</span>
|
|
4
4
|
|
|
5
5
|
{{~#if this.paragraphProperties.[0].title}}
|
|
6
|
-
<h3 class="text-lg
|
|
6
|
+
<h3 class="-mt-1 text-lg sm480:text-2xl font-headingSerif dark:text-text-dark">{{this.paragraphProperties.[0].title}}</h3>
|
|
7
7
|
{{/if}}
|
|
8
8
|
|
|
9
9
|
{{~#with this.paragraphBoxItem }}
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
|
|
59
59
|
{{#each this.text.split}}
|
|
60
60
|
{{#if this.isText}}
|
|
61
|
-
<p class="mt-4 text-base sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</p>
|
|
61
|
+
<p class="{{#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>
|
|
62
62
|
{{/if}}
|
|
63
63
|
{{#if this.isUl}}
|
|
64
|
-
<ul class="mt-4 ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
64
|
+
<ul class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-disc sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ul>
|
|
65
65
|
{{/if}}
|
|
66
66
|
{{#if this.isOl}}
|
|
67
|
-
<ol class="mt-4 ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
67
|
+
<ol class="{{#if ../this.paragraphProperties.[0].title}}mt-4{{else}}{{#if ../this.paragraphBoxItem}}mt-4{{else}}-mt-0.5{{/if}}{{/if}} ml-5 text-base list-decimal sm480:text-lg sm480:leading-normal dark:text-text-dark">{{{this.text}}}</ol>
|
|
68
68
|
{{/if}}
|
|
69
69
|
{{/each}}
|
|
70
70
|
{{~#block "subParagraphs"}}{{/block~}}
|