hr-design-system-handlebars 0.55.0 β 0.55.1
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 +3 -3
- package/dist/views/components/base/menu/dropdown.hbs +1 -45
- package/dist/views/components/content_nav/content_nav.hbs +47 -1
- package/package.json +1 -1
- package/src/stories/views/components/base/menu/dropdown.hbs +1 -45
- package/src/stories/views/components/content_nav/content_nav.hbs +47 -1
- package/src/stories/views/components/teaser/content_nav/teaser_content_nav.stories.mdx +4 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.55.1 (Fri Aug 19 2022)
|
|
2
|
+
|
|
3
|
+
#### π Bug Fix
|
|
4
|
+
|
|
5
|
+
- bugfix [#302](https://github.com/mumprod/hr-design-system-handlebars/pull/302) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.55.0 (Fri Aug 19 2022)
|
|
2
14
|
|
|
3
15
|
#### π Enhancement
|
package/dist/assets/index.css
CHANGED
|
@@ -1867,7 +1867,7 @@ video {
|
|
|
1867
1867
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
1868
1868
|
}
|
|
1869
1869
|
.counter-reset {
|
|
1870
|
-
counter-reset:
|
|
1870
|
+
counter-reset: cnt1660923306727;
|
|
1871
1871
|
}
|
|
1872
1872
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
1873
1873
|
font-size: 0.75rem;
|
|
@@ -2250,7 +2250,7 @@ video {
|
|
|
2250
2250
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2251
2251
|
}
|
|
2252
2252
|
.-ordered {
|
|
2253
|
-
counter-increment:
|
|
2253
|
+
counter-increment: cnt1660923306727 1;
|
|
2254
2254
|
}
|
|
2255
2255
|
.-ordered::before {
|
|
2256
2256
|
position: absolute;
|
|
@@ -2267,7 +2267,7 @@ video {
|
|
|
2267
2267
|
letter-spacing: .0125em;
|
|
2268
2268
|
--tw-text-opacity: 1;
|
|
2269
2269
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2270
|
-
content: counter(
|
|
2270
|
+
content: counter(cnt1660923306727);
|
|
2271
2271
|
}
|
|
2272
2272
|
/*! purgecss start ignore */
|
|
2273
2273
|
:root,
|
|
@@ -26,48 +26,4 @@
|
|
|
26
26
|
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="md:relative md:left-0 md:h-auto md:overflow-visible">
|
|
27
27
|
{{> @partial-block }}
|
|
28
28
|
</div>
|
|
29
|
-
</nav>
|
|
30
|
-
|
|
31
|
-
<script type="text/javascript">
|
|
32
|
-
document.addEventListener('alpine:init', () => {
|
|
33
|
-
Alpine.data('contentNavigationHandler', () =>({
|
|
34
|
-
open: false,
|
|
35
|
-
|
|
36
|
-
init(){
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
shouldDropdownBeShown(teasersize,isDropdown,isMixed){
|
|
40
|
-
if (isDropdown){
|
|
41
|
-
return true
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (isMixed) {
|
|
45
|
-
if (teasersize === 100 || teasersize === 66 ) {
|
|
46
|
-
if (this.$screen('lg')) return false
|
|
47
|
-
if (this.$screen('md')) return false
|
|
48
|
-
if (this.$screen('xs')) return true
|
|
49
|
-
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
50
|
-
return true
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
shouldContentBeShown(teasersize,isDropdown,isMixed){
|
|
56
|
-
if (isDropdown){
|
|
57
|
-
return this.open
|
|
58
|
-
}
|
|
59
|
-
if (isMixed) {
|
|
60
|
-
if (teasersize === 100 || teasersize === 66 ) {
|
|
61
|
-
if (this.$screen('lg')) return true
|
|
62
|
-
if (this.$screen('md')) return true
|
|
63
|
-
if (this.$screen('xs')) return this.open
|
|
64
|
-
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
65
|
-
return this.open
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
return false
|
|
70
|
-
}
|
|
71
|
-
}))
|
|
72
|
-
})
|
|
73
|
-
</script>
|
|
29
|
+
</nav>
|
|
@@ -28,4 +28,50 @@
|
|
|
28
28
|
{{/components/base/menu/dropdown}}
|
|
29
29
|
|
|
30
30
|
{{/if}}
|
|
31
|
-
{{/with}}
|
|
31
|
+
{{/with}}
|
|
32
|
+
|
|
33
|
+
<script type="text/javascript">
|
|
34
|
+
|
|
35
|
+
document.addEventListener('alpine:init', () => {
|
|
36
|
+
|
|
37
|
+
Alpine.data('contentNavigationHandler', () =>({
|
|
38
|
+
open: false,
|
|
39
|
+
|
|
40
|
+
init(){
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
shouldDropdownBeShown(teasersize,isDropdown,isMixed){
|
|
44
|
+
if (isDropdown){
|
|
45
|
+
return true
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (isMixed) {
|
|
49
|
+
if (teasersize === 100 || teasersize === 66 ) {
|
|
50
|
+
if (this.$screen('lg')) return false
|
|
51
|
+
if (this.$screen('md')) return false
|
|
52
|
+
if (this.$screen('xs')) return true
|
|
53
|
+
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
54
|
+
return true
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
shouldContentBeShown(teasersize,isDropdown,isMixed){
|
|
60
|
+
if (isDropdown){
|
|
61
|
+
return this.open
|
|
62
|
+
}
|
|
63
|
+
if (isMixed) {
|
|
64
|
+
if (teasersize === 100 || teasersize === 66 ) {
|
|
65
|
+
if (this.$screen('lg')) return true
|
|
66
|
+
if (this.$screen('md')) return true
|
|
67
|
+
if (this.$screen('xs')) return this.open
|
|
68
|
+
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
69
|
+
return this.open
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return false
|
|
74
|
+
}
|
|
75
|
+
}))
|
|
76
|
+
})
|
|
77
|
+
</script>
|
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.55.
|
|
9
|
+
"version": "0.55.1",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -26,48 +26,4 @@
|
|
|
26
26
|
<div x-show="shouldContentBeShown({{_teasersize}},{{this.isDropdown}},{{this.isMixed}})" aria-haspopup="true" class="md:relative md:left-0 md:h-auto md:overflow-visible">
|
|
27
27
|
{{> @partial-block }}
|
|
28
28
|
</div>
|
|
29
|
-
</nav>
|
|
30
|
-
|
|
31
|
-
<script type="text/javascript">
|
|
32
|
-
document.addEventListener('alpine:init', () => {
|
|
33
|
-
Alpine.data('contentNavigationHandler', () =>({
|
|
34
|
-
open: false,
|
|
35
|
-
|
|
36
|
-
init(){
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
shouldDropdownBeShown(teasersize,isDropdown,isMixed){
|
|
40
|
-
if (isDropdown){
|
|
41
|
-
return true
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (isMixed) {
|
|
45
|
-
if (teasersize === 100 || teasersize === 66 ) {
|
|
46
|
-
if (this.$screen('lg')) return false
|
|
47
|
-
if (this.$screen('md')) return false
|
|
48
|
-
if (this.$screen('xs')) return true
|
|
49
|
-
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
50
|
-
return true
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
shouldContentBeShown(teasersize,isDropdown,isMixed){
|
|
56
|
-
if (isDropdown){
|
|
57
|
-
return this.open
|
|
58
|
-
}
|
|
59
|
-
if (isMixed) {
|
|
60
|
-
if (teasersize === 100 || teasersize === 66 ) {
|
|
61
|
-
if (this.$screen('lg')) return true
|
|
62
|
-
if (this.$screen('md')) return true
|
|
63
|
-
if (this.$screen('xs')) return this.open
|
|
64
|
-
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
65
|
-
return this.open
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
return false
|
|
70
|
-
}
|
|
71
|
-
}))
|
|
72
|
-
})
|
|
73
|
-
</script>
|
|
29
|
+
</nav>
|
|
@@ -28,4 +28,50 @@
|
|
|
28
28
|
{{/components/base/menu/dropdown}}
|
|
29
29
|
|
|
30
30
|
{{/if}}
|
|
31
|
-
{{/with}}
|
|
31
|
+
{{/with}}
|
|
32
|
+
|
|
33
|
+
<script type="text/javascript">
|
|
34
|
+
|
|
35
|
+
document.addEventListener('alpine:init', () => {
|
|
36
|
+
|
|
37
|
+
Alpine.data('contentNavigationHandler', () =>({
|
|
38
|
+
open: false,
|
|
39
|
+
|
|
40
|
+
init(){
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
shouldDropdownBeShown(teasersize,isDropdown,isMixed){
|
|
44
|
+
if (isDropdown){
|
|
45
|
+
return true
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (isMixed) {
|
|
49
|
+
if (teasersize === 100 || teasersize === 66 ) {
|
|
50
|
+
if (this.$screen('lg')) return false
|
|
51
|
+
if (this.$screen('md')) return false
|
|
52
|
+
if (this.$screen('xs')) return true
|
|
53
|
+
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
54
|
+
return true
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
shouldContentBeShown(teasersize,isDropdown,isMixed){
|
|
60
|
+
if (isDropdown){
|
|
61
|
+
return this.open
|
|
62
|
+
}
|
|
63
|
+
if (isMixed) {
|
|
64
|
+
if (teasersize === 100 || teasersize === 66 ) {
|
|
65
|
+
if (this.$screen('lg')) return true
|
|
66
|
+
if (this.$screen('md')) return true
|
|
67
|
+
if (this.$screen('xs')) return this.open
|
|
68
|
+
} else if (teasersize === 33 || teasersize === 25 || teasersize === 50) {
|
|
69
|
+
return this.open
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
return false
|
|
74
|
+
}
|
|
75
|
+
}))
|
|
76
|
+
})
|
|
77
|
+
</script>
|
|
@@ -28,19 +28,18 @@ import contentNavDropdown_50 from '../fixtures/teaser_content_nav_dropdown_50.js
|
|
|
28
28
|
layout: 'fullscreen',
|
|
29
29
|
chromatic: {
|
|
30
30
|
viewports: [360, 768, 1024],
|
|
31
|
-
}
|
|
32
|
-
docs: { inlineStories : false, iframeHeight: 240 }
|
|
31
|
+
}
|
|
33
32
|
}}
|
|
34
33
|
argTypes={{
|
|
35
|
-
|
|
34
|
+
teasersize: {
|
|
36
35
|
control: {
|
|
37
36
|
type: 'select',
|
|
38
|
-
options: ['
|
|
37
|
+
options: ['100', '66', '50', '33', '25'],
|
|
39
38
|
},
|
|
40
39
|
description: 'Teaser GrΓΆΓe',
|
|
41
40
|
table: {
|
|
42
41
|
defaultValue: {
|
|
43
|
-
summary: '
|
|
42
|
+
summary: '100',
|
|
44
43
|
},
|
|
45
44
|
},
|
|
46
45
|
},
|