Alpaca components for Magento 2

Banner: Secondary 

<a href="#" class="banner " aria-label="descriptive text about banner action and / or image">
    <picture class="image ">
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-320_176.jpg" media="(max-width: 480px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-768_416.jpg" media="(max-width: 960px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1024_416.jpg" media="(max-width: 1328px)" />
        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1920_512.jpg" media="" />

        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-320_176.jpg" alt="banner-image" />
    </picture>

    <div class="banner__content">
        <p class="banner__text">
            Clothing
        </p>
        <span class="banner__icon">
            <svg class="icon " role="presentation" focusable="false">
                <title>Arrow right icon</title>
                <use href="/images/icons-sprite.svg#arrow-right"></use>
            </svg>

        </span>
    </div>
</a>
 
<a
    href="{{ link }}"
    class="banner {{ class }}"
    {{{ attributes }}}
>
    {{ render '@image--picture' image }}

    <div class="banner__content">
        <p class="banner__text">
            {{ text }}
        </p>
        <span class="banner__icon">
            {{ render '@icon' icon }}
        </span>
    </div>
</a>
 
{
  "link": "#",
  "attributes": "aria-label=\"descriptive text about banner action and / or image\"",
  "image": {
    "defaultSrc": "/images/banner/banner-320_176.jpg",
    "sources": [
      {
        "src": "/images/banner/banner-320_176.jpg",
        "mediaQuery": "(max-width: 480px)"
      },
      {
        "src": "/images/banner/banner-768_416.jpg",
        "mediaQuery": "(max-width: 960px)"
      },
      {
        "src": "/images/banner/banner-1024_416.jpg",
        "mediaQuery": "(max-width: 1328px)"
      },
      {
        "src": "/images/banner/banner-1920_512.jpg",
        "mediaQuery": ""
      }
    ],
    "alt": "banner-image"
  },
  "icon": {
    "id": "arrow-right",
    "title": "Arrow right icon",
    "hidden": true
  },
  "text": "Clothing"
}
  • Content: 
    $banner__width                                              : 100% !default;
$banner__text-decoration                                    : none !default;

$banner__image-width                                        : 100% !default;

$banner__content-padding                                    : $spacer--medium $spacer--extra-small $spacer--small !default;
$banner__content-padding\@medium                            : $spacer--medium 0 $spacer--small $spacer--semi-medium !default;
$banner__content-padding--category                          : $spacer--medium !default;
$banner__content-padding--category\@medium                  : $spacer--semi-large $spacer--semi-medium !default;
$banner__content-padding--category\@large                   : $spacer--semi-large $spacer--semi-large * 2 !default;
$banner__content-border                                     : $spacer--extra-small solid $gray-light !default;
$banner__content-background                                 : $bg-color-base !default;
$banner__content-after-height                               : $spacer--extra-small !default;
$banner__content-after-background                           : $color-primary !default;
$banner__content-after-transition                           : $transition-base !default;
$banner__content-after-left                                 : $spacer !default;
$banner__content-after-width-hover                          : calc(100% - #{2 * $spacer}) !default;
$banner__content-after-min-width                            : 0 !default;

$banner__text-margin                                        : 0 !default;
$banner__text-color                                         : $color-primary !default;
$banner__text-font-size                                     : $font-size-base !default;
$banner__text-font-size\@medium                             : $font-size-large !default;
$banner__text-font-weight                                   : $font-weight-bold !default;
$banner__text-text-transform                                : uppercase !default;

$banner__icon-size                                          : 48px !default;

$banner__button-collapse-transform                          : rotate(180deg) !default;
$banner__button-padding--category                           : 0 !default;
$banner__button-text-color-hover--category                  : $color-primary !default;
$banner__button-icon-fill-hover--category                   : $color-primary !default;
$banner__button-text-decoration--category                   : underline !default;
$banner__button-collapse-position--category\@large          : absolute !default;
$banner__button-collapse-right--category\@large             : 0 !default;
$banner__button-collapse-position--category-image\@large    : relative !default;
$banner__button-text-margin--category-image                 : 0 $spacer 0 0 !default;

$banner__actions-wrapper-padding                            : $spacer--medium 0 0 0 !default;

$banner__heading-wrapper-padding--category-image            : 0 0 0 $spacer--medium !default;
$banner__heading-wrapper-position--category-image\@medium   : absolute !default;
$banner__heading-wrapper-bottom--category-image\@medium     : 32px !default;
$banner__heading-wrapper-bottom--category-image\@large      : 40px !default;
$banner__heading-wrapper-bottom--category-image\@xl         : 48px !default;
$banner__heading-wrapper-left--category-image\@medium       : 32px !default;
$banner__heading-wrapper-left--category-image\@large        : 48px !default;
$banner__heading-wrapper-left--category-image\@xl           : 56px !default;
$banner__heading-wrapper-background--category-image\@medium : $white !default;
$banner__heading-wrapper-width--category-image\@medium      : 100% !default;
$banner__heading-wrapper-max-width--category-image\@medium  : 375px !default;
$banner__heading-wrapper-padding--category-image\@medium    : $spacer--semi-medium $spacer--large $spacer--medium !default;

$banner__heading-margin--category                           : 0 !default;
$banner__heading-margin--category-image                     : $spacer--semi-medium 0 0 !default;
$banner__heading-margin--category-image\@medium             : 0 !default;
  • URL: /components/raw/banner/_banner-variables.scss
  • Filesystem Path: build/components/Organisms/banner/_banner-variables.scss
  • Size: 4.2 KB
  • Content: 
    @import 'banner-variables';

.banner {
    position: relative;
    display: block;
    width: $banner__width;
    text-decoration: $banner__text-decoration;
    @include darken-layout-hover('.ratio-container');

    &:hover,
    &.focus-visible {
        text-decoration: $banner__text-decoration;

        .banner__content {
            &:after {
                width: $banner__content-after-width-hover;
            }
        }
    }

    &__image {
        width: $banner__image-width;
    }

    &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $banner__content-padding;
        border-bottom: $banner__content-border;
        background: $banner__content-background;

        @include mq($screen-m) {
            padding: $banner__content-padding\@medium;
        }

        &--category {
            display: none;
            padding: $banner__content-padding--category;

            @include mq($screen-m) {
                padding: $banner__content-padding--category\@medium;
            }

            @include mq($screen-l) {
                padding: $banner__content-padding--category\@large;
            }
        }

        &:after {
            content: '';
            position: absolute;
            left: $banner__content-after-left;
            bottom: 0;
            width: 0;
            min-width: $banner__content-after-min-width;
            height: $banner__content-after-height;
            background: $banner__content-after-background;
            transition: $banner__content-after-transition;
        }
    }

    &__text {
        margin: $banner__text-margin;
        color: $banner__text-color;
        font-size: $banner__text-font-size;
        font-weight: $banner__text-font-weight;
        text-transform: $banner__text-text-transform;

        @include mq($screen-m) {
            font-size: $banner__text-font-size\@medium;
        }
    }

    &__icon {
        display: none;
        justify-content: center;
        align-items: center;
        width: $banner__icon-size;
        height: $banner__icon-size;

        @include mq($screen-m) {
            display: flex;
        }
    }

    &__image-wrapper {
        position: relative;
    }

    &__actions-wrapper {
        display: flex;
        flex-direction: column;
        padding: $banner__actions-wrapper-padding;

        @include mq($screen-l) {
            flex-direction: row-reverse;
            justify-content: space-between;
        }
    }

    &--category {
        position: static;

        .banner__image-wrapper {
            display: flex;
            flex-direction: column;
        }

        .banner__button {
            padding: $banner__button-padding--category;

            &:hover {
                &:before,
                &:after {
                    display: none;
                }

                .banner__button-text {
                    color: $banner__button-text-color-hover--category;
                }

                .banner__button-icon {
                    fill: $banner__button-icon-fill-hover--category;
                }
            }
        }

        .banner__button-text {
            text-decoration: $banner__button-text-decoration--category;
        }

        .banner__button-collapse {
            @include mq($screen-l) {
                position: $banner__button-collapse-position--category\@large;
                right: $banner__button-collapse-right--category\@large;
            }
        }

        .banner__button-close {
            &:hover {
                &:before,
                &:after {
                    display: none;
                }
            }

            @include mq($screen-l) {
                justify-content: flex-end;
            }
        }

        .banner__wrapper {
            position: relative;
        }

        .banner__heading-wrapper {
            display: flex;
            flex-direction: column;
        }

        .banner__heading {
            .heading {
                margin: $banner__heading-margin--category;
            }
        }
    }

    &--category-image {
        .banner__heading-wrapper {
            padding: $banner__heading-wrapper-padding--category-image;

            @include mq($screen-m) {
                position: $banner__heading-wrapper-position--category-image\@medium;
                bottom: $banner__heading-wrapper-bottom--category-image\@medium;
                left: $banner__heading-wrapper-left--category-image\@medium;
                background-color:  $banner__heading-wrapper-background--category-image\@medium;
                width: $banner__heading-wrapper-width--category-image\@medium;
                max-width: $banner__heading-wrapper-max-width--category-image\@medium;
                padding: $banner__heading-wrapper-padding--category-image\@medium;
            }

            @include mq($screen-l) {
                bottom: $banner__heading-wrapper-bottom--category-image\@large;
                left: $banner__heading-wrapper-left--category-image\@large;
            }

            @include mq($screen-xl) {
                bottom: $banner__heading-wrapper-bottom--category-image\@xl;
                left: $banner__heading-wrapper-left--category-image\@xl;
            }
        }

        .banner__heading {
            margin: $banner__heading-margin--category-image;

            @include mq($screen-m) {
                margin: $banner__heading-margin--category-image\@medium;
            }

            .heading {
                // Overwrite WebForms text-center class
                text-align: left !important;  // sass-lint:disable-line no-important
            }
        }

        .banner__actions-wrapper {
            @include mq($screen-l) {
                flex-direction: row;
            }
        }

        .banner__button {
            justify-content: flex-start;
        }

        .banner__button-collapse {
            @include mq($screen-l) {
                position: $banner__button-collapse-position--category-image\@large;
            }
        }

        .banner__button-text {
            margin: $banner__button-text-margin--category-image;
        }
    }

    &--is-open {
        .banner__content--category {
            display: block;
        }

        .banner__button-collapse {
            .icon {
                transform: $banner__button-collapse-transform;
            }
        }
    }
}
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: build/components/Organisms/banner/_banner.scss
  • Size: 6.5 KB
  • Content: 
    'use strict';

class Banner {
  constructor(element) {
    this.element = element;
    this.triggerButton = element.querySelector('.banner__button-collapse');
    this.closeButton = element.querySelector('.banner__button-close');
    this.content = element.querySelector('.banner__content--category');

    this.triggerButton.addEventListener('click', () => this.toggle());
    this.createGlobalEventHandlers();
  }

  open() {
    this.element.classList.add('banner--is-open');
    this.setAccesbilityAttr('aria-hidden', 'false');
    this.content.focus();
    this.initListeners();
  }

  close() {
    this.element.classList.remove('banner--is-open');
    this.setAccesbilityAttr('aria-hidden', 'true');
    this.triggerButton.focus();
    this.killListeners();
  }

  toggle() {
    if (this.element.classList.contains('banner--is-open')) {
      this.close();
    }
    else {
      this.open();
    }
  }

  setAccesbilityAttr(type, variable) {
    this.content.setAttribute(type, variable);
  }

  initListeners() {
    window.addEventListener('keydown', this.onEscapeEvent);
    this.closeButton.addEventListener('click', this.onCloseEvent)
  }

  killListeners() {
    window.removeEventListener('keydown', this.onEscapeEvent);
    this.closeButton.removeEventListener('click', this.onCloseEvent)
  }

  createGlobalEventHandlers() {
    this.onCloseEvent = () => this.close();

    this.onEscapeEvent = e => {
      if (e.which === 27) {
        this.close();
      }
    }
  }
}

new Banner(document.querySelector('.banner.banner--category'));
  • URL: /components/raw/banner/banner.js
  • Filesystem Path: build/components/Organisms/banner/banner.js
  • Size: 1.6 KB

No notes defined.