<div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
    <div class="container marketing-bar__container">
        <div class="marketing-bar__text">
            Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
        </div>
        <button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
            <svg class="icon button__icon marketing-bar__close-icon" role="img">
                <title>Close</title>
                <use xlink:href="/images/icons-sprite.svg#close"></use>
            </svg>

        </button>

    </div>
</div>
<script src="/components/raw/marketing-bar/marketing-bar.js"></script>
<div
    class="marketing-bar {{ class }}"
    {{{ attributes }}}
>
    <div class="container marketing-bar__container">
        <div class="marketing-bar__text">
            {{ text }}
        </div>
        {{ render '@button--rotate-icon' closeButton }}
    </div>
</div>
<script src="{{static 'marketing-bar.js' }}"></script>
{
  "closeIcon": "close",
  "text": "Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.",
  "class": "marketing-bar--closed",
  "attributes": "data-type=\"marketing-bar\"",
  "closeButton": {
    "tag": "button",
    "text": "",
    "class": "button--rotate-icon marketing-bar__close",
    "icon": {
      "id": "close",
      "title": "Close",
      "class": "button__icon marketing-bar__close-icon"
    },
    "attributes": "type=\"button\" aria-label=\"Close marketing bar\""
  }
}
  • Content:
    $marketing-bar__padding                 : 0 !default;
    $marketing-bar__background-color        : rgba(134, 189, 80, 0.2) !default;
    $marketing-bar__margin-top              : 0 !default;
    $marketing-bar__container-margin        : 0 auto !default;
    $marketing-bar__container-max-width     : $max-content-width !default;
    
    $marketing-bar__button-size             : 40px !default;
    $marketing-bar__button-background-color : transparent !default;
    $marketing-bar__button-icon-fill        : $white !default;
    
    $marketing-bar__text-width              : calc(100% - #{$marketing-bar__button-size}) !default;
    $marketing-bar__text-padding            : $spacer !default;
    $marketing-bar__text-font-size          : $font-size-extra-small !default;
    $marketing-bar__text-font-size\@medium  : $font-size-base !default;
    $marketing-bar__text-font-color         : $black !default;
    $marketing-bar__text-font-weight        : $font-weight-normal !default;
    $marketing-bar__text-line-height        : 14px !default;
    $marketing-bar__text-line-height\@medium: 24px !default;
    $marketing-bar__text-transform          : uppercase !default;
    
  • URL: /components/raw/marketing-bar/_marketing-bar-variables.scss
  • Filesystem Path: build/components/Organisms/marketing-bar/_marketing-bar-variables.scss
  • Size: 1.1 KB
  • Content:
    @import 'marketing-bar-variables';
    
    .marketing-bar {
        position: relative;
        padding: $marketing-bar__padding;
        background-color: $marketing-bar__background-color;
        overflow: hidden;
        margin-top: $marketing-bar__margin-top;
        &--closed {
            display: none;
        }
    
        &__container {
            position: relative;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: $marketing-bar__container-max-width;
            margin: $marketing-bar__container-margin;
        }
    
        &__text {
            width: $marketing-bar__text-width;
            padding: $marketing-bar__text-padding;
        }
    
        &__text,
        &__text p {
            font-size: $marketing-bar__text-font-size;
            font-weight: $marketing-bar__text-font-weight;
            line-height: $marketing-bar__text-line-height;
            color: $marketing-bar__text-font-color;
            text-transform: $marketing-bar__text-transform;
            margin: 0;
            text-align: center;
    
            @include mq($screen-m) {
                font-size: $marketing-bar__text-font-size\@medium;
                line-height: $marketing-bar__text-line-height\@medium;
            }
        }
    
        &__close {
            min-height: $marketing-bar__button-size;
            background-color: $marketing-bar__button-background-color;
    
            .button__icon {
                fill: $marketing-bar__button-icon-fill;
            }
        }
    }
    
  • URL: /components/raw/marketing-bar/_marketing-bar.scss
  • Filesystem Path: build/components/Organisms/marketing-bar/_marketing-bar.scss
  • Size: 1.4 KB
  • Content:
    'use strict'
    class MarketingBar {
      constructor() {
        this.closing = document.querySelectorAll('.marketing-bar__close');
        this.bars = document.querySelectorAll('.marketing-bar');
    
        this.start();
      }
      closeBar(el) {
        const marketingBar = el.currentTarget.parentElement.parentElement,
              dataType      = marketingBar.dataset.type,
              focusable     = document.querySelectorAll('button:not([disabled]), a[href], area[href] input:not([disabled]), select:not([disabled]), textarea:not([disabled]), *[tabindex]:not([tabindex="-1"]), object, embed, *[contenteditable]');
    
        marketingBar.classList.add('marketing-bar--closed');
        localStorage.setItem(dataType, 'closed');
        // after closing message box move focus on first visible focusable element on the page
        if (focusable.length) {
          let firstFocusable = [...focusable].find(el => {
            return el.offsetParent !== null
          })
          firstFocusable.focus();
        }
      }
      setListeners() {
        this.closing.forEach(el => {
          el.addEventListener('click', this.closeBar);
        });
      }
      start() {
        // Display message if it wasn't closed before
        this.bars.forEach(el => {
          const dataType = el.dataset.type;
          if (localStorage.getItem(dataType) !== 'closed') {
            el.classList.remove('marketing-bar--closed')
          }
        });
        this.setListeners();
      }
    }
    new MarketingBar();
    
  • URL: /components/raw/marketing-bar/marketing-bar.js
  • Filesystem Path: build/components/Organisms/marketing-bar/marketing-bar.js
  • Size: 1.4 KB

There are no notes for this item.