Vechtsport Online Components for Magento 2

Cookie Message: With Button 

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="cookie-message">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="cookie-message__title">Privacy &amp; Cookies</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <span class="cookie-message__content">
                            Deze site maakt gebruik van cookies. Door verder te gaan op deze website, ga je akkoord met het gebruik hiervan. Voor meer informatie, onder andere over cookiebeheer, bekijk je ons Cookie beleid.
                        </span>
                    </div>
                    <div class="col-md-6">
                        <div class="cookie-message__buttonList">
                            <div class="cookie-message__buttonList__functional"><button class="button cookie-message__buttons cookie-message__buttons__functional" role="button" tabindex="0">
                                    Functioneel
                                    <svg class="icon cookie-message__buttons__functional__icon" role="img">
                                        <title>Arrow right</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                                    </svg>

                                </button>
                            </div>
                            <div class="cookie-message__buttonList__allcookies"><button class="button cookie-message__buttons cookie-message__buttons__allcookies" role="button" tabindex="0">
                                    Alle cookies
                                    <svg class="icon cookie-message__buttons__allcookies__icon" role="img">
                                        <title>Arrow right</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                                    </svg>

                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/components/raw/cookie-message/cookie-message.js"></script>
 
<div class="container">
    <div class="row">
        <div class="col-md-12">
                <div class="cookie-message">   
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="cookie-message__title">{{ title }}</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <span class="cookie-message__content">
                            {{ text }}
                        </span>
                    </div>
                    <div class="col-md-6">
                        <div class="cookie-message__buttonList">
                            <div class="cookie-message__buttonList__functional">{{ render '@button' buttonFunctional }}</div>
                            <div class="cookie-message__buttonList__allcookies">{{ render '@button' buttonAllCookies }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{static 'cookie-message.js' }}"></script>
 
{
  "linkAnchor": "Details",
  "ariaLabel": "Cookie policy message",
  "closeIcon": "close",
  "closeLabel": "",
  "closeAriaLabel": false,
  "text": "Deze site maakt gebruik van cookies. Door verder te gaan op deze website, ga je akkoord met het gebruik hiervan. Voor meer informatie, onder andere over cookiebeheer, bekijk je ons Cookie beleid.",
  "class": "cookie-message--with-butto footer-links__content",
  "dataType": "cookie1",
  "title": "Privacy & Cookies",
  "buttonFunctional": {
    "tag": "button",
    "class": "cookie-message__buttons cookie-message__buttons__functional",
    "icon": {
      "id": "angle-right",
      "title": "Arrow right",
      "class": "cookie-message__buttons__functional__icon"
    },
    "attributes": "role=\"button\" tabindex=\"0\"",
    "text": "Functioneel"
  },
  "buttonAllCookies": {
    "tag": "button",
    "class": "cookie-message__buttons cookie-message__buttons__allcookies",
    "icon": {
      "id": "angle-right",
      "title": "Arrow right",
      "class": "cookie-message__buttons__allcookies__icon"
    },
    "attributes": "role=\"button\" tabindex=\"0\"",
    "text": "Alle cookies"
  }
}
  • Content: 
    $cookie-message__text-align                         : left !default;
$cookie-message__background-color                   : #f5f5f5 !default;
$cookie-message__font-size                          : $font-size-small !default;
$cookie-message__font-family                        : $font-family-base !default;
$cookie-message__font-style                         : italic !default;
$cookie-message__text-color                         : $gray !default;
$cookie-message__text-padding                       : $spacer--medium $spacer--medium 0 $spacer--medium !default;
$cookie-message__text-padding--small                : $spacer--medium $spacer $spacer--medium $spacer--medium !default;
$cookie-message__link-color                         : $blue !default;
$cookie-message__close-color                        : $gray !default;
$cookie-message__close-size                         : 48px !default;
$cookie-message__close-font-weight                  : $font-weight-bold !default;
$cookie-message__close-padding                      : 0 $spacer--medium 0 0 !default;
$cookie-message__close-padding--small               : 0 $spacer--medium 0 $spacer !default;
$cookie-message__close-icon-fill                    : $gray !default;
$cookie-message__close-icon-size                    : 14px !default;
$cookie-message__close-icon-margin-left             : $spacer !default;
$cookie-message__button-height                      : 47px;
$cookie-message__button-width                       : 185px;
$cookie-message__button-border                      : 2px solid $gray-darker;
$cookie-message__button-icon-size                   : 18px;
$cookie-message__button-icon-position               : relative;
$cookie-message__button-icon-left                   : 12px;
$cookie-message__button-functional-background       : $white;
$cookie-message__button-functional-color            : $gray-darker;
$cookie-message__button-allcookies-background       : $red;
$cookie-message__button-allcookies-color            : $white;

.cookie-message {
    display: none;
    background-color: $cookie-message__background-color;
    text-align: $cookie-message__text-align;
    padding: 20px;
    position: fixed;
    bottom: 0;
    z-index: 999;

    @include mq($screen-l) {
        width: 80%;
        left: 10%;
    }

    &__link {
        color: $cookie-message__link-color;
        background-clip: content-box;
        &:focus {
            @include focus-inline();
        }
    }
    &__buttonList {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        @include mq($screen-m) {
            justify-content: flex-end;
        }
        &__functional {
            display: flex;
            justify-content: center;
            margin-right: 5px;

            @include mq($screen-l) {
                justify-content: flex-start;
            }
        }
        &__allcookies {
            display: flex;
            justify-content: center;
            margin-left: 5px;

            @include mq($screen-l) {
                justify-content: flex-end;
            }
        }
    }
    &__buttons {
        font-family: $font-family-evogria;
        font-weight: $font-weight-normal;
        font-size: $cookie-message__font-size;
        font-style: $cookie-message__font-style;
        text-transform: uppercase;

        margin-top: 20px;
        padding: 0 $spacer--large;

        @include mq($screen-l) {
            height: $cookie-message__button-height ;
            width: $cookie-message__button-width;
        }

        &__functional {
            background: $cookie-message__button-functional-background ;
            color: $cookie-message__button-functional-color;
            border: $cookie-message__button-border;
            

            &:hover {
                background: $gray-light;
            }
    
            &__icon {
                fill: $cookie-message__button-functional-color;
                width: $cookie-message__button-icon-size;
                height: $cookie-message__button-icon-size;
                position: $cookie-message__button-icon-position;
                left: $cookie-message__button-icon-left;
            }
        }
    
        &__allcookies {
            background: $cookie-message__button-allcookies-background;
            color: $cookie-message__button-allcookies-color;
            
            &__icon {
                fill: $cookie-message__button-allcookies-color;
                width: $cookie-message__button-icon-size;
                height: $cookie-message__button-icon-size;
                position: $cookie-message__button-icon-position;
                left: $cookie-message__button-icon-left;
            }
    
        }

    }
   
    &__title {
        color: $red;
        text-transform: uppercase;
        font-weight: $font-weight-normal;
        font-size: $font-size-large;
        letter-spacing: -0.005em;
        font-style: $cookie-message__font-style;
    }
    &__content {
        color: $gray;
        font-family: $font-family-saira;
        font-weight: $font-weight-base;
        font-size: $cookie-message__font-size;
        line-height: 175%;
    }
}

.cookie-message__text > a {
    @extend .cookie-message__link;
}
  • URL: /components/raw/cookie-message/_cookie-message.scss
  • Filesystem Path: build/components/02-elements/cookie-message/_cookie-message.scss
  • Size: 5.2 KB
  • Content: 
    '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,
          dataType      = cookieMessage.dataset.type,
          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();
  • URL: /components/raw/cookie-message/cookie-message.js
  • Filesystem Path: build/components/02-elements/cookie-message/cookie-message.js
  • Size: 1.4 KB

Cookie message accessibility

  1. Implementing cookie message we have to remember about focus management. After closing bar, focus should be set on some visible element on the page. In this component it’s set to move focus on the first focusable elements on the website.
  2. Aria labels on buttons should be set, icon can be hidden (aria-hidden=”true”)