hr-design-system-handlebars 0.56.7 → 0.56.8
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 +12 -0
- package/dist/assets/index.css +23 -22
- package/dist/views/components/content_nav/content_nav.hbs +15 -44
- package/dist/views/components/content_nav/content_nav_container.hbs +14 -0
- package/dist/views/components/content_nav/content_nav_item.hbs +4 -4
- package/dist/views/components/content_nav/content_nav_list.hbs +2 -2
- package/dist/views/components/content_nav/dropdown.hbs +18 -13
- package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs +5 -13
- package/package.json +1 -1
- package/src/stories/views/components/content_nav/content_nav.hbs +15 -44
- package/src/stories/views/components/content_nav/content_nav_container.hbs +14 -0
- package/src/stories/views/components/content_nav/content_nav_item.hbs +4 -4
- package/src/stories/views/components/content_nav/content_nav_list.hbs +2 -2
- package/src/stories/views/components/content_nav/dropdown.hbs +18 -13
- package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs +5 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.56.8 (Thu Sep 01 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Content nav part9 [#313](https://github.com/mumprod/hr-design-system-handlebars/pull/313) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.56.7 (Thu Sep 01 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -434,7 +434,7 @@ video {
|
|
|
434
434
|
--tw-scale-y: 1;
|
|
435
435
|
}
|
|
436
436
|
|
|
437
|
-
.btn--secondary,
|
|
437
|
+
.btn--secondary, .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
|
|
438
438
|
--tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
|
|
439
439
|
--tw-ring-shadow: 0 0 rgba(0,0,0,0);
|
|
440
440
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
@@ -689,6 +689,14 @@ video {
|
|
|
689
689
|
.m-1 {
|
|
690
690
|
margin: 0.25rem;
|
|
691
691
|
}
|
|
692
|
+
.mx-2 {
|
|
693
|
+
margin-left: 0.5rem;
|
|
694
|
+
margin-right: 0.5rem;
|
|
695
|
+
}
|
|
696
|
+
.mx-0 {
|
|
697
|
+
margin-left: 0px;
|
|
698
|
+
margin-right: 0px;
|
|
699
|
+
}
|
|
692
700
|
.mx-4 {
|
|
693
701
|
margin-left: 1rem;
|
|
694
702
|
margin-right: 1rem;
|
|
@@ -709,10 +717,6 @@ video {
|
|
|
709
717
|
margin-left: 1px;
|
|
710
718
|
margin-right: 1px;
|
|
711
719
|
}
|
|
712
|
-
.mx-0 {
|
|
713
|
-
margin-left: 0px;
|
|
714
|
-
margin-right: 0px;
|
|
715
|
-
}
|
|
716
720
|
.mx-1\.5 {
|
|
717
721
|
margin-left: 0.375rem;
|
|
718
722
|
margin-right: 0.375rem;
|
|
@@ -733,12 +737,12 @@ video {
|
|
|
733
737
|
.mt-0 {
|
|
734
738
|
margin-top: 0px;
|
|
735
739
|
}
|
|
736
|
-
.mt-1 {
|
|
737
|
-
margin-top: 0.25rem;
|
|
738
|
-
}
|
|
739
740
|
.ml-2 {
|
|
740
741
|
margin-left: 0.5rem;
|
|
741
742
|
}
|
|
743
|
+
.mb-2 {
|
|
744
|
+
margin-bottom: 0.5rem;
|
|
745
|
+
}
|
|
742
746
|
.-mt-2 {
|
|
743
747
|
margin-top: -0.5rem;
|
|
744
748
|
}
|
|
@@ -748,9 +752,6 @@ video {
|
|
|
748
752
|
.-mt-10 {
|
|
749
753
|
margin-top: -2.5rem;
|
|
750
754
|
}
|
|
751
|
-
.mb-2 {
|
|
752
|
-
margin-bottom: 0.5rem;
|
|
753
|
-
}
|
|
754
755
|
.\!mb-0 {
|
|
755
756
|
margin-bottom: 0px !important;
|
|
756
757
|
}
|
|
@@ -1776,14 +1777,14 @@ video {
|
|
|
1776
1777
|
.opacity-80 {
|
|
1777
1778
|
opacity: 0.8;
|
|
1778
1779
|
}
|
|
1779
|
-
|
|
1780
|
-
--tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10);
|
|
1781
|
-
--tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color);
|
|
1782
|
-
-webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
1783
|
-
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
1784
|
-
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
|
|
1785
|
-
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
1786
|
-
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
1780
|
+
.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1781
|
+
--tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
|
|
1782
|
+
--tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
|
|
1783
|
+
-webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1784
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1785
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1786
|
+
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1787
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1787
1788
|
}
|
|
1788
1789
|
.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1789
1790
|
--tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
|
|
@@ -1896,7 +1897,7 @@ video {
|
|
|
1896
1897
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
1897
1898
|
}
|
|
1898
1899
|
.counter-reset {
|
|
1899
|
-
counter-reset:
|
|
1900
|
+
counter-reset: cnt1662058116451;
|
|
1900
1901
|
}
|
|
1901
1902
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
1902
1903
|
font-size: 0.75rem;
|
|
@@ -2279,7 +2280,7 @@ video {
|
|
|
2279
2280
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2280
2281
|
}
|
|
2281
2282
|
.-ordered {
|
|
2282
|
-
counter-increment:
|
|
2283
|
+
counter-increment: cnt1662058116451 1;
|
|
2283
2284
|
}
|
|
2284
2285
|
.-ordered::before {
|
|
2285
2286
|
position: absolute;
|
|
@@ -2296,7 +2297,7 @@ video {
|
|
|
2296
2297
|
letter-spacing: .0125em;
|
|
2297
2298
|
--tw-text-opacity: 1;
|
|
2298
2299
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2299
|
-
content: counter(
|
|
2300
|
+
content: counter(cnt1662058116451);
|
|
2300
2301
|
}
|
|
2301
2302
|
/*! purgecss start ignore */
|
|
2302
2303
|
:root,
|
|
@@ -1,38 +1,19 @@
|
|
|
1
1
|
{{#with this.contentNav}}
|
|
2
2
|
{{#if this.isList}}
|
|
3
3
|
<nav class="c-content-nav">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{#if this.isAutosuggest}}
|
|
10
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
11
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
12
|
-
placeholder="Eintrag filtern"/>
|
|
13
|
-
</div>
|
|
14
|
-
{{/if}}
|
|
15
|
-
|
|
16
|
-
{{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
|
|
17
|
-
</div>
|
|
18
|
-
|
|
4
|
+
{{> components/content_nav/content_nav_container
|
|
5
|
+
_teasersize=../_teasersize
|
|
6
|
+
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
7
|
+
_inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
|
|
8
|
+
}}
|
|
19
9
|
</nav>
|
|
20
10
|
{{else if this.isFlow}}
|
|
21
11
|
<nav class="c-content-nav">
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{{#if this.isAutosuggest}}
|
|
28
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
29
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
30
|
-
placeholder="Eintrag filtern"/>
|
|
31
|
-
</div>
|
|
32
|
-
{{/if}}
|
|
33
|
-
|
|
34
|
-
{{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
|
|
35
|
-
</div>
|
|
12
|
+
{{> components/content_nav/content_nav_container
|
|
13
|
+
_teasersize=../_teasersize
|
|
14
|
+
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
15
|
+
_inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center "
|
|
16
|
+
}}
|
|
36
17
|
</nav>
|
|
37
18
|
{{else}}
|
|
38
19
|
{{#>components/content_nav/dropdown
|
|
@@ -43,21 +24,11 @@
|
|
|
43
24
|
_buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
|
|
44
25
|
_hiddenNavigationLabel="Unternavigation"
|
|
45
26
|
}}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{{#if this.isAutosuggest}}
|
|
52
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
53
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
54
|
-
placeholder="Eintrag filtern"/>
|
|
55
|
-
</div>
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{> components/content_nav/content_nav_list _teasersize=_teasersize}}
|
|
58
|
-
|
|
59
|
-
</div>
|
|
27
|
+
{{> components/content_nav/content_nav_container
|
|
28
|
+
_teasersize=_teasersize
|
|
29
|
+
_maindivclass="flex flex-wrap mt-0"
|
|
30
|
+
_inputcontainerclass="flex w-full h-10 mx-0 border-blue-congress align-center "
|
|
31
|
+
}}
|
|
60
32
|
{{/components/content_nav/dropdown}}
|
|
61
|
-
|
|
62
33
|
{{/if}}
|
|
63
34
|
{{/with}}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<div x-on:click.outside ="$store.contentNavDropdownIsOpen = false;" class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
2
|
+
{{#if this.isAutosuggest}}
|
|
3
|
+
data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
|
|
4
|
+
{{/if}}
|
|
5
|
+
>
|
|
6
|
+
{{#if this.isAutosuggest}}
|
|
7
|
+
<div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">
|
|
8
|
+
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
9
|
+
placeholder="Eintrag filtern"/>
|
|
10
|
+
</div>
|
|
11
|
+
{{/if}}
|
|
12
|
+
|
|
13
|
+
{{> components/content_nav/content_nav_list _teasersize=_teasersize }}
|
|
14
|
+
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})"
|
|
2
|
-
class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
|
|
2
|
+
class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
|
|
3
3
|
{{#>components/base/link.hbs
|
|
4
4
|
_doNavigationTracking="true"
|
|
5
5
|
_clickLabelType="Contentnavigation"
|
|
@@ -9,14 +9,14 @@ class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-co
|
|
|
9
9
|
_selectedCssClass="is-selected"
|
|
10
10
|
}}
|
|
11
11
|
|
|
12
|
-
<span class="flex
|
|
12
|
+
<span class="flex text-base grow font-copy js-title">{{this.title}}</span>
|
|
13
13
|
|
|
14
14
|
{{#if this.link.hasIcon}}
|
|
15
|
-
{{> components/base/image/icon _icon=this.link.iconName _addClass="
|
|
15
|
+
{{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}
|
|
16
16
|
{{/if}}
|
|
17
17
|
|
|
18
18
|
<span>
|
|
19
|
-
{{>components/base/image/icon _icon="arrow-right" _addClass="
|
|
19
|
+
{{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }}
|
|
20
20
|
</span>
|
|
21
21
|
|
|
22
22
|
{{/components/base/link.hbs}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? 'shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
1
|
+
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
2
2
|
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
|
|
3
3
|
|
|
4
4
|
{{~#each this.contentNavEntries~}}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
{{#if ../isDropdown}}
|
|
9
9
|
|
|
10
|
-
<li class="w-full h-auto
|
|
10
|
+
<li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
|
|
11
11
|
<div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
|
|
12
12
|
<ul class="c-content-nav__group-list !px-0 mt-0 ">
|
|
13
13
|
{{~#each this.navigationGroup~}}
|
|
@@ -1,32 +1,37 @@
|
|
|
1
1
|
<nav
|
|
2
|
-
class="w-full px-2 md:px-0 {{_componentClass}}
|
|
2
|
+
class="w-full px-2 md:px-0 {{_componentClass}} "
|
|
3
3
|
id="dropdown--{{nextRandom}}"
|
|
4
4
|
tabindex="0"
|
|
5
5
|
role="navigation"
|
|
6
6
|
aria-labelledby="dropdown__label--{{getRandom}}">
|
|
7
7
|
|
|
8
|
-
<span id="
|
|
8
|
+
<span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
|
|
9
9
|
|
|
10
10
|
<div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
11
11
|
:class="$store.contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
|
|
12
|
-
class="relative flex w-full h-10 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress" >
|
|
12
|
+
class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress" >
|
|
13
13
|
|
|
14
|
-
<span class="
|
|
14
|
+
<span class="self-center w-full p-2 text-base">
|
|
15
15
|
{{_buttonText}}
|
|
16
16
|
</span>
|
|
17
|
-
<div class="flex self-center w-auto h-full px-
|
|
18
|
-
<span
|
|
19
|
-
|
|
17
|
+
<div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">
|
|
18
|
+
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen"
|
|
19
|
+
:class="$store.contentNavDropdownIsOpen ? 'hidden' : ''"
|
|
20
|
+
class="flex self-center">
|
|
21
|
+
|
|
22
|
+
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
23
|
+
|
|
20
24
|
</span>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch('resetinput')"
|
|
26
|
+
:class="$store.contentNavDropdownIsOpen ? '' : 'hidden'"
|
|
27
|
+
class="flex self-center">
|
|
28
|
+
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
24
29
|
</span>
|
|
25
30
|
</div>
|
|
26
|
-
|
|
27
31
|
</div>
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
33
|
+
aria-haspopup="true"
|
|
34
|
+
class="p-0 m-0 z-10000 md:relative md:left-0 md:h-auto md:overflow-visible">
|
|
30
35
|
{{> @partial-block }}
|
|
31
36
|
</div>
|
|
32
37
|
|
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
<div x-data="contentNavigationHandler()" class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
{{> components/content_nav/content_nav _modifier="-as-dropdown" _teasersize=this.teasersize}}
|
|
6
|
-
|
|
2
|
+
{{#if this.contentNav.isDropdown}}
|
|
3
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize}}
|
|
7
4
|
{{else this.contentNav.isList }}
|
|
8
|
-
|
|
9
|
-
{{> components/content_nav/content_nav _modifier=(replaceTokens "-as-button -at-{0}" this.realTeasersize) _teasersize=this.teasersize}}
|
|
10
|
-
|
|
5
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize}}
|
|
11
6
|
{{else}}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{{/if}}
|
|
16
|
-
|
|
7
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize }}
|
|
8
|
+
{{/if}}
|
|
17
9
|
</div>
|
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": "0.56.
|
|
9
|
+
"version": "0.56.8",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -1,38 +1,19 @@
|
|
|
1
1
|
{{#with this.contentNav}}
|
|
2
2
|
{{#if this.isList}}
|
|
3
3
|
<nav class="c-content-nav">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
{{#if this.isAutosuggest}}
|
|
10
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
11
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
12
|
-
placeholder="Eintrag filtern"/>
|
|
13
|
-
</div>
|
|
14
|
-
{{/if}}
|
|
15
|
-
|
|
16
|
-
{{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
|
|
17
|
-
</div>
|
|
18
|
-
|
|
4
|
+
{{> components/content_nav/content_nav_container
|
|
5
|
+
_teasersize=../_teasersize
|
|
6
|
+
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
7
|
+
_inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
|
|
8
|
+
}}
|
|
19
9
|
</nav>
|
|
20
10
|
{{else if this.isFlow}}
|
|
21
11
|
<nav class="c-content-nav">
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{{#if this.isAutosuggest}}
|
|
28
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
29
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
30
|
-
placeholder="Eintrag filtern"/>
|
|
31
|
-
</div>
|
|
32
|
-
{{/if}}
|
|
33
|
-
|
|
34
|
-
{{> components/content_nav/content_nav_list _teasersize=../_teasersize}}
|
|
35
|
-
</div>
|
|
12
|
+
{{> components/content_nav/content_nav_container
|
|
13
|
+
_teasersize=../_teasersize
|
|
14
|
+
_maindivclass="flex flex-wrap mt-2 md:mt-0"
|
|
15
|
+
_inputcontainerclass="flex w-full h-10 mx-2 md:mx-0 border-blue-congress align-center "
|
|
16
|
+
}}
|
|
36
17
|
</nav>
|
|
37
18
|
{{else}}
|
|
38
19
|
{{#>components/content_nav/dropdown
|
|
@@ -43,21 +24,11 @@
|
|
|
43
24
|
_buttonText=(defaultIfEmpty this.selectedItem.title ../../title)
|
|
44
25
|
_hiddenNavigationLabel="Unternavigation"
|
|
45
26
|
}}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
{{#if this.isAutosuggest}}
|
|
52
|
-
<div class="flex w-full h-10 mt-2 md:mx-0 c-content-nav__autosuggest border-blue-congress align-center">
|
|
53
|
-
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
54
|
-
placeholder="Eintrag filtern"/>
|
|
55
|
-
</div>
|
|
56
|
-
{{/if}}
|
|
57
|
-
{{> components/content_nav/content_nav_list _teasersize=_teasersize}}
|
|
58
|
-
|
|
59
|
-
</div>
|
|
27
|
+
{{> components/content_nav/content_nav_container
|
|
28
|
+
_teasersize=_teasersize
|
|
29
|
+
_maindivclass="flex flex-wrap mt-0"
|
|
30
|
+
_inputcontainerclass="flex w-full h-10 mx-0 border-blue-congress align-center "
|
|
31
|
+
}}
|
|
60
32
|
{{/components/content_nav/dropdown}}
|
|
61
|
-
|
|
62
33
|
{{/if}}
|
|
63
34
|
{{/with}}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<div x-on:click.outside ="$store.contentNavDropdownIsOpen = false;" class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
2
|
+
{{#if this.isAutosuggest}}
|
|
3
|
+
data-hr-auto-suggest='{"filterGroupsSelector":".c-content-nav__group", "filterElementSelector":".c-content-nav__item", "filterTextSelector":".js-title", "inputElementSelector":".js-autosuggest-input", "matchedClass":"", "unmatchedClass":"hidden"}'
|
|
4
|
+
{{/if}}
|
|
5
|
+
>
|
|
6
|
+
{{#if this.isAutosuggest}}
|
|
7
|
+
<div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">
|
|
8
|
+
<input x-ref="autosuggestInput" class="w-full h-8 pl-2 bg-gray-200 placeholder:text-gray-800 focus:outline-none js-autosuggest-input" type="text"
|
|
9
|
+
placeholder="Eintrag filtern"/>
|
|
10
|
+
</div>
|
|
11
|
+
{{/if}}
|
|
12
|
+
|
|
13
|
+
{{> components/content_nav/content_nav_list _teasersize=_teasersize }}
|
|
14
|
+
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<li x-init="chooseListItemStyles({{_teasersize}},{{_islist}},{{_ismixed}},{{_isdropdown}},{{_isflow}})"
|
|
2
|
-
class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} -current{{/if}} c-content-nav__item">
|
|
2
|
+
class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-congress fill-congress text-blue-congress bg-white hover:bg-blue-congress hover:fill-white hover:text-white hover:underline {{#if this.isSelected}} font-bold -current{{/if}} c-content-nav__item">
|
|
3
3
|
{{#>components/base/link.hbs
|
|
4
4
|
_doNavigationTracking="true"
|
|
5
5
|
_clickLabelType="Contentnavigation"
|
|
@@ -9,14 +9,14 @@ class="h-10 md:mx-0 overflow-hidden text-base font-copy list-none border-blue-co
|
|
|
9
9
|
_selectedCssClass="is-selected"
|
|
10
10
|
}}
|
|
11
11
|
|
|
12
|
-
<span class="flex
|
|
12
|
+
<span class="flex text-base grow font-copy js-title">{{this.title}}</span>
|
|
13
13
|
|
|
14
14
|
{{#if this.link.hasIcon}}
|
|
15
|
-
{{> components/base/image/icon _icon=this.link.iconName _addClass="
|
|
15
|
+
{{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}
|
|
16
16
|
{{/if}}
|
|
17
17
|
|
|
18
18
|
<span>
|
|
19
|
-
{{>components/base/image/icon _icon="arrow-right" _addClass="
|
|
19
|
+
{{>components/base/image/icon _icon="arrow-right" _addClass="h-4 w-4 ml-2" }}
|
|
20
20
|
</span>
|
|
21
21
|
|
|
22
22
|
{{/components/base/link.hbs}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? 'shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
1
|
+
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen === true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
2
2
|
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
|
|
3
3
|
|
|
4
4
|
{{~#each this.contentNavEntries~}}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
{{#if ../isDropdown}}
|
|
9
9
|
|
|
10
|
-
<li class="w-full h-auto
|
|
10
|
+
<li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
|
|
11
11
|
<div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
|
|
12
12
|
<ul class="c-content-nav__group-list !px-0 mt-0 ">
|
|
13
13
|
{{~#each this.navigationGroup~}}
|
|
@@ -1,32 +1,37 @@
|
|
|
1
1
|
<nav
|
|
2
|
-
class="w-full px-2 md:px-0 {{_componentClass}}
|
|
2
|
+
class="w-full px-2 md:px-0 {{_componentClass}} "
|
|
3
3
|
id="dropdown--{{nextRandom}}"
|
|
4
4
|
tabindex="0"
|
|
5
5
|
role="navigation"
|
|
6
6
|
aria-labelledby="dropdown__label--{{getRandom}}">
|
|
7
7
|
|
|
8
|
-
<span id="
|
|
8
|
+
<span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
|
|
9
9
|
|
|
10
10
|
<div x-show="shouldDropdownBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
11
11
|
:class="$store.contentNavDropdownIsOpen ? 'shadow-[1px_4px_5px_0px_rgba(50,50,93,0.10)]' : ''"
|
|
12
|
-
class="relative flex w-full h-10 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress" >
|
|
12
|
+
class="relative flex w-full h-10 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress" >
|
|
13
13
|
|
|
14
|
-
<span class="
|
|
14
|
+
<span class="self-center w-full p-2 text-base">
|
|
15
15
|
{{_buttonText}}
|
|
16
16
|
</span>
|
|
17
|
-
<div class="flex self-center w-auto h-full px-
|
|
18
|
-
<span
|
|
19
|
-
|
|
17
|
+
<div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">
|
|
18
|
+
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen"
|
|
19
|
+
:class="$store.contentNavDropdownIsOpen ? 'hidden' : ''"
|
|
20
|
+
class="flex self-center">
|
|
21
|
+
|
|
22
|
+
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
23
|
+
|
|
20
24
|
</span>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch('resetinput')"
|
|
26
|
+
:class="$store.contentNavDropdownIsOpen ? '' : 'hidden'"
|
|
27
|
+
class="flex self-center">
|
|
28
|
+
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
24
29
|
</span>
|
|
25
30
|
</div>
|
|
26
|
-
|
|
27
31
|
</div>
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})"
|
|
33
|
+
aria-haspopup="true"
|
|
34
|
+
class="p-0 m-0 z-10000 md:relative md:left-0 md:h-auto md:overflow-visible">
|
|
30
35
|
{{> @partial-block }}
|
|
31
36
|
</div>
|
|
32
37
|
|
|
@@ -1,17 +1,9 @@
|
|
|
1
1
|
<div x-data="contentNavigationHandler()" class="col-span-12 flex gap-y-3 gap-x-4 {{inline-switch this.teasersize '["100","66","50","33","25"]' '["flex-col","md:col-span-9 md:flex-row ","md:col-span-6 md:flex-row "," md:col-span-4 md:flex-row "," md:col-span-3 md:flex-row "]'}}">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
{{> components/content_nav/content_nav _modifier="-as-dropdown" _teasersize=this.teasersize}}
|
|
6
|
-
|
|
2
|
+
{{#if this.contentNav.isDropdown}}
|
|
3
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize}}
|
|
7
4
|
{{else this.contentNav.isList }}
|
|
8
|
-
|
|
9
|
-
{{> components/content_nav/content_nav _modifier=(replaceTokens "-as-button -at-{0}" this.realTeasersize) _teasersize=this.teasersize}}
|
|
10
|
-
|
|
5
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize}}
|
|
11
6
|
{{else}}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{{/if}}
|
|
16
|
-
|
|
7
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize }}
|
|
8
|
+
{{/if}}
|
|
17
9
|
</div>
|