<div class="cookie-message cookie-message--actions" data-type="cookie1" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
This site uses cookies. <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<div class="cookie-message__actions">
<div class="
cookie-message__action
">
<button class="button button--secondary cookie-message__button" type="button" aria-label="button">
Allow Cookies
</button>
</div>
<div class="
cookie-message__action
">
<button class="button button--secondary cookie-message__button" type="button" aria-label="button">
Cookies Settings
</button>
</div>
</div>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
<div
class="cookie-message {{ class }}"
data-type="{{ dataType }}"
tabindex="0"
aria-label="{{ ariaLabel }}"
>
<div class="cookie-message__container">
<p class="cookie-message__text">
{{{ text }}}
</p>
<div class="cookie-message__actions">
{{#each cookieActions as |action| }}
<div
class="
cookie-message__action
{{ action.class }}
"
{{ action.attributes }}
>
{{ render (component action.content) action.contentContext merge=true }}
</div>
{{/each}}
</div>
</div>
</div>
<script src="{{static 'cookie-message.js' }}"></script>
{
"linkAnchor": "Details",
"ariaLabel": "Cookie policy message",
"closeClass": "button--rotate-icon",
"closeIcon": {
"id": "close",
"title": "Close",
"class": "button__icon cookie-message__button-icon",
"hidden": true
},
"closeLabel": false,
"closeAriaLabel": "Close cookie message",
"text": "This site uses cookies. <a href=\"#\" class=\"link--invert\">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.",
"class": "cookie-message--actions",
"dataType": "cookie1",
"cookieActions": [
{
"content": "button--secondary",
"contentContext": {
"text": "Allow Cookies",
"class": "button--secondary cookie-message__button"
}
},
{
"content": "button--secondary",
"contentContext": {
"text": "Cookies Settings",
"class": "button--secondary cookie-message__button"
}
}
]
}
$cookie-message__width : 100% !default;
$cookie-message__background-color : $gray-lighter !default;
$cookie-message__font-size : $font-size-small !default;
$cookie-message__font-family : $font-family-base !default;
$cookie-message__line-height : 16px !default;
$cookie-message__padding : $spacer--medium $spacer $spacer--medium $spacer--large !default;
$cookie-message__container-margin : 0 auto !default;
$cookie-message__container-max-wdith : $max-content-width !default;
$cookie-message__container-wdith : 100% !default;
$cookie-message__text-color : $color-secondary !default;
$cookie-message__text-padding : 0 !default;
$cookie-message__text-margin : 0 $spacer--medium 0 0 !default;
$cookie-message__text-letter-spacing : 1px !default;
$cookie-message__button-color : $color-secondary !default;
$cookie-message__button-height : 48px !default;
$cookie-message__button-font-weight : $font-weight-normal !default;
$cookie-message__button-padding : 0 !default;
$cookie-message__button-margin : 0 !default;
$cookie-message__button-background : none !default;
$cookie-message__button-border : 0 !default;
$cookie-message__button-text-transform : none !default;
$cookie-message__button-icon-fill : $color-secondary !default;
$cookie-message__button-icon-size : 24px !default;
//actions
$cookie-message__padding--actions : $spacer--medium $spacer--large !default;
$cookie-message__button-padding--actions: 0 $spacer--large !default;
@import 'cookie-message-variables';
.cookie-message {
display: none;
align-items: stretch;
width: $cookie-message__width;
padding: $cookie-message__padding;
background-color: $cookie-message__background-color;
font-size: $cookie-message__font-size;
font-family: $cookie-message__font-family;
line-height: $cookie-message__line-height;
&--open {
display: flex;
}
&--actions {
padding: $cookie-message__padding--actions;
.cookie-message__container {
flex-direction: column;
@include mq($screen-m) {
flex-direction: row;
}
}
.cookie-message__button {
padding: $cookie-message__button-padding--actions;
}
}
&__container {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
width: $cookie-message__container-wdith;
max-width: $cookie-message__container-max-wdith;
margin: $cookie-message__container-margin;
@include mq($screen-m) {
justify-content: space-between;
}
}
&__text {
flex-basis: 100%;
padding: $cookie-message__text-padding;
margin: $cookie-message__text-margin;
color: $cookie-message__text-color;
text-align: justify;
font-size: inherit;
font-family: inherit;
letter-spacing: $cookie-message__text-letter-spacing;
@include mq($screen-m) {
text-align: left;
}
}
&__link {
&.focus-visible {
@include focus-inline();
}
}
&__button {
padding: $cookie-message__button-padding;
margin: $cookie-message__button-margin;
height: $cookie-message__button-height;
min-height: 0;
color: $cookie-message__button-color;
border: $cookie-message__button-border;
background: $cookie-message__button-background;
font-weight: $cookie-message__button-font-weight;
text-transform: $cookie-message__button-text-transform;
.button__text {
color: $cookie-message__text-color;
}
&:hover {
.button__text {
color: $cookie-message__text-color;
}
}
}
&__button-icon {
.button--icon & {
width: $cookie-message__button-icon-size;
height: $cookie-message__button-icon-size;
fill: $cookie-message__button-icon-fill;
}
}
&__actions {
display: flex;
flex-basis: 100%;
flex-direction: column;
align-items: center;
@include mq($screen-m) {
flex-basis: auto;
}
.button {
white-space: nowrap;
width: 100%;
}
}
&__action {
width: 100%;
}
}
.cookie-message__text > a {
@extend .cookie-message__link;
}
'use strict';
class CookieMessage {
constructor() {
this.closing = document.querySelectorAll('.cookie-message__close');
this.cookies = document.querySelectorAll('.cookie-message');
this.start();
}
closeBar(el) {
const cookieMessage = el.currentTarget.parentElement.parentElement;
const dataType = cookieMessage.dataset.type;
const focusable = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');
cookieMessage.classList.remove('cookie-message--open');
localStorage.setItem(dataType, 'closed');
// after closing message box move focus on first focusable element on the page
if (focusable.length) {
let firstFocusable = [...focusable].find(el => {
return el.offsetParent !== null
})
firstFocusable.focus();
}
}
setListeners() {
this.closing.forEach(el => {
el.addEventListener('click', this.closeBar);
});
}
start() {
// Display message if it wasn't closed before
this.cookies.forEach(el => {
const dataType = el.dataset.type;
if (localStorage.getItem(dataType) !== 'closed') {
el.classList.add('cookie-message--open')
}
});
this.setListeners();
}
}
new CookieMessage();