@internetstiftelsen/styleguide 2.22.0 → 2.22.3-beta.0.1

package/src/molecules/icon-overlay/icon-overlay.hbs

@@ -1,4 +0,0 @@
-<div class="m-icon-overlay{{#if additional_classes}} {{additional_classes}}{{/if}}" {{#if youtube}}data-youtube="{{youtube}}"{{/if}}>
-	{{#if img_url}}<img src="{{img_url}}" alt="{{alt}}" />{{/if}}
-	<button type="button" class="m-icon-overlay__button" aria-label="play">{{> @icon id=overlay_icon additional_classes="m-icon-overlay__icon"}}</button>
-</div>

package/src/molecules/info-box/info-box.hbs

@@ -1,8 +0,0 @@
-<style media="screen">
-:root {
-	--m-info-box-border-color: #c27fec;
-}
-</style>
-<div class="m-info-box{{#if modifiers}} {{getmodifiers modifiers "m-info-box"}}{{/if}}{{#if additional_classes}} {{additional_classes}}{{/if}}">
-	{{{text}}}
-</div>

package/src/molecules/modal/modal.hbs

@@ -1,101 +0,0 @@
-<style media="screen">
-:root {
-	--m-modal-button-primary-color: {{button_primary_color}};
-	--m-modal-button-primary-hover-color: {{button_primary_hover_color}};
-	--m-modal-button-primary-border-color: {{button_primary_border_color}};
-	--m-modal-button-primary-text-color: {{button_primary_text_color}};
-	--m-modal-button-secondary-color: {{button_secondary_color}};
-	--m-modal-button-secondary-hover-color: {{button_secondary_hover_color}};
-	--m-modal-button-secondary-border-color: {{button_secondary_border_color}};
-	--m-modal-button-secondary-text-color: {{button_secondary_text_color}};
-}
-</style>
-<div id="modal-container" class="m-modal m-modal--has-overlay" {{#if is_hidden}}aria-hidden="true"{{/if}}>
-	<div class="m-modal__container {{#if is_form}}m-modal__container--form{{/if}}">
-		<button type="button" class="a-button a-button--standalone-icon a-button--transparent js-toggle-modal" aria-expanded="false" data-a11y-toggle="{{aria_controls}}" aria-controls="{{aria_controls}}" data-modal-close>
-			<span class="a-button__text u-visuallyhidden">{{button_text}}</span>
-			<svg class="icon a-button__icon">
-				<use xlink:href="#icon-close"></use>
-			</svg>
-		</button>
-		<div class="m-modal__content">
-			{{#unless is_form}}
-				<h4>{{title}}</h4>
-				<p>{{{text}}}</p>
-			{{/unless}}
-			{{#if is_form}}
-			 	<h1>{{title}}</h1>
-			{{/if}}
-		</div>
-		{{#if is_form}}
-		<form class="m-modal__form">
-			<div class="field-group">
-			<div class="m-modal__content--form-email">
-				<label for="label">E-post</label>
-					<input type="text" id="name" placeholder="hej@mail.com" autocomplete="off" class="a-input ">
-			</div>
-			<div class="m-modal__input-wrapper">
-				<div class="m-modal__content--form-name">
-					<label for="label">Förnamn</label>
-					<input type="text" id="name" placeholder="Anna" autocomplete="off" class="a-input ">
-				</div>
-				<div class="m-modal__content--form-lname">
-					<label for="label">Efternamn</label>
-					<input type="text" id="name" placeholder="Johansson" autocomplete="off" class="a-input ">
-				</div>
-			</div>
-			<div class="m-modal__content--form-username">
-				<label for="label">Användarnamn</label>
-				<input type="text" id="name" placeholder="tex kattsmurfen89" autocomplete="off" class="a-input ">
-			</div>
-			<div class="modal__content--form-password u-m-b-default">
-			 <label for="password">Lösenord</label>
-				<input type="password" id="password" placeholder="" autocomplete="off" class="a-input has-icon ">
-				<button class="input-icon js-toggle-input-type">
-					<svg class="icon">
-						<use xlink:href="#icon-read"></use>
-					</svg>
-					<span class="u-visuallyhidden">Visa lösenordet</span>
-				</button>
-				</div>
-
-				<fieldset>
-					<legend class="label-legend">{{check_text}}</legend>
-					<div class="checkbox checkbox--inline row no-gutters u-m-b-2">
-						<div class="grid-auto">
-							<input type="checkbox" id="radiobutton-0" name="Checkbox default" value="0" class="a-checkbox u-visuallyhidden">
-							<label for="radiobutton-0"><span>Stockholm</span></label>
-						</div>
-						<div class="grid-auto">
-							<input type="checkbox" id="radiobutton-1" name="Checkbox default" value="0" class="a-checkbox u-visuallyhidden">
-							<label for="radiobutton-1"><span>Malmö</span></label>
-						</div>
-					</div>
-				</fieldset>
-
-				<div class="checkbox">
-					<input type="checkbox" id="radiobutton-2" name="Checkbox default" value="0" class="a-checkbox u-visuallyhidden">
-					<label for="radiobutton-2"><span>{{{terms_text}}}</span></label>
-				</div>
-			</div>
-			</form>
-		{{/if}}
-		<div class="m-modal__buttons u-m-t-2">
-			<button type="button" class="a-button m-modal__button-primary js-toggle-modal" aria-expanded="false" data-a11y-toggle="{{aria_controls}}" aria-controls="{{aria_controls}}" data-modal-close>
-				<span class="a-button__text">{{button_text}}</span>
-			</button>
-		</div>
-		{{#if is_form}}
-		<div class="m-modal__content--form-text u-m-t-2">{{{bottom_text}}}</div>
-		{{/if}}
-	</div>
-</div>
-{{#if is_hidden}}
-	<button type="button" class="a-button a-button--lemon" data-open-demo-modal>
-		<span class="a-button__text">{{btn_text}}</span>
-	</button>
-
-	<button type="button" class="a-button a-button--lemon" data-modal-open="modal-container">
-		<span class="a-button__text">Open predefined modal</span>
-	</button>
-{{/if}}

package/src/molecules/natural-language-form/natural-language-form.hbs

@@ -1,19 +0,0 @@
-<{{textElement}}{{#if elementClass}} class="{{elementClass}}"{{/if}}>
-	Event
-	<div class="m-natural-language-form {{#if modifier}} m-natural-language-form--{{modifier}}{{/if}}">
-	{{#if select}}
-		<label for="naturalSelect" class="m-natural-language-form__label">i Stockholm</label>
-		<select id="naturalSelect" class="m-natural-language-form__select js-natural-language-select">
-			<option value="på goto10">på Goto 10</option>
-			<option value="stockholm" data-color="peacock" selected>i Stockholm</option>
-			<option value="malmo" data-color="jade">i Malmö</option>
-			<option value="streaming" data-color="ocean">som streamas</option>
-		</select>
-	{{/if}}
-	{{#unless select}}
-		<input type="text" value="i Stockholm" class="m-natural-language-form__input js-natural-language-input" data-color="peacock">
-		<span class="m-natural-language-form__temp-text js-temp-text">i Stockholm</span>
-	{{/unless}}
-	</div>
-	{{#unless modifier}} lorem ipsum{{/unless}}
-</{{textElement}}>

package/src/molecules/share/share.hbs

@@ -1,28 +0,0 @@
-<div class="m-share{{#if modifiers}} {{getmodifiers modifiers "m-share"}}{{/if}}">
-	<button type="button" class="a-button a-button--transparent a-button--icon m-share__button" data-a11y-toggle="share-platforms">
-		<span class="a-button__text">Dela</span>
-		<svg class="icon a-button__icon">
-			<use xlink:href="#icon-share"></use>
-		</svg>
-	</button>
-	<div class="m-share__platforms" aria-hidden="true" id="share-platforms">
-		<a href="http://facebook.com/sharer/sharer.php?u={{url}}/&amp;title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
-			<span class="a-button__text"></span>
-			<svg class="icon icon-facebook">
-				<use xlink:href="#icon-facebook"></use>
-			</svg>
-		</a>
-		<a href="https://twitter.com/intent/tweet?url={{url}}/&amp;text={{text}}" type="button" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
-			<span class="a-button__text"></span>
-			<svg class="icon icon-twitter">
-				<use xlink:href="#icon-twitter"></use>
-			</svg>
-		</a>
-		<a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{url}}/&amp;title={{text}}" class="a-button a-button--standalone-icon a-button--icon m-share__icon js-share-popup">
-			<span class="a-button__text"></span>
-			<svg class="icon icon-linkedin">
-				<use xlink:href="#icon-linkedin"></use>
-			</svg>
-		</a>
-	</div>
-</div>

package/src/molecules/submenu/submenu.hbs

@@ -1,68 +0,0 @@
-<style media="screen">
-:root {
-	--m-submenu-background-color: {{background_color}};
-	--m-submenu-icon-fill-color: {{icon_fill_color}};
-	--m-submenu-icon-background-hover-color: {{icon_background_hover_color}};
-}
-</style>
-<nav>
-	<dl class="m-submenu">
-		<dt class="m-submenu__title">
-			<a href="#" class="m-submenu__title__link">
-				<span>Om oss</span>
-				{{> @icon id="arrow-variant"}}
-			</a>
-		</dt>
-		<dd class="m-submenu__item">
-			<a href="#" class="m-submenu__item__link">
-				<span>Vi är internetstiftelsen</span>
-				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
-			</a>
-		</dd>
-		{{#unless has_sublevel}}
-		<dd class="m-submenu__item">
-			<a href="#" class="m-submenu__item__link is-current">
-				<span>Kontakt</span>
-				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
-			</a>
-		</dd>
-		{{/unless}}
-		{{#if has_sublevel}}
-		<dd class="m-submenu__item">
-			<div class="m-submenu__item__sublevel">
-				<a href="#" class="m-submenu__item__link m-submenu__item__link--has-sublevel">
-					<span>Mer om oss</span>
-					{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
-				</a>
-				<button type="button" class="m-submenu__item__toggle-button" data-a11y-toggle="sublvl007" aria-controls="sublvl007"><span class="u-visuallyhidden">Öppna/stäng</span></button>
-			</div>
-			<ul class="m-submenu__sublevel" aria-hidden="true" id="sublvl007" data-focus-trap="false">
-				<li class="m-submenu__sublevel__item">
-					<a href="#" class="m-submenu__item__link m-submenu__sublevel__item__link">
-						<span>Styrelse</span>
-						{{#if sublevel_has_icon}}{{> @icon id="arrow-variant"}}{{/if}}
-					</a>
-				</li>
-				<li class="m-submenu__sublevel__item">
-					<a href="#" class="m-submenu__item__link m-submenu__sublevel__item__link">
-						<span>Stadgar</span>
-						{{#if sublevel_has_icon}}{{> @icon id="arrow-variant"}}{{/if}}
-					</a>
-				</li>
-			</ul>
-		</dd>
-		{{/if}}
-		<dd class="m-submenu__item">
-			<a href="#" class="m-submenu__item__link is-current">
-				<span>Press</span>
-				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
-			</a>
-		</dd>
-		<dd class="m-submenu__item">
-			<a href="#" class="m-submenu__item__link">
-				<span>Jobba hos oss</span>
-				{{#if has_icons}}{{> @icon id="arrow-variant"}}{{/if}}
-			</a>
-		</dd>
-	</dl>
-</nav>

package/src/molecules/system-error/system-error.hbs

@@ -1,9 +0,0 @@
-<div class="m-system-error">
-	<div class="m-system-error__content">
-		<h1 class="m-system-error__heading">{{errorCode}}</h1>
-		<p class="preamble">{{preamble}}</p>
-		<p>{{{suggestion}}}</p>
-		<hr>
-		<em>{{errorCode}} {{errorMessage}}</em>
-	</div>
-</div>

package/src/molecules/table/table.hbs

@@ -1,72 +0,0 @@
-<div class="row no-gutters">
-	<div class="grid">
-		{{#if scrollable}}
-		<div class="table-scroll-wrapper scroll-on-large u-m-b-double">
-			<div class="scroll-indicator"></div>
-		{{/if}}
-				<div class="table-container">
-					<table class="m-table{{#if modifier}} {{modifier}}{{/if}}">
-						{{#unless increment}}
-						<thead>
-							<tr>
-								<th>{{th}}</th>
-								<th>{{th}}</th>
-								<th>{{th}}</th>
-								<th>{{th}}</th>
-								<th>{{th}}</th>
-							</tr>
-						</thead>
-						{{/unless}}
-						<tbody>
-							<tr>
-								{{#if increment}}<th>&nbsp;</th>{{/if}}
-								<td><a href="#">{{td}}</a></td>
-								<td>{{td_num1}} <small>{{td_unit1}}</small></td>
-								<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
-								<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
-								<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
-							</tr>
-							<tr>
-								{{#if increment}}<th>&nbsp;</th>{{/if}}
-								<td><a href="#">{{td}}</a></td>
-								<td>{{td_num1}} <small>{{td_unit1}}</small></td>
-								<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
-								<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
-								<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
-							</tr>
-							<tr>
-								{{#if increment}}<th>&nbsp;</th>{{/if}}
-								<td><a href="#">{{td}}</a></td>
-								<td>{{td_num1}} <small>{{td_unit1}}</small></td>
-								<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
-								<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
-								<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
-							</tr>
-							<tr>
-								{{#if increment}}<th>&nbsp;</th>{{/if}}
-								<td><a href="#">{{td}}</a></td>
-								<td>{{td_num1}} <small>{{td_unit1}}</small></td>
-								<td>{{td_num2}} <small>{{td_unit2}}</small> </td>
-								<td>{{td_num3}} <small>{{td_unit3}}</small> </td>
-								<td>{{td_num4}} <small>{{td_unit4}}</small> </td>
-							</tr>
-						</tbody>
-						{{#unless increment}}
-						<tfoot>
-							<tr>
-								<td>{{tfoot}}</td>
-								<td>{{tfoot}}</td>
-								<td>{{tfoot}}</td>
-								<td>{{tfoot}}</td>
-								<td>{{tfoot}}</td>
-							</tr>
-						</tfoot>
-						{{/unless}}
-					</table>
-				</div>
-		{{#if scrollable}}
-			</div>
-		</div>
-		{{/if}}
-	</div>
-</div>

package/src/molecules/teaser-news-list/teaser-news-list.hbs

@@ -1,16 +0,0 @@
-<div class="m-teaser-news">
-	<p class="alpha">{{title}}</p>
-	<ul class="m-teaser-news__list">
-		{{#each items}}
-		<li class="m-teaser-news__item">
-			{{> @meta text=time}}
-			<a href="#" class="m-teaser-news__link">
-				<h2>{{heading}}</h2>
-			</a>
-			{{#each tags}}
-				{{> @tag text=text url=url }}
-			{{/each}}
-		</li>
-		{{/each}}
-	</ul>
-</div>

package/src/molecules/timeline-navigation/timeline-navigation.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-	status: 'prototype',
-
-	context: {
-		text: 'Paging',
-		modifiers: ['icon'],
-		icon: 'richtext-bullet-list',
-		additional_classes: 'm-timeline-navigation__button js-timeline-navigation',
-		button_type: 'button',
-		url: false,
-		aria_controls: 'timeline-navigation',
-		aria_expanded: false,
-		text: 'Visa tidslinje'
-	}
-}

package/src/molecules/timeline-navigation/timeline-navigation.hbs

@@ -1,83 +0,0 @@
-<nav id="timeline-navigation" class="m-timeline-navigation" aria-hidden="true" data-focus-trap="false">
-	<ol class="m-timeline-navigation__list">
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-ocean">
-				1963
-			</div>
-			<a href="#1963" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-ocean">
-				1967
-			</div>
-			<a href="#1967" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-ocean">
-				1969
-			</div>
-			<a href="#1969" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-sandstone">
-				1971
-			</div>
-			<a href="#1971" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-sandstone">
-				1973
-			</div>
-			<a href="#1973" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-sandstone">
-				1974
-			</div>
-			<a href="#1974" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-		<li class="m-timeline-navigation__list__item">
-			<div class="a-meta color-ruby">
-				1982
-			</div>
-			<a href="#1982" class="m-timeline-navigation__list__item__link">
-				<h2>Data vidion är en "text-tv-indenter"</h2>
-			</a>
-
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio urna, pulvinar et eleifend id, mattis a nunc. Fusce porttitor sed dolor et fermentum.</p>
-		</li>
-	</ol>
-</nav>
-
-<{{getelement el "button"}}
-	{{#if button_type}}type="{{button_type}}"{{/if}}
-	{{#if url}}href="{{ url }}"{{/if}}
-	class="a-paging{{#if additional_classes}} {{ additional_classes}}{{/if}}" aria-expanded="false" data-a11y-toggle="{{aria_controls}}" aria-controls="{{aria_controls}}">
-	<span class="u-visuallyhidden">{{text}}</span>
-	{{> @icon id=icon additional_classes="a-paging__icon"}}
-</{{getelement el "button"}}>
-<div class="m-timeline-navigation__button__overlay js-timeline-overlay"></div>

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

@@ -1,32 +0,0 @@
-const timelineNavigation = document.querySelector('#timeline-navigation');
-const timeLineButton = document.querySelector('.js-timeline-navigation');
-const timeLineOverlay = document.querySelector('.js-timeline-overlay');
-const body = document.querySelector('body');
-const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-let clicked = false;
-
-if (timeLineButton) {
-	timeLineButton.addEventListener('click', () => {
-		body.classList.toggle('html-no-overflow');
-		if (clicked === false) {
-			timeLineButton.style.transform = `translateX(-${scrollbarWidth}px)`;
-			timeLineOverlay.style.transform = `translateX(-${scrollbarWidth}px)`;
-			body.style.paddingRight = `${scrollbarWidth}px`;
-			clicked = true;
-		} else {
-			timeLineButton.removeAttribute('style');
-			timeLineOverlay.removeAttribute('style');
-			body.removeAttribute('style');
-			clicked = false;
-		}
-	});
-}
-
-if (timelineNavigation) {
-	const timelineNavigationLinks = timelineNavigation.querySelectorAll('a');
-	[].forEach.call(timelineNavigationLinks, (timelineNavigationLink) => {
-		timelineNavigationLink.addEventListener('click', () => {
-			timeLineButton.click();
-		});
-	});
-}

package/src/molecules/timeline-navigation/timeline-navigation.scss

@@ -1,165 +0,0 @@
-@charset "UTF-8";
-
-.html-no-overflow {
-	overflow: hidden;
-}
-
-@include molecule(timeline-navigation) {
-	transition: opacity 2s ease-out;
-	transform: translate3d(0,0,0);
-	position: fixed;
-	top:0;
-	left: 0;
-	z-index: z_index(foreground);
-	display: flex;
-	justify-content: flex-end;
-	width: 100%;
-	//height: calc(100vh -#{rhythm(4)});
-	height: 100vh;
-
-	&[aria-hidden='true'] {
-		display: none;
-		opacity: 0;
-	}
-
-	&[aria-hidden='false'] {
-		animation: opacity;
-		animation-duration: 1s;
-		transform: translate3d(0,0,0);
-	}
-
-	@keyframes opacity {
-		0% {display: none; opacity: 0;}
-		1% {display: block; opacity: 0;}
-		100% {display: block; opacity: 1;}
-	}
-
-	@include e(button) {
-		position: fixed;
-		z-index: z_index(foreground);
-		right: rhythm(2);
-		bottom: rhythm(2);
-
-		&[aria-expanded='true'] {
-			+ [class*='overlay'] {
-				&::after {
-					box-shadow: 0 0 0 120vw rgba($color-cyberspace,0.7);
-
-					@media only screen and (orientation : portrait) {
-						box-shadow: 0 0 0 120vh rgba($color-cyberspace,0.7);
-					}
-				}
-			}
-		}
-
-		+ [class*='overlay'] {
-			position: fixed;
-			z-index: z_index(foregroundMinus);
-			right: rhythm(2);
-			bottom: rhythm(2);
-			width: rhythm(6);
-			height: rhythm(6);
-
-			&::after {
-				content: '';
-				position: absolute;
-				z-index: -1;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				border-radius: 50%;
-				transition: box-shadow 0.3s ease-out;
-				transform: translate3d(0,0,0);
-			}
-		}
-	}
-
-	@include e(list) {
-		width: 100%;
-		max-width: 450px;
-		list-style-type: none;
-		margin: 0;
-		padding: 0 rhythm(5) 0 0;
-		position: relative;
-		overflow: hidden;
-		overflow-y: auto;
-		height: calc(100vh -#{rhythm(4)});
-
-
-		&::after {
-			content: '';
-			display: block;
-			width: 100%;
-			max-width: calc(450px -#{rhythm(7)});
-			height: rhythm(4);
-			position: fixed;
-			z-index: 2;
-			right: rhythm(7);
-			bottom: 0;
-			background-color: $color-cyberspace;
-		}
-
-		@include e(item) {
-			position: relative;
-			color: $color-snow;
-			padding: rhythm(2) rhythm(3);
-			background-color: $color-cyberspace;
-			border-right: 4px solid $color-snow;
-
-			&::after {
-				content: '';
-				display: flex;
-				height: 24px;
-				width: 24px;
-				border-radius: 50%;
-				background-color: $color-cyberspace;
-				border: 3px solid $color-snow;
-				position: absolute;
-				z-index: 1;
-				right: 0;
-				top: 50%;
-				transform: translateY(-50%) translateX(13.5px);
-				backface-visibility: visible !important;
-				animation-duration: 0.5s;
-				animation-fill-mode: both;
-				animation-delay: 0.15s;
-				transform-style: preserve-3d;
-			}
-
-			& + & {
-				border-top: 1px solid lighten($color-cyberspace, 7%);
-			}
-
-			&:hover {
-				background-color: lighten($color-cyberspace, 5%);
-			}
-
-			@include e(link) {
-				color: $color-snow;
-				text-decoration: none !important;
-				display: block;
-
-				&::after {
-					content: '';
-					display: block;
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					cursor: pointer;
-				}
-
-				&:hover,
-				&:focus {
-					text-decoration: underline;
-
-					> h2 {
-						text-decoration: underline;
-					}
-				}
-			}
-		}
-	}
-}

package/src/organisms/accordion/accordion.hbs

@@ -1,38 +0,0 @@
-<div class="js-o-accordion o-accordion">
-	{{#each accordion_item}}
-	<h3 class="js-accordion__header{{#if color}} o-accordion__header--background background-{{color}}{{/if}}{{#unless content}} o-accordion__header--no-content{{/unless}}"{{#if is_expanded}} data-accordion-opened="true"{{/if}}>
-		{{#if time}}<time class="a-meta o-accordion__header__time">{{time}}</time>{{/if}}
-		{{#if heading}}
-		{{heading}}
-		{{/if}}
-	</h3>
-	<div class="js-accordion__panel">
-		<div class="o-accordion__panel__content">
-			{{{content}}}
-		</div>
-	</div>
-	{{/each}}
-</div>
-{{#unless has_background}}
-<div style="padding: 20px">
-	<button type="button" class="a-button" id="addAccordion"><span class="a-button__text">Lägg till</span></button>
-</div>
-<script>
-	document.getElementById('addAccordion').addEventListener('click', function () {
-		const html = `
-			<h3 class="js-accordion__header">
-				Quisque non molestie arcu
-			</h3>
-			<div class="js-accordion__panel">
-				<div class="o-accordion__panel__content">
-					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut elit lacinia, feugiat felis sit amet, congue ante. Morbi vel egestas mi. Nulla urna sapien, gravida et nisl ac, maximus euismod ipsum. Vivamus condimentum, massa non convallis hendrerit, orci mi porttitor nisi, at commodo purus magna non nisi. Duis feugiat lectus in sapien mollis, ac volutpat leo elementum. Nullam euismod massa a nulla placerat sagittis. Integer id purus a dolor fermentum mollis vel feugiat dui. Nullam neque diam, mattis nec cursus at, facilisis nec diam.</p><p>Proin faucibus pretium orci, eu tristique augue condimentum at. Suspendisse potenti. Donec ut luctus eros. Nam justo nunc, facilisis lobortis hendrerit sodales, fermentum at purus. Proin eget elementum nulla, nec tincidunt lacus. Mauris massa eros, interdum eget nunc id, molestie semper libero. Vivamus tortor ex, viverra ut varius vel, finibus hendrerit nunc. Morbi pulvinar arcu erat, consectetu mollis leo vulputate eu.</p>
-				</div>
-			</div>
-		`;
-
-		const wrapper = document.querySelector('.o-accordion');
-
-		wrapper.insertBefore(document.createRange().createContextualFragment(html), wrapper.firstElementChild);
-	});
-</script>
-{{/unless}}