hr-design-system-handlebars 1.63.5 → 1.63.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 +24 -0
- package/dist/assets/icons/icons/svgmap/sharing.svg +11 -0
- package/dist/assets/icons/icons/svgmap.min.svg +1 -1
- package/dist/assets/index.css +29 -37
- package/dist/assets/js/alpine.js +3 -0
- package/dist/assets/js/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/dist/views/components/page/index/page_test_story.hbs +36 -0
- package/dist/views/components/site_header/header.hbs +1 -0
- package/dist/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views/components/top_button/top_button.hbs +1 -1
- package/dist/views_static/components/page/index/page_test_story.hbs +36 -0
- package/dist/views_static/components/site_header/header.hbs +1 -0
- package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/dist/views_static/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/dist/views_static/components/top_button/top_button.hbs +1 -1
- package/package.json +1 -1
- package/src/assets/icons/icons/svgmap/sharing.svg +11 -0
- package/src/assets/icons/icons/svgmap.min.svg +1 -1
- package/src/assets/js/alpine.js +3 -0
- package/src/stories/views/components/page/components/metadatabox.stories.js +1 -1
- package/src/stories/views/components/page/index/page.data.js +6 -2
- package/src/stories/views/components/page/index/page.stories.js +15 -0
- package/src/stories/views/components/page/index/page_test_story.hbs +36 -0
- package/src/stories/views/components/site_header/header.hbs +1 -0
- package/src/stories/views/components/site_header/mainNavigationHandler.alpine.js +1 -0
- package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +13 -10
- package/src/stories/views/components/social_sharing/social_sharing_compact.stories.js +1 -1
- package/src/stories/views/components/social_sharing/social_sharing_compact_icons.hbs +5 -5
- package/src/stories/views/components/top_button/top_button.hbs +1 -1
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import page from './page.hbs'
|
|
2
2
|
import page_pagination from '../../pagination/page_pagination.hbs'
|
|
3
|
+
import page_article from './page_test_story.hbs'
|
|
4
|
+
|
|
3
5
|
import {
|
|
4
6
|
NavigationDataWithTeaser,
|
|
5
7
|
NavigationDataWithTeaser2,
|
|
6
8
|
NavigationDataWithTeaser3,
|
|
7
9
|
NavigationDataWithTeaser4,
|
|
10
|
+
NavigationDataWithTeaser5
|
|
8
11
|
} from './page.data.js'
|
|
9
12
|
|
|
10
13
|
import { NavigationDataWithMixedContent } from '../../pagination/page_pagination.data.js'
|
|
@@ -23,6 +26,12 @@ const Template2 = (args, { globals: { theme } }) => {
|
|
|
23
26
|
return page_pagination({ brand, ...args })
|
|
24
27
|
}
|
|
25
28
|
|
|
29
|
+
const Template3 = (args, { globals: { theme } }) => {
|
|
30
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
31
|
+
// return `<div>${label}</div>`;
|
|
32
|
+
let brand = undefined !== theme ? theme : 'hessenschau'
|
|
33
|
+
return page_article({ brand, ...args })
|
|
34
|
+
}
|
|
26
35
|
export default {
|
|
27
36
|
title: 'Seiten/Index',
|
|
28
37
|
argTypes: {},
|
|
@@ -70,4 +79,10 @@ export const MitTopTopics = {
|
|
|
70
79
|
render: Template.bind({}),
|
|
71
80
|
name: 'Mit Top-Topics',
|
|
72
81
|
args: NavigationDataWithTeaser4,
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export const MitArtikel = {
|
|
85
|
+
render: Template3.bind({}),
|
|
86
|
+
name: 'Mit Artikel',
|
|
87
|
+
args: NavigationDataWithTeaser5,
|
|
73
88
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html
|
|
3
|
+
class="no-js no-js-burgerMenu preload noMicroInteraction"
|
|
4
|
+
data-theme="hessenschau"
|
|
5
|
+
lang="de"
|
|
6
|
+
>
|
|
7
|
+
<head>
|
|
8
|
+
|
|
9
|
+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
10
|
+
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
11
|
+
<title>hessenschau.de | Nachrichten aus Hessen</title>
|
|
12
|
+
<meta name="application-name" content="hessenschau.de" />
|
|
13
|
+
<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
|
|
14
|
+
<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
|
|
15
|
+
<meta name="publisher" content="hessenschau.de" />
|
|
16
|
+
<meta name="language" content="Deutsch" />
|
|
17
|
+
|
|
18
|
+
</head>
|
|
19
|
+
|
|
20
|
+
<body itemscope itemtype="http://schema.org/WebPage">
|
|
21
|
+
{{> components/site_header/header }}
|
|
22
|
+
<div class="js-pageSwap">
|
|
23
|
+
<main
|
|
24
|
+
onclick="void(0)"
|
|
25
|
+
role="main"
|
|
26
|
+
id="content"
|
|
27
|
+
class="flex flex-col items-center justify-center"
|
|
28
|
+
>
|
|
29
|
+
|
|
30
|
+
{{> components/page/story/story_article }}
|
|
31
|
+
{{> components/top_button/top_button }}
|
|
32
|
+
</main>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<header class="print:hidden relative z-110 {{#if _useSticky}}{{#if this.hasOpenSubNavigation}}lg:h-header-lg-big {{else}}lg:h-header-lg-small {{/if}}{{else}}lg:h-auto {{/if}}md:h-header-md h-header-sm">
|
|
3
3
|
<div x-data
|
|
4
4
|
id="headerWrapper"
|
|
5
|
+
x-ref="headerWrapper"
|
|
5
6
|
@resize.window="resetNav()"
|
|
6
7
|
:class="shouldBrandNavBeHidden() ? '-mt-[33px] md:-mt-[33px]' : '' "
|
|
7
8
|
class="{{#if _useSticky }}fixed top-0 left-0{{/if}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
|
|
@@ -34,6 +34,7 @@ export default () => ({
|
|
|
34
34
|
let winScroll = document.body.scrollTop || document.documentElement.scrollTop
|
|
35
35
|
winScroll > lastScrollTop ? (this.scrollingDown = true) : (this.scrollingDown = false)
|
|
36
36
|
this.percent = Math.round((winScroll / height) * 100)
|
|
37
|
+
this.$store.globalPercent.current = this.percent
|
|
37
38
|
lastScrollTop = winScroll
|
|
38
39
|
this.$store.navIsVisible = !this.isNavHidden()
|
|
39
40
|
this.$store.subNavIsVisible = !this.isSubNavHidden()
|
|
@@ -40,28 +40,30 @@
|
|
|
40
40
|
x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
|
|
41
41
|
x-id="['dropdown-button']"
|
|
42
42
|
class="flex self-center justify-end grow "
|
|
43
|
-
x-intersect:leave="sharingIsVisible = false"
|
|
44
|
-
x-intersect:enter="sharingIsVisible = true"
|
|
43
|
+
x-intersect:leave.margin.-160px.0px.0px.0px="sharingIsVisible = false"
|
|
44
|
+
x-intersect:enter.margin.-160px.0px.0px.0px="sharingIsVisible = true"
|
|
45
|
+
|
|
45
46
|
>
|
|
46
|
-
|
|
47
|
+
{{!-- <div class="fixed left-1 top-40">
|
|
47
48
|
sharingIsVisible:<span x-text="sharingIsVisible" ></span><br>
|
|
48
49
|
open:<span x-text="open" ></span><br>
|
|
49
|
-
isDesktop:<span x-text="isDesktop" ></span>
|
|
50
|
-
|
|
50
|
+
isDesktop:<span x-text="isDesktop" ></span><br>
|
|
51
|
+
PercentScrolled:<span x-text="$store.globalPercent.current"></span>
|
|
52
|
+
</div> --}}
|
|
53
|
+
|
|
51
54
|
<div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
|
|
52
55
|
<div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
|
|
53
|
-
<div class="flex gap-3" :class="{ 'bottom-5 socialShareDesktop:top-
|
|
56
|
+
<div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
|
|
54
57
|
<button
|
|
55
|
-
class="order-2
|
|
58
|
+
class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
|
|
56
59
|
x-show="!isDesktop"
|
|
57
60
|
x-ref="button"
|
|
58
61
|
x-on:click="toggle()"
|
|
59
62
|
:aria-expanded="open"
|
|
60
63
|
:aria-controls="$id('dropdown-button')">
|
|
61
|
-
{{> components/base/image/icon _addClass="w-
|
|
64
|
+
{{> components/base/image/icon _addClass="w-5 h-5 fill-current group-hover:fill-link--dark" _icon="sharing" _iconmap="icons" }}
|
|
62
65
|
</button>
|
|
63
66
|
|
|
64
|
-
|
|
65
67
|
<!-- Panel -->
|
|
66
68
|
<div
|
|
67
69
|
x-ref="panel"
|
|
@@ -69,7 +71,8 @@
|
|
|
69
71
|
x-transition.origin.right
|
|
70
72
|
x-on:click.outside="close($refs.button)"
|
|
71
73
|
:id="$id('dropdown-button')"
|
|
72
|
-
class="bg-white"
|
|
74
|
+
class="p-1 bg-white "
|
|
75
|
+
:class="sharingIsVisible ? 'h-8 absolute right-[60px] z-100 md:relative md:right-0' : 'relative right-0 z-1 w-8'"
|
|
73
76
|
>
|
|
74
77
|
<ul class="flex gap-3" :class="{ 'flex-col': ! sharingIsVisible }">
|
|
75
78
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::X"}]}'
|
|
10
10
|
{{/with}}
|
|
11
11
|
>
|
|
12
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
12
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105 " _icon="x-ds" _iconmap="icons" ~}}
|
|
13
13
|
</a>
|
|
14
14
|
</li>
|
|
15
15
|
<li class="">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::facebook"}]}'
|
|
24
24
|
{{/with}}
|
|
25
25
|
>
|
|
26
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
26
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="facebook-ds" _iconmap="icons" ~}}
|
|
27
27
|
</a>
|
|
28
28
|
</li>
|
|
29
29
|
<li class="">
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::whatsapp"}]}'
|
|
38
38
|
{{/with}}
|
|
39
39
|
>
|
|
40
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
40
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="whatsapp-ds" _iconmap="icons" ~}}
|
|
41
41
|
</a>
|
|
42
42
|
</li>
|
|
43
43
|
<li class="">
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::mailto"}]}'
|
|
50
50
|
{{/with}}
|
|
51
51
|
>
|
|
52
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
52
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="kontakt-ds" _iconmap="icons" ~}}
|
|
53
53
|
</a>
|
|
54
54
|
</li>
|
|
55
55
|
<li class="">
|
|
@@ -61,6 +61,6 @@
|
|
|
61
61
|
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "socialShareClick::printbutton"}]}'
|
|
62
62
|
{{/with}}
|
|
63
63
|
>
|
|
64
|
-
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:
|
|
64
|
+
{{~> components/base/image/icon _addClass="w-full h-full fill-link hover:scale-105" _icon="copy-ds" _iconmap="icons" ~}}
|
|
65
65
|
</a>
|
|
66
66
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
x-transition:leave="transition ease-[cubic-bezier(0.68,-0.3,0.32,1)] duration-300 transform absolute"
|
|
13
13
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
14
14
|
x-transition:leave-end="opacity-0 translate-y-12"
|
|
15
|
-
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-
|
|
15
|
+
class="{{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant="primary"}} -mt-6 z-100 p-2 h-max mr-5 hover:scale-105 [@media(min-width:1170px)]:-mr-14"
|
|
16
16
|
>
|
|
17
17
|
{{> components/base/image/icon _icon="arrow-up" _addClass="w-5 h-5 fill-current dark:fill-link-dark"}}
|
|
18
18
|
</button>
|