<div class="promo-bar js-promo-bar">
    <div class="promo-bar__inner u-page-width-max">
        <a class="promo-bar__link" href="#">Free shipping and free returns</a>
        <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

    </button>
    </div>
</div>
<div class="promo-bar js-promo-bar">
  <div class="promo-bar__inner u-page-width-max">
    <a class="promo-bar__link" href="#">{{value}}</a>
    <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      {{render '@icons--close'}}
    </button>
  </div>
</div>
{
  "value": "Free shipping and free returns"
}
  • Content:
    (function (window) {
      'use strict';
    
      function init() {
        const promoBars = document.querySelectorAll('.js-promo-bar');
    
        for (let i = 0; i < promoBars.length; i++) {
          const promoBar = promoBars[i];
    
          if (!promoBar.classList.contains('js-component-init')) {
            const promoBarClose = promoBar.querySelector('.promo-bar__close-button');
    
            promoBarClose.addEventListener('click', (e) => {
              promoBar.classList.add('js-hidden');
              triggerNativeEvent(window, 'resize');
              e.preventDefault;
            });
    
            promoBar.classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/promo-bar/promo-bar.js
  • Filesystem Path: src/components/02-components/promo-bar/promo-bar.js
  • Size: 823 Bytes
  • Content:
    .promo-bar {
      width: 100%;
      min-height: $promo-bar-sm-height;
      padding-top: 2px;
      background-color: $promo-bar-background-color;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 2px;
      line-height: 1.6rem;
      text-align: center;
      text-transform: uppercase;
      z-index: 1;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    
      @include breakpoint($breakpoint-md) {
        min-height: $promo-bar-md-height;
        font-size: 1.4rem;
        line-height: 3.8rem;
    
        .header & {
          position: relative;
          top: auto;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        min-height: $promo-bar-lg-height;
        line-height: 2.8rem;
      }
    }
    
    .promo-bar__inner {
      @include breakpoint($breakpoint-md) {
        position: relative;
      }
    }
    
    .promo-bar__link {
      display: inline-block;
      margin: 0 auto;
      padding: 0 10px;
      color: $color-dark;
      text-decoration: none;
    
      @include breakpoint($breakpoint-md) {
        padding: 0 30px;
      }
    }
    
    .promo-bar__close-button {
      display: none;
      position: absolute;
      top: -2px;
      right: 0;
      width: 40px;
      height: $promo-bar-sm-height;
      padding: 0;
      border: 0;
      background-color: transparent;
      cursor: pointer;
    
      .icon--close {
        fill: $color-dark;
      }
    
      @include breakpoint($breakpoint-md) {
        display: block;
        height: $promo-bar-md-height;
      }
    
      @include breakpoint($breakpoint-lg) {
        height: $promo-bar-lg-height;
      }
    }
    
  • URL: /components/raw/promo-bar/promo-bar.scss
  • Filesystem Path: src/components/02-components/promo-bar/promo-bar.scss
  • Size: 1.4 KB

There are no notes for this item.