@internetstiftelsen/styleguide 2.24.22 → 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 (4) hide show
  1. package/dist/molecules/continue-video-guide/continue-video-guide.js +13 -1
  2. package/package.json +1 -1
  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
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",
3
+ "version": "2.24.23",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
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
  }