hr-design-system-handlebars 0.47.15 → 0.47.16
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/package.json +1 -1
- package/src/stories/views/components/teaser/components/teaser_byline.stories.mdx +52 -1
- package/src/stories/views/components/teaser/components/teaser_title.stories.mdx +34 -2
- package/src/stories/views/components/teaser/components/teaser_topline.stories.mdx +26 -4
- package/src/stories/views/components/teaser/teaser_poster.stories.mdx +15 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.47.16 (Mon Jun 27 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- add documentation [#251](https://github.com/mumprod/hr-design-system-handlebars/pull/251) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.47.15 (Thu Jun 23 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
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.47.
|
|
9
|
+
"version": "0.47.16",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -12,6 +12,57 @@ export const Template = ({ ...args }) => {
|
|
|
12
12
|
|
|
13
13
|
# Byline
|
|
14
14
|
|
|
15
|
+
## Beschreibung
|
|
16
|
+
|
|
17
|
+
In der Byline-Komponente werden folgende Teaser-Zusatzinformationen angezeigt:
|
|
18
|
+
|
|
19
|
+
<ul>
|
|
20
|
+
<li><b>Datum</b> (mit oder ohne Uhrzeit)</li>
|
|
21
|
+
<li><b>Strukturknoten</b> (Rubrik)</li>
|
|
22
|
+
<li><b>Autor(en)</b></li>
|
|
23
|
+
<li><b>Link zu den Kommentaren des Artikels</b> (mit aktueller Kommentar-Anzahl)</li>
|
|
24
|
+
</ul>
|
|
25
|
+
|
|
26
|
+
Alle Informationen sind optional. Der Kommentar-Link wird per SSI eingebunden und ist in components/teaser/components/teaser_comments.hbs implementiert.
|
|
27
|
+
|
|
28
|
+
## Sub-Komponenten
|
|
29
|
+
|
|
30
|
+
Die Byline-Komponente inkludiert folgende Komponenten:
|
|
31
|
+
|
|
32
|
+
<ul>
|
|
33
|
+
<li>components/base/<b>loadSSI</b></li>
|
|
34
|
+
<li>components/teaser/components/<b>teaser_comments</b></li>
|
|
35
|
+
</ul>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## Props
|
|
39
|
+
|
|
40
|
+
Die Byline-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
|
|
41
|
+
|
|
42
|
+
<ul>
|
|
43
|
+
<li><b>teaserInfo</b></li>
|
|
44
|
+
<li><b>teaserInfo.showTeaserInfo</b></li>
|
|
45
|
+
<li><b>teaserInfo.showTeaserInfoDate</b></li>
|
|
46
|
+
<li><b>teaserInfo.showTeaserInfoDateTime</b></li>
|
|
47
|
+
<li><b>teaserInfo.showTeaserInfoSection</b></li>
|
|
48
|
+
<li><b>teaserDate</b></li>
|
|
49
|
+
<li><b>teaserDate.htmlDateTime</b></li>
|
|
50
|
+
<li><b>teaserDate.date</b></li>
|
|
51
|
+
<li><b>teaserDate.dateSeparatorTime</b></li>
|
|
52
|
+
<li><b>documentSection</b></li>
|
|
53
|
+
<li><b>profiles</b></li>
|
|
54
|
+
</ul>
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
## Verwendung
|
|
58
|
+
|
|
59
|
+
Die Byline-Komponente wird in handlebars wie folgt eingebaut:
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
{{> components/teaser/components/teaser_byline}}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
|
|
15
66
|
<Preview withToolbar>
|
|
16
67
|
<Story name="default" args={teaserWithoutComments.logicItem.includeModel}>
|
|
17
68
|
{Template.bind({})}
|
|
@@ -24,4 +75,4 @@ export const Template = ({ ...args }) => {
|
|
|
24
75
|
</Story>
|
|
25
76
|
</Preview>
|
|
26
77
|
|
|
27
|
-
<ArgsTable story="default" />
|
|
78
|
+
<ArgsTable story="default" />
|
|
@@ -42,7 +42,39 @@ export const Template = ({ text, ...args }) => {
|
|
|
42
42
|
|
|
43
43
|
# Titel
|
|
44
44
|
|
|
45
|
-
|
|
45
|
+
## Beschreibung
|
|
46
|
+
|
|
47
|
+
In der Titel-Komponente wird der Titel des Artikels dargestellt. Textgröße und Schriftart werden
|
|
48
|
+
anhand der Parameter <b>teaserType</b> und <b>fontVariant</b> in der inkludierten Sub-Komponente <b>teaser_title_classes</b> ermitelt.
|
|
49
|
+
|
|
50
|
+
## Sub-Komponenten
|
|
51
|
+
|
|
52
|
+
Die Titel-Komponente inkludiert folgende Komponenten:
|
|
53
|
+
|
|
54
|
+
<ul>
|
|
55
|
+
<li>components/teaser/components/<b>teaser_title_classes</b></li>
|
|
56
|
+
</ul>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
## Parameter
|
|
60
|
+
|
|
61
|
+
Die Titel-Komponente benötigt folgende Parameter:
|
|
62
|
+
|
|
63
|
+
<ul>
|
|
64
|
+
<li><b>text</b></li>
|
|
65
|
+
<li><b>fontVariant</b></li>
|
|
66
|
+
<li><b>size</b></li>
|
|
67
|
+
<li><b>teaserType</b></li>
|
|
68
|
+
</ul>
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## Verwendung
|
|
72
|
+
|
|
73
|
+
Die Titel-Komponente wird in handlebars wie folgt eingebaut:
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
|
|
77
|
+
```
|
|
46
78
|
|
|
47
79
|
<Preview withToolbar>
|
|
48
80
|
<Story
|
|
@@ -80,4 +112,4 @@ Beispiele für die Titel-Komponente:
|
|
|
80
112
|
</Story>
|
|
81
113
|
</Preview>
|
|
82
114
|
|
|
83
|
-
<ArgsTable story="
|
|
115
|
+
<ArgsTable story="Titel Serif - Hero" />
|
|
@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
|
|
|
3
3
|
import topline from "./teaser_topline.hbs";
|
|
4
4
|
|
|
5
5
|
<Meta
|
|
6
|
-
title="Komponenten/Teaser/Komponenten/
|
|
6
|
+
title="Komponenten/Teaser/Komponenten/Topline"
|
|
7
7
|
argTypes={{
|
|
8
8
|
text: {
|
|
9
9
|
control: "text",
|
|
@@ -20,11 +20,33 @@ export const Template = ({ text, ...args }) => {
|
|
|
20
20
|
|
|
21
21
|
# Topline
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
## Beschreibung
|
|
24
|
+
|
|
25
|
+
In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Parameter
|
|
29
|
+
|
|
30
|
+
Die Topline-Komponente benötigt folgende Parameter:
|
|
31
|
+
|
|
32
|
+
<ul>
|
|
33
|
+
<li><b>teaserType</b></li>
|
|
34
|
+
<li><b>readMore</b></li>
|
|
35
|
+
<li><b>text</b></li>
|
|
36
|
+
</ul>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## Verwendung
|
|
40
|
+
|
|
41
|
+
Die Topline-Komponente wird in handlebars wie folgt eingebaut:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
{{> components/teaser/components/teaser_topline text=topline readMore=readMore teaserType=teaserType}}
|
|
45
|
+
```
|
|
24
46
|
|
|
25
47
|
<Preview withToolbar>
|
|
26
48
|
<Story
|
|
27
|
-
name="
|
|
49
|
+
name="default"
|
|
28
50
|
args={{
|
|
29
51
|
text:
|
|
30
52
|
"Dies ist die Dachzeile",
|
|
@@ -34,4 +56,4 @@ Beispieltext für die Topline-Komponente:
|
|
|
34
56
|
</Story>
|
|
35
57
|
</Preview>
|
|
36
58
|
|
|
37
|
-
<ArgsTable story="
|
|
59
|
+
<ArgsTable story="default" />
|
|
@@ -57,18 +57,6 @@ Inhalt dieses spans: Zusatztext + ": " + Titel
|
|
|
57
57
|
|
|
58
58
|
Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
|
|
59
59
|
|
|
60
|
-
<Preview withToolbar>
|
|
61
|
-
<Story name="Poster 50" args={teserPosterLg.logicItem.includeModel}>
|
|
62
|
-
{Template.bind({})}
|
|
63
|
-
</Story>
|
|
64
|
-
<Story name="Poster 33" args={teserPosterMd.logicItem.includeModel}>
|
|
65
|
-
{Template.bind({})}
|
|
66
|
-
</Story>
|
|
67
|
-
<Story name="Poster 33 mit Label" args={teserPosterMdLabel.logicItem.includeModel}>
|
|
68
|
-
{Template.bind({})}
|
|
69
|
-
</Story>
|
|
70
|
-
</Preview>
|
|
71
|
-
|
|
72
60
|
|
|
73
61
|
## Sub-Komponenten
|
|
74
62
|
|
|
@@ -104,4 +92,18 @@ Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
|
|
|
104
92
|
|
|
105
93
|
```html
|
|
106
94
|
{{> components/teaser/teaser_poster}}
|
|
107
|
-
```
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
<Preview withToolbar>
|
|
98
|
+
<Story name="Poster 50" args={teserPosterLg.logicItem.includeModel}>
|
|
99
|
+
{Template.bind({})}
|
|
100
|
+
</Story>
|
|
101
|
+
<Story name="Poster 33" args={teserPosterMd.logicItem.includeModel}>
|
|
102
|
+
{Template.bind({})}
|
|
103
|
+
</Story>
|
|
104
|
+
<Story name="Poster 33 mit Label" args={teserPosterMdLabel.logicItem.includeModel}>
|
|
105
|
+
{Template.bind({})}
|
|
106
|
+
</Story>
|
|
107
|
+
</Preview>
|
|
108
|
+
|
|
109
|
+
<ArgsTable story="Poster 50" />
|