hr-design-system-handlebars 1.13.0 → 1.15.0
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 +24 -0
- package/dist/assets/brand/_default/conf/locatags.json +1 -0
- package/dist/assets/brand/hessenschau/conf/locatags.json +2 -1
- package/dist/assets/index.css +9 -3
- package/dist/assets/vendor/js/header.alpine.js +1 -1
- package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +9 -0
- package/dist/views/components/site_header/header.hbs +2 -2
- package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +2 -1
- package/package.json +1 -1
- package/src/assets/brand/_default/conf/locatags.json +1 -0
- package/src/assets/brand/hessenschau/conf/locatags.json +2 -1
- package/src/assets/brand/hessenschau/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-bigband/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-inforadio/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr-werbung/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr1/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr2/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr3/conf/locatags.merged.json +1 -0
- package/src/assets/brand/hr4/conf/locatags.merged.json +1 -0
- package/src/assets/brand/you-fm/conf/locatags.merged.json +1 -0
- package/src/assets/vendor/js/header.alpine.js +1 -1
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.mdx +30 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.stories.js +33 -0
- package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +9 -0
- package/src/stories/views/components/page/page.data.js +6 -2
- package/src/stories/views/components/page/page.stories.js +8 -0
- package/src/stories/views/components/site_header/header.hbs +2 -2
- package/src/stories/views/components/site_header/header.mdx +3 -18
- package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
# v1.15.0 (Tue May 02 2023)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- adds sr-only to hbs and hiddenText to json [#619](https://github.com/mumprod/hr-design-system-handlebars/pull/619) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v1.14.0 (Fri Apr 28 2023)
|
|
14
|
+
|
|
15
|
+
#### 🚀 Enhancement
|
|
16
|
+
|
|
17
|
+
- Dpe 2244 stories & doku [#616](https://github.com/mumprod/hr-design-system-handlebars/pull/616) ([@StefanVesper](https://github.com/StefanVesper))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
1
25
|
# v1.13.0 (Tue Apr 25 2023)
|
|
2
26
|
|
|
3
27
|
#### 🚀 Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -1174,6 +1174,9 @@ video {
|
|
|
1174
1174
|
.mb-0 {
|
|
1175
1175
|
margin-bottom: 0px;
|
|
1176
1176
|
}
|
|
1177
|
+
.mb-10 {
|
|
1178
|
+
margin-bottom: 2.5rem;
|
|
1179
|
+
}
|
|
1177
1180
|
.mb-4 {
|
|
1178
1181
|
margin-bottom: 1rem;
|
|
1179
1182
|
}
|
|
@@ -1417,6 +1420,9 @@ video {
|
|
|
1417
1420
|
.w-9 {
|
|
1418
1421
|
width: 2.25rem;
|
|
1419
1422
|
}
|
|
1423
|
+
.w-\[1600px\] {
|
|
1424
|
+
width: 1600px;
|
|
1425
|
+
}
|
|
1420
1426
|
.w-auto {
|
|
1421
1427
|
width: auto;
|
|
1422
1428
|
}
|
|
@@ -2671,7 +2677,7 @@ video {
|
|
|
2671
2677
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2672
2678
|
}
|
|
2673
2679
|
.counter-reset {
|
|
2674
|
-
counter-reset:
|
|
2680
|
+
counter-reset: cnt1683029832707;
|
|
2675
2681
|
}
|
|
2676
2682
|
.hyphens-auto {
|
|
2677
2683
|
-webkit-hyphens: auto;
|
|
@@ -2909,7 +2915,7 @@ video {
|
|
|
2909
2915
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2910
2916
|
}
|
|
2911
2917
|
.-ordered {
|
|
2912
|
-
counter-increment:
|
|
2918
|
+
counter-increment: cnt1683029832707 1;
|
|
2913
2919
|
}
|
|
2914
2920
|
.-ordered::before {
|
|
2915
2921
|
position: absolute;
|
|
@@ -2925,7 +2931,7 @@ video {
|
|
|
2925
2931
|
letter-spacing: .0125em;
|
|
2926
2932
|
--tw-text-opacity: 1;
|
|
2927
2933
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2928
|
-
content: counter(
|
|
2934
|
+
content: counter(cnt1683029832707);
|
|
2929
2935
|
}
|
|
2930
2936
|
/*! ****************************/
|
|
2931
2937
|
/*! text-shadow */
|
package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<div class="w-full h-auto mb-10">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
3
|
+
|
|
4
|
+
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
|
|
5
|
+
<p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
9
|
+
</div>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="
|
|
1
|
+
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
|
|
2
2
|
<header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
6
|
:class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : '' "
|
|
7
|
-
class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
7
|
+
class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
<div id="anchorNavWrapper"
|
|
10
10
|
class="hidden">
|
package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
|
|
5
|
-
{{
|
|
5
|
+
<span class="sr-only">{{loca "label_top_thema"}}</span>
|
|
6
|
+
{{#decorator 'components/base/link'}}
|
|
6
7
|
{{this.text}}
|
|
7
8
|
{{/decorator}}
|
|
8
9
|
</li>
|
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.15.0",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.mdx
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, Preview } from '@storybook/blocks'
|
|
2
|
+
import * as ScrollContainerStories from './horizontal_scroll_container.stories'
|
|
3
|
+
|
|
4
|
+
<Meta of={ScrollContainerStories} />
|
|
5
|
+
|
|
6
|
+
# Horizontal Scroll Container
|
|
7
|
+
|
|
8
|
+
<Canvas>
|
|
9
|
+
<Story of={ScrollContainerStories.Example} />
|
|
10
|
+
</Canvas>
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Beschreibung
|
|
14
|
+
|
|
15
|
+
Diese Komponente stellt einen Inhalts-Slider dar, dessen Inhalt via Pfeiltasten horizontal scrollbar wird, sobald er die Breite des Containers übersteigt.
|
|
16
|
+
Die Komponente wird als Decorator benutzt, d.h. der zu scrollende Inhalt wird innerhalb des Templates via <b>@partial-block</b> ausgegeben. <br /><br />
|
|
17
|
+
Der Übergabeparameter "<b>_viewport</b>" ist ein String und legt die Viewportgröße fest, ab der die Komponente aktiv wird ('xs','sm','md','lg'). <br />
|
|
18
|
+
Der Übergabeparameter "<b>_onDarkBackground</b>" ist ein boolscher Wert mit dem die Farben der Pfeiltasten gesteuert werden können.<br />
|
|
19
|
+
|
|
20
|
+
<br />
|
|
21
|
+
|
|
22
|
+
Die Komponente wird in handlebars wie folgt eingebaut:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
26
|
+
Zu scrollender Inhalt / Komponente / etc
|
|
27
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Derzeit wird diese Komponente auf hessenschau.de in der Brand-Navigation und der Section-Navigation eingesetzt.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import horizontal_scroll_container from './horizontal_scroll_container_example.hbs'
|
|
2
|
+
|
|
3
|
+
const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
4
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
5
|
+
// return `<div>${label}</div>`;
|
|
6
|
+
let brand =
|
|
7
|
+
undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
|
|
8
|
+
return horizontal_scroll_container({ brand, ...args })
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export default {
|
|
12
|
+
title: 'Komponenten/Utilities/Horizontal Scroll Container',
|
|
13
|
+
argTypes: {},
|
|
14
|
+
|
|
15
|
+
parameters: {
|
|
16
|
+
chromatic: {
|
|
17
|
+
viewports: [360, 768, 1024],
|
|
18
|
+
},
|
|
19
|
+
|
|
20
|
+
layout: 'fullscreen',
|
|
21
|
+
|
|
22
|
+
docs: {
|
|
23
|
+
inlineStories: true,
|
|
24
|
+
iframeHeight: 400,
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export const Example = {
|
|
30
|
+
render: Template.bind({}),
|
|
31
|
+
name: 'Example',
|
|
32
|
+
args: null,
|
|
33
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<div class="w-full h-auto mb-10">
|
|
2
|
+
{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
|
|
3
|
+
|
|
4
|
+
<div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
|
|
5
|
+
<p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
{{/components/horizontal_scroll_container/horizontal_scroll_container}}
|
|
9
|
+
</div>
|
|
@@ -2,8 +2,10 @@ import structuredClone from 'core-js-pure/actual/structured-clone'
|
|
|
2
2
|
import NavigationData from '../site_header/fixtures/site_header_default.json'
|
|
3
3
|
import NavigationData2 from '../site_header/fixtures/site_header_mit_warnung.json'
|
|
4
4
|
import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.json'
|
|
5
|
+
import NavigationData4 from '../site_header/fixtures/site_header_mit_top_topics.json'
|
|
5
6
|
|
|
6
7
|
import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
|
|
8
|
+
|
|
7
9
|
const NavigationDataWithTeaser = structuredClone(
|
|
8
10
|
Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
|
|
9
11
|
)
|
|
@@ -13,5 +15,7 @@ const NavigationDataWithTeaser2 = structuredClone(
|
|
|
13
15
|
const NavigationDataWithTeaser3 = structuredClone(
|
|
14
16
|
Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
|
|
15
17
|
)
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
const NavigationDataWithTeaser4 = structuredClone(
|
|
19
|
+
Object.assign({}, NavigationData4, hero_teaser.logicItem.includeModel)
|
|
20
|
+
)
|
|
21
|
+
export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4 }
|
|
@@ -3,6 +3,8 @@ import {
|
|
|
3
3
|
NavigationDataWithTeaser,
|
|
4
4
|
NavigationDataWithTeaser2,
|
|
5
5
|
NavigationDataWithTeaser3,
|
|
6
|
+
NavigationDataWithTeaser4
|
|
7
|
+
|
|
6
8
|
} from './page.data.js'
|
|
7
9
|
|
|
8
10
|
const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
@@ -48,3 +50,9 @@ export const MitSubnavigation = {
|
|
|
48
50
|
name: 'Mit Subnavigation',
|
|
49
51
|
args: NavigationDataWithTeaser3,
|
|
50
52
|
}
|
|
53
|
+
|
|
54
|
+
export const MitTopTopics = {
|
|
55
|
+
render: Template.bind({}),
|
|
56
|
+
name: 'Mit Top-Topics',
|
|
57
|
+
args: NavigationDataWithTeaser4,
|
|
58
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="
|
|
1
|
+
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
|
|
2
2
|
<header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
5
|
@resize.window="resetNav()"
|
|
6
6
|
:class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : '' "
|
|
7
|
-
class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
7
|
+
class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
8
8
|
|
|
9
9
|
<div id="anchorNavWrapper"
|
|
10
10
|
class="hidden">
|
|
@@ -8,7 +8,7 @@ import * as HeaderStories from './header.stories'
|
|
|
8
8
|
[Frameworks](#frameworks) - [Varianten](#varianten) - [Scrollverhalten](#scrollverhalten) - [Templates & Codes](#templates) - [Sub-Komponenten](#subkomponenten)
|
|
9
9
|
|
|
10
10
|
<Canvas>
|
|
11
|
-
|
|
11
|
+
<Story of={HeaderStories.Default} />
|
|
12
12
|
</Canvas>
|
|
13
13
|
|
|
14
14
|
## Beschreibung
|
|
@@ -80,10 +80,6 @@ Mobil:
|
|
|
80
80
|
|
|
81
81
|
<br />
|
|
82
82
|
|
|
83
|
-
<br />
|
|
84
|
-
|
|
85
|
-
<br />
|
|
86
|
-
|
|
87
83
|
Navigation mit zusätzlichem Service-Item:{' '}
|
|
88
84
|
|
|
89
85
|
<Canvas>
|
|
@@ -94,12 +90,6 @@ Navigation mit zusätzlichem Service-Item:{' '}
|
|
|
94
90
|
|
|
95
91
|
<br />
|
|
96
92
|
|
|
97
|
-
<br />
|
|
98
|
-
|
|
99
|
-
<br />
|
|
100
|
-
|
|
101
|
-
<br />
|
|
102
|
-
|
|
103
93
|
Navigation mit zusätzlicher Subnavigation:{' '}
|
|
104
94
|
|
|
105
95
|
<Canvas>
|
|
@@ -110,12 +100,6 @@ Navigation mit zusätzlicher Subnavigation:{' '}
|
|
|
110
100
|
|
|
111
101
|
<br />
|
|
112
102
|
|
|
113
|
-
<br />
|
|
114
|
-
|
|
115
|
-
<br />
|
|
116
|
-
|
|
117
|
-
<br />
|
|
118
|
-
|
|
119
103
|
Navigation mit Top Topics:{' '}
|
|
120
104
|
|
|
121
105
|
<Canvas>
|
|
@@ -419,13 +403,14 @@ Service-Navigation Flyout Tablet/Mobil:
|
|
|
419
403
|
|
|
420
404
|
- section_navigation_item.hbs
|
|
421
405
|
- navigation_flyout.hbs
|
|
406
|
+
- horizontal_scroll_container.hbs
|
|
422
407
|
|
|
423
408
|
<br />
|
|
424
409
|
|
|
425
410
|
Die Section-Navigation stellt die Links zu den einzelnen Themenbereichen der Hessenschau bereit. Die
|
|
426
411
|
Navigation-Items der Section Navigation können je nach Einstellung vom CMS direkt zur Themen-Indexseite
|
|
427
412
|
verlinken oder ihrerseits ein Flyout öffnen, über dessen Einträge dann Themenbereiche angesteuert werden
|
|
428
|
-
können
|
|
413
|
+
können. Wird die Gesamtbreite der Section-Navigation breiter als der Container des Headers, werden am Rand Pfeile zum Verschieben der Navigation angezeigt.
|
|
429
414
|
|
|
430
415
|
<br />
|
|
431
416
|
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
<ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
|
|
3
3
|
{{#each this.items}}
|
|
4
4
|
<li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
|
|
5
|
-
{{
|
|
5
|
+
<span class="sr-only">{{loca "label_top_thema"}}</span>
|
|
6
|
+
{{#decorator 'components/base/link'}}
|
|
6
7
|
{{this.text}}
|
|
7
8
|
{{/decorator}}
|
|
8
9
|
</li>
|