DigitalConsumer.FixMyGlass/src/ux-components/button-main/button-main.vue

<template>
    <button
        :aria-disabled="isDisabled"
        class="btn rounded-pill d-flex align-items-center justify-content-center py-3 px-6 delay"
        :class="[
            isPrimary ? 'btn-primary' : 'btn-secondary',
            isFloat ? 'float-end' : '',
            isLoaderDisplayed && !suppressLoader ? 'has-loader' : '',
        ]"
        @click="clicked">
        <span class="m-0" v-html="buttonText"></span>
        <loader
            class="ms-2"
            v-if="isLoaderDisplayed && !suppressLoader"
            v-bind:class="[this.loaderColor, this.loaderPosition]" />
    </button>
</template>

<script>
import loader from "@/ux-components/loader/loader";

export default {
    name: "buttonMain",
    props: {
        isPrimary: Boolean,
        buttonText: String,
        isDisabled: Boolean,
        loaderColor: String,
        loaderPosition: String,
        isFloat: Boolean,
        suppressLoader: Boolean,
    },
    data() {
        return {
            isLoaderDisplayed: false,
        };
    },
    methods: {
        removeLoader() {
            this.isLoaderDisplayed = false;
        },
        clicked() {
            this.pushEventToGA(
                this.$route.query[this.queryStrings.FMG_PAGE],
                this.GaActions.CLICKED,
                this.buttonText,
                true
            );
            if (!this.isDisabled) {
                if (!this.suppressLoader) this.isLoaderDisplayed = true;
                this.$emit("click-event");
            }
        },
        resetButtonStyle() {
            this.isLoaderDisplayed = false;
        },
    },
    components: {
        loader,
    },
};
</script>

<style lang="scss">
.btn {
    &:first-child:active {
        background-color: $red;
    }
    &.btn-primary {
        position: relative;
        background: $red;
        border: none;
        color: $white;
        justify-content: center;
        font-weight: 500;
        @media (hover: hover) {
            background: $red;
        }
        &:focus {
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $red;
        }
        &:focus, // Mouse, touch, stylus focus
    &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $red;
            color: $white;
            background: $red;
        }
        &:disabled {
            background: $gray-200 !important;
            background: $red !important;
            color: $white !important;
            font-weight: 400;
            height: 48px;
            border: none;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $white;
            background: $red;
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $red;
            pointer-events: auto;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    &.btn-secondary {
        position: relative;
        background: transparent;
        border: 1px solid $red;
        color: $red;
        font-weight: 500;
        transition: all 150ms linear;
        height: 3rem;
        &:hover {
            color: $white;
        }
        &:focus, // Mouse, touch, stylus focus
    &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px $white,
                0 0 0 5.5px $red;
            color: $white;
        }
        &:disabled {
            background: transparent;
            color: $red !important;
            font-weight: 400;
            height: 48px;
            border: 1px solid $red;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $white;
            pointer-events: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    &.btn-success {
        position: relative;
        background: $green-100;
        border: 1px solid $green-400;
        color: $black;
        font-weight: 500;
        transition: all 150ms linear;
        height: 3rem;
        &:hover {
            color: $black;
            background: $green-200;
        }
        &:focus, // Mouse, touch, stylus focus
        &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px $white,
                0 0 0 5.5px $green-400;
            color: $black;
            background: $green-100;
        }
        &:disabled {
            background: transparent;
            color: $gray-550 !important;
            font-weight: 400;
            height: 48px;
            border: 1px solid $gray-550;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $white;
            pointer-events: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
}
</style>