hr-design-system-handlebars 1.114.68 → 1.114.70

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 CHANGED
@@ -1,3 +1,29 @@
1
+ # v1.114.70 (Wed Jan 22 2025)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 3517 c [#1219](https://github.com/mumprod/hr-design-system-handlebars/pull/1219) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
6
+
7
+ #### Authors: 2
8
+
9
+ - [@eduardo-hr](https://github.com/eduardo-hr)
10
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
11
+
12
+ ---
13
+
14
+ # v1.114.69 (Tue Jan 21 2025)
15
+
16
+ #### 🐛 Bug Fix
17
+
18
+ - Enhance media player sticky wrapper positioning based on subnavigation visibility [#1218](https://github.com/mumprod/hr-design-system-handlebars/pull/1218) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
19
+
20
+ #### Authors: 2
21
+
22
+ - [@eduardo-hr](https://github.com/eduardo-hr)
23
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
24
+
25
+ ---
26
+
1
27
  # v1.114.68 (Tue Jan 21 2025)
2
28
 
3
29
  #### 🐛 Bug Fix
@@ -1209,14 +1209,17 @@ article #commentList {
1209
1209
  .top-14 {
1210
1210
  top: 3.5rem;
1211
1211
  }
1212
+ .top-16 {
1213
+ top: 4rem;
1214
+ }
1212
1215
  .top-20 {
1213
1216
  top: 5rem;
1214
1217
  }
1215
1218
  .top-31 {
1216
1219
  top: 7.75rem;
1217
1220
  }
1218
- .top-4 {
1219
- top: 1rem;
1221
+ .top-40 {
1222
+ top: 10rem;
1220
1223
  }
1221
1224
  .top-8 {
1222
1225
  top: 2rem;
@@ -2799,11 +2802,6 @@ article #commentList {
2799
2802
  background-color: rgba(226, 232, 240, 1);
2800
2803
  background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
2801
2804
  }
2802
- .bg-slate-400 {
2803
- --tw-bg-opacity: 1;
2804
- background-color: rgba(148, 163, 184, 1);
2805
- background-color: rgba(148, 163, 184, var(--tw-bg-opacity));
2806
- }
2807
2805
  .bg-slate-500 {
2808
2806
  --tw-bg-opacity: 1;
2809
2807
  background-color: rgba(100, 116, 139, 1);
@@ -3771,7 +3769,7 @@ article #commentList {
3771
3769
  border-bottom-color: var(--color-secondary-ds);
3772
3770
  }
3773
3771
  .counter-reset {
3774
- counter-reset: cnt1737470359520;
3772
+ counter-reset: cnt1737558906983;
3775
3773
  }
3776
3774
  .animate-duration-1000 {
3777
3775
  --tw-animate-duration: 1000ms;
@@ -4201,7 +4199,7 @@ html { scroll-behavior: smooth; }
4201
4199
  --tw-ring-color: rgba(255, 255, 255, 0.5);
4202
4200
  }
4203
4201
  .-ordered {
4204
- counter-increment: cnt1737470359520 1;
4202
+ counter-increment: cnt1737558906983 1;
4205
4203
  }
4206
4204
  .-ordered::before {
4207
4205
  position: absolute;
@@ -4219,7 +4217,7 @@ html { scroll-behavior: smooth; }
4219
4217
  --tw-text-opacity: 1;
4220
4218
  color: rgba(0, 0, 0, 1);
4221
4219
  color: rgba(0, 0, 0, var(--tw-text-opacity));
4222
- content: counter(cnt1737470359520);
4220
+ content: counter(cnt1737558906983);
4223
4221
  }
4224
4222
  /*! ****************************/
4225
4223
  /*! DataPolicy stuff */
@@ -8047,6 +8045,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
8047
8045
  top: 7.75rem;
8048
8046
  }
8049
8047
 
8048
+ .lg\:top-40 {
8049
+ top: 10rem;
8050
+ }
8051
+
8050
8052
  .lg\:z-50 {
8051
8053
  z-index: 50;
8052
8054
  }
@@ -1,11 +1,13 @@
1
1
 
2
- <div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
2
+ <div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
3
3
  <div x-ref="videoElementWrapper"
4
4
  class="transition-all lg:transition-none right-4"
5
5
  :class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
6
6
  'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
7
- 'top-14 md:top-16 lg:top-31': $store.navIsVisible,
8
- 'top-4 lg:top-20': !$store.navIsVisible}">
7
+ 'top-14 md:top-16': $store.navIsVisible,
8
+ 'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
9
+ 'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
10
+ 'top-14 lg:top-20': !$store.navIsVisible}">
9
11
  {{> @partial-block }}
10
12
  <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
11
13
  :class="{'hidden': !shouldVideoBeFixed(),
@@ -15,7 +17,6 @@
15
17
  </div>
16
18
  </button>
17
19
  </div>
18
-
19
20
  <script>
20
21
  var stickyPlayer = () => {
21
22
  return {
@@ -25,7 +26,7 @@
25
26
  videoStoped: true,
26
27
  videoPlaying: false,
27
28
  videoWasStopedWhenSticky: false,
28
- videoWasStopedByUser: false,
29
+ videoWasClosedByUser: false,
29
30
  videoElement: null,
30
31
 
31
32
  shouldVideoBeFixed: function () {
@@ -45,8 +46,8 @@
45
46
  this.videoPlaying = false;
46
47
  this.videoStoped = true;
47
48
  if (!this.inViewport ) {
48
- if(this.videoWasStopedByUser){
49
- this.videoWasStopedByUser = false
49
+ if(this.videoWasClosedByUser){
50
+ this.videoWasClosedByUser = false
50
51
  } else {
51
52
  this.videoWasStopedWhenSticky = true;
52
53
  }
@@ -56,8 +57,9 @@
56
57
  }
57
58
  },
58
59
  closeVideo: function () {
59
- this.videoElement.pause();
60
- this.videoWasStopedByUser = true;
60
+ this.videoWasStopedWhenSticky = false;
61
+ this.videoWasClosedByUser = true;
62
+ this.videoElement.pause();
61
63
  },
62
64
  init: function () {
63
65
  this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
@@ -20,10 +20,10 @@
20
20
  _noDelay=true}}
21
21
  {{/if}}
22
22
  {{#if this.isVideoOnDemand}}
23
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
24
24
  {{/if}}
25
25
  {{#if this.isLivestream}}
26
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
26
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
27
27
  {{/if}}
28
28
  {{/with}}
29
29
  {{/unless}}
@@ -1,11 +1,13 @@
1
1
 
2
- <div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
2
+ <div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
3
3
  <div x-ref="videoElementWrapper"
4
4
  class="transition-all lg:transition-none right-4"
5
5
  :class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
6
6
  'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
7
- 'top-14 md:top-16 lg:top-31': $store.navIsVisible,
8
- 'top-4 lg:top-20': !$store.navIsVisible}">
7
+ 'top-14 md:top-16': $store.navIsVisible,
8
+ 'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
9
+ 'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
10
+ 'top-14 lg:top-20': !$store.navIsVisible}">
9
11
  {{> @partial-block }}
10
12
  <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
11
13
  :class="{'hidden': !shouldVideoBeFixed(),
@@ -15,7 +17,6 @@
15
17
  </div>
16
18
  </button>
17
19
  </div>
18
-
19
20
  <script>
20
21
  var stickyPlayer = () => {
21
22
  return {
@@ -25,7 +26,7 @@
25
26
  videoStoped: true,
26
27
  videoPlaying: false,
27
28
  videoWasStopedWhenSticky: false,
28
- videoWasStopedByUser: false,
29
+ videoWasClosedByUser: false,
29
30
  videoElement: null,
30
31
 
31
32
  shouldVideoBeFixed: function () {
@@ -45,8 +46,8 @@
45
46
  this.videoPlaying = false;
46
47
  this.videoStoped = true;
47
48
  if (!this.inViewport ) {
48
- if(this.videoWasStopedByUser){
49
- this.videoWasStopedByUser = false
49
+ if(this.videoWasClosedByUser){
50
+ this.videoWasClosedByUser = false
50
51
  } else {
51
52
  this.videoWasStopedWhenSticky = true;
52
53
  }
@@ -56,8 +57,9 @@
56
57
  }
57
58
  },
58
59
  closeVideo: function () {
59
- this.videoElement.pause();
60
- this.videoWasStopedByUser = true;
60
+ this.videoWasStopedWhenSticky = false;
61
+ this.videoWasClosedByUser = true;
62
+ this.videoElement.pause();
61
63
  },
62
64
  init: function () {
63
65
  this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
@@ -20,10 +20,10 @@
20
20
  _noDelay=true}}
21
21
  {{/if}}
22
22
  {{#if this.isVideoOnDemand}}
23
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
24
24
  {{/if}}
25
25
  {{#if this.isLivestream}}
26
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
26
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
27
27
  {{/if}}
28
28
  {{/with}}
29
29
  {{/unless}}
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.114.68",
9
+ "version": "1.114.70",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -1,11 +1,13 @@
1
1
 
2
- <div x-data="stickyPlayer" class="relative ar-16-9 bg-slate-400" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
2
+ <div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
3
3
  <div x-ref="videoElementWrapper"
4
4
  class="transition-all lg:transition-none right-4"
5
5
  :class="{ 'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
6
6
  'animate-fade animate-duration-1000 animate-ease-in-out': !shouldVideoBeFixed(),
7
- 'top-14 md:top-16 lg:top-31': $store.navIsVisible,
8
- 'top-4 lg:top-20': !$store.navIsVisible}">
7
+ 'top-14 md:top-16': $store.navIsVisible,
8
+ 'lg:top-31': $store.navIsVisible && !$store.subNavIsVisible,
9
+ 'lg:top-40': $store.navIsVisible && $store.subNavIsVisible,
10
+ 'top-14 lg:top-20': !$store.navIsVisible}">
9
11
  {{> @partial-block }}
10
12
  <button @click="closeVideo()" class="absolute top-0 right-0 flex items-center justify-center w-12 h-12 z-300 hover:scale-105"
11
13
  :class="{'hidden': !shouldVideoBeFixed(),
@@ -15,7 +17,6 @@
15
17
  </div>
16
18
  </button>
17
19
  </div>
18
-
19
20
  <script>
20
21
  var stickyPlayer = () => {
21
22
  return {
@@ -25,7 +26,7 @@
25
26
  videoStoped: true,
26
27
  videoPlaying: false,
27
28
  videoWasStopedWhenSticky: false,
28
- videoWasStopedByUser: false,
29
+ videoWasClosedByUser: false,
29
30
  videoElement: null,
30
31
 
31
32
  shouldVideoBeFixed: function () {
@@ -45,8 +46,8 @@
45
46
  this.videoPlaying = false;
46
47
  this.videoStoped = true;
47
48
  if (!this.inViewport ) {
48
- if(this.videoWasStopedByUser){
49
- this.videoWasStopedByUser = false
49
+ if(this.videoWasClosedByUser){
50
+ this.videoWasClosedByUser = false
50
51
  } else {
51
52
  this.videoWasStopedWhenSticky = true;
52
53
  }
@@ -56,8 +57,9 @@
56
57
  }
57
58
  },
58
59
  closeVideo: function () {
59
- this.videoElement.pause();
60
- this.videoWasStopedByUser = true;
60
+ this.videoWasStopedWhenSticky = false;
61
+ this.videoWasClosedByUser = true;
62
+ this.videoElement.pause();
61
63
  },
62
64
  init: function () {
63
65
  this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
@@ -2,7 +2,7 @@ import structuredClone from 'core-js-pure/actual/structured-clone'
2
2
  import NavigationData from '../../site_header/fixtures/site_header.json'
3
3
  import teaserStandard from '../../teaser/fixtures/teaser_standard.json'
4
4
 
5
- import data_story from '../story/fixtures/story.json'
5
+ import data_story from '../story/fixtures/story_with_video.json'
6
6
  import data_breadcrumb from '../../navigation/breadcrumb/fixtures/breadcrumb.json'
7
7
 
8
8
  const NavigationDataWithTeaser = structuredClone(
@@ -20,10 +20,10 @@
20
20
  _noDelay=true}}
21
21
  {{/if}}
22
22
  {{#if this.isVideoOnDemand}}
23
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
23
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_intro_sr" _a11yOutro-loca="story_video_outro_sr" }}
24
24
  {{/if}}
25
25
  {{#if this.isLivestream}}
26
- {{> components/content/copytext/components/media/media_figure _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
26
+ {{> components/content/copytext/components/media/media_figure _isSticky=true _playerLocation="Aufmacher" _isFullsize=true _isLead=true _playerSize="100" _addClass="print:hidden article-full-width md:article-breakout mt-12 mb-6 sm:mt-14 sm:mb-8" _cssClassCaption="mx-5 md:mx-0" _a11yIntro-loca="story_video_livestream_intro_sr" _a11yOutro-loca="story_video_livestream_outro_sr" }}
27
27
  {{/if}}
28
28
  {{/with}}
29
29
  {{/unless}}