hr-design-system-handlebars 1.113.9 → 1.113.11

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 (8) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +8 -3
  3. package/dist/assets/js/components/forms/js/contactForm.alpine.js +18 -17
  4. package/dist/views/components/forms/webform.hbs +1 -1
  5. package/dist/views_static/components/forms/webform.hbs +1 -1
  6. package/package.json +1 -1
  7. package/src/stories/views/components/forms/js/contactForm.alpine.js +18 -17
  8. package/src/stories/views/components/forms/webform.hbs +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.113.11 (Fri Nov 01 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - added scrollToElementAndCenterWithTimeout to fix center problems [#1138](https://github.com/mumprod/hr-design-system-handlebars/pull/1138) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
13
+ # v1.113.10 (Fri Nov 01 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - Update font size of form title [#1137](https://github.com/mumprod/hr-design-system-handlebars/pull/1137) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
18
+
19
+ #### Authors: 2
20
+
21
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
22
+ - selbaciri (saad.elbaciri@hr.de)
23
+
24
+ ---
25
+
1
26
  # v1.113.9 (Fri Nov 01 2024)
2
27
 
3
28
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -3642,7 +3642,7 @@ article.indexTextDS .indexTextHighlighted .link {
3642
3642
  border-bottom-color: var(--color-secondary-ds);
3643
3643
  }
3644
3644
  .counter-reset {
3645
- counter-reset: cnt1730454606038;
3645
+ counter-reset: cnt1730465143832;
3646
3646
  }
3647
3647
  .placeholder-text-xs::-webkit-input-placeholder {
3648
3648
  font-size: 0.75rem;
@@ -4056,7 +4056,7 @@ article.indexTextDS .indexTextHighlighted .link {
4056
4056
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4057
4057
  }
4058
4058
  .-ordered {
4059
- counter-increment: cnt1730454606038 1;
4059
+ counter-increment: cnt1730465143832 1;
4060
4060
  }
4061
4061
  .-ordered::before {
4062
4062
  position: absolute;
@@ -4074,7 +4074,7 @@ article.indexTextDS .indexTextHighlighted .link {
4074
4074
  --tw-text-opacity: 1;
4075
4075
  color: rgba(0, 0, 0, 1);
4076
4076
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4077
- content: counter(cnt1730454606038);
4077
+ content: counter(cnt1730465143832);
4078
4078
  }
4079
4079
  /*! ****************************/
4080
4080
  /*! DataPolicy stuff */
@@ -7485,6 +7485,11 @@ select:has(option:checked[value='']) {
7485
7485
  line-height: 1.75rem;
7486
7486
  }
7487
7487
 
7488
+ .md\:text-3xl {
7489
+ font-size: 1.625rem;
7490
+ line-height: 2rem;
7491
+ }
7492
+
7488
7493
  .md\:text-4xl {
7489
7494
  font-size: 1.875rem;
7490
7495
  line-height: 2.25rem;
package/dist/assets/js/components/forms/js/contactForm.alpine.js CHANGED
@@ -21,30 +21,27 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
21
21
  this.$store.forms.submissionAttempted[formId] = false;
22
22
  this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/"/g,'"'))
23
23
  },
24
- scrollToElementWithOffset(element, offset = 0){
25
-
26
- var elementPosition = element.getBoundingClientRect().top;
27
- var offsetPosition = elementPosition + window.scrollY - offset;
28
-
29
- window.scrollTo({
30
- top: offsetPosition,
31
- behavior: "smooth"
32
- });
24
+ scrollToElementAndCenterWithTimeout(element, timeout){
25
+ setTimeout(() => {
26
+ element.scrollIntoView({
27
+ behavior: 'smooth',
28
+ block: 'center'
29
+ });
30
+ }, timeout);
33
31
  },
34
32
  submitButtonHandler(event) {
35
- if(this.form.reportValidity()){
33
+ this.$store.forms.submissionAttempted[formId] = true;
34
+ if(this.form.reportValidity()){
36
35
  this.handleSubmit(event,this.form)
37
36
  } else {
38
- this.$store.forms.submissionAttempted[formId] = true;
39
- setTimeout(() => {
40
- this.scrollToElementWithOffset(document.activeElement, 180)
41
- }, 100);
37
+ this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)
42
38
  }
43
39
  },
44
40
  retryHandler() {
45
41
  this.wasPosted = false;
46
42
  this.wasPostedWithError = false;
47
- this.formWrapper.scrollIntoView({ behavior: 'smooth' })
43
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
44
+
48
45
  },
49
46
  handleValidationErrors(errors) {
50
47
  console.log('Validation Errors:', errors);
@@ -109,20 +106,21 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
109
106
  console.log("OK");
110
107
  this.wasPosted = true;
111
108
  this.wasPostedWithSuccess = true;
112
- this.scrollToElementWithOffset(this.formWrapper, 180)
109
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
113
110
 
114
111
  break;
115
112
  default:
116
113
  console.log("default");
117
114
  this.wasPosted = true;
118
115
  this.wasPostedWithError = true;
119
- this.scrollToElementWithOffset(this.formWrapper, 180)
116
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
120
117
  break;
121
118
  }
122
119
  } else {
123
120
 
124
121
  this.wasPosted = true;
125
122
  this.wasPostedWithError = true;
123
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
126
124
  }
127
125
  if (formId) {
128
126
  window.location.hash = formId;
@@ -130,14 +128,17 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
130
128
  } else {
131
129
  this.wasPosted = true;
132
130
  this.wasPostedWithError = true;
131
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
133
132
  throw new Error('Network response was not ok.');
134
133
 
134
+
135
135
  }
136
136
  })
137
137
  .catch((error) => {
138
138
  console.error('Fail:', error);
139
139
  this.wasPosted = true;
140
140
  this.wasPostedWithError = true;
141
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
141
142
  })
142
143
  .finally(() => {
143
144
  console.log('Always');
package/dist/views/components/forms/webform.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{~#if _newWebForm ~}}
2
2
  {{#>components/forms/components/backgroundBox }}
3
- <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
3
+ <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
4
4
  {{this.title}}
5
5
  </h3>
6
6
  <div id="formWrapper">
package/dist/views_static/components/forms/webform.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{~#if _newWebForm ~}}
2
2
  {{#>components/forms/components/backgroundBox }}
3
- <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
3
+ <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
4
4
  {{this.title}}
5
5
  </h3>
6
6
  <div id="formWrapper">
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.113.9",
9
+ "version": "1.113.11",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/forms/js/contactForm.alpine.js CHANGED
@@ -21,30 +21,27 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
21
21
  this.$store.forms.submissionAttempted[formId] = false;
22
22
  this.$store.forms.errorMessages = JSON.parse(errorMessages.replace(/&quot;/g,'"'))
23
23
  },
24
- scrollToElementWithOffset(element, offset = 0){
25
-
26
- var elementPosition = element.getBoundingClientRect().top;
27
- var offsetPosition = elementPosition + window.scrollY - offset;
28
-
29
- window.scrollTo({
30
- top: offsetPosition,
31
- behavior: "smooth"
32
- });
24
+ scrollToElementAndCenterWithTimeout(element, timeout){
25
+ setTimeout(() => {
26
+ element.scrollIntoView({
27
+ behavior: 'smooth',
28
+ block: 'center'
29
+ });
30
+ }, timeout);
33
31
  },
34
32
  submitButtonHandler(event) {
35
- if(this.form.reportValidity()){
33
+ this.$store.forms.submissionAttempted[formId] = true;
34
+ if(this.form.reportValidity()){
36
35
  this.handleSubmit(event,this.form)
37
36
  } else {
38
- this.$store.forms.submissionAttempted[formId] = true;
39
- setTimeout(() => {
40
- this.scrollToElementWithOffset(document.activeElement, 180)
41
- }, 100);
37
+ this.scrollToElementAndCenterWithTimeout(document.activeElement, 50)
42
38
  }
43
39
  },
44
40
  retryHandler() {
45
41
  this.wasPosted = false;
46
42
  this.wasPostedWithError = false;
47
- this.formWrapper.scrollIntoView({ behavior: 'smooth' })
43
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 50)
44
+
48
45
  },
49
46
  handleValidationErrors(errors) {
50
47
  console.log('Validation Errors:', errors);
@@ -109,20 +106,21 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
109
106
  console.log("OK");
110
107
  this.wasPosted = true;
111
108
  this.wasPostedWithSuccess = true;
112
- this.scrollToElementWithOffset(this.formWrapper, 180)
109
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
113
110
 
114
111
  break;
115
112
  default:
116
113
  console.log("default");
117
114
  this.wasPosted = true;
118
115
  this.wasPostedWithError = true;
119
- this.scrollToElementWithOffset(this.formWrapper, 180)
116
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
120
117
  break;
121
118
  }
122
119
  } else {
123
120
 
124
121
  this.wasPosted = true;
125
122
  this.wasPostedWithError = true;
123
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
126
124
  }
127
125
  if (formId) {
128
126
  window.location.hash = formId;
@@ -130,14 +128,17 @@ export default function contactForm(formId, jsonUrl, errorMessages, multipart, t
130
128
  } else {
131
129
  this.wasPosted = true;
132
130
  this.wasPostedWithError = true;
131
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
133
132
  throw new Error('Network response was not ok.');
134
133
 
134
+
135
135
  }
136
136
  })
137
137
  .catch((error) => {
138
138
  console.error('Fail:', error);
139
139
  this.wasPosted = true;
140
140
  this.wasPostedWithError = true;
141
+ this.scrollToElementAndCenterWithTimeout(this.formWrapper.previousElementSibling, 0)
141
142
  })
142
143
  .finally(() => {
143
144
  console.log('Always');
package/src/stories/views/components/forms/webform.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{~#if _newWebForm ~}}
2
2
  {{#>components/forms/components/backgroundBox }}
3
- <h3 class="mb-6 text-2xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
3
+ <h3 class="mb-6 text-2xl md:text-3xl font-headingSerif sm:mb-12 text-text dark:text-text-dark">
4
4
  {{this.title}}
5
5
  </h3>
6
6
  <div id="formWrapper">