Internetstiftelsen Styleguide

Cookie Disclaimer 

<div class="m-cookie-disclaimer js-cookie-disclaimer">
    <div role="alert" class="m-cookie-disclaimer__wrapper m-alert m-alert--info m-alert--dismissable js-dismiss-alert">
        <div class="m-cookie-disclaimer__inner">
            <div class="m-cookie-disclaimer__inner-first">
                <p class="m-cookie-disclaimer__text">På internetstiftelsen.se använder vi kakor (cookies) för att löpande förbättra webbplatsen. <a href="https://internetstiftelsen.se/om-webbplatsen/cookies/">Läs mer om hur Internetstiftelsen använder kakor</a>.</p>
            </div>
            <div class="m-cookie-disclaimer__inner-second">
                <button id="js-accept-cookies" class="a-button a-button--is-static">
                    <span class="a-button__text">Jag förstår</span>
                </button>
            </div>
        </div>
    </div>
</div>
 
<div class="m-cookie-disclaimer js-cookie-disclaimer">
	<div{{#if role}} role="{{role}}"{{/if}} class="m-cookie-disclaimer__wrapper m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}">
		<div class="m-cookie-disclaimer__inner">
			<div class="m-cookie-disclaimer__inner-first">
				<p class="m-cookie-disclaimer__text">{{{text}}}</p>
			</div>
			{{#if is_dismissable}}
			<div class="m-cookie-disclaimer__inner-second">
				{{> @button el="button" modifiers="is-static" text="Jag förstår" id="js-accept-cookies"}}
			</div>
			{{/if}}
		</div>
	</div>
</div>
 
{
  "name": "Cookies",
  "type": "info",
  "role": "alert",
  "text": "På internetstiftelsen.se använder vi kakor (cookies) för att löpande förbättra webbplatsen. <a href=\"https://internetstiftelsen.se/om-webbplatsen/cookies/\">Läs mer om hur Internetstiftelsen använder kakor</a>.",
  "js_class": "js-dismiss-alert",
  "is_dismissable": true
}
  • Content: 
    const cookieBar = document.querySelector('.js-cookie-disclaimer');
const visibleClass = 'is-visible';
const cookieName = 'internetstiftelsen-cookie-consent';
// const testCookieSupport = 'Cookies are enabled';
const acceptButton = document.getElementById('js-accept-cookies');
const currentProtocol = document.location.protocol;
// const { cookieEnabled } = navigator.cookieEnabled;

// Cookies are disabled
// function showCookieFail() {
// 	console.warn('Cookies are disabled.');
// }

// Check for cookie support
// (function checkCookieSupport() {
// 	if (!cookieEnabled) {
// 		if (currentProtocol === 'https:') {
// 			document.cookie = `${testCookieSupport}=Yes;path=/;SameSite=Strict;Secure;`;
// 		} else {
// 			document.cookie = `${testCookieSupport}=Yes;path=/;SameSite=Strict;`;
// 		}
//
// 		cookieEnabled = document.cookie.indexOf(testCookieSupport) !== -1;
// 	}
// 	return cookieEnabled || showCookieFail();
// }());

// Set cookie
function setCookie(name, value, days) {
	const d = new Date();
	d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);

	if (currentProtocol === 'https:') {
		document.cookie = `${name}=${value};path=/;SameSite=Strict;Secure;expires=${d.toGMTString()}`;
	} else {
		document.cookie = `${name}=${value};path=/;SameSite=Strict;expires=${d.toGMTString()}`;
	}
}

// Get cookie
function getCookie(name) {
	const v = document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
	return v ? v[2] : null;
}

// No cookie set? Show cookie disclaimer bar
// if (!getCookie(cookieName) && cookieEnabled) {
if (!getCookie(cookieName)) {
	if (cookieBar) {
		cookieBar.classList.add(visibleClass);
	}
}

// Cookies accepted
function acceptCookies() {
	setCookie(cookieName, 'YES', 365);
	if (cookieBar) {
		cookieBar.classList.remove(visibleClass);
	}
}

// Button click
if (acceptButton) {
	acceptButton.addEventListener('click', acceptCookies);
}
  • URL: /components/raw/cookie-disclaimer/cookie-disclaimer.js
  • Filesystem Path: src/molecules/cookie-disclaimer/cookie-disclaimer.js
  • Size: 1.9 KB
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;

@include mixin.molecule(cookie-disclaimer) {
	display: none;
	position: relative;
	z-index: func.z_index(foreground);

	&.is-visible {
		display: block;
	}

	@include breakpoint.bp-up(lg) {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
	}

	@include bem.e(wrapper) {
		width: 100%;
		margin-bottom: 0 !important;
		padding: func.rhythm(2) 0;
	}

	@include bem.e(inner) {
		display: flex;
		flex-wrap: wrap;
		margin-right: auto;
		margin-left: auto;

		@include grid.make-container-max-widths();

		@include breakpoint.bp-down(xl) {
			padding-right: var.$grid-gutter-width;
			padding-left: var.$grid-gutter-width;
		}
	}

	@include bem.e(inner-first) {
		display: flex;
		align-items: center;
		width: 100%;

		a {
			padding: 0 0.25rem;
			border-bottom: 0.11111rem solid colors.$color-peacock;
			color: colors.$color-black;
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: none;
			}
		}

		@include breakpoint.bp-up(md) {
			@include grid.make-col(12);

			padding-right: func.rhythm(3);
		}
	}

	@include bem.e(inner-second) {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		padding-top: func.rhythm(2);

		button {
			font-size: 18px;
		}

		@include breakpoint.bp-up(md) {
			@include grid.make-col(6);

			padding-top: 0;
		}
	}

	@include bem.e(text) {
		margin-bottom: 0;
	}
}
  • URL: /components/raw/cookie-disclaimer/cookie-disclaimer.scss
  • Filesystem Path: src/molecules/cookie-disclaimer/cookie-disclaimer.scss
  • Size: 1.8 KB

No notes defined.