Alpaca components for Magento 2

Quantity Update: No Buttons Above Medium 

<div class="quantity-update quantity-update--no-buttons-m">
    <button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
            <use href="/images/icons-sprite.svg#minus"></use>
        </svg>

    </button>

    <input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />

    <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
        <svg class="icon button__icon quantity-update__icon" role="presentation" focusable="false">
            <use href="/images/icons-sprite.svg#plus"></use>
        </svg>

    </button>

</div>

<script src="/components/raw/quantity-update/../quantity-update/quantity-update.js"></script>
 
<div
    class="quantity-update {{ class }}"
    {{{ attributes }}}
>
    {{ render '@button--icon' minusQtyButton }}

    <input
        class="quantity-update__input {{ input.class }}"
        type="number"
        id="{{ input.id }}"
        min="{{ input.min }}"
        value="{{ input.defaultValue }}"
        {{#unless label}}
            aria-label="{{ input.ariaLabel }}"
        {{/unless}}
        {{{ input.attributes }}}
    />

    {{ render '@button--icon' plusQtyButton }}
</div>

{{#if script}}
    <script src="{{ static '../quantity-update/quantity-update.js' }}"></script>
{{/if}}
 
{
  "label": false,
  "input": {
    "id": "qty",
    "min": "1",
    "name": "qty",
    "defaultValue": "1",
    "ariaLabel": "Change the quantity"
  },
  "minusQtyButton": {
    "tag": "button",
    "class": "quantity-update__button quantity-update__button--minus quantity-update__button--disabled",
    "attributes": "type=\"button\" aria-label=\"Decrease the quantity\"",
    "icon": {
      "id": "minus",
      "class": "button__icon quantity-update__icon",
      "hidden": true
    }
  },
  "plusQtyButton": {
    "tag": "button",
    "class": "quantity-update__button quantity-update__button--plus",
    "attributes": "type=\"button\" aria-label=\"Increase the quantity\"",
    "icon": {
      "id": "plus",
      "class": "button__icon quantity-update__icon",
      "hidden": true
    }
  },
  "script": true,
  "class": "quantity-update--no-buttons-m"
}
  • Content: 
    $quantity-update__input-border-style       : solid !default;
$quantity-update__input-border-color       : $border-color-base !default;
$quantity-update__input-border-width       : 1px 0 !default;
$quantity-update__input-border-width--error: 1px !default;
$quantity-update__input-border-radius      : 0 !default;
$quantity-update__input-width              : 70px !default;
$quantity-update__input-height             : 56px !default;
$quantity-update__input-font-size          : $font-size-large !default;
$quantity-update__input-color              : $color-primary !default;

$quantity-update__button-size              : 56px !default;
$quantity-update__button-margin            : 0 !default;
$quantity-update__button-border-style      : $border-style-base !default;
$quantity-update__button-border-color      : $border-color-base !default;
$quantity-update__button-border-width      : $border-width-base !default;

$quantity-update__max-width                : 100% !default;
$quantity-update__max-width\@medium        : $quantity-update__input-width + (2 * $quantity-update__button-size) !default;
$quantity-update__width                    : 100%;

$quantity-update__border--active           : $border-width-base $border-style-base $color-primary !default;
$quantity-update__transition               : $transition-base !default;

$quantity-update__mage-error-bottom        : -$spacer--semi-medium !default;
$quantity-update__mage-error-width         : 250px !default;
  • URL: /components/raw/quantity-update/_quantity-update-variables.scss
  • Filesystem Path: build/components/Organisms/quantity-update/_quantity-update-variables.scss
  • Size: 1.5 KB
  • Content: 
    @import 'quantity-update-variables';

.quantity-update {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    max-width: $quantity-update__max-width;
    width: $quantity-update__width;
    transition: $quantity-update__transition;

    @include mq($screen-m) {
        max-width: $quantity-update__max-width\@medium;
    }

    &--active {
        .quantity-update__input {
            border: $quantity-update__border--active;
        }
    }

    &--no-buttons-m {
        @include mq($screen-m) {
            .quantity-update {
                &__button {
                    display: none;
                }

                &__input {
                    border-width: $border-width-base;
                }
            }
        }

        @include mq($screen-xxl) {
            .quantity-update {
                &__button {
                    display: flex;
                }

                &__input {
                    border-width: $quantity-update__input-border-width;
                }
            }
        }
    }

    &__input {
        flex-grow: 1;
        order: 2;
        border-style: $quantity-update__input-border-style;
        border-color: $quantity-update__input-border-color;
        border-width: $quantity-update__input-border-width;
        border-radius: $quantity-update__input-border-radius;
        width: $quantity-update__input-width;
        height: $quantity-update__input-height;
        color: $quantity-update__input-color;
        font-size: $quantity-update__input-font-size;
        text-align: center;
        appearance: none;

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

        &.focus-visible {
            outline: none;
        }

        &.mage-error {
            border-width: $quantity-update__input-border-width--error;
        }
    }

    & &__button {
        width: $quantity-update__button-size;
        height: $quantity-update__button-size;
        margin: $quantity-update__button-margin;
        border-style: $quantity-update__button-border-style;
        border-color: $quantity-update__button-border-color;
        border-width: $quantity-update__button-border-width;

        &:focus {
            border-color: $quantity-update__button-border-color;
        }

        &--plus {
            border-left: 0;
            order: 3;
        }

        &--minus {
            border-right: 0;
            order: 1;
        }
    }

    &__alert {
        @include visually-hidden();
    }

    // Disable spin buttons in number input type
    input[type="number"]::-webkit-outer-spin-button, // sass-lint:disable-line no-vendor-prefixes
    input[type="number"]::-webkit-inner-spin-button { // sass-lint:disable-line no-vendor-prefixes
        -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
        margin: 0;
    }

    input[type="number"] { // sass-lint:disable-line no-vendor-prefixes
        -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes
    }

    div.mage-error {
        position: absolute;
        bottom: $quantity-update__mage-error-bottom;
        width: $quantity-update__mage-error-width;
        order: 4;
    }
}
  • URL: /components/raw/quantity-update/_quantity-update.scss
  • Filesystem Path: build/components/Organisms/quantity-update/_quantity-update.scss
  • Size: 3.2 KB
  • Content: 
    'use strict';
class QuantityUpdate {
  constructor(htmlDivElement) {
    this.elem = htmlDivElement;
    this.plus = this.elem.querySelector('.quantity-update__button--plus');
    this.minus = this.elem.querySelector('.quantity-update__button--minus');
    this.input = this.elem.querySelector('.quantity-update__input');
    this.activeClass = 'quantity-update--active';
    this.events();
    this.evaluateConditions();
  }
  events() {
    this.plus.addEventListener('click', (ev) => {
      this.increment();
      this.evaluateConditions();
      this.triggerInput(ev);
    });
    this.minus.addEventListener('click', (ev) => {
      this.decrement();
      this.evaluateConditions();
      this.triggerInput(ev);
    });
    this.input.addEventListener('focusin', () => {
      this.elem.classList.add(this.activeClass);
    });
    this.input.addEventListener('focusout', () => {
      this.elem.classList.remove(this.activeClass);
    });
  }
  triggerInput() {
    const event = new Event('change', {
      'bubbles': true,
      'cancelable': true
    });

    this.input.dispatchEvent(event);
  }
  evaluateConditions() {
    this.input.value > 0 ? this.disableMinus() : this.enableMinus();
  }
  increment() {
    this.input.value = Number(this.input.value) + 1;
  }
  decrement() {
    if (this.input.value >= 1) {
      this.input.value = Number(this.input.value) - 1;
    }
  }
  disableMinus() {
    this.minus.classList.remove('quantity-update__button--disabled')
  }
  enableMinus() {
    this.minus.classList.add('quantity-update__button--disabled')
  }
}

(function quantityUpdateObjectsInit() {
  [...document.querySelectorAll('.quantity-update')].forEach((htmlDivElement) => {
    new QuantityUpdate(htmlDivElement);
  });
})();
  • URL: /components/raw/quantity-update/quantity-update.js
  • Filesystem Path: build/components/Organisms/quantity-update/quantity-update.js
  • Size: 1.8 KB

No notes defined.