<div id="alert-1" role="alert" class="m-alert m-alert--error">
    <h2 class="u-m-b-1">Fel</h2>
    <p>Meddelanderuta med information om att något är fel, t.ex. att ett formulär inte kunde skickas. Tillfälligt meddelande.</p>
</div>
<div{{#if role}} id="alert-1" role="{{role}}"{{/if}} class="m-alert m-alert--{{type}}{{#if additional_classes}} {{additional_classes}}{{/if}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}" {{#if is_dismissable}} aria-hidden="true"{{/if}}>
	{{#if is_dismissable}}
	<button class="a-button a-button--icon a-button--standalone-icon a-button--icon" data-a11y-toggle="alert-1">
		<span class="a-button__text">Stäng</span>
		<svg class="icon a-button__icon">
			<use xlink:href="#icon-close"></use>
		</svg>
	</button>
	{{/if}}
	<h2 class="u-m-b-1">{{name}}</h2>
	<p>{{{text}}}</p>
</div>
{
  "name": "Fel",
  "type": "error",
  "role": "alert",
  "text": "Meddelanderuta med information om att något är fel, t.ex. att ett formulär inte kunde skickas. Tillfälligt meddelande.",
  "additional_classes": false
}
  • Content:
    @charset 'UTF-8';
    
    $alert-success-border: $color-jade;
    $alert-success-bg: $color-jade-light;
    $alert-info-border: $color-ocean;
    $alert-info-bg: $color-ocean-light;
    $alert-warning-border: $color-lemon;
    $alert-warning-bg: $color-lemon-light;
    $alert-error-border: $color-ruby;
    $alert-error-bg: $color-ruby-light;
    $alert-text: $color-cyberspace;
    
    @include molecule(alert) {
    	position: relative;
    	margin-bottom: rhythm(4);
    	padding: rhythm(2) rhythm(2) rhythm(3) rhythm(2);
    	border: 1px solid transparent;
    	background-repeat: no-repeat;
    	background-position: rhythm(2) 50%;
    
    	> h2,
    	> p {
    		max-width: rem(600px);
    	}
    
    	> p:last-child {
    		margin-bottom: rhythm(0.5);
    	}
    
    	a {
    		@extend %normalize-links;
    
    		color: $color-cyberspace;
    		font-family: $font-family-headings;
    		text-decoration: underline;
    	}
    
    	@include m(dismissable) {
    		padding-right: rhythm(4);
    
    		// Adjust close button position
    		button:not(.a-button--is-static) {
    			position: absolute;
    			z-index: z_index(background);
    			top: rhythm(1);
    			right: rhythm(1);
    		}
    
    		&[aria-hidden="true"] {
    			display: none;
    		}
    	}
    
    	// Alternate styles
    	//
    	// Generate contextual modifier classes for colorizing the alert.
    
    	@include m(success) {
    		@include alert-variant($alert-success-border, $alert-success-bg, $alert-text);
    	}
    
    	@include m(info) {
    		@include alert-variant($alert-info-border, $alert-info-bg, $alert-text);
    	}
    
    	@include m(warning) {
    		@include alert-variant($alert-warning-border, $alert-warning-bg, $alert-text);
    	}
    
    	@include m(error) {
    		@include alert-variant($alert-error-border, $alert-error-bg, $alert-text);
    
    		::selection {
    			background-color: $color-ruby;
    		}
    
    		::-moz-selection {
    			background-color: $color-ruby;
    		}
    	}
    }
    
  • URL: /components/raw/alert/_alert.scss
  • Filesystem Path: src/molecules/alert/_alert.scss
  • Size: 1.7 KB
  • Content:
    const alerts = document.querySelectorAll('.js-dismiss-alert');
    
    function dismiss(alert) {
    	const target = alert.querySelector('[data-a11y-toggle]');
    	const id = target.closest('[role]').getAttribute('id');
    	const idElement = document.getElementById(id);
    
    	if (sessionStorage.getItem(id) !== 'is-dismissed') {
    		window.addEventListener('DOMContentLoaded', () => {
    			idElement.setAttribute('aria-hidden', 'false');
    		});
    
    		target.addEventListener('click', () => {
    			sessionStorage.setItem(id, 'is-dismissed');
    		});
    	}
    }
    
    if (alerts) {
    	[].forEach.call(alerts, dismiss);
    }
    
  • URL: /components/raw/alert/alert.js
  • Filesystem Path: src/molecules/alert/alert.js
  • Size: 574 Bytes

No notes defined.