@internetstiftelsen/styleguide 2.26.0 → 2.26.2-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.26.0",
+	"version": "2.26.2-beta.0.1",
 	"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/atoms/icon/sprite.svg

@@ -349,5 +349,10 @@
 		<symbol id="icon-diamond" viewbox="0 0 32 32">
 			<path d="M27 4H5l-4 8.7 14 16.1 1 1.2 1-1.2 14-16.1L27 4zm1.2 7.5h-5l3-4.4 2 4.4zm-3.8-5.4-3.1 4.6-3.1-4.6h6.2zm-5 5.4h-6.7l3.4-5 3.3 5zm-5.6-5.4-3.1 4.6-3.1-4.6h6.2zm-8 1 3 4.4h-5l2-4.4zm-1.3 6.5H10l3.3 10.2-8.8-10.2zm11.5 12-3.9-12.1h7.8L16 25.6zm6-12H27.6l-8.8 10.2L22 13.6z"/>
 		</symbol>
+
+		<symbol id="icon-world" viewbox="0 0 32 32">
+			<path d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5 16 .5zM7.1 7.2c.8-.8 1.6-1.4 2.5-2l-.8 2.5h2.4l2.4-2.4V4.1h-1.2l-1.2 1.2v-.9c1.5-.6 3.1-.9 4.8-.9 2.4 0 4.7.7 6.6 1.9v.1L24 6.9l-1.3 1.3-1.9-1.8h-2.4l-2.4 3 1.2 2.6 1.2-.8V10h1.2l1.3 1.1-1.3 1.3-4.8 2.4h-1.2v2.4h1.2l2.4-1.2 1.2 1.2h2.4V16l1-1.4 2.6-1V16H22v1.2h2.4l2.4 3.6 1.2-1.2v-1.2h-1.2v-1.2H28l.5-.1c-.2 2.2-1 4.3-2.2 6.1h-.8l-2.9-4.8-3 1.2-3.6-1.2-3.6 1.2-1.2 3.6 1.2 2.4h2.4l1.2-1.2 1.2 1.2v2.9c-.4 0-.8.1-1.2.1C9.1 28.5 3.5 22.9 3.5 16c0-1.2.2-2.4.5-3.6h1.2V9.6c.4-.7.9-1.4 1.4-2l.5-.4z"/>
+			<path d="M13.6 10h1.2v2.4h-1.2z"/>
+		</symbol>
 	</defs>
 </svg>

package/src/atoms/icon/world.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon-world" width="32" height="32" viewbox="0 0 32 32">
+  <path d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5 16 .5zM7.1 7.2c.8-.8 1.6-1.4 2.5-2l-.8 2.5h2.4l2.4-2.4V4.1h-1.2l-1.2 1.2v-.9c1.5-.6 3.1-.9 4.8-.9 2.4 0 4.7.7 6.6 1.9v.1L24 6.9l-1.3 1.3-1.9-1.8h-2.4l-2.4 3 1.2 2.6 1.2-.8V10h1.2l1.3 1.1-1.3 1.3-4.8 2.4h-1.2v2.4h1.2l2.4-1.2 1.2 1.2h2.4V16l1-1.4 2.6-1V16H22v1.2h2.4l2.4 3.6 1.2-1.2v-1.2h-1.2v-1.2H28l.5-.1c-.2 2.2-1 4.3-2.2 6.1h-.8l-2.9-4.8-3 1.2-3.6-1.2-3.6 1.2-1.2 3.6 1.2 2.4h2.4l1.2-1.2 1.2 1.2v2.9c-.4 0-.8.1-1.2.1C9.1 28.5 3.5 22.9 3.5 16c0-1.2.2-2.4.5-3.6h1.2V9.6c.4-.7.9-1.4 1.4-2l.5-.4z"/>
+  <path d="M13.6 10h1.2v2.4h-1.2z"/>
+</svg>

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/configurations/icons.json

@@ -1 +1 @@
-[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"}]
+[{"id":"search","name":"Search"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"}]

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);
+}