DigitalConsumer.FixMyGlass/src/ux-components/text-link/text-link.vue

<template>
    <loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" />
    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">
        {{ text }}
        <slot name="after-text"></slot>
    </a>
    <a
        v-else-if="linkType === 'newWindowLink'"
        @click="handleClick"
        class="new-window-link"
        :href="href"
        target="_blank">
        {{ text }}
        <slot name="after-text"></slot>
    </a>
    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">
        {{ text }}
        <slot name="after-text"></slot>
    </a>
    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
        {{ text }}
        <slot name="after-text"></slot>
    </a>
</template>

<script>
import loadingModal from "@/fmg-components/loading-modal/loading-modal";

export default {
    name: "textLink",
    props: {
        linkType: String,
        text: String,
        href: {
            type: String,
        },
        useLoadingModal: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        handleClick(event) {
            this.pushEventToGA(
                this.$route.query[this.queryStrings.FMG_PAGE],
                this.GaActions.CLICKED,
                this.text,
                true
            );

            if (this.useLoadingModal) {
                this.$refs.loadingModal.showModal();
            }

            this.$emit("click-event");
        },
    },
    components: {
        loadingModal,
    },
};
</script>

<style lang="scss">
a {
    color: $blue;
    text-decoration: none;
    line-height: 2;
    padding: 0 0 4px 0;
    max-width: fit-content;
    &:hover {
        color: $blue-700;
    }
    &.small {
        line-height: 24px;
        &:hover {
            color: $blue-700;
        }
    }
    &.navigation-link,
    &.new-window-link {
        font-size: 0.875rem;
        color: $blue;
        line-height: 26px;
        white-space: nowrap;
        align-items: center;
        font-family: UrbanistSemibold;
        font-weight: 600;
        text-decoration: none;
        @include media-breakpoint-up(md) {
            font-size: 1rem;
        }
    }
    &.new-window-link {
        margin-bottom: 1.5rem;
    }
}
</style>