hr-design-system-handlebars 1.24.0 β 1.24.2
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 +29 -0
- package/build/handlebars/helpers/handlebar-helpers.js +0 -8
- package/dist/assets/index.css +6 -3
- package/dist/assets/vendor/js/header.alpine.js +8 -1
- package/dist/views/components/navigation/breadcrumb/breadcrumb.hbs +1 -1
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +5 -6
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout_column.hbs +1 -2
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +7 -11
- package/package.json +12 -12
- package/src/assets/vendor/js/header.alpine.js +8 -1
- package/src/stories/views/components/navigation/breadcrumb/breadcrumb.hbs +1 -1
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +5 -6
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_column.hbs +1 -2
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +7 -11
- package/tailwind.config.js +1 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
+
# v1.24.2 (Tue May 16 2023)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- fixed Flyout problemns for all kind of Flyouts [#636](https://github.com/mumprod/hr-design-system-handlebars/pull/636) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### π Internal
|
|
8
|
+
|
|
9
|
+
- Chore/dpe 2320 [#640](https://github.com/mumprod/hr-design-system-handlebars/pull/640) ([@szuelch](https://github.com/szuelch))
|
|
10
|
+
|
|
11
|
+
#### Authors: 2
|
|
12
|
+
|
|
13
|
+
- [@szuelch](https://github.com/szuelch)
|
|
14
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# v1.24.1 (Tue May 16 2023)
|
|
19
|
+
|
|
20
|
+
#### π Bug Fix
|
|
21
|
+
|
|
22
|
+
- Feature/dpe 2211 [#639](https://github.com/mumprod/hr-design-system-handlebars/pull/639) ([@szuelch](https://github.com/szuelch))
|
|
23
|
+
|
|
24
|
+
#### Authors: 1
|
|
25
|
+
|
|
26
|
+
- [@szuelch](https://github.com/szuelch)
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
1
30
|
# v1.24.0 (Tue May 16 2023)
|
|
2
31
|
|
|
3
32
|
#### π Enhancement
|
|
@@ -237,14 +237,6 @@ var helpers = {
|
|
|
237
237
|
return JSON.stringify(object)
|
|
238
238
|
},
|
|
239
239
|
|
|
240
|
-
'defaultIfEmpty': function (context, defaultValue) {
|
|
241
|
-
if (context) {
|
|
242
|
-
return context
|
|
243
|
-
} else {
|
|
244
|
-
return defaultValue
|
|
245
|
-
}
|
|
246
|
-
},
|
|
247
|
-
|
|
248
240
|
'appendToDefault': function (context, defaultValue) {
|
|
249
241
|
if (context) {
|
|
250
242
|
return defaultValue + ' ' + context
|
package/dist/assets/index.css
CHANGED
|
@@ -2720,7 +2720,7 @@ video {
|
|
|
2720
2720
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2721
2721
|
}
|
|
2722
2722
|
.counter-reset {
|
|
2723
|
-
counter-reset:
|
|
2723
|
+
counter-reset: cnt1684241911532;
|
|
2724
2724
|
}
|
|
2725
2725
|
.hyphens-auto {
|
|
2726
2726
|
-webkit-hyphens: auto;
|
|
@@ -2962,7 +2962,7 @@ video {
|
|
|
2962
2962
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2963
2963
|
}
|
|
2964
2964
|
.-ordered {
|
|
2965
|
-
counter-increment:
|
|
2965
|
+
counter-increment: cnt1684241911532 1;
|
|
2966
2966
|
}
|
|
2967
2967
|
.-ordered::before {
|
|
2968
2968
|
position: absolute;
|
|
@@ -2978,7 +2978,7 @@ video {
|
|
|
2978
2978
|
letter-spacing: .0125em;
|
|
2979
2979
|
--tw-text-opacity: 1;
|
|
2980
2980
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2981
|
-
content: counter(
|
|
2981
|
+
content: counter(cnt1684241911532);
|
|
2982
2982
|
}
|
|
2983
2983
|
/*! ****************************/
|
|
2984
2984
|
/*! text-shadow */
|
|
@@ -5315,6 +5315,9 @@ video {
|
|
|
5315
5315
|
}
|
|
5316
5316
|
.lg\:odd\:pr-4:nth-child(odd) {
|
|
5317
5317
|
padding-right: 1rem;
|
|
5318
|
+
}
|
|
5319
|
+
.lg\:only\:odd\:pr-0:nth-child(odd):only-child {
|
|
5320
|
+
padding-right: 0px;
|
|
5318
5321
|
}
|
|
5319
5322
|
.lg\:even\:pl-4:nth-child(even) {
|
|
5320
5323
|
padding-left: 1rem;
|
|
@@ -276,7 +276,14 @@ document.addEventListener('alpine:init', () => {
|
|
|
276
276
|
Alpine.data('dropdown', () => ({
|
|
277
277
|
// state of the dropdown
|
|
278
278
|
dropped: false,
|
|
279
|
-
|
|
279
|
+
preventDefault(prevDefault, e){
|
|
280
|
+
if(prevDefault){
|
|
281
|
+
e.preventDefault();
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
isDesktopView(){
|
|
285
|
+
return this.$screen('lg')
|
|
286
|
+
},
|
|
280
287
|
// toggle() interpolates state
|
|
281
288
|
toggle() {
|
|
282
289
|
this.dropped = !this.dropped
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<nav id="breadcrumb-nav"{{~#unless this.showBreadcrumbTitleAlways}}
|
|
1
|
+
<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
|
|
2
2
|
role="navigation"
|
|
3
3
|
aria-label="{{loca "breadcrumb_headline"}}"
|
|
4
4
|
> <ul>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
|
-
{{~#if this.showAsFlyout}} lg:rounded-b lg:
|
|
18
|
+
{{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
21
21
|
{{#if this.showAsFlyout}}
|
|
@@ -28,18 +28,17 @@
|
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
30
30
|
>
|
|
31
|
-
{{#
|
|
31
|
+
{{#if this.showAsFlyout ~}}
|
|
32
32
|
{{#if ../this.flyoutStartLinkText}}
|
|
33
33
|
<div class="w-full">
|
|
34
|
-
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
34
|
+
<div class="{{~#if ../_isSectionNav}}hidden lg:flex{{else}}flex{{/if}} pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
35
35
|
<a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
|
|
36
36
|
{{../this.flyoutStartLinkText}}
|
|
37
37
|
</a>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
{{/if}}
|
|
41
|
-
|
|
42
|
-
{{/unless}}
|
|
40
|
+
{{/if}}
|
|
41
|
+
{{/if}}
|
|
43
42
|
|
|
44
43
|
<div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
|
|
45
44
|
{{#if this.showAsFlyout}}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
<ul class="{{inline-switch _count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}}
|
|
1
|
+
<ul class="{{inline-switch _count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}} lg:only:odd:pr-0 lg:even:pl-4 lg:odd:pr-4{{#if _selected}} lg:container lg:flex lg:h-9 {{/if}} ">
|
|
2
2
|
{{~#each this ~}}
|
|
3
3
|
{{~#if this.title~}}
|
|
4
4
|
{{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../_selected _fromNav=../_navtype _flyout=../_flyout _parent=../_parent ~}}
|
|
5
5
|
{{~/if~}}
|
|
6
6
|
{{~/each~}}
|
|
7
|
-
|
|
8
7
|
</ul>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
2
|
-
class="
|
|
2
|
+
class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 text-primary justify-start hover:underline">
|
|
3
3
|
{{#with this}}
|
|
4
4
|
{{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
|
|
5
5
|
{{this.text}}
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
{{~else ~}}
|
|
21
21
|
|
|
22
22
|
{{#if this.subNavigation}}
|
|
23
|
-
|
|
24
23
|
{{#if this.subNavigation.showAsFlyout}}
|
|
25
24
|
{{!-- Gilt z.B. fΓΌr "SHOWS" bei HR3 --}}
|
|
26
|
-
<
|
|
27
|
-
|
|
25
|
+
<a href="{{resourceUrl this.url}}"
|
|
26
|
+
id="button-{{getRandom}}-1"
|
|
27
|
+
@click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
|
|
28
28
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
29
29
|
:class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
|
|
30
|
-
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4
|
|
30
|
+
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
|
|
31
31
|
aria-haspopup="true"
|
|
32
32
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen ? '0' : '-1')"
|
|
33
33
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
{{~this.text~}}
|
|
72
72
|
|
|
73
73
|
{{#if this.subNavigation.showAsFlyout ~}}
|
|
74
|
-
<div class="
|
|
74
|
+
<div class="items-center justify-center hidden w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1 lg:flex">
|
|
75
75
|
<div class="flex items-center justify-center" :class="dropped ? 'transform rotate-180':''">
|
|
76
76
|
{{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
|
|
77
77
|
</div>
|
|
@@ -91,16 +91,12 @@
|
|
|
91
91
|
|
|
92
92
|
</button>
|
|
93
93
|
|
|
94
|
-
{{else if this.subNavigation.showAsFlyout}}
|
|
95
|
-
|
|
96
|
-
</button>
|
|
97
|
-
|
|
98
94
|
{{else}}
|
|
99
95
|
|
|
100
96
|
</a>
|
|
101
97
|
|
|
102
98
|
{{#if this.subNavigation}}
|
|
103
|
-
|
|
99
|
+
|
|
104
100
|
<button
|
|
105
101
|
@click.debounce.100ms="toggle()"
|
|
106
102
|
id="button-{{getRandom}}-1"
|
|
@@ -118,7 +114,7 @@
|
|
|
118
114
|
{{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}
|
|
119
115
|
</div>
|
|
120
116
|
</button>
|
|
121
|
-
|
|
117
|
+
|
|
122
118
|
{{/if}}
|
|
123
119
|
|
|
124
120
|
{{/if}}
|
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.24.
|
|
9
|
+
"version": "1.24.2",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "storybook dev -p 6006 public",
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
"@babel/cli": "^7.13.16",
|
|
41
41
|
"@babel/core": "^7.12.10",
|
|
42
42
|
"@babel/preset-env": "^7.21.4",
|
|
43
|
-
"@storybook/addon-a11y": "^7.0.
|
|
44
|
-
"@storybook/addon-actions": "^7.0.
|
|
45
|
-
"@storybook/addon-essentials": "^7.0.
|
|
46
|
-
"@storybook/addon-links": "^7.0.
|
|
47
|
-
"@storybook/addon-styling": "^1.0.
|
|
48
|
-
"@storybook/addons": "^7.0.
|
|
49
|
-
"@storybook/blocks": "7.0.
|
|
50
|
-
"@storybook/html": "^7.0.
|
|
51
|
-
"@storybook/html-webpack5": "7.0.
|
|
52
|
-
"@storybook/theming": "^7.0.
|
|
43
|
+
"@storybook/addon-a11y": "^7.0.12",
|
|
44
|
+
"@storybook/addon-actions": "^7.0.12",
|
|
45
|
+
"@storybook/addon-essentials": "^7.0.12",
|
|
46
|
+
"@storybook/addon-links": "^7.0.12",
|
|
47
|
+
"@storybook/addon-styling": "^1.0.8",
|
|
48
|
+
"@storybook/addons": "^7.0.12",
|
|
49
|
+
"@storybook/blocks": "7.0.12",
|
|
50
|
+
"@storybook/html": "^7.0.12",
|
|
51
|
+
"@storybook/html-webpack5": "7.0.12",
|
|
52
|
+
"@storybook/theming": "^7.0.12",
|
|
53
53
|
"auto": "^10.26.0",
|
|
54
54
|
"autoprefixer": "^10.4.2",
|
|
55
55
|
"babel-loader": "^8.2.2",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"react-dom": "^18.2.0",
|
|
92
92
|
"remark-gfm": "^3.0.1",
|
|
93
93
|
"rimraf": "^3.0.2",
|
|
94
|
-
"storybook": "^7.0.
|
|
94
|
+
"storybook": "^7.0.12",
|
|
95
95
|
"storybook-conditional-toolbar-selector": "^1.0.3",
|
|
96
96
|
"tailwindcss": "^3.0.23",
|
|
97
97
|
"tailwindcss-hyphens": "^0.1.0",
|
|
@@ -276,7 +276,14 @@ document.addEventListener('alpine:init', () => {
|
|
|
276
276
|
Alpine.data('dropdown', () => ({
|
|
277
277
|
// state of the dropdown
|
|
278
278
|
dropped: false,
|
|
279
|
-
|
|
279
|
+
preventDefault(prevDefault, e){
|
|
280
|
+
if(prevDefault){
|
|
281
|
+
e.preventDefault();
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
isDesktopView(){
|
|
285
|
+
return this.$screen('lg')
|
|
286
|
+
},
|
|
280
287
|
// toggle() interpolates state
|
|
281
288
|
toggle() {
|
|
282
289
|
this.dropped = !this.dropped
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<nav id="breadcrumb-nav"{{~#unless this.showBreadcrumbTitleAlways}}
|
|
1
|
+
<nav id="breadcrumb-nav" class="print:hidden{{~#unless this.showBreadcrumbTitleAlways}} hide-last-item-below-sm{{/unless~}}"
|
|
2
2
|
role="navigation"
|
|
3
3
|
aria-label="{{loca "breadcrumb_headline"}}"
|
|
4
4
|
> <ul>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
|
|
16
16
|
{{else}} z-10002 lg:left-auto lg:w-auto divide-y divide-gray-200{{/unless}}
|
|
17
17
|
{{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
|
|
18
|
-
{{~#if this.showAsFlyout}} lg:rounded-b lg:
|
|
18
|
+
{{~#if this.showAsFlyout}} lg:rounded-b lg:px-4 lg:absolute{{else}} lg:fixed{{/if}}"
|
|
19
19
|
|
|
20
20
|
aria-labelledby="flyout-{{getRandom}}-1"
|
|
21
21
|
{{#if this.showAsFlyout}}
|
|
@@ -28,18 +28,17 @@
|
|
|
28
28
|
{{/if}}
|
|
29
29
|
{{/if}}
|
|
30
30
|
>
|
|
31
|
-
{{#
|
|
31
|
+
{{#if this.showAsFlyout ~}}
|
|
32
32
|
{{#if ../this.flyoutStartLinkText}}
|
|
33
33
|
<div class="w-full">
|
|
34
|
-
<div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
34
|
+
<div class="{{~#if ../_isSectionNav}}hidden lg:flex{{else}}flex{{/if}} pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
|
|
35
35
|
<a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
|
|
36
36
|
{{../this.flyoutStartLinkText}}
|
|
37
37
|
</a>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
{{/if}}
|
|
41
|
-
|
|
42
|
-
{{/unless}}
|
|
40
|
+
{{/if}}
|
|
41
|
+
{{/if}}
|
|
43
42
|
|
|
44
43
|
<div class="{{#if this.showAsFlyout}}lg:flex lg:flex-row -columnCount--{{this.columnCount}} lg:divide-x lg:divide-gray-200 {{else}} {{#if ../this.selected}} w-full lg:px-10 lg:container {{/if}}{{/if}}">
|
|
45
44
|
{{#if this.showAsFlyout}}
|
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_column.hbs
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
<ul class="{{inline-switch _count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}}
|
|
1
|
+
<ul class="{{inline-switch _count '["1","2"]' '["md:w-1/1", "md:w-1/1 lg:w-1/2"]'}} lg:only:odd:pr-0 lg:even:pl-4 lg:odd:pr-4{{#if _selected}} lg:container lg:flex lg:h-9 {{/if}} ">
|
|
2
2
|
{{~#each this ~}}
|
|
3
3
|
{{~#if this.title~}}
|
|
4
4
|
{{> components/site_header/navigation_flyout/navigation_flyout_item _parentselected=../_selected _fromNav=../_navtype _flyout=../_flyout _parent=../_parent ~}}
|
|
5
5
|
{{~/if~}}
|
|
6
6
|
{{~/each~}}
|
|
7
|
-
|
|
8
7
|
</ul>
|
package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
2
|
-
class="
|
|
2
|
+
class="lg:border-0 sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 text-primary justify-start hover:underline">
|
|
3
3
|
{{#with this}}
|
|
4
4
|
{{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation","SubNavInRubrikNav"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
|
|
5
5
|
{{this.text}}
|
package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs
CHANGED
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
{{~else ~}}
|
|
21
21
|
|
|
22
22
|
{{#if this.subNavigation}}
|
|
23
|
-
|
|
24
23
|
{{#if this.subNavigation.showAsFlyout}}
|
|
25
24
|
{{!-- Gilt z.B. fΓΌr "SHOWS" bei HR3 --}}
|
|
26
|
-
<
|
|
27
|
-
|
|
25
|
+
<a href="{{resourceUrl this.url}}"
|
|
26
|
+
id="button-{{getRandom}}-1"
|
|
27
|
+
@click="preventDefault(isDesktopView(),$event); toggle(); correctFlyoutPos()"
|
|
28
28
|
@resize.window="dropped=false; correctFlyoutPos()"
|
|
29
29
|
:class="dropped ? 'lg:underline font-bold lg:font-normal' : 'font-normal'"
|
|
30
|
-
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4
|
|
30
|
+
class="{{#if this.selected}}-currentSection lg:justify-center !font-bold {{/if}}link-focus-inset-white js-load pl-4 pr-8 lg:pr-4 flex flex-auto justify-between lg:flex-initial h-10 lg:w-full items-center leading-4"
|
|
31
31
|
aria-haspopup="true"
|
|
32
32
|
x-effect="$el.setAttribute('aria-expanded', dropped);$el.setAttribute('tabindex', $store.burgeropen ? '0' : '-1')"
|
|
33
33
|
aria-owns="flyout-{{getRandom}}"
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
{{~this.text~}}
|
|
72
72
|
|
|
73
73
|
{{#if this.subNavigation.showAsFlyout ~}}
|
|
74
|
-
<div class="
|
|
74
|
+
<div class="items-center justify-center hidden w-10 h-10 leading-4 lg:w-auto lg:border-0 lg:pl-1 lg:flex">
|
|
75
75
|
<div class="flex items-center justify-center" :class="dropped ? 'transform rotate-180':''">
|
|
76
76
|
{{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-3 h-2 fill-current"}}
|
|
77
77
|
</div>
|
|
@@ -91,16 +91,12 @@
|
|
|
91
91
|
|
|
92
92
|
</button>
|
|
93
93
|
|
|
94
|
-
{{else if this.subNavigation.showAsFlyout}}
|
|
95
|
-
|
|
96
|
-
</button>
|
|
97
|
-
|
|
98
94
|
{{else}}
|
|
99
95
|
|
|
100
96
|
</a>
|
|
101
97
|
|
|
102
98
|
{{#if this.subNavigation}}
|
|
103
|
-
|
|
99
|
+
|
|
104
100
|
<button
|
|
105
101
|
@click.debounce.100ms="toggle()"
|
|
106
102
|
id="button-{{getRandom}}-1"
|
|
@@ -118,7 +114,7 @@
|
|
|
118
114
|
{{> components/base/image/icon _icon="arrow-down" _iconmap="icons" _addClass="w-4 h-2 fill-current"}}
|
|
119
115
|
</div>
|
|
120
116
|
</button>
|
|
121
|
-
|
|
117
|
+
|
|
122
118
|
{{/if}}
|
|
123
119
|
|
|
124
120
|
{{/if}}
|
package/tailwind.config.js
CHANGED
|
@@ -317,7 +317,7 @@ module.exports = {
|
|
|
317
317
|
'secondary': 'var(--color-secondary-ds)',
|
|
318
318
|
'highlight-1': 'var(--color-highlight-1)',
|
|
319
319
|
'highlight-2': 'var(--color-highlight-2)',
|
|
320
|
-
'top-topic-background':
|
|
320
|
+
'top-topic-background': 'var(--color-top-topic-background)',
|
|
321
321
|
'labelMedia': 'var(--color-label-media)',
|
|
322
322
|
'labelEvent': 'var(--color-label-event)',
|
|
323
323
|
'labelBreakingnews': 'var(--color-label-breakingnews)',
|
|
@@ -327,7 +327,6 @@ module.exports = {
|
|
|
327
327
|
'labelDownload': 'var(--color-label-download)',
|
|
328
328
|
'labelPm': 'var(--color-label-pm)',
|
|
329
329
|
'labelLive': 'var(--color-label-live)',
|
|
330
|
-
'labelProgram': 'var(--color-label-program)',
|
|
331
330
|
'labelKurzmeldung': 'var(--color-label-kurzmeldung)',
|
|
332
331
|
'toplineColor': 'var(--color-topline)',
|
|
333
332
|
'subline': 'var(--color-subline)',
|