<div id="dropdown-default" class="dropdown-list dropdown-list--secondary">
    <ul class="dropdown-list__list">
        <li class="
                    dropdown-list__item
                ">
            <a class="dropdown-list__label " href="#">
                All

            </a>

        </li>
        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                dropdown title

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

            </button>

            <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                </div>

            </div>
        </li>
        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-2">
                some longer longer and longer dropdown title

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

            </button>

            <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                <div class="paragraph">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

                        <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        </a>
                    </p>

                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    </span>

                    <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</pre>

                    <blockquote>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    </blockquote>
                </div>

            </div>
        </li>
        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-3">
                dropdown title

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

            </button>

            <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/banner/banner-480_480.png" alt="image alt text">
                </div>

            </div>
        </li>
        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-4">
                dropdown title

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

            </button>

            <div id="dropdown-4" class="dropdown-list__content " aria-hidden="true">
                <div class="paragraph">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

                        <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        </a>
                    </p>

                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    </span>

                    <pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</pre>

                    <blockquote>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                    </blockquote>
                </div>

            </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}}
                >
                    {{ title }}

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

                {{#if contentElement}}
                    <div
                        id="{{ id }}"
                        class="dropdown-list__content {{ class }}"
                        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": "a",
      "title": "All",
      "itemAttributes": "href=\"#\""
    },
    {
      "itemTag": "button",
      "itemAttributes": "aria-expanded=\"false\"",
      "title": "dropdown title",
      "id": "dropdown-1",
      "collapse": {
        "id": "angle-down",
        "title": "Arrow down",
        "class": "dropdown-list__icon",
        "attributes": "aria-hidden=\"true\""
      },
      "contentElement": "image"
    },
    {
      "itemTag": "button",
      "itemAttributes": "aria-expanded=\"false\"",
      "title": "some longer longer and longer dropdown title",
      "id": "dropdown-2",
      "collapse": {
        "id": "angle-down",
        "title": "Arrow down",
        "class": "dropdown-list__icon",
        "attributes": "aria-hidden=\"true\""
      },
      "contentElement": "paragraph"
    },
    {
      "itemTag": "button",
      "itemAttributes": "aria-expanded=\"false\"",
      "title": "dropdown title",
      "id": "dropdown-3",
      "collapse": {
        "id": "angle-down",
        "title": "Arrow down",
        "class": "dropdown-list__icon",
        "attributes": "aria-hidden=\"true\""
      },
      "contentElement": "image"
    },
    {
      "itemTag": "button",
      "itemAttributes": "aria-expanded=\"false\"",
      "title": "dropdown title",
      "id": "dropdown-4",
      "collapse": {
        "id": "angle-down",
        "title": "Arrow down",
        "class": "dropdown-list__icon",
        "attributes": "aria-hidden=\"true\""
      },
      "contentElement": "paragraph"
    }
  ],
  "class": "dropdown-list--secondary"
}
  • Content:
    $dropdown-list__width                     : 100% !default;
    $dropdown-list__bg-color                  : $white !default;
    $dropdown-list__border-radius             : 0 !default;
    $dropdown-list__outline                   : none !default;
    $dropdown-list__font-size                 : $font-size-base !default;
    $dropdown-list__transition-height         : height 0.3s !default;
    $dropdown-list__transition                : $transition-base !default;
    
    // List item
    $dropdown-list__item-padding              : $spacer--medium !default;
    $dropdown-list__item-color                : $font-color-base !default;
    $dropdown-list__item-color--open          : $font-color-base !default;
    $dropdown-list__item-color-hover          : $font-color-base !default;
    $dropdown-list__item-bg-color             : $white !default;
    $dropdown-list__item-bg-color--open       : $bg-color-base !default;
    $dropdown-list__item-bg-color-hover       : $color-primary !default;
    $dropdown-list__item-font-weight          : $font-weight-base !default;
    
    // List icon
    $dropdown-list__icon-width                : 16px !default;
    $dropdown-list__icon-height               : 16px !default;
    $dropdown-list__icon-fill                 : $black !default;
    $dropdown-list__icon-fill-hover           : $color-primary !default;
    $dropdown-list__icon-fill--open           : $white !default;
    
    // Secondary list variant
    $dropdown-list__font-weight--secondary    : $font-weight-bold !default;
    $dropdown-list__bg-color--secondary       : $dropdown-list__bg-color !default;
    $dropdown-list__item-color--secondary     : $dropdown-list__item-color !default;
    $dropdown-list__item-color--secondary-open: $color-primary !default;
    $dropdown-list__icon-size---secondary     : 24px !default;
    $dropdown-list__icon-padding--secondary   : 0 5px !default;
    $dropdown-list__icon-margin--secondary    : 0 0 0 5px !default;
    $dropdown-list__icon-rotate--open         : rotate(180deg) !default;
    $dropdown-list__icon-fill--secondary      : $dropdown-list__icon-fill !default;
    $dropdown-list__icon-fill-hover--secondary: $gray !default;
    $dropdown-list__icon-fill---secondary-open: $color-primary !default;
    
    // Dark list variant
    $dropdown-list__bg-color--dark            : $gray-darker !default;
    $dropdown-list__list-padding--dark        : $spacer--medium !default;
    $dropdown-list__item-border--dark         : 2px solid $gray-darkest !default;
    $dropdown-list__icon-fill--dark           : $white !default;
    $dropdown-list__icon-fill-hover--dark     : $color-primary !default;
    $dropdown-list__item-color--dark          : $color-primary !default;
    $dropdown-list__item-color-hover--dark    : $color-primary !default;
    $dropdown-list__item-bg-color-hover--dark : $color-tertiary !default;
    
    // Light list variant
    $dropdown-list__bg-color--light           : $color-tertiary !default;
    $dropdown-list__list-padding--light       : $spacer--medium !default;
    $dropdown-list__item-border--light        : 2px solid $gray-darkest !default;
    $dropdown-list__icon-fill--light          : $color-primary !default;
    $dropdown-list__icon-fill-hover--light    : $color-primary !default;
    $dropdown-list__item-color--light         : $color-primary !default;
    $dropdown-list__item-color-hover--light   : $color-primary !default;
    $dropdown-list__item-bg-color-hover--light : $color-tertiary !default;
    
    // Inner list variables
    $dropdown-list__item-bg-color--inner      : $gray-lightest !default;
    $dropdown-list__item-color--inner         : $gray-font !default;
    $dropdown-list__item-color-hover--inner   : $font-color-base !default;
    $dropdown-list__icon-fill--inner          : $color-primary !default;
    $dropdown-list__item-border--inner        : 1px solid $gray-lightest !default;
    $dropdown-list__item-border--inner-level2 : 1px solid $gray !default;
    $dropdown-list__item-font-weight--inner   : $font-weight-base !default;
    
    // screen-m list variables
    $dropdown-list__content-margin--screen-m  : $spacer $spacer--medium !default;
    
    .dropdown-list {
        width: $dropdown-list__width;
        position: relative;
        background-color: $dropdown-list__bg-color;
    
        &--secondary {
            background-color: $dropdown-list__bg-color--secondary;
    
            .dropdown-list__label {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-direction: row;
                text-transform: uppercase;
                font-size: $dropdown-list__font-size;
                font-weight: $dropdown-list__font-weight--secondary;
                background-color: $dropdown-list__bg-color--secondary;
                color: $dropdown-list__item-color--secondary;
    
                .dropdown-list__icon {
                    position: relative;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: $dropdown-list__icon-size---secondary;
                    height: $dropdown-list__icon-size---secondary;
                    padding: $dropdown-list__icon-padding--secondary;
                    margin: $dropdown-list__icon-margin--secondary;
                    backface-visibility: hidden;
                    fill: $dropdown-list__icon-fill--secondary;
                }
    
                &:hover,
                &:focus {
                    background-color: $dropdown-list__bg-color--secondary;
                    color: $dropdown-list__item-color--secondary;
                    & > .dropdown-list__icon {
                        fill: $dropdown-list__icon-fill-hover--secondary;
                    }
                }
                &[aria-expanded="true"] {
                    background-color: $dropdown-list__bg-color--secondary;
                    color: $dropdown-list__item-color--secondary-open;
                    & > .dropdown-list__icon {
                        fill: $dropdown-list__icon-fill---secondary-open;
                    }
                }
            }
        }
    
        &--light {
            background-color: $dropdown-list__bg-color--light;
            padding: 0 $dropdown-list__list-padding--light;
    
            .dropdown-list__item {
                border-bottom: $dropdown-list__item-border--light;
            }
    
            .dropdown-list__label {
                background-color: $dropdown-list__bg-color--light;
                color: $dropdown-list__item-color--light;
                font-weight: $font-weight-bold;
    
                &:hover,
                &:focus {
                    color: $dropdown-list__item-color-hover--light;
                    background-color: $dropdown-list__item-bg-color-hover--light;
    
                    & .dropdown-list__icon {
                        fill: $dropdown-list__icon-fill-hover--light;
                    }
                }
    
                & .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill--light;
                }
            }
    
            .dropdown-list__content {
                background-color: $dropdown-list__bg-color--light;
            }
        }
    
        &--inner {
            .dropdown-list__item {
                border-bottom: $dropdown-list__item-border--inner;
            }
            .dropdown-list__label {
                color: $dropdown-list__item-color--inner;
                background-color: $dropdown-list__item-bg-color--inner;
                font-weight: $dropdown-list__item-font-weight--inner;
                &:hover,
                &:focus {
                    color: $dropdown-list__item-color-hover--inner;
                }
                &[aria-expanded="true"] {
                    border-bottom: none;
                }
                & > .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill--inner;
                }
            }
            .dropdown-list--inner {
                .dropdown-list__item {
                    border-bottom: $dropdown-list__item-border--inner-level2;
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    
        &--dark {
            background-color: $dropdown-list__bg-color--dark;
            padding: 0 $dropdown-list__list-padding--dark;
    
            .dropdown-list__item {
                border-bottom: $dropdown-list__item-border--dark;
            }
    
            .dropdown-list__label {
                background-color: $dropdown-list__bg-color--dark;
                color: $dropdown-list__item-color--dark;
                font-weight: $font-weight-bold;
    
                &:hover,
                &:focus {
                    color: $dropdown-list__item-color-hover--dark;
                    background-color: $dropdown-list__item-bg-color-hover--dark;
    
                    & .dropdown-list__icon {
                        fill: $dropdown-list__icon-fill-hover--dark;
                    }
                }
    
                & .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill--dark;
                }
            }
    
            .dropdown-list__content {
                background-color: $dropdown-list__bg-color--dark;
            }
        }
    
        &--inner {
            .dropdown-list__item {
                border-bottom: $dropdown-list__item-border--inner;
            }
            .dropdown-list__label {
                color: $dropdown-list__item-color--inner;
                background-color: $dropdown-list__item-bg-color--inner;
                font-weight: $dropdown-list__item-font-weight--inner;
                &:hover,
                &:focus {
                    color: $dropdown-list__item-color-hover--inner;
                }
                &[aria-expanded="true"] {
                    border-bottom: none;
                }
                & > .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill--inner;
                }
            }
            .dropdown-list--inner {
                .dropdown-list__item {
                    border-bottom: $dropdown-list__item-border--inner-level2;
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    
        &__list {
            display: block;
            width: $dropdown-list__width;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
    
        &__icon {
            position: absolute;
            right: 10px;
            top: 0;
            bottom: 0;
            width: $dropdown-list__icon-width;
            height: $dropdown-list__icon-height;
            margin: auto;
            fill: $dropdown-list__icon-fill;
            transition: $dropdown-list__transition;
        }
    
        &__item {
            position: relative;
            display: block;
            width: 100%;
            padding: 0;
            font-size: $dropdown-list__font-size;
    
            &--collapse {
                .dropdown-list__label {
                    padding-right: 30px;
                }
            }
        }
    
        &__label {
            display: block;
            position: relative;
            width: 100%;
            background-color: $dropdown-list__item-bg-color;
            padding: $dropdown-list__item-padding;
            margin: 0;
            border: 0;
            border-radius: $dropdown-list__border-radius;
            text-decoration: none;
            text-align: left;
            cursor: pointer;
            transition: $dropdown-list__transition;
            color: $dropdown-list__item-color;
            font-weight: $dropdown-list__item-font-weight;
    
            &:hover,
            &:focus {
                color: $dropdown-list__item-color-hover;
                background-color: $dropdown-list__item-bg-color-hover--light;
                outline: $dropdown-list__outline;
    
                & > .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill-hover;
                }
            }
    
            &[aria-expanded="true"] {
                color: $dropdown-list__item-color--open;
                background-color: $dropdown-list__item-bg-color--open;
    
                & > .dropdown-list__icon {
                    fill: $dropdown-list__icon-fill--open;
                    transform: $dropdown-list__icon-rotate--open;
                }
            }
    
            .dropdown-list--inner .dropdown-list--inner & {
                padding-left: $dropdown-list__item-padding * 2;
            }
            .dropdown-list--inner .dropdown-list--inner .dropdown-list--inner & {
                padding-left: $dropdown-list__item-padding * 3;
            }
        }
    
        &__content {
            overflow: hidden;
            transition: $dropdown-list__transition-height;
            &[aria-hidden="true"] {
                display: none;
            }
        }
    
        @include mq($screen-m) {
            // from $screen-m drpdown list displays inline and with opened list
            &--is-open\@screen-m {
                .dropdown-list__list {
                    display: flex;
                    flex-flow: row nowrap;
                }
    
                .dropdown-list__item {
                    width: 25%;
                    cursor: default;
                }
    
                .dropdown-list__label {
                    cursor: default;
                    &:hover,
                    &:focus {
                        color: $dropdown-list__item-color;
                        background-color: $dropdown-list__item-bg-color;
                    }
                }
                .dropdown-list__icon {
                    display: none;
                }
                .dropdown-list__content {
                    margin: $dropdown-list__content-margin--screen-m;
                    height: auto;
                }
    
                &.dropdown-list--dark {
                    .dropdown-list__label {
                        &:hover,
                        &:focus {
                            color: $dropdown-list__item-color--dark;
                            background-color: $dropdown-list__item-bg-color-hover--dark;
                        }
                    }
                }
            }
        }
    }
    
  • URL: /components/raw/dropdown-list/_dropdown-list.scss
  • Filesystem Path: build/components/02-elements/dropdown-list/_dropdown-list.scss
  • Size: 13.2 KB
  • Content:
    'use strict';
    
    class DropdownList {  // eslint-disable-line
      constructor(element) {
        this.element = element;
        this.dropdownCollapseLabel = '.dropdown-list__item--collapse > .dropdown-list__label';
        this.dropdownItem = [...this.element.querySelectorAll(this.dropdownCollapseLabel)];
        this.contentClass = 'dropdown-list__content';
        this.mq = '(min-width: 768px)';
        this.mqClass = 'dropdown-list--is-open@screen-m';
        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('dropdown-list--is-open@screen-m')) && window.matchMedia(this.mq).matches;
      }
    
      resetMqMediumOpen(item) {
        const dropdownItem    = item.parentNode,
              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'),
              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'),
                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/02-elements/dropdown-list/dropdown-list.js
  • Size: 3.1 KB

Dropdown list

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