@internetstiftelsen/styleguide 2.25.1-beta.0.666 → 2.25.2-beta.0.1

package/dist/molecules/form/Form.js

@@ -141,9 +141,9 @@ var Form = function () {
 		};
 
 		this.captchaCallback = function () {
-			if (typeof window.grecaptcha !== 'undefined' && 'CAPTCHA_KEY' in process.env) {
+			if (typeof window.grecaptcha !== 'undefined' && process.env.RECAPTCHA_KEY !== undefined) {
 				/* global grecaptcha */
-				grecaptcha.execute(process.env.CAPTCHA_KEY, { action: _this.recaptcha }).then(function (token) {
+				grecaptcha.execute(process.env.RECAPTCHA_KEY, { action: _this.recaptcha }).then(function (token) {
 					_this.token = token;
 				});
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.25.1-beta.0.666",
+	"version": "2.25.2-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/app.scss

@@ -67,7 +67,6 @@ $namespace: '';
 @import 'molecules/glider/glider-course';
 @import 'molecules/glider/glider-hero';
 @import 'molecules/continue-video-guide/continue-video-guide';
-@import 'molecules/overview-navigation/overview-navigation';
 
 // Organisms
 @import 'organisms/header/header';

package/src/atoms/button/_button.scss

@@ -317,24 +317,6 @@
 		}
 	}
 
-	@include m(ocean-light) {
-		box-shadow: 0 0 0 1px inset $color-ocean;
-		color: $color-ocean-light;
-
-		&:hover,
-		&:focus {
-			color: $color-ocean;
-		}
-
-		@include e(text) {
-			color: $color-cyberspace;
-		}
-
-		@include e(icon) {
-			fill: $color-cyberspace;
-		}
-	}
-
 	@include m(jade) {
 		color: $color-jade;
 

package/src/atoms/height-limiter/_height-limiter.scss

@@ -20,16 +20,6 @@
 		}
 	}
 
-	@include m(white) {
-		@include e(inner) {
-			&.is-limited {
-				&::after {
-					background-image: linear-gradient(to bottom, rgba($color-snow, 0) 0%, rgba($color-snow, 1) 100%);
-				}
-			}
-		}
-	}
-
 	@include e(btn) {
 		display: flex;
 		position: relative;

package/src/components.js

@@ -24,8 +24,6 @@ import './molecules/glider/glider-course';
 import './molecules/glider/glider-hero';
 import './molecules/context-menu/context-menu';
 import './molecules/alert/alert';
-import './molecules/modal/modal-graph';
 import './molecules/continue-video-guide/continue-video-guide';
 import './organisms/video-guide/video-guide';
 import './organisms/timeline/timeline';
-import './molecules/overview-navigation/overview-navigation';

package/src/configurations/_extends.scss

@@ -165,13 +165,3 @@
 		fill: $color-cyberspace;
 	}
 }
-
-%is-fixed,
-.is-fixed {
-	position: fixed !important;
-}
-
-%prevent-scroll,
-.prevent-scroll {
-	overflow: hidden !important;
-}

package/src/configurations/_wordpress.scss

@@ -348,44 +348,3 @@ div.aligncenter {
 		margin-top: -#{rhythm(3)};
 	}
 }
-
-.wp-block-separator {
-	display: flex;
-	border-color: currentColor;
-
-	&[class*=align] {
-		height: 22px;
-		background-color: currentColor;
-		--mask:
-			radial-gradient(9.18px at 50% calc(100% + 3.15px),#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) calc(50% - 14px) calc(50% - 5px + .5px)/28px 10px repeat-x,
-			radial-gradient(9.18px at 50% -3.15px,#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) 50% calc(50% + 5px)/28px 10px repeat-x;
-		-webkit-mask: var(--mask);
-		mask: var(--mask);
-	}
-
-	&.aligncenter {
-		width: 50vw;
-		max-width: rem(469px);
-		margin-top: rhythm(2);
-		margin-bottom: rhythm(2);
-	}
-
-	&.alignleft {
-		margin-left: $indent * 2;
-		float: none;
-		max-width: rem(90px);
-		margin-top: rhythm(2);
-		margin-bottom: rhythm(2);
-	}
-
-	&.alignwide {
-		max-width: none;
-		width: 100%;
-		max-width: 1360px;
-	}
-
-	&.alignfull {
-		max-width: none;
-		width: 100vw;
-	}
-}

package/src/configurations/typography/_typography.scss

@@ -323,9 +323,6 @@ blockquote {
 
 	@include bp-up(sm) {
 		padding-right: rhythm(3);
-		max-width: rem(613px);
-		margin-left: auto;
-		margin-right: auto;
 	}
 
 	@include bp-up(md) {
@@ -334,13 +331,11 @@ blockquote {
 
 		p {
 			@include plumber(
-				$font-size: 2.7,
+				$font-size: 3,
 				$line-height: 4,
 				$leading-bottom: 0,
 				$leading-top: 1
 			);
-
-			line-height: 32px;
 		}
 
 		.meta {
@@ -348,11 +343,6 @@ blockquote {
 			line-height: rhythm(3.5);
 		}
 	}
-
-	@include bp-up(lg) {
-		margin-left: initial;
-		margin-right: initial;
-	}
 }
 
 b,

package/src/molecules/card/_card.scss

@@ -144,6 +144,12 @@
 					margin-top: 0;
 				}
 			}
+
+			&.u-p-0 {
+				@include e(content) {
+					padding: 0;
+				}
+			}
 		}
 	}
 

package/src/molecules/form/Form.js

@@ -282,9 +282,9 @@ export default class Form {
 	};
 
 	captchaCallback = () => {
-		if (typeof window.grecaptcha !== 'undefined' && 'CAPTCHA_KEY' in process.env) {
+		if (typeof window.grecaptcha !== 'undefined' && process.env.RECAPTCHA_KEY !== undefined) {
 			/* global grecaptcha */
-			grecaptcha.execute(process.env.CAPTCHA_KEY, { action: this.recaptcha })
+			grecaptcha.execute(process.env.RECAPTCHA_KEY, { action: this.recaptcha })
 				.then((token) => {
 					this.token = token;
 				});

package/src/molecules/modal/_modal.scss

@@ -64,19 +64,6 @@
 		@include m(no-max-width) {
 			max-width: none;
 		}
-
-		@include m(dynamic-width) {
-			width: 100%;
-			max-width: calc(100vw);
-			min-width: 0;
-			max-height: calc(100% - #{rhythm(2)});
-			padding: 0;
-			overflow: auto;
-
-			svg {
-				pointer-events: none;
-			}
-		}
 	}
 
 	@include bp-up(md) {
@@ -164,72 +151,6 @@
 		}
 	}
 
-	@include e(graph-button) {
-		padding: 0;
-		position: relative;
-
-		&:hover,
-		&:focus {
-			@extend %input-focus;
-		}
-
-		&::after {
-			content: attr(data-zoom);
-			color: $color-snow;
-			padding: rhythm(1) rhythm(2) rhythm(1) rhythm(4);
-			display: block;
-			position: absolute;
-			top: 0;
-			left: 0;
-			border-top-left-radius: $border-radius;
-			border-bottom-right-radius: $border-radius;
-			width: auto;
-			line-height: 1;
-			height: $icon-size-large * 1.4;
-			background-color: rgba($color-cyberspace, 0.7);
-			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-search' viewbox='0 0 32 32' width='32' height='32' fill='%23ffffff'%3E%3Cpath d='M24,21.8l8,8L29.9,32l-8-8c-5.9,4.6-14.3,3.6-19-2.2S-0.7,7.6,5.1,2.9S19.3-0.7,24,5.1C27.9,10,27.9,16.9,24,21.8L24,21.8z M13.4,23.9c5.8,0,10.5-4.7,10.5-10.5S19.2,3,13.4,3S3,7.7,3,13.4S7.7,23.9,13.4,23.9z'/%3E%3C/svg%3E");
-			background-position: rhythm(1) center;
-			background-size: $icon-size-medium $icon-size-medium;
-			background-repeat: no-repeat;
-
-		}
-	}
-
-	@include e(button-fixed) {
-		position: fixed !important;
-		top: rhythm(2) !important;
-		right: rhythm(3) !important;
-		z-index: z_index(foreground) !important;
-	}
-
-	@include e(overlay-button) {
-		position: fixed !important;
-		color: $color-snow;
-		display: flex;
-		align-items: center;
-		text-align: center;
-		justify-content: center;
-		padding: 0;
-		z-index: z_index(foregroundMinus) !important;
-		top: 0 !important;
-		right: 0 !important;
-		bottom: 0 !important;
-		left: 0 !important;
-		background: rgba(0, 0, 0, 0.5);
-		text-shadow: 0 0 rhythm(0.5) $color-cyberspace;
-		font-family: $font-family-headings;
-		border: 0;
-		width: 100vw;
-
-		&.is-hidden {
-			display: none;
-		}
-
-		@include bp-up(xxl) {
-			display: none;
-		}
-	}
-
 	@include b(field-group) {
 		margin-bottom: rhythm(1);
 	}

package/src/molecules/modal/modal.js

@@ -332,7 +332,6 @@ function delegate(e) {
 
 		const id = openModal.getAttribute('data-modal-open');
 		const modalEl = document.getElementById(id);
-		document.querySelector('body').classList.add('prevent-scroll');
 
 		if (modalEl) {
 			open(modalEl, {
@@ -355,7 +354,6 @@ function delegate(e) {
 		e.stopPropagation();
 
 		const id = closeModal.getAttribute('data-modal-close') || (active && active.el.id);
-		document.querySelector('body').classList.remove('prevent-scroll');
 
 		if (active && active.el.id === id) {
 			close();

package/src/organisms/sections/_sections.scss

@@ -80,7 +80,7 @@ $spacing: rhythm(6);
 
 	@include e(content) {
 		position: relative;
-		//z-index: z_index(middleground);
+		z-index: z_index(middleground);
 
 		@include m(peacock) {
 			::selection {

package/src/utilities/_margin.scss

@@ -41,7 +41,7 @@ $class-m-y: u-m-y !default;
 		margin-left: rhythm($i) !important;
 	}
 
-	// Margin y (top and bottom)
+	// Margin x (left and right)
 	.#{$class-m-y}-#{$i} {
 		margin-top: rhythm($i) !important;
 		margin-bottom: rhythm($i) !important;

package/src/atoms/hr/hr.config.js

@@ -1,42 +0,0 @@
-module.exports = {
-	status: 'ready',
-
-	context: {
-		color: null,
-		modifier: null,
-	},
-	variants: [
-		{
-			name: 'alignfull',
-			context: {
-				class: 'alignfull',
-				color: 'color-cyberspace',
-				modifier: 'alignfull',
-			}
-		},
-		{
-			name: 'alignwide',
-			context: {
-				class: 'alignwide',
-				color: 'color-cyberspace',
-				modifier: 'alignwide',
-			}
-		},
-		{
-			name: 'aligncenter',
-			context: {
-				class: null,
-				color: 'color-cyberspace',
-				modifier: 'aligncenter',
-			}
-		},
-		{
-			name: 'alignleft',
-			context: {
-				class: null,
-				color: 'has-cyberspace-color',
-				modifier: 'alignleft',
-			}
-		}
-	]
-}

package/src/atoms/hr/readme.md

@@ -1,2 +0,0 @@
-# Note! 
-Component is using block classes from wordpress instead of Atomic Design methodology

package/src/molecules/modal/modal-graph.js

@@ -1,40 +0,0 @@
-/**
- * Close overlay on graph modal
- */
-
-const graphModals = document.querySelectorAll('.js-modal-graph');
-const graphModalButtons = document.querySelectorAll('.js-modal-graph-button');
-
-const addMultipleListeners = (el, types, listener, options, useCapture) => {
-	types.forEach((type) => el.addEventListener(type, listener, options, useCapture));
-};
-
-function closeOverlay(graphModalButton) {
-	// Close overlay button on 'click' on itself
-	graphModalButton.addEventListener('click', () => {
-		graphModalButton.classList.add('is-hidden');
-		graphModalButton.blur();
-	});
-
-	[].forEach.call(graphModals, (graphModal) => {
-		const closeButton = graphModal.querySelector('.js-toggle-modal');
-
-		closeButton.addEventListener('click', () => {
-			graphModalButton.classList.remove('is-hidden');
-		});
-
-		// Close overlay button on 'wheel', 'scroll', 'touchstart' on modal container
-		addMultipleListeners(
-			graphModal,
-			['wheel', 'scroll', 'touchstart'],
-			() => {
-				graphModalButton.classList.add('is-hidden');
-				console.log('fire!');
-			},
-		);
-	});
-}
-
-if (graphModalButtons && graphModals) {
-	[].forEach.call(graphModalButtons, closeOverlay);
-}

package/src/molecules/overview-navigation/_overview-navigation.scss

@@ -1,139 +0,0 @@
-@charset "UTF-8";
-
-@include molecule(overview-navigation) {
-	overflow: visible;
-	min-width: 300px;
-	max-width: 453px;
-	display: flex;
-	flex-direction: column;
-	border-radius: $border-radius;
-	transition: left 0.25s ease-out, top 0.5s ease-out;
-	box-shadow: 0 0 0 1px $color-ash;
-
-	@include e(list) {
-		overflow: hidden;
-		border-radius: $border-radius;
-		background-color: $color-snow;
-		margin: 0;
-		padding: 0;
-		width: 100%;
-		max-height: calc(100vh - rem(130px));
-		overflow-y: auto;
-	}
-
-	@include e(title) {
-		margin-bottom: rhythm(2);
-	}
-	@include e(item) {
-		display: flex;
-		align-items: center;
-		margin-top: rhythm(1);
-		margin-bottom: rhythm(1);
-		margin-left: 0;
-
-		&:last-child {
-			margin-bottom: rhythm(3);
-		}
-	}
-
-	@include e(item__link) {
-		padding: 0 rhythm(2);
-		border: none;
-		border-radius: 0;
-		background-color: initial;
-		color: $color-cyberspace;
-		display: flex;
-		align-items: center;
-		text-decoration: none;
-
-		&:hover,
-		&:focus {
-			border: none !important;
-			border-radius: 0 !important;
-			background-color: inherit !important;
-			text-decoration: underline;
-		}
-
-		> svg {
-			height: $icon-size-small;
-			width: $icon-size-small;
-			margin-right: rhythm(1);
-		}
-	}
-
-	@include e(button) {
-		display: none;
-		padding: 0;
-		border: 0;
-		transition: left 0.25s ease-out, top 0.25s ease-out;
-		background-color: transparent;
-		width: rem(60px);
-		height: rem(60px);
-		flex-shrink: 0;
-		flex-grow: 0;
-		align-items: center;
-		justify-content: center;
-		border-radius: 50%;
-		background-color: $color-snow;
-		box-shadow: inset 0 0 0 4px currentColor, 0 0 0 1px $color-snow, 0 0 6px rgba($color-cyberspace, 30%);
-
-		&:hover,
-		&:focus {
-			transform: scale(1.1);
-		}
-
-
-		> svg {
-			width: $icon-size-large;
-			height: $icon-size-large;
-			flex-shrink: 0;
-			opacity: 1;
-		}
-
-		&::after {
-			content: attr(data-title);
-			position: absolute;
-			bottom: -#{rhythm(3)};
-			right: 0;
-			text-transform: uppercase;
-			text-align: center;
-			font-size: $size-small;
-			font-family: $font-family-mono;
-			text-shadow: 0 1px 0 $color-snow;
-			color: $color-cyberspace;
-			background-color: $color-snow;
-			border-radius: $border-radius;
-			padding-left: rhythm(0.5);
-			padding-right: rhythm(0.5);
-		}
-
-		&.is-fixed {
-			display: flex;
-			top: calc(100vh -#{rhythm(11)}) !important;
-			left: calc(100% -#{rhythm(8)}) !important;
-		}
-	}
-
-	&[aria-hidden="true"] {
-		box-shadow: none;
-
-		> dl {
-			display: none;
-		}
-	}
-
-	&[aria-hidden="false"] {
-		> dl {
-			display: block;
-		}
-	}
-
-	&.is-minimized {
-		position: fixed;
-		right: rhythm(2);
-		bottom: rhythm(13);
-		z-index: 3;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-}

package/src/molecules/overview-navigation/overview-navigation.js

@@ -1,68 +0,0 @@
-const overviewNavigations = document.querySelectorAll('.js-overview-navigation');
-const overviewNavigationButton = document.querySelector('.js-overview-navigation-button');
-
-function overViewNav(overviewNavigation) {
-	overviewNavigationButton.classList.remove('is-fixed');
-	overviewNavigation.classList.remove('is-minimized');
-	overviewNavigationButton.setAttribute('aria-expanded', 'true');
-
-	// Timeout until a11y-toggle is initiated
-	setTimeout(() => {
-		overviewNavigation.setAttribute('aria-hidden', 'false');
-	}, '50');
-
-	const viewportOffset = overviewNavigation.getBoundingClientRect();
-	const topBtnPos = overviewNavigationButton.offsetTop;
-	const leftPos = viewportOffset.left;
-	const topNavPos = viewportOffset.top;
-
-	window.addEventListener('scroll', () => {
-		if (window.innerWidth > 960) {
-			if (overviewNavigation.getBoundingClientRect().top < 0) { // Element is at top of screen
-				overviewNavigation.setAttribute('aria-hidden', 'true');
-				overviewNavigation.classList.add('is-minimized');
-
-				overviewNavigationButton.style.left = `${leftPos}px`;
-				overviewNavigationButton.style.top = `${topBtnPos}px`;
-				overviewNavigationButton.style.display = 'flex';
-				overviewNavigationButton.style.position = 'fixed';
-
-				// Timeout to let styles above apply first
-				setTimeout(() => {
-					overviewNavigationButton.classList.add('is-fixed');
-				}, '10');
-			} else if (window.scrollY === 0) { // User has scrolled back to top
-				overviewNavigationButton.classList.remove('is-fixed');
-				overviewNavigationButton.style.left = `${leftPos}px`;
-				overviewNavigationButton.style.top = `${topNavPos}px`;
-
-				// Timeout same length as CSS-transition
-				setTimeout(() => {
-					overviewNavigationButton.style.display = 'none';
-					overviewNavigation.setAttribute('aria-hidden', 'false');
-					overviewNavigation.classList.remove('is-minimized');
-				}, '250');
-			}
-		}
-	});
-
-	window.addEventListener('resize', () => {
-		if (window.innerWidth < 960) {
-			overviewNavigationButton.classList.add('is-fixed');
-			overviewNavigation.classList.add('is-minimized');
-			overviewNavigationButton.setAttribute('aria-expanded', 'false');
-			overviewNavigation.setAttribute('aria-hidden', 'true');
-		} else {
-			overviewNavigationButton.classList.remove('is-fixed');
-			overviewNavigation.classList.remove('is-minimized');
-			overviewNavigationButton.setAttribute('aria-expanded', 'true');
-			overviewNavigation.setAttribute('aria-hidden', 'false');
-		}
-	});
-}
-
-if (overviewNavigations) {
-	if (window.innerWidth > 960) {
-		[].forEach.call(overviewNavigations, overViewNav);
-	}
-}