@internetstiftelsen/styleguide 2.24.11 → 2.24.12

package/dist/assets/js/youtube.js

@@ -28,14 +28,6 @@ function onPlayerStateChange(el, e) {
 	} else if (e.data === YT.PlayerState.UNSTARTED) {
 		el.getElementsByTagName('img')[0].style.zIndex = null;
 		el.getElementsByTagName('button')[0].style.display = null;
-
-		if (el.youtube) {
-			var playerEl = el.querySelector('[data-youtube-container]');
-
-			playerEl.parentNode.removeChild(playerEl);
-			el.youtube.destroy();
-			el.youtube = null;
-		}
 	}
 }
 

package/dist/atoms/textarea/rich-text.js

@@ -8,12 +8,40 @@ exports.init = init;
 
 var _core = require('@tiptap/core');
 
-var _starterKit = require('@tiptap/starter-kit');
+var _extensionDocument = require('@tiptap/extension-document');
 
-var _starterKit2 = _interopRequireDefault(_starterKit);
+var _extensionDocument2 = _interopRequireDefault(_extensionDocument);
+
+var _extensionParagraph = require('@tiptap/extension-paragraph');
+
+var _extensionParagraph2 = _interopRequireDefault(_extensionParagraph);
+
+var _extensionText = require('@tiptap/extension-text');
+
+var _extensionText2 = _interopRequireDefault(_extensionText);
+
+var _extensionBulletList = require('@tiptap/extension-bullet-list');
+
+var _extensionBulletList2 = _interopRequireDefault(_extensionBulletList);
+
+var _extensionListItem = require('@tiptap/extension-list-item');
+
+var _extensionListItem2 = _interopRequireDefault(_extensionListItem);
+
+var _extensionBold = require('@tiptap/extension-bold');
+
+var _extensionBold2 = _interopRequireDefault(_extensionBold);
+
+var _extensionItalic = require('@tiptap/extension-italic');
+
+var _extensionItalic2 = _interopRequireDefault(_extensionItalic);
 
 var _extensionLink = require('@tiptap/extension-link');
 
+var _extensionHistory = require('@tiptap/extension-history');
+
+var _extensionHistory2 = _interopRequireDefault(_extensionHistory);
+
 var _className = require('../../assets/js/className');
 
 var _className2 = _interopRequireDefault(_className);
@@ -146,11 +174,13 @@ function setupTextArea(el) {
 	var editorEl = document.createElement('div');
 	var editor = new _core.Editor({
 		element: editorEl,
-		extensions: [_starterKit2.default, _extensionLink.Link.configure({
+		extensions: [_extensionDocument2.default, _extensionParagraph2.default, _extensionText2.default, _extensionListItem2.default, _extensionBulletList2.default, _extensionBold2.default, _extensionItalic2.default, _extensionLink.Link.configure({
 			openOnClick: false,
 			HTMLAttributes: {
 				class: 'u-link'
 			}
+		}), _extensionHistory2.default.configure({
+			depth: 10
 		})],
 		content: el.value,
 		onTransaction: function onTransaction(props) {

package/dist/organisms/podcast/podcast.js

@@ -16,6 +16,7 @@ var stepBackward = document.querySelector('.js-step-backward');
 var playButton = document.querySelector('.js-play-button');
 var playIcon = document.querySelector('.js-play-icon');
 var pauseIcon = document.querySelector('.js-pause-icon');
+var closeButton = document.querySelector('.js-close-player');
 var rssURL = '';
 
 if (podCast) {
@@ -30,7 +31,6 @@ if (!namespaceElement) {
 
 function timeupdate() {
 	audio.addEventListener('timeupdate', function () {
-		var timeleft = timeleftElement;
 		var duration = parseInt(audio.duration, 10);
 		var currentTime = parseInt(audio.currentTime, 10);
 		var timeLeft = duration - currentTime;
@@ -44,7 +44,7 @@ function timeupdate() {
 
 		if (timeLeft > 0) {
 			timeleftElement.classList.remove('u-visibility-hidden');
-			timeleft.innerHTML = m + ':' + s;
+			timeleftElement.innerHTML = m + ':' + s;
 		}
 	}, false);
 }
@@ -52,7 +52,7 @@ function timeupdate() {
 var html = '';
 
 function getItems(el) {
-	html += '\n\t<li>\n\t\t<button\n\t\t\tclass="' + namespace + 'o-podcast-player__button display-flex js-play-episode"\n\t\t\tdata-src="' + el.querySelector('enclosure').getAttribute('url') + '"\n\t\t\tdata-title="' + el.querySelector('title').innerHTML + '"\n\t\t\tdata-description="' + el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '') + '"\n\t\t\tdata-image="' + el.querySelector('image').getAttribute('href') + '"\n\t\t\tdata-duration="' + el.querySelector('duration').innerHTML + '"\n\t\t\ttype="button"><svg class="icon ' + namespace + 'o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ' + el.querySelector('title').innerHTML + '</div></button>\n\t\t<div class="' + namespace + 'o-podcast-player__show-info">\n\t\t\t<div class="' + namespace + 'o-podcast-player__title">' + el.querySelector('title').innerHTML + '</div>\n\t\t\t<div class="' + namespace + 'o-podcast-player__description">' + el.querySelector('description').innerHTML + '</div>\n\t\t</div>\n\t</li>\n';
+	html += '\n\t<li>\n\t\t<button\n\t\t\tclass="' + namespace + 'o-podcast-player__button display-flex js-play-episode"\n\t\t\tdata-src="' + el.querySelector('enclosure').getAttribute('url') + '"\n\t\t\tdata-title="' + el.querySelector('title').innerHTML + '"\n\t\t\tdata-description="' + el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '') + '"\n\t\t\tdata-image="' + el.querySelector('image').getAttribute('href') + '"\n\t\t\tdata-duration="' + el.querySelector('duration').innerHTML + '"\n\t\t\ttype="button"><svg class="icon ' + namespace + 'o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ' + el.querySelector('title').innerHTML + '</div></button>\n\t\t<div class="' + namespace + 'o-podcast-player__show-info">\n\t\t\t<div class="' + namespace + 'o-podcast-player__title">' + el.querySelector('title').innerHTML + '</div>\n\t\t\t<div class="' + namespace + 'o-podcast-player__description js-description">' + el.querySelector('description').innerHTML + '</div>\n\t\t</div>\n\t</li>\n';
 
 	if (jsTrackList) {
 		jsTrackList.innerHTML = html;
@@ -107,6 +107,7 @@ document.body.addEventListener('click', function (e) {
 if (playButton) {
 	playButton.addEventListener('click', function () {
 		if (audio.paused) {
+			audio.muted = false;
 			audio.play();
 			pauseIcon.classList.remove('is-hidden');
 			playIcon.classList.add('is-hidden');
@@ -146,4 +147,85 @@ if (stepBackward) {
 		audio.currentTime -= 15;
 		timeupdate();
 	});
+}
+
+// Handle continous play when user leaves the page
+window.addEventListener('unload', function () {
+	var podcastData = {
+		podCastTitle: title.innerHTML,
+		episodeDescription: description.innerHTML,
+		episodeSrc: audio.src,
+		episodeCurrentTime: audio.currentTime,
+		episodeDuration: durationElement.innerHTML,
+		episodeImage: image.src
+	};
+	localStorage.setItem('episodeData', JSON.stringify(podcastData));
+
+	if (!audio.paused) {
+		var existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = true;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	} else {
+		var _existing = localStorage.getItem('episodeData');
+		_existing = _existing ? JSON.parse(_existing) : {};
+		_existing.podcastWasPlaying = false;
+		localStorage.setItem('episodeData', JSON.stringify(_existing));
+	}
+});
+
+if (localStorage.getItem('episodeData') && podCast) {
+	var arr = JSON.parse(localStorage.getItem('episodeData'));
+
+	if (arr.episodeCurrentTime) {
+		podCast.classList.remove(namespace + 'o-podcast-player--hidden');
+		audio.src = arr.episodeSrc;
+		image.src = arr.episodeImage;
+		title.innerHTML = arr.podCastTitle;
+		description.innerHTML = arr.episodeDescription;
+		durationElement.innerHTML = arr.episodeDuration;
+
+		if (arr.podcastWasPlaying === true) {
+			var playPromise = audio.play();
+
+			if (playPromise !== undefined) {
+				playPromise.then(function () {
+					// Continue playing audio on reload
+					audio.currentTime = arr.episodeCurrentTime;
+					timeupdate();
+					audio.play();
+					pauseIcon.classList.remove('is-hidden');
+					playIcon.classList.add('is-hidden');
+				}).catch(function () {
+					// User reloaded page manually. Cannot play audio
+					audio.addEventListener('loadedmetadata', function () {
+						audio.currentTime = arr.episodeCurrentTime;
+						timeupdate();
+					});
+
+					pauseIcon.classList.add('is-hidden');
+					playIcon.classList.remove('is-hidden');
+					audio.pause();
+				});
+			}
+		} else {
+			audio.addEventListener('loadedmetadata', function () {
+				audio.currentTime = arr.episodeCurrentTime;
+				timeupdate();
+			});
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			audio.pause();
+		}
+	}
+}
+
+if (closeButton) {
+	closeButton.addEventListener('click', function () {
+		audio.currentTime = 0;
+		timeupdate();
+		audio.pause();
+		localStorage.removeItem('episodeData');
+		podCast.classList.add(namespace + 'o-podcast-player--hidden');
+	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.24.11",
+	"version": "2.24.12",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -59,7 +59,7 @@
 		"css-loader": "^5.2.6",
 		"cssnano": "^5.0.6",
 		"eslint": "^7.28.0",
-		"imagemin-cli": "^6.0.0",
+		"imagemin-cli": "^7.0.0",
 		"onchange": "^6.1.0",
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",
@@ -69,8 +69,16 @@
 	},
 	"dependencies": {
 		"@tiptap/core": "^2.0.0-beta.131",
+		"@tiptap/extension-bold": "^2.0.0-beta.199",
+		"@tiptap/extension-bullet-list": "^2.0.0-beta.199",
+		"@tiptap/extension-document": "^2.0.0-beta.199",
+		"@tiptap/extension-dropcursor": "^2.0.0-beta.199",
+		"@tiptap/extension-history": "^2.0.0-beta.199",
+		"@tiptap/extension-italic": "^2.0.0-beta.199",
 		"@tiptap/extension-link": "^2.0.0-beta.25",
-		"@tiptap/starter-kit": "^2.0.0-beta.133",
+		"@tiptap/extension-list-item": "^2.0.0-beta.199",
+		"@tiptap/extension-paragraph": "^2.0.0-beta.199",
+		"@tiptap/extension-text": "^2.0.0-beta.199",
 		"a11y-toggle": "^2.1.0",
 		"focus-trap": "^6.7.3",
 		"glider-js": "^1.7.7",

package/src/atoms/button/_button.scss

@@ -455,6 +455,48 @@
 		}
 	}
 
+	@include m(sandstone) {
+		color: $color-sandstone;
+
+		&:hover,
+		&:focus {
+			color: $color-sandstone-light;
+		}
+
+		@include e(text) {
+			color: $color-cyberspace;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
+	@include m(sandstone-light) {
+		box-shadow: 0 0 0 1px inset $color-sandstone;
+		color: $color-sandstone-light;
+
+		&:hover {
+			color: $color-sandstone;
+		}
+		
+		&:focus {
+			color: $color-sandstone-light;
+		}
+
+		&:hover:focus {
+			color: $color-sandstone-light;
+		}
+
+		@include e(text) {
+			color: $color-cyberspace;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(dashed) {
 		border: 1px dashed;
 		background: transparent;

package/src/atoms/button/button.config.js

@@ -96,6 +96,13 @@ module.exports = {
 				text: 'Sandstone button'
 			}
 		},
+		{
+			name: 'Sandstone light',
+			context: {
+				modifiers: ['sandstone-light'],
+				text: 'Sandstone light button'
+			}
+		},
 		{
 			name: 'Transparent',
 			context: {

package/src/atoms/textarea/rich-text.js

@@ -1,6 +1,13 @@
 import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import Bold from '@tiptap/extension-bold';
+import Italic from '@tiptap/extension-italic';
 import { Link } from '@tiptap/extension-link';
+import History from '@tiptap/extension-history';
 import className from '../../assets/js/className';
 import { open } from '../../molecules/modal/modal';
 
@@ -141,13 +148,22 @@ export function setupTextArea(el, onChange = () => {}) {
 	const editor = new Editor({
 		element: editorEl,
 		extensions: [
-			StarterKit,
+			Document,
+			Paragraph,
+			Text,
+			ListItem,
+			BulletList,
+			Bold,
+			Italic,
 			Link.configure({
 				openOnClick: false,
 				HTMLAttributes: {
 					class: 'u-link',
 				},
 			}),
+			History.configure({
+				depth: 10,
+			}),
 		],
 		content: el.value,
 		onTransaction(props) {

package/src/organisms/podcast/_podcast-player.scss

@@ -60,6 +60,18 @@
 		margin-bottom: 0;
 		color: $color-ruby;
 		font-family: $font-family-headings;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: rem(200px);
+
+		@include bp-up(sm) {
+			max-width: rem(250px);
+		}
+
+		@include bp-up(lg) {
+			max-width: rem(500px);
+		}
 	}
 
 	@include e(description) {
@@ -74,7 +86,7 @@
 		}
 
 		@include bp-up(sm) {
-			max-width: rem(280px);
+			max-width: rem(250px);
 		}
 
 		@include bp-up(lg) {
@@ -82,16 +94,23 @@
 		}
 	}
 
+	@include e(playtime) {
+		@include bp-between(sm, md) {
+			display: none;
+		}
+	}
+
+	@include e(spacer) {
+		@include bp-between(sm, md) {
+			display: none;
+		}
+	}
+
 	@include e(controls) {
 		display: flex;
 		flex-grow: 1;
 		align-items: center;
 		justify-content: center;
-		transform: translateX(math.div($time-left-width, 2));
-
-		@include bp-up(sm) {
-			transform: translateX(0);
-		}
 	}
 
 	@include e(spacer) {
@@ -146,4 +165,15 @@
 			height: rhythm(1);
 		}
 	}
+
+	@include e(close) {
+		position: absolute;
+		right: rhythm(0.5);
+		top: 50%;
+		transform: translateY(-50%);
+
+		@include bp-up(xxl) {
+			right: rhythm(2);
+		}
+	}
 }

package/src/organisms/podcast/podcast.js

@@ -14,6 +14,7 @@ const stepBackward = document.querySelector('.js-step-backward');
 const playButton = document.querySelector('.js-play-button');
 const playIcon = document.querySelector('.js-play-icon');
 const pauseIcon = document.querySelector('.js-pause-icon');
+const closeButton = document.querySelector('.js-close-player');
 let rssURL = '';
 
 if (podCast) {
@@ -28,7 +29,6 @@ if (!namespaceElement) {
 
 function timeupdate() {
 	audio.addEventListener('timeupdate', () => {
-		const timeleft = timeleftElement;
 		const duration = parseInt(audio.duration, 10);
 		const currentTime = parseInt(audio.currentTime, 10);
 		const timeLeft = duration - currentTime;
@@ -43,7 +43,7 @@ function timeupdate() {
 
 		if (timeLeft > 0) {
 			timeleftElement.classList.remove('u-visibility-hidden');
-			timeleft.innerHTML = `${m}:${s}`;
+			timeleftElement.innerHTML = `${m}:${s}`;
 		}
 	}, false);
 }
@@ -63,7 +63,7 @@ function getItems(el) {
 			type="button"><svg class="icon ${namespace}o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ${el.querySelector('title').innerHTML}</div></button>
 		<div class="${namespace}o-podcast-player__show-info">
 			<div class="${namespace}o-podcast-player__title">${el.querySelector('title').innerHTML}</div>
-			<div class="${namespace}o-podcast-player__description">${el.querySelector('description').innerHTML}</div>
+			<div class="${namespace}o-podcast-player__description js-description">${el.querySelector('description').innerHTML}</div>
 		</div>
 	</li>
 `;
@@ -120,6 +120,7 @@ document.body.addEventListener('click', (e) => {
 if (playButton) {
 	playButton.addEventListener('click', () => {
 		if (audio.paused) {
+			audio.muted = false;
 			audio.play();
 			pauseIcon.classList.remove('is-hidden');
 			playIcon.classList.add('is-hidden');
@@ -160,3 +161,84 @@ if (stepBackward) {
 		timeupdate();
 	});
 }
+
+// Handle continous play when user leaves the page
+window.addEventListener('unload', () => {
+	const podcastData = {
+		podCastTitle: title.innerHTML,
+		episodeDescription: description.innerHTML,
+		episodeSrc: audio.src,
+		episodeCurrentTime: audio.currentTime,
+		episodeDuration: durationElement.innerHTML,
+		episodeImage: image.src,
+	};
+	localStorage.setItem('episodeData', JSON.stringify(podcastData));
+
+	if (!audio.paused) {
+		let existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = true;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	} else {
+		let existing = localStorage.getItem('episodeData');
+		existing = existing ? JSON.parse(existing) : {};
+		existing.podcastWasPlaying = false;
+		localStorage.setItem('episodeData', JSON.stringify(existing));
+	}
+});
+
+if (localStorage.getItem('episodeData') && podCast) {
+	const arr = JSON.parse(localStorage.getItem('episodeData'));
+
+	if (arr.episodeCurrentTime) {
+		podCast.classList.remove(`${namespace}o-podcast-player--hidden`);
+		audio.src = arr.episodeSrc;
+		image.src = arr.episodeImage;
+		title.innerHTML = arr.podCastTitle;
+		description.innerHTML = arr.episodeDescription;
+		durationElement.innerHTML = arr.episodeDuration;
+
+		if (arr.podcastWasPlaying === true) {
+			const playPromise = audio.play();
+
+			if (playPromise !== undefined) {
+				playPromise.then(() => {
+					// Continue playing audio on reload
+					audio.currentTime = arr.episodeCurrentTime;
+					timeupdate();
+					audio.play();
+					pauseIcon.classList.remove('is-hidden');
+					playIcon.classList.add('is-hidden');
+				}).catch(() => {
+					// User reloaded page manually. Cannot play audio
+					audio.addEventListener('loadedmetadata', () => {
+						audio.currentTime = arr.episodeCurrentTime;
+						timeupdate();
+					});
+
+					pauseIcon.classList.add('is-hidden');
+					playIcon.classList.remove('is-hidden');
+					audio.pause();
+				});
+			}
+		} else {
+			audio.addEventListener('loadedmetadata', () => {
+				audio.currentTime = arr.episodeCurrentTime;
+				timeupdate();
+			});
+			pauseIcon.classList.add('is-hidden');
+			playIcon.classList.remove('is-hidden');
+			audio.pause();
+		}
+	}
+}
+
+if (closeButton) {
+	closeButton.addEventListener('click', () => {
+		audio.currentTime = 0;
+		timeupdate();
+		audio.pause();
+		localStorage.removeItem('episodeData');
+		podCast.classList.add(`${namespace}o-podcast-player--hidden`);
+	});
+}

package/src/pages/magazine/magazine.config.js

@@ -5,7 +5,7 @@ module.exports = {
 		alt: 'Hands typing on laptop',
 		img_url: '/assets/images/ALX_0876.jpg',
 		title: 'Gymnasieskolor med hög bandbredd har bättre skolresultat',
-		url: 'http://www.google.se',
+		url: '/components/preview/magazine',
 		exerpt: 'Eget nulla <strong>facilisi etiam</strong> dignissim diam quis enim lobortis scelerisque. Faucibus a pellentesque sit amet porttitor.',
 		is_padded: true,
 		is_wide: false,