hr-design-system-handlebars 0.42.6 → 0.42.7
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/build/helpers/loca.js +6 -1
- package/dist/assets/index.css +28 -0
- package/dist/views/components/Teaser/Byline.hbs +74 -1
- package/dist/views/components/Teaser/Comments.hbs +15 -0
- package/dist/views/components/Teaser/Teaser-standard.hbs +3 -3
- package/dist/views/components/Teaser/jsonHelper.js +4 -0
- package/package.json +1 -1
- package/src/stories/views/components/Teaser/Byline.hbs +74 -1
- package/src/stories/views/components/Teaser/Byline.stories.mdx +16 -21
- package/src/stories/views/components/Teaser/Comments.hbs +15 -0
- package/src/stories/views/components/Teaser/Teaser-standard.hbs +3 -3
- package/src/stories/views/components/Teaser/data/teaser_article.json +5 -3
- package/src/stories/views/components/Teaser/data/teaser_commentLink.json +16 -0
- package/src/stories/views/components/Teaser/data/teaser_full.json +4 -2
- package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json +4 -2
- package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json +4 -2
- package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +4 -2
- package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json +4 -2
- package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json +5 -3
- package/src/stories/views/components/Teaser/jsonHelper.js +4 -0
- package/src/stories/views/components/Teaser/teaser-standard.stories.mdx +8 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.42.7 (Tue Apr 19 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- extend byline [#216](https://github.com/mumprod/hr-design-system-handlebars/pull/216) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.42.6 (Wed Apr 13 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/build/helpers/loca.js
CHANGED
|
@@ -10,7 +10,12 @@ module.exports = function(text, options) {
|
|
|
10
10
|
"search_input_aria_submit": "Suche starten",
|
|
11
11
|
"search_input_placeholder": "Ort oder Thema suchen",
|
|
12
12
|
"feature_box_anchor": "Livestream Player anspringen",
|
|
13
|
-
"header_homepage_link_title": "Startseite hessenschau . d e"
|
|
13
|
+
"header_homepage_link_title": "Startseite hessenschau . d e",
|
|
14
|
+
"comment_anchor_1": "zu den ",
|
|
15
|
+
"comment_label_text": "Kommentar",
|
|
16
|
+
"comment_label_text_many": "Kommentare",
|
|
17
|
+
"comment_anchor_2": " Kommentaren des Artikels springen",
|
|
18
|
+
"date_simple_at": options + " Uhr"
|
|
14
19
|
}
|
|
15
20
|
|
|
16
21
|
for (let key in locas){
|
package/dist/assets/index.css
CHANGED
|
@@ -1547,6 +1547,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1547
1547
|
margin-left: 1rem;
|
|
1548
1548
|
margin-right: 1rem;
|
|
1549
1549
|
}
|
|
1550
|
+
.mx-px {
|
|
1551
|
+
margin-left: 1px;
|
|
1552
|
+
margin-right: 1px;
|
|
1553
|
+
}
|
|
1550
1554
|
.mt-6 {
|
|
1551
1555
|
margin-top: 1.5rem;
|
|
1552
1556
|
}
|
|
@@ -1562,6 +1566,18 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1562
1566
|
.-mt-10 {
|
|
1563
1567
|
margin-top: -2.5rem;
|
|
1564
1568
|
}
|
|
1569
|
+
.mr-2\.5 {
|
|
1570
|
+
margin-right: 0.625rem;
|
|
1571
|
+
}
|
|
1572
|
+
.mr-2 {
|
|
1573
|
+
margin-right: 0.5rem;
|
|
1574
|
+
}
|
|
1575
|
+
.mr-0\.5 {
|
|
1576
|
+
margin-right: 0.125rem;
|
|
1577
|
+
}
|
|
1578
|
+
.mr-0 {
|
|
1579
|
+
margin-right: 0px;
|
|
1580
|
+
}
|
|
1565
1581
|
.mt-0\.5 {
|
|
1566
1582
|
margin-top: 0.125rem;
|
|
1567
1583
|
}
|
|
@@ -1589,6 +1605,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1589
1605
|
.inline-block {
|
|
1590
1606
|
display: inline-block;
|
|
1591
1607
|
}
|
|
1608
|
+
.inline {
|
|
1609
|
+
display: inline;
|
|
1610
|
+
}
|
|
1592
1611
|
.flex {
|
|
1593
1612
|
display: -webkit-box;
|
|
1594
1613
|
display: -ms-flexbox;
|
|
@@ -1686,6 +1705,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1686
1705
|
.w-40 {
|
|
1687
1706
|
width: 10rem;
|
|
1688
1707
|
}
|
|
1708
|
+
.w-5 {
|
|
1709
|
+
width: 1.25rem;
|
|
1710
|
+
}
|
|
1689
1711
|
.w-12 {
|
|
1690
1712
|
width: 3rem;
|
|
1691
1713
|
}
|
|
@@ -2221,6 +2243,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2221
2243
|
.font-bold {
|
|
2222
2244
|
font-weight: 700;
|
|
2223
2245
|
}
|
|
2246
|
+
.uppercase {
|
|
2247
|
+
text-transform: uppercase;
|
|
2248
|
+
}
|
|
2224
2249
|
.leading-3 {
|
|
2225
2250
|
line-height: .75rem;
|
|
2226
2251
|
}
|
|
@@ -2262,6 +2287,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2262
2287
|
.text-opacity-50 {
|
|
2263
2288
|
--tw-text-opacity: 0.5;
|
|
2264
2289
|
}
|
|
2290
|
+
.decoration-1 {
|
|
2291
|
+
text-decoration-thickness: 1px;
|
|
2292
|
+
}
|
|
2265
2293
|
.placeholder-blue-congress::-webkit-input-placeholder {
|
|
2266
2294
|
--tw-placeholder-opacity: 1;
|
|
2267
2295
|
color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
|
|
@@ -1 +1,74 @@
|
|
|
1
|
-
<
|
|
1
|
+
<p class="mt-2 text-xs text-grey-scorpion font-headingSerif">
|
|
2
|
+
|
|
3
|
+
{{!--Teaser-Info--}}
|
|
4
|
+
{{#with this.teaserInfo}}
|
|
5
|
+
{{#if this.showTeaserInfo~}}
|
|
6
|
+
{{~#if this.showTeaserInfoDate}}
|
|
7
|
+
{{~#with ../teaserDate}}
|
|
8
|
+
<time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
|
|
9
|
+
{{/with~}}
|
|
10
|
+
{{#if this.showTeaserInfoSection}}
|
|
11
|
+
<span class="mx-px">|</span>
|
|
12
|
+
{{else}}
|
|
13
|
+
{{#if ../profiles}}
|
|
14
|
+
<span class="mx-px">|</span>
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{/if}}
|
|
17
|
+
{{else}}
|
|
18
|
+
{{~#if this.showTeaserInfoDateTime}}
|
|
19
|
+
{{~#with ../teaserDate}}
|
|
20
|
+
<time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
|
|
21
|
+
{{/with~}}
|
|
22
|
+
{{#if this.showTeaserInfoSection}}
|
|
23
|
+
<span class="mx-px">|</span>
|
|
24
|
+
{{else}}
|
|
25
|
+
{{#if ../profiles}}
|
|
26
|
+
<span class="mx-px">|</span>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{/if~}}
|
|
30
|
+
{{/if~}}
|
|
31
|
+
|
|
32
|
+
{{~#if this.showTeaserInfoSection}}
|
|
33
|
+
<span class="uppercase">
|
|
34
|
+
{{../documentSection~}}
|
|
35
|
+
</span>
|
|
36
|
+
{{#if ../profiles}}
|
|
37
|
+
<span class="mx-px">|</span>
|
|
38
|
+
{{/if}}
|
|
39
|
+
{{/if}}
|
|
40
|
+
|
|
41
|
+
{{/if}}
|
|
42
|
+
{{/with}}
|
|
43
|
+
|
|
44
|
+
{{!--Profiles--}}
|
|
45
|
+
{{#if profiles}}
|
|
46
|
+
<span>{{profiles}}</span>
|
|
47
|
+
{{/if}}
|
|
48
|
+
|
|
49
|
+
{{!--
|
|
50
|
+
Gap here only if comments exists and at least one of those elements above
|
|
51
|
+
is shown. Really ugly because we don't have any or-helper yet...
|
|
52
|
+
--}}
|
|
53
|
+
{{#if commentLink}}
|
|
54
|
+
{{#if profiles}}
|
|
55
|
+
<span class="mr-2.5"></span>
|
|
56
|
+
{{else}}
|
|
57
|
+
{{#if teaserInfo.showTeaserInfoSection}}
|
|
58
|
+
<span class="mr-2.5"></span>
|
|
59
|
+
{{else}}
|
|
60
|
+
{{#if teaserInfo.showTeaserInfoDate}}
|
|
61
|
+
<span class="mr-2.5"></span>
|
|
62
|
+
{{else}}
|
|
63
|
+
{{#if teaserInfo.showTeaserInfoDateTime}}
|
|
64
|
+
<span class="mr-2.5"></span>
|
|
65
|
+
{{/if}}
|
|
66
|
+
{{/if}}
|
|
67
|
+
{{/if}}
|
|
68
|
+
{{/if}}
|
|
69
|
+
{{/if}}
|
|
70
|
+
|
|
71
|
+
{{!--Comments--}}
|
|
72
|
+
{{> components/Teaser/Comments}}
|
|
73
|
+
|
|
74
|
+
</p>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{{#with this.commentLink}}
|
|
2
|
+
<span class="whitespace-nowrap">
|
|
3
|
+
{{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
|
|
4
|
+
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
|
+
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
|
6
|
+
<span class="text-toplineColor">{{this.content.commentNumber}}</span>
|
|
7
|
+
{{#if this.content.hasOneComment}}
|
|
8
|
+
<span class="text-toplineColor">{{loca "comment_label_text"}}</span>
|
|
9
|
+
{{else}}
|
|
10
|
+
<span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
|
|
11
|
+
{{/if}}
|
|
12
|
+
<span class="sr-only">{{loca "comment_anchor_2"}}</span>
|
|
13
|
+
{{/components/base/link}}
|
|
14
|
+
</span>
|
|
15
|
+
{{/with}}
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
</header>
|
|
11
11
|
<section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
12
12
|
<div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
|
|
14
|
+
{{> components/Teaser/Byline}}
|
|
15
|
+
|
|
16
16
|
</section>
|
|
17
17
|
</div>
|
|
18
18
|
</article>
|
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": "0.42.
|
|
9
|
+
"version": "0.42.7",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -1 +1,74 @@
|
|
|
1
|
-
<
|
|
1
|
+
<p class="mt-2 text-xs text-grey-scorpion font-headingSerif">
|
|
2
|
+
|
|
3
|
+
{{!--Teaser-Info--}}
|
|
4
|
+
{{#with this.teaserInfo}}
|
|
5
|
+
{{#if this.showTeaserInfo~}}
|
|
6
|
+
{{~#if this.showTeaserInfoDate}}
|
|
7
|
+
{{~#with ../teaserDate}}
|
|
8
|
+
<time datetime="{{this.htmlDateTime}}">{{this.date}}</time>
|
|
9
|
+
{{/with~}}
|
|
10
|
+
{{#if this.showTeaserInfoSection}}
|
|
11
|
+
<span class="mx-px">|</span>
|
|
12
|
+
{{else}}
|
|
13
|
+
{{#if ../profiles}}
|
|
14
|
+
<span class="mx-px">|</span>
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{/if}}
|
|
17
|
+
{{else}}
|
|
18
|
+
{{~#if this.showTeaserInfoDateTime}}
|
|
19
|
+
{{~#with ../teaserDate}}
|
|
20
|
+
<time datetime="{{this.htmlDateTime}}">{{loca "date_simple_at" this.dateSeparatorTime}}</time>
|
|
21
|
+
{{/with~}}
|
|
22
|
+
{{#if this.showTeaserInfoSection}}
|
|
23
|
+
<span class="mx-px">|</span>
|
|
24
|
+
{{else}}
|
|
25
|
+
{{#if ../profiles}}
|
|
26
|
+
<span class="mx-px">|</span>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{/if}}
|
|
29
|
+
{{/if~}}
|
|
30
|
+
{{/if~}}
|
|
31
|
+
|
|
32
|
+
{{~#if this.showTeaserInfoSection}}
|
|
33
|
+
<span class="uppercase">
|
|
34
|
+
{{../documentSection~}}
|
|
35
|
+
</span>
|
|
36
|
+
{{#if ../profiles}}
|
|
37
|
+
<span class="mx-px">|</span>
|
|
38
|
+
{{/if}}
|
|
39
|
+
{{/if}}
|
|
40
|
+
|
|
41
|
+
{{/if}}
|
|
42
|
+
{{/with}}
|
|
43
|
+
|
|
44
|
+
{{!--Profiles--}}
|
|
45
|
+
{{#if profiles}}
|
|
46
|
+
<span>{{profiles}}</span>
|
|
47
|
+
{{/if}}
|
|
48
|
+
|
|
49
|
+
{{!--
|
|
50
|
+
Gap here only if comments exists and at least one of those elements above
|
|
51
|
+
is shown. Really ugly because we don't have any or-helper yet...
|
|
52
|
+
--}}
|
|
53
|
+
{{#if commentLink}}
|
|
54
|
+
{{#if profiles}}
|
|
55
|
+
<span class="mr-2.5"></span>
|
|
56
|
+
{{else}}
|
|
57
|
+
{{#if teaserInfo.showTeaserInfoSection}}
|
|
58
|
+
<span class="mr-2.5"></span>
|
|
59
|
+
{{else}}
|
|
60
|
+
{{#if teaserInfo.showTeaserInfoDate}}
|
|
61
|
+
<span class="mr-2.5"></span>
|
|
62
|
+
{{else}}
|
|
63
|
+
{{#if teaserInfo.showTeaserInfoDateTime}}
|
|
64
|
+
<span class="mr-2.5"></span>
|
|
65
|
+
{{/if}}
|
|
66
|
+
{{/if}}
|
|
67
|
+
{{/if}}
|
|
68
|
+
{{/if}}
|
|
69
|
+
{{/if}}
|
|
70
|
+
|
|
71
|
+
{{!--Comments--}}
|
|
72
|
+
{{> components/Teaser/Comments}}
|
|
73
|
+
|
|
74
|
+
</p>
|
|
@@ -1,35 +1,30 @@
|
|
|
1
1
|
import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
|
|
2
|
-
|
|
2
|
+
import 'core-js/actual/structured-clone';
|
|
3
|
+
import { addCommentLink } from './jsonHelper';
|
|
3
4
|
import byline from "./Byline.hbs";
|
|
5
|
+
import comments from './data/teaser_commentLink.json';
|
|
6
|
+
import teaser from './data/teaser_article.json';
|
|
7
|
+
let byline_with_comments = structuredClone(teaser);
|
|
8
|
+
addCommentLink(byline_with_comments, comments.commentLink);
|
|
4
9
|
|
|
5
|
-
<Meta
|
|
6
|
-
title="Komponenten/Teaser/Komponenten/Byline"
|
|
7
|
-
argTypes={{
|
|
8
|
-
text: {
|
|
9
|
-
control: "text",
|
|
10
|
-
description: "Bylinetext",
|
|
11
|
-
},
|
|
12
|
-
}}
|
|
13
|
-
/>
|
|
10
|
+
<Meta title="Komponenten/Teaser/Komponenten/Byline"/>
|
|
14
11
|
|
|
15
|
-
export const Template = ({
|
|
16
|
-
|
|
17
|
-
// return `<span>${topline}</span>`;
|
|
18
|
-
return byline({ text, ...args });
|
|
12
|
+
export const Template = ({ ...args }) => {
|
|
13
|
+
return byline({ ...args });
|
|
19
14
|
};
|
|
20
15
|
|
|
21
16
|
# Byline
|
|
22
17
|
|
|
23
18
|
<Preview withToolbar>
|
|
24
|
-
<Story
|
|
25
|
-
name="default"
|
|
26
|
-
args={{
|
|
27
|
-
text:
|
|
28
|
-
"Dies ist die Byline",
|
|
29
|
-
}}
|
|
30
|
-
>
|
|
19
|
+
<Story name="default" args={teaser}>
|
|
31
20
|
{Template.bind({})}
|
|
32
21
|
</Story>
|
|
22
|
+
<Story name="with comments" args={byline_with_comments}>
|
|
23
|
+
{Template.bind({})}
|
|
24
|
+
</Story>
|
|
25
|
+
<Story name="comments only" args={comments}>
|
|
26
|
+
{Template.bind({})}
|
|
27
|
+
</Story>
|
|
33
28
|
</Preview>
|
|
34
29
|
|
|
35
30
|
<ArgsTable story="default" />
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
{{#with this.commentLink}}
|
|
2
|
+
<span class="whitespace-nowrap">
|
|
3
|
+
{{#>components/base/link _cssClasses="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="comment" }}
|
|
4
|
+
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
|
+
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
|
6
|
+
<span class="text-toplineColor">{{this.content.commentNumber}}</span>
|
|
7
|
+
{{#if this.content.hasOneComment}}
|
|
8
|
+
<span class="text-toplineColor">{{loca "comment_label_text"}}</span>
|
|
9
|
+
{{else}}
|
|
10
|
+
<span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
|
|
11
|
+
{{/if}}
|
|
12
|
+
<span class="sr-only">{{loca "comment_anchor_2"}}</span>
|
|
13
|
+
{{/components/base/link}}
|
|
14
|
+
</span>
|
|
15
|
+
{{/with}}
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
</header>
|
|
11
11
|
<section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
12
12
|
<div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
|
|
14
|
+
{{> components/Teaser/Byline}}
|
|
15
|
+
|
|
16
16
|
</section>
|
|
17
17
|
</div>
|
|
18
18
|
</article>
|
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "100",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
16
17
|
"showTeaserInfoSection": true,
|
|
17
18
|
"showTeaserInfoChannel": true,
|
|
18
19
|
"showTeaserInfoAll": true,
|
|
19
|
-
"showTeaserInfoDate":
|
|
20
|
+
"showTeaserInfoDate": false,
|
|
20
21
|
"showTeaserInfoDateTime": true,
|
|
21
22
|
"showTeaserInfoProgramRef": true
|
|
22
23
|
},
|
|
@@ -81,6 +82,7 @@
|
|
|
81
82
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
82
83
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
83
84
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
85
|
+
"documentSection": "Gesellschaft",
|
|
84
86
|
"teaserLead": {
|
|
85
87
|
"avDocument": "",
|
|
86
88
|
"image": ""
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"commentLink": {
|
|
3
|
+
"link": {
|
|
4
|
+
"url": "/teaser1-comments",
|
|
5
|
+
"webviewUrl": "/teaser1-comments#webview",
|
|
6
|
+
"isTargetBlank": false,
|
|
7
|
+
"readMoreText": {
|
|
8
|
+
"readMoreScreenreader": "Zu den Kommentaren des Artikels"
|
|
9
|
+
},
|
|
10
|
+
"content": {
|
|
11
|
+
"commentNumber": "666",
|
|
12
|
+
"hasOneComment": false
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -21,9 +21,10 @@
|
|
|
21
21
|
"teasertype": "standard",
|
|
22
22
|
"teasersize": "100",
|
|
23
23
|
"teaserDate": {
|
|
24
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
24
25
|
"htmlDate": "20.02.1983",
|
|
25
|
-
"date": "
|
|
26
|
-
"dateSeparatorTime": "
|
|
26
|
+
"date": "17.04.22",
|
|
27
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
27
28
|
},
|
|
28
29
|
"teaserInfo": {
|
|
29
30
|
"showTeaserInfo": true,
|
|
@@ -95,6 +96,7 @@
|
|
|
95
96
|
"shorttext": "shorttext",
|
|
96
97
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
97
98
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
99
|
+
"documentSection": "Gesellschaft",
|
|
98
100
|
"teaserLead": {
|
|
99
101
|
"avDocument": "",
|
|
100
102
|
"image": ""
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "lg",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
72
73
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
73
74
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
75
|
+
"documentSection": "Gesellschaft",
|
|
74
76
|
"teaserLead": {
|
|
75
77
|
"avDocument": "",
|
|
76
78
|
"image": ""
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "md",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
72
73
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
73
74
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
75
|
+
"documentSection": "Gesellschaft",
|
|
74
76
|
"teaserLead": {
|
|
75
77
|
"avDocument": "",
|
|
76
78
|
"image": ""
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "sm",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
72
73
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
73
74
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
75
|
+
"documentSection": "Gesellschaft",
|
|
74
76
|
"teaserLead": {
|
|
75
77
|
"avDocument": "",
|
|
76
78
|
"image": ""
|
|
@@ -7,9 +7,10 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "xl",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
72
73
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
73
74
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
75
|
+
"documentSection": "Gesellschaft",
|
|
74
76
|
"teaserLead": {
|
|
75
77
|
"avDocument": "",
|
|
76
78
|
"image": ""
|
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
"teasertype": "standard",
|
|
8
8
|
"teasersize": "xxl",
|
|
9
9
|
"teaserDate": {
|
|
10
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
10
11
|
"htmlDate": "20.02.1983",
|
|
11
|
-
"date": "
|
|
12
|
-
"dateSeparatorTime": "
|
|
12
|
+
"date": "17.04.22",
|
|
13
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
13
14
|
},
|
|
14
15
|
"teaserInfo": {
|
|
15
16
|
"showTeaserInfo": true,
|
|
16
17
|
"showTeaserInfoSection": true,
|
|
17
18
|
"showTeaserInfoChannel": true,
|
|
18
19
|
"showTeaserInfoAll": true,
|
|
19
|
-
"showTeaserInfoDate":
|
|
20
|
+
"showTeaserInfoDate": false,
|
|
20
21
|
"showTeaserInfoDateTime": true,
|
|
21
22
|
"showTeaserInfoProgramRef": true
|
|
22
23
|
},
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"shorttext": "Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.",
|
|
72
73
|
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
73
74
|
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
75
|
+
"documentSection": "Gesellschaft",
|
|
74
76
|
"teaserLead": {
|
|
75
77
|
"avDocument": "",
|
|
76
78
|
"image": ""
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
2
2
|
import 'core-js/actual/structured-clone';
|
|
3
3
|
import { addLabel, removeLabel, changeTeaserSize } from './labelHelper';
|
|
4
|
+
import { addCommentLink } from './jsonHelper';
|
|
4
5
|
import teaser from './Teaser-standard.hbs'
|
|
5
6
|
import hero_teaser from './data/teaser_standard_xxl_serif.json'
|
|
6
7
|
import xl_teaser from './data/teaser_standard_xl_serif.json'
|
|
@@ -8,8 +9,13 @@ import lg_teaser from './data/teaser_standard_lg_serif.json'
|
|
|
8
9
|
import md_teaser from './data/teaser_standard_md_serif.json'
|
|
9
10
|
import sm_teaser from './data/teaser_standard_sm_serif.json'
|
|
10
11
|
import ticker_label from './data/ticker_label.json';
|
|
12
|
+
import comments from './data/teaser_commentLink.json';
|
|
11
13
|
let hero_teaser_with_label = structuredClone(hero_teaser);
|
|
12
14
|
addLabel(hero_teaser_with_label, ticker_label.label);
|
|
15
|
+
let hero_teaser_with_comments = structuredClone(hero_teaser);
|
|
16
|
+
addCommentLink(hero_teaser_with_comments, comments.commentLink);
|
|
17
|
+
let md_teaser_with_comments = structuredClone(md_teaser);
|
|
18
|
+
addCommentLink(md_teaser_with_comments, comments.commentLink);
|
|
13
19
|
|
|
14
20
|
<Meta title="Komponenten/Teaser/Standard"
|
|
15
21
|
parameters={{
|
|
@@ -51,7 +57,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
51
57
|
Ein toller Einleitungstext für unsere `Teaser` Komponente:
|
|
52
58
|
|
|
53
59
|
<Preview withToolbar>
|
|
54
|
-
<Story name="Standard Hero" args={
|
|
60
|
+
<Story name="Standard Hero" args={hero_teaser_with_comments}>
|
|
55
61
|
{Template.bind({})}
|
|
56
62
|
</Story>
|
|
57
63
|
<Story name="Standard Hero with Label" args={hero_teaser_with_label}>
|
|
@@ -63,7 +69,7 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
|
|
|
63
69
|
<Story name="Standard LG" args={lg_teaser}>
|
|
64
70
|
{Template.bind({})}
|
|
65
71
|
</Story>
|
|
66
|
-
<Story name="Standard MD" args={
|
|
72
|
+
<Story name="Standard MD" args={md_teaser_with_comments}>
|
|
67
73
|
{Template.bind({})}
|
|
68
74
|
</Story>
|
|
69
75
|
<Story name="Standard SM" args={sm_teaser}>
|