@internetstiftelsen/styleguide 2.26.1 → 2.26.2-beta.0.2

package/dist/components.js

@@ -60,4 +60,6 @@ require('./organisms/video-guide/video-guide');
 
 require('./organisms/timeline/timeline');
 
-require('./molecules/overview-navigation/overview-navigation');
+require('./molecules/overview-navigation/overview-navigation');
+
+require('./organisms/schedule/schedule-filter');

package/dist/organisms/schedule/schedule-filter.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var el = document.querySelector('.js-filter');
+
+if (el) {
+	var observer = new IntersectionObserver(function (_ref) {
+		var _ref2 = _slicedToArray(_ref, 1),
+		    e = _ref2[0];
+
+		return el.classList.toggle('is-sticky', e.intersectionRatio < 1);
+	}, { threshold: [1] });
+
+	observer.observe(el);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.26.1",
+	"version": "2.26.2-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.scss

@@ -90,6 +90,7 @@ $namespace: '';
 @import 'organisms/video-guide/video-guide';
 @import 'organisms/timeline/timeline';
 @import 'organisms/members-service-product/members-service-product';
+@import 'organisms/schedule/schedule';
 
 // Structures
 @import 'structures/manifest';

package/src/components.js

@@ -29,3 +29,4 @@ import './molecules/continue-video-guide/continue-video-guide';
 import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';
 import './molecules/overview-navigation/overview-navigation';
+import './organisms/schedule/schedule-filter';

package/src/organisms/schedule/_schedule.scss

@@ -0,0 +1,162 @@
+@charset "UTF-8";
+
+@include organism(schedule-filter)  {
+	margin-bottom: rhythm(2);
+	padding-bottom: rhythm(1);
+	position: sticky;
+	top: -1px;
+	padding-top: 1px;
+	background-color: $color-ash;
+	z-index: z_index(foregroundMinus);
+	transition: box-shadow 0.25s ease, border-width 0.25s ease;
+
+	&.is-sticky {
+		border-bottom: 1px solid $color-concrete;
+		margin-left: -#{$grid-gutter-width};
+		margin-right: -#{$grid-gutter-width};
+		padding-left: $grid-gutter-width;
+		padding-right: $grid-gutter-width;
+		@extend %box-shadow;
+	}
+
+	@include e(button) {
+		font-size: $size-base;
+
+		@include bp-up(md) {
+			pointer-events: none;
+
+			&:hover,
+			&:focus {
+				text-decoration: none;
+			}
+
+			svg {
+				display: none;
+			}
+		}
+	}
+	@include e(list) {
+		padding: 0 0 rhythm(1) 0;
+		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+
+		&[aria-hidden='true'] {
+			display: none;
+
+			@include bp-up(md) {
+				display: flex;
+			}
+		}
+
+		dt {
+			width: 100%;
+			flex-basis: 100%;
+			font-family: $font-family-headings;
+		}
+
+		dt,
+		dd {
+			margin: 0;
+			padding: 0;
+		}
+	}
+}
+
+@include organism(schedule) {
+	margin-bottom: rhythm(8);
+
+	@include e(item) {
+		background-color: $color-snow;
+		border-right: $border-radius;
+		padding: rhythm(1) rhythm(3) rhythm(1) rhythm(2);
+		border-left-width: 4px;
+		border-left-style: solid;
+		border-radius: $border-radius;
+		margin-bottom: rhythm(2);
+
+		&__full {
+			display: none;
+
+			&[aria-hidden='true'] {
+				display: none;
+			}
+
+			&[aria-hidden='false'] {
+				display: block;
+
+				& + [class*='short'] {
+					display: none;
+				}
+			}
+		}
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+
+		@include m(keynote) {
+			background-color: $color-cyberspace;
+			color: $color-snow;
+			border-color: $color-cyberspace;
+			padding: rhythm(2) rhythm(3) rhythm(2) rhythm(2);
+		}
+
+		@include m(granit) {
+			border-color: $color-granit;
+		}
+
+		@include m(lemon) {
+			border-color: $color-lemon;
+		}
+
+		@include m(jade) {
+			border-color: $color-jade;
+		}
+
+		@include m(ruby) {
+			border-color: $color-ruby;
+		}
+
+		@include m(peacock) {
+			border-color: $color-peacock;
+		}
+
+		@include m(ocean) {
+			border-color: $color-ocean;
+		}
+
+		@include m(transparent) {
+			background-color: transparent;
+			border-color: transparent;
+		}
+
+		@include e(image) {
+			border-radius: 50%;
+			width: rem(50px);
+			height: rem(50px);
+
+			@include m(medium) {
+				width: rem(75px);
+				height: rem(75px);
+			}
+
+			@include m(large) {
+				width: rem(125px);
+				height: rem(125px);
+				margin-bottom: rhythm(2);
+
+				@include bp-up(md) {
+					margin-bottom: 0;
+				}
+			}
+		}
+
+		@include e(close-btn) {
+			position: absolute;
+			top: 0;
+			right: 0;
+			z-index: z_index(middleGround);
+		}
+	}
+}

package/src/organisms/schedule/schedule-filter.js

@@ -0,0 +1,10 @@
+const el = document.querySelector('.js-filter');
+
+if (el) {
+	const observer = new IntersectionObserver(
+		([e]) => el.classList.toggle('is-sticky', e.intersectionRatio < 1),
+		{ threshold: [1] },
+	);
+
+	observer.observe(el);
+}