<div class="more-info">
    <button class="button button--icon button--fluid more-info__trigger" type="button" aria-expanded="false">

        <span class="button__text ">
            More information
        </span>

            <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Show tooltip</title>
    <use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>

</button>

    <div class="more-info__content-wrapper" aria-hidden="true">

        <div class="more-info__content">
            <h3 class="more-info__heading">
                Example title
            </h3>

            <div class="more-info__data">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper
                feugiat. Curabitur egestas neque in leo finibus ultricies.
            </div>

            <button class="button button--icon button--rotate-icon more-info__close" type="button" aria-label="Close more info">
        <svg
    class="icon "
    
        role="presentation"
        focusable="false"
>
        <title>Close more information</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

        </div>

    </div>
</div>
<div class="more-info">
    {{ render '@button--icon' trigger }}
    <div class="more-info__content-wrapper" aria-hidden="true">

        <div class="more-info__content">
            {{ render '@heading' heading }}

            <div class="more-info__data">
                {{ content }}
            </div>
            
            {{ render '@button--icon' closeButton }}
        </div>

    </div>
</div>
{
  "trigger": {
    "tag": "button",
    "class": "button--fluid more-info__trigger",
    "attributes": "type=\"button\" aria-expanded=\"false\"",
    "text": "More information",
    "iconAfter": {
      "title": "Show tooltip",
      "id": "info",
      "class": "button__icon",
      "hidden": true
    }
  },
  "heading": {
    "tag": "h3",
    "text": "Example title",
    "class": "more-info__heading"
  },
  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam venenatis nisl quis imperdiet tincidunt. Nulla massa diam, aliquet vitae laoreet a, fermentum eu velit. Quisque ornare erat in orci hendrerit feugiat at sit amet neque. Fusce elementum semper feugiat. Curabitur egestas neque in leo finibus ultricies.",
  "closeButton": {
    "tag": "button",
    "class": "button--rotate-icon more-info__close",
    "attributes": "type=\"button\" aria-label=\"Close more info\"",
    "text": null,
    "icon": {
      "title": "Close more information",
      "id": "close",
      "hidden": true
    }
  }
}
  • Content:
    $more-info__trigger-bg              : transparent !default;
    $more-info__trigger-color           : $color-primary !default;
    $more-info__trigger-font-size       : $font-size-medium !default;
    $more-info__trigger-font-weight     : $font-weight-normal !default;
    $more-info__trigger-text-decoration : underline !default;
    $more-info__trigger-text-transform  : none !default;
    $more-info__trigger-text-margin     : 0 !default;
    $more-info__trigger-padding         : 0 !default;
    
    $more-info__trigger-icon-fill       : $color-secondary !default;
    $more-info__trigger-icon-margin     : 0 $spacer--small !default;
    
    $more-info__content-color           : $white !default;
    $more-info__content-wrapper-position: absolute !default;
    $more-info__content-wrapper-padding : $spacer--medium !default;
    $more-info__content-wrapper-bg      : $color-primary !default;
    $more-info__content-wrapper-z-index : $z-index-normal !default;
    
    $more-info__close-top               : -$spacer !default;
    $more-info__close-right             : -$spacer !default;
    $more-info__close-background        : transparent !default;
    $more-info__close-icon-fill         : $white !default;
    
    $more-info__heading-color           : $white !default;
    $more-info__heading-font-family     : $font-family-base !default;
    $more-info__heading-font-weight     : $font-weight-bold !default;
    $more-info__heading-text-transform  : none !default;
    
  • URL: /components/raw/more-info/_more-info-variables.scss
  • Filesystem Path: build/components/Organisms/more-info/_more-info-variables.scss
  • Size: 1.4 KB
  • Content:
    @import 'more-info-variables';
    
    .more-info {
        pointer-events: all;
    
        &[aria-hidden="true"] {
            display: none;
            opacity: 0;
        }
    
        &__trigger {
            background: $more-info__trigger-bg;
            justify-content: flex-start;
            padding: $more-info__trigger-padding;
    
            .button__text {
                margin: $more-info__trigger-text-margin;
                color: $more-info__trigger-color;
                font-size: $more-info__trigger-font-size;
                font-weight: $more-info__trigger-font-weight;
                text-decoration: $more-info__trigger-text-decoration;
                text-transform: $more-info__trigger-text-transform;
            }
    
            .button__icon {
                fill: $more-info__trigger-icon-fill;
                margin: $more-info__trigger-icon-margin;
            }
        }
    
        &__content-wrapper {
            position: absolute;
            width: 100%;
            padding: $more-info__content-wrapper-padding;
            background: $more-info__content-wrapper-bg;
            z-index: $more-info__content-wrapper-z-index;
    
            .more-info__trigger[aria-expanded="true"] + & {
                display: block;
                opacity: 1;
            }
            .more-info__trigger[aria-expanded="false"] + & {
                display: none;
                opacity: 0;
            }
        }
    
        &__content {
            position: relative;
        }
    
        &__close {
            position: absolute;
            top: $more-info__close-top;
            right: $more-info__close-right;
            background-color: $more-info__close-background;
    
            .icon {
                fill: $more-info__close-icon-fill;
            }
        }
    
        &__heading {
            color: $more-info__heading-color;
            font-family: $more-info__heading-font-family;
            font-weight: $more-info__heading-font-weight;
            text-transform: $more-info__heading-text-transform;
        }
    
        &__data {
            color: $more-info__content-color;
    
            p {
                color: $more-info__content-color;
            }
        }
    }
    
  • URL: /components/raw/more-info/_more-info.scss
  • Filesystem Path: build/components/Organisms/more-info/_more-info.scss
  • Size: 2 KB
  • Content:
    'use strict';
    
    class MoreInfo {
      constructor(element) {
        this.moreInfo = element;
        this.trigger = this.moreInfo.querySelector('[aria-expanded]');
        this.content = this.moreInfo.querySelector('[aria-hidden]');
        this.closeButton = this.moreInfo.querySelector('.more-info__close');
    
        this.createGlobalEventHandlers();
        this.moreInfo.addEventListener('click', this.onToggleEvent);
      }
    
    
      open(state) {
        this.content.setAttribute('aria-hidden', state);
        this.content.focus();
        // Add events only if tooltip is open - prevent overuse.
        this.initListeners();
      }
    
      close(state) {
        this.content.setAttribute('aria-hidden', state);
        this.trigger.focus();
        this.killListeners();
      }
    
      toggle() {
        let currentState = this.trigger.getAttribute('aria-expanded'),
            triggerNewState = currentState === 'true' ? 'false'  : 'true';
        this.trigger.setAttribute('aria-expanded', triggerNewState)
    
        if (currentState === 'false') {
          this.open(currentState);
        }
        else {
          this.close(currentState);
        }
      }
    
      createGlobalEventHandlers() {
        this.onEscapeEvent = event => {
          // TODO
          // issue: this event is overwritten by dropdown-list keydown event
          if (event.which === 27) {
            this.toggle();
          }
        }
    
        this.onToggleEvent = () => {
          this.toggle()
        }
    
        this.onOutsideEvent = event => {
          if (!(this.moreInfo.contains(event.target) && !this.closeButton.contains(event.target))) {
            this.toggle()
          }
        }
      }
    
      initListeners() {
        window.addEventListener('resize', this.onToggleEvent);
        this.moreInfo.addEventListener('keydown', this.onEscape);
        window.addEventListener('click', this.onOutsideEvent);
      }
    
      killListeners() {
        window.removeEventListener('resize', this.onToggleEvent);
        this.moreInfo.removeEventListener('keydown', this.onEscapeEvent);
        window.removeEventListener('click', this.onOutsideEvent);
      }
    }
    
    const moreInfos = [...document.querySelectorAll('.more-info')];
    
    moreInfos.forEach(item => new MoreInfo(item));
    
  • URL: /components/raw/more-info/more-info.js
  • Filesystem Path: build/components/Organisms/more-info/more-info.js
  • Size: 2.1 KB

There are no notes for this item.