Alpaca components for Magento 2

Marketing Bar 

<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 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        : $color-primary !default;
$marketing-bar__container-margin        : 0 auto !default;
$marketing-bar__container-max-width     : $max-content-width !default;
$marketing-bar__min-height              : 40px !default;
$marketing-bar__button-position         : absolute !default;
$marketing-bar__button-right            : 0 !default;
$marketing-bar__button-size             : 40px !default;
$marketing-bar__button-background-color : transparent !default;
$marketing-bar__button-icon-fill        : $white !default;
$marketing-bar__button-icon-fill--hover : $marketing-bar__background-color !default;

$marketing-bar__text-width              : calc(100% - #{$marketing-bar__button-size}) !default;
$marketing-bar__text-padding            : $spacer--extra-small $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         : $gray-light !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.3 KB
  • Content: 
    @import 'marketing-bar-variables';

.marketing-bar {
    position: relative;
    display: flex;
    align-items: center;
    padding: $marketing-bar__padding;
    min-height: $marketing-bar__min-height;
    background-color: $marketing-bar__background-color;
    overflow: hidden;

    &--closed {
        display: none;
    }

    &__container {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: $marketing-bar__container-max-width;
        margin: $marketing-bar__container-margin;

        @include mq($screen-m) {
            justify-content: center;
        }
    }

    &__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;

        @include mq($screen-m) {
            text-align: center;
            font-size: $marketing-bar__text-font-size\@medium;
            line-height: $marketing-bar__text-line-height\@medium;
        }
    }

    &__close {
        position: $marketing-bar__button-position;
        right: $marketing-bar__button-right;
        min-height: $marketing-bar__button-size;
        background-color: $marketing-bar__button-background-color;

        &:hover {
            .marketing-bar__close-icon {
                fill: $marketing-bar__button-icon-fill--hover;
            }
        }

        .marketing-bar__close-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.8 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;
    const dataType = marketingBar.dataset.type;
    const 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

No notes defined.