<template>
  <article class="buttons">
    <div class="container buttons__container">
      <div class="row buttons__row">
        <header class="col-12 buttons__header">
          <h2 class="buttons__title">Button shapes & states</h2>
        </header>
        <div class="col-12">
          <div class="row">
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="sharp" text="Sharp Edge"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="sharp-double" text="Sharp Double Edge"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="round-edge" text="Round Edge"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-edge" text="Rounded Edge"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-icon" icon="/images/icons/primary/add_icon.svg" icon-side="left" text="Left icon"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-icon" icon="/images/icons/primary/add_icon.svg" icon-side="right" text="Right icon"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="sharp" text="Sharp Edge" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="sharp-double" text="Sharp Double Edge" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="round-edge" text="Round Edge" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-edge" text="Rounded Edge" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-icon" icon="/images/icons/secondary/add_icon.svg" icon-side="left" text="Left icon" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="rounded-icon" icon="/images/icons/secondary/add_icon.svg" icon-side="right" text="Right icon" btn-style="outline"></main-button>
            </div>
            <div class="col-12 col-lg-3 buttons__item">
              <main-button btn-type="sharp" text="Sharp disabled" :disabled="true"></main-button>
            </div>
          </div>
        </div>
        <header class="col-12 buttons__header">
          <h2 class="buttons__title">Misc buttons</h2>
        </header>
        <div class="col-12">
          <div class="row">
            <div class="col-12 col-lg-2 buttons__item">
              <misc-button icon="/images/icons/primary/add_icon.svg" icon-alt="Add"></misc-button>
            </div>
            <div class="col-12 col-lg-2 buttons__item">
              <misc-button icon="/images/icons/primary/close_icon.svg" icon-alt="Add"></misc-button>
            </div>
            <div class="col-12 col-lg-2 buttons__item">
              <misc-button icon="/images/icons/primary/intercom_icon.svg" icon-alt="Add"></misc-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'buttons-ui',
  components: {
    MainButton: () => import('@/components/buttons/MainButton.vue'),
    MiscButton: () => import('@/components/buttons/MiscButton.vue'),
  }
}
</script>

<style lang="scss" scoped>
.buttons {
  &__header {
    margin-bottom: 65px;
    margin-bottom: 6.5rem;
    h2 {
      @include h3;
    }
  }
  &__item {
    margin-bottom: 30px;
    margin-bottom: 3rem;
    text-align: center;
  }
}
</style>

