@internetstiftelsen/styleguide 2.24.14 → 2.24.15

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.
@@ -1,14 +1,29 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.cache = cache;
3
7
  function isInView(el) {
4
8
  var box = el.getBoundingClientRect();
5
9
  return box.top < window.innerHeight && box.bottom >= 0;
6
10
  }
7
11
 
8
- var parallaxes = document.querySelectorAll('.js-parallax');
12
+ var parallaxes = [];
13
+
14
+ // eslint-disable-next-line import/prefer-default-export
15
+ function cache() {
16
+ parallaxes = document.querySelectorAll('.js-parallax');
17
+ }
18
+
19
+ cache();
9
20
 
10
21
  window.addEventListener('scroll', function () {
11
22
  [].forEach.call(parallaxes, function (parallax) {
23
+ if (parallax.classList.contains('animate')) {
24
+ return;
25
+ }
26
+
12
27
  var visible = isInView(parallax);
13
28
  if (visible) {
14
29
  parallax.classList.add('animate');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "2.24.14",
3
+ "version": "2.24.15",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
package/src/app.scss CHANGED
@@ -88,6 +88,7 @@ $namespace: '';
88
88
  @import 'organisms/podcast/podcast-player';
89
89
  @import 'organisms/video-guide/video-guide';
90
90
  @import 'organisms/timeline/timeline';
91
+ @import 'organisms/members-service-product/members-service-product';
91
92
 
92
93
  // Structures
93
94
  @import 'structures/manifest';
@@ -3,10 +3,21 @@ function isInView(el) {
3
3
  return box.top < window.innerHeight && box.bottom >= 0;
4
4
  }
5
5
 
6
- const parallaxes = document.querySelectorAll('.js-parallax');
6
+ let parallaxes = [];
7
+
8
+ // eslint-disable-next-line import/prefer-default-export
9
+ export function cache() {
10
+ parallaxes = document.querySelectorAll('.js-parallax');
11
+ }
12
+
13
+ cache();
7
14
 
8
15
  window.addEventListener('scroll', () => {
9
16
  [].forEach.call(parallaxes, (parallax) => {
17
+ if (parallax.classList.contains('animate')) {
18
+ return;
19
+ }
20
+
10
21
  const visible = isInView(parallax);
11
22
  if (visible) {
12
23
  parallax.classList.add('animate');
@@ -99,7 +99,9 @@
99
99
  padding: rhythm(1.6) rhythm(4);
100
100
 
101
101
  @include e(text) {
102
- font-size: rem(24px);
102
+ @include bp-up(sm) {
103
+ font-size: rem(24px);
104
+ }
103
105
  }
104
106
 
105
107
  @include e(icon) {
@@ -5,8 +5,8 @@
5
5
  @include atom(paging-wrapper) {
6
6
  display: flex;
7
7
  position: relative;
8
- align-items: center;
9
8
  width: 100%;
9
+ align-items: center;
10
10
 
11
11
  @include e(text) {
12
12
  flex: 1;
@@ -24,13 +24,18 @@
24
24
  flex-shrink: 0;
25
25
  align-items: center;
26
26
  justify-content: center;
27
- width: rhythm(6);
28
- height: rhythm(6);
27
+ width: rhythm(4);
28
+ height: rhythm(4);
29
29
  border: 1px solid $color-ash;
30
30
  border-radius: 50%;
31
31
  background-color: $color-snow;
32
32
  box-shadow: 0 3px 5px lighten($color-granit, 15%);
33
33
 
34
+ @include bp-up(sm) {
35
+ width: rhythm(6);
36
+ height: rhythm(6);
37
+ }
38
+
34
39
  &:focus,
35
40
  &:hover {
36
41
  background-color: $color-ash;
@@ -40,7 +45,12 @@
40
45
  display: flex;
41
46
  align-items: center;
42
47
  justify-content: center;
43
- width: $icon-size-medium;
44
- height: $icon-size-medium;
48
+ width: $icon-size-small;
49
+ height: $icon-size-small;
50
+
51
+ @include bp-up(sm) {
52
+ width: $icon-size-medium;
53
+ height: $icon-size-medium;
54
+ }
45
55
  }
46
56
  }
@@ -9,6 +9,7 @@
9
9
  padding: rhythm(1);
10
10
  border-radius: 50%;
11
11
  box-shadow: 0 0 0 rem(5px) transparent;
12
+ overflow: visible;
12
13
 
13
14
  &:focus,
14
15
  &:hover {
@@ -89,7 +89,7 @@ $icon-size: rem(24px);
89
89
  $icon-size-large: rem(28px);
90
90
  $icon-size-medium: rem(20px);
91
91
  $icon-size-small: rem(16px);
92
- $icon-size-smallest: rem(14px);
92
+ $icon-size-smallest: rem(12px);
93
93
 
94
94
  // Z-indexes
95
95
  $z-index: (
@@ -4,162 +4,179 @@ module.exports = {
4
4
  context: {
5
5
  heading: 'Filtrera',
6
6
  is_expanded: false,
7
- checkboxes1: [
8
- {
9
- id: 'film',
10
- label: 'Film',
11
- value: '0',
12
- is_inline: false,
13
- is_disabled: false
14
- },
15
- {
16
- id: 'rapport',
17
- label: 'Rapport',
18
- value: '1',
19
- is_inline: false,
20
- is_disabled: false
21
- },
22
- {
23
- id: 'internetguider',
24
- label: 'Internetguider',
25
- value: '2',
26
- is_inline: false,
27
- is_disabled: false
28
- }
29
- ],
30
- checkboxes2: [
31
- {
32
- id: 'barnhack',
33
- label: 'Barnhack',
34
- value: '3',
35
- is_inline: false,
36
- is_disabled: false
37
- },
38
- {
39
- id: 'domämnnamn',
40
- label: 'Domämnnamn',
41
- value: '4',
42
- is_inline: false,
43
- is_disabled: false
44
- },
45
- {
46
- id: 'it-säkerhet',
47
- label: 'IT-säkerhet',
48
- value: '5',
49
- is_inline: false,
50
- is_disabled: false
51
- },
52
- {
53
- id: 'statistik',
54
- label: 'Statistik',
55
- value: '6',
56
- is_inline: false,
57
- is_disabled: false
58
- },
59
- {
60
- id: 'dns',
61
- label: 'DNS',
62
- value: '7',
63
- is_inline: false,
64
- is_disabled: false
65
- },
66
- {
67
- id: 'integritet',
68
- label: 'Integritet',
69
- value: '8',
70
- is_inline: false,
71
- is_disabled: false
72
- },
73
- {
74
- id: 'skola',
75
- label: 'Skola',
76
- value: '9',
77
- is_inline: false,
78
- is_disabled: false
79
- }
80
- ],
81
- checkboxes3: [
82
- {
83
- id: 'barn och unga',
84
- label: 'Barn coh unga',
85
- value: '10',
86
- is_inline: false,
87
- is_disabled: false
88
- },
89
- {
90
- id: 'företagare',
91
- label: 'Företagare',
92
- value: '11',
93
- is_inline: false,
94
- is_disabled: false
95
- },
96
- {
97
- id: 'pedagoger',
98
- label: 'Pedagoger',
99
- value: '12',
100
- is_inline: false,
101
- is_disabled: false
102
- },
103
- {
104
- id: 'föräldrar',
105
- label: 'Föräldrar',
106
- value: '13',
107
- is_inline: false,
108
- is_disabled: false
109
- },
110
- {
111
- id: 'journalister',
112
- label: 'Journalister',
113
- value: '14',
114
- is_inline: false,
115
- is_disabled: false
116
- },
117
- {
118
- id: 'privatpersoner',
119
- label: 'Privatpersoner',
120
- value: '15',
121
- is_inline: false,
122
- is_disabled: false
123
- }
124
- ],
125
- checkboxes4: [
126
- {
127
- id: 'iis',
128
- label: 'IIS',
129
- value: '16',
130
- is_inline: false,
131
- is_disabled: false
132
- },
133
- {
134
- id: 'pts',
135
- label: 'PTS',
136
- value: '17',
137
- is_inline: false,
138
- is_disabled: false
139
- },
140
- {
141
- id: 'scb',
142
- label: 'SCB',
143
- value: '18',
144
- is_inline: false,
145
- is_disabled: false
146
- },
147
- {
148
- id: 'statens medieråd',
149
- label: 'Statens medieråd',
150
- value: '19',
151
- is_inline: false,
152
- is_disabled: false
153
- }
154
- ],
155
- checkboxes5: [
156
- {
157
- id: 'visa arkiverat material',
158
- label: 'Visa arkiverat material',
159
- value: '20',
160
- is_inline: false,
161
- is_disabled: false
7
+ columns: [
8
+ {
9
+ title: 'Innehållstyp',
10
+ checkboxes: [
11
+ {
12
+ id: 'film',
13
+ checkboxLabel: 'Film',
14
+ value: '0',
15
+ is_inline: false,
16
+ is_disabled: false
17
+ },
18
+ {
19
+ id: 'rapport',
20
+ checkboxLabel: 'Rapport',
21
+ value: '1',
22
+ is_inline: false,
23
+ is_disabled: false
24
+ },
25
+ {
26
+ id: 'internetguider',
27
+ checkboxLabel: 'Internetguider',
28
+ value: '2',
29
+ is_inline: false,
30
+ is_disabled: false
31
+ }
32
+ ]
33
+ },
34
+ {
35
+ title: 'Ämne',
36
+ checkboxes: [
37
+ {
38
+ id: 'barnhack',
39
+ checkboxLabel: 'Barnhack',
40
+ value: '3',
41
+ is_inline: false,
42
+ is_disabled: false
43
+ },
44
+ {
45
+ id: 'domämnnamn',
46
+ checkboxLabel: 'Domämnnamn',
47
+ value: '4',
48
+ is_inline: false,
49
+ is_disabled: false
50
+ },
51
+ {
52
+ id: 'it-säkerhet',
53
+ checkboxLabel: 'IT-säkerhet',
54
+ value: '5',
55
+ is_inline: false,
56
+ is_disabled: false
57
+ },
58
+ {
59
+ id: 'statistik',
60
+ checkboxLabel: 'Statistik',
61
+ value: '6',
62
+ is_inline: false,
63
+ is_disabled: false
64
+ },
65
+ {
66
+ id: 'dns',
67
+ checkboxLabel: 'DNS',
68
+ value: '7',
69
+ is_inline: false,
70
+ is_disabled: false
71
+ },
72
+ {
73
+ id: 'integritet',
74
+ checkboxLabel: 'Integritet',
75
+ value: '8',
76
+ is_inline: false,
77
+ is_disabled: false
78
+ },
79
+ {
80
+ id: 'skola',
81
+ checkboxLabel: 'Skola',
82
+ value: '9',
83
+ is_inline: false,
84
+ is_disabled: false
85
+ }
86
+ ]
87
+ },
88
+ {
89
+ title: 'För vem?',
90
+ checkboxes: [
91
+ {
92
+ id: 'barn och unga',
93
+ checkboxLabel: 'Barn coh unga',
94
+ value: '10',
95
+ is_inline: false,
96
+ is_disabled: false
97
+ },
98
+ {
99
+ id: 'företagare',
100
+ checkboxLabel: 'Företagare',
101
+ value: '11',
102
+ is_inline: false,
103
+ is_disabled: false
104
+ },
105
+ {
106
+ id: 'pedagoger',
107
+ checkboxLabel: 'Pedagoger',
108
+ value: '12',
109
+ is_inline: false,
110
+ is_disabled: false
111
+ },
112
+ {
113
+ id: 'föräldrar',
114
+ checkboxLabel: 'Föräldrar',
115
+ value: '13',
116
+ is_inline: false,
117
+ is_disabled: false
118
+ },
119
+ {
120
+ id: 'journalister',
121
+ checkboxLabel: 'Journalister',
122
+ value: '14',
123
+ is_inline: false,
124
+ is_disabled: false
125
+ },
126
+ {
127
+ id: 'privatpersoner',
128
+ checkboxLabel: 'Privatpersoner',
129
+ value: '15',
130
+ is_inline: false,
131
+ is_disabled: false
132
+ }
133
+ ]
134
+ },
135
+ {
136
+ title: 'Avsändare',
137
+ checkboxes: [
138
+ {
139
+ id: 'iis',
140
+ checkboxLabel: 'IIS',
141
+ value: '16',
142
+ is_inline: false,
143
+ is_disabled: false
144
+ },
145
+ {
146
+ id: 'pts',
147
+ checkboxLabel: 'PTS',
148
+ value: '17',
149
+ is_inline: false,
150
+ is_disabled: false
151
+ },
152
+ {
153
+ id: 'scb',
154
+ checkboxLabel: 'SCB',
155
+ value: '18',
156
+ is_inline: false,
157
+ is_disabled: false
158
+ },
159
+ {
160
+ id: 'statens medieråd',
161
+ checkboxLabel: 'Statens medieråd',
162
+ value: '19',
163
+ is_inline: false,
164
+ is_disabled: false
165
+ }
166
+ ]
167
+ },
168
+ {
169
+ title: 'Arkiv',
170
+ checkboxes: [
171
+ {
172
+ id: 'visa arkiverat material',
173
+ checkboxLabel: 'Visa arkiverat material',
174
+ value: '20',
175
+ is_inline: false,
176
+ is_disabled: false
177
+ }
178
+ ]
162
179
  }
163
- ]
180
+ ]
164
181
  }
165
182
  }
@@ -84,7 +84,7 @@ $border-color: darken($color-jade, 5%);
84
84
 
85
85
  @include e(link) {
86
86
  display: inline-flex;
87
- align-items: center;
87
+ align-items: baseline;
88
88
  color: $color-cyberspace;
89
89
  text-decoration: none;
90
90
 
@@ -109,7 +109,7 @@ $border-color: darken($color-jade, 5%);
109
109
  @include e(icon) {
110
110
  width: $icon-size-smallest;
111
111
  height: $icon-size-smallest;
112
- margin-top: rem(2px);
112
+ flex-shrink: 0;
113
113
  margin-left: rhythm(0.5);
114
114
  }
115
115
  }
@@ -0,0 +1,60 @@
1
+ @charset 'UTF-8';
2
+
3
+ @include organism(service-product-list) {
4
+ list-style: none;
5
+ margin: 0 0 rhythm(2) 0;
6
+ padding: 0;
7
+
8
+ @include e(item) {
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding: rhythm(3) rhythm(2);
12
+
13
+ & + & {
14
+ border-top: 1px solid $color-concrete;
15
+ }
16
+
17
+ @include bp-up(sm) {
18
+ padding-top: rhythm(2);
19
+ padding-bottom: rhythm(2);
20
+ flex-direction: row;
21
+ align-items: center;
22
+ }
23
+ }
24
+
25
+ @include e(logo) {
26
+ flex-shrink: 0;
27
+
28
+ @include e(image) {
29
+ width: 100px;
30
+ height: auto;
31
+ margin-right: rhythm(4);
32
+ margin-bottom: rhythm(1);
33
+
34
+ @include bp-up(sm) {
35
+ margin-bottom: 0;
36
+ }
37
+ }
38
+ }
39
+
40
+ @include e(data) {
41
+ @include e(list) {
42
+ list-style: none;
43
+ margin: 0;
44
+ padding: 0;
45
+
46
+ dt, dd {
47
+ margin: 0;
48
+ padding: 0;
49
+ }
50
+
51
+ dt {
52
+ @extend %beta;
53
+ }
54
+
55
+ dd {
56
+ max-width: calc(#{rem(612px)} + #{($indent * 2)});
57
+ }
58
+ }
59
+ }
60
+ }
@@ -0,0 +1,79 @@
1
+ const { filter } = require("lodash");
2
+
3
+ module.exports = {
4
+ status: 'wip',
5
+ default: 'Single item',
6
+
7
+ context: {
8
+ provider: 'Gotit AB',
9
+ logo: 'https://www.skolfederation.se/wp-content/uploads/2017/02/logo_gotit.png',
10
+ description: 'Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.',
11
+ serviceName: 'Alvis',
12
+ heading: 'Filtrera',
13
+ filter: true,
14
+ columns: [
15
+ {
16
+ title: 'Kategori',
17
+ textSearch: false,
18
+ checkboxes: [
19
+ {
20
+ id: 'tjansteleverantor',
21
+ checkboxLabel: 'Tjänsteleverantör',
22
+ value: '0',
23
+ is_inline: false,
24
+ is_disabled: false
25
+ },
26
+ {
27
+ id: 'anvandarorganisation',
28
+ checkboxLabel: 'Användarorganisation',
29
+ value: '1',
30
+ is_inline: false,
31
+ is_disabled: false
32
+ }
33
+ ]
34
+ },
35
+ /*{
36
+ title: 'Annan kategori',
37
+ textSearch: false,
38
+ checkboxes: [
39
+ {
40
+ id: 'produkttyp 3',
41
+ checkboxLabel: 'Produkttyp 1',
42
+ value: '2',
43
+ is_inline: false,
44
+ is_disabled: false
45
+ }
46
+ ]
47
+ }*/
48
+ ]
49
+ },
50
+
51
+ variants: [
52
+ {
53
+ name: 'list',
54
+ status: 'wip',
55
+ context: {
56
+ items: [
57
+ {
58
+ provider: 'Gotit AB',
59
+ logo: 'https://www.skolfederation.se/wp-content/uploads/2017/02/logo_gotit.png',
60
+ description: 'Ett IT-stöd anpassat för alla former av vuxenutbildning. Alvis stödjer vuxenutbildning i egenregi, upphandlad utbildning eller en blandning av dessa.',
61
+ serviceName: 'Alvis',
62
+ },
63
+ {
64
+ provider: 'MV Nordic AB',
65
+ logo: 'https://www.skolfederation.se/wp-content/uploads/2016/10/MV-Nordic_logotyp-180x34.png',
66
+ description: 'Avtalen ger dig som uppköpare eller rektor möjlighet att hjälpa elever med dyslexi eller andra läs- och skrivsvårigheter med att klara sig i skolan eller på en utbildning.',
67
+ serviceName: 'Det flexibla avtalet',
68
+ },
69
+ {
70
+ provider: 'Natur & kultur',
71
+ logo: 'https://www.skolfederation.se/wp-content/uploads/2015/04/NoK_Logo_35mm.gif',
72
+ description: 'En digitalbok är den tryckta boken i digitalt format. Läs boken på en pekplatta, datorn eller telefon.',
73
+ serviceName: 'Digitalbok',
74
+ }
75
+ ]
76
+ }
77
+ }
78
+ ]
79
+ }
@@ -38,6 +38,8 @@
38
38
  -webkit-appearance: none;
39
39
 
40
40
  &:focus {
41
+ @extend %input-focus;
42
+
41
43
  background-color: $color-snow;
42
44
  }
43
45
 
@@ -8,6 +8,10 @@
8
8
  border-radius: 50% !important;
9
9
  }
10
10
 
11
+ .u-border-radius-none {
12
+ border-radius: 0 !important;
13
+ }
14
+
11
15
  $class-b: u-b !default;
12
16
  $class-b-t: u-b-t !default;
13
17
  $class-b-r: u-b-r !default;
package/src/.DS_Store DELETED
Binary file
Binary file