Alpaca components for Magento 2

Dropdown List: Buttons 

<div id="dropdown-default" class="dropdown-list dropdown-list--buttons">
    <ul class="dropdown-list__list">
        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
            <button class="dropdown-list__label button button--icon" type="button" aria-expanded="false" aria-controls="dropdown-buttons-content">

                <svg class="icon button__icon" aria-hidden="true" role="img">
                    <title>Heart</title>
                    <use href="/images/icons-sprite.svg#heart"></use>
                </svg>

                <span class="button__text dropdown-list__text margin-hz-s">
                    dropdown title
                </span>

                <svg class="icon dropdown-list__icon button__icon margin-0" aria-hidden="true" role="img">
                    <title>Arrow Down</title>
                    <use href="/images/icons-sprite.svg#angle-down"></use>
                </svg>

            </button>

            <div id="dropdown-buttons-content" class="dropdown-list__content " aria-hidden="true">
                <ul class="list ">
                    <li class="list__item ">
                        Lorem ipsum

                    </li>
                    <li class="list__item ">
                        Lorem ipsum

                    </li>
                    <li class="list__item ">
                        Lorem ipsum

                    </li>
                    <li class="list__item ">
                        Lorem ipsum

                    </li>
                    <li class="list__item ">
                        Lorem ipsum

                    </li>
                </ul>

            </div>
        </li>
    </ul>
</div>

<script type="text/javascript">
    new DropdownList(document.getElementById('dropdown-default'));
</script>
 
<div
    id="{{ id }}"
    class="dropdown-list {{ class }}"
    {{{ attributes }}}
>
    <ul class="dropdown-list__list">
        {{#each dropdowns as |dropdown|}}
            <li
                class="
                    dropdown-list__item
                    {{#if collapse }}
                        dropdown-list__item--collapse
                    {{/if}}
                "
            >
                <{{ itemTag }}
                   class="dropdown-list__label {{ class }}"
                   {{{ itemAttributes }}}
                    {{#if collapse }}
                        aria-controls="{{ id }}"
                    {{/if}}
                >

                    {{#if iconBefore }}
                        {{ render '@icon' iconBefore}}
                    {{/if}}
                    <span class="button__text {{ textClass }}">
                        {{ title }}
                    </span>

                    {{#if collapse }}
                        {{ render '@icon' collapse }}
                    {{/if}}
                </{{ itemTag }}>

                {{#if contentElement}}
                    <div
                        id="{{ id }}"
                        class="dropdown-list__content {{ classContent }}"
                        aria-hidden="true"
                    >
                        {{ render (component contentElement) contentContext }}
                    </div>
                {{/if}}
            </li>
        {{/each}}
    </ul>
</div>

{{#if id}}
    <script type="text/javascript">
        new DropdownList(document.getElementById('{{ id }}'));
    </script>
{{/if}}
 
{
  "id": "dropdown-default",
  "dropdowns": [
    {
      "itemTag": "button",
      "itemAttributes": "type=\"button\" aria-expanded=\"false\"",
      "title": "dropdown title",
      "textClass": "dropdown-list__text margin-hz-s",
      "id": "dropdown-buttons-content",
      "class": "button button--icon",
      "iconBefore": {
        "id": "heart",
        "title": "Heart",
        "class": "button__icon",
        "attributes": "aria-hidden=\"true\""
      },
      "collapse": {
        "id": "angle-down",
        "title": "Arrow Down",
        "class": "dropdown-list__icon button__icon margin-0",
        "attributes": "aria-hidden=\"true\""
      },
      "contentElement": "list"
    }
  ],
  "class": "dropdown-list--buttons"
}
  • Content: 
    $dropdown-list__width                                  : 100% !default;
$dropdown-list__bg-color                               : $white !default;
$dropdown-list__transition                             : $transition-base !default;
$dropdown-list__padding                                : 0 !default;

// List item
$dropdown-list__item-color                             : $gray-darker !default;
$dropdown-list__item-bg-color                          : $white !default;
$dropdown-list__item-border-bottom                     : $border-base !default;
$dropdown-list__item-width                             : 100% !default;
$dropdown-list__item-font-size                         : $font-size-base !default;

// List
$dropdown-list__list-width                             : 100% !default;
$dropdown-list__list-padding                           : 0 !default;
$dropdown-list__list-margin                            : 0 !default;
$dropdown-list__list-style-type                        : none !default;

// Label
$dropdown-list__label-font-size                        : $font-size-large !default;
$dropdown-list__label-text-transform                   : uppercase !default;
$dropdwon-list__label-font-famility                    : $font-family-base !default;
$dropdown-list__label-color                            : $color-primary !default;
$dropdown-list__label-margin                           : 0 !default;
$dropdown-list__label-padding-left                     : 0 !default;
$dropdown-list__label-padding-right                    : 48px !default;
$dropdown-list__label-border-radius                    : 0 !default;
$dropdown-list__label-width                            : 100% !default;
$dropdown-list__label-height                           : 64px !default;
$dropdown-list__label-bg-color                         : $white !default;
$dropdown-list__label-font-weight                      : $font-weight-bold !default;
$dropdown-list__label-color-hover                      : $gray-darker !default;
$dropdown-list__label-bg-color-hover                   : $white !default;
$dropdown-list__label-text-decoration                  : none !default;
$dropdown-list__label-text-decoration-hover            : none !default;
$dropdown-list__label-text-align                       : left !default;
$dropdown-list__label-border                           : 0 !default;
$dropdown-list__label-cursor                           : pointer !default;
$dropdown-list__label-color--open                      : $color-primary !default;
$dropdown-list__label-bg-color--open                   : $white !default;
$dropdwon-list__label-line-height                      : $font-line-height !default;

// List icon
$dropdown-list__icon-width                             : 24px !default;
$dropdown-list__icon-height                            : 24px !default;
$dropdown-list__icon-fill                              : $color-secondary !default;
$dropdown-list__icon-fill-hover                        : $color-primary !default;
$dropdown-list__icon-fill--open                        : $color-primary !default;
$dropdown-list__icon-rotate--open                      : rotate(180deg) !default;
$dropdown-list__icon-margin                            : auto !default;
$dropdown-list__icon-right                             : $spacer--small !default;

// List content
$dropdown-list__content-transition                     : height 0.3s !default;

// Secondary variant
$dropdown-list__bg-color--secondary                    : $dropdown-list__bg-color !default;
$dropdown-list__label-font-size--secondary             : $font-size-large !default;
$dropdown-list__label-height--secondary                : 48px !default;
$dropdown-list__label-padding-right--secondary         : 48px !default;
$dropdown-list__label-padding-left--secondary          : 0 !default;
$dropdown-list__icon-width--secondary                  : 24px !default;
$dropdown-list__icon-height--secondary                 : 24px !default;
$dropdown-list__label-text-transform--secondary        : uppercase !default;
$dropdown-list__icon-right--secondary                  : $dropdown-list__icon-right !default;

// With nested variant
$dropdown-list__label-font-size--with-nested           : $font-size-base !default;
$dropdown-list__label-font-weight--with-nested         : $font-weight-medium !default;
$dropdown-list__label-height--with-nested              : 56px !default;
$dropdown-list__label-padding-left--with-nested        : 0 !default;
$dropdown-list__label-padding-right--with-nested       : 56px !default;

$dropdown-list__label-color--with-nested               : $color-primary !default;
$dropdown-list__icon-fill--with-nested                 : $color-secondary !default;
$dropdown-list__icon-width--with-nested                : 24px !default;
$dropdown-list__icon-height--with-nested               : 24px !default;
$dropdown-list__icon-right--with-nested                : $spacer--medium !default;

// Inner variant
$dropdown-list__padding--inner                         : 0 0 $spacer--medium $spacer--medium !default;
$dropdown-list__label-color--inner                     : $color-secondary !default;
$dropdown-list__label-text-transform--inner            : capitalize !default;
$dropdown-list__label-font-weight--inner               : $font-weight-base !default;
$dropdown-list__label-border-bottom--inner             : 0 !default;
$dropdown-list__label-font-size--inner                 : $font-size-base !default;
$dropdown-list__label-height--inner                    : 48px !default;
$dropdown-list__label-padding-right--inner             : 48px !default;
$dropdown-list__label-padding-left--inner              : 0 !default;

// with-breakpoint list variables
$dropdown-list__screen--breakpoint                     : $screen-m !default;
$dropdown-list__content-margin--breakpoint             : $spacer $spacer--medium !default;
$dropdown-list__item-bg-color--breakpoint              : transparent !default;

// detailed-content list variables
$dropdown-list__width--detailed-content                : auto !default;
$dropdown-list__label-text-transform--detailed-content : capitalize !default;
$dropdown-list__label-text-decoration--detailed-content: underline !default;
$dropdown-list__label-color--detailed-content          : $color-primary !default;
$dropdown-list__label-font-size--detailed-content      : $font-size-base !default;
$dropdown-list__label-font-weight--detailed-content    : $font-weight-base !default;
$dropdown-list__label-height--detailed-content         : 48px !default;
$dropdown-list__label-padding-right--detailed-content  : 36px !default;
$dropdown-list__label-padding-left--detailed-content   : 0 !default;
$dropdown-list__item-border-bottom--detailed-content   : 0 !default;
$dropdown-list__icon-right--detailed-content           : $spacer--small !default;
$dropdown-list__label-width--detailed-content          : auto !default;

// buttons list variables
$dropdown-list__label-height--buttons                  : 56px !default;
$dropdown-list__label-padding--buttons                 : $spacer--extra-small $spacer !default;
$dropdown-list__label-background-color--buttons        : $gray-lighter !default;
$dropdown-list__label-background-color-active--buttons : $gray-darkest !default;
$dropdown-list__label-text-color-active--buttons       : $white !default;
$dropdown-list__icon-fill-active--buttons              : $white !default;
$dropdown-list__icon-fill--buttons                     : $gray-darkest !default;
$dropdown-list__icon-fill-hover--buttons               : $white !default;
$dropdown-list__text-font-size--buttons                : $font-size-base !default;
$dropdown-list__text-color--buttons                    : $gray-darkest !default;
$dropdown-list__text-color-hover--buttons              : $white !default;
$dropdown-list__content-left--buttons                  : 0 !default;
$dropdown-list__content-top--buttons                   : 100% !default;
$dropdown-list__content-width--buttons                 : 100% !default;
$dropdown-list__content-padding--buttons               : $spacer 0 0 !default;
$dropdown-list__content-background-color--buttons      : $white !default;
$dropdown-list__content-border--buttons                : 1px solid $gray-dark !default;
$dropdown-list__item-padding--buttons                  : $spacer--small $spacer--semi-medium !default;
$dropdown-list__item-font-size--buttons                : $font-size-medium !default;
$dropdown-list__item-font-line-height--buttons         : 1.3 !default;
$dropdown-list__item-background-active--buttons        : $gray-light !default;
  • URL: /components/raw/dropdown-list/_dropdown-list-variables.scss
  • Filesystem Path: build/components/Organisms/dropdown-list/_dropdown-list-variables.scss
  • Size: 8.6 KB
  • Content: 
    @import 'dropdown-list-variables';

.dropdown-list {
    position: relative;
    width: $dropdown-list__width;
    background-color: $dropdown-list__bg-color;

    &--secondary {
        background-color: $dropdown-list__bg-color--secondary;

        .dropdown-list__label {
            font-size: $dropdown-list__label-font-size--secondary;
            text-transform: $dropdown-list__label-text-transform--secondary;

            @include font-padding(
                $dropdown-list__label-font-size--secondary,
                $dropdown-list__label-height--secondary,
                $dropdown-list__label-padding-right--secondary,
                $dropdown-list__label-padding-left--secondary
            );
        }

        .dropdown-list__icon {
            width: $dropdown-list__icon-width--secondary;
            height: $dropdown-list__icon-height--secondary;
            right: $dropdown-list__icon-right--secondary;
        }
    }

    &--with-nested {
        .dropdown-list__label {
            font-size: $dropdown-list__label-font-size--with-nested;
            color: $dropdown-list__label-color--with-nested;
            font-weight: $dropdown-list__label-font-weight--with-nested;

            @include font-padding(
                $dropdown-list__label-font-size--with-nested,
                $dropdown-list__label-height--with-nested,
                $dropdown-list__label-padding-right--with-nested,
                $dropdown-list__label-padding-left--with-nested
            );
        }

        .dropdown-list__icon {
            fill: $dropdown-list__icon-fill--with-nested;
            width: $dropdown-list__icon-width--with-nested;
            height: $dropdown-list__icon-height--with-nested;
            right: $dropdown-list__icon-right--with-nested;
        }
    }

    &--inner {
        padding: $dropdown-list__padding--inner;

        .dropdown-list__label {
            font-size: $dropdown-list__label-font-size--inner;
            font-weight: $dropdown-list__label-font-weight--inner;
            color: $dropdown-list__label-color--inner;
            text-transform: $dropdown-list__label-text-transform--inner;

            @include font-padding(
                $dropdown-list__label-font-size--inner,
                $dropdown-list__label-height--inner,
                $dropdown-list__label-padding-right--inner,
                $dropdown-list__label-padding-left--inner
            );
        }

        .dropdown-list__item {
            border-bottom: $dropdown-list__label-border-bottom--inner;
        }
    }

    &--with-breakpoint {
        @include mq($dropdown-list__screen--breakpoint) {
            // from $dropdown-list__screen--breakpoint dropdown list displays inline and with opened list
            .dropdown-list__list {
                display: flex;
                flex-flow: row nowrap;
            }

            .dropdown-list__item {
                width: 25%;
                cursor: default;
            }

            .dropdown-list__label {
                cursor: default;

                &:hover,
                &.focus-visible {
                    color: $dropdown-list__item-color;
                    background-color: $dropdown-list__item-bg-color--breakpoint;
                }
            }

            .dropdown-list__icon {
                display: none;
            }

            .dropdown-list__content {
                margin: $dropdown-list__content-margin--breakpoint;
                height: auto;
            }
        }
    }

    &--detailed-content {
        .dropdown-list {
            &__list {
                display: inline-block;
                width: $dropdown-list__width--detailed-content;
            }

            &__label {
                font-size: $dropdown-list__label-font-size--detailed-content;
                font-weight: $dropdown-list__label-font-weight--detailed-content;
                text-transform: $dropdown-list__label-text-transform--detailed-content;
                text-decoration: $dropdown-list__label-text-decoration--detailed-content;
                color: $dropdown-list__label-color--detailed-content;
                width: $dropdown-list__label-width--detailed-content;

                @include font-padding(
                    $dropdown-list__label-font-size--detailed-content,
                    $dropdown-list__label-height--detailed-content,
                    $dropdown-list__label-padding-right--detailed-content,
                    $dropdown-list__label-padding-left--detailed-content
                );
            }

            &__item {
                border-bottom: $dropdown-list__item-border-bottom--detailed-content;
            }

            &__icon {
                right: $dropdown-list__icon-right--detailed-content;
            }
        }
    }

    &--buttons {
        position: relative;

        .dropdown-list {
            &__item {
                border: 0;
            }

            &__label {
                display: flex;
                height: $dropdown-list__label-height--buttons;
                padding: $dropdown-list__label-padding--buttons;
                background-color: $dropdown-list__label-background-color--buttons;

                &:hover {
                    .icon {
                        fill: $dropdown-list__icon-fill-hover--buttons;
                    }
                }

                &[aria-expanded="true"] {
                    background-color: $dropdown-list__label-background-color-active--buttons;

                    &:before {
                        background-color: $dropdown-list__label-background-color-active--buttons;
                    }

                    .button__text {
                        color: $dropdown-list__label-text-color-active--buttons;
                    }

                    .icon {
                        fill: $dropdown-list__icon-fill-active--buttons;
                    }
                }
            }
            &__icon {
                position: static;
                fill: $dropdown-list__icon-fill--buttons;
            }

            &__text {
                font-size: $dropdown-list__text-font-size--buttons;
                color: $dropdown-list__text-color--buttons;

                &:hover,
                &:focus {
                    color: $dropdown-list__text-color-hover--buttons;
                }
            }
            &__content {
                position: absolute;
                top: $dropdown-list__content-top--buttons;
                left: $dropdown-list__content-left--buttons;
                width: $dropdown-list__content-width--buttons;
                padding: $dropdown-list__content-padding--buttons;
                background-color: $dropdown-list__content-background-color--buttons;
                border: $dropdown-list__content-border--buttons;
                z-index: 10;

                &--right {
                    left: auto;
                    right: 0;
                }

                .button {
                    width: 100%;
                }
            }
        }

        .list {
            &__item {
                span {
                    display: block;
                    padding: $dropdown-list__item-padding--buttons;
                    font-size: $dropdown-list__item-font-size--buttons;
                    line-height: $dropdown-list__item-font-line-height--buttons;
                    cursor: pointer;

                    &:hover {
                        background-color: $dropdown-list__item-background-active--buttons;
                    }
                }
            }
        }
    }

    &__list {
        display: block;
        width: $dropdown-list__list-width;
        list-style-type: $dropdown-list__list-style-type;
        padding: $dropdown-list__list-padding;
        margin: $dropdown-list__list-margin;
    }

    &__icon {
        position: absolute;
        right: $dropdown-list__icon-right;
        top: 0;
        bottom: 0;
        width: $dropdown-list__icon-width;
        height: $dropdown-list__icon-height;
        margin: $dropdown-list__icon-margin;
        fill: $dropdown-list__icon-fill;
        transition: $dropdown-list__transition;
    }

    &__item {
        position: relative;
        display: block;
        width: $dropdown-list__item-width;
        border-bottom: $dropdown-list__item-border-bottom;
        font-size: $dropdown-list__item-font-size;
    }

    &__label {
        display: block;
        position: relative;
        width: $dropdown-list__label-width;
        background-color: $dropdown-list__label-bg-color;
        margin: $dropdown-list__label-margin;
        border: $dropdown-list__label-border;
        border-radius: $dropdown-list__label-border-radius;
        text-transform: $dropdown-list__label-text-transform;
        text-decoration: $dropdown-list__label-text-decoration;
        text-align: $dropdown-list__label-text-align;
        cursor: $dropdown-list__label-cursor;
        transition: $dropdown-list__transition;
        color: $dropdown-list__label-color;
        font-weight: $dropdown-list__label-font-weight;
        font-size: $dropdown-list__label-font-size;
        font-family: $dropdwon-list__label-font-famility;
        line-height: $dropdwon-list__label-line-height;

        @include font-padding(
            $dropdown-list__label-font-size,
            $dropdown-list__label-height,
            $dropdown-list__label-padding-right,
            $dropdown-list__label-padding-left
        );

        &:hover,
        &.focus-visible {
            color: $dropdown-list__label-color-hover;
            background-color: $dropdown-list__label-bg-color-hover;
            text-decoration: $dropdown-list__label-text-decoration-hover;

            & > .dropdown-list__icon {
                fill: $dropdown-list__icon-fill-hover;
            }
        }

        &[aria-expanded="true"] {
            color: $dropdown-list__label-color--open;
            background-color: $dropdown-list__label-bg-color--open;

            & > .dropdown-list__icon {
                fill: $dropdown-list__icon-fill--open;
                transform: $dropdown-list__icon-rotate--open;
            }

            &.button--icon-filled {
                &:after {
                    background: $dropdown-list__label-bg-color--open;
                }
            }
        }
    }

    &__content {
        overflow: hidden;
        transition: $dropdown-list__content-transition;

        &[aria-hidden="true"] {
            display: none;
        }
    }
}
  • URL: /components/raw/dropdown-list/_dropdown-list.scss
  • Filesystem Path: build/components/Organisms/dropdown-list/_dropdown-list.scss
  • Size: 10.6 KB
  • Content: 
    'use strict';

class DropdownList {  // eslint-disable-line
  constructor(element) {
    this.element = element;
    this.dropdownCollapseLabel = '.dropdown-list__item--collapse > .dropdown-list__label, .dropdown-list__item--collapse > .dropdown-list__label-wrapper > .dropdown-list__label';
    this.dropdownItem = [...this.element.querySelectorAll(this.dropdownCollapseLabel)];
    this.contentClass = 'dropdown-list__content';
    this.mq = '(min-width: 768px)';
    this.mqClass = 'dropdown-list--with-breakpoint';
    this.dropdownMediumOpen = this.element.classList.contains(this.mqClass);
    this.init();
  }

  setAriaAttributes(label, content, expanded) {
    if (expanded) {
      label.setAttribute('aria-expanded', 'false');
      content.setAttribute('aria-hidden', 'true');
    }
    else {
      label.setAttribute('aria-expanded', 'true');
      content.setAttribute('aria-hidden', 'false');
    }
  }

  removeAriaAttributes(label, content) {
    label.removeAttribute('aria-expanded');
    content.setAttribute('aria-hidden', 'false');
    label.disabled = true;
  }

  isMediumOpen(dropdownBlock) {
    return (dropdownBlock.classList.contains(this.mqClass)) && window.matchMedia(this.mq).matches;
  }

  resetMqMediumOpen(item) {
    const dropdownItem = item.parentNode;
    const dropdownContent = dropdownItem.querySelector(`.${this.contentClass}`);

    if (window.matchMedia(this.mq).matches) {
      this.removeAriaAttributes(item, dropdownContent);
    }
    else {
      this.setAriaAttributes(item, dropdownContent, true);
      item.disabled = false;
    }
  }

  toggleContent(trigger, dropdownContent, opening) {
    const dropdownBlock = trigger.closest('.dropdown-list');
    const focusableElements = dropdownContent.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');

    if (!this.isMediumOpen(dropdownBlock)) {
      if (dropdownContent.clientHeight > 0) {
        this.setAriaAttributes(trigger, dropdownContent, true);
        trigger.focus();
      }
      else if (opening) {
        this.setAriaAttributes(trigger, dropdownContent, false);
        if (focusableElements[0]) {
          focusableElements[0].focus();
        }
      }
    }
  }

  setMediumOpen() {
    if (this.dropdownMediumOpen) {
      let dropdownItems = [...this.element.querySelectorAll(this.dropdownCollapseLabel)];
      dropdownItems.forEach(key => this.resetMqMediumOpen(key));
    }
  }

  init() {
    this.dropdownItem.forEach(key => {
      const dropdownId = key.getAttribute('aria-controls');
      const dropdownContent = document.getElementById(dropdownId);

      key.addEventListener('click', e => {
        e.preventDefault();
        this.toggleContent(key, dropdownContent, true);
      }, false);

      [key, dropdownContent].forEach(el => el.addEventListener('keydown', e => {
        if (e.key === 'Escape') {
          this.toggleContent(key, dropdownContent, false);
        }
      }));
    });

    this.setMediumOpen();

    window.addEventListener('resize', () => {
      this.setMediumOpen();
    });
  }
}
  • URL: /components/raw/dropdown-list/dropdown-list.js
  • Filesystem Path: build/components/Organisms/dropdown-list/dropdown-list.js
  • Size: 3.2 KB

Dropdown list

Variants and Usage

  • default - Used as base for other dropdowns
  • with-breakpoint - Used in: Footer
  • secondary - Used in: Filters
  • with-nested - Used in: Sidebar
  • inner - Used in: with-nested
  • detailed-content - Used in: Minicart (to do: name change?)

Accessibility:

  • Buttons (reactive elements, which open dropdown) should have following aria attributes:
    • aria-expanded - set to true if dropdown field is open, to false when it’s closed
    • aria-controls where value it’s an id of content dropdown element
  • Dropdown content should have aria-hidden attribute set to true of it’s closed and to false when it’s open.
  • focus management and keyboard support should be implemented