<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <li class="stage-insert-audience__menu-item stage-insert-audience--target-group">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-employed icon--before" id="icon-69cb" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-employed"></use>
</svg> Arbeitnehmer
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Bestes Preis-Leistungs-Verhältnis
                </h1>
                <ol class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-d8d5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Günstigste deutschlandweite Krankenkasse</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-09da" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Überdurchschnittliche Leistungen für Versicherte</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-ae6b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ol>
                <div class="stage-insert-audience__cta">
                    <button class="button stage-insert-audience__button button--red" id="button-e7d5" type="button">Jetzt Mitglied werden
</button>
                    <a class="button stage-insert-audience__button button--blue button--transparent" id="button-c5c1" href="#">Selbstständig
</a>
                </div>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
        <li class="stage-insert-audience__menu-item">
            <div class="stage-insert-audience__menu-item-header">
                <svg class="icon stage-insert-audience__menu-icon icon--big-self-employed icon--before" id="icon-33a7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-big-self-employed"></use>
</svg> Selbstständige
            </div>
            <div class="stage-insert-audience__tab">
                <h1 class="headline headline--headline-1">Selbständig
                </h1>
                <ul class="stage-insert-audience__list">
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-8926" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">Lorem ipsum</span>
                    </li>
                    <li class="stage-insert-audience__list-item">
                        <svg class="icon stage-insert-audience__list-icon icon--checkmark-circle icon--before" id="icon-a8d7" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-checkmark-circle"></use>
</svg><span class="stage-insert-audience__list-item-text">250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr</span>
                    </li>
                </ul>
                <div class="formatted-text formatted-text--small">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem.</p>
                </div>
            </div>
        </li>
    </ul>
</div>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

//- Render stage insert
.stage-insert-audience&attributes(attr)
  //- Elements
  if elements
    ul.stage-insert-audience__menu
      each item in elements
        if item.defaultOrderStyle
          -
            item.itemAttr = item.itemAttr || {};
            item.itemAttr.class = classList(item.itemAttr.class);
            item.itemAttr.class.push('stage-insert-audience--target-group');

        li.stage-insert-audience__menu-item&attributes(item.itemAttr)
          .stage-insert-audience__menu-item-header
            | #[!= include('@icon', { icon: item.icon, before: true, attr: { class: 'stage-insert-audience__menu-icon' } })] #{item.title}

          if item.content
            .stage-insert-audience__tab
              //- Headline
              if item.content.headline
                - item.content.headlineOptions = Object.assign({}, {text: item.content.headline}, item.content.headlineOptions)
                != include('@headline--headline-1', item.content.headlineOptions)

              //- List
              if item.content.list
                - listType = item.content.order ? 'ol' : 'ul'
                #{listType}.stage-insert-audience__list
                  each listItem in item.content.list
                    li.stage-insert-audience__list-item
                      != include('@icon', { icon: 'checkmark-circle', before: true, attr: { class: 'stage-insert-audience__list-icon' } })
                      span.stage-insert-audience__list-item-text #{listItem}

              //- Buttons
              if item.content.buttons
                .stage-insert-audience__cta
                  each button in item.content.buttons
                    - button.settings = Object.assign({}, {attr: { class: 'stage-insert-audience__button'}}, button.settings)
                    != include(`@${button.use}`, button.settings)

              //- text
              if item.content.text
                != include('@formatted-text', {small: true, content: item.content.text})
{
  "elements": [
    {
      "title": "Arbeitnehmer",
      "icon": "big-employed",
      "defaultOrderStyle": true,
      "content": {
        "order": true,
        "headline": "Bestes Preis-Leistungs-Verhältnis",
        "list": [
          "Günstigste deutschlandweite Krankenkasse",
          "Überdurchschnittliche Leistungen für Versicherte",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "buttons": [
          {
            "use": "button--red",
            "settings": {
              "text": "Jetzt Mitglied werden"
            }
          },
          {
            "use": "button--blue",
            "settings": {
              "text": "Selbstständig",
              "transparent": true
            }
          }
        ],
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n"
      }
    },
    {
      "title": "Selbstständige",
      "icon": "big-self-employed",
      "content": {
        "headline": "Selbständig",
        "text": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n",
        "list": [
          "Lorem ipsum",
          "250 Euro Sofortbonus für Gesundheitsaktivitäten im Jahr"
        ],
        "button": "Los geht's"
      }
    }
  ]
}
  • Content:
    import randomId from '../../../javascripts/utils/random-id';
    
    class StageInsertAudience {
      constructor($el) {
        this.$el = $el;
        this.$menu = this.$el
          .querySelector('.stage-insert-audience__menu');
    
        this.$menuItems = this.$el
          .querySelectorAll('.stage-insert-audience__menu-item');
    
        this.initMediaQuery({
          s: '(max-width: 581px)',
          m: '(max-width: 750px)',
        });
        this.initAccessibleAttributes();
        this.initEvents();
    
        this.calculateHeight();
    
        this.resizeHandler = this.handleResize.bind(this);
        window.addEventListener('resize', this.resizeHandler);
      }
    
      initAccessibleAttributes() {
        this.$menu.setAttribute('role', 'tablist');
    
        this.$menuItems.forEach(($menuItem, index) => {
          const id = randomId();
          const $content = $menuItem
            .querySelector('.stage-insert-audience__tab');
    
          // Set IDs
          $menuItem.setAttribute('id', `menu-item-${id}`);
          $content.setAttribute('id', `menu-item-tab-${id}`);
    
          // Set roles
          $menuItem.setAttribute('role', 'tab');
          $menuItem.setAttribute('tabindex', 0);
          $content.setAttribute('role', 'tabpanel');
    
          // Setup relationship
          $menuItem.setAttribute('aria-controls', `menu-item-tab-${id}`);
          $content.setAttribute('aria-labelledby', `menu-item-${id}`);
    
          // Other attributes
          $menuItem.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
          $content.setAttribute('aria-hidden', index === 0 ? 'false' : 'true');
        });
      }
    
      initEvents() {
        this.$menuItems.forEach(
          ($menuItem) => {
            const $header = $menuItem
              .querySelector('.stage-insert-audience__menu-item-header');
    
            $header.addEventListener('click', () => {
              this.toggleShow($menuItem);
            });
          },
        );
    
        this.$menuItems.forEach(
          ($menuItem) => {
            $menuItem.addEventListener('keydown', (event) => {
              const $first =
                this.$menuItems[0];
              const $last =
                this.$menuItems[this.$menuItems.length - 1];
              const $next =
                $last !== $menuItem ? $menuItem.nextElementSibling : false;
              const $prev =
                $first !== $menuItem ? $menuItem.previousElementSibling : false;
    
              // Prevent default event
              if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
                event.preventDefault();
                event.stopPropagation();
              }
    
              // eslint-disable-next-line default-case
              switch (event.which) {
                // Left/Up
                case 37:
                case 38:
                  // Check for previous tab
                  if (!$prev) { $last.focus(); } else { $prev.focus(); }
                  break;
    
                // Right/Down
                case 39:
                case 40:
                  // Check for next tab
                  if (!$next) { $first.focus(); } else { $next.focus(); }
                  break;
    
                // Home
                case 36:
                  // Set focus on first tab
                  $first.focus();
                  break;
    
                // End
                case 35:
                  // Set focus on last tab
                  $last.focus();
                  break;
    
                // Enter/Space
                case 13:
                case 32:
                  // Show content
                  $menuItem
                    .querySelector('.stage-insert-audience__menu-item-header')
                    .click();
                  break;
              }
            });
          },
        );
      }
    
      initMediaQuery(constraints) {
        this.mediaQuery = {};
        Object.keys(constraints).forEach((key) => {
          this.mediaQuery[key] = window.matchMedia(constraints[key]);
        });
      }
    
      toggleShow($el) {
        const selected = this.mediaQuery.s.matches ?
          $el.getAttribute('aria-selected') === 'true' : false;
    
        this.hideAll();
    
        $el.setAttribute('aria-selected', (!selected).toString());
        $el.querySelector('.stage-insert-audience__tab')
          .setAttribute('aria-hidden', (selected).toString());
      }
    
      hideAll() {
        this.$menuItems.forEach(
          ($menuItem) => {
            $menuItem
              .setAttribute('aria-selected', 'false');
    
            $menuItem
              .querySelector('.stage-insert-audience__tab')
              .setAttribute('aria-hidden', 'true');
          },
        );
      }
    
      calculateHeight() {
        this.$menu.removeAttribute('style');
        if (!this.mediaQuery.m.matches) {
          const menuHeight = this.$menu.offsetHeight;
          let maxHeight = menuHeight;
    
          this.$menuItems.forEach(
            ($menuItem) => {
              // make element visible to get height
              this.toggleShow($menuItem);
    
              const $content = $menuItem.querySelector(
                '.stage-insert-audience__tab'
              );
    
              const height = parseInt($content.scrollHeight, 10);
    
              if (height > maxHeight) {
                maxHeight = height;
              }
              // hide element
              this.toggleShow($menuItem);
            }
          );
          // show first tab
          this.toggleShow(this.$menuItems[0]);
          // set menu height
          this.$menu.setAttribute('style', `height: ${maxHeight}px`);
        }
      }
    
      handleResize() {
        this.calculateHeight();
      }
    }
    
    document.querySelectorAll('.stage-insert-audience').forEach(
      $el => new StageInsertAudience($el),
    );
    
  • URL: /components/raw/stage-insert-audience/stage-insert-audience.js
  • Filesystem Path: src/components/organisms/stage-insert-audience/stage-insert-audience.js
  • Size: 5.3 KB
  • Content:
    $stage-insert-min-height: 360px;
    $stage-insert-audience-breakpoint: 750px;
    
    @mixin arrow-svg($color: #fff) {
      background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9"><path fill="' + $color + '" d="M8 6.6L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l7 7c.38.4 1.02.4 1.4 0l7-7c.4-.38.4-1.02 0-1.4-.38-.4-1.02-.4-1.4 0L8 6.6z"/></svg>');
      content: '';
      display: inline-block;
      height: 0.9rem;
      transform: translate(0, -50%);
      transition: $default-transition-duration transform;
      width: 1.6rem;
    }
    
    .stage-insert-audience {
      background-color: $color-steelgrey-light;
      position: relative;
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        display: flex;
        min-height: $stage-insert-min-height;
      }
    }
    
    .stage-insert-audience__tab {
      background-color: $color-steelgrey-light;
      color: $color-blue;
      display: none;
      padding: 3rem 0 2.5rem;
    
      .headline {
        @include mq($from: m, $until: l) {
          font-size: 1.5rem;
        }
      }
    
      .formatted-text {
        color: $color-anthracite;
        margin-top: 1rem;
    
        @include mq($from: l) {
          margin-top: 3rem;
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        padding: 2rem 2.5rem 2.5rem;
        position: absolute;
        right: 4rem;
        top: 0;
        width: calc(60% - 4rem);
      }
    
      @include mq($from: l) {
        padding: 3rem 3.5rem 3.5rem;
        width: calc(70% - 4rem);
      }
    
      @include mq($from: xl) {
        padding: 4rem 4.5rem 4.5rem;
        width: calc(66.66% - 4rem);
      }
    }
    
    .stage-insert-audience__menu {
      @include list-reset();
    
      background-color: $color-blue;
      color: #fff;
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        padding: 2rem 0 2rem 2rem;
        width: 40%;
      }
    
      @include mq($from: l) {
        width: 30%;
      }
    
      @include mq($from: xl) {
        width: 33.33%;
      }
    }
    
    .stage-insert-audience__menu-item {
      background-color: $color-blue;
      padding: 0 2.5rem;
    
      @include mq($until: $stage-insert-audience-breakpoint) {
        position: relative;
    
        &::after {
          @include arrow-svg();
    
          pointer-events: none;
          position: absolute;
          right: 3rem;
          top: 3rem;
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        &:hover {
          background-color: darken($color-blue, 10%);
        }
      }
    }
    
    .stage-insert-audience__menu-item[aria-selected='true'] {
      background-color: $color-steelgrey-light;
      color: $color-blue;
    
      .stage-insert-audience__tab {
        animation: accordionIn 0.45s normal ease-in-out both 1;
        display: block;
      }
    
      @include mq($until: $stage-insert-audience-breakpoint) {
        &::after {
          @include arrow-svg($color-blue);
    
          transform: translate(0, -50%) rotate(180deg);
        }
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        border-radius: 5px 0 0 5px;
      }
    }
    
    .stage-insert-audience__menu-item-header {
      font-size: 1.9rem;
      font-weight: bold;
      line-height: 6rem;
      margin-left: -2.5rem;
      margin-right: -2.5rem;
      min-height: 6rem;
      padding-left: 2.5rem;
      user-select: none;
    
      .stage-insert-audience__menu-item:not(:last-child) & {
        border-bottom: 1px solid darken($color-blue, 10%);
      }
    
      .stage-insert-audience__menu-item[aria-selected='true'] & {
        border-bottom: 0;
      }
    
      &:hover {
        cursor: pointer;
      }
    
      @include mq($from: $stage-insert-audience-breakpoint) {
        margin-right: 0;
      }
    }
    
    .stage-insert-audience__menu-icon {
      height: 1.8em;
      margin-right: 1em;
      position: relative;
      top: 0.5em;
      width: 2em;
    }
    
    .stage-insert-audience__list {
      @include list-reset();
    
      font-size: 1.7rem;
      padding-top: 1rem;
    
      @include mq($from: m, $until: xl) {
        font-size: 1.5rem;
      }
    }
    
    .stage-insert-audience__list-item {
      margin-bottom: 1rem;
      padding-left: 2.5rem;
      position: relative;
    
      &:last-child {
        margin-bottom: 0;
      }
    
      @include mq($from: l) {
        padding-left: 3.5rem;
      }
    }
    
    .stage-insert-audience__list-item-text {
      opacity: 0.85;
    }
    
    .stage-insert-audience__list-icon {
      color: $color-blue;
      left: 0;
      position: absolute;
      top: 0.5rem;
    }
    
    .stage-insert-audience__cta {
      display: flex;
      flex-basis: 21rem;
      flex-wrap: wrap;
      margin-left: -0.75rem;
      margin-top: 1rem;
    
      @include mq($from: l) {
        margin-top: 3rem;
      }
    }
    
    .stage-insert-audience__button {
      margin: 0 0.75rem;
      min-width: 21rem;
    
      & + & {
        margin-left: 0.75rem;
      }
    
      @include mq($until: l) {
        margin-top: 1rem;
      }
    }
    
    @keyframes accordionIn {
      0% {
        opacity: 0;
      }
    
      100% {
        opacity: 1;
      }
    }
    
    .breaker-audience .stage-insert-audience__menu {
      @include mq($from: m) {
        margin-left: -2.5rem;
        padding-left: 0;
      }
    }
    
    .stage-insert-audience--target-group {
      .stage-insert-audience__list-icon {
        display: none;
      }
    
      // stylelint-disable selector-no-qualifying-type
      ul.stage-insert-audience__list {
        list-style: disc;
        padding-left: 2rem;
      }
    
      ol.stage-insert-audience__list {
        list-style: decimal;
        padding-left: 2rem;
      }
    
      .stage-insert-audience__list-item {
        padding-left: 0;
    
        @include mq($from: m) {
          padding-left: 0.5rem;
        }
      }
    }
    
  • URL: /components/raw/stage-insert-audience/stage-insert-audience.scss
  • Filesystem Path: src/components/organisms/stage-insert-audience/stage-insert-audience.scss
  • Size: 5 KB

There are no notes for this item.