hr-design-system-handlebars 0.56.9 → 0.56.10
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/build/helpers/ifCond.js +28 -0
- package/dist/assets/index.css +25 -13
- package/dist/assets/js/views/base/autosuggest/autoSuggest.feature.js +1 -1
- package/dist/views/base/autosuggest/autoSuggest.feature.js +1 -1
- package/dist/views/components/content_nav/content_nav.hbs +6 -14
- package/dist/views/components/content_nav/content_nav_container.hbs +8 -4
- package/dist/views/components/content_nav/content_nav_item.hbs +5 -4
- package/dist/views/components/content_nav/content_nav_list.hbs +3 -3
- package/dist/views/components/content_nav/dropdown.hbs +8 -10
- package/dist/views/components/site_header/header_alpine.js +26 -10
- package/dist/views/components/teaser/content_nav/teaser_content_nav.hbs +4 -8
- package/package.json +1 -1
- package/src/assets/fixtures/teaser/teaser_content_nav_flow_100.json +3 -3
- package/src/assets/fixtures/teaser/teaser_content_nav_flow_autosuggest.json +183 -0
- package/src/assets/fixtures/teaser/teaser_content_nav_list_100.json +4 -5
- package/src/assets/fixtures/teaser/teaser_content_nav_list_autosuggest.json +181 -0
- package/src/assets/fixtures/teaser/teaser_content_nav_mixed_100.json +2 -2
- package/src/assets/fixtures/teaser/teaser_content_nav_mixed_autosuggest.json +1 -1
- package/src/stories/views/base/autosuggest/autoSuggest.feature.js +1 -1
- package/src/stories/views/components/content_nav/content_nav.hbs +6 -14
- package/src/stories/views/components/content_nav/content_nav_container.hbs +8 -4
- package/src/stories/views/components/content_nav/content_nav_item.hbs +5 -4
- package/src/stories/views/components/content_nav/content_nav_list.hbs +3 -3
- package/src/stories/views/components/content_nav/dropdown.hbs +8 -10
- package/src/stories/views/components/site_header/header_alpine.js +26 -10
- package/src/stories/views/components/teaser/content_nav/teaser_content_nav.hbs +4 -8
- package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx +14 -5
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_flow_100.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_flow_autosuggest.json +1 -0
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_list_100.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_list_autosuggest.json +1 -0
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_mixed_100.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_content_nav_mixed_autosuggest.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_group_100_contentNav.json +1 -1
- package/tailwind.config.js +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.56.10 (Fri Sep 02 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- DPE-1689 : new JSON Key 'isListOrFlow' and some design tweaks [#315](https://github.com/mumprod/hr-design-system-handlebars/pull/315) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.56.9 (Fri Sep 02 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const handlebars = require("handlebars");
|
|
2
|
+
module.exports = function (v1, operator, v2, options) {
|
|
3
|
+
var options = arguments[3];
|
|
4
|
+
switch (operator) {
|
|
5
|
+
case '==':
|
|
6
|
+
return (v1 == v2) ? options.fn(this) : options.inverse(this);
|
|
7
|
+
case '===':
|
|
8
|
+
return (v1 === v2) ? options.fn(this) : options.inverse(this);
|
|
9
|
+
case '!=':
|
|
10
|
+
return (v1 != v2) ? options.fn(this) : options.inverse(this);
|
|
11
|
+
case '!==':
|
|
12
|
+
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
|
|
13
|
+
case '<':
|
|
14
|
+
return (v1 < v2) ? options.fn(this) : options.inverse(this);
|
|
15
|
+
case '<=':
|
|
16
|
+
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
|
|
17
|
+
case '>':
|
|
18
|
+
return (v1 > v2) ? options.fn(this) : options.inverse(this);
|
|
19
|
+
case '>=':
|
|
20
|
+
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
|
|
21
|
+
case '&&':
|
|
22
|
+
return (v1 && v2) ? options.fn(this) : options.inverse(this);
|
|
23
|
+
case '||':
|
|
24
|
+
return (v1 || v2) ? options.fn(this) : options.inverse(this);
|
|
25
|
+
default:
|
|
26
|
+
return options.inverse(this);
|
|
27
|
+
}
|
|
28
|
+
};
|
package/dist/assets/index.css
CHANGED
|
@@ -1296,6 +1296,10 @@ video {
|
|
|
1296
1296
|
.bg-transparent {
|
|
1297
1297
|
background-color: transparent;
|
|
1298
1298
|
}
|
|
1299
|
+
.bg-grey-light {
|
|
1300
|
+
--tw-bg-opacity: 1;
|
|
1301
|
+
background-color: rgba(248, 248, 248, var(--tw-bg-opacity));
|
|
1302
|
+
}
|
|
1299
1303
|
.bg-gray-200 {
|
|
1300
1304
|
--tw-bg-opacity: 1;
|
|
1301
1305
|
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
|
|
@@ -1684,6 +1688,10 @@ video {
|
|
|
1684
1688
|
--tw-text-opacity: 1 !important;
|
|
1685
1689
|
color: rgba(20, 83, 45, var(--tw-text-opacity)) !important;
|
|
1686
1690
|
}
|
|
1691
|
+
.text-yellow-400 {
|
|
1692
|
+
--tw-text-opacity: 1;
|
|
1693
|
+
color: rgba(250, 204, 21, var(--tw-text-opacity));
|
|
1694
|
+
}
|
|
1687
1695
|
.text-white {
|
|
1688
1696
|
--tw-text-opacity: 1;
|
|
1689
1697
|
color: rgba(255, 255, 255, var(--tw-text-opacity));
|
|
@@ -1700,6 +1708,10 @@ video {
|
|
|
1700
1708
|
--tw-text-opacity: 1;
|
|
1701
1709
|
color: rgba(29, 78, 216, var(--tw-text-opacity));
|
|
1702
1710
|
}
|
|
1711
|
+
.text-grey-dark {
|
|
1712
|
+
--tw-text-opacity: 1;
|
|
1713
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
1714
|
+
}
|
|
1703
1715
|
.text-blue-congress {
|
|
1704
1716
|
--tw-text-opacity: 1;
|
|
1705
1717
|
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
@@ -1897,7 +1909,7 @@ video {
|
|
|
1897
1909
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
1898
1910
|
}
|
|
1899
1911
|
.counter-reset {
|
|
1900
|
-
counter-reset:
|
|
1912
|
+
counter-reset: cnt1662131944866;
|
|
1901
1913
|
}
|
|
1902
1914
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
1903
1915
|
font-size: 0.75rem;
|
|
@@ -2280,7 +2292,7 @@ video {
|
|
|
2280
2292
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2281
2293
|
}
|
|
2282
2294
|
.-ordered {
|
|
2283
|
-
counter-increment:
|
|
2295
|
+
counter-increment: cnt1662131944866 1;
|
|
2284
2296
|
}
|
|
2285
2297
|
.-ordered::before {
|
|
2286
2298
|
position: absolute;
|
|
@@ -2297,7 +2309,7 @@ video {
|
|
|
2297
2309
|
letter-spacing: .0125em;
|
|
2298
2310
|
--tw-text-opacity: 1;
|
|
2299
2311
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2300
|
-
content: counter(
|
|
2312
|
+
content: counter(cnt1662131944866);
|
|
2301
2313
|
}
|
|
2302
2314
|
/*! purgecss start ignore */
|
|
2303
2315
|
:root,
|
|
@@ -2665,25 +2677,25 @@ video {
|
|
|
2665
2677
|
right: 0;
|
|
2666
2678
|
bottom: 0;
|
|
2667
2679
|
}
|
|
2668
|
-
.placeholder\:text-
|
|
2680
|
+
.placeholder\:text-grey-dark::-webkit-input-placeholder {
|
|
2669
2681
|
--tw-text-opacity: 1;
|
|
2670
|
-
color: rgba(
|
|
2682
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
2671
2683
|
}
|
|
2672
|
-
.placeholder\:text-
|
|
2684
|
+
.placeholder\:text-grey-dark::-moz-placeholder {
|
|
2673
2685
|
--tw-text-opacity: 1;
|
|
2674
|
-
color: rgba(
|
|
2686
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
2675
2687
|
}
|
|
2676
|
-
.placeholder\:text-
|
|
2688
|
+
.placeholder\:text-grey-dark:-ms-input-placeholder {
|
|
2677
2689
|
--tw-text-opacity: 1;
|
|
2678
|
-
color: rgba(
|
|
2690
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
2679
2691
|
}
|
|
2680
|
-
.placeholder\:text-
|
|
2692
|
+
.placeholder\:text-grey-dark::-ms-input-placeholder {
|
|
2681
2693
|
--tw-text-opacity: 1;
|
|
2682
|
-
color: rgba(
|
|
2694
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
2683
2695
|
}
|
|
2684
|
-
.placeholder\:text-
|
|
2696
|
+
.placeholder\:text-grey-dark::placeholder {
|
|
2685
2697
|
--tw-text-opacity: 1;
|
|
2686
|
-
color: rgba(
|
|
2698
|
+
color: rgba(112, 112, 112, var(--tw-text-opacity));
|
|
2687
2699
|
}
|
|
2688
2700
|
.first\:border-t:first-child {
|
|
2689
2701
|
border-top-width: 1px;
|
|
@@ -1,23 +1,15 @@
|
|
|
1
1
|
{{#with this.contentNav}}
|
|
2
|
-
{{#if this.
|
|
3
|
-
<nav class="c-content-nav">
|
|
2
|
+
{{#if this.isListOrFlow}}
|
|
3
|
+
<nav class="w-full c-content-nav">
|
|
4
4
|
{{> components/content_nav/content_nav_container
|
|
5
5
|
_teasersize=../_teasersize
|
|
6
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
|
-
}}
|
|
9
|
-
</nav>
|
|
10
|
-
{{else if this.isFlow}}
|
|
11
|
-
<nav class="c-content-nav">
|
|
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 "
|
|
7
|
+
_inputcontainerclass="flex bg-grey-light w-full h-10 mx-2 md:mx-0 border-blue-congress align-center"
|
|
16
8
|
}}
|
|
17
9
|
</nav>
|
|
18
|
-
{{else}}
|
|
10
|
+
{{else}}
|
|
19
11
|
{{#>components/content_nav/dropdown
|
|
20
|
-
_componentClass="c-content-nav"
|
|
12
|
+
_componentClass="c-content-nav w-full"
|
|
21
13
|
_teasersize=../_teasersize
|
|
22
14
|
_iconOpen="arrow-down"
|
|
23
15
|
_iconClose="arrow-up"
|
|
@@ -27,7 +19,7 @@
|
|
|
27
19
|
{{> components/content_nav/content_nav_container
|
|
28
20
|
_teasersize=_teasersize
|
|
29
21
|
_maindivclass="flex flex-wrap mt-0"
|
|
30
|
-
_inputcontainerclass="flex w-full h-10 mx-0 border-blue-congress align-center "
|
|
22
|
+
_inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "
|
|
31
23
|
}}
|
|
32
24
|
{{/components/content_nav/dropdown}}
|
|
33
25
|
{{/if}}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
<div
|
|
1
|
+
<div class="{{_maindivclass}} {{#if this.isAutosuggest}} autoSuggest js-load{{/if}}"
|
|
2
|
+
@click.outside ="$store.contentNavDropdownIsOpen = false;"
|
|
2
3
|
{{#if this.isAutosuggest}}
|
|
3
4
|
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
5
|
{{/if}}
|
|
5
|
-
|
|
6
|
+
>
|
|
6
7
|
{{#if this.isAutosuggest}}
|
|
7
8
|
<div class="{{_inputcontainerclass}} c-content-nav__autosuggest ">
|
|
8
|
-
<input x-ref="autosuggestInput"
|
|
9
|
-
|
|
9
|
+
<input x-ref="autosuggestInput"
|
|
10
|
+
class="w-full h-8 pl-2 bg-gray-200 text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
|
|
11
|
+
type="text"
|
|
12
|
+
placeholder="Eintrag filtern"/>
|
|
10
13
|
</div>
|
|
11
14
|
{{/if}}
|
|
12
15
|
|
|
13
16
|
{{> components/content_nav/content_nav_list _teasersize=_teasersize }}
|
|
17
|
+
|
|
14
18
|
</div>
|
|
@@ -1,15 +1,16 @@
|
|
|
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}} font-bold -current{{/if}} c-content-nav__item"
|
|
3
|
-
|
|
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
|
+
>
|
|
4
|
+
{{#>components/base/link.hbs
|
|
4
5
|
_doNavigationTracking="true"
|
|
5
6
|
_clickLabelType="Contentnavigation"
|
|
6
7
|
_clickLabelPrefix1=this.title
|
|
7
8
|
_css="flex items-center py-2 px-2 h-10 whitespace-nowrap overflow-hidden"
|
|
8
9
|
_isSelected=this.isSelected
|
|
9
10
|
_selectedCssClass="is-selected"
|
|
10
|
-
|
|
11
|
+
}}
|
|
11
12
|
|
|
12
|
-
<span class="
|
|
13
|
+
<span class="block text-base grow font-copy js-title truncate ... ">{{this.title}}</span>
|
|
13
14
|
|
|
14
15
|
{{#if this.link.hasIcon}}
|
|
15
16
|
{{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 h-4 w-4" _iconmap="icons"}}
|
|
@@ -1,5 +1,5 @@
|
|
|
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
|
-
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-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
|
+
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
|
|
3
3
|
|
|
4
4
|
{{~#each this.contentNavEntries~}}
|
|
5
5
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
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
|
-
<ul class="c-content-nav__group-list !px-0 mt-0
|
|
12
|
+
<ul class="c-content-nav__group-list !px-0 mt-0">
|
|
13
13
|
{{~#each this.navigationGroup~}}
|
|
14
14
|
{{> components/content_nav/content_nav_item _teasersize=../../_teasersize _isdropdown=../../isDropdown _ismixed=../../isMixed _islist=../../isList _isflow=../../isFlow}}
|
|
15
15
|
{{~/each~}}
|
|
@@ -9,22 +9,20 @@
|
|
|
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 mb-2 overflow-hidden bg-white border z-10002 border-blue-congress whitespace-nowrap text-blue-congress fill-congress"
|
|
13
|
-
|
|
14
|
-
<span class="self-center w-full p-2 text-base">
|
|
15
|
-
{{_buttonText}}
|
|
16
|
-
</span>
|
|
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
|
+
>
|
|
14
|
+
<span class="self-center w-full p-2 text-base">{{_buttonText}}</span>
|
|
17
15
|
<div class="flex self-center w-auto h-full px-3 py-1 border-l border-blue-congress">
|
|
18
16
|
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen"
|
|
19
17
|
: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
|
-
|
|
18
|
+
class="flex self-center"
|
|
19
|
+
>
|
|
20
|
+
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconOpen "arrow-down") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
24
21
|
</span>
|
|
25
22
|
<span @click="$store.contentNavDropdownIsOpen = !$store.contentNavDropdownIsOpen; $dispatch('resetinput')"
|
|
26
23
|
:class="$store.contentNavDropdownIsOpen ? '' : 'hidden'"
|
|
27
|
-
class="flex self-center"
|
|
24
|
+
class="flex self-center"
|
|
25
|
+
>
|
|
28
26
|
{{~> components/base/image/icon _icon=(defaultIfEmpty _iconClose "arrow-up") _addClass="h-4 w-4" _iconmap="icons"~}}
|
|
29
27
|
</span>
|
|
30
28
|
</div>
|
|
@@ -380,36 +380,52 @@ document.addEventListener('alpine:init', () => {
|
|
|
380
380
|
}
|
|
381
381
|
|
|
382
382
|
return false
|
|
383
|
-
},
|
|
384
|
-
|
|
383
|
+
},
|
|
385
384
|
chooseListItemStyles(teasersize, isList, isMixed, isDropdown, isFlow){
|
|
386
385
|
let classes = []
|
|
387
386
|
|
|
388
387
|
switch (teasersize) {
|
|
389
388
|
case 100:
|
|
390
389
|
classes.push('w-full','md:w-fit')
|
|
391
|
-
isList ? classes.push('border','mb-2','md:!mr-2','hover:no-underline')
|
|
390
|
+
isList ? classes.push('border','mb-2','md:!mr-2','hover:no-underline')
|
|
391
|
+
: isMixed ? classes.push('!w-full','md:!w-fit','!mb-0','md:!mb-2','md:mr-2','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','md:!border','md:border-blue-congress','border-gray-400','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress','md:hover:no-underline','md:hover:text-white','md:hover:!bg-blue-congress','md:hover:!fill-white')
|
|
392
|
+
: isDropdown ? classes.push('!w-full','ml-0','md:!w-full','md:mb-0','md:!mr-0','border-gray-400','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress')
|
|
393
|
+
: isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline')
|
|
394
|
+
: ''
|
|
392
395
|
break;
|
|
393
396
|
case 66:
|
|
394
397
|
classes.push('w-fit')
|
|
395
|
-
isList == true ? classes.push('border','mb-2','mr-2','md:!mr-2','hover:no-underline')
|
|
396
|
-
|
|
398
|
+
isList == true ? classes.push('border','mb-2','mr-2','md:!mr-2','hover:no-underline')
|
|
399
|
+
: isMixed ? classes.push('!w-full','md:!w-fit','!mb-0','md:!mb-2','md:mr-2','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','md:!border','hover:text-blue-congress','hover:!fill-congress','hover:!bg-white','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:no-underline','md:hover:!fill-white')
|
|
400
|
+
: isDropdown ? classes.push('!w-full','md:!w-full','md:mb-0','md:!mr-0','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress')
|
|
401
|
+
: isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline')
|
|
402
|
+
: ''
|
|
397
403
|
break;
|
|
398
404
|
case 50:
|
|
399
405
|
classes.push('w-full')
|
|
400
|
-
isList ? classes.push('border','mb-2',
|
|
406
|
+
isList ? classes.push('border','mb-2','hover:no-underline')
|
|
407
|
+
: isMixed ? classes.push('!w-full','border','md:mb-2','last:mb-0','border-gray-400','border-l-0','border-r-0','border-t-0','md:border','md:border-blue-congress','hover:underline','hover:!bg-white','hover:text-blue-congress','hover:fill-congress','md:hover:!bg-blue-congress','md:hover:!text-white','md:hover:fill-white','md:hover:no-underline')
|
|
408
|
+
: isDropdown ? classes.push('!w-full','md:!w-full','md:mb-0','md:!mr-0','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','border-gray-400','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress')
|
|
409
|
+
: isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline')
|
|
410
|
+
: ''
|
|
401
411
|
break;
|
|
402
412
|
case 33:
|
|
403
413
|
classes.push('w-full')
|
|
404
|
-
isList ? classes.push('border','mb-2',
|
|
414
|
+
isList ? classes.push('border','mb-2','hover:no-underline')
|
|
415
|
+
: isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:text-blue-congress','hover:!fill-congress')
|
|
416
|
+
: isDropdown ? classes.push('!w-full','md:!w-full','md:mb-0','md:!mr-0','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:!text-blue-congress','hover:!bg-white','hover:!fill-congress')
|
|
417
|
+
: isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline')
|
|
418
|
+
: ''
|
|
405
419
|
break;
|
|
406
420
|
case 25:
|
|
407
421
|
classes.push('w-full')
|
|
408
|
-
isList ? classes.push('border','mb-2',
|
|
422
|
+
isList ? classes.push('border','mb-2','hover:no-underline')
|
|
423
|
+
: isMixed ? classes.push('!w-full','!mb-0','border-b','last:border-b-0','hover:!bg-white','hover:underline','hover:!text-blue-congress','hover:!fill-congress')
|
|
424
|
+
: isDropdown ? classes.push('!w-full','md:!w-full','md:mb-0','md:!mr-0','border-l-0','border-r-0','border-t-0','border-b','last:border-b-0','hover:underline','hover:text-blue-congress','hover:!bg-white','hover:!fill-congress')
|
|
425
|
+
: isFlow ? classes.push('!w-fit','!mr-2','border','mb-2','hover:no-underline')
|
|
426
|
+
: ''
|
|
409
427
|
break;
|
|
410
|
-
|
|
411
428
|
}
|
|
412
|
-
|
|
413
429
|
for (let i = 0; i < classes.length; i++) {
|
|
414
430
|
this.$el.classList.add(classes[i])
|
|
415
431
|
}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
<div
|
|
2
|
-
{{
|
|
3
|
-
|
|
4
|
-
{{
|
|
5
|
-
{{> components/content_nav/content_nav _teasersize=this.teasersize}}
|
|
6
|
-
{{else}}
|
|
7
|
-
{{> components/content_nav/content_nav _teasersize=this.teasersize }}
|
|
8
|
-
{{/if}}
|
|
1
|
+
<div x-data="contentNavigationHandler()"
|
|
2
|
+
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 "]'}}"
|
|
3
|
+
>
|
|
4
|
+
{{> components/content_nav/content_nav _teasersize=this.teasersize }}
|
|
9
5
|
</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.10",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -4,17 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
"contentNav" : {
|
|
6
6
|
"title" : "Geiler Titel",
|
|
7
|
-
|
|
7
|
+
"isListOrFlow" : true,
|
|
8
8
|
"isDropdown" : false,
|
|
9
9
|
"isList" : false,
|
|
10
10
|
"isFlow" : true,
|
|
11
11
|
"isMixed" : false,
|
|
12
|
-
"isAutosuggest" :
|
|
12
|
+
"isAutosuggest" : false,
|
|
13
13
|
"contentNavEntries": [
|
|
14
14
|
{
|
|
15
15
|
"title" : "Arbeitsmarkt",
|
|
16
16
|
"isGroup" : false,
|
|
17
|
-
"isSelected" :
|
|
17
|
+
"isSelected" : false,
|
|
18
18
|
"link" : {
|
|
19
19
|
"url": "/teaser1",
|
|
20
20
|
"webviewUrl": "/teaser1#webview",
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
{
|
|
2
|
+
"realTeasersize" : "100",
|
|
3
|
+
"teasersize" : "100",
|
|
4
|
+
|
|
5
|
+
"contentNav" : {
|
|
6
|
+
"title" : "Geiler Titel",
|
|
7
|
+
"isListOrFlow" : true,
|
|
8
|
+
"isDropdown" : false,
|
|
9
|
+
"isList" : false,
|
|
10
|
+
"isFlow" : true,
|
|
11
|
+
"isMixed" : false,
|
|
12
|
+
"isAutosuggest" : true,
|
|
13
|
+
"contentNavEntries": [
|
|
14
|
+
{
|
|
15
|
+
"title" : "Arbeitsmarkt",
|
|
16
|
+
"isGroup" : false,
|
|
17
|
+
"isSelected" : false,
|
|
18
|
+
"link" : {
|
|
19
|
+
"url": "/teaser1",
|
|
20
|
+
"webviewUrl": "/teaser1#webview",
|
|
21
|
+
"isTargetBlank": true,
|
|
22
|
+
"hasIcon": false,
|
|
23
|
+
"iconName": "extern"
|
|
24
|
+
},
|
|
25
|
+
"navigationGroup" : [{}]
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"title" : "Banken",
|
|
29
|
+
"link" : {
|
|
30
|
+
"url": "/teaser1",
|
|
31
|
+
"webviewUrl": "/teaser1#webview",
|
|
32
|
+
"isTargetBlank": false,
|
|
33
|
+
"hasIcon": false,
|
|
34
|
+
"iconName": "iconName",
|
|
35
|
+
"readMoreText": {
|
|
36
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
37
|
+
"readMore": "mehr",
|
|
38
|
+
"readMoreLong": "read More Long"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"isGroup" : false,
|
|
42
|
+
"isSelected" : false
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
{
|
|
46
|
+
"title" : "Energie",
|
|
47
|
+
"link" : {
|
|
48
|
+
"url": "/teaser1",
|
|
49
|
+
"webviewUrl": "/teaser1#webview",
|
|
50
|
+
"isTargetBlank": true,
|
|
51
|
+
"hasIcon": false,
|
|
52
|
+
"iconName": "iconName",
|
|
53
|
+
"readMoreText": {
|
|
54
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
55
|
+
"readMore": "mehr",
|
|
56
|
+
"readMoreLong": "read More Long"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"isGroup" : false,
|
|
60
|
+
"isSelected" : false
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"title" : "Flughafen Kassel-Calden",
|
|
64
|
+
"link" : {
|
|
65
|
+
"url": "/teaser1",
|
|
66
|
+
"webviewUrl": "/teaser1#webview",
|
|
67
|
+
"isTargetBlank": true,
|
|
68
|
+
"hasIcon": false,
|
|
69
|
+
"iconName": "iconName",
|
|
70
|
+
"readMoreText": {
|
|
71
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
72
|
+
"readMore": "mehr",
|
|
73
|
+
"readMoreLong": "read More Long"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"isGroup" : false,
|
|
77
|
+
"isSelected" : false
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"title" : "Gewerkschaften",
|
|
81
|
+
"link" : {
|
|
82
|
+
"url": "/teaser1",
|
|
83
|
+
"webviewUrl": "/teaser1#webview",
|
|
84
|
+
"isTargetBlank": true,
|
|
85
|
+
"hasIcon": false,
|
|
86
|
+
"iconName": "iconName",
|
|
87
|
+
"readMoreText": {
|
|
88
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
89
|
+
"readMore": "mehr",
|
|
90
|
+
"readMoreLong": "read More Long"
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
"isGroup" : false,
|
|
94
|
+
"isSelected" : false
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"title" : "Handel",
|
|
98
|
+
"link" : {
|
|
99
|
+
"url": "/teaser1",
|
|
100
|
+
"webviewUrl": "/teaser1#webview",
|
|
101
|
+
"isTargetBlank": true,
|
|
102
|
+
"hasIcon": false,
|
|
103
|
+
"iconName": "iconName",
|
|
104
|
+
"readMoreText": {
|
|
105
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
106
|
+
"readMore": "mehr",
|
|
107
|
+
"readMoreLong": "read More Long"
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
"isGroup" : false,
|
|
111
|
+
"isSelected" : false
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"title" : "Handwerk",
|
|
115
|
+
"link" : {
|
|
116
|
+
"url": "/teaser1",
|
|
117
|
+
"webviewUrl": "/teaser1#webview",
|
|
118
|
+
"isTargetBlank": true,
|
|
119
|
+
"hasIcon": false,
|
|
120
|
+
"iconName": "iconName",
|
|
121
|
+
"readMoreText": {
|
|
122
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
123
|
+
"readMore": "mehr",
|
|
124
|
+
"readMoreLong": "read More Long"
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
"isGroup" : false,
|
|
128
|
+
"isSelected" : false
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"title" : "Immobilien",
|
|
132
|
+
"link" : {
|
|
133
|
+
"url": "/teaser1",
|
|
134
|
+
"webviewUrl": "/teaser1#webview",
|
|
135
|
+
"isTargetBlank": true,
|
|
136
|
+
"hasIcon": false,
|
|
137
|
+
"iconName": "iconName",
|
|
138
|
+
"readMoreText": {
|
|
139
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
140
|
+
"readMore": "mehr",
|
|
141
|
+
"readMoreLong": "read More Long"
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
"isGroup" : false,
|
|
145
|
+
"isSelected" : false
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"title" : "K + S",
|
|
149
|
+
"link" : {
|
|
150
|
+
"url": "/teaser1",
|
|
151
|
+
"webviewUrl": "/teaser1#webview",
|
|
152
|
+
"isTargetBlank": true,
|
|
153
|
+
"hasIcon": false,
|
|
154
|
+
"iconName": "iconName",
|
|
155
|
+
"readMoreText": {
|
|
156
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
157
|
+
"readMore": "mehr",
|
|
158
|
+
"readMoreLong": "read More Long"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
"isGroup" : false,
|
|
162
|
+
"isSelected" : false
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
"title" : "Landwirtschaft",
|
|
166
|
+
"link" : {
|
|
167
|
+
"url": "/teaser1",
|
|
168
|
+
"webviewUrl": "/teaser1#webview",
|
|
169
|
+
"isTargetBlank": true,
|
|
170
|
+
"hasIcon": false,
|
|
171
|
+
"iconName": "iconName",
|
|
172
|
+
"readMoreText": {
|
|
173
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
174
|
+
"readMore": "mehr",
|
|
175
|
+
"readMoreLong": "read More Long"
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
"isGroup" : false,
|
|
179
|
+
"isSelected" : false
|
|
180
|
+
}
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
}
|
|
@@ -1,19 +1,18 @@
|
|
|
1
|
-
{
|
|
2
|
-
"realTeasersize" : "100",
|
|
1
|
+
{
|
|
3
2
|
"teasersize" : "100",
|
|
4
3
|
"contentNav" : {
|
|
5
4
|
"title" : "Geiler Titel",
|
|
6
|
-
|
|
5
|
+
"isListOrFlow" : true,
|
|
7
6
|
"isDropdown" : false,
|
|
8
7
|
"isList" : true,
|
|
9
8
|
"isFlow" : false,
|
|
10
9
|
"isMixed" : false,
|
|
11
|
-
"isAutosuggest" :
|
|
10
|
+
"isAutosuggest" : false,
|
|
12
11
|
"contentNavEntries": [
|
|
13
12
|
{
|
|
14
13
|
"title" : "Arbeitsmarkt",
|
|
15
14
|
"isGroup" : false,
|
|
16
|
-
"isSelected" :
|
|
15
|
+
"isSelected" : false,
|
|
17
16
|
"link" : {
|
|
18
17
|
"url": "/teaser1",
|
|
19
18
|
"webviewUrl": "/teaser1#webview",
|