Alpaca components for Magento 2

Message 

<div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
    <div class="cookie-message__container">
        <p class="cookie-message__text">
            <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>

        <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
            <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                <title>Close</title>
                <use href="/images/icons-sprite.svg#close"></use>
            </svg>

        </button>
    </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>

        <button
            class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                {{ closeClass }}
            "
            type="button"
            {{#if closeAriaLabel }}
                aria-label="{{closeAriaLabel}}"
            {{/if}}
        >
            {{#if closeLabel}}
                <span class="button__text">
                    {{ closeLabel }}
                </span>
            {{/if}}
            {{#if closeIcon}}
                {{ render '@icon' closeIcon }}
            {{/if}}
        </button>
    </div>
</div>
<script src="{{static 'cookie-message.js' }}"></script>
 
{
  "linkAnchor": "Action's 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": "<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",
  "dataType": "cookie"
}
  • Content: 
    $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;
  • URL: /components/raw/cookie-message/_cookie-message-variables.scss
  • Filesystem Path: build/components/Organisms/cookie-message/_cookie-message-variables.scss
  • Size: 1.6 KB
  • Content: 
    @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;
}
  • URL: /components/raw/cookie-message/_cookie-message.scss
  • Filesystem Path: build/components/Organisms/cookie-message/_cookie-message.scss
  • Size: 3 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;
    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();
  • URL: /components/raw/cookie-message/cookie-message.js
  • Filesystem Path: build/components/Organisms/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”)