<div class="stage-insert-audience">
    <ul class="stage-insert-audience__menu">
        <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-employed icon--before" id="icon-a658" 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>
                <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-1c99" 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-fbdf" 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-1825" 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="stage-insert-audience__cta">
                    <button class="button stage-insert-audience__button button--red" id="button-dc86" type="button">Jetzt Mitglied werden
</button>
                </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-c087" 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-00a5" 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-9b48" 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>
        </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",
      "content": {
        "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"
            }
          }
        ]
      }
    },
    {
      "title": "Selbstständige",
      "icon": "big-self-employed",
      "content": {
        "headline": "Selbständig",
        "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.