DigitalConsumer.ISS/src/iss-components/site-sub-header/site-sub-header.vue

<template>
    <div>
        <div
            class="subheader-primary d-flex overflow-hidden">
            <h5
                :class="[justifySubheaderSubText, headerColor]"
                class="fw-normal mb-0 subheader-primary">
                <span>
                    {{ content }}
                </span>
                <buttonBack
                    v-if="hasBackButton"
                    :backButtonAccessibleText="backButtonAccessibleText"
                    @clickEvent="clickEvent" />
            </h5>
        </div>
        <div
            v-if="hasSubText"
            :class="[justifySubheader, subHeaderClasses, subHeaderMarginClasses]"
            class="subheader-secondary d-flex align-items-center overflow-hidden">
            <p
                class="dark-header"
                :class="[alternateFormatting, subTextClasses]">
                <span v-html="subText"> </span>
            </p>
        </div>
    </div>
</template>

<script>
import buttonBack from '@/iss-components/site-sub-header/button-back/button-back.vue';
import {
    doesCopyContainRouterLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
    getRouterLinkHtmlStringFromCopy
} from '@/helpers/cms-content-helper';

import { stripRteStyle } from '@/helpers/text-helper';

export default {
    name: 'site-sub-header',
    components: { buttonBack },
    props: {
        cmsWidgetName: String,
        contentProperty: String,
        darkGraySubText: Boolean,
        hasBackButton: Boolean,
        issContainingPage: String,
        justification: String,
        justificationSubText: String,
        stripRteStyle: Boolean,
        subContentProperty: String,
        subHeaderClasses: String,
        subHeaderMarginClasses: {
            type: String,
            default: 'mt-1'
        },
        subTextClasses: String
    },
    emits: ['click-event'],
    computed: {
        content() {
            return this.getCmsContent(
                this.cmsWidgetName,
                this.contentProperty ?? 'SubHeaderText'
            );
        },
        subText() {
            let subTextFromCms = this.getCmsContent(
                this.cmsWidgetName,
                this.subContentProperty ?? 'SecondaryText'
            );

            if (this.stripRteStyle) {
                subTextFromCms = stripRteStyle(subTextFromCms);
            }

            let subText = '';
            if (this.doesCopyContainRouterLink(subTextFromCms)) {
                splitCopyOnCMSPlaceHolder(subTextFromCms).forEach((sc) => {
                    if (this.doesCopyContainRouterLink(sc)) {
                        subText += getRouterLinkHtmlStringFromCopy(sc);
                    } else {
                        subText += sc;
                    }
                });
            } else {
                subText = subTextFromCms;
            }

            return subText ?? '';
        },
        hasSubText() {
            return this.subText.length > 0;
        },
        backButtonAccessibleText() {
            return this.getCmsContent(
                this.cmsWidgetName,
                'BackButtonAccessibleText'
            );
        },
        headerColor() {
            return this.subText ? 'dark-header' : 'light-header';
        },
        justifySubheader() {
            return this.justification?.toLowerCase() === 'left'
                ? 'justify-content-left'
                : 'justify-content-center';
        },
        justifySubheaderSubText() {
            return this.justificationSubText?.toLowerCase() === 'center'
                ? 'justify-content-center'
                : 'justify-content-left';
        },
        alternateFormatting() {
            // override for service-packages unique style
            if (this.issContainingPage?.toLowerCase() === 'service-packages') {
                return 'service-packages-subtext my-4';
            }
            return this.darkGraySubText ? 'dark-gray' : 'light-gray';
        }
    },
    methods: {
        doesCopyContainRouterLink,
        splitCopyOnCMSPlaceHolder,
        getRouterLinkRouteFromCopy,
        getRouterLinkDisplayTextFromCopy,
        getRouterLinkHtmlStringFromCopy,
        clickEvent() {
            this.$emit('click-event');
        }
    }
};
</script>

<style lang="scss" scoped>
.dark-header {
    color: $black;
}

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

h5 {
    line-height: 32px;

    button {
        color: inherit;
    }
    span {
        color: $black;
    }
    &.justify-content-center {
        text-align: center;
    }
    &.justify-content-left {
        text-align: left;
    }
}
p {
    margin: 0;
    &.light-gray {
        color: $gray-600;
    }
    &.dark-gray {
        color: $darker-gray;
    }
    &.service-packages-subtext {
        font-weight: 500;
        line-height: 24px;
        span {
            font-size: 1rem;
        }
    }
}

.subheader-secondary {
    p {
        margin-bottom: 1.25rem;
        color: #525656;
        font-size: 1rem;
        line-height: 1.56;
        &.justify-content-center {
            text-align: center;
        }
        &.justify-content-left {
            text-align: left;
        }
    }
}
</style>