hr-design-system-handlebars 0.49.6 β†’ 0.49.9

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/views/components/site_header/header_alpine.js +12 -0
  3. package/package.json +1 -1
  4. package/src/stories/views/components/site_header/header_alpine.js +12 -0
  5. package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx +24 -24
  6. package/src/stories/views/components/teaser/teaser_standard.stories.mdx +38 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,40 @@
1
+ # v0.49.9 (Fri Jul 08 2022)
2
+
3
+ #### πŸ› Bug Fix
4
+
5
+ - adds detection for scrollbar use [#266](https://github.com/mumprod/hr-design-system-handlebars/pull/266) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
13
+ # v0.49.8 (Thu Jul 07 2022)
14
+
15
+ #### πŸ› Bug Fix
16
+
17
+ - adds listener for touchmove (mobile) [#265](https://github.com/mumprod/hr-design-system-handlebars/pull/265) ([@StefanVesper](https://github.com/StefanVesper))
18
+
19
+ #### Authors: 1
20
+
21
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
22
+
23
+ ---
24
+
25
+ # v0.49.7 (Wed Jul 06 2022)
26
+
27
+ #### πŸ› Bug Fix
28
+
29
+ - Standard-Teaser Documentation [#264](https://github.com/mumprod/hr-design-system-handlebars/pull/264) (zouhair1 [@selbaciri](https://github.com/selbaciri))
30
+
31
+ #### Authors: 2
32
+
33
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
34
+ - selbaciri (zouhair1)
35
+
36
+ ---
37
+
1
38
  # v0.49.6 (Wed Jul 06 2022)
2
39
 
3
40
  #### πŸ› Bug Fix
package/dist/views/components/site_header/header_alpine.js CHANGED
@@ -39,8 +39,20 @@ document.addEventListener('alpine:init', () => {
39
39
  function mouseEvent(e) {
40
40
  userScroll = true;
41
41
  window.userScroll = true;
42
+ console.log('user action detected')
42
43
  }
44
+
45
+ const clickedOnScrollbar = mouseX => {
46
+ return document.documentElement.offsetWidth <= mouseX ? true : false;
47
+ }
48
+
49
+ const mouseDownHandler = (e) => {
50
+ clickedOnScrollbar(e.clientX) ? mouseEvent() : null
51
+ };
52
+
53
+ window.addEventListener('mousedown', mouseDownHandler, false)
43
54
  window.addEventListener('wheel', mouseEvent, false);
55
+ window.addEventListener('touchmove', mouseEvent, false)
44
56
 
45
57
  window.addEventListener('scroll', this.debounce( () => {
46
58
  let winScroll = document.body.scrollTop || document.documentElement.scrollTop
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.49.6",
9
+ "version": "0.49.9",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/stories/views/components/site_header/header_alpine.js CHANGED
@@ -39,8 +39,20 @@ document.addEventListener('alpine:init', () => {
39
39
  function mouseEvent(e) {
40
40
  userScroll = true;
41
41
  window.userScroll = true;
42
+ console.log('user action detected')
42
43
  }
44
+
45
+ const clickedOnScrollbar = mouseX => {
46
+ return document.documentElement.offsetWidth <= mouseX ? true : false;
47
+ }
48
+
49
+ const mouseDownHandler = (e) => {
50
+ clickedOnScrollbar(e.clientX) ? mouseEvent() : null
51
+ };
52
+
53
+ window.addEventListener('mousedown', mouseDownHandler, false)
43
54
  window.addEventListener('wheel', mouseEvent, false);
55
+ window.addEventListener('touchmove', mouseEvent, false)
44
56
 
45
57
  window.addEventListener('scroll', this.debounce( () => {
46
58
  let winScroll = document.body.scrollTop || document.documentElement.scrollTop
package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx CHANGED
@@ -53,19 +53,39 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
53
53
  Der Alternativ-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
54
54
 
55
55
  <b>Alternativ Hero:</b> <br/>
56
- Desktop = Bild(2/3) neben Text(1/3) <br/>
56
+ Desktop = Bild(66%) neben Text(33%) <br/>
57
57
  Mobile = Verhalten wie bei 100% Standard-Teaser <br/>
58
58
 
59
59
  <b>Alternativ 100%:</b> <br/>
60
- Desktop = Bild(1/3) neben Text(2/3) <br/>
60
+ Desktop = Bild(33%) neben Text(66%) <br/>
61
61
  Mobile = Verhalten wie bei 100% Standard-Teaser <br/>
62
62
 
63
63
  <b>Alternativ 50%:</b> <br/>
64
- Desktop = Bild(1/3) neben Text(2/3) <br/>
64
+ Desktop = Bild(33%) neben Text(66%) <br/>
65
65
  Mobile = Verhalten wie bei 100% Standard-Teaser <br/>
66
66
 
67
67
  Der Alternativ-Teaser soll nur als 100%- bzw. 50%-Teaser verwendet werden.
68
68
 
69
+ ## Sub-Komponenten
70
+
71
+ Die Alternativ-Teaser-Komponente inkludiert folgende Komponenten:
72
+
73
+ <ul>
74
+ <li>components/base/image/<b>responsive_image</b></li>
75
+ <li>components/base/<b>link</b></li>
76
+ <li>components/teaser/components/<b>teaser_heading</b></li>
77
+ <li>components/teaser/components/<b>teaser_text</b></li>
78
+ <li>components/teaser/components/<b>teaser_byline</b></li>
79
+ </ul>
80
+
81
+ ## Verwendung
82
+
83
+ Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
84
+
85
+ ```html
86
+ {{> components/teaser/teaser_alternativ}}
87
+ ```
88
+
69
89
  <Preview withToolbar>
70
90
  <b>Alternativ Hero</b>
71
91
  <Story name="Alternativ Hero" args={heroTeaser.logicItem.includeModel}>
@@ -88,24 +108,4 @@ Der Alternativ-Teaser soll nur als 100%- bzw. 50%-Teaser verwendet werden.
88
108
  <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
89
109
  {Template.bind({})}
90
110
  </Story>
91
- </Preview>
92
-
93
- ## Sub-Komponenten
94
-
95
- Die Alternativ-Teaser-Komponente inkludiert folgende Komponenten:
96
-
97
- <ul>
98
- <li>components/base/image/<b>responsive_image</b></li>
99
- <li>components/base/<b>link</b></li>
100
- <li>components/teaser/components/<b>teaser_heading</b></li>
101
- <li>components/teaser/components/<b>teaser_text</b></li>
102
- <li>components/teaser/components/<b>teaser_byline</b></li>
103
- </ul>
104
-
105
- ## Verwendung
106
-
107
- Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
108
-
109
- ```html
110
- {{> components/teaser/teaser_alternativ}}
111
- ```
111
+ </Preview>
package/src/stories/views/components/teaser/teaser_standard.stories.mdx CHANGED
@@ -44,9 +44,44 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
44
44
  return teaser({ brand, ...args })
45
45
  }
46
46
 
47
- # Header
47
+ # Standard-Teaser
48
48
 
49
- Ein toller Einleitungstext fΓΌr unsere `Teaser` Komponente:
49
+ ## Beschreibung
50
+
51
+
52
+ Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
53
+
54
+ <b>Standard Hero:</b> <br/>
55
+ Desktop = Text unter dem Bild <br/>
56
+ Mobile = Text unter dem Bild mit Teasertext <br/>
57
+
58
+ <b>Standard 100%, 50%, 33%:</b> <br/>
59
+ Desktop = Text unter dem Bild <br/>
60
+ Mobile = Text unter dem Bild ohne Teasertext <br/>
61
+
62
+ <b>Standard 25%:</b> <br/>
63
+ Desktop = Text unter dem Bild ohne Teasertext <br/>
64
+ Mobile = Bild(1x1) neben Text ohne Teasertext <br/>
65
+
66
+ ## Sub-Komponenten
67
+
68
+ Die Standard-Teaser-Komponente inkludiert folgende Komponenten:
69
+
70
+ <ul>
71
+ <li>components/teaser/components/<b>teaser_lead</b></li>
72
+ <li>components/base/<b>link</b></li>
73
+ <li>components/teaser/components/<b>teaser_heading</b></li>
74
+ <li>components/teaser/components/<b>teaser_text</b></li>
75
+ <li>components/teaser/components/<b>teaser_byline</b></li>
76
+ </ul>
77
+
78
+ ## Verwendung
79
+
80
+ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
81
+
82
+ ```html
83
+ {{> components/teaser/teaser_standard}}
84
+ ```
50
85
 
51
86
  <Preview withToolbar>
52
87
  <Story name="Standard Hero" args={teaserHeroSerif.logicItem.includeModel}>
@@ -74,3 +109,4 @@ Ein toller Einleitungstext fΓΌr unsere `Teaser` Komponente:
74
109
  {Template.bind({})}
75
110
  </Story>
76
111
  </Preview>
112
+