DigitalConsumer.FixMyGlass/src/fmg-components/funnel-sub-header/funnel-sub-header.vue

<template>
    <div class="funnel-sub-header">
        <div class="d-flex align-items-center overflow-hidden">
            <h5 class="fw-normal mb-0" :class="headerColor">
                <span>
                    {{ text }}
                </span>
                <buttonBack
                    v-if="hasBackButton"
                    :backButtonAccessibleText="backButtonAccessibleText"
                    @click-event="clickEvent" />
            </h5>
        </div>
        <div v-if="subText" class="d-flex align-self-center overflow-hidden mt-1">
            <p class="small fw-normal sub-text">
                <span v-html="boldedSubHeaderText"></span>
            </p>
        </div>
    </div>
</template>

<script>
import buttonBack from "@/fmg-components/funnel-sub-header/button-back/button-back";

export default {
    name: "FunnelSubHeader",
    props: {
        hasBackButton: Boolean,
        cmsWidgetName: String,
        headerColor: {
            type: String,
            default: "dark-header",
        },
    },
    components: {
        buttonBack,
    },
    computed: {
        boldedSubHeaderText() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
        },
        text() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        subText() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderSubText");
        },
        backButtonAccessibleText() {
            return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText");
        },
    },
    methods: {
        clickEvent() {
            this.$emit("click-event");
        },
    },
};
</script>

<style lang="scss" scoped>
:deep(.bolded-words) {
    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
}
h5 {
    line-height: 32px;
    font-size: 1.25rem;

    button {
        color: inherit;
    }
}

.dark-header {
    color: $black;
}

.light-header {
    color: $gray-550;
}

p.small {
    color: $gray-550;
}
.sub-text {
    margin: 0;
    @include responsive-font-size-md(0.875rem, 1rem);
}

.justify-content-start {
    padding-left: 0;
}
</style>