hr-design-system-handlebars 1.63.12 → 1.63.14

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 (9) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +13 -5
  3. package/dist/views/components/page/base/page_header.hbs +2 -2
  4. package/dist/views/components/social_sharing/social_sharing_compact.hbs +6 -1
  5. package/dist/views_static/components/page/base/page_header.hbs +2 -2
  6. package/dist/views_static/components/social_sharing/social_sharing_compact.hbs +6 -1
  7. package/package.json +1 -1
  8. package/src/stories/views/components/page/base/page_header.hbs +2 -2
  9. package/src/stories/views/components/social_sharing/social_sharing_compact.hbs +6 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.63.14 (Fri Apr 12 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - makes the top position dependent on navi height on desktop [#907](https://github.com/mumprod/hr-design-system-handlebars/pull/907) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
13
+ # v1.63.13 (Fri Apr 12 2024)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - margin bottom for labelgroup and topline [#905](https://github.com/mumprod/hr-design-system-handlebars/pull/905) ([@StefanVesper](https://github.com/StefanVesper))
18
+
19
+ #### Authors: 1
20
+
21
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
22
+
23
+ ---
24
+
1
25
  # v1.63.12 (Fri Apr 12 2024)
2
26
 
3
27
  #### 🐛 Bug Fix
package/dist/assets/index.css CHANGED
@@ -1338,6 +1338,9 @@ article.indexTextDS .indexTextHighlighted .link {
1338
1338
  .mb-12 {
1339
1339
  margin-bottom: 3rem;
1340
1340
  }
1341
+ .mb-2 {
1342
+ margin-bottom: 0.5rem;
1343
+ }
1341
1344
  .mb-3 {
1342
1345
  margin-bottom: 0.75rem;
1343
1346
  }
@@ -3279,6 +3282,11 @@ article.indexTextDS .indexTextHighlighted .link {
3279
3282
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3280
3283
  transition-duration: 150ms;
3281
3284
  }
3285
+ .transition-\[top\] {
3286
+ transition-property: top;
3287
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3288
+ transition-duration: 150ms;
3289
+ }
3282
3290
  .transition-all {
3283
3291
  transition-property: all;
3284
3292
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3333,7 +3341,7 @@ article.indexTextDS .indexTextHighlighted .link {
3333
3341
  border-bottom-color: var(--color-secondary-ds);
3334
3342
  }
3335
3343
  .counter-reset {
3336
- counter-reset: cnt1712929239066;
3344
+ counter-reset: cnt1712934666834;
3337
3345
  }
3338
3346
  .hyphens-auto {
3339
3347
  -webkit-hyphens: auto;
@@ -3712,7 +3720,7 @@ article.indexTextDS .indexTextHighlighted .link {
3712
3720
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3713
3721
  }
3714
3722
  .-ordered {
3715
- counter-increment: cnt1712929239066 1;
3723
+ counter-increment: cnt1712934666834 1;
3716
3724
  }
3717
3725
  .-ordered::before {
3718
3726
  position: absolute;
@@ -3728,7 +3736,7 @@ article.indexTextDS .indexTextHighlighted .link {
3728
3736
  letter-spacing: .0125em;
3729
3737
  --tw-text-opacity: 1;
3730
3738
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3731
- content: counter(cnt1712929239066);
3739
+ content: counter(cnt1712934666834);
3732
3740
  }
3733
3741
  /*! ****************************/
3734
3742
  /*! DataPolicy stuff */
@@ -7361,8 +7369,8 @@ article.indexTextDS .indexTextHighlighted .link {
7361
7369
  top: 0px;
7362
7370
  }
7363
7371
 
7364
- .socialShareDesktop\:top-32 {
7365
- top: 8rem;
7372
+ .socialShareDesktop\:top-\[78px\] {
7373
+ top: 78px;
7366
7374
  }
7367
7375
  }
7368
7376
  .\[\&\:has\(\+\.-hideOnMobile\)\]\:order-1[\:has\(\%2B.-hideOnMobile\)] {
package/dist/views/components/page/base/page_header.hbs CHANGED
@@ -2,13 +2,13 @@
2
2
  <h2>
3
3
  {{#if this.label }}
4
4
  {{#with this.label}}
5
- {{#> components/label/label_group}}
5
+ {{#> components/label/label_group _css="mb-2"}}
6
6
  {{> components/label/label _type=this.type _text=(loca this.loca)}}
7
7
  {{/components/label/label_group}}
8
8
  {{/with}}
9
9
  {{else}}
10
10
  {{~#if topline}}
11
- <span class="block text-base sm480:text-xl font-heading">{{this.topline}}</span>
11
+ <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
12
12
  {{/if~}}
13
13
  {{/if~}}
14
14
  <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
package/dist/views/components/social_sharing/social_sharing_compact.hbs CHANGED
@@ -32,10 +32,15 @@
32
32
  },
33
33
  checkIfDesktop() {
34
34
  this.isDesktop = (window.innerWidth >= 1040) ? true : false
35
+ },
36
+ checkNaviHeight() {
37
+ let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
38
+ if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
35
39
  }
36
40
  }"
37
41
  x-init = "checkIfDesktop()"
38
42
  x-on:resize.window = "checkIfDesktop()"
43
+ x-on:scroll.window.debounce = "checkNaviHeight()"
39
44
  x-on:keydown.escape.prevent.stop="close($refs.button)"
40
45
  x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
41
46
  x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
53
58
 
54
59
  <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
55
60
  <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
56
- <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
61
+ <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
57
62
  <button
58
63
  class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
59
64
  x-show="!isDesktop"
package/dist/views_static/components/page/base/page_header.hbs CHANGED
@@ -2,13 +2,13 @@
2
2
  <h2>
3
3
  {{#if this.label }}
4
4
  {{#with this.label}}
5
- {{#> components/label/label_group}}
5
+ {{#> components/label/label_group _css="mb-2"}}
6
6
  {{> components/label/label _type=this.type _text=(loca this.loca)}}
7
7
  {{/components/label/label_group}}
8
8
  {{/with}}
9
9
  {{else}}
10
10
  {{~#if topline}}
11
- <span class="block text-base sm480:text-xl font-heading">{{this.topline}}</span>
11
+ <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
12
12
  {{/if~}}
13
13
  {{/if~}}
14
14
  <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
package/dist/views_static/components/social_sharing/social_sharing_compact.hbs CHANGED
@@ -32,10 +32,15 @@
32
32
  },
33
33
  checkIfDesktop() {
34
34
  this.isDesktop = (window.innerWidth >= 1040) ? true : false
35
+ },
36
+ checkNaviHeight() {
37
+ let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
38
+ if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
35
39
  }
36
40
  }"
37
41
  x-init = "checkIfDesktop()"
38
42
  x-on:resize.window = "checkIfDesktop()"
43
+ x-on:scroll.window.debounce = "checkNaviHeight()"
39
44
  x-on:keydown.escape.prevent.stop="close($refs.button)"
40
45
  x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
41
46
  x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
53
58
 
54
59
  <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
55
60
  <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
56
- <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
61
+ <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
57
62
  <button
58
63
  class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
59
64
  x-show="!isDesktop"
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.63.12",
9
+ "version": "1.63.14",
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/page/base/page_header.hbs CHANGED
@@ -2,13 +2,13 @@
2
2
  <h2>
3
3
  {{#if this.label }}
4
4
  {{#with this.label}}
5
- {{#> components/label/label_group}}
5
+ {{#> components/label/label_group _css="mb-2"}}
6
6
  {{> components/label/label _type=this.type _text=(loca this.loca)}}
7
7
  {{/components/label/label_group}}
8
8
  {{/with}}
9
9
  {{else}}
10
10
  {{~#if topline}}
11
- <span class="block text-base sm480:text-xl font-heading">{{this.topline}}</span>
11
+ <span class="block mb-2 text-base sm480:text-xl font-heading">{{this.topline}}</span>
12
12
  {{/if~}}
13
13
  {{/if~}}
14
14
  <span class="text-3xl font-headingSerif sm480:text-4xl">{{this.title}}</span>
package/src/stories/views/components/social_sharing/social_sharing_compact.hbs CHANGED
@@ -32,10 +32,15 @@
32
32
  },
33
33
  checkIfDesktop() {
34
34
  this.isDesktop = (window.innerWidth >= 1040) ? true : false
35
+ },
36
+ checkNaviHeight() {
37
+ let naviHeight = document.querySelector('#headerWrapper').offsetHeight -20
38
+ if(!this.sharingIsVisible && window.innerWidth >= 1040 ) this.$refs.sharingWrapper.style.top = naviHeight+'px'
35
39
  }
36
40
  }"
37
41
  x-init = "checkIfDesktop()"
38
42
  x-on:resize.window = "checkIfDesktop()"
43
+ x-on:scroll.window.debounce = "checkNaviHeight()"
39
44
  x-on:keydown.escape.prevent.stop="close($refs.button)"
40
45
  x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
41
46
  x-id="['dropdown-button']"
@@ -53,7 +58,7 @@
53
58
 
54
59
  <div :class="{ 'grid grid-page z-100 fixed bottom-feature-box-height socialShareDesktop:bottom-auto socialShareDesktop:top-0 left-0 w-full': !sharingIsVisible }">
55
60
  <div class="" :class="{ 'flex justify-start col-full sm:col-main relative': !sharingIsVisible }">
56
- <div class="flex gap-3" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-32 left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
61
+ <div x-ref="sharingWrapper" class="flex gap-3 transition-[top]" :class="{ 'bg-white w-10 bottom-5 socialShareDesktop:top-[78px] left-5 shadow-xl socialShareDesktop:-left-2 flex-col absolute': !sharingIsVisible }">
57
62
  <button
58
63
  class="order-2 h-10 p-2 text-white border bg-button ds-button font-heading hover:bg-button--dark hover:border-button--dark active:bg-button--dark group"
59
64
  x-show="!isDesktop"