@internetstiftelsen/styleguide 2.24.22-beta.0.1 → 2.24.23

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 (5) hide show
  1. package/dist/molecules/continue-video-guide/continue-video-guide.js +13 -1
  2. package/package.json +2 -2
  3. package/src/molecules/continue-video-guide/continue-video-guide.js +13 -1
  4. package/src/molecules/continue-video-guide/continue-video-guide.scss +25 -0
  5. package/src/organisms/hero/_hero--dynamic-headline.scss +7 -0
package/dist/molecules/continue-video-guide/continue-video-guide.js CHANGED
@@ -65,12 +65,12 @@ var ProgressRing = function (_CustomElement2) {
65
65
  }(_CustomElement);
66
66
 
67
67
  window.customElements.define('progress-ring', ProgressRing);
68
+ var continueElement = document.querySelector('.js-guide-continue');
68
69
 
69
70
  // Get value from sessionStorage if present
70
71
  if (sessionStorage.getItem('InmsCurrentTime')) {
71
72
  var videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
72
73
  var videoDuration = sessionStorage.getItem('InmsDuration');
73
- var continueElement = document.querySelector('.js-guide-continue');
74
74
  var progressRing = document.querySelector('progress-ring');
75
75
  var continueLink = document.querySelector('.js-guide-continue-link');
76
76
  var guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
@@ -88,4 +88,16 @@ if (sessionStorage.getItem('InmsCurrentTime')) {
88
88
  // Calculate percentage played
89
89
  progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
90
90
  }
91
+ }
92
+
93
+ // Close Continue Component
94
+ var closeButton = document.querySelector('.js-guide-close');
95
+
96
+ closeButton.addEventListener('click', function () {
97
+ sessionStorage.setItem('InmsGuideClosed', true);
98
+ continueElement.classList.remove('is-visible');
99
+ });
100
+
101
+ if (!sessionStorage.getItem('InmsGuideClosed')) {
102
+ continueElement.classList.add('is-visible');
91
103
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.24.22-beta.0.1",
3
+ "version": "2.24.23",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
@@ -90,4 +90,4 @@
90
90
  "fractal": {
91
91
  "main": "fractal.config.js"
92
92
  }
93
- }
93
+ }
package/src/molecules/continue-video-guide/continue-video-guide.js CHANGED
@@ -54,12 +54,12 @@ class ProgressRing extends HTMLElement {
54
54
  }
55
55
 
56
56
  window.customElements.define('progress-ring', ProgressRing);
57
+ const continueElement = document.querySelector('.js-guide-continue');
57
58
 
58
59
  // Get value from sessionStorage if present
59
60
  if (sessionStorage.getItem('InmsCurrentTime')) {
60
61
  const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
61
62
  const videoDuration = sessionStorage.getItem('InmsDuration');
62
- const continueElement = document.querySelector('.js-guide-continue');
63
63
  const progressRing = document.querySelector('progress-ring');
64
64
  const continueLink = document.querySelector('.js-guide-continue-link');
65
65
  const guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
@@ -82,3 +82,15 @@ if (sessionStorage.getItem('InmsCurrentTime')) {
82
82
  progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
83
83
  }
84
84
  }
85
+
86
+ // Close Continue Component
87
+ const closeButton = document.querySelector('.js-guide-close');
88
+
89
+ closeButton.addEventListener('click', () => {
90
+ sessionStorage.setItem('InmsGuideClosed', true);
91
+ continueElement.classList.remove('is-visible');
92
+ });
93
+
94
+ if (!sessionStorage.getItem('InmsGuideClosed')) {
95
+ continueElement.classList.add('is-visible');
96
+ }
package/src/molecules/continue-video-guide/continue-video-guide.scss CHANGED
@@ -8,6 +8,11 @@
8
8
  width: 100px;
9
9
  height: calc(100px + 23px + rhythm(1));
10
10
  transform: scale(0.7);
11
+ display: none;
12
+
13
+ &.is-visible {
14
+ display: block;
15
+ }
11
16
 
12
17
  @include bp-up(md) {
13
18
  transform: scale(1);
@@ -50,6 +55,13 @@
50
55
  padding: rhythm(0.5) rhythm(1);
51
56
  line-height: 1;
52
57
  }
58
+
59
+ &:hover,
60
+ &:focus {
61
+ &::after {
62
+ font-size: calc($size-medium + 1px);
63
+ }
64
+ }
53
65
  }
54
66
 
55
67
  @include m(has-progress) {
@@ -107,4 +119,17 @@
107
119
  height: 100px;
108
120
  border-radius: 50%;
109
121
  }
122
+
123
+ @include e(close) {
124
+ border-radius: 50%;
125
+ position: absolute;
126
+ top: 0;
127
+ right: 0;
128
+ z-index: 4;
129
+
130
+ &:hover,
131
+ &:focus {
132
+ background-color: $color-peacock !important;
133
+ }
134
+ }
110
135
  }
package/src/organisms/hero/_hero--dynamic-headline.scss CHANGED
@@ -112,13 +112,20 @@
112
112
  transform: scale(1) translateY(0);
113
113
  animation: pulse infinite 1.5s ease;
114
114
  will-change: transform;
115
+ top: rem(15px);
115
116
 
116
117
  @include bp-up(sm) {
117
118
  animation: pulse2 infinite 1.5s ease;
119
+ top: rem(20px);
120
+ }
121
+
122
+ @include bp-up(md) {
123
+ top: rem(40px);
118
124
  }
119
125
 
120
126
  @include bp-up(xl) {
121
127
  animation: pulse3 infinite 1.5s ease;
128
+ top: rem(50px);
122
129
  }
123
130
  }
124
131