@internetstiftelsen/styleguide 2.21.20 → 2.21.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 (11) hide show
  1. package/dist/organisms/mega-menu/mega-menu.js +11 -1
  2. package/package.json +1 -1
  3. package/src/base/fonts/README.md +1 -1
  4. package/src/base/fonts/_fonts.scss +9 -9
  5. package/src/brandbook/internetstiftelsen/identitet/identitet.hbs +7 -7
  6. package/src/configurations/favicon/favicon.config.js +1 -1
  7. package/src/molecules/alert/alert.config.js +2 -1
  8. package/src/molecules/alert/alert.hbs +1 -1
  9. package/src/molecules/readspeaker/_readspeaker.scss +1 -1
  10. package/src/organisms/footer/footer.hbs +8 -8
  11. package/src/organisms/mega-menu/mega-menu.js +11 -1
package/dist/organisms/mega-menu/mega-menu.js CHANGED
@@ -11,6 +11,7 @@ var megaMenu = document.getElementById('megaMenu');
11
11
  var content = document.getElementById('siteMain');
12
12
  var header = document.getElementById('siteHeader');
13
13
  var footer = document.getElementById('siteFooter');
14
+ var alert = document.querySelector('.js-dismiss-alert');
14
15
  var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
15
16
  var focusTrap = null;
16
17
 
@@ -92,7 +93,16 @@ function prepareOutAnimation() {
92
93
  var headerRect = megaMenu.getBoundingClientRect();
93
94
  var initialFooterTop = footer.getBoundingClientRect().top;
94
95
 
95
- megaMenu.style.cssText = '\n position: absolute;\n top: ' + headerRect.top + 'px;\n left: 0;\n right: 0;\n display: block;\n\t';
96
+ /* Take into account it the site has an alert message at the top */
97
+ var alertHeight = void 0;
98
+
99
+ if (alert) {
100
+ alertHeight = alert.offsetHeight;
101
+ } else {
102
+ alertHeight = 0;
103
+ }
104
+
105
+ megaMenu.style.cssText = '\n position: absolute;\n top: ' + (headerRect.top - alertHeight) + 'px;\n left: 0;\n right: 0;\n display: block;\n\t';
96
106
 
97
107
  content.removeAttribute('style');
98
108
  header.removeAttribute('style');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.21.20",
3
+ "version": "2.21.23",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/base/fonts/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ## Note
4
4
  All fonts has been converted to allow enbedding (for IE support) using [ttembed-js](https://www.npmjs.com/package/ttembed-js)
5
- Font files are located here: https://static.iis.se/internetstiftelsen/fonts/
5
+ Font files are located here: https://static.internetstiftelsen.se/internetstiftelsen/fonts/
6
6
 
7
7
  ## List of all available font weights
8
8
  * hkgrotesk-light-webfont.woff
package/src/base/fonts/_fonts.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  font-style: normal;
7
7
  font-weight: normal;
8
8
  src:
9
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
10
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff') format('woff');
9
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
10
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-regular-webfont.woff') format('woff');
11
11
  font-display: swap;
12
12
  }
13
13
 
@@ -16,8 +16,8 @@
16
16
  font-style: normal;
17
17
  font-weight: normal;
18
18
  src:
19
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
20
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff') format('woff');
19
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff2') format('woff2'),
20
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-medium-webfont.woff') format('woff');
21
21
  font-display: swap;
22
22
  }
23
23
 
@@ -26,8 +26,8 @@
26
26
  font-style: normal;
27
27
  font-weight: normal;
28
28
  src:
29
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
30
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff') format('woff');
29
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
30
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-semibold-webfont.woff') format('woff');
31
31
  font-display: swap;
32
32
  }
33
33
 
@@ -36,8 +36,8 @@
36
36
  font-style: normal;
37
37
  font-weight: normal;
38
38
  src:
39
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
40
- url('https://static.iis.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff') format('woff');
39
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff2') format('woff2'),
40
+ url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/hkgrotesk-bold-webfont.woff') format('woff');
41
41
  font-display: swap;
42
42
  }
43
43
 
@@ -45,6 +45,6 @@
45
45
  font-family: 'Roboto Mono Regular';
46
46
  font-style: normal;
47
47
  font-weight: normal;
48
- src: url('https://static.iis.se/internetstiftelsen/fonts/RobotoMono-Regular.ttf') format('truetype');
48
+ src: url('https://static.internetstiftelsen.se/internetstiftelsen/fonts/RobotoMono-Regular.ttf') format('truetype');
49
49
  font-display: swap;
50
50
  }
package/src/brandbook/internetstiftelsen/identitet/identitet.hbs CHANGED
@@ -352,25 +352,25 @@
352
352
  <h2>Undervarumärken</h2>
353
353
  <div class="row background-snow u-m-b-4">
354
354
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
355
- <img alt="Svenskarna och internet" src="https://static.iis.se/images/logotypes/svenskarna-och-internet.svg">
355
+ <img alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
356
356
  </div>
357
357
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
358
- <img alt="Internetdagarna" src="https://static.iis.se/images/logotypes/internetdagarna.svg">
358
+ <img alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
359
359
  </div>
360
360
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
361
- <img alt="Goto10" src="https://static.iis.se/images/logotypes/goto-10.svg">
361
+ <img alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
362
362
  </div>
363
363
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
364
- <img alt="Bredbandskollen" src="https://static.iis.se/images/logotypes/bredbandskollen.svg">
364
+ <img alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
365
365
  </div>
366
366
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
367
- <img alt="Internetmuseum" src="https://static.iis.se/images/logotypes/internetmuseum.svg">
367
+ <img alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
368
368
  </div>
369
369
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
370
- <img alt="Digitala lektioner" src="https://static.iis.se/images/logotypes/digitala-lektioner.svg">
370
+ <img alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
371
371
  </div>
372
372
  <div class="grid-lg-6 grid-sm-9 grid-18 display-flex justify-content-center align-items-center u-p-4">
373
- <img alt="Internetkunskap" src="https://static.iis.se/images/logotypes/internetkunskap.svg">
373
+ <img alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
374
374
  </div>
375
375
  </div>
376
376
  </div>
package/src/configurations/favicon/favicon.config.js CHANGED
@@ -2,6 +2,6 @@ module.exports = {
2
2
  status: 'ready',
3
3
 
4
4
  context: {
5
- url: 'https://static.iis.se/favicons/'
5
+ url: 'https://static.internetstiftelsen.se/favicons/'
6
6
  }
7
7
  }
package/src/molecules/alert/alert.config.js CHANGED
@@ -4,7 +4,8 @@ module.exports = {
4
4
  context: {
5
5
  name: 'Information',
6
6
  type: 'info',
7
- text: 'Meddelanderuta med vanlig information, t.ex information om öppettider. <a href="https://internetstiftelsen.se">Dessa meddelanden</a> är fasta dv.s inget dom dyker upp tillfälligt när användaren interagerar med tjänsten.'
7
+ text: 'Meddelanderuta med vanlig information, t.ex information om öppettider. <a href="https://internetstiftelsen.se">Dessa meddelanden</a> är fasta dv.s inget dom dyker upp tillfälligt när användaren interagerar med tjänsten.',
8
+ additional_classes: false,
8
9
  },
9
10
  variants: [
10
11
  {
package/src/molecules/alert/alert.hbs CHANGED
@@ -1,4 +1,4 @@
1
- <div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
1
+ <div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if additional_classes}} {{additional_classes}}{{/if}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
2
2
  {{#if is_dismissable}}
3
3
  <button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-1">
4
4
  <span class="a-button__text">Stäng</span>
package/src/molecules/readspeaker/_readspeaker.scss CHANGED
@@ -1 +1 @@
1
- @import 'https://static.iis.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';
1
+ @import 'https://static.internetstiftelsen.se/styles/readspeaker/skins/iisReadSpeakerSkin/iisReadSpeakerSkin.css?ver=1.0.0';
package/src/organisms/footer/footer.hbs CHANGED
@@ -40,7 +40,7 @@
40
40
  <a href="https://svenskarnaochinternet.se" class="o-footer__logotypes__item__link">
41
41
  <div class="o-footer__logotypes__item__inner">
42
42
  <div class="o-footer__logotypes__item__front">
43
- <img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.iis.se/images/logotypes/svenskarna-och-internet.svg">
43
+ <img class="o-footer__logotype" alt="Svenskarna och internet" src="https://static.internetstiftelsen.se/images/logotypes/svenskarna-och-internet.svg">
44
44
  </div>
45
45
  <div class="o-footer__logotypes__item__back">
46
46
  <h2>{{site_heading_1}}</h2>
@@ -53,7 +53,7 @@
53
53
  <a href="https://internetdagarna.se" class="o-footer__logotypes__item__link">
54
54
  <div class="o-footer__logotypes__item__inner">
55
55
  <div class="o-footer__logotypes__item__front">
56
- <img class="o-footer__logotype" alt="Internetdagarna" src="https://static.iis.se/images/logotypes/internetdagarna.svg">
56
+ <img class="o-footer__logotype" alt="Internetdagarna" src="https://static.internetstiftelsen.se/images/logotypes/internetdagarna.svg">
57
57
  </div>
58
58
  <div class="o-footer__logotypes__item__back">
59
59
  <h2>{{site_heading_2}}</h2>
@@ -66,7 +66,7 @@
66
66
  <a href="https://goto10.se" class="o-footer__logotypes__item__link">
67
67
  <div class="o-footer__logotypes__item__inner">
68
68
  <div class="o-footer__logotypes__item__front">
69
- <img class="o-footer__logotype" alt="Goto10" src="https://static.iis.se/images/logotypes/goto-10.svg">
69
+ <img class="o-footer__logotype" alt="Goto10" src="https://static.internetstiftelsen.se/images/logotypes/goto-10.svg">
70
70
  </div>
71
71
  <div class="o-footer__logotypes__item__back">
72
72
  <h2>{{site_heading_3}}</h2>
@@ -79,7 +79,7 @@
79
79
  <a href="https://bredbandskollen.se" class="o-footer__logotypes__item__link">
80
80
  <div class="o-footer__logotypes__item__inner">
81
81
  <div class="o-footer__logotypes__item__front">
82
- <img class="o-footer__logotype" alt="Bredbandskollen" src="https://static.iis.se/images/logotypes/bredbandskollen.svg">
82
+ <img class="o-footer__logotype" alt="Bredbandskollen" src="https://static.internetstiftelsen.se/images/logotypes/bredbandskollen.svg">
83
83
  </div>
84
84
  <div class="o-footer__logotypes__item__back">
85
85
  <h2>{{site_heading_4}}</h2>
@@ -92,7 +92,7 @@
92
92
  <a href="https://internetmuseum.se" class="o-footer__logotypes__item__link">
93
93
  <div class="o-footer__logotypes__item__inner">
94
94
  <div class="o-footer__logotypes__item__front">
95
- <img class="o-footer__logotype" alt="Internetmuseum" src="https://static.iis.se/images/logotypes/internetmuseum.svg">
95
+ <img class="o-footer__logotype" alt="Internetmuseum" src="https://static.internetstiftelsen.se/images/logotypes/internetmuseum.svg">
96
96
  </div>
97
97
  <div class="o-footer__logotypes__item__back">
98
98
  <h2>{{site_heading_5}}</h2>
@@ -105,7 +105,7 @@
105
105
  <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
106
106
  <div class="o-footer__logotypes__item__inner">
107
107
  <div class="o-footer__logotypes__item__front">
108
- <img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.iis.se/images/logotypes/digitala-lektioner.svg">
108
+ <img class="o-footer__logotype" alt="Digitala lektioner" src="https://static.internetstiftelsen.se/images/logotypes/digitala-lektioner.svg">
109
109
  </div>
110
110
  <div class="o-footer__logotypes__item__back">
111
111
  <h2>{{site_heading_6}}</h2>
@@ -118,7 +118,7 @@
118
118
  <a href="https://digitalalektioner.se" class="o-footer__logotypes__item__link">
119
119
  <div class="o-footer__logotypes__item__inner">
120
120
  <div class="o-footer__logotypes__item__front">
121
- <img class="o-footer__logotype" alt="Internetkunskap" src="https://static.iis.se/images/logotypes/internetkunskap.svg">
121
+ <img class="o-footer__logotype" alt="Internetkunskap" src="https://static.internetstiftelsen.se/images/logotypes/internetkunskap.svg">
122
122
  </div>
123
123
  <div class="o-footer__logotypes__item__back">
124
124
  <h2>{{site_heading_7}}</h2>
@@ -131,7 +131,7 @@
131
131
  <a href="https://internetstiftelsen.se" class="o-footer__logotypes__item__link">
132
132
  <div class="o-footer__logotypes__item__inner">
133
133
  <div class="o-footer__logotypes__item__front">
134
- <img class="o-footer__logotype" alt="Internetstiftelsen" src="https://static.iis.se/images/logotypes/internetstiftelsen.svg">
134
+ <img class="o-footer__logotype" alt="Internetstiftelsen" src="https://static.internetstiftelsen.se/images/logotypes/internetstiftelsen.svg">
135
135
  </div>
136
136
  <div class="o-footer__logotypes__item__back">
137
137
  <h2>{{site_heading_8}}</h2>
package/src/organisms/mega-menu/mega-menu.js CHANGED
@@ -8,6 +8,7 @@ const megaMenu = document.getElementById('megaMenu');
8
8
  const content = document.getElementById('siteMain');
9
9
  const header = document.getElementById('siteHeader');
10
10
  const footer = document.getElementById('siteFooter');
11
+ const alert = document.querySelector('.js-dismiss-alert');
11
12
  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
12
13
  let focusTrap = null;
13
14
 
@@ -98,9 +99,18 @@ function prepareOutAnimation() {
98
99
  const headerRect = megaMenu.getBoundingClientRect();
99
100
  const initialFooterTop = footer.getBoundingClientRect().top;
100
101
 
102
+ /* Take into account it the site has an alert message at the top */
103
+ let alertHeight;
104
+
105
+ if (alert) {
106
+ alertHeight = alert.offsetHeight;
107
+ } else {
108
+ alertHeight = 0;
109
+ }
110
+
101
111
  megaMenu.style.cssText = `
102
112
  position: absolute;
103
- top: ${headerRect.top}px;
113
+ top: ${headerRect.top - alertHeight}px;
104
114
  left: 0;
105
115
  right: 0;
106
116
  display: block;