hr-design-system-handlebars 1.11.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
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
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
|
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.11.
|
|
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}>
|