hr-design-system-handlebars 1.10.0 → 1.11.1
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 +13 -0
- package/dist/assets/index.css +3 -3
- package/package.json +1 -1
- package/src/stories/views/components/page/page.stories.mdx +84 -10
- package/src/stories/views/components/page/page_player.stories.mdx +10 -1
- package/src/stories/views/components/teaser/components/teaser_text.stories.mdx +53 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,20 @@
|
|
|
1
|
+
# v1.11.1 (Mon Mar 20 2023)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Documentation Page [#591](https://github.com/mumprod/hr-design-system-handlebars/pull/591) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v1.10.0 (Mon Mar 20 2023)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
4
16
|
|
|
17
|
+
- Dpe 1605 [#590](https://github.com/mumprod/hr-design-system-handlebars/pull/590) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@mariokinzel](https://github.com/mariokinzel))
|
|
5
18
|
- Documentation for Teaser-Heading [#589](https://github.com/mumprod/hr-design-system-handlebars/pull/589) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@mariokinzel](https://github.com/mariokinzel))
|
|
6
19
|
|
|
7
20
|
#### Authors: 2
|
package/dist/assets/index.css
CHANGED
|
@@ -2667,7 +2667,7 @@ video {
|
|
|
2667
2667
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
2668
2668
|
}
|
|
2669
2669
|
.counter-reset {
|
|
2670
|
-
counter-reset:
|
|
2670
|
+
counter-reset: cnt1679316761441;
|
|
2671
2671
|
}
|
|
2672
2672
|
.line-clamp-4 {
|
|
2673
2673
|
overflow: hidden;
|
|
@@ -2901,7 +2901,7 @@ video {
|
|
|
2901
2901
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2902
2902
|
}
|
|
2903
2903
|
.-ordered {
|
|
2904
|
-
counter-increment:
|
|
2904
|
+
counter-increment: cnt1679316761441 1;
|
|
2905
2905
|
}
|
|
2906
2906
|
.-ordered::before {
|
|
2907
2907
|
position: absolute;
|
|
@@ -2917,7 +2917,7 @@ video {
|
|
|
2917
2917
|
letter-spacing: .0125em;
|
|
2918
2918
|
--tw-text-opacity: 1;
|
|
2919
2919
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2920
|
-
content: counter(
|
|
2920
|
+
content: counter(cnt1679316761441);
|
|
2921
2921
|
}
|
|
2922
2922
|
/*! ****************************/
|
|
2923
2923
|
/*! text-shadow */
|
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.
|
|
9
|
+
"version": "1.11.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -17,9 +17,6 @@ const NavigationDataWithTeaser2 = structuredClone(
|
|
|
17
17
|
const NavigationDataWithTeaser3 = structuredClone(
|
|
18
18
|
Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
|
|
19
19
|
)
|
|
20
|
-
const NavigationDataWithPlayer = structuredClone(
|
|
21
|
-
Object.assign({}, NavigationData, audio_player_teaser.logicItem.includeModel, hero_teaser.logicItem.includeModel)
|
|
22
|
-
)
|
|
23
20
|
|
|
24
21
|
<Meta
|
|
25
22
|
title="Komponenten/Page/Page"
|
|
@@ -41,7 +38,90 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
41
38
|
return page({ brand, ...args })
|
|
42
39
|
}
|
|
43
40
|
|
|
44
|
-
# Page
|
|
41
|
+
# Page (allgemein)
|
|
42
|
+
|
|
43
|
+
Das Grundgerüst für das HTML-Markup einer Seite (in diesem Fall eine Index-Seite bzw. Übersichtsseite).
|
|
44
|
+
Stand 2023: Inhaltsseiten werden derzeit noch nicht berücksichtigt.
|
|
45
|
+
Für gemischte Inhalte siehe ```Player-Interaktion```
|
|
46
|
+
|
|
47
|
+
# Grundaufbau
|
|
48
|
+
Um eine Seite zu erzeugen ist ein initiales HTML-Markup notwendig. Der Kopf ```<head>``` ist dabei statisch,
|
|
49
|
+
Inhalte werden im ```<body>```-Tag abgelegt. Der Kopf entspricht einem klassischen HTML-Kopf mit Titel und Metadaten-Angaben.
|
|
50
|
+
|
|
51
|
+
## Markup im Kopf
|
|
52
|
+
```html
|
|
53
|
+
<!DOCTYPE html>
|
|
54
|
+
<html
|
|
55
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
56
|
+
data-theme="hessenschau"
|
|
57
|
+
lang="de"
|
|
58
|
+
>
|
|
59
|
+
<head>
|
|
60
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
61
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
62
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
63
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
64
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
65
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
66
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
67
|
+
<meta name="language" content="Deutsch" />
|
|
68
|
+
</head>
|
|
69
|
+
|
|
70
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
71
|
+
<div class="js-pageSwap">
|
|
72
|
+
|
|
73
|
+
MARKUP FÜR INHALTE ...
|
|
74
|
+
|
|
75
|
+
<div>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
78
|
+
```
|
|
79
|
+
## Markup für Inhalte
|
|
80
|
+
|
|
81
|
+
Initial wird die Seitennavigation - das Menü - der Seite eingefügt. Wahlweise Abwandlungen der Seitennavigation
|
|
82
|
+
(mit Subnavigation oder Unwetterwarnung), die über unterschiedlichen Daten-JSONS ausgeformt werden. Die Daten-JSONS hierfür liegen
|
|
83
|
+
unter ```components/site_header/fixtures``` und die Komponente selber:
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
{{> components/site_header/header }}
|
|
87
|
+
```
|
|
88
|
+
Dann folgen die Inhalte in diesem Fall Teaser, die über das Grid-Layout angeordnet werden. Die Komponenten für die Teaser
|
|
89
|
+
liegen unter ```components/teaser/``` und lauten auf ```teaser_``` und dessen Ausprägung:
|
|
90
|
+
<ul>
|
|
91
|
+
<li>standard (Standard => Bild oben, Text darunter)</li>
|
|
92
|
+
<li>alternativ (Alternativ => Bild links, Text rechts)</li>
|
|
93
|
+
<li>event_calendar (Event-Kalender)</li>
|
|
94
|
+
<li>poster (Poster => Text auf Bild)</li>
|
|
95
|
+
<li>indextext (Nur Text)</li>
|
|
96
|
+
<li>stage (Stage => Sonderform über die ganze Seite)</li>
|
|
97
|
+
</ul>
|
|
98
|
+
|
|
99
|
+
Auch hier bestimmen die Daten-JSONS, das Bild und den Text. Die Daten-JSONS hierfür liegen
|
|
100
|
+
unter ```components/teaser/fixtures``` der Aufruf der Komponente selber:
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
{{> components/teaser/teaser_standard }}
|
|
104
|
+
```
|
|
105
|
+
Gekapselt wird die Teaser-Komponente in einer ```<section>```. Es können beliebig viele Sections mit entsprechenden Teaser-Komponenten
|
|
106
|
+
in das folgende Markup angelegt werden:
|
|
107
|
+
|
|
108
|
+
```html
|
|
109
|
+
<main onclick="void(0)" role="main" id="content" class="flex items-center justify-center">
|
|
110
|
+
<div class="grid grid-page">
|
|
111
|
+
<div class="{{> components/grid/grid_group_wrapper_classes }}">
|
|
112
|
+
|
|
113
|
+
<section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
|
|
114
|
+
{{> components/teaser/teaser_standard }}
|
|
115
|
+
</section>
|
|
116
|
+
WEITERE TEASER...
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</main>
|
|
120
|
+
|
|
121
|
+
</div>
|
|
122
|
+
```
|
|
123
|
+
Die Ausformung der Teaser basiert immer auf dem selben Daten-JSON, d.h. Bild und Texte sind immer identisch, lediglich die Größe und der
|
|
124
|
+
Teaser-Typ variieren.
|
|
45
125
|
|
|
46
126
|
<Canvas withToolbar>
|
|
47
127
|
<Story name="Default" args={NavigationDataWithTeaser}>
|
|
@@ -61,10 +141,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
61
141
|
</Story>
|
|
62
142
|
</Canvas>
|
|
63
143
|
|
|
64
|
-
<Canvas>
|
|
65
|
-
<Story name="Player-Interaktion" args={NavigationDataWithPlayer}>
|
|
66
|
-
{Template.bind({})}
|
|
67
|
-
</Story>
|
|
68
|
-
</Canvas>
|
|
69
|
-
|
|
70
144
|
<ArgsTable story="Default" />
|
|
@@ -23,7 +23,16 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
# Page
|
|
26
|
+
# Page (gemischte Inhalte)
|
|
27
|
+
|
|
28
|
+
Hier werden nur gemischte Inhalte betrachtet. Hierfür werden Daten-JSONS unterschiedlicher
|
|
29
|
+
Ausprägung (Audio, Podcast) gemischt und herangezogen. Um einer Komponente diese spezifische Inhalte zu übergeben
|
|
30
|
+
wird sie wie folgt aufgerufen:
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
{{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}}
|
|
34
|
+
{{> components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
|
|
35
|
+
```
|
|
27
36
|
|
|
28
37
|
<Canvas>
|
|
29
38
|
<Story name="Player-Interaktion" args={AudioDataMixed}>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ArgsTable, Meta, Story, Preview } from '@storybook/addon-docs'
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import teaserText from './teaser_text.hbs'
|
|
4
4
|
|
|
5
5
|
<Meta
|
|
6
6
|
title="Komponenten/Teaser/Komponenten/Teasertext"
|
|
@@ -22,36 +22,73 @@ import teaserTextComponent from './teaser_text.hbs'
|
|
|
22
22
|
/>
|
|
23
23
|
|
|
24
24
|
export const Template = ({ _text, ...args }) => {
|
|
25
|
-
return
|
|
25
|
+
return teaserText({ _text, ...args })
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
#
|
|
28
|
+
# Teaser-Text
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Im Teaser folgt nach dem Heading der Text. Diesem beigefügt ein "Mehr"-Link oder ein Link auf eine externe Seite.
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
# Teil-Komponenten
|
|
33
|
+
N/A
|
|
34
|
+
|
|
35
|
+
## Teaser-Text Hero
|
|
36
|
+
<Canvas>
|
|
33
37
|
<Story
|
|
34
|
-
name="Teasertext"
|
|
38
|
+
name="Teasertext Hero"
|
|
35
39
|
args={{
|
|
36
|
-
_text: '
|
|
40
|
+
_text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
|
|
41
|
+
_size: 'hero',
|
|
42
|
+
_font: 'md:text-base md:leading-4 lg:leading-5',
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
{Template.bind({})}
|
|
46
|
+
</Story>
|
|
47
|
+
</Canvas>
|
|
48
|
+
|
|
49
|
+
## Teaser-Text 50%
|
|
50
|
+
|
|
51
|
+
<Canvas>
|
|
52
|
+
<Story
|
|
53
|
+
name="Teasertext 50"
|
|
54
|
+
args={{
|
|
55
|
+
_text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
|
|
37
56
|
_size: '50',
|
|
57
|
+
_font: 'md:text-base md:leading-4 lg:leading-5',
|
|
38
58
|
}}
|
|
39
59
|
>
|
|
40
60
|
{Template.bind({})}
|
|
41
61
|
</Story>
|
|
62
|
+
</Canvas>
|
|
63
|
+
|
|
64
|
+
## Teaser-Text 33%
|
|
65
|
+
|
|
66
|
+
<Canvas>
|
|
42
67
|
<Story
|
|
43
|
-
name="Teasertext
|
|
68
|
+
name="Teasertext 33"
|
|
44
69
|
args={{
|
|
45
|
-
_text: '
|
|
46
|
-
_size: '
|
|
70
|
+
_text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
|
|
71
|
+
_size: '33',
|
|
47
72
|
_font: 'md:text-base md:leading-4 lg:leading-5',
|
|
48
73
|
}}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
74
|
+
>
|
|
75
|
+
{Template.bind({})}
|
|
76
|
+
</Story>
|
|
77
|
+
</Canvas>
|
|
78
|
+
|
|
79
|
+
## Teaser-Text 25%
|
|
80
|
+
|
|
81
|
+
<Canvas>
|
|
82
|
+
<Story
|
|
83
|
+
name="Teasertext 25"
|
|
84
|
+
args={{
|
|
85
|
+
_text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
|
|
86
|
+
_size: '25',
|
|
87
|
+
_font: 'md:text-base md:leading-4 lg:leading-5',
|
|
53
88
|
}}
|
|
54
89
|
>
|
|
55
90
|
{Template.bind({})}
|
|
56
91
|
</Story>
|
|
57
|
-
</
|
|
92
|
+
</Canvas>
|
|
93
|
+
|
|
94
|
+
|